API tools faq
paste
cherubyy

ARG HORROR/FOUND FOOTAGE JAI PFP TEMPLATE

cherubyy
Jul 5th, 2026
408
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.12 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--
  2. ============================================================================
  3. PS2 / EARLY 2000S HORROR JAI TEMPLATE FOR THE MASSES <3
  4. ----------------------------------------------------------------------
  5. HOW TO USE THIS FILE (read this before touching anything!)
  6.  
  7. 1. This whole file (the <style> block AND the HTML below it) gets pasted
  8. into the "About Me"/profile customization box on Janitor AI.
  9. Paste the ENTIRE thing: style tag, all the CSS, and all the HTML.
  10.  
  11. 2. Look for comments that say "EDIT ME". those mark the ONLY spots you
  12. need to touch to make this yours (links, text, images, tags).
  13.  
  14. 3. Comments that say "DO NOT TOUCH" are structural CSS/HTML. Editing
  15. these can break the whole layout, so leave them alone unless you know what ur doing pookie.
  16.  
  17. 4. GOLDEN RULE: DO NOT ADD LINE BREAKS OR EXTRA SPACES INSIDE THE
  18. HTML TAGS AT THE BOTTOM OF THIS FILE. it can turn
  19. accidental blank lines/spaces inside a tag into visible broken text
  20. or literal gaps in your layout. When editing text inside a tag,
  21. type directly between the > and < with no new lines. it can and will break ur shit.
  22.  
  23. 5. Every image in this template uses placeholder images
  24. or "LINK_HERE" placeholder links. Swap the URLs, not the surrounding
  25. code (see EDIT ME comments below for exactly which attribute to change).
  26.  
  27. 6. If something looks broken after you edit it, the most common causes
  28. are: (a) you deleted a quotation mark, (b) you added a space/line
  29. break inside a tag, or (c) you removed a closing tag. Undo and try
  30. again slower :D! or... u can dm me on discord (_cheruby) but im not great at responding fast tbh
  31.  
  32. ============================================================================
  33. -->
  34.  
  35. <style>
  36.  
  37. @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
  38.  
  39.  
  40.  
  41. /* ============================================================
  42.  
  43. 1. GLOBAL OVERRIDES & PAGE OVERLAY
  44. (DO NOT TOUCH!! controls the grain/noise texture over the whole page)
  45.  
  46. ============================================================ */
  47.  
  48. * { font-family: 'DotGothic16', sans-serif !important; }
  49.  
  50. .profile-page-background { background: #070806 !important; }
  51.  
  52.  
  53.  
  54. .ps2-static-overlay {
  55.  
  56. position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100;
  57.  
  58. background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.08%22/%3E%3C/svg%3E');
  59.  
  60. opacity: 0.6;
  61.  
  62. }
  63.  
  64.  
  65.  
  66. /* ============================================================
  67.  
  68. 2. LAYOUT/MASTER GRID
  69. (DO NOT TOUCH!! these widths keep the sidebar and main content aligned.
  70. If you change the "330px" numbers, the sidebar and content will overlap.)
  71.  
  72. ============================================================ */
  73.  
  74. .profile-page-flex { flex-direction: column !important; align-items: center !important; }
  75.  
  76. .profile-uc-background-flex { width: 100% !important; max-width: 1200px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto !important; position: relative !important; }
  77.  
  78. .profile-uc-background-flex > div { background: transparent !important; }
  79.  
  80.  
  81.  
  82. .profile-info-hstack,
  83.  
  84. .ps2-custom-layout,
  85.  
  86. .profile-tabs-panels,
  87.  
  88. .profile-about-me + div {
  89.  
  90. width: calc(100% - 330px) !important;
  91.  
  92. margin-left: auto !important;
  93.  
  94. box-sizing: border-box !important;
  95.  
  96. }
  97.  
  98.  
  99.  
  100. /* ============================================================
  101.  
  102. 3. MAIN HEADER (Avatar + Username Box)
  103. (DO NOT TOUCH the CSS below... >:c)
  104.  
  105. ============================================================ */
  106.  
  107. .profile-info-hstack {
  108.  
  109. display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  110.  
  111. background: #0c0e0b !important; border: 2px solid #434c38 !important; padding: 40px 20px 30px 20px !important;
  112.  
  113. box-shadow: 4px 4px 0px #050604 !important; margin-bottom: 25px !important; position: relative; overflow: visible !important;
  114.  
  115. }
  116.  
  117. .profile-info-stack-inner { display: flex !important; flex-direction: column !important; align-items: center !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin-top: 15px !important; }
  118.  
  119.  
  120.  
  121. .profile-avatar-container { width: 160px !important; height: 160px !important; border: 2px solid #434c38 !important; border-radius: 0 !important; position: relative; overflow: visible !important; margin: 0 auto !important; animation: avatarGlitch 6s infinite; }
  122.  
  123. .profile-avatar { border-radius: 0 !important; object-fit: cover; filter: grayscale(0.65) sepia(0.3) hue-rotate(70deg) brightness(0.85) contrast(1.2) !important; }
  124.  
  125. .profile-avatar-container::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.15) 50%, transparent 50%); background-size: 100% 4px; pointer-events: none; z-index: 2; animation: scanlineScroll 10s linear infinite; }
  126.  
  127. /* EDIT ME (optional): this is the hover tooltip that pops up next to your avatar.
  128. Change the text between the quotes after "content:" — keep the \A for line breaks. */
  129. .profile-avatar-container::after { content: ">> RECORD FOUND.\A>> STATUS: UNKNOWN.\A>> EDIT THIS TOOLTIP TEXT..."; white-space: pre-wrap; position: absolute; top: 10%; left: 180px; width: 220px; background: rgba(12, 14, 11, 0.95); border: 1px solid #8d9a78; color: #c5c0ad; font-size: 14px; padding: 12px; text-align: left; opacity: 0; pointer-events: none; z-index: 50; clip-path: inset(0 100% 0 0); }
  130.  
  131. .profile-avatar-container:hover::after { opacity: 1; animation: typeWriter 1.5s steps(30, end) forwards; }
  132.  
  133.  
  134.  
  135. .profile-title-heading { font-size: 3rem !important; color: #c5c0ad !important; text-transform: uppercase; margin-bottom: 5px; display: block !important; width: 100% !important; animation: textGlitch 4s infinite; }
  136.  
  137. @keyframes textGlitch { 0%, 94%, 98%, 100% { text-shadow: 2px 2px 0px #000; transform: skew(0deg); } 95% { text-shadow: 3px 0px 0px rgba(255,92,92,0.8), -3px 0px 0px rgba(127,255,212,0.8); transform: skew(-4deg); } 97% { text-shadow: -3px 3px 0px rgba(255,92,92,0.8), 3px -3px 0px rgba(127,255,212,0.8); transform: skew(2deg); } }
  138.  
  139. @keyframes scanlineScroll { 0% { background-position: 0 0; } 100% { background-position: 0 400px; } }
  140.  
  141. @keyframes avatarGlitch { 0%, 93%, 95%, 100% { opacity: 1; transform: translate(0,0) skew(0deg); filter: none; } 94% { opacity: 0.7; transform: translate(-2px, 1px) skew(1deg); filter: contrast(1.5) brightness(1.2); } 96% { opacity: 0.9; transform: translate(2px, -1px) skew(-1deg); filter: contrast(1.2) brightness(0.8); } }
  142.  
  143. @keyframes typeWriter { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
  144.  
  145.  
  146.  
  147. .profile-followers-count { background: #131611 !important; border: 1px solid #434c38 !important; color: #8d9a78 !important; border-radius: 0 !important; margin: 5px 0 !important; font-size: 14px !important; padding: 6px 16px !important;}
  148.  
  149. .profile-member-since-box { color: #5c4332 !important; margin-top: 5px !important; font-size: 12px !important;}
  150.  
  151. .profile-badges { filter: grayscale(1) sepia(0.5) hue-rotate(50deg) brightness(0.7) !important; margin-top: 5px !important; }
  152.  
  153. .profile-uc-follow-button, .pp-uc-options-menu { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; color: #c5c0ad !important; transition: 0.2s ease; padding: 8px 20px !important; font-size: 14px !important;}
  154.  
  155. .profile-uc-follow-button:hover, .pp-uc-options-menu:hover { background: #434c38 !important; color: #0c0e0b !important; border-color: #c5c0ad !important; }
  156.  
  157.  
  158.  
  159. /* ============================================================
  160.  
  161. 4. LEFT SIDEBAR WIDGETS (camera box + scrolling terminal feed)
  162. (DO NOT TOUCH THIS CSS. To edit the actual text shown in these boxes,
  163. scroll down to the HTML section near the bottom of this file and
  164. look for "SECTION 4 CONTENT" in the HTML comments.)
  165.  
  166. ============================================================ */
  167.  
  168. .ps2-sidebar { position: absolute; top: 35px; left: 0; width: 300px; display: flex; flex-direction: column; gap: 25px; z-index: 10; }
  169.  
  170. .ps2-cam-container { background: #0c0e0b; border: 2px solid #434c38; box-shadow: 4px 4px 0px #050604; padding: 12px; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; }
  171.  
  172. .ps2-cam-container::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 1; }
  173.  
  174. .ps2-cam-viewfinder { border: 1px solid #223022; padding: 15px; position: relative; z-index: 2; background: rgba(19, 22, 17, 0.4); }
  175.  
  176. .ps2-cam-viewfinder::before { content: ''; position: absolute; top: -1px; left: -1px; width: 15px; height: 15px; border-top: 2px solid #8d9a78; border-left: 2px solid #8d9a78; }
  177.  
  178. .ps2-cam-viewfinder::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 15px; height: 15px; border-bottom: 2px solid #8d9a78; border-right: 2px solid #8d9a78; }
  179.  
  180. .ps2-cam-header { display: flex; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px dashed #434c38; padding-bottom: 6px; font-size: 14px; color: #c5c0ad; text-transform: uppercase; }
  181.  
  182. .ps2-cam-rec { color: #ff5c5c; text-shadow: 0 0 5px rgba(255,0,0,0.6); letter-spacing: 2px; }
  183.  
  184. .ps2-cam-rec span { animation: recBlink 1.5s infinite; }
  185.  
  186. @keyframes recBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  187.  
  188. .ps2-cam-time { color: #5c4332; letter-spacing: 1px; }
  189.  
  190. .ps2-cam-body { display: flex; flex-direction: column; gap: 8px; }
  191.  
  192. .ps2-cam-row { display: flex; gap: 10px; font-size: 14px; letter-spacing: 1px; }
  193.  
  194. .ps2-cam-label { color: #5c4332; text-transform: uppercase; width: 90px; flex-shrink: 0; }
  195.  
  196. .ps2-cam-value { color: #8d9a78; text-transform: lowercase; }
  197.  
  198. .ps2-cam-value.high-alert { color: #c5c0ad; background: #5c4332; padding: 0 6px; text-transform: uppercase; }
  199.  
  200. .ps2-cbox-module { background: #0c0e0b; border: 2px solid #434c38; box-shadow: 4px 4px 0px #050604; padding: 20px; position: relative; width: 100%; box-sizing: border-box; }
  201.  
  202. .ps2-cbox-header { color: #8d9a78; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px dashed #434c38; padding-bottom: 10px; margin-bottom: 15px; display: flex; justify-content: space-between; }
  203.  
  204. .ps2-live-indicator { color: #ff5c5c; animation: recBlink 2s infinite; }
  205.  
  206. .ps2-cbox-window { height: 160px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
  207.  
  208. .ps2-cbox-feed { display: flex; flex-direction: column; gap: 12px; animation: cboxScroll 30s linear infinite; }
  209.  
  210. .ps2-cbox-window:hover .ps2-cbox-feed, .ps2-cbox-window:active .ps2-cbox-feed { animation-play-state: paused; }
  211.  
  212. .ps2-cbox-msg { font-size: 13px; line-height: 1.5; color: #c5c0ad; }
  213.  
  214. .ps2-cbox-time { color: #5c4332; margin-right: 6px; }
  215.  
  216. .ps2-cbox-user { color: #8d9a78; font-weight: bold; margin-right: 6px; }
  217.  
  218. @keyframes cboxScroll { 0% { transform: translateY(160px); } 100% { transform: translateY(-100%); } }
  219.  
  220.  
  221.  
  222. /* ============================================================
  223.  
  224. 5. CUSTOM HTML MODULES (social bar/bio dropdown/tags/lore/mutuals)
  225. (DO NOT TOUCH THIS CSS. All the actual editable content for this
  226. section lives in the HTML further down... look for "SECTION 5 CONTENT".)
  227.  
  228. ============================================================ */
  229.  
  230. .ps2-custom-layout { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; }
  231.  
  232. .ps2-social-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  233.  
  234. .ps2-btn { background: #0c0e0b; border: 1px solid #434c38; color: #8d9a78; padding: 10px 20px; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: 0.3s; box-shadow: 2px 2px 0px #050604; }
  235.  
  236. .ps2-btn:hover { background: #434c38; color: #0c0e0b; border-color: #c5c0ad; }
  237.  
  238. .ps2-retro-dropdown { width: 100%; border: 1px solid #434c38; background: #131611; box-shadow: 4px 4px 0px #050604;}
  239.  
  240. .ps2-retro-dropdown summary { padding: 15px; color: #8d9a78; cursor: pointer; list-style: none; font-size: 15px; text-transform: uppercase; border-bottom: 1px solid transparent; letter-spacing: 2px;}
  241.  
  242. .ps2-retro-dropdown[open] summary { border-bottom: 1px solid #434c38; background: #0c0e0b; }
  243.  
  244. .ps2-retro-dropdown-content { padding: 20px; color: #c5c0ad; font-size: 14px; line-height: 1.6; }
  245.  
  246. .ps2-retro-dropdown summary::-webkit-details-marker { display: none; }
  247.  
  248. .ps2-module { background: #0c0e0b; border: 2px solid #434c38; box-shadow: 4px 4px 0px #050604; padding: 25px; position: relative; }
  249.  
  250. .ps2-module-header { position: absolute; top: -12px; left: 20px; background: #0c0e0b; color: #8d9a78; font-size: 15px; text-transform: uppercase; letter-spacing: 2px; padding: 0 10px; border: 1px solid #434c38; }
  251.  
  252. .ps2-tags-flex { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; }
  253.  
  254. .ps2-tag-btn { background: #131611; border: 1px solid #5c4332; color: #c5c0ad; padding: 8px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
  255.  
  256. .ps2-tag-btn span { color: #5c4332; margin-right: 6px; font-weight: bold;}
  257.  
  258. .ps2-tag-btn:hover { background: #5c4332; color: #0c0e0b; border-color: #8d9a78; cursor: default;}
  259.  
  260. .ps2-scroll-container { display: flex; gap: 15px; margin-top: 5px; overflow-x: auto; padding-bottom: 15px; white-space: nowrap; }
  261.  
  262. .ps2-scroll-container::-webkit-scrollbar { height: 10px; }
  263.  
  264. .ps2-scroll-container::-webkit-scrollbar-track { background: #0c0e0b; border: 1px solid #434c38; }
  265.  
  266. .ps2-scroll-container::-webkit-scrollbar-thumb { background: #434c38; }
  267.  
  268. .ps2-scroll-container::-webkit-scrollbar-thumb:hover { background: #8d9a78; }
  269.  
  270. .ps2-lore-card { display: inline-block; flex-shrink: 0; position: relative; width: 300px; height: 120px; border: 1px solid #434c38; background: #131611; overflow: hidden; }
  271.  
  272. .ps2-lore-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.8) sepia(0.5) contrast(1.2) brightness(0.6); transition: 0.3s; }
  273.  
  274. .ps2-lore-card:hover img { filter: grayscale(0) sepia(0) contrast(1) brightness(0.9); transform: scale(1.05); }
  275.  
  276. .ps2-lore-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,14,11,0.9) 0%, transparent 100%); display: flex; align-items: flex-end; padding: 12px; pointer-events: none; }
  277.  
  278. .ps2-lore-title { color: #c5c0ad; font-size: 15px; text-transform: lowercase; text-shadow: 2px 2px 0px #000; white-space: normal;}
  279.  
  280. .ps2-lore-status { position: absolute; top: 8px; right: 8px; background: #0c0e0b; color: #5c4332; font-size: 10px; padding: 4px 6px; border: 1px solid #434c38; }
  281.  
  282. .ps2-mutual-icon { display: inline-block; flex-shrink: 0; width: 80px; height: 80px; border: 1px solid #434c38; background: #131611; overflow: hidden; }
  283.  
  284. .ps2-mutual-icon img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.5) brightness(0.5); transition: 0.3s; }
  285.  
  286. .ps2-mutual-icon:hover img { filter: grayscale(0) contrast(1) brightness(1); }
  287.  
  288. .ps2-wesley-blame { text-align: center; font-size: 12px; color: #5c4332; margin-top: -10px; text-transform: uppercase; letter-spacing: 1px; }
  289.  
  290. .ps2-wesley-blame span { color: #8d9a78; cursor: help; }
  291.  
  292.  
  293.  
  294. /* ============================================================
  295.  
  296. 6. TOP NAV BAR & SEARCH (Global Site Header)
  297. (DO NOT TOUCH AAAAAA this restyles Janitor AI's own top bar, not your pfp stinky.)
  298.  
  299. ============================================================ */
  300.  
  301. .profile-top-bar, .pp-top-bar, ._bar_1lgb1_26, .pp-top-header { background: #0c0e0b !important; border-bottom: 2px solid #434c38 !important; backdrop-filter: none !important; box-shadow: 0px 4px 0px rgba(5,6,4,0.5) !important; z-index: 9999 !important; }
  302.  
  303. .profile-top-bar-logo-name, .pp-top-bar-logo-name { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; text-shadow: 2px 2px 0px #000 !important; text-transform: uppercase !important; letter-spacing: 2px; }
  304.  
  305. .profile-top-bar-logo-sub-name, .pp-top-bar-logo-sub-name { font-family: 'DotGothic16', sans-serif !important; color: #5c4332 !important; text-shadow: none !important; }
  306.  
  307. .profile-top-bar-create-char, .pp-top-bar-create-char { font-family: 'DotGothic16', sans-serif !important; color: #8d9a78 !important; text-transform: uppercase !important; letter-spacing: 1px; }
  308.  
  309. .profile-top-bar-create-char:hover, .pp-top-bar-create-char:hover { color: #c5c0ad !important; background: transparent !important; }
  310.  
  311. .profile-top-bar-search, .pp-top-bar-search, ._inputContainer_1d69i_26 { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; box-shadow: inset 2px 2px 0px rgba(0,0,0,0.5) !important; position: relative !important; }
  312.  
  313. #search-input { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; caret-color: #8d9a78 !important; }
  314.  
  315. #search-input::placeholder { opacity: 0 !important; }
  316.  
  317. .profile-top-bar-search::after { content: "> search_database.exe..."; position: absolute; left: 45px; top: 50%; transform: translateY(-50%); font-family: 'DotGothic16', sans-serif !important; color: #8d9a78 !important; pointer-events: none; transition: opacity 0.2s; }
  318.  
  319. .profile-top-bar-search:focus-within::after, .profile-top-bar-search:has(#search-input:not(:placeholder-shown))::after { opacity: 0 !important; }
  320.  
  321. ._searchIcon_1d69i_21 svg { color: #5c4332 !important; }
  322.  
  323. input[type="search"],
  324. input[type="text"][placeholder*="earch"],
  325. ._searchInput_1tkkb_1,
  326. ._searchInput_c7epr_1,
  327. ._inputContainer_1d69i_26 input,
  328. .profile-character-search-input,
  329. .pp-top-bar-search input,
  330. [class*="searchInput"] {
  331. background: transparent !important;
  332. border: none !important;
  333. border-radius: 0 !important;
  334. color: #c5c0ad !important;
  335. font-family: 'DotGothic16', sans-serif !important;
  336. box-shadow: none !important;
  337. -webkit-appearance: none !important;
  338. }
  339.  
  340. [class*="searchContainer"],
  341. [class*="inputGroup"],
  342. ._searchInputContainer_1lgb1_19 {
  343. background: transparent !important;
  344. border: none !important;
  345. }
  346.  
  347.  
  348.  
  349. /* ============================================================
  350.  
  351. 7. NOTIFICATIONS & DROPDOWN MENUS
  352. (DO NOT TOUCH (slaps ur hand) restyles Janitor AI's built-in notification popups.)
  353.  
  354. ============================================================ */
  355.  
  356. [class*="notificationsBadge"] { background: #5c4332 !important; border: 1px solid #0c0e0b !important; border-radius: 0 !important; box-shadow: none !important; }
  357.  
  358. [class*="notificationsPopover_"], .profile-top-bar-app-menu-list, ._dropdown_1d69i_108 { background: #0c0e0b !important; border: 2px solid #434c38 !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #050604 !important; }
  359.  
  360. [class*="notificationsPopover_"]::before { content: unset !important; }
  361.  
  362. [class*="popoverHeader_"] { background: #131611 !important; border-bottom: 2px solid #434c38 !important; border-radius: 0 !important; }
  363.  
  364. [class*="popoverTitle_"] { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; text-transform: uppercase !important; letter-spacing: 2px; }
  365.  
  366. [class*="notificationsButton"] { color: #8d9a78 !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; }
  367.  
  368. [class*="notificationsButton"]::before { content: "☏" !important; font-family: 'DotGothic16', sans-serif !important; font-size: 18px !important; color: #8d9a78 !important; letter-spacing: 2px; transition: 0.2s ease; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 20px !important; height: 20px !important; line-height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; }
  369.  
  370. [class*="notificationsButton"]:hover::before { color: #c5c0ad !important; }
  371.  
  372. [class*="notificationsButton"] svg { opacity: 0 !important; }
  373.  
  374. [class*="notificationsContainer_"] { pointer-events: auto !important; overflow: visible !important; position: relative !important; z-index: 30 !important; }
  375.  
  376. [class*="headerActions_"] button { background: #0c0e0b !important; border: 1px solid #434c38 !important; color: #8d9a78 !important; border-radius: 0 !important; }
  377.  
  378. [class*="headerActions_"] button:hover { background: #434c38 !important; color: #0c0e0b !important; }
  379.  
  380. [class*="notificationItem_"], [class*="historyItem_"], .profile-top-bar-app-menu-list-item { border-bottom: 1px dashed #434c38 !important; background: transparent !important; }
  381.  
  382. [class*="contentWrapperUnread_"] { background: rgba(92, 67, 50, 0.15) !important; }
  383.  
  384. [class*="contentWrapper_"]:hover, [class*="historyItem_"]:hover, .profile-top-bar-app-menu-list-item:hover { background: #131611 !important; }
  385.  
  386. [class*="_subject_"], [class*="_subject_"] *, .profile-top-bar-app-menu-list-item { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; }
  387.  
  388. [class*="_body_"], [class*="_body_"] * { font-family: 'DotGothic16', sans-serif !important; color: #8d9a78 !important; }
  389.  
  390. [class*="timestamp_"] { font-family: 'DotGothic16', sans-serif !important; color: #5c4332 !important; }
  391.  
  392. [class*="avatarContainer_"], [class*="characterAvatar_"], [class*="userAvatar_"] { border-radius: 0 !important; border: 1px solid #434c38 !important; box-shadow: none !important; }
  393.  
  394. [class*="characterAvatar_"] { filter: grayscale(0.5) sepia(0.3) contrast(1.2) !important; }
  395.  
  396.  
  397.  
  398. /* ============================================================
  399.  
  400. 8. BOT DIRECTORY BAR & TAG FILTER MODALS
  401. (DO NOT TOUCH)
  402.  
  403. ============================================================ */
  404.  
  405. [role="tablist"], .chakra-tabs__tablist, button[role="tab"], h2:contains("Characters"), .pp-profile-tablist { display: none !important; }
  406.  
  407.  
  408.  
  409. .character-list-pagination-flex, .css-m8ywhg {
  410.  
  411. display: flex !important;
  412.  
  413. flex-wrap: wrap !important;
  414.  
  415. justify-content: space-between !important;
  416.  
  417. align-items: center !important;
  418.  
  419. background: #0c0e0b !important;
  420.  
  421. border: 2px solid #434c38 !important;
  422.  
  423. box-shadow: 4px 4px 0px #050604 !important;
  424.  
  425. padding: 15px !important;
  426.  
  427. margin-bottom: 25px !important;
  428.  
  429. width: 100% !important;
  430.  
  431. }
  432.  
  433.  
  434.  
  435. .profile-badge-flex-outer { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; padding: 5px 12px !important; }
  436.  
  437. .profile-badge-total-count, .profile-badge-total-text::after { color: #c5c0ad !important; font-family: 'DotGothic16', sans-serif !important; text-transform: uppercase !important; letter-spacing: 1px; }
  438.  
  439.  
  440.  
  441. .profile-filters-flex-inner { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
  442.  
  443. .profile-character-search-input-group { min-width: 250px !important; flex-grow: 1 !important; }
  444.  
  445. .profile-character-search-input { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; color: #c5c0ad !important; font-family: 'DotGothic16', sans-serif !important; }
  446.  
  447. .profile-character-search-input::placeholder { color: #5c4332 !important; }
  448.  
  449. .profile-character-search-input:is(:hover, :focus) { border-color: #8d9a78 !important; box-shadow: none !important; }
  450.  
  451. .profile-filter-button { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; }
  452.  
  453. .profile-filter-button svg { color: #8d9a78 !important; }
  454.  
  455.  
  456.  
  457. #root .react-select__control { background: #131611 !important; border: 1px solid #434c38 !important; border-radius: 0 !important; color: #c5c0ad !important; font-family: 'DotGothic16', sans-serif !important; }
  458.  
  459. #root .react-select__single-value, #root .react-select__value-container > div { color: #c5c0ad !important; }
  460.  
  461. #root .react-select__menu { background: #0c0e0b !important; border: 1px solid #434c38 !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #050604 !important; }
  462.  
  463. #root .react-select__option:hover, #root .react-select__option--is-focused { background: #434c38 !important; color: #0c0e0b !important; }
  464.  
  465. #root .react-select__dropdown-indicator svg { color: #8d9a78 !important; }
  466.  
  467.  
  468.  
  469. .css-16r55pk { background: rgba(0,0,0,0.8) !important; backdrop-filter: grayscale(1); }
  470.  
  471. .css-1dljitb { background: #0c0e0b !important; border: 2px solid #434c38 !important; box-shadow: 4px 4px 0px #050604 !important; border-radius: 0 !important; }
  472.  
  473. .css-dcyl1x h2, .css-178jenf { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; text-transform: uppercase !important; letter-spacing: 1px; }
  474.  
  475. .css-lyo4r5 svg { color: #ff5c5c !important; }
  476.  
  477. ._tag_1fwqk_6, ._collapsedContainer_1lgbq_78 button { background: #131611 !important; border: 1px solid #434c38 !important; color: #8d9a78 !important; border-radius: 0 !important; font-family: 'DotGothic16', sans-serif !important; text-transform: lowercase; }
  478.  
  479. ._tag_1fwqk_6:hover, ._collapsedContainer_1lgbq_78 button:hover { background: #434c38 !important; color: #0c0e0b !important; }
  480.  
  481.  
  482.  
  483. /* ============================================================
  484.  
  485. 9. CHARACTER/BOT CARDS
  486. (DO NOT TOUCH — this styles how your character cards look automatically.
  487. You do not need to (and should not) edit anything here.) unless ur the type of person to wear khakis. ig.
  488.  
  489. ============================================================ */
  490.  
  491. .pp-cc-list-container { display: flex; flex-flow: row wrap; justify-content: center; gap: 24px; margin: 20px 0; width: 100% !important; }
  492.  
  493. .profile-character-card-wrapper, .profile-character-card-wrapper > div:empty { background: none !important; box-shadow: none; }
  494.  
  495. .profile-character-card-wrapper:hover { box-shadow: none; }
  496.  
  497. .profile-character-card-stack { background: #0a0f0a; border: 2px solid #223022; box-shadow: 0 6px 0 #000; border-radius: 0px; width: 260px; position: relative; overflow: visible; }
  498.  
  499. .profile-character-card-box ~ div { display: none; }
  500.  
  501. .profile-character-card-avatar-aspect-ratio, .profile-character-card-avatar-image { height: 260px; border-radius: 0px; }
  502.  
  503. .profile-character-card-avatar-image { filter: grayscale(0.5) sepia(0.4) hue-rotate(70deg) brightness(0.75) contrast(1.35); transition: filter 0.4s ease; }
  504.  
  505. .profile-character-card-stack:hover .profile-character-card-avatar-image { filter: grayscale(0.2) sepia(0.25) hue-rotate(70deg) brightness(0.95) contrast(1.2); }
  506.  
  507. .profile-character-card-avatar-aspect-ratio { position: relative; overflow: hidden; }
  508.  
  509. .profile-character-card-avatar-aspect-ratio::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(0,0,0,0.18) 50%, transparent 50%); background-size: 100% 4px; animation: cryptidScan 8s linear infinite; pointer-events: none; z-index: 2; }
  510.  
  511. .profile-character-card-avatar-aspect-ratio::before { content: "REC"; position: absolute; top: 8px; right: 10px; color: #ff5c5c; font-size: 0.65rem; letter-spacing: 1px; text-shadow: 0 0 4px rgba(255,0,0,0.6); z-index: 3; }
  512.  
  513. .profile-character-card-stack-link-component { display: flex; flex-direction: column-reverse; }
  514.  
  515. .profile-character-card-stack-link-component-box {
  516. padding: 12px 14px 0 !important;
  517. text-align: center !important;
  518. display: flex !important;
  519. flex-direction: column !important;
  520. align-items: center !important;
  521. justify-content: center !important;
  522. }
  523.  
  524. .profile-character-card-name-box {
  525. color: #cfe8cf !important;
  526. text-transform: uppercase !important;
  527. letter-spacing: 1px !important;
  528. font-size: 1rem !important;
  529. text-shadow: none !important;
  530. text-align: center !important;
  531. width: 100% !important;
  532. }
  533.  
  534. /* EDIT ME (optional): this label appears on every one of your character
  535. cards automatically. Change the text inside the quotes if you want a
  536. different phrase than "SIGHTING LOGGED". */
  537. .profile-character-card-stack-link-component-box::before {
  538. content: "SIGHTING LOGGED";
  539. display: block;
  540. font-size: 0.6rem;
  541. letter-spacing: 2px;
  542. color: #6fae6f;
  543. opacity: 0.8;
  544. margin-bottom: 6px;
  545. text-align: center !important;
  546. }
  547.  
  548. .profile-character-card-creator-name-link { display: none; }
  549.  
  550. .profile-character-card-stats-box {
  551. position: relative !important;
  552. top: auto !important;
  553. left: auto !important;
  554. right: auto !important;
  555. bottom: auto !important;
  556. width: 100% !important;
  557. display: flex !important;
  558. justify-content: center !important;
  559. align-items: center !important;
  560. margin: 8px 0 4px 0 !important;
  561. z-index: 5 !important;
  562. }
  563. .profile-character-card-ribbon,
  564. .profile-character-card-ribbon-wrap {
  565. position: static !important;
  566. overflow: visible !important;
  567. filter: none !important;
  568. inset: unset !important;
  569. padding: 10 !important;
  570. background: transparent !important;
  571. box-shadow: none !important;
  572. }
  573. .profile-character-card-chats-hstack {
  574. display: inline-flex !important;
  575. flex-direction: row !important;
  576. align-items: center !important;
  577. justify-content: center !important;
  578. gap: 6px !important;
  579. font-size: 0.68rem !important;
  580. color: #6fae6f !important;
  581. background: #0a0f0a !important;
  582. padding: 4px 10px !important;
  583. border: 1px solid #3a5a3a !important;
  584. width: auto !important;
  585. }
  586. .profile-character-card-chats-hstack::before {
  587. content: "✘" !important;
  588. color: #ff5c5c !important;
  589. margin-right: 2px !important;
  590. }
  591.  
  592. .profile-character-card-description-box { margin-top: 10px; padding: 0 14px; border-top: 1px dashed #223022; }
  593.  
  594. .profile-character-card-description-box * { color: #a7c4a7; font-size: 0.8rem; line-height: 1.4; }
  595.  
  596. .profile-character-card-star-line, .profile-character-card-star { display: none; }
  597.  
  598. .profile-character-card-tags ul { justify-content: center; align-items: flex-end; padding: 8px 14px; }
  599.  
  600. .profile-character-card-tags a { display: flex; }
  601.  
  602. .pp-cc-tags-item { background: #0a0f0a; border: 1px solid #3a5a3a; color: #8fbf8f; border-radius: 0; font-size: 0.65rem; }
  603.  
  604. .profile-character-card-tag-limitless { font-size: 0px; background: transparent; border: none; width: 0px; }
  605.  
  606. .profile-character-card-tag-limitless::before { content: "🔞"; font-size: 16px; }
  607.  
  608. .profile-character-card-tokens-count { font-size: 0.68rem; color: #6fae6f; text-shadow: none; }
  609.  
  610.  
  611.  
  612. .css-jdhqy4 > div, [class*="tooltip"] { background: #0c0e0b !important; border: 2px solid #434c38 !important; color: #c5c0ad !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #050604 !important; font-size: 14px !important; line-height: 1.5 !important; }
  613.  
  614. .chakra-tooltip__arrow-wrapper, .chakra-tooltip__arrow { display: none !important; }
  615.  
  616. .profile-character-card-description-box img,
  617. .profile-character-card-description-markdown-container img,
  618. .pp-cc-description img,
  619. [class*="description"] img {
  620. filter: grayscale(0.65) sepia(0.3) hue-rotate(70deg) brightness(0.85) contrast(1.2) !important;
  621. border: 1px solid #3a5a3a !important;
  622. border-radius: 0 !important;
  623. max-width: 100% !important;
  624. margin-top: 8px !important;
  625. transition: filter 0.3s ease !important;
  626. }
  627.  
  628. .profile-character-card-description-box img:hover,
  629. .profile-character-card-description-markdown-container img:hover {
  630. filter: grayscale(0) sepia(0) contrast(1) brightness(0.9) !important;
  631. }
  632.  
  633.  
  634.  
  635. /* ============================================================
  636.  
  637. 10. FOLLOW/OPTIONS BUTTON REPOSITION
  638. (DO NOT TOUCH)
  639.  
  640. ============================================================ */
  641.  
  642. .profile-info-stack { display: flex !important; flex-direction: column !important; }
  643.  
  644. .profile-info-hstack { order: 1 !important; }
  645.  
  646. .profile-about-me + div {
  647.  
  648. order: 2 !important;
  649.  
  650. margin-top: -10px !important;
  651. margin-bottom: 20px !important;
  652. margin-left: auto !important;
  653. margin-right: 0 !important;
  654.  
  655. display: flex !important;
  656.  
  657. justify-content: center !important;
  658.  
  659. position: relative !important;
  660.  
  661. z-index: 20 !important;
  662.  
  663. }
  664.  
  665. .profile-about-me { order: 3 !important; }
  666.  
  667.  
  668.  
  669. /* ============================================================
  670.  
  671. 11. SEARCH HISTORY DROPDOWN
  672. (DO NOT TOUCH)
  673.  
  674. ============================================================ */
  675.  
  676. .profile-top-bar-search:focus-within, .pp-top-bar-search:focus-within {
  677.  
  678. border-color: #8d9a78 !important;
  679.  
  680. box-shadow: inset 2px 2px 0px rgba(0,0,0,0.5), 0 0 8px rgba(141,154,120,0.45) !important;
  681.  
  682. }
  683.  
  684. .profile-top-bar-search:focus-within:has(#search-input:not(:placeholder-shown))::before {
  685.  
  686. content: '';
  687.  
  688. position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  689.  
  690. width: 6px; height: 6px; background: #8d9a78; border-radius: 50%;
  691.  
  692. box-shadow: 0 0 6px rgba(141,154,120,0.8);
  693.  
  694. animation: recBlink 1s infinite; z-index: 5;
  695.  
  696. }
  697.  
  698. [class*="historyItem_"] { padding: 10px 15px !important; transition: 0.2s ease; }
  699.  
  700. [class*="iconWrapper_"] svg { color: #5c4332 !important; width: 14px !important; height: 14px !important; }
  701.  
  702. [class*="queryText_"] { font-family: 'DotGothic16', sans-serif !important; color: #c5c0ad !important; font-size: 14px !important; text-transform: lowercase !important; letter-spacing: 0.5px; }
  703.  
  704. [class*="removeButton_"] svg { color: #5c4332 !important; transition: 0.2s ease; }
  705.  
  706. [class*="removeButton_"]:hover svg { color: #ff5c5c !important; }
  707.  
  708.  
  709.  
  710. /* ============================================================
  711.  
  712. 12. FOLLOW/EDIT PROFILE BUTTON RETHEME
  713. (DO NOT TOUCH)
  714.  
  715. ============================================================ */
  716.  
  717. .profile-uc-follow-button, .Btn { background: #131611 !important; border: 1px solid #434c38 !important; box-shadow: 2px 2px 0px #050604 !important; }
  718.  
  719. .profile-uc-follow-button:before, .Btn:before { background: #131611 !important; background-image: none !important; opacity: 1 !important; box-shadow: none !important; border-radius: 0 !important; }
  720.  
  721. .profile-uc-follow-button:hover, .Btn:hover { border-color: #c5c0ad !important; }
  722.  
  723. .profile-uc-follow-button:hover:before, .Btn:hover:before { background: #434c38 !important; }
  724.  
  725. .profile-uc-follow-text, .Btn span { color: #c5c0ad !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-size: 14px !important; }
  726.  
  727. .profile-info-hstack button,
  728. .profile-info-stack button,
  729. .profile-uc-follow-flex button,
  730. button[class*="edit-button"],
  731. button[class*="follow-button"] {
  732. background: #131611 !important;
  733. border: 1px solid #434c38 !important;
  734. color: #c5c0ad !important;
  735. border-radius: 0 !important;
  736. box-shadow: 2px 2px 0px #050604 !important;
  737. text-transform: uppercase !important;
  738. letter-spacing: 1px !important;
  739. font-family: 'DotGothic16', sans-serif !important;
  740. text-shadow: none !important;
  741. padding: 8px 20px !important;
  742. }
  743.  
  744. .profile-info-hstack button::before,
  745. .profile-info-hstack button::after,
  746. .profile-info-stack button::before,
  747. .profile-info-stack button::after {
  748. display: none !important;
  749. background: none !important;
  750. background-image: none !important;
  751. }
  752.  
  753. .profile-info-hstack button:hover,
  754. .profile-info-stack button:hover {
  755. background: #434c38 !important;
  756. color: #0c0e0b !important;
  757. border-color: #c5c0ad !important;
  758. }
  759.  
  760.  
  761.  
  762. /* ============================================================
  763.  
  764. MOBILE LAYOUT FIXES
  765. (DO NOT TOUCH. DON'T EVEN LOOK AT IT. OMG. I HATE MOBILE STYLING!!!)
  766.  
  767. ============================================================ */
  768.  
  769. @media (max-width: 900px) {
  770.  
  771. .profile-info-hstack, .ps2-custom-layout, .profile-tabs-panels, .profile-about-me + div { width: 100% !important; margin-left: 0 !important; }
  772.  
  773. .profile-about-me + div { margin-top: -5px !important; margin-bottom: 15px !important; }
  774.  
  775. .ps2-sidebar { position: relative !important; width: 100% !important; max-width: 340px !important; margin: 0 auto 40px auto !important; }
  776.  
  777. .character-list-pagination-flex { justify-content: center !important; }
  778.  
  779. .profile-character-search-input-group { width: 100% !important; }
  780.  
  781. .profile-avatar-container { overflow: visible !important; }
  782.  
  783. .profile-info-hstack { padding: 24px 12px 20px 12px !important; }
  784.  
  785. .profile-title-heading { font-size: 2rem !important; }
  786.  
  787. .profile-avatar-container { width: 120px !important; height: 120px !important; }
  788.  
  789. .profile-character-card-stack { width: 100% !important; max-width: 340px !important; }
  790.  
  791. .pp-cc-list-container { gap: 16px !important; margin: 12px 0 !important; }
  792.  
  793. .ps2-lore-card { width: 220px !important; height: 100px !important; }
  794.  
  795. .ps2-mutual-icon { width: 60px !important; height: 60px !important; }
  796.  
  797. .ps2-module { padding: 16px !important; }
  798.  
  799. [class*="notificationsButton"] { min-width: 44px !important; min-height: 44px !important; }
  800.  
  801. }
  802.  
  803. .profile-avatar-container::after {
  804. top: 10px !important;
  805. left: 100px !important;
  806. transform: none !important;
  807. width: 170px !important;
  808. margin-top: 0 !important;
  809. z-index: 999 !important;
  810. font-size: 11px !important;
  811. }
  812.  
  813. [role="tablist"],
  814.  
  815. .chakra-tabs__tablist,
  816.  
  817. button[role="tab"] {
  818.  
  819. display: none !important;
  820.  
  821. }
  822.  
  823. h2:contains("Characters"),
  824.  
  825. .pp-profile-tablist {
  826.  
  827. display: none !important;
  828.  
  829. }
  830.  
  831.  
  832.  
  833. .profile-title-heading {
  834.  
  835. position: relative !important;
  836.  
  837. z-index: 1 !important;
  838.  
  839. }
  840.  
  841.  
  842. .profile-info-stack-inner-flex {
  843.  
  844. margin-left: auto;
  845.  
  846. min-width: 100%;
  847.  
  848. margin-right: auto;
  849.  
  850. text-align: center;
  851.  
  852. }
  853.  
  854.  
  855.  
  856. @media (max-width: 600px) {
  857.  
  858. ._notificationsContainer_wpa9q_2,
  859.  
  860. ._bar_17iy7_26 {
  861.  
  862. overflow: visible !important;
  863.  
  864. }
  865.  
  866.  
  867.  
  868. ._notificationsPopover_wpa9q_80.pp-top-bar-notifications-popover {
  869.  
  870. position: fixed !important;
  871.  
  872. top: 60px !important;
  873.  
  874. left: 5% !important;
  875.  
  876. right: 5% !important;
  877.  
  878. width: 90% !important;
  879.  
  880. max-width: none !important;
  881.  
  882. height: auto !important;
  883.  
  884. max-height: 80vh !important;
  885.  
  886. margin: 0 auto !important;
  887.  
  888. z-index: 10000 !important;
  889.  
  890. }
  891.  
  892. }
  893.  
  894. /* ============================================================
  895. 14. MOBILE BOTTOM NAV BAR
  896. (DO NOT TOUCH.... sigh)
  897. ============================================================ */
  898. .pp-mnb-wrapper, [class*="mnb-wrapper"] {
  899. background: #0c0e0b !important;
  900. border-top: 2px solid #434c38 !important;
  901. backdrop-filter: none !important;
  902. }
  903.  
  904. .pp-mnb-container svg {
  905. color: #8d9a78 !important;
  906. transition: 0.3s ease;
  907. }
  908.  
  909. .pp-mnb-container a:active svg,
  910. .pp-mnb-container a:focus svg {
  911. color: #c5c0ad !important;
  912. }
  913.  
  914. .pp-mnb-container img {
  915. filter: grayscale(0.65) sepia(0.3) hue-rotate(70deg) brightness(0.85) contrast(1.2) !important;
  916. border-radius: 0 !important;
  917. border: 1px solid #434c38 !important;
  918. box-sizing: border-box !important;
  919. }
  920.  
  921. /* ============================================================
  922. 13. THE "CHECKBOX HACK" THERMAL/NVG TOGGLE
  923. (DO NOT TOUCH: this is what makes the SYS.MODE switch flip the
  924. whole page into red "thermal camera" colors when clicked.) if u don't fw this part delete the relevant sections.
  925. ============================================================ */
  926. .thermal-toggle {
  927. position: absolute;
  928. top: 0;
  929. left: 0;
  930. z-index: 9999;
  931. }
  932.  
  933. .thermal-toggle summary {
  934. list-style: none;
  935. cursor: pointer;
  936. display: flex;
  937. align-items: center;
  938. gap: 12px;
  939. font-size: 14px;
  940. color: #8d9a78;
  941. text-transform: uppercase;
  942. transition: color 0.3s ease;
  943. }
  944.  
  945. .thermal-toggle summary::-webkit-details-marker {
  946. display: none;
  947. }
  948.  
  949. .thermal-toggle summary::before {
  950. content: '';
  951. display: inline-block;
  952. width: 44px;
  953. height: 22px;
  954. background: #131611;
  955. border: 1px solid #434c38;
  956. border-radius: 20px;
  957. position: relative;
  958. transition: 0.3s ease;
  959. box-shadow: inset 2px 2px 0px rgba(0,0,0,0.5);
  960. }
  961.  
  962. .thermal-toggle summary::after {
  963. content: '';
  964. position: absolute;
  965. left: 3px;
  966. top: 50%;
  967. transform: translateY(-50%);
  968. width: 14px;
  969. height: 14px;
  970. background: #8d9a78;
  971. border-radius: 50%;
  972. transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background 0.3s ease;
  973. }
  974.  
  975.  
  976. .thermal-toggle[open] summary::before {
  977. border-color: #ff5c5c;
  978. }
  979. .thermal-toggle[open] summary::after {
  980. transform: translate(22px, -50%);
  981. background: #ff5c5c;
  982. box-shadow: 0 0 5px rgba(255,92,92,0.8);
  983. }
  984. .thermal-toggle[open] summary {
  985. color: #ff5c5c;
  986. }
  987.  
  988. body:has(.thermal-toggle[open]) header,
  989. body:has(.thermal-toggle[open]) .profile-info-hstack,
  990. body:has(.thermal-toggle[open]) .profile-about-me + div,
  991. body:has(.thermal-toggle[open]) .ps2-sidebar,
  992. body:has(.thermal-toggle[open]) .ps2-custom-layout,
  993. body:has(.thermal-toggle[open]) .character-list-pagination-flex,
  994. body:has(.thermal-toggle[open]) .pp-cc-list-container,
  995. body:has(.thermal-toggle[open]) .profile-pagination-flex-outer,
  996. body:has(.thermal-toggle[open]) .css-1dljitb,
  997. body:has(.thermal-toggle[open]) [class*="notificationsPopover_"],
  998. body:has(.thermal-toggle[open]) .pp-mnb-wrapper {
  999. filter: grayscale(1) sepia(1) hue-rotate(320deg) saturate(4) contrast(1.5) brightness(0.7) !important;
  1000. }
  1001.  
  1002. body:has(.thermal-toggle[open]) .pp-mnb-wrapper,
  1003. body:has(.thermal-toggle[open]) .profile-top-bar-app-menu-list {
  1004. filter: grayscale(1) sepia(1) hue-rotate(320deg) saturate(4) contrast(1.5) brightness(0.7) !important;
  1005. }
  1006.  
  1007. body:has(.thermal-toggle[open]) .profile-info-hstack,
  1008. body:has(.thermal-toggle[open]) .ps2-sidebar > div,
  1009. body:has(.thermal-toggle[open]) .ps2-module,
  1010. body:has(.thermal-toggle[open]) .character-list-pagination-flex,
  1011. body:has(.thermal-toggle[open]) .profile-character-card-stack,
  1012. body:has(.thermal-toggle[open]) .pp-mnb-wrapper {
  1013. background: #000000 !important;
  1014. }
  1015.  
  1016. body:has(.thermal-toggle[open]) .pp-mnb-wrapper,
  1017. body:has(.thermal-toggle[open]) .profile-top-bar-app-menu-list {
  1018. background: #000000 !important;
  1019. }
  1020.  
  1021. body:has(.thermal-toggle[open]) .ps2-static-overlay {
  1022. opacity: 0.15 !important;
  1023. }
  1024.  
  1025. body:has(.thermal-toggle[open]) .profile-top-bar-search:focus-within {
  1026. border-color: #ff5c5c !important;
  1027. box-shadow: inset 2px 2px 0px rgba(0,0,0,0.5), 0 0 8px rgba(255,92,92,0.45) !important;
  1028. }
  1029. body:has(.thermal-toggle[open]) .profile-top-bar-search:focus-within:has(#search-input:not(:placeholder-shown))::before {
  1030. background: #ff5c5c;
  1031. box-shadow: 0 0 6px rgba(255,92,92,0.8);
  1032. }
  1033.  
  1034. body:has(.thermal-toggle[open]) main,
  1035. body:has(.thermal-toggle[open]) .profile-page-container,
  1036. body:has(.thermal-toggle[open]) [class*="profile-page-background"],
  1037. body:has(.thermal-toggle[open]) [class*="Background"] {
  1038. background: #000 !important;
  1039. background-image: none !important;
  1040. }
  1041.  
  1042. </style>
  1043.  
  1044. <!--
  1045. ============================================================================
  1046. HTML CONTENT STARTS HERE :D this is the part with your actual text,
  1047. links, and images. Everything below is safe to explore; sections marked
  1048. "EDIT ME" are meant to be customized. Sections marked "DO NOT TOUCH" are
  1049. structural wrappers. leave the tags themselves alone, only edit text/
  1050. links/image URLs that sit directly inside them.
  1051.  
  1052. Reminder: no stray spaces or line breaks inside a tag's attributes
  1053. (e.g. inside href="..." or src="...")! i learned this the hard way </3
  1054. ============================================================================
  1055. -->
  1056.  
  1057. <div class="ps2-static-overlay"></div><details class="thermal-toggle"><summary>SYS.MODE</summary></details><div class="ps2-sidebar">
  1058.  
  1059. <!-- ================= SECTION 4 CONTENT: CAMERA STATUS BOX ================= -->
  1060. <!-- EDIT ME: change the three values below (PRESENCE / TRACKING / NOTES) to whatever flavor text you want. Keep the surrounding tags exactly as they are. -->
  1061. <div class="ps2-cam-container"><div class="ps2-cam-viewfinder"><div class="ps2-cam-header"><div class="ps2-cam-rec"><span>●</span> REC</div><div class="ps2-cam-time">IR-NVG // AUTO</div></div><div class="ps2-cam-body"><div class="ps2-cam-row"><span class="ps2-cam-label">PRESENCE:</span><span class="ps2-cam-value high-alert">STATUS UNKNOWN</span></div><div class="ps2-cam-row"><span class="ps2-cam-label">TRACKING:</span><span class="ps2-cam-value">edit this line with your own flavor text</span></div><div class="ps2-cam-row"><span class="ps2-cam-label">NOTES:</span><span class="ps2-cam-value">edit this line too</span></div></div></div></div>
  1062.  
  1063. <!-- ================= SECTION 4 CONTENT: SCROLLING TERMINAL FEED ================= -->
  1064. <!-- EDIT ME: each line below is one scrolling message. Copy a whole
  1065. <div class="ps2-cbox-msg">...</div> block to add a new line, or delete
  1066. one to remove a line. Keep the [00:00] time format and the "SYS_ADMIN:"
  1067. (or your own tag) for consistency, but the message text is all yours. -->
  1068. <div class="ps2-cbox-module"><div class="ps2-cbox-header"><span>> terminal_feed.exe</span><span class="ps2-live-indicator">● LIVE</span></div><div class="ps2-cbox-window"><div class="ps2-cbox-feed"><div class="ps2-cbox-msg"><span class="ps2-cbox-time">[00:01]</span><span class="ps2-cbox-user">SYS_ADMIN:</span>this is a placeholder line. edit me!</div><div class="ps2-cbox-msg"><span class="ps2-cbox-time">[00:02]</span><span class="ps2-cbox-user">SYS_ADMIN:</span>add as many or as few of these as you like.</div><div class="ps2-cbox-msg"><span class="ps2-cbox-time">[00:03]</span><span class="ps2-cbox-user">SYS_ADMIN:</span>copy this whole line to duplicate the format.</div><div class="ps2-cbox-msg"><span class="ps2-cbox-time">[00:04]</span><span class="ps2-cbox-user">SYS_ADMIN:</span>delete a line entirely if you want fewer messages.</div><div class="ps2-cbox-msg"><span class="ps2-cbox-time">[00:05]</span><span class="ps2-cbox-user">SYS_ADMIN:</span>this feed auto-scrolls and pauses on hover.</div></div></div></div>
  1069.  
  1070. </div><div class="ps2-custom-layout">
  1071.  
  1072. <!-- ================= SECTION 5 CONTENT: SOCIAL/LINK BUTTONS ================= -->
  1073. <!-- EDIT ME: change ONLY the text inside href="..." for each link, and the
  1074. button label between the > and </a>. Add more buttons by copying a
  1075. whole <a class="ps2-btn">...</a> block, or delete ones you don't need. -->
  1076. <div class="ps2-social-bar"><a href="LINK_HERE" class="ps2-btn">Discord</a><a href="LINK_HERE" class="ps2-btn">Ko-Fi</a><a href="LINK_HERE" class="ps2-btn">Twitter / X</a><a href="LINK_HERE" class="ps2-btn">Spotify</a></div>
  1077.  
  1078. <!-- ================= SECTION 5 CONTENT: BIO / README DROPDOWN ================= -->
  1079. <!-- EDIT ME: replace the sentence inside ps2-retro-dropdown-content with
  1080. your own bio. This is where your yap party goes! -->
  1081. <details class="ps2-retro-dropdown"><summary>> READ_ME.TXT</summary><div class="ps2-retro-dropdown-content">yap yap yappity yap put whatever you want to go here my friend the options are endless.</div></details>
  1082.  
  1083. <!-- ================= SECTION 5 CONTENT: TAGS/WARNINGS MODULE ================= -->
  1084. <!-- EDIT ME: each tag is one <div class="ps2-tag-btn">...</div>. The <span>
  1085. holds the little symbol before the text (like ! or #) — you can keep,
  1086. change, or remove it. Copy a whole tag block to add more, delete one
  1087. to remove it. -->
  1088. <div class="ps2-module"><div class="ps2-module-header">TAGS</div><div class="ps2-tags-flex"><div class="ps2-tag-btn"><span>!</span> tag one</div><div class="ps2-tag-btn"><span>!</span> tag two</div><div class="ps2-tag-btn"><span>#</span> tag three</div><div class="ps2-tag-btn"><span>#</span> tag four</div></div></div>
  1089.  
  1090. <!-- ================= SECTION 5 CONTENT: LORE/LINK CARDS ================= -->
  1091. <!-- EDIT ME: each card is one <a class="ps2-lore-card">...</a> block.
  1092. - Change the href="LINK_HERE" to your actual link.
  1093. - Change the src="..." inside <img> to your own image URL (any image
  1094. host works, e.g. catbox.moe, imgur, etc). Leave the placehold.co
  1095. ones in place if you don't have an image yet — they're safe
  1096. placeholders that will just show a blank box.
  1097. - Change the text inside ps2-lore-status (small top-right label) and
  1098. ps2-lore-title (bottom overlay text). -->
  1099. <div class="ps2-module"><div class="ps2-module-header">LINKS / LORE</div><div class="ps2-scroll-container"><a href="LINK_HERE" class="ps2-lore-card"><img src="https://placehold.co/400x150/131611/434c38?text=+" alt="Card"><div class="ps2-lore-status">LOG: 01</div><div class="ps2-lore-overlay"><span class="ps2-lore-title">⋆ your title here ⋆</span></div></a><a href="LINK_HERE" class="ps2-lore-card"><img src="https://placehold.co/400x150/131611/434c38?text=+" alt="Card"><div class="ps2-lore-status">LOG: 02</div><div class="ps2-lore-overlay"><span class="ps2-lore-title">⋆ your title here ⋆</span></div></a><a href="LINK_HERE" class="ps2-lore-card"><img src="https://placehold.co/400x150/131611/434c38?text=+" alt="Card"><div class="ps2-lore-status">LOG: 03</div><div class="ps2-lore-overlay"><span class="ps2-lore-title">⋆ your title here ⋆</span></div></a></div></div>
  1100.  
  1101. <!-- ================= SECTION 5 CONTENT: SMALL ICON GRID (mutuals/entities) ================= -->
  1102. <!-- EDIT ME: each icon is one <a class="ps2-mutual-icon">...</a> block.
  1103. Change href="LINK_HERE" to the link you want, and src="..." to an
  1104. image URL. The title="Entity_01" text becomes the hover tooltip —
  1105. change it to a name if you like. Copy/delete blocks to add/remove icons. -->
  1106. <div class="ps2-module"><div class="ps2-module-header">ICON GRID</div><div class="ps2-scroll-container"><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_01"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_02"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_03"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_04"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_05"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a><a href="LINK_HERE" class="ps2-mutual-icon" title="Entity_06"><img src="https://placehold.co/100x100/131611/434c38?text=+" alt="Icon"></a></div></div>
  1107.  
  1108. <!-- ================= CREDIT LINE — DO NOT DELETE ================= -->
  1109. <!-- do not remove the credits or i will literally hire an etsy witch to
  1110. curse your soul in every life you're born in. xoxo. -->
  1111. <div class="ps2-wesley-blame">>> profile css credits to <a href="https://janitorai.com/profiles/fcbc3152-aaea-4f27-a17f-0c1ae7567eab_profile-of-cheruby" style="color:#8d9a78;text-decoration:underline;">@cheruby</a> — inspired by Io's profile c:</div>
  1112.  
  1113. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!