/* ═══════════════════════════════════════════════════════════════════════════ NEO.CSS — Neumorphism (Soft UI) reskin, SCOPED to body.nb (the community pages: /feed /profile /mods /jobs /leaderboard /shops /events /messages /shop/). Loaded LAST in , after cyber.css → points.css → app-nav.css. Works by (1) remapping the cyberpunk CSS variables under body.nb — which recolors/re-fonts/de-glows points.css and every chrome widget for free — and (2) layering structural overrides for what tokens can't express (dual soft shadows, same-surface cards, press/lift physics). cyber.css/points.css/app-nav.css/widgets are NEVER edited; remove body.nb + this to fully revert. The system: everything is molded from one "cool clay" surface (#E0E5EC). Edges come from DUAL OPPOSING SHADOWS (light top-left, dark bottom-right), never borders. Raised = you can touch it; inset = it's a well or a selected state. Cards match the page background — NEVER white. Dense list rows stay FLAT (hover tint, inset selection) so 50-row boards don't turn to mush. Palette: clay #E0E5EC · ink #3D4852 · EdiX green #096A4E (hover #065F46, decorative-only bright #0E9F6E) · deep teal #115E59 · steel blue #33658A · warm #92400E · danger #B91C1C. All text colors pass WCAG AA on clay. Fonts: Plus Jakarta Sans (display) + DM Sans (body) → Heebo for Hebrew. The --nm-* tokens below are the PUBLIC API of this skin: new components should consume them (and the --cyber-* remaps) rather than hardcoding. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted variable fonts (Latin + Latin-ext; Hebrew falls back to Heebo). unicode-ranges match fonts.css's Google-subset convention so per-glyph fallback keeps working. Only downloaded when a body.nb stack references them, so dark pages never fetch these. ── */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-ext-wght.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/fonts/dm-sans-latin-wght.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/fonts/dm-sans-latin-ext-wght.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Token remap: reskins colors/fonts/glows/shape/motion across points.css + the chrome widgets in one shot (every var(--cyber-*)/var(--neon*)/var(--font-*) downstream now resolves to soft-UI values). ── */ body.nb { /* the six shadow tiers — always rgba, never opaque hex (they must blend) */ --nm-out-sm: 5px 5px 10px rgba(163, 177, 198, .6), -5px -5px 10px rgba(255, 255, 255, .5); --nm-out: 9px 9px 16px rgba(163, 177, 198, .6), -9px -9px 16px rgba(255, 255, 255, .5); --nm-out-lg: 12px 12px 20px rgba(163, 177, 198, .7), -12px -12px 20px rgba(255, 255, 255, .6); --nm-in-sm: inset 3px 3px 6px rgba(163, 177, 198, .6), inset -3px -3px 6px rgba(255, 255, 255, .5); --nm-in: inset 6px 6px 10px rgba(163, 177, 198, .6), inset -6px -6px 10px rgba(255, 255, 255, .5); --nm-in-deep: inset 10px 10px 20px rgba(163, 177, 198, .7), inset -10px -10px 20px rgba(255, 255, 255, .6); --nm-r-xl: 32px; --nm-r: 16px; --nm-r-sm: 12px; --nm-hover-tint: rgba(255, 255, 255, .35); /* surfaces + ink — SAME-SURFACE discipline: card == input == page */ --cyber-bg: #E0E5EC; --cyber-fg: #3D4852; --cyber-card: #E0E5EC; --cyber-input: #E0E5EC; --cyber-surface: #E0E5EC; --cyber-surface-2: #E7EBF1; --cyber-muted: #D6DCE5; --cyber-text: #3D4852; --cyber-muted-fg: #4F5B67; --cyber-text-dim: #5B6472; --cyber-dim: #5B6472; /* NO borders — edges come from shadows. transparent (not 0) keeps every 1px border-box's geometry identical, so nothing shifts. */ --cyber-border: transparent; --cyber-line: transparent; /* accents — EdiX green family, darkened for AA on clay (brand #00ff88 ≈ 2.7:1 even at #0E9F6E; #096A4E = 5.2:1, white-on-it = 6.6:1). Teal + steel keep the three leaderboards distinguishable. -line tokens go transparent (the shadow carries the edge); -dim stays a soft green tint. */ --cyber-accent: #096A4E; --cyber-accent-hover: #065F46; --cyber-accent-line: transparent; --cyber-accent-dim: rgba(9, 106, 78, .10); --cyber-accent-soft: rgba(9, 106, 78, .16); --cyber-accent-glow: transparent; --cyber-accent-2: #115E59; --cyber-accent2-line: transparent; --cyber-accent2-dim: rgba(17, 94, 89, .10); --cyber-accent-3: #33658A; --cyber-accent3-line: transparent; --cyber-accent3-dim: rgba(51, 101, 138, .10); --cyber-ring: #096A4E; /* status — warn is used AS TEXT for costs/points, so it must pass 4.5:1 */ --cyber-warn: #92400E; --cyber-warn-dim: rgba(146, 64, 14, .10); --cyber-warn-line: transparent; --cyber-danger: #B91C1C; --cyber-danger-dim: rgba(185, 28, 28, .08); --cyber-danger-line: transparent; --cyber-ok: #096A4E; --cyber-ok-dim: rgba(9, 106, 78, .12); --cyber-ok-line: transparent; --cyber-grad-danger: linear-gradient(90deg, #B91C1C, #92400E); /* fonts — Plus Jakarta Sans for display, DM Sans for body; --font-mono KEEPS JetBrains Mono (already self-hosted): DM Sans renders proportional digits even under font-variant-numeric, and the mono consumers are exactly the tabular surfaces (points, counters, timestamps) that need equal digits. */ --font-head: 'Plus Jakarta Sans', 'Heebo', sans-serif; --font-display: 'Plus Jakarta Sans', 'Heebo', sans-serif; --font-body: 'DM Sans', 'Heebo', sans-serif; --font-mono: 'JetBrains Mono', 'Heebo', monospace; /* glows → soft extruded stacks. Every box-shadow:var(--neon*) becomes soft. */ --neon-sm: var(--nm-out-sm); --neon: var(--nm-out); --neon-lg: var(--nm-out-lg); --neon-magenta: var(--nm-out-sm); --neon-cyan: var(--nm-out-sm); /* shape + motion — pillowed corners, 300ms ease-out (spec), no stepping */ --cyber-radius: 12px; --cyber-radius-sm: 12px; --cyber-radius-xs: 12px; --cyber-radius-pill: 999px; --cyber-dur: .3s; --cyber-dur-fast: .15s; --cyber-ease: cubic-bezier(0, 0, .2, 1); --cyber-snap: cubic-bezier(0, 0, .2, 1); /* Neo extras — the literals that had no --cyber-* home, promoted to tokens so the dark palette below can flip them too (value-preserving: light unchanged). --nm-shadow-rgb feeds the bespoke one-sided seam shadows (footer/nav/rail); the six --nm-* tiers above are redefined wholesale for dark, not via this. */ --nm-on-accent: #fff; /* label on a solid accent/danger fill */ --nm-accent-bright: #0E9F6E; /* decorative-only bright green */ --nm-flat: #D7DDE6; /* flat disabled/soldout/off surface */ --nm-track: #DAE0E8; /* recessed track / spinner rail */ --nm-scroll-thumb: #C4CDD8; --nm-star-empty: #B9C3D0; --nm-medal-1: rgba(212, 175, 55, .35); --nm-medal-2: rgba(148, 163, 184, .40); --nm-medal-3: rgba(180, 120, 60, .30); --nm-shadow-rgb: 163, 177, 198; /* Light clay ground → the gradient (near-black navy) mark. See cyber.css for the contract. */ --brand-mark: url('/brand/mark-color.png?v=1'); } /* ── Page shell: one continuous clay surface — flat, no texture, no overlay ── */ body.nb { background-color: var(--cyber-surface); background-image: none; color: var(--cyber-fg); font-family: var(--font-body); font-weight: 450; -webkit-font-smoothing: antialiased; } /* Kill the CRT scanline overlay — nothing sits on top of the clay. */ body.nb .cyber-overlay { display: none !important; } /* ── Base typography: Plus Jakarta Sans, tight, ink — no uppercase shouting, no strokes, no text-shadows (soft UI carries hierarchy through weight). ── */ body.nb .pf-name, body.nb .sp-title, body.nb .lb-title, body.nb .pf-social-title, body.nb .md-pro-head, body.nb .sp-card h2, body.nb .lb-card-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; color: var(--cyber-fg); text-transform: none; text-shadow: none; -webkit-text-stroke: 0; } body.nb .pf-name { font-size: 1.7rem; font-weight: 800; } body.nb .sp-title, body.nb .lb-title { font-size: 1.6rem; font-weight: 800; } body.nb .selectable { font-weight: 450; } /* ═══════════════════════════════════════════════════════════════════════════ SHARED PRIMITIVES — cards, buttons, inputs, avatars, wells, counters (clip-path: none everywhere points.css chamfers — a clip-path CLIPS the soft shadow away entirely, leaving an invisible same-surface card.) ═══════════════════════════════════════════════════════════════════════════ */ /* Static cards: same-surface panels raised by the full extruded stack. */ body.nb .pf-card, body.nb .sp-card, body.nb .pf-compose, body.nb .pf-social-box, body.nb .lb-card, body.nb .dm-thread, body.nb .rv-form { background: var(--cyber-surface); border: 1px solid transparent; clip-path: none; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out); } /* Buttons: raised keys that lift on hover and PRESS into the surface on click. */ body.nb .pf-btn { background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; clip-path: none; border-radius: var(--nm-r); box-shadow: var(--nm-out-sm); min-height: 34px; font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease), color .3s var(--cyber-ease); } body.nb .pf-btn:hover { background: var(--cyber-surface); color: var(--cyber-accent-hover); transform: translateY(-1px); box-shadow: var(--nm-out); } body.nb .pf-btn:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .pf-btn.pf-btn-ghost { background: var(--cyber-surface); color: var(--cyber-muted-fg); } body.nb .pf-btn.pf-btn-ghost:hover { color: var(--cyber-accent); background: var(--cyber-surface); } body.nb .pf-btn.pf-btn-ghost.on { background: var(--cyber-accent); color: var(--nm-on-accent); } body.nb .pf-btn-sm { padding: 5px 12px; min-height: 30px; box-shadow: var(--nm-out-sm); } body.nb .pf-btn:disabled, body.nb .pf-btn[aria-disabled="true"] { background: var(--nm-flat); color: var(--cyber-dim); box-shadow: none; transform: none; cursor: not-allowed; } /* Primary (post / hire / send / redeem): solid green fill, white label (6.6:1). */ body.nb .pf-shop, body.nb .md-card-acts .pf-btn:not(.pf-btn-ghost), body.nb .pf-cmt-compose .pf-btn, body.nb #jb-post, body.nb .rv-form .pf-btn, body.nb #fd-post-btn, body.nb .pf-compose-row .pf-btn:not(.pf-btn-ghost) { background: var(--cyber-accent); color: var(--nm-on-accent); } body.nb .pf-shop:hover, body.nb .md-card-acts .pf-btn:not(.pf-btn-ghost):hover, body.nb .pf-cmt-compose .pf-btn:hover, body.nb #jb-post:hover, body.nb .rv-form .pf-btn:hover, body.nb #fd-post-btn:hover, body.nb .pf-compose-row .pf-btn:not(.pf-btn-ghost):hover { background: var(--cyber-accent-hover); color: var(--nm-on-accent); } /* Inputs / textareas / selects: deep carved wells in the same surface. */ body.nb .pf-find-input, body.nb .pf-post-input, body.nb .md-avail-sel, body.nb select, body.nb textarea { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; box-shadow: var(--nm-in-deep); font-family: var(--font-body); font-weight: 500; } body.nb .pf-find-input::placeholder, body.nb .pf-post-input::placeholder, body.nb textarea::placeholder { color: var(--cyber-dim); } body.nb .pf-find-input:focus, body.nb .pf-post-input:focus, body.nb .md-avail-sel:focus, body.nb select:focus, body.nb textarea:focus { background: var(--cyber-surface); box-shadow: var(--nm-in-deep); outline: 2px solid var(--cyber-accent); outline-offset: 2px; } body.nb select option { background: var(--cyber-surface); color: var(--cyber-fg); } /* Avatars: soft coins — accent rings from points.css go transparent, the shadow is the edge. (!important matches the specificity the old skin needed to beat points.css's colored borders.) */ body.nb .md-av, body.nb .dm-av, body.nb .pf-person-av, body.nb .pf-avatar, body.nb .pf-avatar-xl, body.nb .ax-av, body.nb .lb-av, body.nb .nt-av, body.nb .lb-av-ph { border-color: transparent !important; box-shadow: var(--nm-out-sm); background: var(--cyber-accent-dim); color: var(--cyber-accent); } body.nb .pf-avatar-xl { border-radius: var(--nm-r-xl); } /* Counters (unread dots, endorse counts, badges-with-numbers): solid green, white text — the one place the accent is a fill by default. */ body.nb .md-count, body.nb .dm-unread, body.nb .ax-badge, body.nb .ax-badge-ev, body.nb .rv-endorse-n:not(:empty) { background: var(--cyber-accent); color: var(--nm-on-accent); border: 1px solid transparent; border-radius: 999px; box-shadow: 2px 2px 4px rgba(var(--nm-shadow-rgb), .5); } body.nb .rv-endorse.on .rv-endorse-n:not(:empty) { background: var(--cyber-accent-hover); } /* cyber.css buttons/inputs (the events page hosts its create/join controls on .cyber-btn): re-shape the chamfered cut-corner look into soft keys. Neither skin covered these before — under brutalism the cut corners happened to fit. */ body.nb .cyber-btn { color: var(--cyber-accent); background: var(--cyber-surface); border: 1px solid transparent; clip-path: none; border-radius: var(--nm-r); box-shadow: var(--nm-out-sm); font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease), color .3s var(--cyber-ease); } body.nb .cyber-btn:hover { background: var(--cyber-surface); color: var(--cyber-accent-hover); box-shadow: var(--nm-out); transform: translateY(-1px); } body.nb .cyber-btn:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .cyber-btn.btn-ghost, body.nb .cyber-btn--ghost { color: var(--cyber-muted-fg); } body.nb .cyber-btn:disabled { opacity: 1; background: var(--nm-flat); color: var(--cyber-dim); box-shadow: none; } body.nb .cyber-input { color: var(--cyber-fg); background: var(--cyber-surface); border: 1px solid transparent; clip-path: none; border-radius: var(--nm-r); box-shadow: var(--nm-in-deep); font-family: var(--font-body); } body.nb .cyber-input:focus { border-color: transparent; box-shadow: var(--nm-in-deep); outline: 2px solid var(--cyber-accent); outline-offset: 2px; } body.nb .cyber-field::before { color: var(--cyber-accent); } /* Progress recipe for future phases: inset track, green fill. */ body.nb .nm-track { height: 10px; border-radius: 999px; background: var(--cyber-surface); box-shadow: var(--nm-in-deep); overflow: hidden; } body.nb .nm-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--nm-accent-bright), var(--cyber-accent)); box-shadow: var(--nm-out-sm); } /* ═══════════════════════════════════════════════════════════════════════════ MARKETPLACE — mod directory (/mods), job board (/jobs), reviews ═══════════════════════════════════════════════════════════════════════════ */ /* Interactive grid cards: gentle rest, lift on hover. */ body.nb .md-card, body.nb .md-job { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out-sm); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .md-card:hover, body.nb .md-job:hover { transform: translateY(-2px); box-shadow: var(--nm-out); } body.nb .md-card-head { color: var(--cyber-fg); } body.nb .md-name { font-weight: 700; } body.nb .md-card-head:hover .md-name { color: var(--cyber-accent); } body.nb .md-headline { color: var(--cyber-muted-fg); } body.nb .md-job-title { font-weight: 700; } body.nb .md-apps { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); } /* Gig marketplace surfaces — neumorphic in the neo zone (esp. the detail package cards, which have no gradient cover to delineate them and would otherwise blend into the page background). */ body.nb .svc-card, body.nb .svc-pkg, body.nb .svc-pkg-edit { background: var(--cyber-surface); border: 1px solid transparent; box-shadow: var(--nm-out-sm); } body.nb .svc-card--click:hover { transform: translateY(-2px); box-shadow: var(--nm-out); border-color: transparent; } body.nb .svc-foot { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); } /* ── Bottom dock (app-nav.js buildDock) — neumorphic clay in the neo zone ── */ body.nb .ax-dock { background: var(--cyber-surface); border-top: 1px solid transparent; box-shadow: 0 -6px 16px rgba(var(--nm-shadow-rgb), .3); } body.nb .ax-tab.on { color: var(--cyber-accent); } body.nb .ax-tab-fab { background: var(--cyber-accent); color: var(--nm-on-accent, #fff); box-shadow: var(--nm-out); } body.nb .ax-tab-fab:active { transform: translateY(1px); } body.nb .ax-foot-btn { background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; box-shadow: var(--nm-out-sm); } body.nb .ax-foot-btn:hover { box-shadow: var(--nm-out); } body.nb .ax-foot-dot.is-online { background: var(--cyber-accent); box-shadow: 0 0 6px var(--cyber-accent); } /* ── Mobile / touch: beat neo's own button min-heights so tap targets reach ≥42–44px ── */ @media (max-width: 719px), (pointer: coarse) { body.nb .pf-btn { min-height: 44px; } body.nb .pf-btn-sm { min-height: 42px; } } /* Calmer card-header hairline (dashboard vocabulary), drawn with neo's shadow tint. Scoped so a COLLAPSED
summary shows no stray divider. --nm-shadow-rgb flips correctly in dark neo. */ body.nb .pf-social-box > .pf-social-title:not(summary), body.nb details.pf-social-box[open] > summary.pf-social-title { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .45); padding-bottom: 8px; } body.nb .md-contact { background: var(--cyber-accent-dim); color: var(--cyber-accent); border: 1px solid transparent; border-radius: var(--nm-r-sm); box-shadow: var(--nm-in-sm); font-weight: 600; } /* Static info pills: recessed label wells with semantic tints. */ body.nb .md-pill, body.nb .md-tag { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 600; } body.nb .md-avail-open { background: var(--cyber-ok-dim); color: var(--cyber-accent); } body.nb .md-avail-busy { background: var(--cyber-warn-dim); color: var(--cyber-warn); } body.nb .md-avail-none { background: var(--nm-flat); color: var(--cyber-dim); } body.nb .md-verified { background: var(--cyber-ok-dim); color: var(--cyber-accent); } /* Interactive chips + tabs: raised; selected = pressed-in with a green tint. */ body.nb .md-chip, body.nb .md-tab { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-out-sm); font-weight: 600; cursor: pointer; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease), color .3s var(--cyber-ease); } body.nb .md-chip:hover, body.nb .md-tab:hover { color: var(--cyber-accent); transform: translateY(-1px); } body.nb .md-chip:active, body.nb .md-tab:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .md-chip.on, body.nb .md-tab.on { background: var(--cyber-accent-dim); color: var(--cyber-accent); box-shadow: var(--nm-in-sm); transform: none; } /* Reviews: raised item cards; warm stars (yellow fails on clay). */ body.nb .rv-item { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-out-sm); } body.nb .rv-star-base { color: var(--nm-star-empty); } body.nb .rv-star-fill, body.nb .rv-star-btn .ms.ms-f { color: var(--cyber-warn); } body.nb .rv-star-btn { color: var(--nm-star-empty); } body.nb .rv-summary { color: var(--cyber-muted-fg); } /* ═══════════════════════════════════════════════════════════════════════════ SOCIAL — feed + profile (/feed, /profile) + FB-layout boxes ═══════════════════════════════════════════════════════════════════════════ */ body.nb .pf-sub { color: var(--cyber-dim); font-weight: 500; } body.nb .pf-friendcount { color: var(--cyber-dim); font-weight: 500; } body.nb .pf-friendcount b { color: var(--cyber-fg); } body.nb .pf-total b, body.nb .pf-stats b { color: var(--cyber-fg); } body.nb .pf-status { color: var(--cyber-dim); } body.nb .pf-status-editbtn { color: var(--cyber-dim); } body.nb .pf-status-editbtn:hover { color: var(--cyber-accent); } body.nb .pf-social-title { color: var(--cyber-fg); font-weight: 700; text-transform: none; letter-spacing: -.01em; } body.nb .pf-social-title .ms { color: var(--cyber-accent); } /* Wall filter pills: raised → pressed-in when selected (same physics as tabs). */ body.nb .pf-pill { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-out-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), color .3s var(--cyber-ease); } body.nb .pf-pill:hover { color: var(--cyber-accent); transform: translateY(-1px); } body.nb .pf-pill.on { background: var(--cyber-accent-dim); color: var(--cyber-accent); box-shadow: var(--nm-in-sm); transform: none; } /* Information rows + mutual friends (left column). */ body.nb .pf-info-label { color: var(--cyber-dim); } body.nb .pf-info-row b { color: var(--cyber-fg); } body.nb .pf-mutual-name { color: var(--cyber-dim); } body.nb .pf-mutual-chip:hover .pf-mutual-name { color: var(--cyber-accent); } /* Recent purchases: a quiet ruled footnote inside the channel card. */ body.nb .pf-recent { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); padding-top: 6px; margin-top: 8px; } body.nb .pf-recent-head { color: var(--cyber-dim); font-weight: 700; } body.nb .pf-recent-row { color: var(--cyber-fg); } body.nb .pf-recent-row b { color: var(--cyber-fg); font-weight: 600; } body.nb .pf-recent-row .pf-recent-cost { color: var(--cyber-warn); opacity: 1; font-weight: 700; } body.nb .pf-recent-state { color: var(--cyber-warn); background: var(--cyber-warn-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); padding: 0 7px; opacity: 1; } body.nb .pf-recent-state.is-done { background: var(--cyber-ok-dim); color: var(--cyber-accent); } /* Friend rows (dense list): flat, hover tint. */ body.nb .pf-person { border-radius: var(--nm-r-sm); transition: background .3s var(--cyber-ease); } body.nb .pf-person:hover { background: var(--nm-hover-tint); } body.nb .pf-person-name { font-weight: 600; } body.nb .pf-person-link:hover .pf-person-name { color: var(--cyber-accent); } /* Feed posts: raised cards, gentle hover lift. */ body.nb .pf-post { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out-sm); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .pf-post:hover { transform: translateY(-1px); box-shadow: var(--nm-out); } body.nb .pf-post-body { color: var(--cyber-fg); } body.nb .pf-post-time { color: var(--cyber-dim); opacity: 1; } body.nb .pf-post-actions { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); } /* Like / comment: raised toggle chips; liked = pressed-in green. */ body.nb .pf-like, body.nb .pf-cmt-toggle { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; box-shadow: var(--nm-out-sm); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease), color .3s var(--cyber-ease); } body.nb .pf-like:hover, body.nb .pf-cmt-toggle:hover { color: var(--cyber-accent); transform: translateY(-1px); } body.nb .pf-like:active, body.nb .pf-cmt-toggle:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .pf-like.liked { background: var(--cyber-accent-dim); color: var(--cyber-accent); box-shadow: var(--nm-in-sm); transform: none; } /* Comments: shallow wells under the post. */ body.nb .pf-comments { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); } body.nb .pf-comment { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-in-sm); } body.nb .pf-comment-body { color: var(--cyber-fg); } /* Achievement badges: soft pills, no rotation (stickers were the old skin). */ body.nb .pf-badge { clip-path: none; border-radius: 999px; border: 1px solid transparent; box-shadow: var(--nm-out-sm); background: var(--cyber-accent-dim); color: var(--cyber-accent); transform: none; } body.nb .pf-badge:nth-child(even) { transform: none; background: var(--cyber-accent3-dim); color: var(--cyber-accent-3); } body.nb .pf-badge.tier-2 { background: var(--cyber-accent3-dim); color: var(--cyber-accent-3); } body.nb .pf-badge.tier-3 { background: var(--cyber-accent2-dim); color: var(--cyber-accent-2); } body.nb .pf-badge b { color: var(--cyber-warn); } body.nb .pf-badge.off { background: var(--nm-flat); color: var(--cyber-dim); box-shadow: none; opacity: 1; } body.nb .pf-badge.pending { background: var(--cyber-warn-dim); color: var(--cyber-warn); } /* Empty states + toast. */ body.nb .pf-empty { color: var(--cyber-dim); font-weight: 600; text-transform: none; letter-spacing: 0; } body.nb .pf-toast { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; clip-path: none; border-radius: var(--nm-r); box-shadow: var(--nm-out-lg); font-weight: 600; text-transform: none; } /* Links editor rows + public link chips. */ body.nb .pf-link-row { background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-out-sm); } body.nb .pf-link-row:hover { color: var(--cyber-accent-hover); transform: translateY(-1px); } body.nb .pf-link-del { color: var(--cyber-dim); } body.nb .pf-link-del:hover { color: var(--cyber-danger); } body.nb .pf-vis-select { border-color: transparent; } /* ═══════════════════════════════════════════════════════════════════════════ MESSAGES — unified inbox (/messages): DMs + EdiX Team tickets ═══════════════════════════════════════════════════════════════════════════ */ /* Conversation rows (dense list): FLAT — hover tint, selected = inset + tint. */ body.nb .dm-conv { background: transparent; color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-sm); transition: background .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .dm-conv:hover { background: var(--nm-hover-tint); box-shadow: none; } body.nb .dm-conv.on { background: var(--cyber-accent-dim); border-color: transparent; box-shadow: var(--nm-in-sm); } body.nb .dm-conv-name { font-weight: 700; } body.nb .dm-conv-last { color: var(--cyber-dim); opacity: 1; } body.nb .dm-thread-head { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .45); } body.nb .dm-compose { border-top: 1px solid rgba(var(--nm-shadow-rgb), .45); } /* Message bubbles: raised; mine = green tint; team/AI get their own tints. */ body.nb .dm-msg-body { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-out-sm); } body.nb .dm-msg.mine .dm-msg-body { background: var(--cyber-accent-dim); color: var(--cyber-fg); } body.nb .dm-msg-ai .dm-msg-body, body.nb .dm-msg.ai .dm-msg-body { background: var(--cyber-accent3-dim); } body.nb .dm-msg-admin .dm-msg-body, body.nb .dm-msg.admin .dm-msg-body { background: var(--cyber-accent2-dim); } body.nb .dm-msg-time { color: var(--cyber-dim); opacity: 1; } /* Ticket status chips: recessed wells with semantic tints. */ body.nb .dm-tk-status { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ POINTS SHOP — /shop/. The rule that carries the page survives the reskin: A SHADOW MEANS YOU CAN BUY IT — purchasable rows are raised and lift on hover; soldout/broke rows sit FLAT and recessed-grey. NOTE: points.css chamfers these with a literal clip-path (not tokenised, so the remap can't flatten it) — and a clip-path CLIPS the soft shadow away entirely. Every rule here must clear it before it can cast one. ═══════════════════════════════════════════════════════════════════════════ */ /* Wallet + season rank: quiet recessed wells, no rotation. */ body.nb .sp-mybal { color: var(--cyber-warn); background: var(--cyber-warn-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 700; padding: 3px 12px; transform: none; } body.nb .sp-myrank { color: var(--cyber-accent); background: var(--cyber-accent-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 700; padding: 3px 12px; transform: none; } /* The /profile link carries an inline colour (frozen shop.html), so !important is the only lever — and the same attribute's margin-inline-start:auto is load-bearing, so the attribute stays. */ body.nb .sp-head a { color: var(--cyber-accent) !important; display: inline-block; background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-out-sm); padding: 4px 12px; text-transform: none; letter-spacing: 0; font-weight: 600; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .sp-head a:hover { transform: translateY(-1px); box-shadow: var(--nm-out); } body.nb .sp-head a:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } /* How-to strip: chat commands as raised keycaps. */ body.nb .sp-how code { background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; border-radius: var(--nm-r-sm); clip-path: none; box-shadow: var(--nm-out-sm); font-family: var(--font-body); font-weight: 700; padding: 3px 9px; } /* Sign-in CTA: raised card + primary key. */ body.nb .sp-signin { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-xl); clip-path: none; box-shadow: var(--nm-out); font-weight: 500; } body.nb .sp-signin .ms { color: var(--cyber-accent); } body.nb .sp-signin-btn { background: var(--cyber-accent); color: var(--nm-on-accent); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; box-shadow: var(--nm-out-sm); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease); } body.nb .sp-signin-btn:hover { background: var(--cyber-accent-hover); filter: none; transform: translateY(-1px); box-shadow: var(--nm-out); } body.nb .sp-signin-btn:active { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .sp-off, body.nb .sp-empty { color: var(--cyber-dim); font-weight: 600; text-transform: none; letter-spacing: 0; } /* Reward rows: raised = purchasable. */ body.nb .sp-item { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; box-shadow: var(--nm-out-sm); padding: 10px 14px; margin-bottom: 14px; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .sp-item:not(.soldout):not(.broke):hover { transform: translateY(-2px); box-shadow: var(--nm-out); } /* The keypad code `!buy ` resolves against: a solid green key. */ body.nb .sp-item-num { background: var(--cyber-accent); color: var(--nm-on-accent); min-width: 22px; height: 22px; /* min-width, not width: the label is "1." … "10." */ padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: .78rem; } body.nb .sp-item-icon { width: 32px; height: 32px; display: grid; place-items: center; background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-deep); } body.nb .sp-item-name { color: var(--cyber-fg); font-weight: 700; } body.nb .sp-item-desc { color: var(--cyber-dim); opacity: 1; font-weight: 450; } body.nb .sp-item-kind { background: var(--cyber-accent3-dim); color: var(--cyber-accent-3); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 600; padding: 2px 9px; display: inline-flex; align-items: center; gap: 3px; } body.nb .sp-stock { color: var(--cyber-warn); background: var(--cyber-warn-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 700; } /* The price: a recessed warm well (the eyelet + rotation were the old skin). */ body.nb .sp-item-cost { position: relative; background: var(--cyber-warn-dim); color: var(--cyber-warn); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 700; padding-block: 4px; padding-inline: 12px; margin-inline-start: 4px; transform: none; } body.nb .sp-item-cost::before { content: none; } /* Redeem: a primary key that presses. */ body.nb .sp-redeem { background: var(--cyber-accent); color: var(--nm-on-accent); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; box-shadow: var(--nm-out-sm); font-weight: 700; transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease), background .3s var(--cyber-ease); } body.nb .sp-redeem:hover:not(:disabled) { background: var(--cyber-accent-hover); filter: none; transform: translateY(-1px); box-shadow: var(--nm-out); } body.nb .sp-redeem:active:not(:disabled) { transform: translateY(.5px); box-shadow: var(--nm-in-sm); } body.nb .sp-redeem:disabled { opacity: 1; background: var(--nm-flat); color: var(--cyber-dim); border-color: transparent; box-shadow: none; } /* Featured: the hero row. Re-asserts background AND border because `body.nb .sp-item` (0,2,1) outranks `.sp-item.featured` (0,2,0) — without this the tint from points.css silently vanishes. The old spine border is gone (no borders); the deeper shadow + tint carry the emphasis. */ body.nb .sp-item.featured { background-color: var(--cyber-accent-dim); border: 1px solid transparent; border-inline-start: 1px solid transparent; box-shadow: var(--nm-out); } body.nb .sp-item.featured:not(.soldout):not(.broke):hover { box-shadow: var(--nm-out-lg); } body.nb .sp-featured-head { color: var(--cyber-accent); background: var(--cyber-surface); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; margin-bottom: 8px; font-weight: 700; } /* SOLD OUT: flat and recessed-grey — no shadow = not purchasable. */ body.nb .sp-item.soldout { opacity: 1; filter: none; /* points.css dimmed to .45 → unreadable */ background: var(--nm-flat); box-shadow: none; } body.nb .sp-item.soldout .sp-item-cost { background: var(--nm-flat); color: var(--cyber-dim); box-shadow: none; } body.nb .sp-item.soldout .sp-item-num { background: var(--cyber-dim); } body.nb .sp-ribbon { color: var(--nm-on-accent); background: var(--cyber-danger); border: 1px solid transparent; border-radius: 999px; box-shadow: 2px 2px 6px rgba(var(--nm-shadow-rgb), .6); font-weight: 700; padding: 3px 12px; transform: none; } /* Can't afford: stays fully readable — it just sits flat. */ body.nb .sp-item.broke { opacity: 1; filter: none; background: var(--nm-track); box-shadow: none; } body.nb .sp-item.broke .sp-item-cost { background: var(--cyber-warn-dim); box-shadow: none; } /* The shop's own Top Viewers board: flat dense rows. */ body.nb .sp-lb-row { background: transparent; border: 1px solid transparent; border-radius: var(--nm-r-sm); padding: 7px 10px; margin-bottom: 4px; transition: background .3s var(--cyber-ease); } body.nb .sp-lb-row:hover { background: var(--nm-hover-tint); } body.nb .sp-lb-rank { background: var(--cyber-accent); color: var(--nm-on-accent); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: .78rem; } body.nb .sp-lb-name { color: var(--cyber-fg); font-weight: 600; } body.nb .sp-lb-pts { color: var(--cyber-warn); font-weight: 700; font-family: var(--font-mono); font-size: .82rem; } /* Redeem feed: soft rows; names get a gentle green tint. */ body.nb .sp-feed-row { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-sm); clip-path: none; box-shadow: var(--nm-out-sm); margin-bottom: 8px; animation: nmFeedIn .3s var(--cyber-ease) both; /* NOT spIn — keyframes are global */ } body.nb .sp-feed-row b { color: var(--cyber-accent); background: var(--cyber-accent-dim); padding: 0 5px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Celebration on a successful redeem: a soft rise-and-fade (no rotation). */ body.nb .sp-burst { background: var(--cyber-surface); color: var(--cyber-accent); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-out); padding: 4px 10px; line-height: 1; font-weight: 700; animation: nmBurst .5s var(--cyber-ease) forwards; /* JS removes the node at 900ms */ } /* @keyframes are GLOBAL — body.nb does not scope them. Redefining spIn/spBurst here would leak onto every cyberpunk page, so these get their own names. */ @keyframes nmFeedIn { from { transform: translateY(-4px); opacity: 0; } } @keyframes nmBurst { 0% { transform: scale(.7); opacity: 0; } 25% { transform: scale(1.08); opacity: 1; } 60% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL LEADERBOARD — /leaderboard. Flat dense rows inside raised cards; the three boards stay distinguishable via green / teal / steel headers. ═══════════════════════════════════════════════════════════════════════════ */ body.nb .lb-sub { color: var(--cyber-dim); opacity: 1; } body.nb .lb-chip { background: var(--cyber-surface); color: var(--cyber-muted-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 600; } body.nb .lb-chip .ms { color: var(--cyber-accent); } body.nb .lb-card-title { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .45); font-weight: 700; } /* Board identity: tinted header bands (ink stays readable on each tint). */ body.nb .lb-card-viewers .lb-card-title { background: var(--cyber-accent-dim); color: var(--cyber-accent); } body.nb .lb-card-streamers .lb-card-title { background: var(--cyber-accent2-dim); color: var(--cyber-accent-2); } body.nb .lb-card-mods .lb-card-title { background: var(--cyber-accent3-dim); color: var(--cyber-accent-3); } body.nb .lb-card-viewers .lb-card-title, body.nb .lb-card-streamers .lb-card-title, body.nb .lb-card-mods .lb-card-title { margin: -18px -16px 14px; padding: 12px 16px; border-radius: var(--nm-r-xl) var(--nm-r-xl) 0 0; } body.nb .lb-row { border-radius: var(--nm-r-sm); border: 2px solid transparent; transition: background .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .lb-row:hover { background: var(--nm-hover-tint); border-color: transparent; } /* Podium: the top 3 sit gently pressed-in with a green tint. */ body.nb .lb-row.top { border-color: transparent; background: rgba(9, 106, 78, .07); box-shadow: var(--nm-in-sm); margin-bottom: 6px; } body.nb .lb-rank { color: var(--cyber-dim); } /* Medals: soft metal coins. width must stay 30px (.lb-rank) or ranks 1-3 misalign with 4+. */ body.nb .lb-rank.lb-medal { background: var(--cyber-surface-2); color: var(--cyber-fg); width: 30px; height: 26px; display: grid; place-items: center; border-radius: 999px; font-size: .85rem; font-weight: 700; box-shadow: var(--nm-out-sm); } body.nb .lb-board .lb-row:nth-child(1) .lb-rank.lb-medal { background: var(--nm-medal-1); } body.nb .lb-board .lb-row:nth-child(2) .lb-rank.lb-medal { background: var(--nm-medal-2); } body.nb .lb-board .lb-row:nth-child(3) .lb-rank.lb-medal { background: var(--nm-medal-3); } body.nb .lb-av-ph { background: var(--cyber-accent-dim); color: var(--cyber-accent); font-weight: 700; } body.nb .lb-name { color: var(--cyber-fg); font-weight: 600; } body.nb a.lb-name:hover { color: var(--cyber-accent); text-decoration: underline; text-decoration-thickness: 2px; } body.nb .lb-name-meta { color: var(--cyber-dim); opacity: 1; } body.nb .lb-name-meta .ms { color: var(--cyber-dim); opacity: 1; } body.nb .lb-pts { color: var(--cyber-warn); font-weight: 700; background: var(--cyber-warn-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); padding: 2px 10px; /* JetBrains Mono, not DM Sans: DM Sans has no tabular figures, and point columns need equal-width digits to align across rows. */ font-family: var(--font-mono); font-size: .82rem; } body.nb .lb-empty { color: var(--cyber-dim); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ SHOPS DIRECTORY (.sh-*) + EVENTS (.ev-*) — structural rules live in points.css (migrated from the pages' old inline blocks); tints + shadows come from the token remap plus these accents. ═══════════════════════════════════════════════════════════════════════════ */ body.nb .sh-card, body.nb .ev-card { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out-sm); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .sh-card:hover, body.nb .ev-card:hover { transform: translateY(-2px); box-shadow: var(--nm-out); } body.nb .ev-create { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out); } body.nb .sh-badge, body.nb .ev-mine-tag { background: var(--cyber-accent-dim); color: var(--cyber-accent); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-sm); font-weight: 600; } body.nb .ev-when { color: var(--cyber-warn); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ CHROME — top nav, side rail, footer, notifications bell, beta modal ═══════════════════════════════════════════════════════════════════════════ */ /* Top nav: solid clay, no blur; the seam is a one-directional soft drop. */ body.nb .ax-nav { background: var(--cyber-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; box-shadow: 0 6px 12px rgba(var(--nm-shadow-rgb), .45); } /* The brand is the mark now (cyber.css). This rule must NOT set `background`, or it would win on specificity and wipe the logo out on every community page. */ body.nb .ax-logo { border: 0; box-shadow: none; padding: 0; } body.nb .ax-link { color: var(--cyber-muted-fg); border: 0; padding: 6px 12px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; transition: background .3s var(--cyber-ease), color .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .ax-link:hover { color: var(--cyber-accent); background: transparent; border-color: transparent; } body.nb .ax-link.on { color: var(--cyber-accent); background: var(--cyber-accent-dim); border-color: transparent; box-shadow: var(--nm-in-sm); } body.nb .ax-link.on::after { display: none; } body.nb .ax-btn-primary { background: var(--cyber-accent); color: var(--nm-on-accent); border-color: transparent; } body.nb .ax-btn-primary:hover { background: var(--cyber-accent-hover); color: var(--nm-on-accent); filter: none; } body.nb .ax-chip { color: var(--cyber-fg); border: 1px solid transparent; border-radius: 999px; padding-block: 3px; padding-inline: 4px 10px; background: var(--cyber-surface); box-shadow: var(--nm-out-sm); } body.nb .ax-chip.on { box-shadow: var(--nm-in-sm); background: var(--cyber-accent-dim); } body.nb .ax-chip .ax-chip-name { color: var(--cyber-fg); } body.nb .ax-chip.on .ax-chip-name, body.nb .ax-chip:hover .ax-chip-name { color: var(--cyber-accent); } body.nb .ax-burger { color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-sm); box-shadow: var(--nm-out-sm); } body.nb .ax-lang { color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; background: var(--cyber-surface); box-shadow: var(--nm-in-sm); font-family: var(--font-body); } body.nb .ax-lang option { background: var(--cyber-surface); color: var(--cyber-fg); } /* People search: a carved well + a raised results panel. */ body.nb .ax-search-in { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-in-deep); } body.nb .ax-search-in::placeholder { color: var(--cyber-dim); } body.nb .ax-search-in:focus { border-color: transparent; outline: 2px solid var(--cyber-accent); outline-offset: 2px; } body.nb .ax-search-res { background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-out-lg); backdrop-filter: none; -webkit-backdrop-filter: none; } body.nb .ax-search-row { color: var(--cyber-fg); border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .35); } body.nb .ax-search-row:hover { background: var(--nm-hover-tint); } body.nb .ax-search-empty { color: var(--cyber-dim); opacity: 1; } /* Collapsed burger menu (must match app-nav.css's 1279px threshold). */ @media (max-width: 1279px) { body.nb .ax-collapse { background: var(--cyber-surface); border: 0; border-bottom: 1px solid transparent; box-shadow: 0 12px 20px rgba(var(--nm-shadow-rgb), .55); backdrop-filter: none; -webkit-backdrop-filter: none; } body.nb .ax-link { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .35); border-radius: 0; } body.nb .ax-link.on { box-shadow: none; } body.nb .ax-lang, body.nb .ax-btn, body.nb .ax-chip { border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .35); } body.nb .ax-search { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .35); } } /* Side rail: solid clay column; its edge is a physical soft shadow (mirrored for RTL below — box-shadow has no logical form). Active item = pressed-in. */ body.nb .ax-rail { background: var(--cyber-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-inline-end: 1px solid transparent; box-shadow: 6px 0 12px rgba(var(--nm-shadow-rgb), .35); } [dir="rtl"] body.nb .ax-rail { box-shadow: -6px 0 12px rgba(var(--nm-shadow-rgb), .35); } body.nb .ax-rail-link { color: var(--cyber-muted-fg); border-inline-start: 2px solid transparent; border-radius: var(--nm-r-sm); font-family: var(--font-body); font-weight: 600; transition: background .3s var(--cyber-ease), color .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .ax-rail-link .ms { color: var(--cyber-dim); } body.nb .ax-rail-link:hover { background: var(--nm-hover-tint); color: var(--cyber-accent); } body.nb .ax-rail-link:hover .ms { color: var(--cyber-accent); } body.nb .ax-rail-link.on { background: var(--cyber-accent-dim); border-inline-start-color: transparent; box-shadow: var(--nm-in-sm); color: var(--cyber-accent); } body.nb .ax-rail-link.on .ms { color: var(--cyber-accent); } /* Footer: same surface, soft seam upward. */ body.nb .pg-footer { background: var(--cyber-surface); color: var(--cyber-dim); border-top: 1px solid transparent; box-shadow: 0 -6px 12px rgba(var(--nm-shadow-rgb), .30); } body.nb .pg-footer a { color: var(--cyber-accent); font-weight: 600; } /* .pg-brand is the mark — no text colour to set, and no `background` here (see the .ax-logo note). */ body.nb .pg-lang { color: var(--cyber-fg); background: var(--cyber-surface); border: 1px solid transparent; border-radius: var(--nm-r); box-shadow: var(--nm-in-sm); } body.nb .pg-lang option { background: var(--cyber-surface); color: var(--cyber-fg); } /* Notifications bell: the classic neumorphic circle. (sb-fab kept for the frozen pages that still load the stubbed support bubble's css.) */ body.nb .nt-fab, body.nb .sb-fab { border: 1px solid transparent !important; box-shadow: var(--nm-out) !important; background: var(--cyber-surface); color: var(--cyber-accent); transition: transform .3s var(--cyber-ease), box-shadow .3s var(--cyber-ease); } body.nb .nt-fab:hover { transform: translateY(-1px); box-shadow: var(--nm-out-lg) !important; } body.nb .nt-fab:active { transform: translateY(.5px); box-shadow: var(--nm-in) !important; } body.nb .nt-panel, body.nb .sb-panel, body.nb .sb-card { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-xl); box-shadow: var(--nm-out-lg); } body.nb .nt-panel-head { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .45); font-weight: 700; text-transform: none; } body.nb .nt-item { border-bottom: 1px solid rgba(var(--nm-shadow-rgb), .35); border-radius: 0; transition: background .3s var(--cyber-ease); } body.nb .nt-item:hover { background: var(--nm-hover-tint); } body.nb .nt-item.unread { background: rgba(9, 106, 78, .08); } body.nb .nt-badge, body.nb .sb-badge { border: 1px solid transparent; background: var(--cyber-danger); color: var(--nm-on-accent); } body.nb .nt-time { color: var(--cyber-dim); } body.nb .nt-empty { color: var(--cyber-dim); } /* Beta modal — beta-notice.css targets via the #beta-notice ID, so we must match that specificity (body.nb #beta-notice … = (1,2,1) beats #beta-notice … = (1,1,0)) and set explicit colors. */ body.nb #beta-notice .bn-box { background: var(--cyber-surface); color: var(--cyber-fg); border: 1px solid transparent; border-radius: var(--nm-r-xl); clip-path: none; box-shadow: var(--nm-out-lg); } body.nb #beta-notice .bn-title { color: var(--cyber-fg); font-family: var(--font-head); } body.nb #beta-notice .bn-count { background: var(--cyber-accent); color: var(--nm-on-accent); border: 1px solid transparent; border-radius: 999px; } body.nb #beta-notice .bn-close { color: var(--cyber-dim); border: 1px solid transparent; border-radius: 999px; box-shadow: var(--nm-out-sm); } body.nb #beta-notice .bn-ok { background: var(--cyber-accent); color: var(--nm-on-accent); border: 1px solid transparent; border-radius: var(--nm-r); clip-path: none; box-shadow: var(--nm-out-sm); } body.nb #beta-notice .bn-ok:hover { background: var(--cyber-accent-hover); color: var(--nm-on-accent); } /* Scrollbars on the scrolling panels: slim soft thumbs. */ body.nb .dm-list::-webkit-scrollbar, body.nb .dm-messages::-webkit-scrollbar, body.nb .nt-panel::-webkit-scrollbar, body.nb .ax-search-res::-webkit-scrollbar, body.nb .ax-rail::-webkit-scrollbar { width: 8px; } body.nb .dm-list::-webkit-scrollbar-thumb, body.nb .dm-messages::-webkit-scrollbar-thumb, body.nb .nt-panel::-webkit-scrollbar-thumb, body.nb .ax-search-res::-webkit-scrollbar-thumb, body.nb .ax-rail::-webkit-scrollbar-thumb { background: var(--nm-scroll-thumb); border-radius: 999px; } body.nb .dm-list::-webkit-scrollbar-track, body.nb .dm-messages::-webkit-scrollbar-track, body.nb .nt-panel::-webkit-scrollbar-track, body.nb .ax-search-res::-webkit-scrollbar-track, body.nb .ax-rail::-webkit-scrollbar-track { background: transparent; } /* Density: soft shadows need clearance ≥ their blur radius. */ body.nb .pf-feed { gap: 18px; } body.nb .md-grid, body.nb .sh-grid, body.nb .ev-grid { gap: 20px; } body.nb .rv-list { gap: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ A11Y — visible focus, high-contrast counter-override, reduced motion ═══════════════════════════════════════════════════════════════════════════ */ body.nb a:focus-visible, body.nb button:focus-visible, body.nb .pf-btn:focus-visible, body.nb .ax-link:focus-visible, body.nb .md-chip:focus-visible, body.nb .pf-pill:focus-visible { outline: 2px solid var(--cyber-accent); outline-offset: 2px; } /* protect.js's high-contrast toggle sets --cyber-fg:var(--nm-on-accent) — WHITE on clay would be invisible. body.nb.a11y-contrast = (0,2,1) beats protect.js's injected (0,1,1) regardless of order: darken the ink, deepen every shadow, and give the primitives a real outline (accessibility overrides the no-border rule). */ body.nb.a11y-contrast { /* solid black beats the gradient here — max contrast is the whole point of this mode */ --brand-mark: url('/brand/mark-black.png?v=1'); --cyber-fg: #1A202C; --cyber-text: #1A202C; --cyber-text-dim: #2D3748; --cyber-dim: #2D3748; --cyber-muted-fg: #2D3748; --nm-out-sm: 5px 5px 10px rgba(139, 154, 175, .8), -5px -5px 10px rgba(255, 255, 255, .7); --nm-out: 9px 9px 16px rgba(139, 154, 175, .8), -9px -9px 16px rgba(255, 255, 255, .7); --nm-out-lg: 12px 12px 20px rgba(139, 154, 175, .85), -12px -12px 20px rgba(255, 255, 255, .75); --nm-in-sm: inset 3px 3px 6px rgba(139, 154, 175, .8), inset -3px -3px 6px rgba(255, 255, 255, .7); --nm-in: inset 6px 6px 10px rgba(139, 154, 175, .8), inset -6px -6px 10px rgba(255, 255, 255, .7); --nm-in-deep: inset 10px 10px 20px rgba(139, 154, 175, .85), inset -10px -10px 20px rgba(255, 255, 255, .75); --a11y-outline: rgba(26, 32, 44, .35); color: #1A202C; } body.nb.a11y-contrast .pf-card, body.nb.a11y-contrast .sp-card, body.nb.a11y-contrast .pf-compose, body.nb.a11y-contrast .pf-social-box, body.nb.a11y-contrast .lb-card, body.nb.a11y-contrast .dm-thread, body.nb.a11y-contrast .md-card, body.nb.a11y-contrast .md-job, body.nb.a11y-contrast .pf-post, body.nb.a11y-contrast .sp-item, body.nb.a11y-contrast .pf-btn, body.nb.a11y-contrast .pf-find-input, body.nb.a11y-contrast .pf-post-input, body.nb.a11y-contrast select, body.nb.a11y-contrast textarea { outline: 1px solid var(--a11y-outline); outline-offset: 0; } body.nb.a11y-contrast .pf-post-time, body.nb.a11y-contrast .pf-sub, body.nb.a11y-contrast .dm-conv-last { color: #2D3748; } /* protect.js's contrast mode underlines EVERY anchor — right for inline text links, wrong for things shaped like buttons or navigation (an underlined pill reads as broken styling, not as an aid). Content links keep their underlines. */ body.nb.a11y-contrast .ax-logo, body.nb.a11y-contrast .ax-link, body.nb.a11y-contrast .ax-rail-link, body.nb.a11y-contrast .ax-chip, body.nb.a11y-contrast .ax-search-row, body.nb.a11y-contrast .pf-btn, body.nb.a11y-contrast .cyber-btn, body.nb.a11y-contrast .md-tab, body.nb.a11y-contrast .pf-pill, body.nb.a11y-contrast .pf-link-row, body.nb.a11y-contrast .sp-head a, body.nb.a11y-contrast .sh-card, body.nb.a11y-contrast .pf-mutual-chip, body.nb.a11y-contrast .pf-person-link, body.nb.a11y-contrast .pf-post-author, body.nb.a11y-contrast .nt-item { text-decoration: none; } /* Reduced motion: zero every lift/press/entrance. points.css's own media-query zeroes sit at (0,1,0); the body.nb rules above are (0,2,0)+ and would WIN even inside the query — so everything is re-zeroed here at ≥ specificity. */ @media (prefers-reduced-motion: reduce) { body.nb .md-card, body.nb .pf-post, body.nb .md-job, body.nb .pf-btn, body.nb .cyber-btn, body.nb .md-chip, body.nb .md-tab, body.nb .pf-pill, body.nb .pf-like, body.nb .pf-cmt-toggle, body.nb .dm-conv, body.nb .sh-card, body.nb .ev-card, body.nb .nt-fab, body.nb .pf-link-row, body.nb .ax-link, body.nb .ax-rail-link { transition: none; } body.nb .md-card:hover, body.nb .pf-post:hover, body.nb .md-job:hover, body.nb .sh-card:hover, body.nb .ev-card:hover, body.nb .pf-btn:hover, body.nb .cyber-btn:hover, body.nb .nt-fab:hover, body.nb .pf-link-row:hover { transform: none; } body.nb .pf-btn:active, body.nb .cyber-btn:active, body.nb .md-chip:active, body.nb .md-tab:active, body.nb .pf-like:active, body.nb .pf-cmt-toggle:active, body.nb .nt-fab:active { transform: none; } body.nb .sp-burst { animation: none; opacity: 0; } body.nb .sp-feed-row { animation: none; } body.nb .sp-item, body.nb .sp-redeem, body.nb .sp-signin-btn, body.nb .sp-head a, body.nb .lb-row { transition: none; } body.nb .sp-item:not(.soldout):not(.broke):hover { transform: none; } body.nb .sp-redeem:hover:not(:disabled), body.nb .sp-signin-btn:hover { transform: none; } body.nb .sp-redeem:active:not(:disabled), body.nb .sp-signin-btn:active, body.nb .sp-head a:active, body.nb .sp-head a:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ DARK NEO-SOFT — the THIRD palette. AUTO-follows the OS via @media (unless the user forced light); an explicit [data-theme] override (a11y toggle / the i18n.js no-flash resolver) wins in both directions. Realms opts OUT (.nb-nodark). Only colors + shadows flip — radii/motion/fonts inherit from the light remap. Two copies (media + attribute) are generated identical from one source. ═══════════════════════════════════════════════════════════════════════════ */ body.nb { color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.nb:not(.nb-nodark) { /* surfaces + ink — dark clay, near-white ink */ --cyber-bg: #262A31; --cyber-fg: #E4E7EC; --cyber-card: #262A31; --cyber-input: #262A31; --cyber-surface: #262A31; --cyber-surface-2: #2C313A; --cyber-muted: #1F232A; --cyber-text: #E4E7EC; --cyber-muted-fg: #C4CBD6; --cyber-text-dim: #AEB6C2; --cyber-dim: #AEB6C2; --cyber-border: transparent; --cyber-line: transparent; /* accents — lightened for AA on the dark clay; on-accent flips to a dark ink */ --cyber-accent: #45BE8C; --cyber-accent-hover: #5AC99B; --cyber-accent-line: transparent; --cyber-accent-dim: rgba(69, 190, 140, .16); --cyber-accent-soft: rgba(69, 190, 140, .24); --cyber-accent-glow: transparent; --cyber-accent-2: #3FB0A6; --cyber-accent2-line: transparent; --cyber-accent2-dim: rgba(63, 176, 166, .16); --cyber-accent-3: #6AA0CE; --cyber-accent3-line: transparent; --cyber-accent3-dim: rgba(106, 160, 206, .16); --cyber-ring: #45BE8C; --cyber-warn: #E8A857; --cyber-warn-dim: rgba(232, 168, 87, .14); --cyber-warn-line: transparent; --cyber-danger: #F0857B; --cyber-danger-dim: rgba(240, 133, 123, .14); --cyber-danger-line: transparent; --cyber-ok: #45BE8C; --cyber-ok-dim: rgba(69, 190, 140, .16); --cyber-ok-line: transparent; --cyber-grad-danger: linear-gradient(90deg, #F0857B, #E8A857); /* dark neumorphism: a real dark shadow + a FAINT light film (not the opaque white highlight) */ --nm-out-sm: 5px 5px 10px rgba(0, 0, 0, .5), -5px -5px 10px rgba(255, 255, 255, .04); --nm-out: 9px 9px 16px rgba(0, 0, 0, .5), -9px -9px 16px rgba(255, 255, 255, .04); --nm-out-lg: 12px 12px 22px rgba(0, 0, 0, .55), -12px -12px 22px rgba(255, 255, 255, .05); --nm-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .5), inset -3px -3px 6px rgba(255, 255, 255, .04); --nm-in: inset 6px 6px 10px rgba(0, 0, 0, .5), inset -6px -6px 10px rgba(255, 255, 255, .04); --nm-in-deep: inset 10px 10px 20px rgba(0, 0, 0, .6), inset -10px -10px 20px rgba(255, 255, 255, .05); --nm-hover-tint: rgba(255, 255, 255, .05); --nm-shadow-rgb: 0, 0, 0; --nm-on-accent: #0C1A14; --nm-accent-bright: #5FD3A3; --nm-flat: #20242B; --nm-track: #20242B; --nm-scroll-thumb: #3A414D; --nm-star-empty: #3A414D; --nm-medal-1: rgba(212, 175, 55, .32); --nm-medal-2: rgba(176, 190, 210, .30); --nm-medal-3: rgba(200, 140, 80, .30); /* dark clay ground → back to the white mark (the gradient one is near-black) */ --brand-mark: url('/brand/mark-white.png?v=1'); color-scheme: dark; } } html[data-theme="dark"] body.nb:not(.nb-nodark) { /* surfaces + ink — dark clay, near-white ink */ --cyber-bg: #262A31; --cyber-fg: #E4E7EC; --cyber-card: #262A31; --cyber-input: #262A31; --cyber-surface: #262A31; --cyber-surface-2: #2C313A; --cyber-muted: #1F232A; --cyber-text: #E4E7EC; --cyber-muted-fg: #C4CBD6; --cyber-text-dim: #AEB6C2; --cyber-dim: #AEB6C2; --cyber-border: transparent; --cyber-line: transparent; /* accents — lightened for AA on the dark clay; on-accent flips to a dark ink */ --cyber-accent: #45BE8C; --cyber-accent-hover: #5AC99B; --cyber-accent-line: transparent; --cyber-accent-dim: rgba(69, 190, 140, .16); --cyber-accent-soft: rgba(69, 190, 140, .24); --cyber-accent-glow: transparent; --cyber-accent-2: #3FB0A6; --cyber-accent2-line: transparent; --cyber-accent2-dim: rgba(63, 176, 166, .16); --cyber-accent-3: #6AA0CE; --cyber-accent3-line: transparent; --cyber-accent3-dim: rgba(106, 160, 206, .16); --cyber-ring: #45BE8C; --cyber-warn: #E8A857; --cyber-warn-dim: rgba(232, 168, 87, .14); --cyber-warn-line: transparent; --cyber-danger: #F0857B; --cyber-danger-dim: rgba(240, 133, 123, .14); --cyber-danger-line: transparent; --cyber-ok: #45BE8C; --cyber-ok-dim: rgba(69, 190, 140, .16); --cyber-ok-line: transparent; --cyber-grad-danger: linear-gradient(90deg, #F0857B, #E8A857); /* dark neumorphism: a real dark shadow + a FAINT light film (not the opaque white highlight) */ --nm-out-sm: 5px 5px 10px rgba(0, 0, 0, .5), -5px -5px 10px rgba(255, 255, 255, .04); --nm-out: 9px 9px 16px rgba(0, 0, 0, .5), -9px -9px 16px rgba(255, 255, 255, .04); --nm-out-lg: 12px 12px 22px rgba(0, 0, 0, .55), -12px -12px 22px rgba(255, 255, 255, .05); --nm-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .5), inset -3px -3px 6px rgba(255, 255, 255, .04); --nm-in: inset 6px 6px 10px rgba(0, 0, 0, .5), inset -6px -6px 10px rgba(255, 255, 255, .04); --nm-in-deep: inset 10px 10px 20px rgba(0, 0, 0, .6), inset -10px -10px 20px rgba(255, 255, 255, .05); --nm-hover-tint: rgba(255, 255, 255, .05); --nm-shadow-rgb: 0, 0, 0; --nm-on-accent: #0C1A14; --nm-accent-bright: #5FD3A3; --nm-flat: #20242B; --nm-track: #20242B; --nm-scroll-thumb: #3A414D; --nm-star-empty: #3A414D; --nm-medal-1: rgba(212, 175, 55, .32); --nm-medal-2: rgba(176, 190, 210, .30); --nm-medal-3: rgba(200, 140, 80, .30); /* dark clay ground → back to the white mark (the gradient one is near-black) */ --brand-mark: url('/brand/mark-white.png?v=1'); color-scheme: dark; } /* Dark high-contrast: (0,4,2) beats the dark base (0,3,2). White ink, deeper shadows, light outlines (the light a11y block's dark outlines vanish on dark). */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.nb.a11y-contrast:not(.nb-nodark) { --cyber-fg: #ffffff; --cyber-text: #ffffff; --cyber-text-dim: #E6EAF0; --cyber-dim: #E6EAF0; --cyber-muted-fg: #E6EAF0; /* the light a11y block picked black; on dark it has to go back to white */ --brand-mark: url('/brand/mark-white.png?v=1'); --nm-out-sm: 5px 5px 10px rgba(0, 0, 0, .75), -5px -5px 10px rgba(255, 255, 255, .07); --nm-out: 9px 9px 16px rgba(0, 0, 0, .75), -9px -9px 16px rgba(255, 255, 255, .07); --nm-out-lg: 12px 12px 22px rgba(0, 0, 0, .8), -12px -12px 22px rgba(255, 255, 255, .08); --nm-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .75), inset -3px -3px 6px rgba(255, 255, 255, .07); --nm-in: inset 6px 6px 10px rgba(0, 0, 0, .75), inset -6px -6px 10px rgba(255, 255, 255, .07); --nm-in-deep: inset 10px 10px 20px rgba(0, 0, 0, .8), inset -10px -10px 20px rgba(255, 255, 255, .08); --a11y-outline: rgba(255, 255, 255, .45); color: #ffffff; } } html[data-theme="dark"] body.nb.a11y-contrast:not(.nb-nodark) { --cyber-fg: #ffffff; --cyber-text: #ffffff; --cyber-text-dim: #E6EAF0; --cyber-dim: #E6EAF0; --cyber-muted-fg: #E6EAF0; /* the light a11y block picked black; on dark it has to go back to white */ --brand-mark: url('/brand/mark-white.png?v=1'); --nm-out-sm: 5px 5px 10px rgba(0, 0, 0, .75), -5px -5px 10px rgba(255, 255, 255, .07); --nm-out: 9px 9px 16px rgba(0, 0, 0, .75), -9px -9px 16px rgba(255, 255, 255, .07); --nm-out-lg: 12px 12px 22px rgba(0, 0, 0, .8), -12px -12px 22px rgba(255, 255, 255, .08); --nm-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .75), inset -3px -3px 6px rgba(255, 255, 255, .07); --nm-in: inset 6px 6px 10px rgba(0, 0, 0, .75), inset -6px -6px 10px rgba(255, 255, 255, .07); --nm-in-deep: inset 10px 10px 20px rgba(0, 0, 0, .8), inset -10px -10px 20px rgba(255, 255, 255, .08); --a11y-outline: rgba(255, 255, 255, .45); color: #ffffff; }