API tools faq
paste
jazzkie

magazine css for j.ai!

jazzkie
Nov 7th, 2026 (edited)
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 108.81 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,500;1,700&family=Inter:wght@400;500;600&display=swap');
  3. .profile-background-effect-image { display: none !important; }
  4. .pp-uc-background,
  5. .pp-uc-background > div {
  6. width: 100% !important; max-width: none !important;
  7. margin: 0 !important; padding: 0 !important;
  8. background: transparent !important; box-shadow: none !important; border: 0 !important;
  9. }
  10. .profile-page-flex {
  11. flex-direction: column; padding: 0 !important; max-width: none !important;
  12. width: 100% !important; margin-top: 0 !important; gap: 0 !important;
  13. }
  14. .pp-uc-about-me { display: contents; }
  15. .pp-uc-title, .pp-uc-member-since, .profile-badges, .pp-uc-avatar-container { display: none !important; }
  16. html { background: #0d0d0d !important; scroll-behavior: smooth; overflow-x: visible !important; }
  17. body, #root, #root > div, main { background: transparent !important; background-image: none !important; }
  18. body { overflow-x: clip !important; position: relative !important; }
  19. ::selection { background: #ffffff; color: #0d0d0d; }
  20. .profile-info-stack {
  21. position: relative !important;
  22. display: flex !important;
  23. flex-direction: column !important;
  24. gap: 0 !important; padding: 0 !important; min-height: 0 !important;
  25. width: 100vw !important; max-width: 100vw !important;
  26. margin: -32px calc(50% - 50vw) 0 !important;
  27. box-sizing: border-box !important;
  28. background: transparent !important; border: 0 !important; border-radius: 0 !important;
  29. box-shadow: none !important; overflow: visible !important;
  30. }
  31. .profile-info-stack::before, .profile-info-stack::after { content: none !important; display: none !important; }
  32. .profile-info-stack-inner { position: static !important; }
  33. .profile-info-hstack {
  34. order: 1 !important;
  35. position: relative; z-index: 40;
  36. width: 100% !important; min-height: 0 !important;
  37. margin: 0 !important; padding: 10px 5vw 0 !important;
  38. display: flex !important; justify-content: center !important; align-items: center !important;
  39. text-align: center;
  40. background: #0d0d0d !important; border: 0 !important; box-shadow: none !important;
  41. }
  42. .profile-info-hstack::before, .profile-info-hstack::after { content: none !important; display: none !important; }
  43.  
  44. /* ===== FOLLOWERS (simple) ===== */
  45. .pp-uc-followers-count {
  46. display: inline-flex !important; align-items: center; gap: 6px;
  47. margin: 0 !important; padding: 7px 16px !important;
  48. border-radius: 999px !important;
  49. border: 0 !important; outline: 0 !important;
  50. background: transparent !important; box-shadow: none !important;
  51. font: 400 13px/1 'Inter',Arial,sans-serif !important;
  52. color: #ffffff !important;
  53. }
  54. .pp-uc-followers-count > span:first-child { font: 600 14px/1 'Inter',Arial,sans-serif !important; color: #ffffff !important; }
  55. .pp-uc-followers-count > span:not(:first-child) { color: #bdbdbd !important; }
  56.  
  57. .profile-info-stack > div:has(.Btn),
  58. .profile-info-stack > .css-3nlpdq {
  59. order: 2 !important;
  60. position: relative !important; z-index: 40;
  61. margin: 0 !important; padding: 16px 5vw 56px !important; left: auto !important;
  62. width: 100% !important; background: #0d0d0d !important;
  63. display: flex !important; justify-content: center; align-items: center;
  64. }
  65. .profile-info-stack > div:has(.Btn) > div,
  66. .profile-info-stack > .css-3nlpdq > div { gap: 10px !important; display: flex !important; align-items: center; }
  67.  
  68. /* ===== FOLLOW BUTTON (simple) ===== */
  69. .Btn {
  70. min-width: 0 !important; padding: 8px 22px !important;
  71. background: #ffffff !important; border: 0 !important; outline: 0 !important;
  72. border-radius: 999px !important; box-shadow: none !important;
  73. cursor: pointer; transition: background .2s !important;
  74. }
  75. .Btn:before { background: transparent !important; }
  76. .Btn:hover { background: #d9d9d9 !important; }
  77. .Btn > span, .Btn span { color: #0d0d0d !important; font: 600 13px/1 'Inter',Arial,sans-serif !important; }
  78.  
  79. .pp-uc-options-menu { background: transparent !important; color: #ffffff !important; border: 0 !important; padding: 0 !important; }
  80. .mg-app {
  81. display: contents;
  82. background: #0d0d0d;
  83. color: #0d0d0d;
  84. font-family: 'Inter',Arial,sans-serif;
  85. }
  86. .mg-app *, .mg-app *::before, .mg-app *::after { box-sizing: border-box; }
  87. .mg-app img { display: block; max-width: 100%; }
  88. .mg-app a { text-decoration: none; }
  89. .mg-stage { container-type: inline-size; width: 100%; max-width: none; margin: 0; }
  90. .mg-hero {
  91. position: relative;
  92. display: grid;
  93. grid-template-columns: 1fr 1fr;
  94. aspect-ratio: 4 / 3;
  95. min-height: 520px;
  96. overflow: hidden;
  97. background: linear-gradient(90deg, #000 50%, #fff 50%);
  98. }
  99. .mg-left {
  100. position: relative;
  101. background: radial-gradient(ellipse 70% 80% at 40% 65%, #2d2d2d, #000 72%);
  102. }
  103. .mg-photo {
  104. position: absolute; inset: 0;
  105. width: 100%; height: 100%;
  106. object-fit: contain; object-position: 50% 100%;
  107. z-index: 2;
  108. -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  109. mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  110. }
  111. /* caption text now sits BEHIND the pfp (z-index 1 < photo z-index 2) */
  112. .mg-cap {
  113. position: absolute; z-index: 1;
  114. top: 9%; left: 8%; width: 34%;
  115. margin: 0; text-align: center;
  116. color: #d8d8d8;
  117. font: 400 clamp(9px, 1.05cqw, 14px)/1.5 'Inter',Arial,sans-serif;
  118. }
  119. .mg-letter {
  120. position: absolute; z-index: 0;
  121. left: 44cqw; top: 4.5cqw;
  122. width: 28.95cqw; height: 66cqw;
  123. background: #111;
  124. -webkit-clip-path: polygon(0.00% 100.00%,0.00% 97.66%,4.44% 97.28%,8.59% 96.72%,12.45% 95.97%,14.87% 95.37%,17.15% 94.67%,19.27% 93.81%,21.20% 92.77%,22.96% 91.56%,24.55% 90.18%,25.95% 88.62%,27.18% 86.88%,27.72% 85.92%,28.64% 83.82%,29.36% 81.46%,30.05% 77.45%,30.28% 72.88%,30.28% 11.83%,30.20% 9.90%,29.96% 8.24%,29.40% 6.46%,28.78% 5.43%,27.86% 4.58%,26.61% 3.89%,24.43% 3.20%,21.59% 2.74%,16.89% 2.37%,12.21% 2.23%,12.21% 0.00%,34.39% 0.26%,54.71% 0.33%,75.65% 0.26%,100.00% 0.00%,100.00% 2.23%,92.35% 2.57%,89.11% 2.95%,87.18% 3.35%,85.15% 4.10%,84.01% 4.85%,83.21% 5.75%,82.50% 7.29%,82.08% 9.32%,81.93% 11.83%,81.93% 53.45%,82.08% 64.32%,81.86% 68.65%,81.14% 73.71%,80.49% 76.10%,79.93% 77.62%,78.89% 79.79%,78.06% 81.15%,76.58% 83.07%,75.37% 84.31%,73.97% 85.51%,72.38% 86.67%,70.60% 87.80%,68.64% 88.90%,64.15% 90.98%,61.63% 91.98%,56.01% 93.86%,49.64% 95.59%,46.15% 96.36%,38.56% 97.67%,30.15% 98.69%,25.64% 99.09%,20.92% 99.42%,10.87% 99.85%);
  125. clip-path: polygon(0.00% 100.00%,0.00% 97.66%,4.44% 97.28%,8.59% 96.72%,12.45% 95.97%,14.87% 95.37%,17.15% 94.67%,19.27% 93.81%,21.20% 92.77%,22.96% 91.56%,24.55% 90.18%,25.95% 88.62%,27.18% 86.88%,27.72% 85.92%,28.64% 83.82%,29.36% 81.46%,30.05% 77.45%,30.28% 72.88%,30.28% 11.83%,30.20% 9.90%,29.96% 8.24%,29.40% 6.46%,28.78% 5.43%,27.86% 4.58%,26.61% 3.89%,24.43% 3.20%,21.59% 2.74%,16.89% 2.37%,12.21% 2.23%,12.21% 0.00%,34.39% 0.26%,54.71% 0.33%,75.65% 0.26%,100.00% 0.00%,100.00% 2.23%,92.35% 2.57%,89.11% 2.95%,87.18% 3.35%,85.15% 4.10%,84.01% 4.85%,83.21% 5.75%,82.50% 7.29%,82.08% 9.32%,81.93% 11.83%,81.93% 53.45%,82.08% 64.32%,81.86% 68.65%,81.14% 73.71%,80.49% 76.10%,79.93% 77.62%,78.89% 79.79%,78.06% 81.15%,76.58% 83.07%,75.37% 84.31%,73.97% 85.51%,72.38% 86.67%,70.60% 87.80%,68.64% 88.90%,64.15% 90.98%,61.63% 91.98%,56.01% 93.86%,49.64% 95.59%,46.15% 96.36%,38.56% 97.67%,30.15% 98.69%,25.64% 99.09%,20.92% 99.42%,10.87% 99.85%);
  126. pointer-events: none;
  127. }
  128. .mg-bio {
  129. position: absolute; z-index: 3;
  130. left: 70%; top: 33%; width: 27%;
  131. color: #0d0d0d;
  132. }
  133. .mg-bio h1 {
  134. margin: 0 0 .5cqw;
  135. font: 700 clamp(22px, 3.2cqw, 46px)/1.05 'Playfair Display','Times New Roman',serif;
  136. letter-spacing: -.005em; color: #0d0d0d;
  137. }
  138. .mg-bio p {
  139. margin: 0;
  140. font: 400 clamp(10.5px, 1.2cqw, 16px)/1.32 'Inter',Arial,sans-serif;
  141. color: #1c1c1c;
  142. }
  143. .mg-toc {
  144. display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 34px;
  145. padding: 18px 5vw;
  146. background: #0d0d0d;
  147. border-top: 1px solid #2c2c2c; border-bottom: 1px solid #2c2c2c;
  148. }
  149. .mg-toc a {
  150. color: #ffffff; font: italic 500 17px/1 'Playfair Display','Times New Roman',serif;
  151. padding-bottom: 3px; border-bottom: 1px solid transparent;
  152. transition: border-color .2s;
  153. }
  154. .mg-toc a:hover { border-color: #ffffff; }
  155. .mg-band { width: 100%; }
  156. .mg-band.light { background: #ffffff; color: #0d0d0d; }
  157. .mg-band.dark { background: #0d0d0d; color: #ffffff; }
  158. .mg-sec { max-width: 1200px; margin: 0 auto; padding: 90px 5vw 100px; }
  159. .mg-head { margin: 0 0 48px; }
  160. .mg-head small {
  161. display: block; margin-bottom: 14px;
  162. font: 500 12px/1 'Inter',Arial,sans-serif; letter-spacing: .14em; text-transform: uppercase;
  163. color: #8c8c8c;
  164. }
  165. .mg-head h2 {
  166. margin: 0; font: 900 clamp(44px, 9vw, 120px)/.92 'Playfair Display','Times New Roman',serif; letter-spacing: -.02em;
  167. }
  168. .mg-head h2 em { font-weight: 500; }
  169. .mg-head p { max-width: 460px; margin: 18px 0 0; font: 400 15px/1.55 'Inter',Arial,sans-serif; }
  170. .mg-band.light .mg-head p { color: #444; }
  171. .mg-band.dark .mg-head p { color: #b8b8b8; }
  172. @supports (animation-timeline: view()) {
  173. .mg-rv { animation: mgrise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  174. @keyframes mgrise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
  175. }
  176. .mg-gal {
  177. display: grid;
  178. grid-template-columns: repeat(6, 1fr);
  179. grid-auto-rows: 110px;
  180. gap: 14px;
  181. }
  182. .mg-gal figure { position: relative; margin: 0; overflow: hidden; background: #1c1c1c; }
  183. .mg-gal .g1 { grid-column: span 3; grid-row: span 4; }
  184. .mg-gal .g2, .mg-gal .g3 { grid-column: span 3; grid-row: span 2; }
  185. .mg-gal .g4, .mg-gal .g5, .mg-gal .g6 { grid-column: span 2; grid-row: span 3; }
  186. .mg-gal img {
  187. width: 100%; height: 100%; object-fit: cover;
  188. filter: grayscale(1) contrast(1.05);
  189. transition: filter .5s, transform .6s;
  190. }
  191. .mg-gal figure:hover img { filter: grayscale(0); transform: scale(1.04); }
  192. .mg-gal figcaption {
  193. position: absolute; left: 0; right: 0; bottom: 0;
  194. padding: 34px 16px 14px;
  195. color: #ffffff; font: italic 500 16px/1.2 'Playfair Display','Times New Roman',serif;
  196. background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
  197. }
  198. .mg-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  199. .mg-rec { padding-top: 22px; border-top: 4px solid #ffffff; }
  200. .mg-rec-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  201. .mg-rec-top img {
  202. flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  203. background: #2a2a2a; filter: grayscale(1);
  204. }
  205. .mg-rec h3 { margin: 0; font: 700 26px/1.05 'Playfair Display','Times New Roman',serif; color: #ffffff; }
  206. .mg-rec h3 span { display: block; margin-top: 5px; font: 400 13px/1 'Inter',Arial,sans-serif; color: #8c8c8c; }
  207. .mg-rec p { margin: 0 0 18px; font: 400 15px/1.55 'Inter',Arial,sans-serif; color: #c8c8c8; }
  208. .mg-rec a {
  209. display: inline-block; padding: 8px 18px;
  210. border: 1.5px solid #ffffff; border-radius: 999px;
  211. color: #ffffff; font: 600 12px/1 'Inter',Arial,sans-serif; letter-spacing: .08em;
  212. transition: background .2s, color .2s;
  213. }
  214. .mg-rec a:hover { background: #ffffff; color: #0d0d0d; }
  215. .mg-about { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
  216. .mg-about .mg-head { position: sticky; top: 100px; margin: 0; }
  217. .mg-feat { padding: 26px 0; border-top: 1px solid #0d0d0d; }
  218. .mg-feat:last-of-type { border-bottom: 1px solid #0d0d0d; }
  219. .mg-feat h3 { margin: 0 0 8px; font: 700 clamp(24px, 3vw, 36px)/1.05 'Playfair Display','Times New Roman',serif; }
  220. .mg-feat p { margin: 0; max-width: 520px; font: 400 15px/1.6 'Inter',Arial,sans-serif; color: #3d3d3d; }
  221. .mg-block-list { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0; padding: 0; }
  222. .mg-block-list li {
  223. list-style: none; padding: 10px 22px 12px;
  224. border: 1.5px solid #ffffff; border-radius: 999px;
  225. font: italic 500 clamp(17px, 2vw, 24px)/1 'Playfair Display','Times New Roman',serif;
  226. color: #ffffff;
  227. text-decoration: line-through; text-decoration-thickness: 1.5px;
  228. }
  229. .mg-block-list li.maybe { border-style: dashed; color: #b8b8b8; text-decoration: none; }
  230. .mg-note { max-width: 520px; margin: 34px 0 0; font: 400 14px/1.6 'Inter',Arial,sans-serif; color: #b8b8b8; }
  231. .mg-foot {
  232. padding: 26px 5vw 34px; text-align: center;
  233. font: 400 13px/1.6 'Inter',Arial,sans-serif; color: #8c8c8c;
  234. border-top: 1px solid #2c2c2c; background: #0d0d0d;
  235. }
  236. .mg-foot b { font: italic 700 15px/1 'Playfair Display','Times New Roman',serif; color: #ffffff; }
  237. .pp-tabs-wrapper, .pp-tabs-indicator { display: none !important; }
  238. #profile-tabs {
  239. position: relative !important;
  240. width: 100vw !important; max-width: 100vw !important;
  241. margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  242. box-sizing: border-box !important;
  243. padding: 90px 5vw 0 !important;
  244. background: #0d0d0d !important;
  245. }
  246. #profile-tabs::after { content: none !important; display: none !important; }
  247. #profile-tabs::before {
  248. content: "The Bookstand";
  249. display: block; max-width: 1200px; margin: 0 auto 6px;
  250. color: #ffffff;
  251. font: 900 clamp(44px, 9vw, 120px)/.92 'Playfair Display','Times New Roman',serif; letter-spacing: -.02em;
  252. }
  253. .profile-filters-flex-inner { margin: auto; }
  254. html body .css-m8ywhg {
  255. position: relative; width: fit-content; max-width: calc(100vw - 24px);
  256. margin: 1.6rem auto 1rem !important;
  257. padding: .35rem .6rem .35rem 1.1rem !important;
  258. gap: .5rem !important; justify-content: center !important; align-items: center;
  259. background: #0d0d0d !important; background-image: none !important;
  260. border: 1.5px solid #ffffff; border-radius: 999px; box-shadow: none;
  261. }
  262. html body .pp-pg-total { order: -1; display: inline-flex !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  263. .pp-pg-total p { font-size: 0; margin: 0; text-align: center; }
  264. html body .pp-pg-total strong { color: #ffffff !important; font: 900 1.2rem/1 'Playfair Display','Times New Roman',serif !important; }
  265. html body .pp-pg-total p::after { content: " bots"; color: #8c8c8c !important; font: italic 500 1rem/1 'Playfair Display','Times New Roman',serif !important; }
  266. html body .pp-fl-search-input {
  267. width: 230px; height: 40px; padding: .4rem 1rem !important;
  268. background: #1c1c1c !important; color: #ffffff;
  269. font: 400 .95rem 'Inter',Arial,sans-serif !important;
  270. border: 1px solid #3a3a3a !important; border-radius: 999px !important; box-shadow: none !important;
  271. }
  272. html body .pp-fl-search-input::placeholder { color: #777 !important; opacity: 1; }
  273. html body .pp-fl-search-input:focus { outline: none !important; border-color: #ffffff !important; }
  274. html body .pp-fl-filter-button {
  275. display: inline-flex; align-items: center; justify-content: center;
  276. width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important;
  277. background: #1c1c1c !important; border: 1px solid #3a3a3a !important; box-shadow: none !important; cursor: pointer;
  278. }
  279. html body .pp-fl-filter-button svg { color: #ffffff !important; }
  280. .react-select__indicator-separator { background-color: transparent !important; }
  281. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  282. min-width: 120px; width: 120px; min-height: 40px;
  283. border: 1px solid #3a3a3a !important; border-radius: 999px !important;
  284. background: #1c1c1c !important; box-shadow: none !important; cursor: pointer;
  285. }
  286. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value { color: #ffffff !important; font: 400 .95rem 'Inter',Arial,sans-serif; }
  287. html body :is(.default, .dark, .transparent, .css-b62m3t-container) svg { color: #ffffff; }
  288. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu { width: max-content; border: 1px solid #ffffff; border-radius: 12px; background: #0d0d0d; overflow: hidden; }
  289. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option { color: #ffffff; background: transparent; font: 400 .95rem 'Inter',Arial,sans-serif; cursor: pointer; }
  290. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover,
  291. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused { background: #2a2a2a; }
  292. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected { background: #ffffff; color: #0d0d0d; }
  293. .profile-filter-modal-modal-overlay { background: rgba(0,0,0,.75) !important; }
  294. #root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  295. max-width: 40rem; padding: 1.4rem; gap: 1rem;
  296. border: 1.5px solid #ffffff; border-radius: 16px;
  297. background: #0d0d0d; color: #ffffff; font-family: 'Inter',Arial,sans-serif;
  298. }
  299. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header { padding: 0; font-size: 0; width: 100%; }
  300. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header::after { content: "Filter by tags"; color: #ffffff; font: 900 1.6rem 'Playfair Display','Times New Roman',serif; }
  301. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button { top: 1rem; right: 1rem; margin: 0; border: 0; color: #ffffff; background: transparent; }
  302. [class*="_tagsContainer_"] { width: 100%; padding: .65rem; border: 0; background: transparent; }
  303. [class*="_collapsedContainer_"] [class*="_tag_"] { color: #ffffff; border: 1px solid #555; border-radius: 999px; background: transparent; cursor: pointer; font: .9rem 'Inter',Arial,sans-serif; }
  304. [class*="_collapsedContainer_"] [class*="_tagSelected_"] { color: #0d0d0d; background: #ffffff; border-color: #ffffff; box-shadow: none !important; }
  305. [class*="_expandButton_"] { display: flex; align-items: center; width: auto; padding: .35rem 0; gap: .5rem; border: 0; color: #ffffff; background: transparent; cursor: pointer; }
  306. [class*="_expandButton_"]::before { content: "Show more"; font-size: .9rem; }
  307. [class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before { content: "Show less"; }
  308. [class*="_filterButton_"] { display: none; }
  309.  
  310. /* ===== BOT CARDS: magazine spreads (photo left, info always visible on the right) ===== */
  311. .pp-cc-list-container,
  312. html body div.pp-cc-list-container {
  313. position: relative !important;
  314. display: grid !important;
  315. grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  316. grid-auto-rows: 320px !important;
  317. grid-auto-flow: row !important;
  318. justify-content: center !important; justify-items: stretch !important; align-items: start !important;
  319. gap: 28px !important;
  320. overflow: visible !important;
  321. width: 100vw !important; max-width: 100vw !important;
  322. margin: 20px calc(50% - 50vw) 0 !important;
  323. padding: 30px max(4vw, calc((100vw - 1240px) / 2)) 90px !important;
  324. box-sizing: border-box !important;
  325. border: 0 !important; background: #0d0d0d !important; background-image: none !important;
  326. counter-reset: issue;
  327. }
  328. div:has(> .pp-cc-list-container) { background: transparent !important; background-image: none !important; box-shadow: none !important; }
  329.  
  330. /* resets for JanitorAI's own card styling */
  331. .pp-cc-wrapper > *,
  332. .pp-cc-wrapper .profile-character-card-stack-link-component-box,
  333. .pp-cc-wrapper .profile-character-card-stack {
  334. background: transparent !important; background-image: none !important;
  335. box-shadow: none !important; border: 0 !important;
  336. }
  337. .pp-cc-wrapper > *::before, .pp-cc-wrapper > *::after,
  338. .profile-character-card-stack-link-component-box::before,
  339. .profile-character-card-stack-link-component-box::after,
  340. .pp-cc-wrapper .profile-character-card-stack::before,
  341. .pp-cc-wrapper .profile-character-card-stack::after { content: none !important; display: none !important; }
  342. .pp-cc-wrapper a, .pp-cc-wrapper a:visited, .pp-cc-wrapper a:hover { color: #ffffff !important; text-decoration: none !important; outline: none !important; }
  343. .pp-cc-wrapper .profile-character-card-stack { overflow: visible; font-family: 'Inter',Arial,sans-serif; cursor: pointer; }
  344. :where(.pp-cc-wrapper .profile-character-card-stack) * { background-color: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
  345. .pp-cc-creator, .pp-cc-username, .pp-cc-author, .pp-cc-user,
  346. .pp-cc-tokens-count, .pp-cc-star-line, .pp-cc-public-chats,
  347. .pp-cc-wrapper [class*="sername" i], .pp-cc-wrapper [class*="creator" i],
  348. .pp-cc-wrapper [class*="author" i], .pp-cc-wrapper [class*="owner" i],
  349. .pp-cc-wrapper a[href*="/profiles/"] {
  350. display: none !important; visibility: hidden !important;
  351. height: 0 !important; width: 0 !important; overflow: hidden !important;
  352. }
  353. .pp-cc-wrapper .profile-character-card-stats-box svg,
  354. .pp-cc-wrapper .profile-character-card-stats-box img,
  355. .pp-cc-wrapper .profile-character-card-stats-box i,
  356. .pp-cc-wrapper .pp-cc-chats svg, .pp-cc-wrapper .pp-cc-chats img,
  357. .pp-cc-wrapper .pp-cc-chats i, .pp-cc-wrapper .pp-cc-chats [class*="icon" i] { display: none !important; }
  358.  
  359. /* the card: near-black panel, side-by-side, shine on hover + idle */
  360. @keyframes mgx-shine-idle { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  361. @keyframes mgx-shine-hover { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  362. html body div.pp-cc-list-container > .pp-cc-wrapper {
  363. position: relative; isolation: isolate;
  364. width: 100% !important; height: 320px !important; min-height: 320px !important; max-height: none !important; aspect-ratio: auto !important;
  365. margin: 0 !important; min-width: 0 !important; flex: none !important;
  366. counter-increment: issue; border-radius: 0 !important; overflow: visible;
  367. background: #050505 !important;
  368. box-shadow: inset 0 0 0 1px #1d1d1d !important;
  369. transform: none;
  370. transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s !important;
  371. }
  372. html body div.pp-cc-list-container > .pp-cc-wrapper:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 22px 46px rgba(0,0,0,.95) !important; }
  373.  
  374. /* shine sweep */
  375. html body div.pp-cc-list-container > .pp-cc-wrapper::after {
  376. content: "" !important; display: block !important;
  377. position: absolute; inset: 0; z-index: 12; pointer-events: none;
  378. background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.08) 54%, transparent 62%) no-repeat;
  379. background-size: 300% 100%; background-position: 100% 0;
  380. animation: mgx-shine-idle 7s ease-in-out infinite;
  381. }
  382. html body div.pp-cc-list-container > .pp-cc-wrapper:nth-child(2n)::after { animation-delay: 2.2s; }
  383. html body div.pp-cc-list-container > .pp-cc-wrapper:nth-child(3n)::after { animation-delay: 4.1s; }
  384. html body div.pp-cc-list-container > .pp-cc-wrapper:hover::after { animation: mgx-shine-hover .9s ease-out both; }
  385.  
  386. /* kicker */
  387. html body div.pp-cc-list-container > .pp-cc-wrapper::before {
  388. content: "Bot " counter(issue, decimal-leading-zero) !important;
  389. display: block !important;
  390. position: absolute; top: 22px; left: 242px; right: auto; bottom: auto;
  391. width: calc(100% - 270px); height: auto; padding: 0 0 10px;
  392. background: transparent !important;
  393. border-bottom: 0;
  394. font: 600 10px/1 'Inter',Arial,sans-serif; letter-spacing: .24em; text-transform: uppercase;
  395. color: #6f6f6f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 7;
  396. }
  397.  
  398. /* photo */
  399. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio {
  400. position: absolute; top: 0; left: 0; width: 214px; height: 320px; z-index: 2; overflow: hidden;
  401. background: #0a0a0a !important; border-radius: 0 !important; outline: none !important;
  402. }
  403. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio > img {
  404. width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0 !important;
  405. filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .5s, transform .6s;
  406. }
  407. html body div.pp-cc-list-container > .pp-cc-wrapper:hover .profile-character-card-avatar-aspect-ratio > img { filter: grayscale(0) brightness(1); transform: scale(1.05); }
  408. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio::before { display: none !important; }
  409. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio::after {
  410. content: "" !important; display: block !important; position: absolute; inset: 0; border: 0; pointer-events: none;
  411. background: linear-gradient(90deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.95) 100%), linear-gradient(0deg, rgba(5,5,5,.75), rgba(5,5,5,0) 38%) !important;
  412. }
  413.  
  414. /* name */
  415. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name {
  416. position: absolute; top: 62px; bottom: auto; left: 242px; width: calc(100% - 270px); height: auto; max-height: 66px;
  417. display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  418. white-space: normal; overflow: hidden; text-overflow: ellipsis; z-index: 7;
  419. color: #ffffff !important; border: 0 !important;
  420. font: italic 700 30px/1.06 'Playfair Display','Didot','Times New Roman',serif !important; letter-spacing: -.01em;
  421. }
  422. .pp-cc-wrapper .pp-cc-name * { color: inherit !important; font: inherit !important; }
  423.  
  424. /* description */
  425. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-description-box {
  426. position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 !important;
  427. opacity: 1 !important; pointer-events: none; z-index: 6; overflow: visible; border: 0 !important;
  428. color: #b5b5b5 !important; text-align: left;
  429. }
  430. .pp-cc-wrapper .profile-character-card-description-box * { color: inherit !important; font: inherit !important; text-align: left; }
  431. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description {
  432. position: absolute; top: 138px; left: 242px; width: calc(100% - 270px); height: auto;
  433. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  434. color: #b5b5b5 !important;
  435. font: italic 400 15px/1.55 'Playfair Display','Didot','Times New Roman',serif !important;
  436. }
  437.  
  438. /* tags */
  439. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags {
  440. position: absolute; top: auto; bottom: 62px; left: 242px; width: calc(100% - 270px); height: 34px;
  441. margin: 0; padding: 2px 0 8px; z-index: 9;
  442. display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 16px !important;
  443. overflow-x: auto !important; overflow-y: hidden !important;
  444. background: transparent !important; border: 0; touch-action: pan-x; overscroll-behavior-x: contain;
  445. scrollbar-width: none; -ms-overflow-style: none;
  446. opacity: 1 !important; pointer-events: auto;
  447. }
  448. .pp-cc-wrapper .pp-cc-tags::-webkit-scrollbar { display: none; width: 0; height: 0; }
  449.  
  450. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > * {
  451. display: inline-flex !important; align-items: center; flex: 0 0 auto !important;
  452. width: max-content !important; max-width: none !important;
  453. padding: 5px 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important;
  454. background: transparent !important; color: #e6e6e6 !important;
  455. font: 600 10px/1 'Inter',Arial,sans-serif !important; letter-spacing: .12em; text-transform: uppercase;
  456. white-space: nowrap !important; overflow: visible !important;
  457. }
  458. .pp-cc-wrapper .pp-cc-tags > * * { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important; font: inherit !important; }
  459.  
  460. /* tags: shrink emoji glyphs to nothing (uses the device's own emoji font at 1% size) */
  461. @font-face { font-family: 'mgnoemoji'; src: local('Segoe UI Emoji'), local('Apple Color Emoji'), local('Noto Color Emoji'), local('Twemoji Mozilla'); unicode-range: U+1F004, U+1F0CF, U+1F170-1F251, U+1F1E6-1F1FF, U+1F300-1F64F, U+1F680-1F6FF, U+1F900-1F9FF, U+1FA70-1FAFF, U+2600-27BF, U+2B50-2B55, U+231A-231B, U+23E9-23F3, U+FE0F, U+200D, U+20E3; size-adjust: 1%; }
  462. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags,
  463. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > *,
  464. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > * * { font-family: 'mgnoemoji', 'Inter', Arial, sans-serif !important; }
  465. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags img,
  466. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags svg,
  467. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags picture,
  468. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [class*="moji" i],
  469. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [class*="icon" i] { display: none !important; }
  470.  
  471. /* emoji removal, round 2: any icon-like element or pseudo-element inside the tag row */
  472. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags canvas,
  473. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags object,
  474. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags embed,
  475. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags i,
  476. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags em-emoji,
  477. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [role="img"],
  478. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [data-emoji],
  479. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [class*="emoji" i],
  480. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [class*="Emoji"],
  481. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags [style*="background-image"] { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; }
  482. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags *::before,
  483. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags *::after { content: none !important; display: none !important; }
  484.  
  485. /* ===== layout: Limitless/Limited chip centered in the middle with a shine, normal tags in a row underneath ===== */
  486. @keyframes mgx-chipshine { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
  487. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description { -webkit-line-clamp: 2 !important; }
  488. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags {
  489. bottom: 56px !important; height: 26px !important; padding: 0 !important;
  490. overflow: visible !important; clip-path: inset(-90px 0 -10px 0);
  491. }
  492. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child,
  493. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child,
  494. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child { position: static !important; }
  495. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  496. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  497. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  498. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) {
  499. position: absolute !important; left: 50% !important; top: -46px !important; transform: translateX(-50%) !important;
  500. white-space: nowrap !important; z-index: 10; display: inline-block !important;
  501. background-color: transparent !important;
  502. background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 42%, #b8b8b8 49%, #ffffff 56%, #ffffff 100%) !important;
  503. background-size: 250% 100% !important; background-position: 150% 0;
  504. -webkit-background-clip: text !important; background-clip: text !important;
  505. -webkit-text-fill-color: transparent !important; color: transparent !important;
  506. border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
  507. padding: 2px 4px !important;
  508. font-family: 'mgnoemoji', 'Playfair Display', 'Times New Roman', serif !important;
  509. font-style: normal !important; font-weight: 900 !important; font-size: 24px !important; line-height: 1.1 !important;
  510. letter-spacing: -.02em !important; text-transform: none !important;
  511. animation: mgx-chipshine 2.6s linear infinite; filter: none !important;
  512. }
  513. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) *,
  514. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) *,
  515. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) *,
  516. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) * { color: transparent !important; -webkit-text-fill-color: transparent !important; background: none !important; }
  517.  
  518. /* footer: chats pinned left, "Read →" pinned right (both absolute so they can never overlap) */
  519. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box {
  520. position: absolute; top: auto; bottom: 0; left: 242px; right: auto; width: calc(100% - 270px); height: 50px; padding: 0;
  521. display: block !important; z-index: 7; pointer-events: none;
  522. border: 0 !important;
  523. }
  524. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-chats {
  525. position: absolute !important; left: 0 !important; right: auto !important; top: 50% !important; bottom: auto !important;
  526. width: auto !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important;
  527. display: block !important; text-align: left !important;
  528. color: #6f6f6f !important; font: italic 500 15px/1 'Playfair Display','Didot','Times New Roman',serif !important;
  529. }
  530. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-chats::after { content: " chats"; }
  531. html body div.pp-cc-list-container > .pp-cc-wrapper:hover .pp-cc-chats { color: #bdbdbd !important; }
  532. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box::after {
  533. content: "Read →" !important; display: block !important;
  534. position: absolute; right: 0; left: auto; top: 50%; bottom: auto; transform: translateY(-50%);
  535. color: #ffffff; font: italic 600 16px/1 'Playfair Display','Didot','Times New Roman',serif; white-space: nowrap;
  536. transition: transform .35s;
  537. }
  538. html body div.pp-cc-list-container > .pp-cc-wrapper:hover .profile-character-card-stats-box::after { transform: translate(-6px, -50%); }
  539.  
  540. @media screen and (max-width: 900px) {
  541. html body div.pp-cc-list-container { grid-template-columns: 1fr !important; }
  542. }
  543. @media screen and (max-width: 800px) {
  544. html body div.pp-cc-list-container { grid-auto-rows: 268px !important; gap: 16px !important; padding: 24px 4vw 70px !important; }
  545. html body div.pp-cc-list-container > .pp-cc-wrapper { height: 268px !important; min-height: 268px !important; }
  546. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio { width: 112px; height: 268px; }
  547. html body div.pp-cc-list-container > .pp-cc-wrapper::before,
  548. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name,
  549. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description,
  550. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags,
  551. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box { left: 128px; width: calc(100% - 142px); }
  552. html body div.pp-cc-list-container > .pp-cc-wrapper::before { top: 16px; font-size: 8.5px; letter-spacing: .18em; padding-bottom: 8px; }
  553. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name { top: 46px; font-size: 22px !important; max-height: 50px; }
  554. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description { top: 104px; font-size: 13px !important; -webkit-line-clamp: 4; }
  555. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags { bottom: 52px; height: 30px; }
  556. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > * { font-size: 9px !important; padding: 4px 9px !important; }
  557. html body div.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box { height: 44px; }
  558. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-chats { font-size: 13px !important; }
  559. }
  560.  
  561. @media screen and (max-width: 800px) {
  562. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description { -webkit-line-clamp: 2 !important; }
  563. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags { bottom: 50px !important; height: 24px !important; }
  564. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  565. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  566. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))),
  567. html body div.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child > :first-child:not(:has(> :not(img, svg, picture, [class*="moji" i], [class*="icon" i]))) { top: -40px !important; padding: 2px 4px !important; font-size: 19px !important; }
  568. }
  569. html body .pp-top-bar {
  570. min-height: 66px; padding: .55rem 1.2rem .55rem 190px !important;
  571. background: linear-gradient(180deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.7) 65%, rgba(13,13,13,0) 100%) !important;
  572. border-bottom: 0 !important; box-shadow: none !important;
  573. }
  574. html body .pp-mnb-wrapper, html body .pp-mnb-container { background: transparent !important; border: 0 !important; box-shadow: none !important; animation: none !important; }
  575. .pp-top-bar, .pp-mnb-wrapper, .pp-mnb-container { z-index: 100001 !important; }
  576. html body .pp-top-bar-logo img, html body .pp-top-bar-logo svg,
  577. html body .profile-top-bar-logo-box img, html body .profile-top-bar-logo-box svg,
  578. html body .pp-top-bar a[href="/"]:has(img, svg),
  579. html body .css-1bmggo3, .pp-top-bar-logo-sub-name { display: none !important; }
  580. html body .pp-top-bar-logo::after, html body .pp-top-bar-logo::before { content: none !important; display: none !important; }
  581. html body .pp-top-bar::before {
  582. content: "Jazmyn Aurora";
  583. position: fixed; top: 0; left: 1.2rem; height: 66px;
  584. display: flex; align-items: center; z-index: 100002; pointer-events: none;
  585. color: #ffffff; -webkit-text-fill-color: #ffffff;
  586. font: italic 700 1.35rem/1 'Playfair Display','Times New Roman',serif;
  587. }
  588. html body .pp-top-bar nav { display: inline-flex !important; align-items: center; gap: .4rem !important; margin-left: 1rem !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  589. html body .pp-top-bar nav a, html body .pp-top-bar nav button {
  590. padding: .4rem .9rem !important; border: 0 !important; border-radius: 999px !important;
  591. background: transparent !important; color: #cfcfcf !important; -webkit-text-fill-color: #cfcfcf !important;
  592. font: 500 .95rem/1 'Inter',Arial,sans-serif !important; text-decoration: none !important;
  593. }
  594. html body .pp-top-bar nav a:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
  595. html body .pp-top-bar nav :is([aria-current], .active, [class*="active" i], [class*="selected" i]) {
  596. background: #ffffff !important; color: #0d0d0d !important; -webkit-text-fill-color: #0d0d0d !important;
  597. }
  598. html body .pp-top-bar .pp-top-bar-search {
  599. display: flex !important; align-items: center; gap: .3rem; left: auto !important;
  600. height: 40px; padding: 0 1rem 0 .5rem !important; width: clamp(180px, 30vw, 420px) !important;
  601. background: #1c1c1c !important; border: 1px solid #3a3a3a !important; border-radius: 999px !important; box-shadow: none !important;
  602. }
  603. html body .pp-top-bar .pp-top-bar-search:focus-within { border-color: #ffffff !important; }
  604. html body .pp-top-bar .pp-top-bar-search-icon { position: static !important; left: auto !important; flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent !important; }
  605. html body .pp-top-bar .pp-top-bar-search-icon svg { color: #ffffff !important; width: 18px; height: 18px; }
  606. html body .pp-top-bar .pp-top-bar-search input { flex: 1 1 auto; min-width: 0; width: 100%; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: #ffffff !important; font: 400 .95rem 'Inter',Arial,sans-serif !important; }
  607. html body .pp-top-bar .pp-top-bar-search input::placeholder { color: #777 !important; opacity: 1; }
  608. .pp-top-bar-search::before, .pp-top-bar-search::after, .pp-top-bar-search *::before, .pp-top-bar-search *::after { content: none !important; display: none !important; }
  609. .pp-top-bar .MuiInputBase-root, .pp-top-bar .MuiOutlinedInput-root, .pp-top-bar .MuiOutlinedInput-notchedOutline, .pp-top-bar fieldset { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  610. .pp-top-bar svg, .pp-top-bar .MuiSvgIcon-root { color: #ffffff !important; }
  611. .pp-top-bar kbd, .pp-top-bar-search kbd, .pp-top-bar [class*="shortcut" i], .pp-top-bar [class*="hotkey" i], .pp-top-bar [class*="kbd" i], .pp-top-bar .MuiInputAdornment-positionEnd { display: none !important; }
  612. .pp-top-bar-create-char { font-size: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
  613. .pp-top-bar-create-char::after {
  614. content: "New bot"; display: inline-flex; align-items: center; padding: .45rem 1.1rem;
  615. border: 1.5px solid #ffffff; border-radius: 999px; background: #ffffff; color: #0d0d0d;
  616. font: 600 .9rem/1 'Inter',Arial,sans-serif;
  617. }
  618. :is(.css-1l8kxqv, [class*="_notificationsButton_"]) {
  619. position: relative; z-index: 100001; pointer-events: auto !important;
  620. display: inline-flex; align-items: center; justify-content: center;
  621. width: 40px; height: 40px; min-width: 40px; padding: 0 !important; overflow: visible !important;
  622. border: 1px solid #3a3a3a !important; border-radius: 50% !important; background: #1c1c1c !important; box-shadow: none !important; cursor: pointer;
  623. }
  624. :is(.css-1l8kxqv, [class*="_notificationsButton_"]) svg { display: block !important; width: 20px !important; height: 20px !important; color: #ffffff !important; pointer-events: none; }
  625. .pp-top-bar :has(> :is(.css-1l8kxqv, [class*="_notificationsButton_"])) { position: relative; }
  626. .pp-top-bar [class*="badge" i] {
  627. position: absolute !important; top: -6px !important; right: -6px !important; left: auto !important; bottom: auto !important; transform: none !important;
  628. min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center;
  629. border-radius: 999px !important; font-size: 12px !important; line-height: 1; z-index: 2;
  630. background: #ffffff !important; color: #0d0d0d !important; border: 1.5px solid #0d0d0d !important; font-family: 'Inter',Arial,sans-serif !important;
  631. }
  632. .pp-top-bar-app-menu { width: 40px; height: 40px; min-width: 40px; padding: 2px !important; border: 0 !important; border-radius: 50%; background: #ffffff !important; overflow: hidden; cursor: pointer; }
  633. .pp-top-bar-app-menu img, .pp-top-bar-app-menu svg { border-radius: 50% !important; }
  634. .pp-top-bar-app-menu svg { color: #0d0d0d !important; }
  635. .pp-top-bar-app-menu-list, [class*="Popover_"] {
  636. padding: 10px !important; background: #0d0d0d !important;
  637. border: 1.5px solid #ffffff !important; border-radius: 14px !important;
  638. box-shadow: 0 16px 34px rgba(0,0,0,.6) !important; color: #ffffff;
  639. }
  640. .pp-top-bar-app-menu-list { display: flex !important; flex-direction: column; gap: 4px; width: 260px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }
  641. .pp-top-bar-app-menu-list a, .pp-top-bar-app-menu-list-item, .css-1rokoft { color: #ffffff !important; text-decoration: none !important; }
  642. .pp-top-bar-app-menu-list-item, .css-1rokoft {
  643. display: flex !important; align-items: center; gap: .7rem; width: 100%; margin: 0 !important; padding: .55rem .75rem !important;
  644. border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important;
  645. font: 500 1rem 'Inter',Arial,sans-serif !important; cursor: pointer;
  646. }
  647. .pp-top-bar-app-menu-list-item:hover, .css-1rokoft:hover { background: #2a2a2a !important; }
  648. .pp-top-bar-app-menu-list-item svg, .css-1rokoft svg { flex: 0 0 auto; width: 22px !important; height: 22px !important; color: #ffffff !important; }
  649. .pp-top-bar-app-menu-list hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #333; background: none; }
  650. .pp-top-bar-app-menu-list-item[href="/plus"], .pp-top-bar-app-menu-list-item[href="/plus"] + hr,
  651. .pp-top-bar-app-menu-list-item:has(a[href*="career" i]), .pp-top-bar-app-menu-list-item:has(a[href*="get-app" i]), .pp-top-bar-app-menu-list-item[href*="career" i] { display: none !important; }
  652. [class*="Popover_"] { display: flex !important; flex-direction: column; width: 390px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 90px)); overflow: hidden; }
  653. [class*="popoverHeader_"] { display: flex; align-items: center; justify-content: center !important; position: relative; flex: none; margin: 0 0 8px; padding: .6rem 1rem !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #333 !important; border-radius: 0 !important; }
  654. [class*="popoverTitle_"] { font: 900 1.3rem 'Playfair Display','Times New Roman',serif !important; color: #ffffff !important; }
  655. [class*="popoverHeader_"] button { position: absolute; right: .4rem; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; background: #1c1c1c !important; border: 0 !important; }
  656. [class*="popoverHeader_"] button svg { color: #ffffff !important; width: 14px; height: 14px; }
  657. [class*="notificationsList_"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px !important; border: 0 !important; background: transparent !important; scrollbar-width: thin; }
  658. [class*="_notificationItem_"] { position: relative; display: flex !important; align-items: flex-start; gap: .7rem; margin: 0 0 6px !important; padding: .6rem .75rem !important; border: 1px solid #2c2c2c !important; border-radius: 10px !important; background: #151515 !important; box-shadow: none !important; }
  659. [class*="_notificationItem_"]:has([class*="_contentWrapperUnread_"]) { background: #242424 !important; }
  660. html body [class*="_notificationItem_"] :where(div, span, p, h1, h2, h3, h4, strong, b):not([class*="vatar"]):not([class*="Icon"]):not([class*="Indicator_"]) {
  661. background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  662. color: #dcdcdc !important; -webkit-text-fill-color: currentColor !important; font-family: 'Inter',Arial,sans-serif !important;
  663. }
  664. [class*="_notificationIconContainer_"], [class*="_characterAvatar_"], [class*="_userAvatar_"] { flex: 0 0 42px; width: 42px; height: 42px; margin-top: 2px; object-fit: cover; border-radius: 50% !important; overflow: hidden; background: #2a2a2a !important; }
  665. html body [class*="_notificationItem_"] [class*="vatar"] img, html body [class*="_notificationItem_"] [class*="_notificationIconContainer_"] img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  666. html body [class*="Indicator_"] { position: absolute !important; top: 10px !important; right: 12px !important; left: auto !important; bottom: auto !important; width: 9px; height: 9px; margin: 0 !important; border-radius: 50%; background: #ffffff !important; }
  667. [class*="_loadMoreButton_"] { display: block; width: auto !important; margin: .3rem auto .4rem; padding: .45rem 1.2rem !important; border: 1.5px solid #ffffff !important; border-radius: 999px !important; background: transparent !important; color: #ffffff !important; font: 600 .9rem 'Inter',Arial,sans-serif !important; }
  668. [class*="_emptyState_"] { display: flex; flex-flow: column; align-items: center; text-align: center; margin: 2px; padding: 1.8rem 1rem; border: 1px dashed #444; border-radius: 10px; color: #aaa; font: 400 1rem 'Inter',Arial,sans-serif; }
  669. .chakra-spinner { color: #ffffff !important; }
  670. footer, [class*="ooter" i], [class*="get-app" i], [class*="getapp" i], [class*="appstore" i],
  671. [class*="download-app" i], [class*="careers" i], a[href*="career" i],
  672. a[href*="apps.apple.com"], a[href*="play.google.com"] { display: none !important; }
  673. html { scrollbar-width: thin; scrollbar-color: #555 #0d0d0d; }
  674. ::-webkit-scrollbar { width: 10px; height: 10px; }
  675. ::-webkit-scrollbar-track { background: #0d0d0d; }
  676. ::-webkit-scrollbar-thumb { background: #555; border-radius: 999px; border: 2px solid #0d0d0d; }
  677. :focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
  678. @media (prefers-reduced-motion: reduce) {
  679. *, *::before, *::after { animation: none !important; transition: none !important; }
  680. }
  681. html body .css-m8ywhg {
  682. width: fit-content; margin: 2rem auto 1.2rem !important;
  683. padding: 1rem 1.8rem !important; gap: 1.8rem !important;
  684. border: 0 !important; border-top: 4px double #fff !important; border-bottom: 4px double #fff !important;
  685. border-radius: 0 !important; background: #0d0d0d !important;
  686. }
  687. html body .pp-pg-total { padding-right: 1.8rem !important; border-right: 1px solid #444 !important; align-items: baseline; }
  688. html body .pp-pg-total strong { font: italic 900 2.3rem/1 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; color: #fff !important; }
  689. html body .pp-pg-total p::after { content: " bots on the shelf"; color: #8c8c8c !important; font: italic 500 1.05rem/1 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; letter-spacing: .02em; }
  690. html body .pp-fl-search-input {
  691. width: 270px; height: 40px; padding: .3rem .2rem !important;
  692. background: transparent !important; color: #fff;
  693. font: italic 400 1.15rem 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important;
  694. border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important; box-shadow: none !important;
  695. }
  696. html body .pp-fl-search-input::placeholder { color: #777 !important; font-style: italic; opacity: 1; }
  697. html body .pp-fl-search-input:focus { outline: none !important; border-bottom-color: #fff !important; }
  698. html body .pp-fl-filter-button {
  699. width: auto; height: 40px; gap: 8px; padding: 0 18px 0 14px !important;
  700. border: 1px solid #fff !important; border-radius: 999px !important; background: transparent !important;
  701. transition: background .25s;
  702. }
  703. html body .pp-fl-filter-button::after { content: "Filter"; color: #fff; font: italic 500 1.1rem/1 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif; }
  704. html body .pp-fl-filter-button:hover { background: #fff !important; }
  705. html body .pp-fl-filter-button:hover::after, html body .pp-fl-filter-button:hover svg { color: #0d0d0d !important; }
  706. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  707. min-width: 150px; width: 150px; min-height: 40px;
  708. border: 0 !important; border-bottom: 1px solid #666 !important; border-radius: 0 !important;
  709. background: transparent !important; box-shadow: none !important; cursor: pointer;
  710. }
  711. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:hover { border-bottom-color: #fff !important; }
  712. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value { color: #fff !important; font: italic 500 1.15rem 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; }
  713. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu { border: 1px solid #fff; border-radius: 0; background: #0d0d0d; }
  714. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option { font: italic 500 1.05rem 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif; }
  715. :is(.css-1l8kxqv, [class*="_notificationsButton_"]) { border: 1px solid #fff !important; background: transparent !important; transition: background .25s; }
  716. :is(.css-1l8kxqv, [class*="_notificationsButton_"]):hover { background: #fff !important; }
  717. :is(.css-1l8kxqv, [class*="_notificationsButton_"]):hover svg { color: #0d0d0d !important; }
  718. .pp-top-bar [class*="badge" i] { font: italic 700 13px/1 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; }
  719. .pp-top-bar-app-menu { padding: 3px !important; background: transparent !important; border: 1px solid #fff !important; }
  720. .pp-top-bar-app-menu img { filter: grayscale(1) contrast(1.05); transition: filter .4s; }
  721. .pp-top-bar-app-menu:hover img { filter: grayscale(0); }
  722. .pp-top-bar-app-menu svg { color: #fff !important; }
  723. .pp-top-bar-app-menu-list, [class*="Popover_"] {
  724. padding: 16px !important; border: 1px solid #fff !important; border-radius: 0 !important;
  725. box-shadow: inset 0 0 0 4px #0d0d0d, inset 0 0 0 5px #555, 0 20px 40px rgba(0,0,0,.7) !important;
  726. }
  727. .pp-top-bar-app-menu-list-item, .css-1rokoft {
  728. font: italic 500 1.15rem/1.2 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; border-radius: 0 !important;
  729. border-bottom: 1px solid #2c2c2c !important; padding: .75rem .4rem !important;
  730. }
  731. .pp-top-bar-app-menu-list-item:hover, .css-1rokoft:hover { background: #171717 !important; }
  732. .pp-top-bar-app-menu-list-item:last-child { border-bottom: 0 !important; }
  733. [class*="popoverHeader_"] { border-bottom: 4px double #fff !important; padding: .5rem 1rem .8rem !important; }
  734. [class*="popoverTitle_"] { font: italic 900 1.7rem/1 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; }
  735. [class*="popoverHeader_"] button { background: transparent !important; border: 1px solid #fff !important; }
  736. [class*="_notificationItem_"] {
  737. margin: 0 !important; padding: .85rem .4rem !important; border: 0 !important; border-bottom: 1px solid #2c2c2c !important;
  738. border-radius: 0 !important; background: transparent !important;
  739. }
  740. [class*="_notificationItem_"]:has([class*="_contentWrapperUnread_"]) { background: #171717 !important; }
  741. html body [class*="_notificationItem_"] :where(div, span, p, h1, h2, h3, h4, strong, b):not([class*="vatar"]):not([class*="Icon"]):not([class*="Indicator_"]) {
  742. font-family: 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; font-style: italic !important; font-size: 15px; color: #e6e6e6 !important;
  743. }
  744. [class*="_notificationItem_"] img { filter: grayscale(1); transition: filter .4s; }
  745. [class*="_notificationItem_"]:hover img { filter: grayscale(0); }
  746. [class*="_loadMoreButton_"] { font: italic 600 1.05rem 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif !important; }
  747. [class*="_emptyState_"] { font: italic 400 1.1rem 'Playfair Display','Didot','Bodoni 72','Bodoni MT','Times New Roman',serif; }
  748. @media screen and (max-width: 800px) {
  749. .mg-hero { display: block; aspect-ratio: auto; min-height: 0; background: #fff; }
  750. .mg-left { height: 118vw; max-height: 640px; }
  751. .mg-cap { width: 56%; left: 22%; top: 6%; font-size: 12px; }
  752. .mg-letter { position: static; display: block; width: 36vw; height: auto; aspect-ratio: 393 / 896; margin: 8vw 6vw 6vw; background: #0d0d0d; }
  753. .mg-bio { position: static; width: auto; padding: 4vw 6vw 10vw; }
  754. .mg-bio h1 { font-size: 34px; }
  755. .mg-bio p { font-size: 15px; line-height: 1.5; margin-bottom: .7em; }
  756. .mg-sec { padding: 64px 6vw 72px; }
  757. .mg-gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 10px; }
  758. .mg-gal .g1 { grid-column: span 2; grid-row: span 3; }
  759. .mg-gal .g2, .mg-gal .g3, .mg-gal .g4, .mg-gal .g5, .mg-gal .g6 { grid-column: span 1; grid-row: span 2; }
  760. .mg-recs { grid-template-columns: 1fr; gap: 34px; }
  761. .mg-about { grid-template-columns: 1fr; gap: 30px; }
  762. .mg-about .mg-head { position: static; }
  763. html body .pp-top-bar { padding: .45rem .7rem .45rem 150px !important; }
  764. html body .pp-top-bar::before { font-size: 1.1rem; left: .8rem; }
  765. .profile-info-hstack { margin: 0 !important; }
  766. .profile-info-stack > div:has(.Btn), .profile-info-stack > .css-3nlpdq { margin: 0 !important; }
  767. [class*="Popover_"] { position: fixed !important; top: 60px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; z-index: 100002 !important; }
  768. html body .css-m8ywhg { flex-wrap: wrap !important; border-radius: 26px; padding: .5rem .7rem !important; }
  769. html body .pp-fl-search-input { width: 200px; }
  770. }
  771.  
  772. /* ===== MOTION + DYNAMIC ADD-ON ===== */
  773. @keyframes mgx-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
  774. @keyframes mgx-jin{from{opacity:0;translate:0 10%}to{opacity:1;translate:0 0}}
  775. @keyframes mgx-photo{from{opacity:0;translate:0 5%;scale:1.05}to{opacity:1;translate:0 0;scale:1}}
  776. @keyframes mgx-breathe{from{transform:scale(1)}to{transform:scale(1.02)}}
  777. @keyframes mgx-track{from{letter-spacing:.12em;opacity:0}to{letter-spacing:-.005em;opacity:1}}
  778. @keyframes mgx-fade{from{opacity:0}to{opacity:1}}
  779. @keyframes mgx-slide{to{transform:translateX(-50%)}}
  780. @keyframes mgx-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35,1.9);opacity:0}}
  781. @keyframes mgx-blink{50%{opacity:0}}
  782. @keyframes mgx-load{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
  783. @keyframes mgx-par{to{transform:translateY(5vw)}}
  784. @keyframes mgx-pop{from{opacity:0;translate:0 46px;scale:.92;rotate:var(--r,-2deg)}to{opacity:1;translate:0 0;scale:1;rotate:0deg}}
  785. @keyframes mgx-left{from{opacity:0;translate:-48px 0}to{opacity:1;translate:0 0}}
  786. @keyframes mgx-wipe{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -5% -10% 0)}}
  787. @keyframes mgx-bar{to{transform:scaleX(1)}}
  788.  
  789. /* hero intro */
  790. .mg-letter{animation:mgx-jin 1.3s cubic-bezier(.2,.8,.2,1) both}
  791. .mg-photo{transform-origin:50% 100%;animation:mgx-photo 1.1s .2s cubic-bezier(.2,.8,.2,1) both,mgx-breathe 7s 1.4s ease-in-out infinite alternate}
  792. .mg-bio h1{animation:mgx-track 1.2s .45s cubic-bezier(.2,.8,.2,1) both}
  793. .mg-bio p{animation:mgx-up .9s cubic-bezier(.2,.8,.2,1) both}
  794. .mg-bio p:nth-of-type(1){animation-delay:.75s}
  795. .mg-bio p:nth-of-type(2){animation-delay:.9s}
  796. .mg-bio p:nth-of-type(3){animation-delay:1.05s}
  797. .mg-cap{animation:mgx-fade 1.4s 1.1s both}
  798.  
  799.  
  800. /* ticker */
  801. .mg-marquee{overflow:hidden;background:#fff;color:#0d0d0d;border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}
  802. .mg-marquee-track{display:flex;width:max-content;animation:mgx-slide 32s linear infinite}
  803. .mg-marquee:hover .mg-marquee-track{animation-play-state:paused}
  804. .mg-marquee-track>div{display:flex;flex:none}
  805. .mg-marquee span{display:inline-flex;align-items:center;padding:14px 0 16px;white-space:nowrap;font:italic 700 clamp(20px,2.6vw,30px)/1 'Playfair Display','Times New Roman',serif}
  806. .mg-marquee span::after{content:"✦";font-style:normal;font-size:.55em;margin:0 clamp(24px,3vw,44px)}
  807.  
  808. /* sticky nav + hover life */
  809. .mg-band{scroll-margin-top:120px}
  810. .mg-toc{position:sticky;top:66px;z-index:60;background:rgba(13,13,13,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  811. .mg-toc a{transition:border-color .2s,transform .25s}
  812. .mg-toc a:hover{transform:translateY(-2px)}
  813.  
  814. /* gallery captions slide up on hover (desktop) */
  815. @media (hover:hover){
  816. .mg-gal figcaption{transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  817. .mg-gal figure:hover figcaption{transform:translateY(0)}
  818. }
  819.  
  820. /* creator recs */
  821. .mg-rec{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
  822. .mg-rec:hover{transform:translateY(-8px)}
  823. .mg-rec-top img{transition:filter .4s,transform .4s}
  824. .mg-rec:hover .mg-rec-top img{filter:grayscale(0);transform:rotate(-6deg) scale(1.06)}
  825. .mg-rec a::after{content:" →";display:inline-block;transition:transform .25s}
  826. .mg-rec a:hover::after{transform:translateX(5px)}
  827.  
  828. /* feature rows */
  829. .mg-feat{transition:padding-left .35s cubic-bezier(.2,.8,.2,1)}
  830. .mg-feat:hover{padding-left:16px}
  831.  
  832. /* blocklist */
  833. .mg-block-list li{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
  834. .mg-block-list li:hover{transform:rotate(-3deg) scale(1.07);background:#fff;color:#0d0d0d}
  835.  
  836. /* scroll-driven stuff */
  837. @supports (animation-timeline:view()){
  838. body::after{content:"";position:fixed;top:0;left:0;width:100%;height:3px;background:#fff;z-index:100003;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;animation:mgx-bar linear both;animation-timeline:scroll(root)}
  839. .mg-letter{animation:mgx-jin 1.3s cubic-bezier(.2,.8,.2,1) both,mgx-par linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
  840. .mg-gal.mg-rv,.mg-recs.mg-rv,.mg-about>.mg-rv:not(.mg-head),ul.mg-block-list.mg-rv{animation:none}
  841. .mg-head h2{animation:mgx-wipe linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
  842. .mg-gal figure,.mg-rec,.mg-block-list li,.pp-cc-wrapper{animation:mgx-pop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  843. .mg-gal figure:nth-child(odd){--r:-3deg}
  844. .mg-gal figure:nth-child(even){--r:3deg}
  845. .mg-rec,.pp-cc-wrapper{--r:0deg}
  846. .mg-block-list li:nth-child(odd){--r:4deg}
  847. .mg-block-list li:nth-child(even){--r:-4deg}
  848. .mg-feat{animation:mgx-left linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  849. }
  850.  
  851. /* ===== MOBILE FIXES: big J sits BEHIND the pfp, bio sits on the left ===== */
  852. @media screen and (max-width:800px){
  853. .mg-hero{background:#fff}
  854.  
  855. .mg-letter{
  856. position:absolute !important; display:block !important; margin:0 !important; aspect-ratio:auto !important;
  857. top:min(2vw,10px) !important;
  858. height:min(112vw,606px) !important;
  859. width:min(49.1vw,265.8px) !important;
  860. left:calc(50% - min(24.55vw,132.9px)) !important;
  861. background:#efefef !important;
  862. z-index:0 !important; opacity:1 !important;
  863. }
  864. .mg-photo{z-index:2}
  865. .mg-cap{color:#fff;mix-blend-mode:difference;z-index:1}
  866.  
  867. .mg-bio{
  868. position:relative !important; z-index:3;
  869. left:0 !important; top:0 !important; right:auto !important;
  870. width:auto !important; max-width:none !important; margin:0 !important;
  871. padding:7vw 7vw 12vw !important; text-align:left;
  872. }
  873.  
  874. .mg-marquee span{padding:11px 0 13px}
  875. .mg-toc{top:60px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:4px 26px;scrollbar-width:none}
  876. .mg-toc a{white-space:nowrap}
  877. .mg-toc::-webkit-scrollbar{display:none}
  878. }
  879.  
  880. /* ===== MAGAZINE EDITION ===== */
  881. @keyframes mgx-spin{to{transform:rotate(360deg)}}
  882. .mg-app{counter-reset:sec}
  883.  
  884. /* masthead */
  885. .mg-mast{background:#0d0d0d;color:#fff;padding:74px 5vw 0;text-align:center;position:relative;margin-top:-40px}
  886. .mg-mast-top{display:flex;justify-content:flex-start;gap:34px;padding:10px 0;border-bottom:1px solid #2c2c2c;font:600 10.5px/1 'Inter',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8c8c8c}
  887. .mg-mast-title{padding:16px 0 12px;font:900 clamp(38px,7vw,96px)/.95 'Playfair Display','Times New Roman',serif;letter-spacing:-.025em;animation:mgx-track 1.2s .1s cubic-bezier(.2,.8,.2,1) both}
  888. .mg-mast-title em{font-weight:500}
  889. .mg-mast-sub{padding:10px 0 11px;border-top:4px double #fff;border-bottom:1px solid #2c2c2c;font:italic 500 15px/1 'Playfair Display','Times New Roman',serif;color:#cfcfcf}
  890.  
  891. /* cover furniture */
  892. .mg-spine{position:absolute;z-index:4;left:1.4cqw;top:4cqw;writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#9a9a9a;animation:mgx-fade 1.4s 1.3s both}
  893. .mg-lines{position:absolute;z-index:4;left:5cqw;bottom:4.5cqw;width:23cqw;margin:0;padding:0;list-style:none;color:#fff}
  894. .mg-lines li{padding:7px 0 8px;border-top:1px solid rgba(255,255,255,.4);font:400 clamp(9px,1cqw,13px)/1.3 'Inter',Arial,sans-serif;color:#d0d0d0;animation:mgx-up .9s cubic-bezier(.2,.8,.2,1) both}
  895. .mg-lines li:nth-child(1){animation-delay:1.2s}
  896. .mg-lines li:nth-child(2){animation-delay:1.35s}
  897. .mg-lines li:nth-child(3){animation-delay:1.5s}
  898. .mg-lines b{display:block;font:italic 700 clamp(13px,1.7cqw,22px)/1.1 'Playfair Display','Times New Roman',serif;color:#fff}
  899. .mg-badge{position:absolute;z-index:5;left:36cqw;bottom:4cqw;width:11cqw;min-width:84px;aspect-ratio:1;animation:mgx-spin 22s linear infinite}
  900. .mg-badge svg{display:block;width:100%;height:100%}
  901.  
  902. /* drop cap */
  903. .mg-bio p:nth-of-type(1)::first-letter{float:left;padding:.06em .09em 0 0;font:900 3.2em/.8 'Playfair Display','Times New Roman',serif;color:#0d0d0d}
  904.  
  905. /* contents-style nav */
  906. .mg-toc{counter-reset:toc;align-items:baseline}
  907. .mg-toc::before{content:"In this issue";flex:none;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8c8c8c}
  908. .mg-toc a{counter-increment:toc;white-space:nowrap}
  909. .mg-toc a::before{content:counter(toc,decimal-leading-zero);margin-right:8px;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.14em;vertical-align:super;opacity:.55}
  910.  
  911. /* paper */
  912. .mg-band.light,.mg-band.mg-pull{background-color:#f4f1ea;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
  913. .mg-band.mg-pull{background-color:#e9e4d8;color:#0d0d0d}
  914.  
  915. /* running headers + section numbers */
  916. .mg-sec{position:relative}
  917. .mg-sec::before{position:absolute;top:28px;left:5vw;width:calc(100% - 10vw);padding-bottom:9px;border-bottom:1px solid currentColor;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;opacity:.5}
  918. #mg-gallery .mg-sec::before{content:"The Aurora Review · Lookbook · p. 12"}
  919. #mg-recs .mg-sec::before{content:"The Aurora Review · Contributors · p. 24"}
  920. #mg-bots .mg-sec::before{content:"The Aurora Review · Features · p. 36"}
  921. #mg-block .mg-sec::before{content:"The Aurora Review · Letters & Rules · p. 48"}
  922. .mg-pull .mg-sec::before{content:none}
  923. .mg-head small::before{counter-increment:sec;content:"№ " counter(sec,decimal-leading-zero) " — "}
  924.  
  925. /* gallery plates */
  926. .mg-gal{counter-reset:fig}
  927. .mg-gal figure{counter-increment:fig}
  928. .mg-gal figure::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);pointer-events:none;transition:inset .4s}
  929. .mg-gal figure:hover::after{inset:16px}
  930. .mg-gal figcaption::before{content:"Fig. " counter(fig) " · ";font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
  931.  
  932. /* pull quote */
  933. .mg-pull .mg-sec{padding:100px 5vw 110px}
  934. .mg-pq{margin:0;position:relative}
  935. .mg-pq-mark{position:absolute;left:-.04em;top:-.38em;font:900 clamp(120px,22vw,300px)/1 'Playfair Display','Times New Roman',serif;color:transparent;-webkit-text-stroke:1.5px #0d0d0d;opacity:.28;pointer-events:none}
  936. .mg-pq p{position:relative;margin:0;max-width:1000px;font:900 clamp(34px,6.4vw,92px)/1 'Playfair Display','Times New Roman',serif;letter-spacing:-.02em}
  937. .mg-pq em{font-weight:500}
  938. .mg-pq cite{display:block;margin-top:28px;padding-top:14px;max-width:340px;border-top:4px double #0d0d0d;font:600 11px/1.4 'Inter',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal}
  939.  
  940. /* feature numerals */
  941. .mg-about>div:not(.mg-head){counter-reset:feat}
  942. .mg-feat{counter-increment:feat;position:relative}
  943. .mg-feat::before{content:counter(feat,decimal-leading-zero);position:absolute;right:0;top:10px;font:900 clamp(56px,8vw,110px)/1 'Playfair Display','Times New Roman',serif;color:transparent;-webkit-text-stroke:1px #0d0d0d;opacity:.2;transition:opacity .4s,color .4s;pointer-events:none}
  944. .mg-feat:hover::before{opacity:.12;color:#0d0d0d}
  945.  
  946. /* footer */
  947. .mg-foot{padding-top:44px;order:3}
  948.  
  949. @media screen and (max-width:800px){
  950. .mg-mast{padding:76px 6vw 0;text-align:left}
  951. .mg-mast-top span:nth-child(2){display:none}
  952. .mg-mast-title{max-width:52vw;font-size:8.8vw}
  953. .mg-mast-sub{font-size:13px;line-height:1.3}
  954. .mg-spine,.mg-lines{display:none}
  955. .mg-badge{left:auto;right:4vw;top:78vw;bottom:auto;width:24vw}
  956. .mg-sec::before{left:6vw;width:calc(100% - 12vw)}
  957. .mg-pull .mg-sec{padding:76px 6vw 84px}
  958. .mg-toc::before{display:none}
  959. }
  960.  
  961. /* ===== V2: TOP NAV + NOTIFICATIONS + SETTINGS MENU ===== */
  962. :root{--mg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
  963.  
  964. /* --- top nav (Home / For You): editorial tabs --- */
  965. html body .pp-top-bar nav a,html body .pp-top-bar nav button,html body .pp-top-bar [role="tab"]{
  966. position:relative;padding:.4rem .7rem !important;border:0 !important;border-radius:0 !important;background:transparent !important;
  967. color:#9a9a9a !important;-webkit-text-fill-color:#9a9a9a !important;
  968. font:italic 500 1.2rem/1 'Playfair Display','Didot','Times New Roman',serif !important;transition:color .25s}
  969. html body .pp-top-bar nav a::after,html body .pp-top-bar [role="tab"]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  970. html body .pp-top-bar nav a:hover,html body .pp-top-bar [role="tab"]:hover{color:#fff !important;-webkit-text-fill-color:#fff !important}
  971. html body .pp-top-bar nav a:hover::after,html body .pp-top-bar [role="tab"]:hover::after{transform:scaleX(1)}
  972. html body .pp-top-bar nav :is([aria-current], .active, [class*="active" i], [class*="selected" i]),
  973. html body .pp-top-bar [role="tab"][aria-selected="true"]{background:transparent !important;color:#fff !important;-webkit-text-fill-color:#fff !important;font-weight:700 !important}
  974. html body .pp-top-bar nav :is([aria-current], .active, [class*="active" i], [class*="selected" i])::after,
  975. html body .pp-top-bar [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
  976. html body .pp-top-bar .pp-top-bar-search{height:40px;background:transparent !important;border:0 !important;border-bottom:1px solid #666 !important;border-radius:0 !important}
  977. html body .pp-top-bar .pp-top-bar-search:focus-within{border-bottom-color:#fff !important}
  978. html body .pp-top-bar .pp-top-bar-search input{font:italic 400 1.05rem 'Playfair Display','Didot','Times New Roman',serif !important}
  979. html body .pp-top-bar-create-char::after{border-radius:0;padding:.5rem 1.1rem;font:italic 700 1rem/1 'Playfair Display','Didot','Times New Roman',serif;transition:background .25s,color .25s}
  980. html body .pp-top-bar-create-char:hover::after{background:#0d0d0d;color:#fff}
  981.  
  982. /* --- notifications popover + profile settings menu: paper pages --- */
  983. html body .pp-top-bar-app-menu-list,html body [class*="Popover_"]{
  984. background:#f4f1ea !important;background-image:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;color:#0d0d0d !important;
  985. border:1px solid #0d0d0d !important;border-radius:0 !important;
  986. box-shadow:8px 8px 0 rgba(255,255,255,.88) !important;padding:16px 18px !important}
  987. html body [class*="popoverHeader_"]{border:0 !important;border-bottom:4px double #0d0d0d !important;background:transparent !important;padding:.3rem 0 .7rem !important}
  988. html body [class*="popoverTitle_"]{color:#0d0d0d !important;font:italic 900 2rem/1 'Playfair Display','Didot','Times New Roman',serif !important}
  989. html body [class*="popoverHeader_"] button{background:transparent !important;border:1px solid #0d0d0d !important;transition:background .25s}
  990. html body [class*="popoverHeader_"] button:hover{background:#0d0d0d !important}
  991. html body [class*="popoverHeader_"] button svg{color:#0d0d0d !important}
  992. html body [class*="popoverHeader_"] button:hover svg{color:#f4f1ea !important}
  993. html body [class*="Popover_"] [class*="notificationsList_"]{counter-reset:notif}
  994. html body [class*="Popover_"] [class*="_notificationItem_"]{counter-increment:notif;border:0 !important;border-bottom:1px dotted rgba(13,13,13,.45) !important;background:transparent !important;padding:.9rem .3rem !important;transition:background .25s,padding-left .3s}
  995. html body [class*="Popover_"] [class*="_notificationItem_"]::before{content:"No. " counter(notif,decimal-leading-zero);position:absolute;right:4px;bottom:6px;font:600 9px/1 'Inter',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(13,13,13,.45)}
  996. html body [class*="Popover_"] [class*="_notificationItem_"]:hover{background:rgba(13,13,13,.06) !important;padding-left:.7rem !important}
  997. html body [class*="Popover_"] [class*="_notificationItem_"]:has([class*="_contentWrapperUnread_"]){background:#e6e0d0 !important;border-left:4px solid #0d0d0d !important}
  998. html body [class*="Popover_"] [class*="_notificationItem_"] :where(div,span,p,h1,h2,h3,h4,strong,b):not([class*="vatar"]):not([class*="Icon"]):not([class*="Indicator_"]){color:#0d0d0d !important;-webkit-text-fill-color:#0d0d0d !important;font-family:'Playfair Display','Didot','Times New Roman',serif !important;font-style:italic !important;font-size:15px}
  999. html body [class*="Popover_"] [class*="_notificationItem_"] img{filter:grayscale(1) contrast(1.05)}
  1000. html body [class*="Popover_"] [class*="_notificationItem_"]:hover img{filter:grayscale(0)}
  1001. html body [class*="Popover_"] [class*="Indicator_"]{background:#0d0d0d !important}
  1002. html body [class*="Popover_"] [class*="_loadMoreButton_"]{border:1px solid #0d0d0d !important;border-radius:0 !important;color:#0d0d0d !important;transition:background .25s,color .25s}
  1003. html body [class*="Popover_"] [class*="_loadMoreButton_"]:hover{background:#0d0d0d !important;color:#f4f1ea !important}
  1004. html body [class*="Popover_"] [class*="_emptyState_"]{border:1px dashed rgba(13,13,13,.5) !important;border-radius:0 !important;color:#444 !important}
  1005.  
  1006. html body .pp-top-bar-app-menu-list::before{content:"Settings & more";display:block;padding-bottom:10px;margin-bottom:4px;border-bottom:4px double #0d0d0d;font:italic 900 1.7rem/1 'Playfair Display','Didot','Times New Roman',serif;color:#0d0d0d}
  1007. html body .pp-top-bar-app-menu-list a,html body .pp-top-bar-app-menu-list-item,html body .css-1rokoft{color:#0d0d0d !important;-webkit-text-fill-color:#0d0d0d !important;border-bottom:1px dotted rgba(13,13,13,.45) !important;transition:background .25s,color .25s,padding-left .3s}
  1008. html body .pp-top-bar-app-menu-list-item svg,html body .css-1rokoft svg{color:#0d0d0d !important}
  1009. html body .pp-top-bar-app-menu-list-item:hover,html body .css-1rokoft:hover{background:#0d0d0d !important;color:#f4f1ea !important;-webkit-text-fill-color:#f4f1ea !important;padding-left:.8rem !important}
  1010. html body .pp-top-bar-app-menu-list-item:hover svg,html body .css-1rokoft:hover svg,html body .pp-top-bar-app-menu-list-item:hover a{color:#f4f1ea !important;-webkit-text-fill-color:#f4f1ea !important}
  1011. html body .pp-top-bar-app-menu-list hr{border-top:1px solid rgba(13,13,13,.35)}
  1012.  
  1013. /* --- solid, readable popovers --- */
  1014. html body [class*="Popover_"] [class*="Popover_"]{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
  1015. html body [class*="Popover_"] [class*="notificationsList_"],html body [class*="Popover_"] [class*="popoverHeader_"]{background:#f4f1ea !important}
  1016. html body [class*="Popover_"] [class*="_notificationItem_"]:has([class*="_contentWrapperUnread_"]){background:#e2dccb !important}
  1017. html body .pp-top-bar-app-menu-list{background:#f4f1ea !important}
  1018.  
  1019. /* ===== SLEEK CARDS v2 (fixes the cut-off Limitless tag) ===== */
  1020. html body div.pp-cc-list-container.pp-cc-list-container {
  1021. grid-auto-rows: 272px !important; gap: 22px !important;
  1022. }
  1023.  
  1024. /* card shell */
  1025. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper {
  1026. height: 272px !important; min-height: 272px !important;
  1027. background: linear-gradient(135deg, #0c0c0c, #050505) !important;
  1028. box-shadow: inset 0 0 0 1px #1a1a1a !important;
  1029. }
  1030. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper:hover {
  1031. transform: translateY(-4px);
  1032. box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 18px 40px rgba(0,0,0,.9) !important;
  1033. }
  1034.  
  1035. /* photo */
  1036. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio {
  1037. width: 184px !important; height: 272px !important;
  1038. }
  1039.  
  1040. /* kicker, name, description */
  1041. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper::before {
  1042. top: 24px !important; left: 208px !important; width: calc(100% - 236px) !important;
  1043. padding: 0 !important; font-size: 9px !important; letter-spacing: .3em !important; color: #5c5c5c !important;
  1044. }
  1045. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name {
  1046. top: 50px !important; left: 208px !important; width: calc(100% - 236px) !important;
  1047. max-height: 56px !important; font-size: 26px !important; line-height: 1.08 !important;
  1048. }
  1049. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description {
  1050. top: 112px !important; left: 208px !important; width: calc(100% - 236px) !important;
  1051. -webkit-line-clamp: 2 !important; font-size: 14px !important; line-height: 1.5 !important; color: #9a9a9a !important;
  1052. }
  1053.  
  1054. /* footer: hairline, chats left, Read → right */
  1055. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box {
  1056. left: 208px !important; width: calc(100% - 236px) !important; height: 48px !important;
  1057. border-top: 1px solid #1f1f1f !important;
  1058. }
  1059. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-chats { font-size: 14px !important; }
  1060. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box::after { font-size: 15px !important; }
  1061.  
  1062. /* tag row: normal flow, scrollable, nothing clipped */
  1063. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags {
  1064. top: 176px !important; bottom: auto !important;
  1065. left: 208px !important; width: calc(100% - 236px) !important;
  1066. height: 40px !important; padding: 0 !important; gap: 14px !important;
  1067. align-items: center !important;
  1068. overflow-x: auto !important; overflow-y: hidden !important;
  1069. clip-path: none !important;
  1070. }
  1071.  
  1072. /* Limitless / Limited: reset the old floating-chip positioning at every nesting level */
  1073. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child,
  1074. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child,
  1075. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child,
  1076. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child > :first-child > :first-child > :first-child {
  1077. position: static !important; left: auto !important; top: auto !important; transform: none !important;
  1078. display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important;
  1079. width: max-content !important; margin: 0 !important; padding: 0 !important;
  1080. border: 0 !important; border-radius: 0 !important; filter: none !important;
  1081. background: none !important; animation: none !important;
  1082. -webkit-text-fill-color: transparent !important; color: transparent !important;
  1083. font: italic 700 14px/1.3 'Playfair Display','Times New Roman',serif !important;
  1084. letter-spacing: .02em !important; text-transform: none !important;
  1085. }
  1086.  
  1087. /* the Limitless / Limited tag: no border, no background, just the text shine */
  1088. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :first-child {
  1089. padding: 0 !important;
  1090. border: 0 !important; border-radius: 0 !important;
  1091. background-color: transparent !important;
  1092. background-image: linear-gradient(110deg, #ffffff 0%, #ffffff 42%, #9c9c9c 49%, #ffffff 56%, #ffffff 100%) !important;
  1093. background-size: 250% 100% !important; background-position: 150% 0 !important;
  1094. -webkit-background-clip: text !important; background-clip: text !important;
  1095. animation: mgx-chipshine 2.6s linear infinite !important;
  1096. }
  1097.  
  1098. /* regular tags: quieter */
  1099. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags > :not(:first-child) {
  1100. font-size: 9.5px !important; letter-spacing: .14em !important; color: #9a9a9a !important;
  1101. }
  1102. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper:hover .pp-cc-tags > :not(:first-child) { color: #e6e6e6 !important; }
  1103.  
  1104. /* mobile */
  1105. @media screen and (max-width: 800px) {
  1106. html body div.pp-cc-list-container.pp-cc-list-container { grid-auto-rows: 250px !important; }
  1107. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper { height: 250px !important; min-height: 250px !important; }
  1108. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-avatar-aspect-ratio { width: 104px !important; height: 250px !important; }
  1109. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper::before,
  1110. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name,
  1111. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description,
  1112. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .profile-character-card-stats-box,
  1113. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags { left: 118px !important; width: calc(100% - 136px) !important; }
  1114. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-name { top: 44px !important; font-size: 21px !important; max-height: 46px !important; }
  1115. html body div.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-description { top: 98px !important; font-size: 12.5px !important; }
  1116. html body div.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container.pp-cc-list-container > .pp-cc-wrapper .pp-cc-tags { top: 158px !important; }
  1117. }
  1118.  
  1119. /* ===== FILTER BAR: clean, sleek, full width ===== */
  1120. html body .profile-filters-flex-inner,
  1121. html body div:has(> .css-m8ywhg) { width: 100% !important; max-width: none !important; margin: 0 auto !important; }
  1122. html body .css-m8ywhg {
  1123. display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important;
  1124. width: 100% !important; max-width: 1200px !important; min-height: 64px;
  1125. margin: 1.6rem auto 0 !important; padding: 0 !important; gap: 28px !important;
  1126. border: 0 !important; border-top: 1px solid #2c2c2c !important; border-bottom: 1px solid #2c2c2c !important;
  1127. border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  1128. }
  1129. html body .pp-pg-total {
  1130. order: 0 !important; flex: none !important; width: auto !important; min-width: 0 !important; overflow: visible !important;
  1131. display: inline-flex !important; align-items: baseline !important; gap: 8px;
  1132. margin: 0 !important; padding: 0 28px 0 0 !important;
  1133. border: 0 !important; border-right: 1px solid #2c2c2c !important; border-radius: 0 !important;
  1134. background: transparent !important; box-shadow: none !important;
  1135. }
  1136. html body .pp-pg-total p { margin: 0 !important; white-space: nowrap !important; overflow: visible !important; }
  1137. html body .pp-pg-total strong { font: italic 900 1.9rem/1 'Playfair Display','Times New Roman',serif !important; color: #fff !important; }
  1138. html body .pp-pg-total p::after { content: " bots" !important; font: italic 500 1rem/1 'Playfair Display','Times New Roman',serif !important; color: #8c8c8c !important; letter-spacing: 0 !important; }
  1139. html body .pp-fl-search-input {
  1140. flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 44px;
  1141. padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  1142. font: italic 400 1.1rem 'Playfair Display','Times New Roman',serif !important; color: #fff !important;
  1143. }
  1144. html body .pp-fl-search-input::placeholder { color: #6a6a6a !important; }
  1145. html body .pp-fl-search-input:focus { outline: none !important; }
  1146. html body .css-m8ywhg :has(> .pp-fl-search-input) { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  1147. html body .pp-fl-filter-button {
  1148. flex: none !important; height: 38px !important; padding: 0 18px 0 14px !important;
  1149. border: 1px solid #444 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
  1150. transition: background .2s, border-color .2s;
  1151. }
  1152. html body .pp-fl-filter-button:hover { background: #fff !important; border-color: #fff !important; }
  1153. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  1154. flex: none; width: 150px; min-width: 150px; min-height: 38px;
  1155. border: 0 !important; border-left: 1px solid #2c2c2c !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  1156. }
  1157. @media screen and (max-width: 800px) {
  1158. html body .css-m8ywhg { flex-wrap: wrap !important; gap: 10px 16px !important; padding: 12px 0 !important; }
  1159. html body .pp-pg-total { padding-right: 16px !important; }
  1160. html body .pp-fl-search-input { flex: 1 1 100% !important; order: 5; border-top: 1px solid #2c2c2c !important; padding-top: 4px !important; }
  1161. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control { border-left: 0 !important; }
  1162. }
  1163.  
  1164. /* ===== FILTER BAR: no borders, no underlines ===== */
  1165. html body .css-m8ywhg,
  1166. html body .pp-pg-total,
  1167. html body .pp-fl-search-input,
  1168. html body .pp-fl-filter-button,
  1169. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  1170. border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important;
  1171. outline: 0 !important; box-shadow: none !important;
  1172. }
  1173. html body .pp-fl-filter-button { background: #1c1c1c !important; }
  1174. html body .pp-fl-filter-button:hover { background: #fff !important; }
  1175. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:hover { border: 0 !important; }
  1176. @media screen and (max-width: 800px) {
  1177. html body .pp-fl-search-input { border: 0 !important; }
  1178. html body :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control { border: 0 !important; }
  1179. }
  1180.  
  1181. /* =====================================================================
  1182. V3: full-width masthead rules, transparent top bar, phone footer,
  1183. creator covers
  1184. ===================================================================== */
  1185.  
  1186. /* ---- 1. Masthead rules span the entire width ---- */
  1187. .mg-mast{padding:74px 0 0 !important}
  1188. .mg-mast-top,.mg-mast-title,.mg-mast-sub{padding-left:5vw;padding-right:5vw;width:100%}
  1189. .mg-mast-top{border-bottom:1px solid #2c2c2c}
  1190. .mg-mast-sub{border-top:4px double #fff;border-bottom:1px solid #2c2c2c}
  1191. @media screen and (max-width:800px){
  1192. .mg-mast{padding:76px 0 0 !important}
  1193. .mg-mast-top,.mg-mast-title,.mg-mast-sub{padding-left:6vw;padding-right:6vw}
  1194. .mg-mast-title{max-width:none;width:100%}
  1195. }
  1196.  
  1197. /* ---- 2. Top bar fully transparent ---- */
  1198. html body .pp-top-bar,
  1199. html body div:has(> .pp-top-bar){
  1200. background:transparent !important; background-image:none !important;
  1201. -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  1202. border:0 !important; box-shadow:none !important;
  1203. }
  1204. /* optional: keeps the white text readable over the light paper sections (also tints the avatar):
  1205. html body .pp-top-bar{mix-blend-mode:difference}
  1206. */
  1207.  
  1208. /* ---- 3. Phone bottom bar (home / explore / chats / profile) ---- */
  1209. @media screen and (max-width:800px){
  1210. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *){
  1211. background:#0d0d0d !important; background-image:none !important;
  1212. -webkit-backdrop-filter:none !important; backdrop-filter:none !important; filter:none !important;
  1213. border:0 !important; border-top:4px double #ffffff !important; border-radius:0 !important;
  1214. box-shadow:0 -14px 30px rgba(0,0,0,.6) !important;
  1215. z-index:100000 !important;
  1216. }
  1217. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *)::before,
  1218. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *)::after{
  1219. content:none !important; display:none !important;
  1220. }
  1221. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is(a,button){
  1222. position:relative; background:transparent !important; border:0 !important; box-shadow:none !important;
  1223. color:#8c8c8c !important; transition:color .25s, transform .3s cubic-bezier(.2,.8,.2,1);
  1224. }
  1225. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is(a,button):active{transform:translateY(-3px)}
  1226. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) svg{
  1227. color:#9a9a9a !important; stroke:currentColor !important; transition:color .25s;
  1228. }
  1229. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is(a,button):hover svg,
  1230. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is([aria-current],.active,[class*="active" i],[class*="selected" i]) svg{
  1231. color:#ffffff !important;
  1232. }
  1233. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is([aria-current],.active,[class*="active" i],[class*="selected" i])::after{
  1234. content:"" !important; display:block !important; position:absolute; left:28%; right:28%; bottom:-4px; height:2px; background:#fff;
  1235. }
  1236. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) img{
  1237. border-radius:50% !important; outline:1px solid #ffffff; outline-offset:2px;
  1238. filter:grayscale(1) contrast(1.05); transition:filter .4s;
  1239. }
  1240. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) :is(a,button):active img{filter:grayscale(0)}
  1241. html body :is([class*="bottomNav" i],[class*="bottom-nav" i],[class*="BottomNavigation" i],[class*="mobileNav" i],[class*="mobile-nav" i],[class*="tabBar" i],[class*="tab-bar" i],[class*="bottomBar" i],[class*="bottom-bar" i],:is(div,nav)[class]:has(> a[href="/chats"])):not(.pp-top-bar *) [class*="badge" i]{
  1242. background:#ffffff !important; color:#0d0d0d !important; border:1.5px solid #0d0d0d !important; border-radius:999px !important;
  1243. font:italic 700 11px/1 'Playfair Display','Didot','Times New Roman',serif !important; box-shadow:none !important;
  1244. }
  1245. }
  1246.  
  1247. /* ---- 4. Creator recs: magazine covers ---- */
  1248. .mg-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;align-items:start;padding-bottom:30px}
  1249. .mg-cov{position:relative;display:block}
  1250. .mg-cov:nth-child(2){margin-top:64px}
  1251. .mg-cov-art{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1c1c1c;box-shadow:0 0 0 1px #3a3a3a,12px 12px 0 rgba(255,255,255,.9);transition:box-shadow .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
  1252. .mg-cov:hover .mg-cov-art{transform:translate(-4px,-4px);box-shadow:0 0 0 1px #fff,18px 18px 0 rgba(255,255,255,.9)}
  1253. .mg-cov-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2a2a;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .5s,transform .8s}
  1254. .mg-cov:hover .mg-cov-art img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
  1255. .mg-cov-art::before{content:"";position:absolute;inset:10px;z-index:3;border:1px solid rgba(255,255,255,.55);pointer-events:none;transition:inset .4s}
  1256. .mg-cov:hover .mg-cov-art::before{inset:16px}
  1257. .mg-cov-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,transparent 22%,transparent 48%,rgba(0,0,0,.92) 100%)}
  1258. .mg-cov-flag{position:absolute;z-index:4;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;font:600 9px/1 'Inter',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#fff}
  1259. .mg-cov-no{position:absolute;z-index:2;right:18px;top:44px;font:900 clamp(72px,9vw,132px)/.9 'Playfair Display','Times New Roman',serif;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);letter-spacing:-.04em;pointer-events:none}
  1260. .mg-cov-name{position:absolute;z-index:4;left:24px;right:24px;bottom:26px}
  1261. .mg-cov-name h3{margin:0 0 8px;font:900 clamp(30px,3.4vw,48px)/.95 'Playfair Display','Times New Roman',serif;letter-spacing:-.02em;color:#fff}
  1262. .mg-cov-name span{display:inline-block;padding-top:8px;border-top:4px double #fff;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#d0d0d0}
  1263. .mg-cov-in{padding:28px 6px 0 2px}
  1264. .mg-cov-quote{margin:0 0 20px;font:italic 500 19px/1.4 'Playfair Display','Times New Roman',serif;color:#e6e6e6}
  1265. .mg-cov-quote::first-letter{float:left;margin:2px 8px 0 0;font:900 3.2em/.8 'Playfair Display','Times New Roman',serif;color:#fff}
  1266. .mg-cov-meta{display:flex;align-items:baseline;gap:10px;margin:0 0 22px;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8c8c8c}
  1267. .mg-cov-meta i{flex:1;border-bottom:1px dotted #555;transform:translateY(-3px)}
  1268. .mg-cov-meta b{font:italic 700 16px/1 'Playfair Display','Times New Roman',serif;letter-spacing:0;text-transform:none;color:#fff}
  1269. .mg-cov-in a{display:inline-block;padding-bottom:4px;border-bottom:1px solid #fff;color:#fff;font:italic 600 17px/1 'Playfair Display','Times New Roman',serif;transition:letter-spacing .3s,border-color .3s}
  1270. .mg-cov-in a::after{content:" \2192";display:inline-block;transition:transform .3s}
  1271. .mg-cov-in a:hover{letter-spacing:.04em}
  1272. .mg-cov-in a:hover::after{transform:translateX(6px)}
  1273. .mg-covers.mg-rv{animation:none}
  1274. @supports (animation-timeline:view()){
  1275. .mg-cov{animation:mgx-pop linear both;animation-timeline:view();animation-range:entry 0% entry 70%;--r:0deg}
  1276. }
  1277. @media screen and (max-width:800px){
  1278. .mg-covers{grid-template-columns:1fr;gap:56px}
  1279. .mg-cov:nth-child(2){margin-top:0}
  1280. .mg-cov-art{box-shadow:0 0 0 1px #3a3a3a,8px 8px 0 rgba(255,255,255,.9)}
  1281. }
  1282.  
  1283. /* ---- 5. Next issue = editorial cover-story teaser ---- */
  1284. @keyframes mgx-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  1285. @keyframes mgx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  1286.  
  1287. .mg-nx{position:relative;margin:48px 0 0;background:#0d0d0d;color:#fff;overflow:hidden;
  1288. box-shadow:12px 12px 0 rgba(13,13,13,.18);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
  1289. .mg-nx:hover{transform:translate(-3px,-3px);box-shadow:16px 16px 0 rgba(13,13,13,.28)}
  1290. .mg-nx::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.35);pointer-events:none;z-index:2}
  1291. .mg-nx-top{display:flex;justify-content:space-between;gap:14px;padding:26px 30px 12px;
  1292. border-bottom:4px double #fff;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#bdbdbd}
  1293. .mg-nx-body{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 28px;padding:26px 30px 8px}
  1294. .mg-nx-no{grid-row:1 / span 3;align-self:start;font:900 clamp(90px,13vw,190px)/.8 'Playfair Display','Times New Roman',serif;
  1295. color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);letter-spacing:-.05em;transition:color .5s}
  1296. .mg-nx:hover .mg-nx-no{color:rgba(255,255,255,.12)}
  1297. .mg-nx-kick{margin:6px 0 0;font:600 10px/1 'Inter',Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#8c8c8c}
  1298. .mg-nx-title{margin:0;font:900 clamp(36px,5vw,70px)/.92 'Playfair Display','Times New Roman',serif;letter-spacing:-.025em}
  1299. .mg-nx-title em{font-weight:500}
  1300. .mg-nx-deck{margin:0;font:italic 500 clamp(16px,1.8vw,22px)/1.25 'Playfair Display','Times New Roman',serif;color:#d0d0d0}
  1301. .mg-nx-rule{position:relative;height:1px;margin:22px 30px 0;background:#3a3a3a}
  1302. .mg-nx-rule::after{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:#fff;transform-origin:0 50%;animation:mgx-rule 1.2s .2s cubic-bezier(.2,.8,.2,1) both}
  1303. .mg-nx-cols{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start;padding:20px 30px 6px}
  1304. .mg-nx-blurb{margin:0;max-width:430px;font:400 14.5px/1.65 'Inter',Arial,sans-serif;color:#c8c8c8}
  1305. .mg-nx-blurb::first-letter{float:left;padding:.06em .1em 0 0;font:900 3.3em/.8 'Playfair Display','Times New Roman',serif;color:#fff}
  1306. .mg-nx-pq{margin:0;max-width:180px;padding:2px 0 2px 16px;border-left:3px solid #fff;font:italic 500 18px/1.3 'Playfair Display','Times New Roman',serif;color:#fff}
  1307. .mg-nx-pq small{display:block;margin-top:10px;font:600 9px/1.4 'Inter',Arial,sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:#8c8c8c}
  1308. .mg-nx-foot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:14px 30px 0;padding:14px 0 26px;border-top:1px solid #2c2c2c;
  1309. font:600 10px/1.4 'Inter',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8c8c8c}
  1310. .mg-nx-foot b{font:italic 700 17px/1 'Playfair Display','Times New Roman',serif;letter-spacing:0;text-transform:none;color:#fff}
  1311. .mg-nx-foot b::after{content:" \2192";display:inline-block;animation:mgx-nudge 1.8s ease-in-out infinite}
  1312. @media screen and (max-width:800px){
  1313. .mg-nx-body{grid-template-columns:1fr;padding:22px 22px 4px}
  1314. .mg-nx-no{grid-row:auto;font-size:84px;margin-bottom:6px}
  1315. .mg-nx-top{padding:24px 22px 12px}
  1316. .mg-nx-rule{margin:20px 22px 0}
  1317. .mg-nx-cols{grid-template-columns:1fr;padding:18px 22px 4px}
  1318. .mg-nx-pq{max-width:none}
  1319. .mg-nx-foot{margin:14px 22px 0;flex-direction:column;gap:8px}
  1320. }
  1321. </style>
  1322. <div class="mg-app">
  1323. <header class="mg-mast"><div class="mg-mast-top"><span>Vol. 01 &middot; No. 01</span><span>The Fempov &amp; Anypov Edition</span></div><div class="mg-mast-title">The Aurora <em>Review</em></div><div class="mg-mast-sub">questionable pixel men &middot; dark romance &middot; aliens &middot; dilfs, obviously</div></header>
  1324. <div class="mg-stage">
  1325. <section class="mg-hero" id="mg-cover">
  1326. <div class="mg-left">
  1327. <img class="mg-photo" src="https://i.imgur.com/uSuvLnj.png" alt="">
  1328. <p class="mg-cap">Writer of questionable pixel men. Rehab psychology and psycholinguistics student, literature nerd, and future full time author.</p>
  1329. </div>
  1330. <div class="mg-letter" aria-hidden="true"></div>
  1331. <div class="mg-spine" aria-hidden="true">The Bookstand &middot; Issue 01 &middot; Fempov &amp; Anypov</div>
  1332. <ul class="mg-lines" aria-hidden="true"><li><b>Toxic men</b>diagnosed, not excused</li><li><b>Evander Laurent</b>your tired trophy husband</li><li><b>Aliens &amp; dilfs</b>obviously</li></ul>
  1333. <div class="mg-badge" aria-hidden="true"><svg viewBox="0 0 120 120"><defs><path id="mgc" d="M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0"/></defs><circle cx="60" cy="60" r="58" fill="#fff"/><circle cx="60" cy="60" r="30" fill="none" stroke="#0d0d0d" stroke-width="1"/><text font-size="10.5" font-family="Inter,Arial,sans-serif" font-weight="600" fill="#0d0d0d"><textPath href="#mgc" textLength="272" lengthAdjust="spacing">ALL ORIGINAL &#183; BOT ART IS MINE &#183; </textPath></text><text x="60" y="69" text-anchor="middle" font-size="24" font-family="Playfair Display,serif" font-style="italic" font-weight="900" fill="#0d0d0d">No.1</text></svg></div>
  1334. <div class="mg-bio">
  1335. <h1>Jazmyn Aurora</h1>
  1336. <p>hey local bot clicker! this is my corner of the site where i write questionable pixel men instead of finishing my actual degree. i am jazmyn (or aurora) and i am balancing a basic understanding of css with the terrifying dream of becoming a full time author.</p>
  1337. <p>my daily life is working on a novel, finishing my series, and pretending my double major in rehab psychology and psycholinguistics (plus a literature interdisciplinary major) is helping me write better fictional men. spoiler: it is mostly just helping me diagnose them.</p>
  1338. <p>i write fempov and anypov: toxic men who need serious help, comedic intros, fantasy, actual literal aliens, and dilfs. obviously.</p>
  1339. </div>
  1340. </section>
  1341. </div>
  1342. <div class="mg-marquee" aria-hidden="true"><div class="mg-marquee-track">
  1343. <div><span>Fempov</span><span>Anypov</span><span>Toxic men</span><span>Comedic intros</span><span>Aliens</span><span>Dilfs</span><span>Dark romance</span><span>All original</span></div>
  1344. <div><span>Fempov</span><span>Anypov</span><span>Toxic men</span><span>Comedic intros</span><span>Aliens</span><span>Dilfs</span><span>Dark romance</span><span>All original</span></div>
  1345. </div></div>
  1346. <nav class="mg-toc">
  1347. <a href="#mg-gallery" target="_self">Gallery</a>
  1348. <a href="#mg-recs" target="_self">Creator recs</a>
  1349. <a href="#mg-bots" target="_self">About the bots</a>
  1350. <a href="#mg-block" target="_self">Blocklist</a>
  1351. <a href="#profile-tabs" target="_self">All bots</a>
  1352. </nav>
  1353. <div class="mg-band light" id="mg-gallery">
  1354. <section class="mg-sec">
  1355. <div class="mg-head mg-rv">
  1356. <small>Gallery</small>
  1357. <h2>The <em>lookbook</em></h2>
  1358. <p>Bot art, moodboards and favourite scenes. Hover a picture and it turns to colour.</p>
  1359. </div>
  1360. <div class="mg-gal mg-rv">
  1361. <figure class="g1"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Evander Laurent</figcaption></figure>
  1362. <figure class="g2"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Caption two</figcaption></figure>
  1363. <figure class="g3"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Caption three</figcaption></figure>
  1364. <figure class="g4"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Caption four</figcaption></figure>
  1365. <figure class="g5"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Caption five</figcaption></figure>
  1366. <figure class="g6"><img src="PUT_IMAGE_LINK_HERE" alt=""><figcaption>Caption six</figcaption></figure>
  1367. </div>
  1368. </section>
  1369. </div>
  1370. <div class="mg-band dark" id="mg-recs">
  1371. <section class="mg-sec">
  1372. <div class="mg-head mg-rv">
  1373. <small>Creator recs</small>
  1374. <h2>Read <em>these</em> too</h2>
  1375. <p>Creators i trust with my free time. Go follow them.</p>
  1376. </div>
  1377. <div class="mg-covers mg-rv">
  1378.  
  1379. <article class="mg-cov">
  1380. <div class="mg-cov-art">
  1381. <img src="PUT_CREATOR_PIC_LINK_HERE" alt="">
  1382. <div class="mg-cov-flag"><span>The Aurora Review</span><span>Contributor</span></div>
  1383. <span class="mg-cov-no" aria-hidden="true">01</span>
  1384. <div class="mg-cov-name">
  1385. <h3>Creator name</h3>
  1386. <span>@handle</span>
  1387. </div>
  1388. </div>
  1389. <div class="mg-cov-in">
  1390. <p class="mg-cov-quote">One or two sentences on why you love their bots.</p>
  1391. <div class="mg-cov-meta"><span>Best bot</span><i></i><b>Bot name</b></div>
  1392. <a href="https://janitorai.com/profiles/PUT_THEIR_ID_HERE" target="_blank" rel="noopener">Turn to their page</a>
  1393. </div>
  1394. </article>
  1395.  
  1396. <article class="mg-cov">
  1397. <div class="mg-cov-art">
  1398. <img src="PUT_CREATOR_PIC_LINK_HERE" alt="">
  1399. <div class="mg-cov-flag"><span>The Aurora Review</span><span>Contributor</span></div>
  1400. <span class="mg-cov-no" aria-hidden="true">02</span>
  1401. <div class="mg-cov-name">
  1402. <h3>Creator name</h3>
  1403. <span>@handle</span>
  1404. </div>
  1405. </div>
  1406. <div class="mg-cov-in">
  1407. <p class="mg-cov-quote">One or two sentences on why you love their bots.</p>
  1408. <div class="mg-cov-meta"><span>Best bot</span><i></i><b>Bot name</b></div>
  1409. <a href="https://janitorai.com/profiles/PUT_THEIR_ID_HERE" target="_blank" rel="noopener">Turn to their page</a>
  1410. </div>
  1411. </article>
  1412.  
  1413. <article class="mg-cov">
  1414. <div class="mg-cov-art">
  1415. <img src="PUT_CREATOR_PIC_LINK_HERE" alt="">
  1416. <div class="mg-cov-flag"><span>The Aurora Review</span><span>Contributor</span></div>
  1417. <span class="mg-cov-no" aria-hidden="true">03</span>
  1418. <div class="mg-cov-name">
  1419. <h3>Creator name</h3>
  1420. <span>@handle</span>
  1421. </div>
  1422. </div>
  1423. <div class="mg-cov-in">
  1424. <p class="mg-cov-quote">One or two sentences on why you love their bots.</p>
  1425. <div class="mg-cov-meta"><span>Best bot</span><i></i><b>Bot name</b></div>
  1426. <a href="https://janitorai.com/profiles/PUT_THEIR_ID_HERE" target="_blank" rel="noopener">Turn to their page</a>
  1427. </div>
  1428. </article>
  1429.  
  1430. </div>
  1431. </section>
  1432. </div>
  1433. <div class="mg-band mg-pull" id="mg-pull">
  1434. <section class="mg-sec">
  1435. <blockquote class="mg-pq mg-rv"><span class="mg-pq-mark" aria-hidden="true">&ldquo;</span><p>If we are not laughing, <em>we are crying.</em></p><cite>Jazmyn Aurora, on comedic intros</cite></blockquote>
  1436. </section>
  1437. </div>
  1438. <div class="mg-band light" id="mg-bots">
  1439. <section class="mg-sec">
  1440. <div class="mg-about">
  1441. <div class="mg-head mg-rv">
  1442. <small>About the bots</small>
  1443. <h2>What i <em>write</em></h2>
  1444. <p>Fempov and anypov. Everything is original, and the bot art is mine.</p>
  1445. </div>
  1446. <div class="mg-rv">
  1447. <div class="mg-feat">
  1448. <h3>Toxic men</h3>
  1449. <p>Men who need serious professional help, written by someone who studied what that looks like.</p>
  1450. </div>
  1451. <div class="mg-feat">
  1452. <h3>Comedic intros</h3>
  1453. <p>If we are not laughing, we are crying.</p>
  1454. </div>
  1455. <div class="mg-feat">
  1456. <h3>Fantasy, aliens and dilfs</h3>
  1457. <p>Actual literal aliens, and dilfs. Obviously.</p>
  1458. </div>
  1459. <div class="mg-feat">
  1460. <h3>Dark romance</h3>
  1461. <p>Skirts the line. Ddne.</p>
  1462. </div>
  1463. <div class="mg-nx">
  1464. <div class="mg-nx-top"><span>In the next issue</span><span>Cover story &middot; p. 60</span></div>
  1465. <div class="mg-nx-body">
  1466. <span class="mg-nx-no" aria-hidden="true">02</span>
  1467. <p class="mg-nx-kick">Fempov &middot; Anypov</p>
  1468. <p class="mg-nx-title">Evander <em>Laurent</em></p>
  1469. <p class="mg-nx-deck">your tired trophy husband</p>
  1470. </div>
  1471. <div class="mg-nx-rule" aria-hidden="true"></div>
  1472. <div class="mg-nx-cols">
  1473. <p class="mg-nx-blurb">He has the house, the title and the cufflinks. What he does not have is a full night's sleep, and someone is about to notice. A study in exhaustion, expensive taste and a man who needs to be diagnosed, not excused.</p>
  1474. <blockquote class="mg-nx-pq">&ldquo;Tired is just what rich looks like.&rdquo;<small>Evander, on himself</small></blockquote>
  1475. </div>
  1476. <div class="mg-nx-foot"><span>Words &amp; art by Jazmyn Aurora</span><b>Turn to the next issue</b></div>
  1477. </div>
  1478. </div>
  1479. </div>
  1480. </section>
  1481. </div>
  1482. <div class="mg-band dark" id="mg-block">
  1483. <section class="mg-sec">
  1484. <div class="mg-head mg-rv">
  1485. <small>Blocklist</small>
  1486. <h2>Not on the <em>menu</em></h2>
  1487. <p>Please don't request these. My brain is simply not built for them. Dashed ones might happen someday.</p>
  1488. </div>
  1489. <ul class="mg-block-list mg-rv">
  1490. <li>Female bots</li>
  1491. <li class="maybe">MLM</li>
  1492. <li class="maybe">WLW</li>
  1493. <li>Genuine deep angst</li>
  1494. <li>Cheating</li>
  1495. <li>Furry</li>
  1496. <li>Malepov</li>
  1497. <li>Incest</li>
  1498. <li>Canon bots</li>
  1499. </ul>
  1500. <p class="mg-note">Reminder: i leave female bots to the experts, and i like my own weird guys too much to write canon ones.</p>
  1501. </section>
  1502. </div>
  1503. <div class="mg-foot"><b>css profile by jazzkie on janitor.ai</b></div>
  1504. </div>
Advertisement
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!