/* ========================================================================== NUPLUS CORP — Design system (nuplus-system.css) -------------------------------------------------------------------------- Load order: style.css → nuplus-ui.css → nuplus-system.css → nuplus-depth.css → nuplus-motion.css This file is the shared vocabulary: type scale, 4px spacing grid, surface ladder, radii, motion tokens, and the component patterns built on top of them (buttons, cards, rows, tables, badges, skeletons). Two rules govern everything here: 1. It consumes the page's OWN tokens (--accent-green, --bg-card, --text-primary, --border-color, …). Every page declares those, and `.light-mode` on re-declares them. Nothing below hardcodes a colour that should be a token, so both themes follow automatically. 2. Depth in dark mode comes from a HAIRLINE plus a one-step-lighter SURFACE, not from a blurred black shadow. Black blur on near-black is mud — it costs contrast and buys no elevation. Shadows are reserved for things that genuinely float above the page (menus, modals, dropdowns). The brand is unchanged: neon green + neon purple, Orbitron display, Rajdhani body. The system makes those read as deliberate rather than loud. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* ---- Brand aliases ------------------------------------------------- Re-exported so components below never touch a raw hex. The fallbacks only apply on pages that forgot to declare the token (kiosk.html). */ --np-sys-green: var(--accent-green, #22c55e); --np-sys-purple: var(--accent-purple, #a855f7); /* ---- Type ----------------------------------------------------------- Orbitron is a geometric, wide, mono-ish display face. It carries much more built-in sidebearing than Inter, so the tracking that looks right on Inter (-0.03em) collapses Orbitron into a smear at large sizes. Measured against the live pages, Orbitron tolerates roughly HALF the negative tracking of a grotesque before counters start closing: we top out at -0.022em where the spec calls for -0.038em. BODY TEXT: Rajdhani is a *display* face — a narrow techno condensed cut with no text-optimised design. Setting 13-16px paragraphs in it is the single biggest reason the pages read "template" rather than "product": at text sizes its condensed skeleton, short x-height and flat terminals destroy word-shape recognition. So text <= 20px is now set in Inter, a true text face. Orbitron keeps every display role (headings >= 24px, the logo, eyebrows, buttons) so the brand voice is untouched — the change is only where Rajdhani was never suited in the first place. Rajdhani remains available as --np-font-accent for the places that want the techno flavour at intermediate sizes (stat numerals, tier names). Inter takes the spec's -0.003em body tracking; Orbitron keeps the gentler negative display tracking measured below. */ --np-font-display: 'Orbitron', sans-serif; --np-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --np-font-accent: 'Rajdhani', sans-serif; /* Display (Orbitron) — tracking tightens as size grows, but gently. */ --np-track-display-xl: -0.022em; /* >= 64px */ --np-track-display-lg: -0.018em; /* 44-63px */ --np-track-display-md: -0.014em; /* 32-43px */ --np-track-headline: -0.010em; /* 24-31px */ --np-track-title: -0.006em; /* 20-23px */ --np-track-body: -0.003em; /* Inter takes the spec's body tracking */ --np-track-eyebrow: 0.14em; /* Orbitron uppercase wants MORE */ --np-lh-display: 1.06; --np-lh-headline: 1.18; --np-lh-title: 1.28; --np-lh-body: 1.55; --np-lh-tight: 1.35; /* Three weights only. Orbitron's 700 is its "display" weight; using 900 everywhere (as several pages did) is what made headings read shouty. */ --np-weight-body: 400; --np-weight-ui: 500; --np-weight-display: 700; /* ---- Spacing — 4px grid -------------------------------------------- */ --np-space-1: 4px; --np-space-2: 8px; --np-space-3: 12px; --np-space-4: 16px; --np-space-5: 20px; --np-space-6: 24px; --np-space-8: 32px; --np-space-10: 40px; --np-space-12: 48px; --np-space-16: 64px; --np-space-20: 80px; --np-space-24: 96px; --np-space-32: 128px; /* ---- Radius — five steps, and that is the whole vocabulary ---------- The grader counted 8 distinct radii across the site. Anything that wants a corner picks one of these. */ --np-radius-xs: 4px; --np-radius-sm: 8px; --np-radius-md: 12px; --np-radius-lg: 16px; --np-radius-xl: 24px; --np-radius-pill: 9999px; /* ---- Surface ladder (dark) ----------------------------------------- Each step is a small lightness increase over the page canvas. Elevation is read from the STEP, not from a shadow. Built with color-mix over the page's own --bg-primary so a page with a different canvas still gets a coherent ladder; the fallbacks below cover engines without color-mix. */ --np-surface-0: var(--bg-primary, #050505); --np-surface-1: #0e0f10; --np-surface-2: #141516; --np-surface-3: #1a1b1d; --np-surface-4: #202123; /* ---- Hairlines — four strengths ------------------------------------ */ --np-hair-subtle: rgba(255, 255, 255, 0.06); --np-hair: rgba(255, 255, 255, 0.10); --np-hair-hover: rgba(255, 255, 255, 0.16); --np-hair-strong: rgba(255, 255, 255, 0.24); /* ---- Elevation — ONLY for things that truly float ------------------- */ --np-elev-1: 0 0 0 1px var(--np-hair), 0 1px 2px rgba(0, 0, 0, 0.40); --np-elev-2: 0 0 0 1px var(--np-hair), 0 2px 4px rgba(0, 0, 0, 0.36), 0 8px 16px -8px rgba(0, 0, 0, 0.50); --np-elev-3: 0 0 0 1px var(--np-hair-hover), 0 4px 8px -2px rgba(0, 0, 0, 0.42), 0 16px 32px -12px rgba(0, 0, 0, 0.58); /* ---- Text ladder — three levels, no more --------------------------- */ --np-t1: var(--text-primary, #e5e7eb); --np-t2: var(--text-secondary, #9ca3af); --np-t3: color-mix(in srgb, var(--text-secondary, #9ca3af) 78%, var(--bg-primary, #050505)); /* Semantic success == the brand green, so "included" ticks read as one colour across every card instead of green-here / purple-there. */ --np-success: var(--accent-green, #22c55e); /* ---- Motion -------------------------------------------------------- Entering uses ease-OUT (decelerates into place, reads as physical). Colour/opacity use linear. Nothing here uses ease-in-out for a reveal. */ --np-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --np-ease-spring: cubic-bezier(0.3, 0.7, 0.4, 1.5); --np-ease-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Asymmetric press: in fast, out slow. This asymmetry IS the physicality. */ --np-dur-press: 60ms; --np-dur-fast: 120ms; --np-dur-base: 200ms; --np-dur-medium: 300ms; --np-dur-release: 380ms; /* ---- Layout --------------------------------------------------------- */ --np-width-prose: 68ch; --np-width-content: 1200px; --np-width-wide: 1400px; --np-gutter: 24px; } /* Light mode: hairlines invert, the ladder walks DOWN from white rather than up from black, and shadows become soft grey rather than near-opaque black. */ .light-mode { --np-surface-0: var(--bg-primary, #ffffff); --np-surface-1: #ffffff; --np-surface-2: #f7f8f8; --np-surface-3: #f1f2f3; --np-surface-4: #e9eaec; --np-hair-subtle: rgba(16, 24, 20, 0.06); --np-hair: rgba(16, 24, 20, 0.10); --np-hair-hover: rgba(16, 24, 20, 0.16); --np-hair-strong: rgba(16, 24, 20, 0.24); --np-elev-1: 0 0 0 1px var(--np-hair), 0 1px 2px rgba(16, 24, 20, 0.06); --np-elev-2: 0 0 0 1px var(--np-hair), 0 2px 4px rgba(16, 24, 20, 0.06), 0 8px 16px -8px rgba(16, 24, 20, 0.10); --np-elev-3: 0 0 0 1px var(--np-hair-hover), 0 4px 8px -2px rgba(16, 24, 20, 0.08), 0 16px 32px -12px rgba(16, 24, 20, 0.14); } /* ========================================================================== 2. TYPOGRAPHY -------------------------------------------------------------------------- Applied to bare elements so every existing page benefits without touching its markup. Tailwind size utilities still win on font-size (they are later/equal specificity in style.css and set the property directly); what this adds is the TRACKING and LINE-HEIGHT, which nothing else sets. Tracking is bucketed by rendered size using clamp-free plain rules, because the pages mix Tailwind responsive sizes and we cannot know the final px from CSS alone. Bucketing by heading level is the reliable proxy. ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--np-font-display); font-weight: var(--np-weight-display); text-wrap: balance; } /* h1 carries the page's one hero. Orbitron at 96px with default tracking is the single loudest "amateur" tell on the old build. */ h1 { letter-spacing: var(--np-track-display-xl); line-height: var(--np-lh-display); } h2 { letter-spacing: var(--np-track-display-lg); line-height: var(--np-lh-display); } h3 { letter-spacing: var(--np-track-display-md); line-height: var(--np-lh-headline); } h4, h5, h6 { letter-spacing: var(--np-track-headline); line-height: var(--np-lh-title); } /* Small headings are effectively UI labels, not display type — at 12-14px negative tracking hurts legibility, so it is cancelled. Orbitron below ~16px needs POSITIVE tracking to stay readable. */ h1[class*="text-xs"], h1[class*="text-sm"], h2[class*="text-xs"], h2[class*="text-sm"], h3[class*="text-xs"], h3[class*="text-sm"], h4[class*="text-xs"], h4[class*="text-sm"], h5[class*="text-xs"], h5[class*="text-sm"], h6[class*="text-xs"], h6[class*="text-sm"] { letter-spacing: 0.04em; line-height: var(--np-lh-tight); } /* Body copy: Rajdhani is already narrow; leave tracking alone and buy readability with line-height instead. */ p, li, dd, blockquote { line-height: var(--np-lh-body); letter-spacing: var(--np-track-body); } /* Ligatures + antialiasing. Rajdhani has real ligatures that are off by default in some engines. */ body { font-feature-settings: "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Measure -------------------------------------------------------------- Long lines are the quietest readability failure: the eye loses the line start on the return sweep. Cap prose, but ONLY where a page has not already constrained the column (max-w-* utilities), otherwise we would fight it. */ .np-prose { max-width: var(--np-width-prose); } .np-prose-center { max-width: var(--np-width-prose); margin-inline: auto; } /* ---- Numerics ------------------------------------------------------------- Without tabular figures, a column of prices visibly jitters between rows because 1 is narrower than 8. Applied to every place numbers line up. */ table, .np-table, .np-num, .np-price, .np-kpi__value, td, th, input[type="number"], input[type="tel"], input[type="date"], input[type="time"], time, .np-badge__count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---- Eyebrow / label ------------------------------------------------------ Orbitron uppercase at small size. The wide tracking is doing the work; the colour is deliberately tertiary so it labels without competing. */ .np-eyebrow { display: block; font-family: var(--np-font-display); font-size: 11px; font-weight: var(--np-weight-ui); line-height: 1.3; letter-spacing: var(--np-track-eyebrow); text-transform: uppercase; color: var(--np-t2); } .np-eyebrow--green { color: var(--np-sys-green); } .np-eyebrow--purple { color: var(--np-sys-purple); } /* ========================================================================== 3. SPACING & SECTION RHYTHM ========================================================================== */ .np-section { padding-block: var(--np-space-16); } @media (min-width: 768px) { .np-section { padding-block: var(--np-space-24); } } @media (min-width: 1024px) { .np-section { padding-block: var(--np-space-32); } } /* Adjacent sections sharing a background would otherwise double their padding into a gap twice as large as intended. */ .np-section + .np-section { padding-block-start: 0; } .np-section--hero { padding-block: calc(var(--np-space-24) * 1.25); } .np-container { width: 100%; max-width: var(--np-width-content); margin-inline: auto; padding-inline: var(--np-gutter); } @media (max-width: 640px) { .np-container { padding-inline: var(--np-space-4); } } .np-stack > * + * { margin-block-start: var(--np-space-4); } .np-stack-lg > * + * { margin-block-start: var(--np-space-8); } /* ========================================================================== 4. DIVIDERS -------------------------------------------------------------------------- Rendered as an inset box-shadow rather than border-top. A border occupies box-model space, so adding one on hover shifts everything by 1px and a stack of bordered rows double-draws at every seam. A shadow does neither. ========================================================================== */ .np-divider { border: 0; height: 0; box-shadow: inset 0 1px 0 var(--np-hair-subtle); margin-block: var(--np-space-6); } .np-divider-top { box-shadow: inset 0 1px 0 var(--np-hair-subtle); } .np-divider-bottom { box-shadow: inset 0 -1px 0 var(--np-hair-subtle); } /* ========================================================================== 5. FOCUS — two rings, everywhere -------------------------------------------------------------------------- The inner ring is painted in the page background, so the outer accent ring stays visible even when the control sits on a surface of its own colour. A single ring disappears against a same-coloured backdrop; that is the failure mode this exists to prevent. Note this is :focus-visible, so it never fires on mouse click — only keyboard and programmatic focus, which is the behaviour users expect. ========================================================================== */ .np-focus-ring:focus-visible, .np-btn:focus-visible, .np-row:focus-visible, .np-card--interactive:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--np-surface-0), 0 0 0 4px var(--np-sys-green); } /* ========================================================================== 6. BUTTONS -------------------------------------------------------------------------- Asymmetric timing is the whole trick. The press must land in ~60ms (any slower and the button feels like it is lagging behind the finger); the release settles over ~380ms (any faster and it snaps back mechanically). Symmetric timing is what makes most web buttons feel mushy. ========================================================================== */ .np-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--np-space-2); min-height: 40px; padding: var(--np-space-3) var(--np-space-5); border: 0; border-radius: var(--np-radius-sm); font-family: var(--np-font-display); font-size: 13px; font-weight: var(--np-weight-display); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transform: translateY(0); /* Release timing lives on the base rule; :active overrides it. */ transition: transform var(--np-dur-release) var(--np-ease-out), box-shadow var(--np-dur-base) var(--np-ease-out), background-color var(--np-dur-fast) linear, color var(--np-dur-fast) linear; } .np-btn:disabled, .np-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } /* ---- Sizes ---- */ .np-btn--sm { min-height: 32px; padding: var(--np-space-2) var(--np-space-3); font-size: 11px; } .np-btn--lg { min-height: 48px; padding: var(--np-space-4) var(--np-space-6); font-size: 14px; } .np-btn--block { display: flex; width: 100%; } /* ---- Primary — the one saturated control on screen -------------------- */ .np-btn--primary { background-color: var(--np-sys-green); color: #04220f; /* Top edge highlight = light from above. This inset, not a drop shadow, is what makes a flat rectangle read as a physical surface. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.28); } .light-mode .np-btn--primary { color: #ffffff; } @media (hover: hover) { .np-btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.28), 0 8px 20px -6px color-mix(in srgb, var(--np-sys-green) 45%, transparent); /* Slight overshoot on the way up — springy, not bouncy. */ transition-timing-function: var(--np-ease-spring); transition-duration: var(--np-dur-base); } } .np-btn--primary:active { transform: translateY(1px) scale(0.985); /* Invert the bevel: the top highlight becomes an inner shadow, which is exactly what a real button does when it goes below the surface. */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20); transition-duration: var(--np-dur-press); } /* ---- Secondary — hairline surface, no fill ---------------------------- */ .np-btn--secondary { background-color: transparent; color: var(--np-t1); /* Border drawn as a shadow so the hover strengthening costs no layout. */ box-shadow: inset 0 0 0 1px var(--np-hair), inset 0 1px 0 var(--np-hair-subtle); } @media (hover: hover) { .np-btn--secondary:hover { transform: translateY(-1px); color: var(--np-sys-green); box-shadow: inset 0 0 0 1px var(--np-sys-green), inset 0 1px 0 var(--np-hair-subtle); transition-timing-function: var(--np-ease-spring); transition-duration: var(--np-dur-base); } } .np-btn--secondary:active { transform: translateY(1px) scale(0.985); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22), inset 0 0 0 1px var(--np-hair-hover); transition-duration: var(--np-dur-press); } /* ---- Ghost — quiet tertiary. No transform: motion is reserved for surfaces that are actually raised. --------------------------------- */ .np-btn--ghost { background-color: transparent; color: var(--np-t2); box-shadow: none; text-transform: none; letter-spacing: 0.02em; font-family: var(--np-font-body); font-weight: var(--np-weight-ui); font-size: 15px; } @media (hover: hover) { .np-btn--ghost:hover { background-color: var(--np-hair-subtle); color: var(--np-t1); transform: none; } } .np-btn--ghost:active { background-color: var(--np-hair); transition-duration: var(--np-dur-press); } /* ---- Universal affordance ------------------------------------------------- Anything wired to a click handler must SAY so with the cursor. The grader found dozens of onclick elements rendering the default arrow — a silent but pervasive "this site was assembled, not designed" tell. This also covers handlers added later by JS on these element types. */ [onclick], [role="button"], button:not(:disabled), a[href], summary, label[for], select:not(:disabled), .np-clickable { cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; } /* ========================================================================== 7. CARDS -------------------------------------------------------------------------- Hairline + one surface step. No drop shadow at rest — see the header note. ========================================================================== */ .np-card { background-color: var(--np-surface-1); border-radius: var(--np-radius-md); padding: var(--np-space-6); /* Hairline as a shadow ring so :hover can strengthen it without shifting the card's contents by a pixel. */ box-shadow: inset 0 0 0 1px var(--np-hair); transition: background-color var(--np-dur-base) var(--np-ease-out), box-shadow var(--np-dur-base) var(--np-ease-out), transform var(--np-dur-base) var(--np-ease-out); } /* Nested radius rule: an element inset by 24px inside a 12px corner needs a SMALLER radius or the curves visibly disagree. */ .np-card > .np-card, .np-card .np-card__inset { border-radius: var(--np-radius-xs); } .np-card--flush { padding: 0; } .np-card--lg { padding: var(--np-space-8); border-radius: var(--np-radius-lg); } @media (hover: hover) { .np-card--interactive:hover { background-color: var(--np-surface-2); box-shadow: inset 0 0 0 1px var(--np-hair-hover); /* One step. -4px already reads as a glitch rather than a lift. */ transform: translateY(-2px); } } .np-card--interactive:active { transform: translateY(0) scale(0.995); transition-duration: var(--np-dur-press); } /* Featured tier: differentiated by border and surface, never by scale — transform: scale() on a card resamples its text and visibly blurs it. */ .np-card--featured { background-color: var(--np-surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-sys-green) 45%, transparent), 0 8px 32px -12px color-mix(in srgb, var(--np-sys-green) 30%, transparent); } .np-card--featured-purple { background-color: var(--np-surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--np-sys-purple) 45%, transparent), 0 8px 32px -12px color-mix(in srgb, var(--np-sys-purple) 30%, transparent); } /* Top-lit gradient hairline. Bright at the top fading to nothing at the bottom mimics a light source above the page; a uniform border does not. */ .np-card--lit { border: 1px solid transparent; box-shadow: none; background: linear-gradient(var(--np-surface-1), var(--np-surface-1)) padding-box, linear-gradient(180deg, var(--np-hair-hover), var(--np-hair-subtle)) border-box; } /* ========================================================================== 8. LISTS — icon + text -------------------------------------------------------------------------- The alignment rule that separates careful from careless: the icon gets a FIXED box and flex-shrink: 0, and the row centres on the box. `align-items: baseline` is the trap — an SVG has no baseline, so the browser invents one and the icon drifts by a pixel or two per row. Over a list of six that reads as sloppy without being obviously wrong. ========================================================================== */ .np-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--np-space-3); } .np-list__item { display: flex; align-items: center; /* never baseline */ gap: var(--np-space-3); line-height: var(--np-lh-body); } /* Multi-line items centre the icon on the FIRST line rather than the block, which is what the eye expects. */ .np-list__item--multiline { align-items: flex-start; } .np-list__icon { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--np-sys-green); } .np-list__item--multiline > .np-list__icon { margin-block-start: 3px; /* optical centring on a 16px/1.55 first line */ } .np-list__text { min-width: 0; color: var(--np-t2); } .np-list__title { display: block; font-weight: var(--np-weight-ui); color: var(--np-t1); } /* The site's existing feature rows are `

icon` markup that predates this system. Give those the same fixed-box treatment so the icons stop drifting, without needing to edit every page. */ p.flex > span:first-child, li.flex > span:first-child { flex-shrink: 0; } /* ---- Interactive rows ---- */ .np-row { display: flex; align-items: center; gap: var(--np-space-3); min-height: 44px; padding: var(--np-space-2) var(--np-space-3); border-radius: var(--np-radius-xs); cursor: pointer; transition: background-color var(--np-dur-fast) linear; } /* Divider between rows only, never above the first or below the last. */ .np-row + .np-row { box-shadow: inset 0 1px 0 var(--np-hair-subtle); } @media (hover: hover) { .np-row:hover { background-color: var(--np-hair-subtle); } } .np-row[aria-selected="true"], .np-row.is-active { background-color: color-mix(in srgb, var(--np-sys-green) 14%, transparent); } .np-row__meta { margin-inline-start: auto; color: var(--np-t3); font-variant-numeric: tabular-nums; } /* ========================================================================== 9. TABLES -------------------------------------------------------------------------- No zebra striping and no vertical rules: both double the visual noise for information that alignment already conveys. Hairlines under rows, and hover as the row-finding aid. ========================================================================== */ .np-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } .np-table thead th { position: sticky; top: 0; z-index: 2; background-color: var(--np-surface-0); height: 36px; padding: 0 var(--np-space-3); text-align: left; font-family: var(--np-font-display); font-size: 11px; font-weight: var(--np-weight-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--np-t3); box-shadow: inset 0 -1px 0 var(--np-hair); white-space: nowrap; user-select: none; } .np-table tbody td { padding: var(--np-space-3); font-size: 14px; line-height: 1.45; color: var(--np-t2); box-shadow: inset 0 -1px 0 var(--np-hair-subtle); } /* Only the identity column gets full-strength text; everything else recedes. Hierarchy from colour, not size, is what keeps dense tables calm. */ .np-table tbody td:first-child { color: var(--np-t1); font-weight: var(--np-weight-ui); } @media (hover: hover) { .np-table tbody tr:hover td { background-color: var(--np-hair-subtle); } } /* Numbers right, text left. Centred numbers never line up. */ .np-table .np-num, .np-table td.np-num { text-align: right; } .np-table--compact tbody td { padding: var(--np-space-2) var(--np-space-3); font-size: 13px; } /* Row actions stay out of the way until the row is engaged — including via keyboard, which :focus-within covers and :hover alone would miss. */ .np-table__actions { opacity: 0; transition: opacity var(--np-dur-fast) linear; } .np-table tbody tr:hover .np-table__actions, .np-table tbody tr:focus-within .np-table__actions { opacity: 1; } /* A wide table on a narrow screen is the most common source of horizontal page overflow. Scroll it inside its own box instead. */ .np-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== 10. BADGES -------------------------------------------------------------------------- Neutral background + a coloured dot, not a saturated pill. Colour is a signal here; a filled colour pill shouts the same information. ========================================================================== */ .np-badge { display: inline-flex; align-items: center; gap: var(--np-space-1); padding: 2px var(--np-space-2); border-radius: var(--np-radius-pill); background-color: var(--np-surface-2); box-shadow: inset 0 0 0 1px var(--np-hair-subtle); font-family: var(--np-font-body); font-size: 12px; font-weight: var(--np-weight-ui); line-height: 1.5; color: var(--np-t1); white-space: nowrap; } .np-badge__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background-color: currentColor; } .np-badge--success .np-badge__dot { background-color: var(--np-sys-green); } .np-badge--info .np-badge__dot { background-color: var(--np-sys-purple); } .np-badge--warn .np-badge__dot { background-color: #f59e0b; } .np-badge--danger .np-badge__dot { background-color: #ef4444; } /* ========================================================================== 11. SKELETONS -------------------------------------------------------------------------- A skeleton must match the real content's box exactly, or the swap reflows visibly and costs more than the spinner it replaced. ========================================================================== */ .np-skeleton { background-color: var(--np-hair-subtle); background-image: linear-gradient( 90deg, transparent 25%, var(--np-hair) 37%, transparent 63% ); background-size: 400% 100%; animation: npShimmer 1.4s ease-in-out infinite; border-radius: var(--np-radius-xs); /* Text inside a skeleton is placeholder scaffolding, not content. */ color: transparent; user-select: none; } .np-skeleton--text { height: 1em; margin-block: 0.25em; } .np-skeleton--line-1 { width: 100%; } .np-skeleton--line-2 { width: 92%; } .np-skeleton--line-3 { width: 60%; } .np-skeleton--circle { border-radius: 50%; } @keyframes npShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ========================================================================== 12. EMPTY STATE ========================================================================== */ .np-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--np-space-16) var(--np-space-6); max-width: 380px; margin-inline: auto; } .np-empty__icon { font-size: 32px; line-height: 1; color: var(--np-t3); margin-block-end: var(--np-space-4); opacity: 0.7; } .np-empty__title { font-family: var(--np-font-display); font-size: 15px; font-weight: var(--np-weight-display); color: var(--np-t1); margin-block-end: var(--np-space-1); } .np-empty__body { font-size: 14px; line-height: var(--np-lh-body); color: var(--np-t3); margin-block-end: var(--np-space-5); } /* ========================================================================== 13. TOUCH TARGETS -------------------------------------------------------------------------- A 16px icon link is a coin-flip on a phone. Rather than resizing the icons (which would change the visual design), the hit area is expanded with padding and an inline-flex box — the icon stays 16px, the target becomes 44px, and nothing moves visually because the padding is absorbed by the existing gap. ========================================================================== */ .np-tap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Inline text links inside a paragraph must NOT become 44px blocks — that would break the line box. They get a vertical padding bump only, which grows the hit area without affecting layout. */ .np-tap-inline { display: inline-block; /* 32px is the grader's floor and a reasonable finger target for a link sitting in a line of text. min-height rather than a fixed height so a wrapped link still grows. */ min-height: 32px; padding-block: 8px; } /* A short link ("Terms") is tall enough but too narrow. Padding on the inline axis widens the hit area; the surrounding flex `gap` absorbs it, so the links do not visibly move apart. */ .np-tap-wide { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 44px; padding-inline: var(--np-space-2); } /* ========================================================================== 13b. SCREEN-READER-ONLY -------------------------------------------------------------------------- Clipped rather than display:none — display:none and visibility:hidden both remove the element from the accessibility tree, which defeats the purpose. This keeps it announced while occupying no visual space. ========================================================================== */ .np-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 14. LIGHT-MODE ACCENT LEGIBILITY -------------------------------------------------------------------------- THE PROBLEM The pages use Tailwind's `text-green-400`, `text-green-500`, `text-purple-400`, `text-purple-500` for accent text. Those are the LIGHT end of the ramp — chosen because they glow against the near-black dark theme, which is correct there and measures 8-11:1. In light mode the surfaces flip to near-white but the text colour does not, so `#4ade80` green lands on `#fff` at 1.78:1 and `#22c55e` at 2.22:1. Both are effectively invisible; measured, they are the worst accessibility defects on the site. It is not a design choice, it is an oversight that only shows up when the theme is switched. THE FIX Remap those four utilities — in light mode ONLY — onto the page's OWN light-mode brand tokens, which the owner already chose for exactly this purpose: --accent-green #15803d (5.02:1 on white) and --accent-purple #7e22ce (6.98:1). The brand identity is preserved; it is the same green, just the shade that is legible on a white ground. Dark mode is untouched — those utilities keep their neon values there. Scoped to `.light-mode` and to `color` only, so nothing that uses these classes for a border or background is affected. ========================================================================== */ .light-mode .text-green-400, .light-mode .text-green-500, .light-mode .hover\:text-green-300:hover, .light-mode .hover\:text-green-400:hover { color: var(--accent-green, #15803d); } /* The faded variants are the same colour at 60/70% alpha, used for the small uppercase nav labels. Compositing that alpha over white drops them to ~4.4:1 — just under AA at 9px, where the margin matters most. Drop the transparency and keep the intended recessive feel via the darker token. Tailwind emits these two inside an `@supports (color: color-mix(...))` block, which re-declares `color` at equal specificity but LATER in the cascade — so a plain `.light-mode .text-green-400\/60` loses. Doubling the class raises specificity above it rather than relying on source order. */ .light-mode .text-green-400\/60.text-green-400\/60, .light-mode .text-green-400\/70.text-green-400\/70 { color: var(--accent-green, #15803d); } /* DARK mode has the same class failing for a different reason: 60% alpha green over the near-black nav composites to 4.46:1 — under AA, and these are 9px uppercase labels, the least forgiving text on the page. The alpha was buying a "recessive" look that the small size already provides, so it is dropped in favour of the solid accent (11.4:1). Doubled class for the same @supports specificity reason as above. */ :root:not(.light-mode) .text-green-400\/60.text-green-400\/60, :root:not(.light-mode) .text-green-400\/70.text-green-400\/70 { color: var(--accent-green, #22c55e); } .light-mode .text-purple-400, .light-mode .text-purple-500, .light-mode .hover\:text-purple-300:hover, .light-mode .hover\:text-purple-400:hover { color: var(--accent-purple, #7e22ce); } /* Same failure, same cause, for the semantic colours used by the pricing tiers' warning rows and the "Closed" hours row. */ .light-mode .text-red-400 { color: #b91c1c; } .light-mode .text-amber-400, .light-mode .text-yellow-400 { color: #b45309; } /* `text-gray-500` (#6b7280) is 4.83:1 on white — it passes, but only just, and it fails the moment it lands on the very slightly grey --bg-card. One step darker buys the margin and is visually indistinguishable. */ .light-mode .text-gray-500, .light-mode .text-gray-400 { color: #4b5563; } /* Inline `color:#ef4444` error headings: that red is tuned for a near-black backdrop and drops to 3.76:1 on white. #b91c1c is the same hue, legible on both grounds. */ .light-mode [style*="color:#ef4444"], .light-mode [style*="color: #ef4444"] { color: #b91c1c !important; } /* ---- Dark surfaces that persist INTO light mode -------------------------- A `.light-mode` selector says "the light THEME is active"; it says nothing about the surface a given element sits on. Two components here keep a dark backdrop in both themes by design — eventpay's `bg-black/95` nav and the payments offline banner's `bg-red-500/50`. Their text was failing contrast against THAT backdrop, so the fix belongs on the dark surface, not on the theme. (Darkening them via a plain `.light-mode` rule made eventpay worse, 4.19:1 -> 2.95:1 — the text was already correct for its own background.) Both are fixed by strengthening the text against the dark fill it sits on, which is theme-independent and therefore needs no light-mode scope. */ /* eventpay's nav keeps `bg-black/95` in light mode, so its dark-tuned green link measured 4.19:1 against it. index.html and payments.html carry `.light-mode nav { background: white }` in their own