/**
* NUKE – Main Stylesheet
* Dark theme · Monospace typography
*
* Grayscale reference:
* gray-1 #0e0e0e Body/content background
* gray-2 #1a1a1a Cards, inputs, raised surfaces
* gray-3 #2a2a2a Borders, hover states, elevated surfaces
* gray-4 #bdbdbd Bright text on dark (nav links)
* gray-5 #9e9e9e Muted text (timestamps, hints)
* gray-6 #aaaaaa Secondary text (descriptions, labels)
* gray-7 #333333 Strong borders, button hover
* gray-8 #252525 Button surfaces, interactive elements
* gray-9 #181818 Header, deep surfaces
*/
/* ===================================================================
TABLE OF CONTENTS · approximate line numbers (Ctrl-G to jump)
===================================================================
L41 1. VARIABLES & THEMING
L138 2. FONTS
L327 3. RESET & UTILITIES
L378 4. LAYOUT
L503 6. SIGN IN
L592 7. ONBOARDING
L744 Header user-search dropdown
L2072 13. ANIMATIONS
L2080 Announcement Popup
L2162 Announcement Overlay (Radio)
L2180 Item Preview Modal
L2311 Cursors — the custom Notwaita bitmap cursors were removed
L2348 ANIMATION LIBRARY — @keyframes preserved from the old prod
L2441 NUKE PAGE — styles scoped under .nuke-container (was style
L2445 /nuke sandbox stylesheet — MSN Messenger design All visual
L4190 X.com-style chat feed
L5089 Profile PAGE (/~handle), X.com-style
L5814 Contact group collapse / expand animation COLLAPSE (snappy
L6545 Edit Profile button + modal (own profile page)
=================================================================== */
/* ===========================================
1. VARIABLES & THEMING
=========================================== */
:root {
/* Theme */
--color-nuke-primary: #ed1c24;
--color-nuke-primary-hover: #c41920;
--color-nuke-accent: #fff200;
--color-nuke-success: #00a651;
--color-nuke-success-hover: #008c44;
--color-nuke-danger: #ed1c24;
--color-nuke-warning: #ff9900;
--color-nuke-link: #4a9eed;
/* Semantic */
--color-border-strong: rgba(0, 0, 0, 0.8);
--color-collapsible-bg: rgba(0, 100, 255, 1);
--color-collapsible-header: transparent;
--color-text-secondary: #9e9e9e;
--color-text-muted: #757575;
--color-text-primary: var(--color-white);
--color-border: #2a2a2a;
--color-success: #00a651;
--color-danger: #ed1c24;
/* Neutral gray ramp (tight dark end, Notion-style) */
--color-black: #000000;
--color-gray-1: #191919;
--color-gray-2: #1e1e1e;
--color-gray-3: #252525;
--color-gray-4: #2c2c2c;
--color-gray-5: #333333;
--color-gray-6: #656565;
--color-gray-7: #a9a9a9;
--color-gray-8: #bbbbbb;
--color-gray-9: #cccccc;
--color-gray-10: #e4e4e6;
--color-gray-11: #f1f1f1;
--color-gray-12: #f8f8fa;
--color-white: #ffffff;
--color-text: var(--color-gray-11);
/* Layout */
--header-height: 56px;
--border-width: 2px;
--spacing: 16px;
--spacing-sm: 8px;
--spacing-lg: 24px;
--border-radius: 4px;
/* Icons */
--level-icon-sm: 18px;
/* Typography */
--font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* `Noto Color Emoji` is appended to every font stack so emoji code
points fall through to Google's color emoji font sitewide (loaded
via the Google Fonts in index.html's ). */
--font-digital: 'DS Digital', 'Noto Color Emoji', monospace;
--font-bank-gothic: 'Inter', 'Noto Color Emoji', sans-serif;
--font-conduit: 'Sunghyun Sans', 'Inter', 'Noto Color Emoji', sans-serif;
--font-top-secret: 'Sunghyun Sans', 'Inter', 'Noto Color Emoji', sans-serif;
--font-elegant-typewriter: 'Sunghyun Sans', 'Inter', 'Noto Color Emoji', sans-serif;
--font-numeric: 'Sunghyun Sans', 'Nunito', 'Noto Color Emoji', sans-serif;
--font-size-xs: 10px;
--font-size-sm: 12px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 20px;
--font-size-xxl: 24px;
--line-height: 1.5;
/* Soft ambient halo painted behind floating-surface chrome (calling
card, search bar, notif button, day-mode calendar). Layered ON TOP
of the existing tight drop shadow (`--cc-shadow-rest`) so each
surface gets both a 1-2px ledge AND a wider glow around it. */
--soft-ambient-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
@property --cc-lift {
syntax: '';
inherits: true;
initial-value: 0px;
}
@property --cc-press {
syntax: '';
inherits: true;
initial-value: 1;
}
@property --cc-tilt {
syntax: '';
inherits: false;
initial-value: 0deg;
}
/* ===========================================
2. FONTS
=========================================== */
@font-face {
font-family: 'Berkeley Mono';
src: url('/fonts/BerkeleyMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Sunghyun Sans';
src: url('/fonts/SunghyunSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Sunghyun Sans';
src: url('/fonts/SunghyunSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Sunghyun Sans';
src: url('/fonts/SunghyunSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Game Boy 1989';
src: url('/fonts/game_boy_1989.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Berkeley Mono';
src: url('/fonts/BerkeleyMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'DS Digital';
src: url('/fonts/DS-DIGI.TTF') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'DS Digital';
src: url('/fonts/DS-DIGIB.TTF') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'DS Digital';
src: url('/fonts/DS-DIGII.TTF') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'DS Digital';
src: url('/fonts/DS-DIGIT.TTF') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Arial Rounded';
src: url('/fonts/arialroundedmtbold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Bank Gothic';
src: url('/fonts/BankGothic Md BT.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Bank Gothic';
src: url('/fonts/BankGothic Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Conduit ITC';
src: url('/fonts/Conduit ITC Light Regular.otf') format('opentype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Conduit ITC';
src: url('/fonts/Conduit ITC Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Conduit ITC';
src: url('/fonts/Conduit ITC Medium Regular.otf') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Conduit ITC';
src: url('/fonts/Conduit ITC Black Regular.otf') format('opentype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Top Secret';
src: url('/fonts/Top Secret.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Elegant Typewriter';
src: url('/fonts/ELEGANT TYPEWRITER Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Elegant Typewriter';
src: url('/fonts/ELEGANT TYPEWRITER Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Elegant Typewriter';
src: url('/fonts/ELEGANT TYPEWRITER Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Elegant Typewriter';
src: url('/fonts/ELEGANT TYPEWRITER Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Impact';
src: url('/fonts/impact.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Impact';
src: url('/fonts/Impacted.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Impact Unicode';
src: url('/fonts/unicode.impact.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Rosetta';
src: url('/fonts/rosetta.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* ===========================================
3. RESET & UTILITIES
=========================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--font-size-md);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button {
-webkit-user-select: none;
user-select: none;
}
body {
font-family: 'Sunghyun Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Noto Color Emoji', sans-serif;
font-weight: 400;
font-size: var(--font-size-md);
background: #eaeaea;
color: var(--color-text);
line-height: var(--line-height);
min-height: 100vh;
}
/* Tiled `wallpaper.png` pattern at true 10% opacity. Painted via a
fixed `::before` so `opacity:` applies directly to the image (CSS
doesn't support per-layer opacity on `background-image`). z-index
`-1` puts it behind body content but above the body's own bg color. */
body::before {
content: '';
position: fixed;
inset: 0;
background: url('/img/ui/wallpaper.png') 0 0 / 400px 400px repeat;
opacity: 0.2;
z-index: -1;
pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-weight: 400; font-size: var(--font-size-md); color: var(--color-text-primary); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-weight: 400; font-size: var(--font-size-md); color: var(--color-text-primary); }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }
.hidden { display: none !important; }
/* ===========================================
4. LAYOUT
=========================================== */
/* Shell */
.app-wrapper {
display: flex;
flex-direction: row;
min-height: 100vh;
max-width: 100vw;
}
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
flex: 1;
min-width: 0;
overflow-x: hidden;
}
.content {
flex: 1;
min-width: 0;
padding: var(--spacing-lg);
position: relative;
background: transparent;
}
.nav-link.hidden,
.nav-link-hidden {
display: none !important;
}
/* Page containers */
.signin-container,
.onboarding-container {
max-width: 1200px;
margin: 0 auto;
}
/* Buttons */
.action-btn {
padding: 12px 24px;
background: var(--color-gray-8);
color: var(--color-text-primary);
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
font-weight: 700;
transition: all 0.2s;
}
.action-btn:hover:not(:disabled) { background: var(--color-gray-7); }
.action-btn:disabled { cursor: not-allowed; }
.action-btn.primary { background: var(--color-nuke-primary); }
.action-btn.primary:hover:not(:disabled) { background: var(--color-nuke-primary-hover); }
.action-btn.accent { background: var(--color-nuke-success); }
.action-btn.accent:hover:not(:disabled) { background: var(--color-nuke-success-hover); }
/* Modals */
.modal-overlay,
.profile-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: var(--color-gray-2);
color: var(--color-white);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing);
}
.modal-actions {
display: flex;
gap: var(--spacing);
margin-top: var(--spacing-lg);
}
.modal-btn {
flex: 1;
padding: 12px;
font-weight: 700;
border-radius: var(--border-radius);
transition: all 0.2s;
}
.modal-btn.primary { background: var(--color-nuke-primary); color: var(--color-white); }
.modal-btn.secondary { background: var(--color-gray-7); color: var(--color-white); }
/* Badges & tags */
.notif-badge {
display: inline-block;
background: var(--color-nuke-primary);
color: var(--color-white);
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 8px;
padding: 0 4px;
margin-left: 4px;
vertical-align: middle;
}
/* ===========================================
6. SIGN IN
=========================================== */
/* Hide header, XP bar, and shop border when on signin/onboarding page.
Uses the `page-*` body classes (set by JS in main.ts) instead of a
body-level `:has()` walk — much cheaper on every layout pass. */
body.page-signin .header,
body.page-signin .content,
body.page-onboarding .content {
background-color: var(--color-black);
}
.signin-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.signin-content {
max-width: 400px;
width: 100%;
text-align: center;
}
.signin-title {
font-size: var(--font-size-xxl);
margin-bottom: var(--spacing);
color: var(--color-white);
}
.signin-description {
color: var(--color-gray-6);
margin-bottom: var(--spacing-lg);
}
.wallet-list {
display: flex;
flex-direction: column;
gap: var(--spacing);
}
.wallet-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing);
padding: 16px;
background: var(--color-gray-9);
color: var(--color-white);
border: var(--border-width) solid var(--color-gray-7);
border-radius: var(--border-radius);
font-weight: 700;
transition: all 0.2s;
}
.wallet-btn:hover:not(:disabled) {
background: var(--color-gray-8);
border-color: var(--color-nuke-primary);
}
.wallet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wallet-btn.not-installed { opacity: 0.5; }
.signin-status {
margin-top: var(--spacing-lg);
padding: var(--spacing);
background: transparent;
border-radius: var(--border-radius);
color: var(--color-gray-6);
}
.signin-status .status-text::after {
content: '';
display: inline-block;
width: 12px;
text-align: left;
animation: signin-dots 1.2s steps(4, end) infinite;
}
.signin-error {
margin-top: var(--spacing);
padding: var(--spacing);
background: rgba(237, 28, 36, 0.1);
color: var(--color-nuke-danger);
border-radius: var(--border-radius);
}
/* ===========================================
7. ONBOARDING
=========================================== */
.onboarding-container { max-width: 800px; display: flex; align-items: center; justify-content: center; min-height: 100%; }
.onboarding-content { padding: var(--spacing-lg); width: 100%; }
.onboarding-title {
font-size: var(--font-size-xxl);
text-align: center;
margin-bottom: var(--spacing);
color: var(--color-white);
}
.onboarding-banner {
display: block;
max-width: 280px;
margin: 0 auto var(--spacing-lg);
border-radius: var(--border-radius);
}
.onboarding-description {
text-align: center;
color: var(--color-gray-6);
margin-bottom: var(--spacing-lg);
}
.onboarding-section { margin-bottom: var(--spacing-lg); }
.onboarding-section-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--color-text);
text-align: center;
}
.onboarding-hint {
font-size: var(--font-size-sm);
color: var(--color-gray-5);
margin-bottom: var(--spacing);
}
.onboarding-error {
padding: var(--spacing);
background: rgba(237, 28, 36, 0.1);
color: var(--color-nuke-danger);
border-radius: var(--border-radius);
margin-bottom: var(--spacing);
text-align: center;
}
.onboarding-selected {
font-weight: 700;
color: var(--color-nuke-primary);
text-align: center;
min-height: 24px;
}
.onboarding-input-group { max-width: 400px; margin: 0 auto; }
.onboarding-input {
width: 100%;
padding: 16px;
font-family: var(--font-mono);
font-size: var(--font-size-lg);
font-weight: 400;
border: var(--border-width) solid var(--color-gray-3);
border-radius: var(--border-radius);
background: var(--color-gray-2);
color: var(--color-white);
}
.onboarding-input:focus {
outline: none;
border-color: var(--color-nuke-primary);
}
.onboarding-username-error {
margin-top: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--color-nuke-danger);
}
.onboarding-actions {
display: flex;
justify-content: center;
margin-top: var(--spacing-lg);
}
.onboarding-actions .action-btn {
min-width: 200px;
padding: 16px 32px;
font-size: var(--font-size-lg);
}
.onboarding-fee-notice {
text-align: center;
margin-top: var(--spacing);
font-size: var(--font-size-sm);
color: var(--color-gray-5);
}
body.page-chat .content {
padding: 0;
overflow: hidden;
}
.chat-pill-header .dock-pill {
cursor: grab;
}
.chat-pill-header.dragging .dock-pill {
cursor: grabbing;
}
@media (hover: hover) {
.chat-pill-nuke-time.nuke-time-day:hover {
transform: translateY(-1.5px) rotate(0deg) scale(1.01);
/* Match .cc-entry:hover — profile color blended into gray-6, same
as the search bar / notif button / dropdown rings. */
--cc-outer-border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
}
.chat-pill-nuke-time.nuke-time-day:hover::before {
border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
}
}
.chat-secondary-header > .user-search-wrapper {
order: 2;
margin-left: auto;
margin-right: auto;
}
.chat-secondary-header > .notif-wrapper {
order: 5;
}
body.is-mobile #chat-secondary-header-card .cc-pfp-wrapper {
width: 30px;
height: 30px;
margin: 3px;
}
body.is-mobile #chat-secondary-header-card .cc-pfp {
width: 30px;
height: 30px;
}
.notif-wrapper {
position: relative;
display: inline-flex;
}
/* ============ Header user-search dropdown ============ */
/* Wrapper carries the chrome (bg, outer ring, drop shadow). Motion
stays on the input so it doesn't drag the dropdown around. */
/* Wrapper is just a positioning container — it holds the bar and the
dropdown as siblings (mirrors `.notif-wrapper` → button + popover).
No chrome, no transform. The dropdown lives outside the bar's
transformed coordinate space, so it stays put when the bar lifts. */
.user-search-wrapper {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
/* The visual search bar — owns the chrome (bg, ring, drop shadow) and
the lift/scale transform. Input + glyph sit inside; both follow the
transform via DOM nesting. */
.user-search-bar {
position: relative;
display: flex;
width: 423px;
height: 45px;
border-radius: 6px;
background: #FFFFFF;
/* Rest ring matches .cc-entry's rest ring (gray-7). */
--cc-outer-border-color: var(--color-gray-7);
box-shadow:
0 0 0 1px var(--cc-outer-border-color),
var(--cc-shadow-rest),
var(--soft-ambient-shadow);
transform: translateY(var(--cc-lift)) scale(var(--cc-press));
transition:
--cc-lift 0.18s cubic-bezier(0.22, 1, 0.36, 1),
--cc-press 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 0.04s ease;
}
.user-search-input {
width: 100%;
height: 100%;
/* Right padding reserves space for the inset glyph tile
(37px wide + 4px inset + 4px breathing = 45px). */
padding: 0 49px 0 14px;
background: transparent;
border: none;
border-radius: inherit;
color: var(--color-black);
/* Caret matches the search bar's hovered/dropdown border ring so the
input cursor reads as part of the same chrome family. */
caret-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
font-family: var(--font-conduit);
font-size: 13px;
font-weight: 700;
outline: none;
}
.user-search-bar:hover,
.user-search-bar:focus-within {
--cc-lift: -1.5px;
--cc-press: 1.01;
/* Same desaturated profile-color tint .cc-entry:hover uses, just keyed
to the logged-in user (--current-user-color). */
--cc-outer-border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
}
/* Keep the bar's outer ring colored while the cursor is in the dropdown
— moving from the bar into the dropdown would otherwise drop `:hover`
on the bar and snap the ring back to gray. Only the ring carries
over (no lift/scale) so the bar itself stays put. */
.user-search-wrapper:has(.user-search-dropdown:hover) .user-search-bar {
--cc-outer-border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
}
.user-search-bar:has(.cc-pressed) {
--cc-press: 0.99;
--cc-lift: 0px;
}
/* Glyph sits inside the search bar (its parent `.user-search-wrapper`
carries the bg/ring/lift+scale transform). The button itself is
transparent; the inner span carries the chrome. The wrapper's
transform composes onto the glyph via DOM nesting — no per-element
motion replication. */
.user-search-glyph {
position: absolute;
top: 50%;
right: 4px;
width: 37px;
height: 37px;
padding: 0;
margin: 0;
background: transparent;
border: none;
cursor: pointer;
z-index: 2;
transform: translateY(-50%);
color: var(--color-text);
}
.user-search-glyph .chat-secondary-action-inner {
width: 100%;
height: 100%;
}
.user-search-input::placeholder {
font-weight: 700;
color: var(--color-gray-7);
opacity: 1;
}
.user-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* Dropdown opens only when there's a typed query AND either the input is
focused OR the wrapper is hovered. Hovering the wrapper covers both
hovering the bar and hovering the dropdown (it's a descendant), so
moving the cursor from bar → dropdown keeps it open after blur. */
.user-search-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.user-search-row {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
/* When the dropdown is closed (no typed query), keep all rows hidden so
the closing fade doesn't flash an unfiltered list mid-transition. */
.user-search-wrapper:not(.has-query) .user-search-row {
display: none;
}
/* User-search dropdown row width override. Base design lives in
CALLING CARD DESIGN SYSTEM (~line 2796). */
.user-search-list .cc-entry {
width: 240px;
flex-shrink: 0;
}
/* Standalone online dot, sibling to the cc-entry — only the user-search
dropdown shows this. Anchors to the row's top-left corner so it sits
just outside the pfp without being a child of `.cc-pfp-wrapper`. */
.user-search-online-dot {
position: absolute;
top: -2px;
left: -2px;
width: 8px;
height: 8px;
z-index: 4;
pointer-events: none;
}
.user-search-empty {
padding: 16px;
text-align: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
/* Spotlight overlay — desktop only. When hovering the notification button
or the header calling card, the rest of the page dims slightly while the
hovered surface (and only that surface) stays bright. */
.hover-spotlight {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease;
z-index: 90;
}
body.is-mobile .hover-spotlight {
display: none;
}
body.spotlight-notif .hover-spotlight,
body.spotlight-profile .hover-spotlight,
body.spotlight-search .hover-spotlight {
opacity: 1;
}
/* Lift only the spotlighted surface above the overlay. The notif popover
already lives at z-index 200 so it stays above the dim regardless. */
body.spotlight-notif .notif-wrapper {
position: relative;
z-index: 95;
}
body.spotlight-search .user-search-wrapper {
position: relative;
z-index: 95;
}
.notif-popover {
position: absolute;
top: calc(100% + 8px);
left: auto;
right: 0;
width: 300px;
/* Same cap as the search dropdown — ends at the chat container's
bottom edge. See `.user-search-dropdown` for the offset breakdown. */
max-height: calc(100dvh - 116px);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
/* Background + 1px ring mirror `.user-search-bar:hover`; drop shadow
is stronger than the bar's so the floating panel reads as elevated. */
background: var(--color-gray-10);
border-radius: 6px;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6)),
0 12px 32px rgba(0, 0, 0, 0.5);
padding: 12px 8px;
opacity: 0;
visibility: hidden;
z-index: 200;
}
.notif-popover::-webkit-scrollbar {
display: none;
}
.notif-wrapper:hover .notif-popover,
.notif-popover:hover {
opacity: 1;
visibility: visible;
}
.notif-popover-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.notif-group-header {
font-size: 13px;
font-weight: 700;
color: var(--color-black);
padding: 6px 4px 2px;
/* First header has no top space; subsequent headers gain a small gap
above to separate from the previous group. */
margin-top: 4px;
}
.notif-group-header:first-child {
margin-top: 0;
}
@media (hover: hover) {
.chat-secondary-action-btn:hover {
--cc-lift: -1.5px;
--cc-press: 1.01;
/* Match .cc-entry:hover — profile-tinted bg (mixed into gray-9) and
outer ring (mixed into gray-6). The glyph icon's pfp ring tracks
the same hover color so the inner chrome lines up with the
calling card's pfp on hover. */
--cc-outer-border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
--pfp-outer-border-color: var(--cc-outer-border-color);
background: color-mix(in srgb, var(--current-user-color, #6a6a6a) 50%, var(--color-gray-9));
}
.chat-secondary-action-btn:hover .chat-secondary-action-inner {
transform: rotate(1deg);
}
.chat-secondary-action-btn:hover .chat-secondary-action-inner::after {
transform: rotate(1deg);
}
/* Keep the notif button's outer ring colored while the cursor is in
the popover — moving from the button into the popover would
otherwise drop `:hover` on the button and snap the ring back to
gray, which reads as a hand-off bug. Only the ring carries over
(no lift/scale) so the button itself stays put. */
.notif-wrapper:has(.notif-popover:hover) .chat-secondary-notif-btn {
--cc-outer-border-color: color-mix(in srgb, var(--current-user-color, #6a6a6a) 45%, var(--color-gray-6));
--pfp-outer-border-color: var(--cc-outer-border-color);
background: color-mix(in srgb, var(--current-user-color, #6a6a6a) 50%, var(--color-gray-9));
}
}
/* Press + rebound — same as the calling card click animation. */
.chat-secondary-action-btn:hover.cc-pressed,
.chat-secondary-action-btn.cc-pressed {
--cc-press: 0.97;
--cc-lift: 0px;
}
.chat-secondary-action-btn.cc-rebound {
animation: cc-rebound 0.42s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.chat-secondary-action-btn.cc-rebound .chat-secondary-action-inner,
.chat-secondary-action-btn.cc-rebound .chat-secondary-action-inner::after {
animation: cc-pfp-shake 0.36s ease-in-out;
}
/* Visual chrome (size, border, radius, drop shadow, gloss, rim) is now
centralized in the PFP DESIGN SYSTEM — `.chat-secondary-action-inner`
is a variant in the same selector lists. Only the layout / icon
positioning lives here. The `.chat-secondary-action-btn` parent gives
higher specificity than the PFP `display: block` rule. */
.chat-secondary-action-btn .chat-secondary-action-inner,
.user-search-glyph .chat-secondary-action-inner {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* Right-side panel — chat by default; swaps to the notifications view for
the currently-viewed profile when a `/~handle` page is open. */
.right-stack,
.notif-stack {
/* Sized + placed by the .chat-container grid (column 2, row 3 — sits
under the secondary header in row 2 and the pill header in row 1).
`min-width: 0` lets the column shrink past its content's intrinsic
min-width (default `auto`); content that doesn't fit is clipped by
the `overflow: hidden` below. `position: relative` so the pager
arrows (absolute-positioned) anchor to this container. */
grid-column: 2;
grid-row: 3;
min-width: 0;
position: relative;
align-self: stretch;
background: blue;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.notif-stack { background: green; }
.notif-stack-header {
flex-shrink: 0;
height: 32px;
background: lime;
display: flex;
align-items: stretch;
}
.notif-stack-header .ns-tab {
flex: 1;
height: 100%;
padding: 0 12px;
border: none;
background: transparent;
color: var(--color-white);
font-family: var(--font-conduit);
font-size: 12px;
font-weight: 700;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s ease, background 0.15s ease;
}
.notif-stack-header .ns-tab:hover {
opacity: 0.8;
}
.notif-stack-header .ns-tab.active {
opacity: 1;
background: rgba(0, 0, 0, 0.18);
}
.notif-stack[data-active-tab="profile"] .ns-tab-view[data-tab-view="profile"],
.notif-stack[data-active-tab="notifs"] .ns-tab-view[data-tab-view="notifs"] {
display: flex;
}
/* ════════════════════════════════════════════════════════════════════
PFP DESIGN SYSTEM
════════════════════════════════════════════════════════════════════
Every profile picture site-wide shares this design. Tweak any value
in `:root` and all variants update together.
Variants:
• cc-pfp calling-card pfp 37×37
• msg-pfp chat-message pfp 37×37
• profile-panel-pfp large profile-page pfp 72×72
Layers (bottom → top, stacked inside the wrapper):
1. img content the actual pfp photo
2. ::before gloss sheen mix-blend-mode: screen
3. ::after reflective rim mix-blend-mode: overlay
4. .{x}-pfp-border optional asset ring (off by default)
Modules:
A. SIZES per-variant dimensions
B. BASE img chrome (radius, shadow, background, transitions)
C. GLOSS domed sheen (::before)
D. RIM reflective inset highlights (::after)
E. HOVERED tilt + shadow boost on hover
F. PRESSED snappier press tilt
G. ACTIVE active shadow + suppression + rebound shake
H. BORDER RING asset-driven decorative ring (off by default)
════════════════════════════════════════════════════════════════════ */
:root {
/* — Geometry — */
--pfp-radius: 16%; /* % so corners scale proportionally */
--pfp-border-width: 1px; /* rim thickness (overridden on profile pfp) */
/* — Outer border (1px ring around the pfp, gray everywhere — does not
react to state). Painted via box-shadow spread, no layout space. */
--pfp-outer-border-width: 1px;
--pfp-outer-border-color: var(--color-gray-6);
/* — Drop shadows (img box-shadow per state) — */
--pfp-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
--pfp-hover-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
--pfp-active-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
--pfp-active-resting-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* — Tilt angles — */
--pfp-hover-tilt: -2deg;
--pfp-pressed-tilt: -4deg;
--pfp-active-pressed-tilt: 0deg;
/* — Transitions — */
--pfp-tilt-transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
--pfp-pressed-transition: transform 0.10s ease-out;
--pfp-shadow-transition: box-shadow 0.18s ease;
/* — Gloss (domed sheen, screen-blended) —
Radial gradient centered above the pfp so the visible edge curves
like the bottom of a circle (vs a flat linear gradient). */
--pfp-gloss: radial-gradient(
ellipse 120% 90% at 50% -45%,
rgba(255, 255, 255, 0.40) 0%,
rgba(255, 255, 255, 0.12) 60%,
rgba(255, 255, 255, 0.00) 100%);
/* — Rim (inset highlights, overlay-blended) —
App-icon "lit edge": bright top (primary light), dim sides
(ambient reflection), dark bottom (anchors the icon). */
--pfp-rim-top: rgba(255, 255, 255, 0.36);
--pfp-rim-side: rgba(255, 255, 255, 0.14);
--pfp-rim-bottom: rgba(0, 0, 0, 0.25);
/* — Border ring (asset-driven, off by default) — */
--pfp-border-ring-asset: none;
--pfp-border-ring-inset: -3px;
}
/* ─── A. SIZES ──────────────────────────────────────────────────────
Per-variant dimensions, positioning, and interaction props. The
larger profile pfp gets a thicker rim via `--pfp-border-width`. */
.cc-pfp-wrapper,
.msg-pfp-frame,
.profile-panel-pfp-wrapper,
.chat-secondary-action-inner {
position: relative;
isolation: isolate; /* contain blend modes to this stacking ctx */
flex-shrink: 0;
}
.cc-pfp-wrapper,
.msg-pfp-frame,
.msg-pfp-spacer,
.cc-pfp,
.chat-secondary-action-inner { width: 37px; height: 37px; }
.cc-pfp-wrapper { margin: 4px; z-index: 2; }
/* ─── B. BASE ───────────────────────────────────────────────────────
The pfp img: rounded edges, drop shadow, fallback bg, transitions.
The wrapper inherits the same radius so its pseudo-elements
(gloss + rim) clip cleanly. */
.cc-pfp,
.msg-pfp,
.profile-panel-pfp,
.chat-secondary-action-inner {
display: block;
box-sizing: border-box;
border-radius: var(--pfp-radius);
background: var(--color-gray-2); /* placeholder while img loads */
box-shadow:
0 0 0 var(--pfp-outer-border-width) var(--pfp-outer-border-color),
var(--pfp-shadow);
object-fit: cover;
transform-origin: center center;
transition: var(--pfp-tilt-transition), var(--pfp-shadow-transition);
}
.cc-pfp-wrapper,
.msg-pfp-frame,
.profile-panel-pfp-wrapper { border-radius: var(--pfp-radius); }
/* ─── C. GLOSS ──────────────────────────────────────────────────────
`::before` paints the domed sheen. `mix-blend-mode: screen` always
lightens, so the highlight reads against any pfp color. */
.cc-pfp-wrapper::before,
.msg-pfp-frame::before,
.profile-panel-pfp-wrapper::before,
.chat-secondary-action-inner::before,
.notif-item::before,
.notif-item-glyph::before,
.cc-entry::before,
.pill-pfp::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--pfp-gloss);
mix-blend-mode: screen;
pointer-events: none;
z-index: 3;
transform-origin: center center;
transition: var(--pfp-tilt-transition);
}
/* ─── D. RIM ────────────────────────────────────────────────────────
`::after` paints four inset shadows for an app-icon "lit edge"
look. `mix-blend-mode: overlay` adapts to the underlying colors
(lightens lights, darkens darks). Blur radius scales with
`--pfp-border-width` (1.5×) for soft edges instead of a hard line. */
.cc-pfp-wrapper::after,
.msg-pfp-frame::after,
.profile-panel-pfp-wrapper::after,
.chat-secondary-action-inner::after,
.notif-item::after,
.notif-item-glyph::after,
.cc-entry::after,
.pill-pfp::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 var(--pfp-border-width) calc(var(--pfp-border-width) * 1.5) var(--pfp-rim-top),
inset 0 calc(-1 * var(--pfp-border-width)) calc(var(--pfp-border-width) * 1.5) var(--pfp-rim-bottom),
inset var(--pfp-border-width) 0 calc(var(--pfp-border-width) * 1.5) var(--pfp-rim-side),
inset calc(-1 * var(--pfp-border-width)) 0 calc(var(--pfp-border-width) * 1.5) var(--pfp-rim-side);
mix-blend-mode: overlay;
pointer-events: none;
z-index: 4;
transform-origin: center center;
transition: var(--pfp-tilt-transition);
}
/* ─── D2. CLEAN BORDER (pfps only) ──────────────────────────────────
Keep the gloss + rim OFF the outer ring so every pfp's border reads
as one clean color. Scoped to the pfp WRAPPERS (not the calling-card
surface or icon buttons, which keep the full edge treatment):
• gloss -> confined to the inner face, fully transparent before
the edges (the default is centered above the pfp and is
brightest right at the top edge, bleeding onto the ring)
• rim -> edge highlights neutralized
3D still comes from the face sheen + the drop shadow. */
.cc-pfp-wrapper,
.msg-pfp-frame,
.profile-panel-pfp-wrapper {
--pfp-gloss: radial-gradient(ellipse 82% 46% at 50% 33%,
rgba(255, 255, 255, 0.36) 0%,
rgba(255, 255, 255, 0.12) 48%,
rgba(255, 255, 255, 0.00) 78%);
--pfp-rim-top: transparent;
--pfp-rim-side: transparent;
--pfp-rim-bottom: transparent;
}
/* ─── E. HOVERED ────────────────────────────────────────────────────
Tilt the img + both pseudos in unison (so gloss & rim follow the
pfp). Deepen the drop shadow on the img only. Desktop pointers
only — touch never triggers tilt. */
@media (hover: hover) {
/* tilt — img + both pseudos */
.cc-entry:hover .cc-pfp,
.cc-entry:hover .cc-pfp-wrapper::before,
.cc-entry:hover .cc-pfp-wrapper::after,
.msg-pfp-frame:hover .msg-pfp,
.msg-pfp-frame:hover::before,
.msg-pfp-frame:hover::after,
.profile-panel-pfp-wrapper:hover .profile-panel-pfp,
.profile-panel-pfp-wrapper:hover::before,
.profile-panel-pfp-wrapper:hover::after {
transform: rotate(var(--pfp-hover-tilt));
}
/* shadow boost — img only */
.cc-entry:hover .cc-pfp,
.msg-pfp-frame:hover .msg-pfp,
.profile-panel-pfp-wrapper:hover .profile-panel-pfp {
box-shadow:
0 0 0 var(--pfp-outer-border-width) var(--pfp-outer-border-color),
var(--pfp-hover-shadow);
}
}
/* ─── F. PRESSED ────────────────────────────────────────────────────
Snappier tilt + shorter transition while held. */
.cc-entry.cc-pressed .cc-pfp,
.cc-entry.cc-pressed .cc-pfp-wrapper::before,
.cc-entry.cc-pressed .cc-pfp-wrapper::after,
.msg-pfp-frame.cc-pressed .msg-pfp,
.msg-pfp-frame.cc-pressed::before,
.msg-pfp-frame.cc-pressed::after,
.profile-panel-pfp-wrapper.cc-pressed .profile-panel-pfp,
.profile-panel-pfp-wrapper.cc-pressed::before,
.profile-panel-pfp-wrapper.cc-pressed::after {
transform: rotate(var(--pfp-pressed-tilt));
transition: var(--pfp-pressed-transition);
}
/* ─── G. ACTIVE ─────────────────────────────────────────────────────
`.active` = this pfp represents the currently-viewed user.
• Resting: elevated drop shadow.
• Header card: suppress the elevation (it'd look weird on the
user's own pinned card, which is always "active").
• Pressed: no tilt (already feels lifted).
• Released: soft rebound shake on img + both pseudos. */
/* resting elevation */
.cc-entry.active .cc-pfp,
.msg-pfp-frame.active .msg-pfp,
.profile-panel-pfp-wrapper.active .profile-panel-pfp {
box-shadow:
0 0 0 var(--pfp-outer-border-width) var(--pfp-outer-border-color),
var(--pfp-active-shadow);
}
/* pressed-while-active = no tilt */
.cc-entry.active.cc-pressed .cc-pfp,
.cc-entry.active.cc-pressed .cc-pfp-wrapper::before,
.cc-entry.active.cc-pressed .cc-pfp-wrapper::after,
.msg-pfp-frame.active.cc-pressed .msg-pfp,
.msg-pfp-frame.active.cc-pressed::before,
.msg-pfp-frame.active.cc-pressed::after,
.profile-panel-pfp-wrapper.active.cc-pressed .profile-panel-pfp,
.profile-panel-pfp-wrapper.active.cc-pressed::before,
.profile-panel-pfp-wrapper.active.cc-pressed::after {
transform: rotate(var(--pfp-active-pressed-tilt));
}
/* rebound shake on release */
.cc-entry.cc-rebound-soft .cc-pfp,
.cc-entry.cc-rebound-soft .cc-pfp-wrapper::before,
.cc-entry.cc-rebound-soft .cc-pfp-wrapper::after,
.msg-pfp-frame.cc-rebound-soft .msg-pfp,
.msg-pfp-frame.cc-rebound-soft::before,
.msg-pfp-frame.cc-rebound-soft::after,
.profile-panel-pfp-wrapper.cc-rebound-soft .profile-panel-pfp,
.profile-panel-pfp-wrapper.cc-rebound-soft::before,
.profile-panel-pfp-wrapper.cc-rebound-soft::after {
animation: cc-pfp-shake 0.36s ease-in-out;
}
/* ─── H. BORDER RING ────────────────────────────────────────────────
Asset-driven decorative ring around the pfp (e.g. for special
user-tier borders later). Off by default — opt in per element by
adding `data-has-border` to the wrapper, optionally overriding
`--pfp-border-ring-asset: url(...)` inline. */
.cc-pfp-border,
.msg-pfp-border,
.profile-panel-pfp-border {
position: absolute;
inset: var(--pfp-border-ring-inset);
background-image: var(--pfp-border-ring-asset);
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 5;
display: none;
}
.cc-pfp-wrapper[data-has-border] > .cc-pfp-border,
.msg-pfp-frame[data-has-border] > .msg-pfp-border,
.profile-panel-pfp-wrapper[data-has-border] > .profile-panel-pfp-border {
display: block;
}
/* ════════════════════════════════════════════════════════════════════
CALLING CARD DESIGN SYSTEM
════════════════════════════════════════════════════════════════════
The `.cc-entry` calling card is rendered on the leaderboard, header
self-card, user-search dropdown, and mention toast. All visual
design lives here; context-specific overrides (mobile sizing,
header-square mirrored layout, leaderboard width) stay in their
own surface blocks and reference these vars.
Sub-elements:
• .cc-banner / .cc-banner-img background banner image + mask
• .cc-info absolute-positioned overlay
├─ .cc-top row 1: name + rank (or pfp side)
│ ├─ .cc-name username + level icon
│ └─ .cc-rank rank #
└─ .cc-bottom row 2: balance + dpr-pill
├─ .cc-balance $ amount
└─ .cc-dpr-pill pill containing .cc-dpr
└─ .cc-dpr daily-percent rate
Layers (bottom → top, stacked inside the cc-entry):
1. cc-entry bg solid card color (--cc-surface-rest)
2. ::after blurred + darkened banner backdrop
3. .cc-banner-img sharp banner with right-side fade mask
4. .cc-pfp-wrapper pfp (z-index 2)
5. .cc-info text overlay (z-index 3)
6. ::before domed gloss + reflective rim, blends
into the layers below via overlay
Animation custom properties (registered via @property near the top
of this file): `--cc-lift`, `--cc-press`, `--cc-tilt`. Set by
`attachCcPressAnimation` in TS via class toggles (`cc-pressed`,
`cc-rebound`, `cc-rebound-soft`).
State summary:
hover motion (lift + scale) + outer ring → profile color +
inner-content reactions (text shadow / banner / dpr)
pressed scale 0.97 (motion only, no chrome change)
active outer ring → profile color + inner-content reactions
(header self-card resting still gets the ring, but
inner-content reactions are suppressed)
rebound / outer ring → profile color (animation runs, ring colored
rebound-soft during the brief animation)
Modules:
A. BASE flex layout, sizing, transform composition, transitions
B. SURFACE bg + outer ring + drop shadow at rest
C. STRUCTURE .cc-info / .cc-top / .cc-bottom / .cc-banner positioning
D. CONTENT typography + .cc-banner-img + .cc-dpr-pill chrome
E. EFFECTS `::after` blurred backdrop + `::before` rim + gloss
F. HOVERED hover state (motion + outer ring color + inner content)
G. PRESSED pressed state (scale only)
H. ACTIVE active state + header self-card inner-content suppression
I. ANIMATIONS @keyframes cc-rebound + cc-rebound-soft
════════════════════════════════════════════════════════════════════ */
:root {
/* — Geometry — */
--cc-width: 240px;
--cc-height: 45px;
--cc-radius: 6px;
--cc-banner-width: 180px;
/* — Surface (solid card color, no gradient — translucent bases caused
edge artifacts at the rounded corners). */
--cc-surface-rest: #2c2c2c;
/* — Outer 1px ring around the card. Painted via box-shadow spread (no
layout space). Gray at rest; HOVERED / ACTIVE / ANIMATIONS swap
the color to the user's profile color. */
--cc-outer-border-width: 1px;
--cc-outer-border-color: var(--color-gray-7);
/* — Drop shadow at rest (soft only; states don't change this). */
--cc-shadow-rest: 0 2px 4px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.20);
/* — Lift / scale (drive the existing transform composition) — */
--cc-lift-hover: -1.5px;
--cc-lift-active-hover: -1px;
--cc-press-hover: 1.01;
--cc-press-pressed: 0.97;
--cc-press-active-pressed: 0.99;
/* — Transitions — */
--cc-transition-base:
--cc-lift 0.18s cubic-bezier(0.22, 1, 0.36, 1),
--cc-press 0.20s cubic-bezier(0.34, 1.4, 0.64, 1),
--cc-tilt 0.20s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.04s ease,
background 0.18s ease;
--cc-transition-pressed:
--cc-press 0.08s ease-out,
--cc-lift 0.18s cubic-bezier(0.22, 1, 0.36, 1);
/* — Text shadows on the inner labels — */
--cc-text-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.85);
--cc-text-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.65);
/* — Banner image opacity per state — */
--cc-banner-rest: 0.3;
--cc-banner-hover: 0.5;
--cc-banner-active: 0.5;
/* — DPR pill background (hover + active) — */
--cc-dpr-pill-bg: rgba(0, 0, 0, 0.2);
/* — Blurred backdrop (`::after`): banner image + heavy blur + dim.
--cc-backdrop-image is unset by default (no banner ships with
the site). Set it via inline style or override when a banner
is assigned. */
--cc-backdrop-filter: blur(12px) brightness(0.8);
/* — Rim + gloss (`::before`, `mix-blend-mode: overlay`). Rotated 90°
from the pfp version: RIGHT side is the "top" (brightest light),
LEFT side is the "bottom" (anchor shadow). Top/bottom edges are
the "sides" (ambient reflection). */
--cc-gloss: radial-gradient(
ellipse 90% 120% at 145% 50%,
rgba(255, 255, 255, 0.40) 0%,
rgba(255, 255, 255, 0.12) 60%,
rgba(255, 255, 255, 0.00) 100%);
--cc-rim-right: rgba(255, 255, 255, 0.36);
--cc-rim-side: rgba(255, 255, 255, 0.14);
--cc-rim-left: rgba(0, 0, 0, 0.25);
}
/* ─── E. EFFECTS ────────────────────────────────────────────────────
`::after` paints the blurred + dimmed banner backdrop (z-index 0;
sits below `.cc-banner-img` at z-index 1).
`::before` paints the domed gloss + reflective rim with
`mix-blend-mode: overlay`, on top of all card content (z-index 5).
Note: the hit-area `::before` (snap-to-cursor on leaderboard /
header / user-search) was previously here — removed because rim +
gloss now own `::before` and the visual treatment is more important
than the small hover-snap nicety. */
/* `.cc-entry::before` and `.cc-entry::after` are defined alongside
`.cc-pfp-wrapper`'s in the PFP DESIGN SYSTEM — gloss + rim with
`--pfp-gloss` / `--pfp-rim-*` (see ~styles.css:2594). The card's banner
image sits BELOW these layers (z-index 1) so the gloss/rim glaze
over the visible banner like the notif-item glyph. */
/* ─── F. HOVERED ────────────────────────────────────────────────────
Motion (lift + scale) + outer ring/bg → profile-color tint + banner
opacity bump. Text labels do NOT change on hover. Desktop pointers
only — touch never triggers tilt/lift. */
@media (hover: hover) {
.cc-entry:hover {
--cc-lift: var(--cc-lift-hover);
--cc-press: var(--cc-press-hover);
/* Bg / border both tint toward the profile color while keeping the
gray-9 / gray-8 lightness pair from the rest state — bg mixes
into gray-9, border into gray-8. The pfp border stays neutral. */
--cc-outer-border-color: color-mix(in srgb, var(--cc-profile-color, #6a6a6a) 45%, var(--color-gray-6));
background: color-mix(in srgb, var(--cc-profile-color, #6a6a6a) 50%, var(--color-gray-9));
}
/* Active card hover: lighter lift (it's already raised at rest) */
.cc-entry.active:hover {
--cc-lift: var(--cc-lift-active-hover);
--cc-press: 1;
}
/* Banner brightens on hover */
.cc-entry:hover .cc-banner-img { opacity: var(--cc-banner-hover); }
}
/* ─── G. PRESSED ────────────────────────────────────────────────────
Scale only (no chrome color change). `transition` overridden for a
snappier press feel. */
.cc-entry.cc-pressed {
--cc-press: var(--cc-press-pressed);
transition: var(--cc-transition-pressed);
}
.cc-entry.active.cc-pressed { --cc-press: var(--cc-press-active-pressed); }
/* ─── I. ANIMATIONS ─────────────────────────────────────────────────
Two rebound keyframe sets fire on press release via
`attachCcPressAnimation`: `cc-rebound` (full spring) for non-active
cards, `cc-rebound-soft` (muted) for active cards. Outer ring stays
colored during the animation so the rebound reads as a continuation
of the pressed-and-released state. */
.cc-entry.cc-rebound,
.cc-entry.cc-rebound-soft { --cc-outer-border-color: color-mix(in srgb, var(--cc-profile-color, #6a6a6a) 45%, var(--color-gray-6)); }
.cc-entry.cc-rebound { animation: cc-rebound 0.42s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.dock-pill {
height: 20px;
border-radius: 9px;
border: none;
padding: 0 10px;
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
cursor: default;
user-select: none;
transform-origin: top center;
}
/* Tiny inline pfp injected next to each {userN} placeholder in header
pills. Plugged into the PFP design system above (gloss/rim selector
lists) so it gets the same shading as cc-pfp / notif-item etc. */
.pill-pfp {
position: relative;
isolation: isolate;
display: inline-flex;
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 3px;
margin-right: 4px;
/* Slightly tighter rim for the small footprint. */
--pfp-border-width: 0.5px;
/* `middle` aligns the pfp's vertical center with the line's x-height
midpoint. The 1px translate compensates for the gap between that
midpoint and the pill's geometric center (font metrics put the
x-height midpoint slightly below the pill's true center). */
vertical-align: middle;
transform: translateY(-1px);
}
.pill-pfp-img {
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--color-gray-2);
object-fit: cover;
display: block;
}
/* Single wrapper around the rendered pill body. Keeps the templated
{pfp + name + literal text} fragments inside one flex item of the
parent .dock-pill so leading whitespace after a `` isn't
collapsed (block-box rule on anonymous flex items). */
.pill-content {
display: inline;
white-space: nowrap;
}
/* Wraps the {pfp + name} pair from a templated pill so they read as one
clickable unit. Hovering anywhere within the wrapper underlines the
name; the pfp does NOT get the underline (it's a sibling).
Display is plain `inline` (not inline-flex) so the trailing text
following the link sits on the same baseline as the name — the pfp's
own `vertical-align: -2px` handles its baseline nudge. */
.pill-user-link {
display: inline;
cursor: pointer;
}
.pill-user-link:hover .pill-name {
text-decoration: underline;
}
.pill-red { background: #6e1a1a; color: #ff8080; }
.pill-orange { background: #6e3a1a; color: #ffb380; }
.pill-blue { background: #1a3a6e; color: #80b3ff; }
.pill-purple { background: #4a1a6e; color: #c080ff; }
.pill-green { background: #1a6e2e; color: #80ff99; }
.pill-yellow { background: #6e5a1a; color: #ffe080; }
.pill-transparent { background: transparent; color: var(--color-white); font-size: 10px; }
.recording-time {
color: var(--color-white);
font-weight: 700;
font-size: var(--font-size-lg);
min-width: 50px;
}
/* --- Chat Panel: XP Bar --- */
/* Drawer */
.chat-xp-bar {
height: 8px;
background: transparent;
overflow: hidden;
flex-shrink: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
pointer-events: none;
}
/* Both the XP bar and the inventory drawer are global overlays. They only
make sense on the chat page — hide them on signin / onboarding for both
desktop and mobile. */
body:not(.page-chat) .chat-xp-bar {
display: none !important;
}
/* Mobile: XP bar lives at the top of the screen above the pill header,
since the bottom is now occupied by the inventory drawer. */
body.is-mobile .chat-xp-bar {
top: 0;
bottom: auto;
}
.chat-xp-fill {
height: 100%;
background: #c0762d;
width: 0;
transition: width 1.2s linear, background 0.5s ease;
}
.chat-xp-fill.xp-loss {
background: #c02d2d;
}
/* --- Chat Panel: Animations --- */
@keyframes msg-jiggle {
0% { transform: scale(1); }
25% { transform: scale(1.08); }
50% { transform: scale(0.97); }
75% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.chat-message-new {
animation: msg-slide-in-other 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.player-panel-section .action-btn { padding: 8px 12px; font-size: var(--font-size-sm); }
.player-panel-section .notifications-empty {
font-size: var(--font-size-sm);
color: var(--color-gray-8);
text-align: center;
padding: 4px;
display: block;
}
/* Shared shake keyframe used by the PFP system + a few other elements
(pill scroll buttons, chat secondary action buttons). Not cc-entry-
specific but lives here for historical reasons — leave in place. */
@keyframes cc-pfp-shake {
0% { transform: rotate(0deg); }
18% { transform: rotate(-5deg); }
36% { transform: rotate(4deg); }
54% { transform: rotate(-3deg); }
72% { transform: rotate(2deg); }
88% { transform: rotate(-1deg); }
100% { transform: rotate(0deg); }
}
/* Numeric font (Nunito) + tabular digits for all number-displaying elements */
.cc-rank,
.msg-balance, .msg-level-num,
.stat-value,
.mission-timer,
.leaderboard-value, .leaderboard-online-count,
.presale-user-value, .presale-input,
.slot-charges, .item-ammo-label,
.notif-badge-count {
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
}
.slot-icon { color: var(--color-text-primary); font-weight: 400; font-size: var(--font-size-xxl); }
.inventory-slot.equipped .slot-icon { filter: invert(1); }
.dock-pill.pill-landed {
animation: pill-land 0.3s ease-out;
}
.pawn-action .action-btn {
width: 100%;
}
/* --- Profile Panel: Header & Navigation --- */
.notification-header {
height: 34px;
display: flex;
align-items: center;
flex-shrink: 0;
background: transparent;
border-radius: 0;
position: relative;
}
.profile-dropdown-bank .action-btn {
flex: 1;
}
.bank-modal-actions .action-btn {
flex: 1;
}
.inventory-panel-slots .inventory-slot {
width: auto;
height: auto;
aspect-ratio: auto;
background: transparent;
}
.inventory-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
padding: var(--spacing);
box-sizing: border-box;
border: none;
border-radius: 2px;
background: var(--color-gray-1);
cursor: pointer;
transition: all 0.2s;
}
.inventory-slot:hover { border-color: var(--color-nuke-primary); }
.inventory-slot.empty { cursor: default; }
.inventory-slot.selected {
border-color: var(--color-nuke-primary);
background: rgba(237, 28, 36, 0.05);
}
/* Notification header bar */
.notification-header {
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
font-size: var(--font-size-md);
border-bottom: none;
}
.notif-rotate-item { display: none; }
.notif-rotate-item.active { display: inline; }
.notif-season {
font-family: var(--font-conduit);
font-size: var(--font-size-xl);
font-weight: 900;
color: var(--color-white);
letter-spacing: 1px;
text-transform: uppercase;
}
.notif-online {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-secondary);
}
.notif-jackpot {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-nuke-accent);
}
.notif-info {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-secondary);
}
.notifications-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
#notifications-count {
display: inline-block;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--color-nuke-primary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
font-weight: 700;
line-height: 16px;
text-align: center;
border-radius: 8px;
}
#notifications-count:empty {
display: none;
}
.notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing);
}
.notifications-title {
font-size: var(--font-size-lg);
font-weight: 700;
}
.notifications-count {
font-size: var(--font-size-sm);
color: var(--color-gray-5);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.notifications-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
.notifications-list::-webkit-scrollbar {
display: none;
}
.notifications-empty {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 400;
padding: var(--spacing);
text-align: center;
}
.notif-item {
position: relative;
padding: var(--spacing);
background: var(--color-gray-1);
font-size: var(--font-size-sm);
transition: background 0.15s;
}
.notif-item.unread {
background: var(--color-gray-2);
}
.notif-unread-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: var(--color-nuke-success, #4caf50);
border-radius: 50%;
}
.notif-item, .notif-item * { color: var(--color-black); }
.notif-mention-quote {
margin-top: 4px;
padding: 4px 8px;
background: var(--color-gray-2);
border-left: 2px solid var(--color-nuke-link);
color: var(--color-gray-6, var(--color-white));
font-style: italic;
}
.notifications-header-text-wrapper {
overflow: hidden;
min-width: 0;
}
#notifications-header-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-weight: 400;
font-size: var(--font-size-md);
color: var(--color-text-primary);
}
.notif-header-quote {
margin-left: 8px;
color: var(--color-gray-5);
font-style: italic;
}
.notif-header-quote::before {
content: '"';
}
.notif-header-quote::after {
content: '"';
}
/* --- Profile Panel: Missions --- */
@keyframes mission-bg-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#mission-list .notif-item.mission-locked {
opacity: 0.45;
background: rgba(255, 255, 255, 0.015);
border-color: var(--color-gray-4);
}
#mission-list .notif-item.mission-claimed {
opacity: 0.7;
text-decoration: line-through;
text-decoration-color: var(--color-gray-7);
}
#mission-list .notif-item.mission-exhausted {
opacity: 0.5;
font-style: italic;
}
#mission-list .notif-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.shortcuts-panel.hidden { display: none; }
.presale-input-group .action-btn {
flex-shrink: 0;
}
.notification-header-toast-clip {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 400px;
overflow: hidden;
pointer-events: none;
}
.notification-header .mention-toast {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
left: 0;
right: 0;
width: 100%;
transform: translateY(-100%);
transition: transform 0.15s ease-out;
pointer-events: auto;
}
.notification-header .mention-toast-visible {
transform: translateY(4px);
}
/* ===========================================
13. ANIMATIONS
=========================================== */
@keyframes crt-scroll {
0% { background-position: 0 0, 0 0; }
100% { background-position: 0 0, 0 80px; }
}
/* ============ Announcement Popup ============ */
.announcement-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
}
.announcement-popup-content {
background: var(--bg-primary, #1a1a1a);
border: 1px solid var(--border-color, #333);
border-radius: 8px;
padding: 24px;
max-width: 360px;
width: 90%;
display: flex;
flex-direction: column;
gap: 12px;
}
.announcement-popup-header {
font-size: 16px;
font-weight: bold;
color: var(--text-primary, #fff);
}
.announcement-popup-desc {
font-size: 13px;
color: var(--text-secondary, #999);
margin: 0;
}
.announcement-msg-input {
background: var(--bg-secondary, #222);
border: 1px solid var(--border-color, #444);
border-radius: 4px;
color: var(--color-white);
padding: 8px 10px;
font-size: var(--font-size-md);
font-weight: 400;
font-family: inherit;
}
.announcement-confirm-btn {
background: var(--accent-color, #4a9eff);
color: var(--color-white);
border: none;
border-radius: 4px;
padding: 12px;
font-size: var(--font-size-md);
font-weight: 400;
cursor: pointer;
font-family: inherit;
}
.announcement-confirm-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.announcement-cancel-btn {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--border-color, #444);
border-radius: 4px;
padding: 8px;
font-size: var(--font-size-sm);
font-weight: 400;
cursor: pointer;
font-family: inherit;
}
.announcement-status {
font-size: 12px;
color: var(--text-secondary, #999);
min-height: 1em;
}
/* ============ Announcement Overlay (Radio) ============ */
.announcement-overlay {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 9000;
background: rgba(0, 0, 0, 0.85);
border: 1px solid var(--accent-color, #4a9eff);
border-radius: 8px;
padding: 12px 24px;
color: var(--color-white);
font-size: 14px;
pointer-events: none;
animation: announcement-pulse 1.5s ease-in-out infinite;
}
/* ============ Item Preview Modal ============ */
.item-preview-modal-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
}
.item-preview-modal {
position: relative;
width: 280px;
background: var(--color-gray-1);
border-radius: 12px;
padding: 24px 20px 16px 20px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.item-preview-close {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--color-gray-8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.item-preview-close:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-white);
}
.item-preview-icon {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
margin-bottom: 12px;
}
.item-preview-name {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-white);
text-align: center;
margin-bottom: 12px;
}
.item-preview-description {
font-size: var(--font-size-sm);
color: var(--color-gray-8);
text-align: center;
line-height: 1.4;
margin-bottom: 20px;
min-height: 40px;
}
.item-preview-buy-btn,
.item-preview-action-btn {
padding: 12px 16px;
border: none;
border-radius: 12px;
font-size: var(--font-size-md);
font-weight: 700;
cursor: pointer;
transition: filter 0.15s;
color: var(--color-white);
}
.item-preview-buy-btn {
width: 100%;
background: var(--color-nuke-primary);
}
.item-preview-actions {
display: flex;
gap: 8px;
width: 100%;
}
.item-preview-action-btn {
flex: 1;
}
.item-preview-action-btn.primary {
background: var(--color-nuke-primary);
}
.item-preview-action-btn.secondary {
background: var(--color-gray-4);
}
.item-preview-buy-btn:hover,
.item-preview-action-btn:hover {
filter: brightness(1.1);
}
.item-preview-buy-btn:active,
.item-preview-action-btn:active {
filter: brightness(0.92);
}
/* /nuke sandbox styles have been moved to src/css/styles.css. Loaded
alongside styles.css via a separate in index.html. Keep
nuke-page rules out of this file. */
/* ============================================
Cursors — the custom Notwaita bitmap cursors were removed site-wide. These keep
the STANDARD SYSTEM cursor semantics (pointer on clickables, text in inputs,
etc.) so nothing regresses to a bare arrow. The ONLY custom cursor left is the
notepad pen (`.nuke-notebook-canvas` in styles.css). `!important` so per-element
rules don't shadow these.
============================================ */
a,
button,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="link"],
[onclick],
label[for],
summary,
select,
.cursor-pointer,
.classic-button,
.action-btn,
.action-button,
.nuke-stage-tab,
.nuke-stage-tab-action,
.contact-group-header,
.nuke-row,
.nuke-profile-name-row,
.nuke-profile-mail-item,
.item-card:not(.item-card-empty),
.nuke-post-quote,
.nuke-post[data-has-account="true"],
.nuke-reaction-badge,
.nuke-chat-img-wrap {
cursor: pointer !important;
}
/* ============================================================
ANIMATION LIBRARY — @keyframes preserved from the old prod UI.
The prod rules that referenced these were removed; the keyframes
themselves are kept, named, and grouped here for reuse later.
============================================================ */
@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes signin-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
}
@keyframes cc-rebound {
0% { --cc-press: 0.97; }
28% { --cc-press: 1.018; }
52% { --cc-press: 0.995; }
72% { --cc-press: 1.003; }
88% { --cc-press: 0.9995; }
100% { --cc-press: 1; }
}
@keyframes cc-rebound-soft {
0% { --cc-press: 0.99; --cc-tilt: 0deg; }
100% { --cc-press: 1; --cc-tilt: 0deg; }
}
@keyframes msg-row-fade {
0%, 30% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes msg-slide-in-other {
0% { transform: translateY(20px) scale(0.95) rotate(0deg); }
20% { transform: translateY(-4px) scale(1.02) rotate(var(--tilt, -0.8deg)); }
40% { transform: translateY(3px) scale(0.99) rotate(0.5deg); }
60% { transform: translateY(-1px) scale(1.005) rotate(-0.25deg); }
80% { transform: translateY(0) scale(1) rotate(0.1deg); }
100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes shop-jiggle {
0% { transform: translateX(0); }
15% { transform: translateX(-4px); }
30% { transform: translateX(4px); }
45% { transform: translateX(-3px); }
60% { transform: translateX(3px); }
75% { transform: translateX(-1px); }
90% { transform: translateX(1px); }
100% { transform: translateX(0); }
}
@keyframes pill-land {
0% { transform: scale(1); }
25% { transform: scale(1.08); }
50% { transform: scale(0.97); }
75% { transform: scale(1.02); }
100% { transform: scale(1); }
}
@keyframes mission-bg-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes mission-in {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes mission-out {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.9); opacity: 0; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes announcement-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ===================================================================
NUKE PAGE — styles scoped under .nuke-container (was styles.css)
=================================================================== */
/* =============================================================
/nuke sandbox stylesheet — MSN Messenger design
=============================================================
All visual rules for the /nuke sandbox live in this file,
scoped under `.nuke-container ...` (or the `page-nuke` body /
html class for global mode). Imported alongside styles.css from
index.html. Keep this file the sole source of truth for any
visual property used on the nuke page; HTML and TS template
strings should hold layout primitives only.
============================================================= */
/* --- Page-mode global rules ------------------------------------ */
body.page-nuke .content {
padding: 0;
overflow: hidden;
}
/* Block all overscroll rubber-band on the /nuke sandbox — both the
document itself and the inner scroll containers. The `page-nuke`
class is set on BOTH `html` and `body` (see main.ts) so we don't
need a `:has()` walk to reach `html`. */
body.page-nuke,
html.page-nuke {
overscroll-behavior: none;
}
/* Solid white page background on /nuke — overrides the global `body`
`#eaeaea`, and hides the tiled `wallpaper.png` pattern (`body::before`). */
body.page-nuke {
background: #FFFFFF;
}
body.page-nuke::before {
display: none;
}
/* --- Pill overrides (nuke-page color/typography family) -------- */
/* Nuke-page pill overrides — soft MSN-style chrome that fits the
light-blue/white nuke chat aesthetic. Lighter pastel backgrounds
with dark text for legibility on the white chat bg, plus a thin
matching border (same #E0E0E0 used everywhere else in the nuke
sandbox) so the pills read as the same component family as the
chat bubbles and white containers. */
.nuke-container .dock-pill {
height: auto;
/* Tight vertical padding + a pinned line-height keep the pill short
so it clears the 32px header strip with margin to spare (avoids the
top edge being clipped by the ticker's `overflow-y: hidden`). */
padding: 1px 9px;
line-height: 1.3;
/* Match the local chat-bubble's typography exactly — same font
family + weight as messages sent by you (the inline ``
in the bubble template uses `var(--font-conduit)` with no
explicit weight, so a regular 400 here mirrors it). */
font-family: var(--font-conduit);
font-size: 13px;
font-weight: 500;
border-radius: 10px;
border: 1px solid #E0E0E0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.nuke-container .pill-red { background: #FFE5E5; color: #8B1F1F; --pill-bd: #F5C7C7; border-color: var(--pill-bd); }
.nuke-container .pill-orange { background: #FFEEDD; color: #8B5A1F; --pill-bd: #F5D9B7; border-color: var(--pill-bd); }
.nuke-container .pill-blue { background: #E6F1FF; color: #1F478B; --pill-bd: #C8DDF2; border-color: var(--pill-bd); }
.nuke-container .pill-purple { background: #F0E5FF; color: #5A1F8B; --pill-bd: #DFC8F2; border-color: var(--pill-bd); }
.nuke-container .pill-green { background: #E5F5E5; color: #1F6B1F; --pill-bd: #C7E2C7; border-color: var(--pill-bd); }
.nuke-container .pill-yellow { background: #FFF5D9; color: #8B6B1F; --pill-bd: #F2E2B0; border-color: var(--pill-bd); }
.nuke-container .pill-transparent {
background: transparent;
color: #666;
border-color: transparent;
box-shadow: none;
font-size: 12px;
font-weight: 500;
}
/* --- Mini-preflight reset (scoped to nuke subtree) ------------- */
/* Mini-preflight for borders, scoped to the nuke sandbox subtree.
Without this, Tailwind's `border-t` / `border-l` / `border-r` /
`border-b` only set `border-*-width: 1px` — the other three sides
default to `border-width: medium` (3px) and `border-style: none`,
so adding `border-solid` would render borders on all four sides
instead of just the intended one. Setting `border-width: 0` and
`border-style: solid` globally for the subtree means
side-specific Tailwind border classes work the way Tailwind
documents them. Specificity stays 0,0,0 so explicit `.foo {
border: 1px solid X }` rules still override. */
.nuke-container *,
.nuke-container *::before,
.nuke-container *::after {
border-width: 0;
border-style: solid;
}
/* --- Nuke-container shell -------------------------------------- */
.nuke-container {
/* Fills the viewport at native 1:1 — true pixel size on every monitor. */
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
user-select: none;
/* Reserve space for the fixed-position chrome at the top: the 62px search
header + the 40px pill header = 102px. The .nuke-page-footer was
removed, so no bottom reservation is needed — the stage's own 16px
padding-bottom is the only bottom gap. */
padding-top: 102px;
padding-bottom: 0;
/* Sunghyun Sans is the main site's calling-card font. Bundled
locally in three weights only (400 / 700 / 900) — no thin variant,
so secondary fonts on this page stay as the source design's
inline values. `Noto Color Emoji` is already in the var's fallback
chain (see :root) so emoji content renders in color here too. */
font-family: var(--font-conduit);
font-size: 13px;
color: #000000;
/* Plain white page background. */
background-color: #ffffff;
/* Defined here so `.nuke-stage`, `.nuke-side-left`, and
`.nuke-side-right` (siblings) can all read these. */
/* LEFT column holds the profile card + notebook (fixed 320px). */
--left-col-w: 320px;
/* The vw-flexed column (now LEFT = chat): 30vw clamped to
[360px, 480px]. Safe to use vw-based widths here because the
column is `position: fixed; right: 8px` — its right edge is
anchored directly to the viewport, so width changes only move
the LEFT edge (no detachment from the viewport-right edge). */
/* RIGHT column holds chat/online (the wider, vw-flexed one). */
/* 384px column = 360px content + the 12px --right-inset on each side. */
--right-col-w: 398px; /* 350px content (x.com's sidebarColumn) + the 24px --right-inset on each side */
/* Inner horizontal inset for the right column's content. The column keeps its
full width; this just pads the content inward by 24px on each side, leaving
350px of content. */
--right-inset: 24px;
/* Missions column (far right) — matches the profile column width. */
--missions-col-w: 320px;
/* X.com-style 3-column layout, centered as a group with a gap between each.
The middle chat column is the X.com feed width (600px). The left (Profile)
column is `--col-w`; the right (Shop) column is a fixed `--right-col-w`
(350px, x.com's sidebar width) that collapses on narrow viewports — see the
media query at the end of this file. */
--chat-w: 600px;
--col-w: clamp(340px, 25vw, 480px);
/* No inter-column gap — the only spacing between the chat and the side panels
is each panel's 8px content inset (--right-inset). */
--col-gap: 0px;
/* x.com-style left nav rail (replaces the old profile side panel). A fixed,
narrow icons+labels column glued to the left of the centered feed — see
`.nuke-nav`. Narrower than the old profile column (`--col-w`).
348px column → 300px content (348 − 24×2 inset). */
--nav-col-w: 348px;
/* Flat 16px gutter on each side, matching the 16px top/bottom gap. The page
renders at native 1:1 (no zoom/scaling), so the columns just anchor to the
viewport at this fixed inset on every monitor. */
--page-edge-x: 16px;
/* Mobile-build chrome heights — consumed by the responsive tiers at the
bottom of this file (≤768px): the slim top app bar + the bottom tab bar
that frame the full-width feed on phones. */
--m-topbar-h: 48px;
--m-botnav-h: 54px;
}
.nuke-container.hidden { display: none; }
/* --- Nuke-page header / footer / stage / side columns ---------- */
/* Empty full-width top bar — solid white, spans the whole page at the very top.
48px tall. Everything else below is anchored 48px lower (+12px gap) to clear
it. Placeholder; no content yet. */
.nuke-container .nuke-page-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
/* The element stays full-width (its logo + pill ticker are positioned with 50%
relative to it), but the white fill is clipped to the panel CONTENT span — the
left nav's content edge (column + 24px padding) to the right column's content
edge (column − --right-inset) — so it lines up with the visible cards below,
not the column boxes. */
background: linear-gradient(
to right,
transparent 0,
transparent calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--nav-col-w) + 24px),
#FFFFFF calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--nav-col-w) + 24px),
#FFFFFF calc(50% + var(--chat-w) / 2 + var(--col-gap) + var(--right-col-w) - var(--right-inset)),
transparent calc(50% + var(--chat-w) / 2 + var(--col-gap) + var(--right-col-w) - var(--right-inset)),
transparent 100%
);
z-index: 35;
/* The top bar sits ABOVE the spotlight scrim (z-28), so the scrim can't darken
it. Instead dim it with brightness(0.7) — which equals the scrim's
rgba(0,0,0,.3) — when the spotlight is active (see rule below). Transitioned
over the scrim's 0.18s so they fade together (no z-index snap). */
transition: filter 0.18s ease;
}
/* Spotlight active (search hovered/focused, or a profile hovercard open) → dim the
top bar in lockstep with the rest of the page. */
.nuke-container:has(.nuke-subheader-search .user-search-bar:hover) .nuke-page-topbar,
.nuke-container:has(.nuke-subheader-search:focus-within) .nuke-page-topbar,
.nuke-container:has(.nuke-hovercard.is-visible) .nuke-page-topbar {
filter: brightness(0.4);
}
/* Brand logo in the header — left-aligned over the nav column (its left edge +
the nav's 12px inset), the same horizontal alignment it had in the left rail.
Vertically centered in the bar (transform-free; margins handle the 50px button
in the 48px bar). */
.nuke-container .nuke-page-topbar .nuke-nav-logo {
position: absolute;
left: calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--nav-col-w) + 24px);
top: 0;
bottom: 0;
margin: auto 0;
}
/* Recent-actions pill ticker, hosted in the top bar. Spans from the chat
column's LEFT edge to the right panel's RIGHT edge (chat is centered at
width --chat-w; the right panel ends at 50% + chat-w/2 + col-gap + right-col-w),
and is vertically centered in the bar (overrides the old bottom-aligned band). */
.nuke-container .nuke-page-topbar .nuke-pill-header {
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: calc(50% - var(--chat-w) / 2);
right: calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--right-col-w) + var(--right-inset));
align-items: center;
/* First pill sits flush at the left edge; 12px trailing gutter at the right
(the original gutters — the leading/trailing padding scrolls off-screen once
the nav buttons appear, so button clearance is handled by the frosted edges,
not here). */
padding-left: 0;
padding-right: 12px;
/* Alpha mask: pills are fully HIDDEN only at the very outer edge (0→l1), then
ramp to opaque quickly by l2 — kept SHORT (much less than the ~80px frost) so
the pill becomes opaque well within the blur zone. The frosted edge (below)
then blurs that now-visible pill, tapering to crisp ~140px in: hidden sliver →
opaque blurred → crisp. Per-side vars collapse to 0 when that end's nav button
is hidden, leaving the first/last pill crisp. */
--pe-l1: 20px;
--pe-l2: 60px;
--pe-r1: 20px;
--pe-r2: 60px;
-webkit-mask: linear-gradient(to right, transparent 0, transparent var(--pe-l1), #000 var(--pe-l2), #000 calc(100% - var(--pe-r2)), transparent calc(100% - var(--pe-r1)), transparent 100%);
mask: linear-gradient(to right, transparent 0, transparent var(--pe-l1), #000 var(--pe-l2), #000 calc(100% - var(--pe-r2)), transparent calc(100% - var(--pe-r1)), transparent 100%);
}
/* Left button hidden (at the start) → no left hide-mask, first pill crisp. */
.nuke-container .nuke-page-topbar:has(.nuke-pill-scroll-cap--left.is-hidden) .nuke-pill-header {
--pe-l1: 0px;
--pe-l2: 0px;
}
/* Right button hidden (at the end) → no right hide-mask, last pill crisp. */
.nuke-container .nuke-page-topbar:has(.nuke-pill-scroll-cap--right.is-hidden) .nuke-pill-header {
--pe-r1: 0px;
--pe-r2: 0px;
}
/* Frosted edges, layered OVER the strip's hide-mask: a graduated blur (no white
tint — the tint washed out the blur; the strip's alpha mask already lightens the
edge) that sits across the strip's reveal ramp, so a pill emerging from the hidden
outer edge appears blurred first, then sharpens. `backdrop-filter` blurs the pills
behind; the layer's own `mask` ramps the blur from strongest at the very edge to
nothing ~140px inward. Sits below the nav buttons (z-2) and above the pill strip. */
.nuke-container .nuke-page-topbar::before,
.nuke-container .nuke-page-topbar::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 140px;
z-index: 1;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
/* Swift fade so a side's frost appears/vanishes with its nav button. */
transition: opacity 0.16s ease;
}
.nuke-container .nuke-page-topbar::before {
left: calc(50% - var(--chat-w) / 2);
-webkit-mask: linear-gradient(to right, #000, transparent);
mask: linear-gradient(to right, #000, transparent);
}
.nuke-container .nuke-page-topbar::after {
right: calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--right-col-w) + var(--right-inset));
-webkit-mask: linear-gradient(to left, #000, transparent);
mask: linear-gradient(to left, #000, transparent);
}
/* Left button hidden (scrolled to the start) → no left frost, first pill crisp. */
.nuke-container .nuke-page-topbar:has(.nuke-pill-scroll-cap--left.is-hidden)::before {
opacity: 0;
}
/* Right button hidden (scrolled to the end) → no right frost, last pill crisp. */
.nuke-container .nuke-page-topbar:has(.nuke-pill-scroll-cap--right.is-hidden)::after {
opacity: 0;
}
/* Round nav button inset from each end of the pill strip. The frosted edge
(topbar ::before / ::after) blurs the pills as they slide past, so the buttons
read as floating scroll controls (X-style) rather than hard white blocks. */
.nuke-container .nuke-page-topbar .nuke-pill-scroll-cap {
position: absolute;
/* Center vertically WITHOUT a transform (top/bottom + auto margins): a
`translateY(-50%)` under the container's `zoom` lands on a fractional pixel,
which the browser snaps differently when the opacity fade promotes/demotes
the layer — causing the arrow to jump a couple px. This is transform-free. */
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
width: 28px;
height: 28px;
background: #EFF3F4;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #536471;
/* Arrow glyphs come from the Rosetta glyph font: F172 = left, F173 = right. */
font-family: 'Rosetta';
font-size: 13px;
line-height: 1;
cursor: pointer; /* clicking snaps to the next / previous pill */
z-index: 2; /* above the pill strip so it sits over the fading pills */
/* Swift fade in/out, toggled by `.is-hidden` (JS) when that end of the strip
is reached / there's nothing more to scroll. `will-change` keeps it on a
stable composited layer so the fade doesn't re-snap its position. */
transition: opacity 0.16s ease, background 0.12s ease;
will-change: opacity;
}
.nuke-container .nuke-page-topbar .nuke-pill-scroll-cap:hover {
background: #E1E8ED;
}
/* Round scroll buttons sit flush on each strip edge (no inset). */
.nuke-container .nuke-page-topbar .nuke-pill-scroll-cap--right {
right: calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--right-col-w) + var(--right-inset));
}
.nuke-container .nuke-page-topbar .nuke-pill-scroll-cap--left {
left: calc(50% - var(--chat-w) / 2);
}
/* Reached that end (or no overflow) → fade the whole cap group out (opacity
covers the white box, the arrow, AND the `::before` fade). */
.nuke-container .nuke-page-topbar .nuke-pill-scroll-cap.is-hidden {
opacity: 0;
pointer-events: none;
}
/* Top header bar, fixed at the very top. 54px tall = the 38px search bar +
8px padding above and below. No background — only the search bar inside it
is visible. */
.nuke-container .nuke-subheader {
position: fixed;
top: 48px; /* flush below the 48px top bar — no gap */
/* Over the RIGHT (profile) column ONLY — a header for that column, X-style.
The chat + Shop columns have no page header above them, so they reach the
very top of the page. */
left: calc(50% + var(--chat-w) / 2 + var(--col-gap));
right: auto;
width: var(--right-col-w);
height: 62px;
background: transparent;
z-index: 30;
display: flex;
/* Center the search bar on the chat's top sort header. That header sits at the
column top (60px — its absolute top:0 ignores the chat-container margin),
height 53px → center 86.5px. The 44px bar centered there has its top at
64.5px; with the bar centered in its 38px row (−3px) that needs 7.5px padding.
The focused dropdown is pinned to the same top so focusing doesn't shift it. */
align-items: flex-start;
justify-content: center;
padding: 7.5px 0 0 0;
}
/* Search row — same width as the right (profile) column (`--col-w`), aligned
over it. */
.nuke-container .nuke-subheader-search {
width: var(--right-col-w);
flex: 0 0 auto;
/* Inset the collapsed search bar from the column edges (border-box keeps the
column at --right-col-w). */
padding-left: var(--right-inset);
padding-right: var(--right-inset);
}
/* Spotlight scrim (prod /home parity): a full-page dim shown while the search
is hovered or focused. Sits ABOVE the columns + chat stage (z-index 25) but
BELOW the search subheader (30) and its focused dropdown (40), so everything
dims except the search itself — no z-index lifting needed. */
.nuke-container .nuke-hover-spotlight {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 28;
}
.nuke-container:has(.nuke-subheader-search .user-search-bar:hover) .nuke-hover-spotlight,
.nuke-container:has(.nuke-subheader-search:focus-within) .nuke-hover-spotlight,
/* Open profile hovercard dims the page too — the card (z-50) sits above the
scrim (z-28) so it stays bright, just like the raised search bar. */
.nuke-container:has(.nuke-hovercard.is-visible) .nuke-hover-spotlight {
opacity: 1;
}
/* While a hovercard is open the search bar isn't the focus, so dim it too — but
instead of dropping it below the scrim (z-index can't animate, so it would snap
bright before the scrim finished fading), darken it with `brightness(0.7)`,
which is mathematically the scrim's rgba(0,0,0,.3). Transitioned over the same
0.18s as the scrim so they fade in and out together. */
.nuke-container:has(.nuke-hovercard.is-visible) .nuke-subheader .user-search-bar {
filter: brightness(0.4);
}
/* Kill the PROD header's leftover spotlight overlay on this page. `#hover-spotlight`
(styles.css, z-90) is a sibling OUTSIDE `.nuke-container`, but it's still switched on
by initHoverSpotlight() — which toggles `body.spotlight-search` whenever this page's
search (a shared `.user-search-wrapper`) is hovered/focused. At z-90 it paints OVER
the search subheader (z-30): the search can't escape its z-30 stacking context to
reach prod's z-95 wrapper-lift, so the whole bar + dropdown gets dimmed along with
the page. This page has its OWN scrim (`.nuke-hover-spotlight`, z-28, correctly
below the subheader), so the prod one is pure interference — suppress it while /nuke
is visible. The nuke scrim still dims the page; the search stays bright. (Not
`.nuke-container`-scoped because the target lives outside that subtree.) */
body:has(#nuke-container:not(.hidden)) #hover-spotlight {
display: none;
}
/* Recent-actions ticker inside the page header. Horizontal strip of
`.dock-pill` bubbles (pastel colors from the pill overrides above),
newest-first, scrolls/drags sideways. Fills the header width; the
scrollbar is hidden so it reads as a clean ticker. Pills + their
render/diff logic are shared with the prod chat header (chat.ts
`populateHeaderPills`). */
.nuke-container .nuke-pill-header {
flex: 1 1 auto;
min-width: 0;
height: 100%;
display: flex;
/* Pills sit at the BOTTOM of the header band (the ticker fills the header's
full height), so the extra header height opens a gap above them — away
from the profile header. */
align-items: flex-end;
gap: 6px;
/* The header is now one column wide (over the left/Shop column), so the
pills fill it edge-to-edge and scroll within it. */
margin-left: 0;
/* Trailing gutter so the last pill isn't jammed against the edge; an 8px
leading gutter sets the first pill's distance from the left edge. Lives as
container padding (not a header inset) so it scrolls WITH the content. */
padding: 0 12px 0 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
user-select: none;
/* Own compositor layer so scrolling (native AND the JS drag) translates the
layer on the GPU rather than repainting the pills + their pfp gloss every
frame on the main thread, which the page-wide zoom otherwise forces. This
is what brings the drag up to native-trackpad smoothness. */
transform: translateZ(0);
}
/* Custom grab cursor (site's Notwaita hand) over the whole strip at
rest, including the pills — the base `.dock-pill` sets
`cursor: default`, so the pills are listed explicitly to override it.
Same asset + hotspot as `.cursor-grab` in styles.css; `!important`
matches the cursor system's convention there. */
.nuke-container .nuke-pill-header,
.nuke-container .nuke-pill-header .dock-pill {
cursor: grab !important;
}
/* Username links inside a pill are the only clickable part (they open
the user's profile), so they get the site's custom pointer/click
cursor (hand2) instead of the strip's grab. Targets the link + its
inner name/pfp so the whole clickable area reads as clickable. Same
asset + hotspot as the pointer rule in styles.css. */
.nuke-container .nuke-pill-header .pill-user-link,
.nuke-container .nuke-pill-header .pill-user-link * {
cursor: pointer !important;
}
/* Active-drag state: no closed-fist "grabbing" asset exists, so use the
site's `move` cursor (4-arrow) as the dragging affordance. Same asset
+ hotspot as `.cursor-move` in styles.css. The `.dragging` variants for
the username link carry extra specificity so a drag-in-progress reads
as move everywhere, even over a clickable name. */
.nuke-container .nuke-pill-header.dragging,
.nuke-container .nuke-pill-header.dragging .dock-pill,
.nuke-container .nuke-pill-header.dragging .pill-user-link,
.nuke-container .nuke-pill-header.dragging .pill-user-link * {
cursor: move !important;
}
.nuke-container .nuke-pill-header::-webkit-scrollbar {
display: none;
}
/* Pill pfps + usernames styled like the chat's — 20px pfp + bold name. The
pill grows a touch so the 20px pfp fits (base pill is 20px tall). */
.nuke-container .nuke-pill-header .pill-pfp {
width: 24px;
height: 24px;
transform: none;
/* Slightly-rounded square — tracks the shared --pfp-radius (the inner img is
clipped to this). */
border-radius: var(--pfp-radius);
/* Flat — no drop shadow on the pill avatars. */
box-shadow: none;
/* 1px border (same thickness as the `.dock-pill` border) painted in the
EXACT same color the parent pill uses for its own border — both pull from
the shared `--pill-bd` variable so they can never drift apart. */
border: 1px solid var(--pill-bd, #E0E0E0);
/* Keep the 24px footprint with the border inside it. */
box-sizing: border-box;
}
/* Drop the PFP design-system's 3D rim (lit-top / dark-bottom inset edge) on the
ticker pfp so its only visible edge is the flat `--pill-bd` border above —
matching the pill it sits in instead of the rim's grey/dark bevel. */
.nuke-container .nuke-pill-header .pill-pfp::after {
display: none;
}
/* Flex the whole pill row (like the chat chain header) so the name AND the
words around it center on the same line. `gap` restores the single space
that flex collapses at each flex-item boundary (the template's spaces around
every pill-user-link). */
.nuke-container .nuke-pill-header .pill-content {
display: flex;
align-items: center;
gap: 0.25em;
}
.nuke-container .nuke-pill-header .pill-user-link {
display: inline-flex;
align-items: center;
}
.nuke-container .nuke-pill-header .dock-pill {
/* Equal padding on all sides (4px) so the inline pfp sits the same distance
from the pill's left edge as from its top/bottom. Content-sized. */
padding: 4px;
/* Uniform height for every pill: the pfp pill's full box — 24px pfp + 4px×2
padding + 1px×2 border = 34px. `border-box` makes `min-height` count the
whole box, so text-only pills grow to 34px instead of sitting shorter;
`align-items: center` (base) keeps the short text centered. */
box-sizing: border-box;
min-height: 34px;
/* Match the player-list banner's corner radius (6px) instead of the base 9px. */
border-radius: 6px;
/* Flat — no drop shadow on the pills. */
box-shadow: none;
}
.nuke-container .nuke-pill-header .pill-name {
font-weight: 600;
}
/* --- Profile card banner (profile tab) ------------------------- */
/* Calling-card banner — sits on the right side of the header,
behind the PFP and text via z-index: -1 (header creates its own
stacking context via `isolate`). 224×56 matches the prod 4:1
banner aspect ratio scaled to the card's 56px height. Mask fades
the left side so the text/icons stay legible; always visible (no
hover gate, unlike the contact-row banners). */
.nuke-container .nuke-profile-name {
font-weight: 600;
font-size: 14px;
color: #000;
}
.nuke-container .nuke-profile-status {
color: #808080; /* same as `.msn-text-grey` */
}
.nuke-container .nuke-stage {
/* MIDDLE column of the centered trio — the chat, now a fixed centered column
(was a relative element squeezed to the right via padding). Same top/bottom
band and z-layer as the side columns. */
position: fixed;
/* Flush below the empty page top bar (48px) — no gap. */
top: 48px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: var(--chat-w);
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 25;
}
.nuke-container .nuke-side-right {
/* Anchored directly to the viewport's left/right edge (same approach as
`.nuke-page-header` / `.nuke-page-footer`). No layout-chain dependency, so no
resize-detachment frame. top sits the first container 12px below the search
bar (bar bottom = 60 + 7.5px pad + 38px bar = 105.5px → 117.5px); the `gap`
below spaces the rest of the column by the same 12px. */
position: fixed;
top: 105.5px;
/* Spans the full height down to the page bottom (no empty footer band).
The right column overrides this to reserve the 8px XP bar. */
bottom: 0;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 25;
/* Isolate layout / style so internal updates in one panel
(e.g. chat scroll position, message addition) don't invalidate
rendering work on the others or the nuke-stage. Paint containment
is intentionally omitted because it clips child box-shadows to
the panel's bounds — children (window-frames + notebook) need
their drop-shadows to extend outside the panel. */
contain: layout style;
}
/* --- JACKPOT marquee banner (top of the right column, under the search) ----- */
.nuke-container .nuke-jackpot {
/* "JACKPOT" marquee: bulb lights around a rectangular outline — NO filled
plaque/background, and NO clipping (so the corner bulbs aren't cut off) —
plus a bright cluster that travels the perimeter, gold text in the middle.
Top of the right column, under the search bar. */
--cell: 15px; /* bulb spacing */
position: relative;
flex: 0 0 auto;
height: 64px;
/* Hidden for now (markup + styles kept) — change to `flex` to restore it. */
display: none;
align-items: center;
justify-content: center;
}
/* Bulbs evenly spaced via `space` — it pins one bulb to each corner so adjacent
edges share the corner (no overlap/crowding) and stays even at any width. */
.nuke-container .nuke-jackpot::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
--jp-dot: radial-gradient(circle at center,
#ffe6a8 0 30%, #dd9540 30% 44%, rgba(220, 140, 60, 0) 60%);
background:
var(--jp-dot) left top / var(--cell) var(--cell) space no-repeat,
var(--jp-dot) left bottom / var(--cell) var(--cell) space no-repeat,
var(--jp-dot) left top / var(--cell) var(--cell) no-repeat space,
var(--jp-dot) right top / var(--cell) var(--cell) no-repeat space;
}
/* The "spin": a bright cluster of ~3 bulbs that travels around the PERIMETER at
constant speed (not an angular sweep). `.nuke-jackpot-lights` is a static layer
masked to the bulbs + screen-blended; inside it the `.nuke-jackpot-spark` comet
rides the rounded-rect perimeter via offset-path, lighting whichever bulbs it
covers. Path inset by cell/2 so it runs along the bulb row. */
.nuke-container .nuke-jackpot-lights {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
mix-blend-mode: screen;
--jp-mask: radial-gradient(circle at center, #000 0 44%, rgba(0, 0, 0, 0) 60%);
-webkit-mask:
var(--jp-mask) left top / var(--cell) var(--cell) space no-repeat,
var(--jp-mask) left bottom / var(--cell) var(--cell) space no-repeat,
var(--jp-mask) left top / var(--cell) var(--cell) no-repeat space,
var(--jp-mask) right top / var(--cell) var(--cell) no-repeat space;
mask:
var(--jp-mask) left top / var(--cell) var(--cell) space no-repeat,
var(--jp-mask) left bottom / var(--cell) var(--cell) space no-repeat,
var(--jp-mask) left top / var(--cell) var(--cell) no-repeat space,
var(--jp-mask) right top / var(--cell) var(--cell) no-repeat space;
}
.nuke-container .nuke-jackpot-spark {
position: absolute;
left: 0;
top: 0;
width: calc(var(--cell) * 2.8);
height: calc(var(--cell) * 2.8);
background: radial-gradient(circle, #fff7df 0 24%, rgba(255, 247, 223, 0) 60%);
/* Square-cornered rectangle path inset by cell/2 so it runs along the bulb row
and passes through the corner bulbs. */
offset-path: inset(calc(var(--cell) / 2));
offset-anchor: center;
offset-distance: 0%;
animation: nuke-jackpot-travel 9s linear infinite;
}
@keyframes nuke-jackpot-travel { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
.nuke-container .nuke-jackpot-spark { animation: none; }
}
/* Gold, beveled "JACKPOT" lettering. */
/* --- Decorative radio (below the notebook; static — no playback wired up) ---- */
/* Floating radio — COLLAPSED: a red rounded-square play FAB pinned to the screen's
bottom-right (Grok-style). Clicking play expands it (.is-playing) into the full
radio row. Fixed + a direct child of .nuke-container so it floats at the true
screen corner (escapes the side panel's layout containment). */
.nuke-container .nuke-radio {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
width: 56px;
height: 56px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
background: #FFFFFF;
border: 1px solid #EFF3F4;
border-radius: 16px;
/* Smaller blur + NOT animated — a big animated box-shadow is a per-frame paint hog. */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
overflow: hidden;
/* Only width transitions; `will-change` isolates the FAB on its own compositor
layer so its per-frame repaint doesn't re-rasterise the chat underneath. */
will-change: transform;
transition: width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.18s ease;
}
.nuke-container .nuke-radio:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32); }
/* Darken in lockstep with the search/hovercard page-dim scrim (the FAB sits above
the scrim, so brightness(0.4) ≈ the scrim's rgba(0,0,0,.6)). */
.nuke-container:has(.nuke-subheader-search .user-search-bar:hover) .nuke-radio,
.nuke-container:has(.nuke-subheader-search:focus-within) .nuke-radio,
.nuke-container:has(.nuke-hovercard.is-visible) .nuke-radio {
filter: brightness(0.4);
}
/* Collapsed → hide the station info + equaliser; the FAB is one big play target. */
.nuke-container .nuke-radio .nuke-radio-station,
.nuke-container .nuke-radio .nuke-radio-eq { display: none; }
.nuke-container .nuke-radio-btn {
display: flex;
align-items: center;
justify-content: center;
color: #8a94a6;
}
.nuke-container .nuke-radio-btn svg { width: 18px; height: 18px; }
/* Play/pause button — a 30px red circle in BOTH states (matches the expanded
pause button), centred in the collapsed white square. */
.nuke-container .nuke-radio-btn.play {
flex: 0 0 auto;
border: none;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e0566c;
color: #fff;
}
.nuke-container .nuke-radio-btn.play svg { width: 15px; height: 15px; }
/* EXPANDED (playing): the full radio row — white box, station info, equaliser.
Width animates 56px → 230px (content reveals as it widens; height stays 56). */
.nuke-container .nuke-radio.is-playing {
width: 230px;
justify-content: flex-start;
padding: 0 14px;
gap: 12px;
/* bg/border/shadow inherited from the base rule — kept identical across states
so the expand only animates `width` (no per-frame shadow/paint changes). */
}
.nuke-container .nuke-radio.is-playing .nuke-radio-station { display: block; }
.nuke-container .nuke-radio.is-playing .nuke-radio-eq { display: flex; }
.nuke-container .nuke-radio.is-playing .nuke-radio-btn.play {
position: static;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e0566c;
}
.nuke-container .nuke-radio.is-playing .nuke-radio-btn.play svg { width: 15px; height: 15px; }
.nuke-container .nuke-radio-station { flex: 1; min-width: 0; }
.nuke-container .nuke-radio-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8a94a6;
}
.nuke-container .nuke-radio-freq { font-size: 17px; font-weight: 800; color: #0F1419; }
.nuke-container .nuke-radio-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.nuke-container .nuke-radio-eq span {
width: 3px;
border-radius: 1px;
background: #e0566c;
transform-origin: bottom;
transform: scaleY(0.3); /* resting (paused) — bars only move while playing */
}
.nuke-container .nuke-radio.is-playing .nuke-radio-eq span {
animation: nuke-radio-eq 0.9s ease-in-out infinite;
}
/* Play / pause icon swap driven by the .is-playing toggle. */
.nuke-container .nuke-radio-icon-pause { display: none; }
.nuke-container .nuke-radio.is-playing .nuke-radio-icon-play { display: none; }
.nuke-container .nuke-radio.is-playing .nuke-radio-icon-pause { display: block; }
.nuke-container .nuke-radio-eq span:nth-child(1) { height: 50%; animation-delay: -0.2s; }
.nuke-container .nuke-radio-eq span:nth-child(2) { height: 90%; animation-delay: -0.5s; }
.nuke-container .nuke-radio-eq span:nth-child(3) { height: 65%; animation-delay: 0s; }
.nuke-container .nuke-radio-eq span:nth-child(4) { height: 40%; animation-delay: -0.35s; }
@keyframes nuke-radio-eq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.nuke-container .nuke-radio.is-playing .nuke-radio-eq span { animation: none; }
}
/* --- x.com-style left nav rail -------------------------------------------- */
/* Replaces the old `.nuke-side-left` profile column. Fixed, full-height, and
anchored so its RIGHT edge meets the same seam the profile column did
(`50% - chat-w/2 - gap`), then grows leftward by `--nav-col-w`. No top chrome
sits over the left side, so it runs from the very top. */
.nuke-container .nuke-nav {
position: fixed;
top: 48px; /* flush below the 48px top bar — no gap */
bottom: 0;
left: calc(50% - var(--chat-w) / 2 - var(--col-gap) - var(--nav-col-w));
width: var(--nav-col-w);
/* 24px inset on each side; border-box keeps the column width. The column is
348px (--nav-col-w) so the content area is 300px (348 − 24×2). */
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 25;
/* Isolate layout/style like the other fixed columns (no paint containment so
child shadows aren't clipped). */
contain: layout style;
}
/* Empty fixed-height box at the top of the nav (above the logo), top-aligned with
the chat panel. Border/radius/background come from `.nuke-plain-box` (same as
the shop container); this just fixes its height and stops it from shrinking. */
.nuke-container .nuke-nav-top-box {
flex: 0 0 auto;
/* Adaptive height — grows to fit the profile card (was a fixed 200px). */
height: auto;
position: relative;
/* Pinned to the BOTTOM of the left nav column (x.com-style account block).
`order: 1` drops it below the nav list (default order 0); `margin-top: auto`
pushes it to the very bottom of the flex column. */
order: 1;
margin-top: auto;
/* 16px gap below the card so it doesn't sit flush on the screen bottom. */
margin-bottom: 16px;
}
/* Profile card filling the box — reuses the hovercard's inner styling, but
neutralizes the popup-only chrome: always visible + static (not a fixed,
animated, shadowed popup), and no border/shadow/bg of its own since the
surrounding `.nuke-plain-box` already provides the white card chrome. */
.nuke-container .nuke-nav-top-box .nuke-hovercard.nuke-profile-card {
position: static;
width: 100%;
opacity: 1;
pointer-events: auto;
transform: none;
transition: none;
border: none;
box-shadow: none;
background: none;
cursor: default;
}
/* Banner strip at the top of the left profile card — mirrors the /~handle
profile page. Breaks out of the card's 12px padding (negative margins) to
span the full card width and sit flush at the top; the plain-box's rounded
`overflow:hidden` clips its top corners. Solid black shows when no banner image. */
.nuke-container .nuke-profile-card-banner,
.nuke-container .nuke-hovercard-banner {
margin: -12px -12px 0;
/* Twitter/X banner aspect ratio (1500×500 = 3:1); height follows the card width. */
aspect-ratio: 3 / 1;
position: relative;
flex-shrink: 0;
background: #000000;
overflow: hidden;
}
.nuke-container .nuke-profile-card-banner-img,
.nuke-container .nuke-hovercard-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Head row: pfp on the left, username + @handle to its right. The row is pulled
up so the pfp's top 20px overlaps the banner and 44px (of the 64px pfp) hangs
below. The name + handle (which total exactly 40px) bottom-align to the pfp's
bottom, so the handle bottom meets the pfp bottom and the username top lands
4px below the banner (44 − 40).
SHARED by the left profile card AND the message hover popup — they are the same
banner+pfp+head design, so they read from ONE rule and can never diverge (which
is what caused the popup's "missing ring" before). */
.nuke-container .nuke-profile-card-head,
.nuke-container .nuke-hovercard-head {
display: flex;
align-items: flex-end;
gap: 12px;
margin-top: -20px;
/* Clickable → opens your own profile page (wired in initNukeProfileNav). */
cursor: pointer;
}
/* Subtle affordance: the name underlines on hover, like a profile link. */
.nuke-container .nuke-profile-card-head:hover .nuke-hovercard-name,
.nuke-container .nuke-hovercard-head:hover .nuke-hovercard-name {
text-decoration: underline;
}
/* Pfp size (64px) + white ring, keyed off `.nuke-hovercard` itself so it matches
BOTH the popup (`.nuke-hovercard`) AND the left card (`.nuke-hovercard
.nuke-profile-card`) as ONE rule, independent of the inner head markup.
The ring lives on the WRAPPER, not the inner `.cc-pfp` image: the `` has a
browser-default `overflow: clip` that swallows a box-shadow placed on it (the
shadow exists but never paints). The wrapper is `overflow: visible`, so the ring
shows — and because the `.cc-pfp { box-shadow: none !important }` kill rule only
targets the image, a ring on the wrapper needs NO `!important`. The wrapper's
`border-radius` makes the ring follow the rounded corners. */
.nuke-container .nuke-hovercard .nuke-hovercard-pfp {
width: 64px;
height: 64px;
box-shadow: 0 0 0 4px #FFFFFF;
}
/* Nudge the @handle 1px left so its italic glyphs' left edge lines up under the
(upright) username above it. */
.nuke-container .nuke-profile-card .nuke-hovercard-handle,
.nuke-container .nuke-hovercard-head .nuke-hovercard-handle {
margin-left: -1px;
}
/* Detailed balance breakdown under the headline balance (left card only),
laid out horizontally like X.com's "Following / Followers" row: each stat is a
bold value immediately followed by a muted label, with the stats spaced across a
single row (wrapping only if the card is too narrow). Hidden entirely (inline
style, via renderNukeProfileBox) when the user holds nothing — except in nuclear
fallout, where it always shows. A hairline divider separates it from the
cred/balance row. */
.nuke-container .nuke-profile-card .nuke-profile-breakdown {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #EFF3F4;
/* 2×2 grid of "value label" stats (still X.com-style inline units) — balanced,
rather than a ragged single-row wrap, now that there are four stats
(wallet / pending / staked / DPR). Left column: Wallet, Staked; right: Pending,
DPR. row-gap / column-gap below. */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
font-size: 12px;
line-height: 1.3;
}
/* One stat: bold value + muted label sitting inline, X.com "123 Following"-style. */
.nuke-container .nuke-profile-card .nuke-profile-breakdown-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.nuke-container .nuke-profile-card .nuke-profile-breakdown-value {
color: #0F1419;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.nuke-container .nuke-profile-card .nuke-profile-breakdown-label {
color: #536471;
}
/* Stake / Unstake row at the bottom of the card. Overrides the shared
`.nuke-staking` panel flex (column + grow) into a simple 2-up button row. */
.nuke-container .nuke-profile-card .nuke-staking.nuke-profile-actions {
flex: 0 0 auto;
flex-direction: row;
gap: 8px;
margin-top: 12px;
}
.nuke-container .nuke-profile-action-btn {
flex: 1;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 9999px;
background: #0F1419;
color: #FFFFFF;
font-family: inherit;
font-weight: 700;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.nuke-container .nuke-profile-unstake-btn {
background: #F4212E;
}
.nuke-container .nuke-profile-action-btn:disabled {
opacity: 0.5;
cursor: default;
}
.nuke-container .nuke-nav-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 4px 0 0 0;
}
/* Each item is a pill that hugs its content (icon + label); the rounded hover
wash wraps only the item, x.com-style — not the full column width. Labels are
regular weight at 20px with a 26px icon and a 20px gap between them — x.com's
actual sidebar metrics; the active route goes bold with a filled icon. */
.nuke-container .nuke-nav-item {
display: flex;
align-items: center;
gap: 20px;
width: fit-content;
max-width: 100%;
padding: 12px 24px 12px 12px;
border: none;
background: none;
border-radius: 9999px;
color: #0F1419;
font-family: inherit;
font-size: 20px;
font-weight: 400;
line-height: 1;
text-align: left;
cursor: pointer;
transition: background-color 0.15s ease;
}
.nuke-container .nuke-nav-item:hover {
/* x.com's exact nav-hover wash (10% ink on white). */
background-color: rgba(15, 20, 25, 0.1);
}
.nuke-container .nuke-nav-icon {
flex-shrink: 0;
font-size: 26px;
line-height: 1;
}
.nuke-container .nuke-nav-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active route — bold label (the icon's filled variant is set in the markup via
`ph-fill`). */
.nuke-container .nuke-nav-item.is-active {
font-weight: 700;
}
/* Brand logo — a circular icon button at the top, glyph centered. The 50px box +
4px left margin lines the glyph's center up with the nav items' icon centers
(placeholder mark; swap for a real logo asset later). */
.nuke-container .nuke-nav-logo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 50px;
height: 50px;
margin: 8px 0 2px 0;
border: none;
background: none;
border-radius: 9999px;
color: #0F1419;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
/* Primary "Post" button — x.com's filled, rounded-full accent button. Stretches
to the rail width (minus margins) since `.nuke-nav` is a stretch flex column. */
/* Account chip — pinned to the BOTTOM of the rail (margin-top:auto eats the free
space above it). Avatar + name/@handle + a trailing ··· , in a rounded hover
pill. Populated by renderNukeUserCard via `.nuke-profile-card-header`. */
/* Avatar uses the site's standard pfp chrome — gloss/rim + 28% rounded corners
via `.cc-pfp-wrapper` + `.nuke-post-pfp` (40px), same as the message and chat
header avatars — instead of a plain circle. Just guard it from flex-shrinking. */
/* Live game stats in the rail (nuke countdown + global DPR) — styled exactly like
the nav links (icon + label, same size/weight), just informational: no hover
wash, no pointer. Populated live by initNukeNav(). */
.nuke-container .nuke-nav-item-static {
cursor: default;
}
.nuke-container .nuke-nav-item-static:hover {
background: none;
}
/* Tabular figures so the ticking countdown doesn't wobble its width. */
.nuke-container .nuke-nav-timer-value {
font-variant-numeric: tabular-nums;
}
.nuke-container .nuke-side-right {
/* RIGHT column of the trio (Shop + Season Pass + notebook): a gap to the right
of the wider centered middle (chat) column. The pills + search headers sit
above it; no XP bar here, so it runs to the very bottom. */
left: calc(50% + var(--chat-w) / 2 + var(--col-gap));
right: auto;
width: var(--right-col-w);
bottom: 0;
/* Inset the shop / notebook content from the column edges (column width
unchanged — border-box). Matches the search bar's inset. */
padding-left: var(--right-inset);
padding-right: var(--right-inset);
}
/* --- Nuke stage tab content panes ------------------------------ */
.nuke-container .nuke-tab-pane {
position: absolute;
inset: 0;
overflow: auto;
padding: 12px;
}
.nuke-container .nuke-tab-pane.hidden {
display: none;
}
/* Profile pane: flex column hosting the centered full profile card. */
.nuke-container .nuke-tab-pane[data-tab-pane="1"] {
display: flex;
flex-direction: column;
padding: 0;
}
/* --- Notebook paper widget (right column, below shop) ---------- */
/* Base notebook box — establishes the positioning context for the absolutely
positioned paper/canvas/content layers, the container-query context (every
notebook dimension below is in `cqw`), and the ruled-line pitch variables. */
.nuke-container .nuke-notebook {
flex: 1;
min-height: 0;
position: relative;
container-type: inline-size;
/* Ruled-line pitch — single source of truth for the paper's blue lines AND
the mission text line-height, so every line of text rests on a rule. */
--rule: 7.0625cqw;
/* Vertical nudge so text baselines sit just on top of the rules (tuned). */
--rule-rest: 1.3cqw;
}
/* Notebook in the RIGHT column below the shop — fills the column width like the
other containers there, at a fixed height. */
.nuke-container .nuke-side-right .nuke-notebook {
width: 100%;
flex: 0 0 400px; /* fixed height (was 40% of the column) */
min-height: 0;
}
.nuke-container .nuke-notebook-inner {
position: absolute;
inset: 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.06));
}
.nuke-container .nuke-notebook-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: url('/img/cursors/pencil.png') 5 18, crosshair !important;
touch-action: none;
filter: url(#fibrous-tear);
mask-image:
radial-gradient(circle at 7.8125cqw 20%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 50%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 80%, transparent 3.4375cqw, black 3.4375cqw);
mask-composite: intersect;
-webkit-mask-image:
radial-gradient(circle at 7.8125cqw 20%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 50%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 80%, transparent 3.4375cqw, black 3.4375cqw);
-webkit-mask-composite: source-in;
}
.nuke-container .nuke-notebook-paper {
position: absolute;
inset: 0;
}
/* All the paper visuals — crumple/tear filter, cream fill, noise, ruled lines,
red margin, binder-hole mask — live on this layer BEHIND the text. Keeping the
filter off .nuke-notebook-paper itself means it no longer cascades to the
.nuke-notebook-content child, so the mission text stays crisp/undistorted while
the paper keeps its crinkle. */
.nuke-container .nuke-notebook-paper::before {
content: '';
position: absolute;
inset: 0;
/* Match the avatar/reply roundedness — shared --pfp-radius. (Was 3.75cqw.) */
border-radius: var(--pfp-radius);
border: 1px solid #EBDFA8;
filter: url(#fibrous-tear);
background-color: #FFFFE1;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
linear-gradient(90deg, transparent 18.75cqw, rgba(232, 135, 135, 0.5) 18.75cqw, rgba(232, 135, 135, 0.5) 19.0625cqw, transparent 19.0625cqw),
repeating-linear-gradient(180deg, transparent, transparent calc(var(--rule) - 1px), rgba(123, 163, 194, 0.3) calc(var(--rule) - 1px), rgba(123, 163, 194, 0.3) var(--rule));
background-size: 100% 100%, 100% 100%, 100% 100%;
background-position: 0 0, 0 0, 0 0;
mask-image:
radial-gradient(circle at 7.8125cqw 20%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 50%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 80%, transparent 3.4375cqw, black 3.4375cqw);
mask-composite: intersect;
-webkit-mask-image:
radial-gradient(circle at 7.8125cqw 20%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 50%, transparent 3.4375cqw, black 3.4375cqw),
radial-gradient(circle at 7.8125cqw 80%, transparent 3.4375cqw, black 3.4375cqw);
-webkit-mask-composite: source-in;
}
.nuke-container .nuke-notebook-content {
position: relative;
width: 100%;
height: 100%;
/* Top padding = 2 rules so the first line starts on the grid; bottom padding
clears the snapped footer cell (its top edge = --footer-bottom + one rule). */
padding: calc(var(--rule) * 2) 6.25cqw calc(var(--footer-bottom, calc(var(--rule) * 1.5)) + var(--rule) + 1cqw) 20cqw;
display: flex;
flex-direction: column;
/* If the list ever outgrows the paper (short viewport, many wrapped rows),
scroll inside the paper rather than spilling rows/footer onto the window
below. */
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
font-family: var(--font-conduit);
color: #2d3748;
/* 12px = the page's canonical list/UI text size (.nuke-row-name); the .nuke
subtree runs at an 11px base under zoom, so the old 16px was an anomaly. */
font-size: 14px;
box-sizing: border-box;
}
.nuke-container .nuke-notebook-row {
display: flex;
align-items: flex-start;
gap: 2.5cqw;
/* No vertical padding/min-height: each row is sized purely by its text, whose
line-height equals one rule — so single- and multi-line rows both stay on
the ruled grid and a wrapped description just occupies the next rule. */
position: relative;
}
.nuke-container .nuke-notebook-check {
position: absolute;
/* In the red-margin gutter, clear of the binder holes. Absolute + top-anchored
to the (flex-start) row means it always sits in the task's top-left corner
and never drifts when the description wraps to a second line. */
left: -8cqw;
/* Track the text's baseline nudge so the box stays centered on its line. */
top: calc(var(--rule-rest) + 1cqw);
width: 4.6cqw;
height: 4.6cqw;
border: 0.7cqw solid rgba(74, 85, 104, 0.7);
border-radius: 1.5cqw;
transform: rotate(-2deg);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.nuke-container .nuke-notebook-check--checked {
border-color: rgba(25, 39, 66, 0.7);
transform: rotate(1deg);
}
.nuke-container .nuke-notebook-check--checked::after {
content: '';
position: absolute;
left: 30%;
top: 5%;
width: 35%;
height: 75%;
border-right: 2px solid rgba(25, 39, 66, 0.85);
border-bottom: 2px solid rgba(25, 39, 66, 0.85);
transform: rotate(40deg);
}
.nuke-container .nuke-notebook-text {
flex: 1 1 auto;
min-width: 0;
/* One rule per line of text + a small downward nudge so the baseline rests on
the printed rule (writing-on-lined-paper). translateY keeps every wrapped
line shifted by the same amount, so they all stay registered. */
line-height: var(--rule);
transform: translateY(var(--rule-rest));
overflow-wrap: anywhere;
}
.nuke-container .nuke-notebook-text--done {
text-decoration: line-through;
text-decoration-color: rgba(239, 68, 68, 0.7);
text-decoration-thickness: 2px;
}
/* Active-mission grant progress (e.g. "1/3"). flex-shrink:0 + nowrap keep it
fully visible; align-self:flex-start pins it beside the first text line so it
stays top-right even when the description wraps. Spacing comes from the row's
gap, not padding. */
.nuke-container .nuke-notebook-badge {
margin-left: auto;
align-self: flex-start;
font-size: 12px;
/* Match the text's rule height + baseline nudge so it lines up with line 1. */
line-height: var(--rule);
transform: translateY(var(--rule-rest));
color: #7a8aa0;
white-space: nowrap;
flex-shrink: 0;
}
/* Exhausted-group + cap-locked missions read muted / italic. */
.nuke-container .nuke-notebook-item--exhausted .nuke-notebook-text,
.nuke-container .nuke-notebook-item--locked .nuke-notebook-text {
color: #9aa5b1;
font-style: italic;
}
/* Quest-streak + reset-countdown footer. It sits ABOVE the drawing canvas (so
its clear button is clickable and it never scrolls away with the rows),
pinned to the bottom of the paper. pointer-events:none lets you keep drawing
through the streak/timer text — only the clear button re-enables clicks. */
.nuke-container .nuke-notebook-footer {
position: absolute;
left: 0;
right: 0;
/* --footer-bottom is set by snapNukeNotebookFooter() (JS) so this one-rule
cell's bottom edge lands exactly on a blue rule — the streak then rests on
the grid like the missions instead of floating between lines. */
bottom: var(--footer-bottom, calc(var(--rule) * 1.5));
height: var(--rule);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2cqw;
/* padding-left:20cqw keeps the streak aligned under the mission-text column. */
padding: 0 6.25cqw 0 20cqw;
font-size: 12px;
pointer-events: none;
}
/* Streak + timer use the mission text's rule rhythm so their baseline rests on
the cell's bottom rule, matching the rows above. */
.nuke-container .nuke-notebook-streak,
.nuke-container .nuke-notebook-timer {
line-height: var(--rule);
transform: translateY(var(--rule-rest));
white-space: nowrap;
}
.nuke-container .nuke-notebook-streak {
font-weight: 700;
color: #c2410c;
}
.nuke-container .nuke-notebook-timer {
color: #7a8aa0;
text-align: right;
}
/* Always-present eraser button in the left margin gutter, to the left of the
streak. Eraser glyph via mask so the TS/HTML stays a plain