/* ============================================ SPITE Theme Tokens Loaded FIRST so vars are available to every other stylesheet. Dark mode activates via . ============================================ */ :root { /* Page surfaces */ --bg: #faebd7; /* antiquewhite page background (parchment) */ --bg-card: #f5e6d3; /* post / card background */ --bg-card-alt: #f5ece0; /* persona cards, quote block bg */ --bg-quote: #f5ece0; /* quoted parent-context block */ --bg-chip: #e8dcc8; /* small pills / badges / parent-comment */ --bg-sidebar: #ebd9bd; /* left/right sidebars - darker than --bg for contrast */ --bg-input: #ffffff; /* form fields — whiter than the card on parchment */ /* Borders */ --border: #d4c4a8; --border-strong: #8b7b6b; /* Text */ --text: #2b2926; --text-strong: #111; --text-muted: #6f6253; /* darkened from #8b7b6b — item 3.2 contrast */ --text-link: #006400; /* Accents */ --accent-persona: #6b4fc4; /* darker violet — legible for action items on parchment (item 7) */ --accent-persona-bg: rgba(107, 79, 196, 0.08); --accent-danger: #c9182b; --accent-warning: #d4a017; --accent-reply: #0d49bb; /* primary action blue (used for sidebar post pill, persona-reply chrome, links) */ --accent-fire: #ff4500; /* Inverted surfaces (the "dark stat box" that stays dark in both themes) */ --bg-inverted: #18120d; --text-inverted: #f0e6d2; --border-inverted: #3a2d20; /* Fonts */ --font-serif: 'Crimson Text', Georgia, serif; --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; } [data-theme="dark"] { /* Near-black with a faint violet warmth — off the old brown (item 11) but NOT clinical cool-grey (the "imessage/instagram dark mode" read). Card steps up so feed items are discrete; quote steps down so insets recede. */ --bg: #18161c; --bg-card: #211e26; /* feed card — visibly above the page */ --bg-card-alt: #27242e; --bg-quote: #1c1a20; /* parent-quote inset — recedes below the card */ --bg-chip: #2a2731; --bg-sidebar: #131116; /* darker than --bg so sidebars read as distinct */ --bg-input: #1a181f; /* form fields — slightly below the card */ --border: #46424f; /* a real visible edge, faintly violet */ --border-strong: #645f70; --text: #ece9f0; /* off-white, faint cool-violet */ --text-strong: #ffffff; --text-muted: #9a93a6; /* higher contrast than the old brown muted */ --text-link: #c9bce6; /* pale violet — a link, NOT tech-blue */ --accent-persona: #9b86e8; /* the one chromatic accent in dark — violet, a little menacing */ --accent-persona-bg: rgba(155, 134, 232, 0.14); --accent-danger: #e08585; --accent-warning: #d9b15a; --accent-reply: #4a82f0; /* primary action blue, dark-mode tint — same blue family as parchment's #0d49bb, lifted for contrast against the near-black bg */ --accent-fire: #d97a4a; /* In dark mode, lighten the inverted box so it still reads as "a card" */ --bg-inverted: #231a12; --text-inverted: #f0e6d2; --border-inverted: #4a3a2a; } /* =============================================== Palette — thinned from the 8-color Lucky Charms set to a deliberate few. Two pops + gold + dim red. The persona accent (--accent-persona) stays violet on purpose — that's the *persona* signal. Everything else that used to be "incidentally purple" is now royal blue: punchier on charcoal, reads as a deliberate choice instead of the default purple wash. =============================================== */ :root { --royal-blue: #2b56ff; /* bright royal — the site's new chromatic pop */ --royal-blue-deep: #1a3acc; /* deeper end for gradients + hover/active surfaces */ --accent-flash: #ff3a90; /* hot magenta — second-offset for layered drop shadows */ } [data-theme="dark"] { --royal-blue: #4a78ff; /* lifted for charcoal contrast */ --royal-blue-deep: #2851d6; --accent-flash: #ff5fa6; } :root, [data-theme="dark"] { --candy-grape: #8b7fd9; /* primary pop — the persona violet */ --candy-sky: var(--royal-blue); --candy-sun: #c9a94e; /* muted gold — star fills */ --candy-cherry: #c0504a; /* dim red — danger, used sparingly */ /* The cereal colors fold onto the set above so existing call sites flatten instead of rainbowing. */ --candy-pink: var(--royal-blue); --candy-mint: var(--royal-blue); --candy-tang: #c9a94e; --candy-teal: var(--royal-blue); } /* In dark, drop the old folded-violet — every incidental candy slot now resolves to royal blue. --accent-persona stays violet so the persona-specific surfaces still read as persona. */ [data-theme="dark"] { --candy-grape: var(--royal-blue); } /* Sidebar wordmark (replaces the image logo) */ .sidebar-wordmark, .sidebar-wordmark:hover, .sidebar-wordmark:focus, .sidebar-wordmark:active { text-decoration: none; } .sidebar-wordmark { display: block; text-align: center; margin: 12px 0 20px; line-height: 1; } .sidebar-wordmark-main { display: block; font-family: 'Princess Sofia', 'Prata', serif; font-size: 3.4em; color: var(--text); letter-spacing: 1px; text-shadow: 2px 2px 0 var(--royal-blue), 4px 4px 0 var(--accent-flash); transition: text-shadow 0.2s; } .sidebar-wordmark-sub { display: block; font-family: var(--font-display); font-size: 0.9em; font-weight: 700; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; margin-top: 6px; } .sidebar-wordmark:hover .sidebar-wordmark-main { text-shadow: 2px 2px 0 var(--accent-flash), 4px 4px 0 var(--royal-blue); } /* Cycle candy colors for persona cards / star fills */ .candy-slot-1 { color: var(--candy-pink); } .candy-slot-2 { color: var(--candy-mint); } .candy-slot-3 { color: var(--candy-sun); } .candy-slot-4 { color: var(--candy-sky); } .candy-slot-5 { color: var(--candy-grape); } .candy-slot-6 { color: var(--candy-tang); } .candy-slot-7 { color: var(--candy-teal); } .candy-slot-8 { color: var(--candy-cherry); } /* =============================================== Candy color sprinkles across the UI =============================================== */ /* AI label badge — grape glow */ .ai-label { background: var(--candy-grape) !important; color: #fff !important; border-color: transparent !important; text-shadow: 0 0 6px rgba(194, 159, 255, 0.4); } /* Persona name links: candy shadow on hover, no underline */ a.persona-name, a.persona-name:hover, a.persona-name:focus, a.persona-name:active { text-decoration: none; } a.persona-name:hover { text-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent); } /* Star button fill on active/spamming */ .feed-persona-btn:active .thread-icon-star { fill: var(--candy-sun); stroke: var(--candy-sun); } /* Thread quote blocks: subtle candy left-accent (using the persona tint system) */ .thread-quote-persona { background: linear-gradient(90deg, rgba(194, 159, 255, 0.08) 0%, transparent 40%), var(--bg-card-alt); } /* Post title links: use the primary action blue in BOTH themes so post titles read as the single site-wide blue. Parchment previously had no rule and fell back to browser-default anchor blue. */ .post-title a { color: var(--accent-reply); } .post-title a:hover { text-shadow: 0 0 12px rgba(13, 73, 187, 0.35); } /* Copy-link toast: candy mint */ .copy-link-toast { background: var(--candy-mint) !important; color: #1a1410 !important; } /* Action bar reply icon: sky on hover */ .thread-action-icon.reply-btn:hover .thread-icon { stroke: var(--candy-sky) !important; } /* Feed-star combo badge: candy tang instead of flat purple */ .feed-combo { background: var(--candy-tang) !important; } /* Sidebar persona card star button */ .sidebar-section .persona-feed-btn { color: var(--candy-sun); } /* Thread quote author handles (@names in the inset): the site royal blue. */ .thread-quote-author { color: var(--accent-reply) !important; } /* AI disclaimer: candy grape for persona voice */ .ai-disclaimer em { color: var(--candy-grape); } /* Profile tabs active underline: candy gradient */ .profile-tab-btn.active { border-bottom-color: var(--candy-grape); } .persona-tabs .tab-button.active { border-bottom-color: var(--candy-grape); } /* Settings theme toggle: candy border when selected */ .theme-option[aria-pressed="true"] { border-color: var(--candy-grape); background: rgba(194, 159, 255, 0.08); } /* =============================================== Candy: heavy pass — Lucky Charms / Mario Galaxy =============================================== */ /* Post titles inherit the universal .post-title a rule above (uses var(--accent-reply)) so the blue is consistent across both themes. */ /* Thread lines: candy gradient instead of flat tan */ .thread-line { background: linear-gradient( to bottom, var(--candy-grape), var(--candy-sky), var(--candy-mint) ) !important; opacity: 0.4; } /* Post item borders: subtle candy tint */ .post.item { border-bottom-color: var(--border); border-top-color: var(--border); } [data-theme="dark"] .post.item { border-bottom: 1px solid rgba(194, 159, 255, 0.12); border-top: 1px solid rgba(194, 159, 255, 0.12); } /* Persona reply cards: candy glow in dark mode */ [data-theme="dark"] .persona-reply { box-shadow: inset 0 0 0 1px rgba(194, 159, 255, 0.08); } /* Persona name handles: use the site royal blue everywhere they appear as the byline @-handle. The previous inline style="color: ghost primary_color" on each template has been removed; the per-persona color now only lives on the ascended-badge (retweet-style brand cue), not on identity bylines. */ a.persona-name, .persona-name { color: var(--accent-reply); font-style: normal; transition: text-shadow 0.15s, color 0.15s; } /* Thread quote blocks: candy tint by type */ [data-theme="dark"] .thread-quote { background: rgba(111, 225, 165, 0.06); border: 1px solid rgba(111, 225, 165, 0.1); } /* Post author names: candy teal in dark mode */ [data-theme="dark"] .post-author a { color: var(--candy-teal); } /* Section headers: candy underline */ .sidebar-section-header { border-bottom-color: var(--candy-grape) !important; } /* Mobile nav items: candy hover */ .mobile-nav-item:hover, .mobile-nav-item:active { color: var(--candy-grape) !important; } /* Sidebar profile mini card: candy star */ .sidebar-stars { color: var(--candy-sun) !important; } /* Feed persona button: candy pulse ring on feed */ .feed-persona-btn:active { box-shadow: 0 0 0 4px rgba(255, 216, 95, 0.3); } /* Persona profile header: candy gradient underline */ .persona-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--candy-grape), var(--candy-sky), var(--candy-mint), var(--candy-sun)) 1; } /* Persona profile stat values: candy colors cycling */ .persona-stats-row .stat-item:nth-child(1) .stat-value { color: var(--candy-grape); } .persona-stats-row .stat-item:nth-child(2) .stat-value { color: var(--candy-sky); } .persona-stats-row .stat-item:nth-child(3) .stat-value { color: var(--candy-mint); } /* Tab buttons: candy hover */ .tab-button:hover, .profile-tab-btn:hover { color: var(--candy-grape); } /* Equity table: candy header */ .equity-table thead th { color: var(--candy-teal); } /* Activity items: candy type badges */ .activity-type-badge { border-radius: 3px; padding: 1px 5px; font-size: 0.7em; font-weight: 700; letter-spacing: 0.5px; } /* Sidebar left nav: layered drop shadow — royal blue first offset, hot magenta behind it. Replaces the gold (candy-sun) shadow which read as "default primary-color glow" next to the new royal blue. */ .sidebar-left-nav a:not(.sidebar-login-link) { text-shadow: 2px 2px 0 var(--royal-blue), 4px 4px 0 var(--accent-flash); } /* Login button: flat, no text-shadow */ .sidebar-left-nav a.sidebar-login-link { text-shadow: none !important; } /* Selection highlight: candy grape */ ::selection { background: rgba(194, 159, 255, 0.3); color: inherit; } /* Focus rings: candy sky */ :focus-visible { outline: 2px solid var(--candy-sky); outline-offset: 2px; } /* ============================================ Notification count badge ============================================ */ .notif-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--candy-cherry); color: #fff; font-size: 10px; font-weight: 700; font-family: var(--font-display); border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; box-shadow: 0 0 0 2px var(--bg-inverted); } /* Hide the badge when empty (count is 0) */ .notif-badge:empty { display: none; } /* Anchor parents so the badge positions correctly */ .sidebar-btn-icon-wrap, .mobile-nav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; } /* ============================================ Sidebar Site-Star Counter (under the wordmark) ============================================ */ .sidebar-site-stars { display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px; padding: 0 4px; color: var(--text-muted); font-family: var(--font-serif); font-size: 0.85em; } .sidebar-site-stars-glyph { color: var(--candy-sun, #ffd85f); line-height: 1; } .sidebar-site-stars-value { font-variant-numeric: tabular-nums; color: var(--text); } /* ============================================ Sidebar Hint — spare. One italic line, no chrome. Click to roll a new one. ============================================ */ .sidebar-hint-box { margin: 0 0 12px; padding: 10px 4px; border-top: 1px solid var(--border, rgba(232, 224, 207, 0.15)); } .sidebar-hint-text { display: block; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 0.9em; line-height: 1.45; color: var(--text-muted, rgba(232, 224, 207, 0.55)); text-decoration: none; cursor: pointer; } .sidebar-hint-text:hover { color: var(--text, #e8e0cf); text-decoration: none; } /* Bottom-anchored variant in the left sidebar: - margin-top:auto pushes it to the end of the flex column - smaller text + no word-breaking per design ask */ .sidebar-hint-box--bottom { margin-top: auto; } .sidebar-hint-box--bottom .sidebar-hint-text { font-size: 0.82em; line-height: 1.35; word-break: keep-all; overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; } /* Hide the whole hint widget when the text response is empty (FastAPI down). */ .sidebar-hint-box:has(.sidebar-hint-text:empty) { display: none; } .welcome-hint:empty { display: none; } /* ============================================ Post FAB (floating pencil in bottom-right) ============================================ */ .post-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--candy-grape); color: var(--text-inverted); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(147, 112, 219, 0.4); transition: transform 0.15s, box-shadow 0.15s, background 0.15s; z-index: 1000; } .post-fab:hover { transform: scale(1.08) rotate(-6deg); background: var(--candy-pink); box-shadow: 0 8px 24px rgba(255, 122, 182, 0.5); } .post-fab:active { transform: scale(0.95); } /* Desktop replaces the FAB with the high-contrast Post pill in the left sidebar (#sidebar-new-post). Hide the floating pencil there so there's only one primary post affordance per viewport. */ @media (min-width: 1101px) { .post-fab { display: none !important; } } .post-fab .thread-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; } /* Bump above mobile bottom nav when visible */ @media (max-width: 1100px) { .post-fab { bottom: 72px; right: 16px; } } /* Quote block title in dark mode: plain white. The old candy gradient collapsed to solid purple once the dark theme folded candy-sky/mint to the accent, making the title indistinguishable from the author line above it. */ [data-theme="dark"] .thread-quote-title { background: none; -webkit-text-fill-color: var(--text); color: var(--text); } /* Feed persona button hover: candy glow */ .feed-persona-btn:hover .thread-icon-star { stroke: var(--candy-sun) !important; filter: drop-shadow(0 0 4px var(--candy-sun)); } /* Link icon hover: candy mint */ .copy-link:hover .thread-icon { stroke: var(--candy-mint) !important; } /* Scrollbar thumb in dark mode: candy grape */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--candy-grape); } /* Apply globally at root */ html, body { background-color: var(--bg); color: var(--text); } /* Body text keeps the literary serif; UI chrome uses chunky sans */ body { font-family: var(--font-serif); } h1, h2, h3, h4, h5, h6, .sidebar-btn, .thread-action-icon, .thread-action-count, .tab-btn, .tab-button, .btn-primary, .btn-secondary, .reply-submit-btn, .persona-name, .ai-label, .thread-quote-author, .thread-quote-title, .profile-tab-btn, .section-header, nav, .mobile-nav-item { font-family: var(--font-display); } /* Post/comment body content stays serif for readability */ .post-content, .comment-content, .thread-body, .thread-quote-body { font-family: var(--font-serif); } /* Smooth background swap when toggling */ html, body, .post.item, .thread-op, .thread-item, .thread-quote, .comment-content { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }