/* Sweet Scales - design tokens + shared components. * Stage 4 built the candy token system; Stage 5 (2026-07-12 design ruling) * re-anchors the design on main.dinoden.gg: DARK is the default — near-black * field, HUD chrome (uppercase letterspaced labels, corner brackets, subtle * noise), Rajdhani type, card grids with category chips. Sweet Scales keeps * its own brand hues in the dinoden roles: lollipop pink is THE accent, * deep teal the second, ember orange for event chips. * The candy LIGHT theme keeps its Stage-4 values one toggle away: * set by sweet-theme.js (localStorage > dark). * Fonts are SELF-HOSTED (no hotlinks). Load THIS file before topbar.css and * page styles: they consume the tokens. */ @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/rajdhani-500-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/rajdhani-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/rajdhani-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- tokens: DARK is the default (dinoden ruling) ---------- */ :root { /* --sw-serif kept as the DISPLAY slot name (pages consume it) — it now * carries the Rajdhani display stack, not an actual serif. */ --sw-serif: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --sw-sans: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --sw-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --sw-ease: cubic-bezier(.22, .61, .36, 1); --sw-bg: #0B0D11; --sw-bg-2: #0E1116; --sw-panel: #12151C; --sw-panel-2: #161A22; --sw-ink: #E9EEF4; --sw-ink-2: #A7B3C0; --sw-ink-3: #6B7885; --sw-hair: rgba(233, 238, 244, .14); --sw-hair-2: rgba(233, 238, 244, .07); --sw-pink: #F073AC; --sw-pink-soft: #F8A5C2; --sw-teal: #39B3C6; --sw-teal-deep: #2A8A99; --sw-orange: #F59E4B; --sw-accent: #F073AC; --sw-accent-2: #39B3C6; --sw-accent-ink: #180810; --sw-wash-pink: rgba(240, 115, 172, .10); --sw-wash-teal: rgba(57, 179, 198, .10); --sw-shadow: 0 18px 44px -18px rgba(0, 0, 0, .65); --sw-nav-bg: rgba(11, 13, 17, .90); --sw-nav-sheet: rgba(11, 13, 17, .98); --sw-ok: #58C58B; --sw-warn: #D9A93F; --sw-bad: #E06C5B; /* rgb triplets for alpha ramps in derived stylesheets (_shared.css). */ --sw-ink-rgb: 233, 238, 244; --sw-accent-rgb: 240, 115, 172; --sw-warm-rgb: 224, 108, 91; --sw-warn-rgb: 217, 169, 63; --sw-glass: rgba(255, 255, 255, .055); --sw-glass-2: rgba(255, 255, 255, .035); --sw-glass-border: rgba(233, 238, 244, .13); /* nav hover-label pill (topbar Option A) */ --sw-tip-bg: #1A1F28; --sw-tip-ink: #F2F5F9; --sw-tip-border: rgba(233, 238, 244, .14); } /* ---------- tokens: candy LIGHT (the Stage-4 look, one toggle away) ------- */ :root[data-theme="light"] { --sw-bg: #FBF6EE; --sw-bg-2: #F5EDE0; --sw-panel: #FFFFFF; --sw-panel-2: #FDF9F2; --sw-ink: #1D3A4C; --sw-ink-2: #466173; --sw-ink-3: #7E92A0; --sw-hair: rgba(29, 58, 76, .16); --sw-hair-2: rgba(29, 58, 76, .08); --sw-pink: #E85D9E; --sw-pink-soft: #F8A5C2; --sw-teal: #2A7F8E; --sw-teal-deep: #1F6472; --sw-orange: #D97B2E; --sw-accent: #E85D9E; --sw-accent-2: #2A7F8E; --sw-accent-ink: #FFFFFF; --sw-wash-pink: rgba(232, 93, 158, .09); --sw-wash-teal: rgba(42, 127, 142, .08); --sw-shadow: 0 18px 44px -20px rgba(29, 58, 76, .28); --sw-nav-bg: rgba(251, 246, 238, .88); --sw-nav-sheet: rgba(251, 246, 238, .98); --sw-ok: #2E8B57; --sw-warn: #B8860B; --sw-bad: #C0392B; --sw-ink-rgb: 29, 58, 76; --sw-accent-rgb: 42, 127, 142; --sw-warm-rgb: 192, 57, 43; --sw-warn-rgb: 184, 134, 11; --sw-glass: rgba(255, 255, 255, .72); --sw-glass-2: rgba(255, 255, 255, .5); --sw-glass-border: rgba(29, 58, 76, .14); --sw-tip-bg: #FFFFFF; --sw-tip-ink: #1D3A4C; --sw-tip-border: rgba(29, 58, 76, .16); } /* ---------- base ---------- */ .sw-page { margin: 0; background: var(--sw-bg); color: var(--sw-ink); font-family: var(--sw-sans); font-weight: 500; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .35s var(--sw-ease), color .35s var(--sw-ease); } .sw-page ::selection { background: var(--sw-wash-pink); } .sw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 44px); } .sw-display { font-family: var(--sw-serif); font-weight: 700; letter-spacing: .015em; line-height: 1.08; color: var(--sw-ink); margin: 0; } .sw-display em { font-style: normal; color: var(--sw-pink); } .sw-display strong { font-weight: 700; color: var(--sw-teal); } /* Section label, dinoden-style: an accent dash then spaced uppercase. */ .sw-kicker { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--sw-accent); margin: 0 0 14px; } .sw-kicker::before { content: ""; width: 34px; height: 2px; background: var(--sw-accent); opacity: .9; flex: none; } .sw-kicker.plain { color: var(--sw-ink-3); } .sw-kicker.plain::before { background: var(--sw-ink-3); } .sw-lede { color: var(--sw-ink-2); font-size: 16.5px; max-width: 62ch; font-weight: 500; } /* ---------- panels + cards ---------- */ .sw-card { background: var(--sw-panel); border: 1px solid var(--sw-hair-2); border-radius: 12px; padding: 24px 26px; box-shadow: var(--sw-shadow); transition: border-color .25s var(--sw-ease), transform .25s var(--sw-ease), box-shadow .25s var(--sw-ease); } .sw-card.tinted { background: linear-gradient(160deg, var(--sw-panel) 55%, var(--sw-panel-2)); } .sw-card.hover:hover { border-color: rgba(var(--sw-accent-rgb), .45); transform: translateY(-3px); box-shadow: var(--sw-shadow), 0 0 22px -6px rgba(var(--sw-accent-rgb), .28); } .sw-card h3 { font-family: var(--sw-serif); font-weight: 700; font-size: 19px; letter-spacing: .01em; margin: 0 0 8px; } .sw-card .meta { font-size: 12px; color: var(--sw-ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .sw-hairline { border: 0; border-top: 1px solid var(--sw-hair-2); margin: 0; } /* HUD corner brackets (hero blocks, featured cards). */ .sw-corners { position: relative; } .sw-corners::before, .sw-corners::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: .55; } .sw-corners::before { top: 10px; left: 10px; border-top: 2px solid var(--sw-accent); border-left: 2px solid var(--sw-accent); } .sw-corners::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--sw-accent); border-right: 2px solid var(--sw-accent); } /* Static sensor-noise wash, dark theme only (a texture, not an animation). */ .sw-noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .35) 2px 3px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(255, 255, 255, .18) 3px 4px); background-size: 100% 4px, 4px 100%; mix-blend-mode: overlay; } :root[data-theme="light"] .sw-noise { display: none; } /* Terminal status strip (home hero). */ .sw-term { font-family: var(--sw-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--sw-ink-3); display: flex; flex-wrap: wrap; gap: 6px 22px; } .sw-term .ok { color: var(--sw-ok); font-weight: 600; } .sw-term .warn { color: var(--sw-warn); font-weight: 600; } /* Category chips (news/events/quests cards). */ .sw-chip { display: inline-flex; align-items: center; font-family: var(--sw-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 4px; padding: 4px 10px; color: #10151B; background: var(--sw-teal); } .sw-chip.event { background: var(--sw-orange); } .sw-chip.quest { background: var(--sw-pink); } .sw-chip.muted { background: var(--sw-panel-2); color: var(--sw-ink-3); border: 1px solid var(--sw-hair-2); } /* Quest progress bar. */ .sw-progress { height: 8px; border-radius: 999px; background: var(--sw-hair-2); overflow: hidden; } .sw-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sw-pink), var(--sw-teal)); transition: width .4s var(--sw-ease); } .sw-progress.done > span { background: var(--sw-ok); } /* ---------- buttons ---------- */ .sw-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sw-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--sw-hair); border-radius: 8px; padding: 10px 20px; color: var(--sw-ink); background: transparent; text-decoration: none; transition: .25s var(--sw-ease); line-height: 1.2; white-space: nowrap; } .sw-btn:hover { border-color: var(--sw-ink-3); background: var(--sw-hair-2); } .sw-btn.solid { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-accent-ink); } .sw-btn.solid:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--sw-accent); } .sw-btn.teal { background: var(--sw-accent-2); border-color: var(--sw-accent-2); color: #0E1116; } .sw-btn.teal:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--sw-accent-2); } .sw-btn.quiet { border-color: transparent; color: var(--sw-ink-2); } .sw-btn.quiet:hover { color: var(--sw-ink); background: var(--sw-hair-2); } .sw-btn:not([disabled]):active { transform: translateY(1px) scale(.985); } .sw-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } :root[data-theme="light"] .sw-btn.teal { color: #FFFFFF; } /* ---------- forms ---------- */ .sw-input, .sw-textarea, .sw-select { width: 100%; box-sizing: border-box; font-family: var(--sw-sans); font-size: 14.5px; font-weight: 500; color: var(--sw-ink); background: var(--sw-panel-2); border: 1px solid var(--sw-hair); border-radius: 8px; padding: 10px 14px; outline: none; transition: border-color .2s; } .sw-input:focus, .sw-textarea:focus, .sw-select:focus { border-color: var(--sw-accent); } .sw-textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .sw-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-3); margin: 14px 0 6px; } /* ---------- pills + badges ---------- */ .sw-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; padding: 5px 12px; background: var(--sw-wash-teal); color: var(--sw-teal); border: 1px solid var(--sw-hair-2); } .sw-pill.pink { background: var(--sw-wash-pink); color: var(--sw-pink); } .sw-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: sw-dot-pulse 2.4s ease-in-out infinite; } /* Gentle "live" heartbeat on status dots (players online, in-preparation, etc.). * currentColor keeps it teal/pink/orange to match each pill. */ @keyframes sw-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 currentColor; } 55% { opacity: .6; transform: scale(.82); box-shadow: 0 0 6px 1px currentColor; } } /* ---------- accents ---------- */ .sw-swirl-rule { height: 3px; border: 0; border-radius: 3px; margin: 0; background: linear-gradient(90deg, var(--sw-pink), var(--sw-pink-soft) 35%, var(--sw-teal) 100%); opacity: .85; } .sw-hero-wash { background: radial-gradient(1100px 420px at 12% -10%, var(--sw-wash-pink), transparent 60%), radial-gradient(900px 380px at 88% -14%, var(--sw-wash-teal), transparent 60%), var(--sw-bg); } /* ---------- footer ---------- */ .sw-footer { border-top: 1px solid var(--sw-hair-2); padding: 34px 0 44px; color: var(--sw-ink-3); font-size: 13px; } .sw-footer a { color: var(--sw-ink-2); text-decoration: none; } .sw-footer a:hover { color: var(--sw-ink); } .sw-footer .cols { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; } .sw-footer nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ---------- community chat v2 (2026-07-16): global room, messages, friends ---------- */ .sw-chat-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 1180; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--sw-hair); border-radius: 8px; background: var(--sw-panel); color: var(--sw-ink-2); font-family: var(--sw-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; box-shadow: var(--sw-shadow); transition: .25s var(--sw-ease); } .sw-chat-toggle:hover { color: var(--sw-ink); transform: translateY(-1px); border-color: rgba(var(--sw-accent-rgb), .5); } .sw-chat-toggle svg { width: 15px; height: 15px; } .sw-chat-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 94vw); z-index: 1190; display: none; flex-direction: column; background: var(--sw-panel); border-right: 1px solid var(--sw-hair); box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35); transform: translateX(-100%); transition: transform .3s var(--sw-ease); } .sw-chat-panel.open { display: flex; transform: none; } .sw-chat-panel .chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sw-hair-2); } .sw-chat-panel .chat-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sw-chat-panel .chat-head h4 { font-family: var(--sw-serif); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-chat-panel .chat-sub { font-size: 11px; color: var(--sw-ink-3); letter-spacing: .04em; } .sw-chat-panel .chat-close, .sw-chat-panel .chat-back { background: none; border: 0; color: var(--sw-ink-3); font-size: 17px; cursor: pointer; padding: 4px 8px; } .sw-chat-panel .dm-actions { display: flex; gap: 6px; } .sw-chat-panel .dm-act { background: none; border: 1px solid var(--sw-hair-2); border-radius: 6px; cursor: pointer; padding: 5px 9px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sw-teal); font-family: var(--sw-sans); } .sw-chat-panel .dm-act.quiet { color: var(--sw-ink-3); } .sw-chat-panel .dm-act:hover:not(:disabled) { border-color: rgba(57, 179, 198, .5); color: var(--sw-teal); } .sw-chat-panel .dm-act:disabled { opacity: .55; cursor: default; } .sw-chat-panel .chat-close:hover, .sw-chat-panel .chat-back:hover { color: var(--sw-ink); } .sw-chat-panel .chat-tabs { display: flex; gap: 8px; padding: 12px 16px 0; } .sw-chat-panel .chat-tab { flex: 1; text-align: center; position: relative; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-3); background: var(--sw-panel-2); border: 1px solid var(--sw-hair-2); border-radius: 6px; padding: 7px 0; } .sw-chat-panel .chat-tab.on { color: var(--sw-teal); border-color: rgba(57, 179, 198, .4); background: var(--sw-wash-teal); } .sw-chat-panel .chat-tab:focus-visible { outline: 2px solid rgba(var(--sw-accent-rgb), .7); outline-offset: 1px; } .sw-chat-toggle .chat-badge, .sw-chat-panel .tab-badge, .sw-chat-panel .person-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sw-pink, #f26fb2); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0; line-height: 1; } .sw-chat-panel .tab-badge { position: absolute; top: -7px; right: -4px; } .sw-chat-toggle .chat-badge[hidden], .sw-chat-panel .tab-badge[hidden], .sw-chat-panel .person-unread[hidden] { display: none; } .sw-chat-panel .chat-conn { margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(var(--sw-warn-rgb, 255, 170, 90), .5); color: var(--sw-ink-2); font-size: 12px; } .sw-chat-panel .chat-conn.ok { border-color: rgba(57, 179, 198, .5); } .sw-chat-panel .chat-body { flex: 1; overflow-y: auto; overflow-anchor: none; scrollbar-gutter: stable; padding: 14px 16px 18px; display: flex; flex-direction: column; color: var(--sw-ink-3); font-size: 13.5px; } .sw-chat-panel .chat-body::-webkit-scrollbar { width: 10px; } .sw-chat-panel .chat-body::-webkit-scrollbar-track { background: transparent; } .sw-chat-panel .chat-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } .sw-chat-panel .chat-body::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .24); } .sw-chat-panel .chat-body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; } .sw-chat-panel .chat-note { border: 1px dashed var(--sw-hair); border-radius: 8px; background: var(--sw-panel-2); padding: 14px 16px; line-height: 1.55; margin-top: 8px; } .chat-flash { border-color: rgba(var(--sw-warn-rgb, 255, 170, 90), .6); } .chat-signin { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--sw-teal); } /* message rows: flat, grouped, gutter-timed */ .chat-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--sw-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .chat-day::before, .chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--sw-hair-2); } .chat-newline { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--sw-pink, #f26fb2); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .chat-newline::before, .chat-newline::after { content: ""; flex: 1; border-top: 1px solid rgba(242, 111, 178, .45); } .chat-msg { position: relative; padding: 2px 4px 2px 40px; border-radius: 6px; margin-top: 10px; } .chat-msg.grouped { margin-top: 0; } .chat-msg:hover { background: rgba(255, 255, 255, .03); } .chat-msg .msg-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .chat-msg .msg-name { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-msg .msg-name.linkable { cursor: pointer; } .chat-msg .msg-name.linkable:hover { text-decoration: underline dotted; text-underline-offset: 3px; } .chat-msg .msg-time { font-size: 10px; color: var(--sw-ink-3); flex: 0 0 auto; } .chat-msg .msg-gutter-time { position: absolute; left: 0; top: 4px; width: 36px; text-align: right; font-size: 9.5px; color: var(--sw-ink-3); opacity: 0; pointer-events: none; } .chat-msg.grouped:hover .msg-gutter-time { opacity: 1; } .chat-msg .msg-body { font-size: 13.5px; line-height: 1.45; color: var(--sw-ink-2); overflow-wrap: anywhere; margin-top: 1px; } .chat-msg .msg-body.pending { opacity: .55; } .chat-msg .msg-body.tomb { color: var(--sw-ink-3); font-style: italic; } .chat-msg .msg-link { color: var(--sw-teal); text-decoration: underline; text-underline-offset: 2px; } .chat-msg .msg-failed { display: flex; align-items: center; gap: 10px; margin-top: 3px; padding-left: 8px; border-left: 2px solid rgba(255, 99, 99, .8); color: var(--sw-ink-3); font-size: 11.5px; } .chat-msg .msg-retry { background: none; border: 0; cursor: pointer; padding: 0; color: var(--sw-teal); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .chat-msg .chat-ava { top: 2px; } /* avatars + presence */ .chat-ava { position: absolute; left: 4px; width: 28px; height: 28px; border-radius: 50%; overflow: visible; flex: 0 0 auto; } .chat-ava img, .chat-ava .ava-fallback { position: absolute; inset: 0; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .chat-ava img { z-index: 1; } .chat-ava .ava-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: color-mix(in srgb, currentColor 16%, transparent); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); } .chat-person .chat-ava { position: relative; left: 0; } .presence-dot { position: absolute; right: -2px; bottom: -2px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #58c6ad; border: 2px solid var(--sw-panel); } /* people rows (conversations, friends, search) */ .chat-person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: var(--sw-panel-2); border: 1px solid var(--sw-hair-2); border-radius: 9px; color: var(--sw-ink-2); font-family: var(--sw-sans); font-size: 13.5px; font-weight: 600; padding: 9px 12px; margin-top: 8px; /* The row keeps its name column readable and drops the button group to its own line when they cannot share one. Three buttons plus a role chip never fit beside a name in the 380px panel. */ flex-wrap: wrap; row-gap: 8px; } .chat-person:hover { border-color: rgba(var(--sw-accent-rgb), .5); color: var(--sw-ink); } .chat-person.dim { opacity: .62; } .chat-person .person-mid { /* A real basis, not 0: below it the buttons take the line instead of shrinking the name to one letter. */ flex: 1 1 8.5rem; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .chat-person .person-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; /* stays right-aligned on its own line */ } .chat-person .person-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .chat-person .person-extra { font-size: 10.5px; color: var(--sw-ink-3); letter-spacing: .04em; flex-basis: 100%; } .chat-person .person-extra.ingame { color: #58c6ad; font-weight: 700; } .chat-person .person-act { flex: 0 0 auto; background: none; border: 1px solid var(--sw-hair-2); border-radius: 6px; cursor: pointer; padding: 5px 9px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sw-teal); } .chat-person .person-act:hover:not(:disabled) { border-color: rgba(57, 179, 198, .5); } .chat-person .person-act.good { color: #7cc385; } .chat-person .person-act.good:hover:not(:disabled) { border-color: rgba(124, 195, 133, .5); } .chat-person .person-act.quiet { color: var(--sw-ink-3); } .chat-person .person-act:disabled { opacity: .55; cursor: default; } .chat-section { margin: 16px 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-ink-3); } .chat-newconv { width: 100%; text-align: center; cursor: pointer; margin-top: 2px; background: none; border: 1px dashed var(--sw-hair); border-radius: 8px; color: var(--sw-teal); font-family: var(--sw-sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 9px 0; } .chat-newconv:hover { border-color: rgba(57, 179, 198, .5); } .sw-chat-panel .chat-search input { width: 100%; font-family: var(--sw-sans); font-size: 13.5px; background: var(--sw-panel-2); color: var(--sw-ink-2); border: 1px solid var(--sw-hair-2); border-radius: 8px; padding: 9px 14px; outline: none; } .sw-chat-panel .chat-search input:focus { border-color: rgba(var(--sw-accent-rgb), .5); } /* jump-to-latest pill */ .sw-chat-panel .chat-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 76px; z-index: 2; background: var(--sw-panel-2); color: var(--sw-teal); border: 1px solid rgba(57, 179, 198, .4); border-radius: 999px; font-family: var(--sw-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; box-shadow: var(--sw-shadow); } /* composer */ .sw-chat-panel .chat-input-row { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--sw-hair-2); } .sw-chat-panel .chat-input-row textarea { flex: 1; resize: none; font-family: var(--sw-sans); font-size: 13.5px; font-weight: 500; line-height: 20px; max-height: 116px; background: var(--sw-panel-2); color: var(--sw-ink-2); border: 1px solid var(--sw-hair-2); border-radius: 8px; padding: 8px 14px; outline: none; } .sw-chat-panel .chat-input-row textarea:focus { border-color: rgba(var(--sw-accent-rgb), .5); } .sw-chat-panel .chat-input-row button { border: 1px solid var(--sw-hair-2); background: var(--sw-panel-2); color: var(--sw-ink-3); border-radius: 8px; padding: 9px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .sw-chat-panel .chat-input-row button:hover:not(:disabled) { color: var(--sw-ink); border-color: rgba(var(--sw-accent-rgb), .5); } .sw-chat-panel .chat-input-row button:disabled, .sw-chat-panel .chat-input-row textarea:disabled { cursor: not-allowed; opacity: .6; } .sw-chat-panel .chat-counter { position: absolute; right: 108px; bottom: 20px; font-size: 10px; font-weight: 700; color: var(--sw-ink-3); pointer-events: none; } .sw-chat-panel .chat-counter.warn { color: rgb(var(--sw-warn-rgb, 255, 170, 90)); } .sw-chat-panel .chat-counter.over { color: #ff6363; } .sw-chat-panel .chat-muted-note { margin: 0 16px 10px; } /* role identity: staff tokens + deterministic member colors (OKLCH L.75 C.11) */ .role-chip { flex: 0 0 auto; display: inline-flex; align-items: center; border-radius: 5px; padding: 1px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .role-chip.owner { color: #e7c368; border: 1px solid rgba(231, 195, 104, .4); } .role-chip.staff { color: var(--sw-teal); border: 1px solid rgba(57, 179, 198, .4); } .msg-name.role-owner, .person-name.role-owner, .ava-fallback.role-owner { color: #e7c368; } .msg-name.role-staff, .person-name.role-staff, .ava-fallback.role-staff { color: var(--sw-teal); } .nc-0 { color: #e9938d; } .nc-1 { color: #e39a62; } .nc-2 { color: #d1a651; } .nc-3 { color: #adb662; } .nc-4 { color: #7cc385; } .nc-5 { color: #58c6ad; } .nc-6 { color: #56c2cf; } .nc-7 { color: #6fb4e8; } .nc-8 { color: #93a7f2; } .nc-9 { color: #b89bee; } .nc-10 { color: #d792dd; } .nc-11 { color: #e78fb4; } @media (max-width: 640px) { .sw-chat-panel { width: 100vw; border-right: 0; } } /* ---------- tables (admin/status/profile lists) ---------- */ .sw-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sw-table th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-ink-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--sw-hair); } .sw-table td { padding: 11px 12px; border-bottom: 1px solid var(--sw-hair-2); color: var(--sw-ink-2); } .sw-table tr:hover td { background: var(--sw-hair-2); } /* ---------- reveal (quiet, respectful of reduced motion) ---------- */ .sw-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--sw-ease), transform .7s var(--sw-ease); } .sw-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sw-reveal { opacity: 1; transform: none; transition: none; } .sw-page, .sw-chat-panel { transition: none; } .sw-pill .dot { animation: none; } .sw-btn:not([disabled]):active, .sw-card.hover:hover { transform: none; } }