API tools faq
paste
Cellophane_

Black Swan Theatre Profile Code

Cellophane_
Jul 10th, 2026 (edited)
853
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 91.25 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. /* PAGE SETUP: Removes default profile spacing and lets the theatre layout control the page structure. */
  3.  
  4. .profile-page-flex {
  5. flex-direction: column;
  6. align-items: center;
  7. }
  8. .css-1wfbrwg {
  9. flex-direction: column !important;
  10. }
  11. .profile-uc-background-flex {
  12. width: 100%;
  13. padding: 0;
  14. max-width: unset;
  15. }
  16. .pp-uc-member-since {
  17. display: none;
  18. }
  19. .pp-uc-about-me {
  20. display: contents;
  21. }
  22. .css-1uodvt1 {
  23. display: contents;
  24. }
  25. .profile-member-since-box + button {
  26. display: none;
  27. }
  28.  
  29. /* OUTER THEATRE FRAME: Controls the large bordered container around the entire layout. */
  30.  
  31. .pp-uc-background::before {
  32. content: "";
  33. position: absolute;
  34. inset: 12px;
  35. border: 1px solid #d1a45f;
  36. clip-path: polygon(0 0, 44% 0, 46% 5px, 54% 5px, 56% 0, 100% 0, 100% 100%, 56% 100%, 54% calc(100% - 5px), 46% calc(100% - 5px), 44% 100%, 0 100%);
  37. pointer-events: none;
  38. z-index: 8;
  39. }
  40. .pp-uc-background:hover {
  41. box-shadow: 0 0 0 5px #2a0d13, 0 0 0 7px #d1a45f, 0 0 0 9px #6e1623, 0 0 0 12px #13070a, 0 26px 65px rgba(19, 7, 10, 0.95);
  42. }
  43. .pp-uc-background > div:empty {
  44. background: transparent !important;
  45. }
  46. .pp-uc-background > div:not(:empty) {
  47. display: flex;
  48. justify-content: center;
  49. }
  50.  
  51. /* USERNAME PLATE: Styles the Username text beneath the portrait. */
  52.  
  53. .profile-info-stack-inner-flex::before {
  54. font-weight: 600;
  55. }
  56. .profile-info-stack-inner-flex::after {
  57. font: italic 600 0.8em Georgia, serif;
  58. letter-spacing: 2px;
  59. }
  60.  
  61. .pp-uc-title {
  62. font-size: 0;
  63. padding: 0;
  64. margin: 1px 0 0 -10px !important;
  65. position: relative;
  66. }
  67. .pp-uc-title::before {
  68. font: 700 1rem Georgia, serif;
  69. letter-spacing: 1px;
  70. text-decoration: none;
  71. }
  72.  
  73. /* FOLLOWERS: Styles the attendance count displayed over the theatre crest. */
  74.  
  75. .pp-uc-followers-count::before,
  76. .pp-uc-followers-count::after {
  77. content: "";
  78. position: absolute;
  79. top: 50%;
  80. width: 10px;
  81. height: 10px;
  82. border-radius: 50%;
  83. background: #2a0d13;
  84. transform: translateY(-50%);
  85. }
  86.  
  87. .pp-uc-followers-count::before {
  88. left: -6px;
  89. }
  90. .pp-uc-followers-count::after {
  91. right: -6px;
  92. }
  93.  
  94. .pp-uc-followers-count span:nth-of-type(2) {
  95. font-size: 0;
  96. }
  97. .pp-uc-followers-count span:nth-of-type(2)::before {
  98. font-size: 0.85rem;
  99. }
  100.  
  101. /* PROFILE BADGES: Positions the badge row above the program. */
  102.  
  103. .profile-badges {
  104. position: absolute;
  105. top: -19px;
  106. right: auto;
  107. left: calc(45% + 10px);
  108. z-index: 30;
  109. display: flex;
  110. align-items: center;
  111. justify-content: flex-start;
  112. gap: 1px;
  113. width: max-content;
  114. transform: scale(0.75);
  115. }
  116. .profile-badge-img {
  117. display: block;
  118. filter: sepia(1) saturate(0.7) brightness(0.92);
  119. }
  120.  
  121. /* THEATRE CREST: Styles the Black Swan heading, subtitle, and decorative side symbols. */
  122.  
  123. .theatre-crest::before,
  124. .theatre-crest::after {
  125. content: "⚜";
  126. position: absolute;
  127. top: 50%;
  128. color: #d1a45f;
  129. font-size: 1.6rem;
  130. transform: translateY(-50%);
  131. text-shadow: 0 0 8px rgba(209, 164, 95, 0.65);
  132. }
  133. .theatre-crest::before {
  134. left: 13px;
  135. }
  136. .theatre-crest::after {
  137. right: 13px;
  138. transform: translateY(-50%) scaleX(-1);
  139. }
  140. .theatre-crest span {
  141. display: block;
  142. margin-top: 4px;
  143. color: #d1a45f;
  144. font: italic 600 0.5rem Georgia, serif;
  145. letter-spacing: 2px;
  146. }
  147.  
  148. /* FOLLOW AND OPTIONS: Styles the follow button and profile options button. */
  149.  
  150. .Btn,
  151. .pp-uc-options-menu {
  152. flex: 1;
  153. width: 100%;
  154. border-radius: 0;
  155. border: 1px solid #d1a45f;
  156. transition: 300ms;
  157. box-shadow: inset 0 0 0 2px #2a0d13;
  158. min-width: 0;
  159. height: 36px;
  160. }
  161.  
  162. .Btn {
  163. background: #6e1623;
  164. }
  165. .Btn::before {
  166. display: none;
  167. }
  168. .Btn:hover,
  169. .pp-uc-options-menu:hover {
  170. transform: translateY(-3px);
  171. background: #d1a45f;
  172. color: #13070a;
  173. }
  174. .Btn span {
  175. font: 700 0 Georgia, serif;
  176. color: #f1dfc0;
  177. text-transform: uppercase;
  178. }
  179.  
  180. .profile-uc-follow-text,
  181. .css-15w88gn > span:nth-child(1) {
  182. font: 700 0.85rem Georgia, serif;
  183. }
  184. .pp-uc-options-menu {
  185. background: #2a0d13;
  186. color: #f1dfc0;
  187. }
  188.  
  189. /* DIRECTORY TICKETS: Hover and selected styles for the three vertical section buttons. */
  190.  
  191. .theatre-ticket::before,
  192. .theatre-ticket::after {
  193. content: "";
  194. position: absolute;
  195. top: 50%;
  196. width: 12px;
  197. height: 12px;
  198. border-radius: 50%;
  199. background: #13070a;
  200. transform: translateY(-50%);
  201. }
  202. .theatre-ticket:hover {
  203. background: #6e1623;
  204. color: #f1dfc0;
  205. }
  206. .theatre-ticket:focus {
  207. background: #d1a45f;
  208. color: #13070a;
  209. font-weight: 900;
  210. outline: none;
  211. }
  212.  
  213. /* SECTION SWITCHING: Opens the matching program panel when a directory ticket is selected. */
  214.  
  215. .theatre-directory:not(:has(.theatre-ticket:focus)):not(:has(~ .theatre-program:focus-within)):not(:has(~ .theatre-program:hover)) ~ #theatre-act-1 {
  216. opacity: 1;
  217. visibility: visible;
  218. pointer-events: all;
  219. }
  220. .theatre-directory:has(.theatre-ticket:focus) ~ .theatre-program {
  221. opacity: 0;
  222. visibility: hidden;
  223. pointer-events: none;
  224. }
  225. .theatre-directory:has(.theatre-ticket:nth-child(1):focus) ~ #theatre-act-1,
  226. .theatre-directory:has(.theatre-ticket:nth-child(2):focus) ~ #theatre-act-2,
  227. .theatre-directory:has(.theatre-ticket:nth-child(3):focus) ~ #theatre-act-3 {
  228. opacity: 1;
  229. visibility: visible;
  230. pointer-events: all;
  231. }
  232. .theatre-program:focus-within,
  233. .theatre-program:hover {
  234. opacity: 1;
  235. visibility: visible;
  236. pointer-events: all;
  237. }
  238. .theatre-program-scroll::-webkit-scrollbar {
  239. width: 4px;
  240. }
  241. .theatre-program-scroll::-webkit-scrollbar-thumb {
  242. background: #6e1623;
  243. border-radius: 4px;
  244. }
  245. .theatre-program-scroll::-webkit-scrollbar-track {
  246. background: rgba(42, 13, 19, 0.12);
  247. }
  248. .theatre-program-title::before,
  249. .theatre-program-title::after {
  250. content: "◆";
  251. color: #d1a45f;
  252. font-size: 0.55rem;
  253. position: absolute;
  254. top: 50%;
  255. transform: translateY(-50%);
  256. }
  257. .theatre-program-title::before {
  258. left: 10px;
  259. }
  260. .theatre-program-title::after {
  261. right: 10px;
  262. }
  263. .theatre-program p:not(.theatre-program-title)::first-letter {
  264. float: left;
  265. margin: 0.08rem 0.45rem 0 0;
  266. color: #6e1623;
  267. font: 700 2.6rem/0.8 Georgia, serif;
  268. }
  269. .theatre-program strong {
  270. color: #6e1623;
  271. letter-spacing: 0.5px;
  272. }
  273. .theatre-program a {
  274. color: #6e1623;
  275. text-decoration-color: #d1a45f;
  276. }
  277.  
  278. /* CORRESPONDENCE DESK: Button-style links for Discord, Carrd, Ko-fi, or other outside pages. */
  279.  
  280. .correspondence-desk {
  281. grid-column: 1 / -1;
  282. display: grid;
  283. grid-template-columns: repeat(3, minmax(0, 1fr));
  284. gap: 0.7rem;
  285. align-items: stretch;
  286. margin: 0;
  287. padding: 16px;
  288. background:
  289. linear-gradient(135deg, rgba(110, 22, 35, 0.12), rgba(241, 223, 192, 0.28)),
  290. rgba(241, 223, 192, 0.35);
  291. border: 1px solid rgba(42, 13, 19, 0.35);
  292. border-left: 3px solid #6e1623;
  293. box-shadow: 4px 4px 0 rgba(110, 22, 35, 0.18);
  294. }
  295. .correspondence-desk::before {
  296. content: "Correspondence Desk";
  297. grid-column: 1 / -1;
  298. color: #6e1623;
  299. font: 700 0.78rem/1 Georgia, serif;
  300. letter-spacing: 2px;
  301. text-align: center;
  302. text-transform: uppercase;
  303. }
  304. .correspondence-link {
  305. display: flex;
  306. align-items: center;
  307. justify-content: center;
  308. min-height: 42px;
  309. padding: 8px 10px;
  310. color: #f1dfc0 !important;
  311. background: #13070a;
  312. border: 1px solid #d1a45f;
  313. box-shadow: inset 0 0 0 3px #2a0d13, 3px 4px 0 rgba(110, 22, 35, 0.24);
  314. font: 700 0.68rem/1.1 Georgia, serif;
  315. letter-spacing: 1.5px;
  316. text-align: center;
  317. text-decoration: none !important;
  318. text-transform: uppercase;
  319. transition: 250ms;
  320. }
  321. .correspondence-link:hover {
  322. color: #13070a !important;
  323. background: #d1a45f;
  324. transform: translateY(-3px);
  325. box-shadow: inset 0 0 0 3px #f1dfc0, 5px 6px 0 rgba(110, 22, 35, 0.24);
  326. }
  327.  
  328.  
  329. /* ENCORE SELECTIONS INNER TABS: Adds a small tab switcher inside the Encore Selections section. */
  330.  
  331. .favorite-curtain-stage {
  332. display: flex;
  333. flex-direction: column;
  334. flex: 1;
  335. min-height: 0;
  336. }
  337. .favorite-curtain-tabs {
  338. display: grid;
  339. grid-template-columns: repeat(2, minmax(0, 1fr));
  340. gap: 0.65rem;
  341. margin: 0 1.1rem 1rem;
  342. }
  343. .favorite-curtain-tab {
  344. position: relative;
  345. cursor: pointer;
  346. min-height: 42px;
  347. display: flex;
  348. align-items: center;
  349. justify-content: center;
  350. padding: 8px 12px;
  351. color: #d1a45f;
  352. background: #13070a;
  353. border: 1px solid #d1a45f;
  354. box-shadow: inset 0 0 0 3px #2a0d13, 3px 4px 0 rgba(110, 22, 35, 0.24);
  355. font: 700 0.68rem/1.1 Georgia, serif;
  356. letter-spacing: 1.4px;
  357. text-align: center;
  358. text-transform: uppercase;
  359. transition: 250ms;
  360. }
  361. .favorite-curtain-tab:hover,
  362. .favorite-curtain-tab:focus {
  363. color: #13070a;
  364. background: #d1a45f;
  365. outline: none;
  366. transform: translateY(-3px);
  367. box-shadow: inset 0 0 0 3px #f1dfc0, 5px 6px 0 rgba(110, 22, 35, 0.24);
  368. }
  369. .favorite-curtain-panel {
  370. display: none;
  371. flex: 1;
  372. min-height: 0;
  373. }
  374. .favorite-curtain-stage:not(:has(.favorite-curtain-tab:focus)):not(:has(#favorite-performances-panel:focus-within)):not(:has(#favorite-performances-panel:hover)) #favorite-performers-panel {
  375. display: flex;
  376. }
  377. .favorite-curtain-stage:has(.favorite-curtain-tab:nth-child(1):focus) #favorite-performers-panel,
  378. .favorite-curtain-stage:has(#favorite-performers-panel:focus-within) #favorite-performers-panel,
  379. .favorite-curtain-stage:has(#favorite-performers-panel:hover) #favorite-performers-panel {
  380. display: flex;
  381. }
  382. .favorite-curtain-stage:has(.favorite-curtain-tab:nth-child(2):focus) #favorite-performers-panel,
  383. .favorite-curtain-stage:has(#favorite-performances-panel:focus-within) #favorite-performers-panel,
  384. .favorite-curtain-stage:has(#favorite-performances-panel:hover) #favorite-performers-panel {
  385. display: none;
  386. }
  387. .favorite-curtain-stage:has(.favorite-curtain-tab:nth-child(2):focus) #favorite-performances-panel,
  388. .favorite-curtain-stage:has(#favorite-performances-panel:focus-within) #favorite-performances-panel,
  389. .favorite-curtain-stage:has(#favorite-performances-panel:hover) #favorite-performances-panel {
  390. display: flex;
  391. }
  392. .favorite-performer-credit {
  393. display: block;
  394. margin-top: 4px;
  395. color: #d1a45f;
  396. font: italic 600 0.58rem/1.2 Georgia, serif;
  397. letter-spacing: 1px;
  398. text-transform: none;
  399. }
  400.  
  401. /* FAVORITE PERFORMERS GALLERY: Styles the image grid used for favorite creators and favorite bot selections. */
  402.  
  403. .favorite-performers-gallery {
  404. overflow: auto;
  405. flex: 1;
  406. display: grid;
  407. grid-template-columns: repeat(3, minmax(0, 1fr));
  408. align-content: start;
  409. gap: 1rem;
  410. padding: 0.4rem 1.1rem 3rem;
  411. mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
  412. }
  413. .favorite-performers-gallery::-webkit-scrollbar {
  414. width: 4px;
  415. }
  416. .favorite-performers-gallery::-webkit-scrollbar-thumb {
  417. background: #6e1623;
  418. border-radius: 4px;
  419. }
  420. .favorite-performers-gallery::-webkit-scrollbar-track {
  421. background: rgba(42, 13, 19, 0.12);
  422. }
  423. .favorite-performer {
  424. min-width: 0;
  425. position: relative;
  426. padding: 8px 8px 12px;
  427. background: #2a0d13;
  428. border: 1px solid #d1a45f;
  429. box-shadow:
  430. inset 0 0 0 3px #13070a,
  431. 5px 6px 0 rgba(110, 22, 35, 0.28);
  432. text-align: center;
  433. transition: 300ms;
  434. }
  435. .favorite-performer::before,
  436. .favorite-performer::after {
  437. content: "◆";
  438. position: absolute;
  439. top: 50%;
  440. color: #d1a45f;
  441. font-size: 0.45rem;
  442. transform: translateY(-50%);
  443. }
  444.  
  445. .favorite-performer::before {
  446. left: -4px;
  447. }
  448. .favorite-performer::after {
  449. right: -4px;
  450. }
  451. .favorite-performer:hover {
  452. transform: translateY(-4px);
  453. background: #6e1623;
  454. box-shadow:
  455. inset 0 0 0 3px #13070a,
  456. 7px 9px 0 rgba(110, 22, 35, 0.22);
  457. }
  458. .favorite-performer a {
  459. display: block;
  460. color: #f1dfc0;
  461. text-decoration: none;
  462. }
  463. .favorite-performer-image {
  464. width: 100%;
  465. aspect-ratio: 3 / 4;
  466. display: block;
  467. object-fit: cover;
  468. object-position: center top;
  469. border: 1px solid #d1a45f;
  470. box-shadow: inset 0 0 0 2px #13070a;
  471. filter: saturate(0.82) contrast(1.04);
  472. transition: 300ms;
  473. }
  474. .favorite-performer:hover .favorite-performer-image {
  475. filter: saturate(1) contrast(1.06);
  476. }
  477. .favorite-performer-name {
  478. display: block;
  479. margin-top: 10px;
  480. color: #f1dfc0;
  481. font: 700 0.72rem/1.2 Georgia, serif;
  482. letter-spacing: 1.5px;
  483. text-transform: uppercase;
  484. }
  485.  
  486. /* OUTER FRAME AND DECORATION: Styles the main velvet theatre container, marquee sign, and stage lighting details. */
  487.  
  488. .pp-uc-background {
  489. background:
  490. radial-gradient(circle at 50% 0, rgba(209, 164, 95, 0.2), transparent 24%),
  491. linear-gradient(rgba(19, 7, 10, 0.94), rgba(19, 7, 10, 0.98)),
  492. repeating-linear-gradient(90deg, #13070a 0 34px, #2a0d13 34px 68px, #13070a 68px 102px);
  493. border: 2px solid #d1a45f;
  494. border-radius: 8px;
  495. max-width: 1200px;
  496. max-height: none;
  497. overflow: visible;
  498. box-shadow: 0 0 0 5px #2a0d13, 0 0 0 7px #6e1623, 0 0 0 9px #d1a45f, 0 0 0 12px #13070a, 0 22px 55px rgba(19, 7, 10, 0.85);
  499. transition: 500ms;
  500. position: relative;
  501. padding: 4.6rem 1rem 1rem;
  502. }
  503. .pp-uc-background::after {
  504. content: "THE THEATRE PRESENTS";
  505. position: absolute;
  506. left: 50%;
  507. transform: translateX(-50%);
  508. z-index: 10;
  509. box-sizing: border-box;
  510. padding: 0.65rem 2rem;
  511. background:
  512. linear-gradient(90deg, transparent 0 8%, rgba(209, 164, 95, 0.2) 8.2% 8.4%, transparent 8.6% 91.4%, rgba(209, 164, 95, 0.2) 91.6% 91.8%, transparent 92%),
  513. linear-gradient(180deg, #2a0d13, #13070a);
  514. border: 1px solid #d1a45f;
  515. box-shadow: inset 0 0 0 3px #13070a, 0 4px 0 #d1a45f, 0 9px 18px rgba(19, 7, 10, 0.7);
  516. color: #f1dfc0;
  517. font: 700 0.82rem/1 Georgia, serif;
  518. text-align: center;
  519. letter-spacing: 6px;
  520. text-shadow: 1px 1px 0 #13070a;
  521. white-space: nowrap;
  522. overflow: hidden;
  523. top: 0.8rem;
  524. width: calc(100% - 4rem);
  525. }
  526.  
  527. .css-8g8ihq:only-child::before {
  528. content: "";
  529. position: absolute;
  530. z-index: 7;
  531. pointer-events: none;
  532. background: radial-gradient(circle at center, #fff5d6 0 4px, #d1a45f 5px 6px, transparent 7px) 0 0 / 34px 20px repeat-x;
  533. filter: drop-shadow(0 0 6px rgba(241, 223, 192, 0.8));
  534. top: auto;
  535. left: 178px;
  536. right: auto;
  537. bottom: 102px;
  538. width: calc(32% - 42px);
  539. height: 20px;
  540. }
  541. .css-8g8ihq:only-child::after {
  542. content: "";
  543. position: absolute;
  544. z-index: 2;
  545. pointer-events: none;
  546. mix-blend-mode: screen;
  547. inset: 86px auto auto 14px;
  548. width: calc(38% - 14px);
  549. height: 620px;
  550. background:
  551. linear-gradient(105deg, transparent 0 34%, rgba(241, 223, 192, 0.12) 45%, transparent 57%),
  552. linear-gradient(255deg, transparent 0 34%, rgba(241, 223, 192, 0.1) 45%, transparent 57%);
  553. }
  554.  
  555. .pp-uc-avatar {
  556. object-fit: cover;
  557. display: block;
  558. border-radius: 0;
  559. filter: saturate(0.92) contrast(1.08) brightness(1);
  560. mask-image: none;
  561. transition: filter 700ms ease, transform 700ms ease;
  562. width: 100%;
  563. height: 100%;
  564. margin: 0;
  565. border: 0;
  566. outline: 0;
  567. object-position: center top;
  568. box-shadow: none;
  569. }
  570.  
  571. .theatre-crest i {
  572. display: none;
  573. }
  574.  
  575. .profile-info-stack-inner-flex {
  576. align-self: center;
  577. z-index: 4;
  578. background: #13070a;
  579. color: #f1dfc0;
  580. border: 1px solid #d1a45f;
  581. box-shadow: inset 0 0 0 3px #6e1623, 0 0 0 2px #13070a, 0 0 0 3px #d1a45f, 0 8px 22px rgba(19, 7, 10, 0.75);
  582. text-transform: uppercase;
  583. width: 30%;
  584. box-sizing: border-box;
  585. justify-content: center;
  586. padding: 11px 24px;
  587. left: 11pc;
  588. position: absolute;
  589. height: 35px;
  590. margin: 0;
  591. }
  592.  
  593. .theatre-program::before {
  594. content: "◆";
  595. color: #6e1623;
  596. position: absolute;
  597. font-size: 1rem;
  598. }
  599.  
  600. /* THEATRE LAYOUT: Directory on the left, portrait in the middle, and program on the right. */
  601.  
  602. .css-8g8ihq:only-child {
  603. display: grid;
  604. width: 100%;
  605. position: relative;
  606. padding: 14px;
  607. box-sizing: border-box;
  608. grid-template-columns: 152px minmax(300px, 0.72fr) minmax(450px, 1.25fr);
  609. grid-template-rows: 74px 650px 62px;
  610. height: 820px;
  611. gap: 0 16px;
  612. background:
  613. linear-gradient(90deg, rgba(110, 22, 35, 0.16) 0 152px, transparent 152px),
  614. repeating-linear-gradient(0deg, rgba(209, 164, 95, 0.04) 0 1px, transparent 1px 32px);
  615. }
  616.  
  617. .theatre-crest {
  618. display: block;
  619. z-index: 7;
  620. color: #f1dfc0;
  621. background: #13070a;
  622. border: 1px solid #d1a45f;
  623. box-shadow: inset 0 0 0 3px #6e1623, 0 0 0 3px #13070a, 0 0 0 4px #d1a45f, 0 8px 20px #13070a;
  624. font: 700 0.7rem/1 Georgia, serif;
  625. letter-spacing: 4px;
  626. text-align: center;
  627. text-transform: uppercase;
  628. pointer-events: none;
  629. position: relative;
  630. align-self: end;
  631. justify-self: center;
  632. margin: 0;
  633. min-width: 0;
  634. box-sizing: border-box;
  635. padding: 11px 38px 9px;
  636. grid-column: 2 / 3;
  637. grid-row: 1 / 2;
  638. width: calc(100% - 16px);
  639. height: 74px;
  640. left: -8px;
  641. }
  642.  
  643. .pp-uc-avatar-container {
  644. padding: 0;
  645. overflow: hidden;
  646. background:
  647. linear-gradient(90deg, #13070a, #2a0d13 18%, #13070a 35%, #2a0d13 52%, #13070a 72%, #6e1623 88%, #13070a),
  648. #13070a;
  649. z-index: 1;
  650. position: relative;
  651. height: calc(100% - 18px);
  652. place-self: center;
  653. border: 1px solid #d1a45f;
  654. border-radius: 180px 180px 8px 8px / 42px 42px 8px 8px;
  655. box-shadow: 0 0 0 4px #13070a, 0 0 0 6px #6e1623, 0 0 0 8px #d1a45f, 14px 18px 38px rgba(19, 7, 10, 0.86), inset 0 0 35px rgba(19, 7, 10, 0.65);
  656. mask-image: none;
  657. grid-column: 2 / 3;
  658. grid-row: 2 / 3;
  659. width: calc(100% - 16px);
  660. }
  661.  
  662. .production-billing {
  663. display: block;
  664. justify-self: center;
  665. z-index: 5;
  666. color: #d1a45f;
  667. background: rgba(19, 7, 10, 0.88);
  668. border-top: 1px solid #d1a45f;
  669. border-bottom: 1px solid #d1a45f;
  670. font: italic 600 0.65rem Georgia, serif;
  671. letter-spacing: 3px;
  672. text-align: center;
  673. text-transform: uppercase;
  674. pointer-events: none;
  675. align-self: end;
  676. margin: 0 0 42px;
  677. padding: 8px 12px;
  678. grid-column: 2 / 3;
  679. grid-row: 2 / 3;
  680. width: calc(100% - 19px);
  681. right: 8px;
  682. position: relative;
  683. }
  684.  
  685. .css-8g8ihq .css-8g8ihq {
  686. z-index: 20;
  687. width: 100%;
  688. align-self: end;
  689. padding: 0 36px 88px;
  690. grid-column: 2 / 3;
  691. grid-row: 2 / 3;
  692. position: relative;
  693. overflow: visible;
  694. }
  695.  
  696. .pp-uc-followers-count {
  697. z-index: 10;
  698. background: #13070a;
  699. color: #d1a45f;
  700. font: 700 0.9rem Georgia, serif;
  701. letter-spacing: 1px;
  702. text-transform: uppercase;
  703. padding: 7px 24px;
  704. border: 1px solid #d1a45f;
  705. border-radius: 2px;
  706. position: absolute;
  707. box-shadow: 2px 2px 0 #6e1623, 0 8px 18px rgba(19, 7, 10, 0.45);
  708. top: 55px;
  709. left: 29.9%;
  710. margin: 0;
  711. transform: translateX(-50%);
  712. }
  713.  
  714. div:has(> .css-1aq5geu) {
  715. display: flex;
  716. gap: 0.35rem;
  717. box-sizing: border-box;
  718. align-items: center;
  719. margin-bottom: 0;
  720. inset: auto;
  721. transform: none;
  722. z-index: 10;
  723. place-self: center;
  724. padding: 6px 0 0;
  725. grid-column: 2 / 3;
  726. top: -43px;
  727. position: relative;
  728. left: 20px;
  729. }
  730.  
  731. .theatre-directory {
  732. display: flex;
  733. z-index: 9;
  734. overflow: hidden;
  735. background:
  736. linear-gradient(rgba(19, 7, 10, 0.92), rgba(19, 7, 10, 0.98)),
  737. repeating-linear-gradient(135deg, #2a0d13 0 8px, #13070a 8px 16px);
  738. counter-reset: ticket;
  739. min-width: 0;
  740. top: -4px;
  741. height: 50pc;
  742. grid-column: 1 / 2;
  743. grid-row: 1 / 4;
  744. flex-direction: column;
  745. margin: 0;
  746. border: 1px solid #d1a45f;
  747. box-shadow: inset 0 0 0 4px #13070a, inset 0 0 0 5px #6e1623, 7px 10px 22px rgba(19, 7, 10, 0.65);
  748. position: relative;
  749. padding: 88px 0 54px;
  750. }
  751. .theatre-directory::before {
  752. content: "DIRECTORY";
  753. position: absolute;
  754. top: 40px;
  755. left: 50%;
  756. transform: translateX(-50%);
  757. color: #f1dfc0;
  758. font: 700 0.68rem Georgia, serif;
  759. letter-spacing: 3px;
  760. height: 58px;
  761. text-align: center;
  762. }
  763. .theatre-directory::after {
  764. content: "ADMIT ONE";
  765. position: absolute;
  766. bottom: 17px;
  767. left: 50%;
  768. transform: translateX(-50%);
  769. color: rgba(209, 164, 95, 0.7);
  770. font: 700 0.52rem Georgia, serif;
  771. letter-spacing: 2px;
  772. white-space: nowrap;
  773. }
  774.  
  775. .theatre-ticket {
  776. font: 700 0.78rem Georgia, serif;
  777. cursor: pointer;
  778. color: #d1a45f;
  779. background: #2a0d13;
  780. transition: 250ms;
  781. margin: 0;
  782. display: flex;
  783. align-items: center;
  784. justify-content: center;
  785. border: none;
  786. outline: none;
  787. text-transform: uppercase;
  788. text-align: center;
  789. position: relative;
  790. counter-increment: ticket;
  791. flex: 1;
  792. border-right: 0;
  793. border-bottom: 1px dashed rgba(209, 164, 95, 0.7);
  794. padding: 38px 14px 16px;
  795. writing-mode: vertical-rl;
  796. transform: rotate(180deg);
  797. font-size: 0.72rem;
  798. letter-spacing: 1.5px;
  799. }
  800. .theatre-ticket:last-child {
  801. border-right: 0;
  802. border-bottom: 1px dashed rgba(209, 164, 95, 0.7);
  803. border-top: 1px dashed rgba(209, 164, 95, 0.7);
  804. }
  805. .theatre-ticket::before {
  806. content: "0" counter(ticket);
  807. width: auto;
  808. height: auto;
  809. background: transparent;
  810. color: rgba(209, 164, 95, 0.5);
  811. font: 700 0.62rem Georgia, serif;
  812. letter-spacing: 1px;
  813. top: 16px;
  814. left: 50%;
  815. transform: translateX(-50%);
  816. }
  817. .theatre-ticket::after {
  818. top: auto;
  819. right: auto;
  820. left: -7px;
  821. bottom: -7px;
  822. transform: none;
  823. }
  824.  
  825. .theatre-program {
  826. position: relative;
  827. color: #2a0d13;
  828. font-weight: 500;
  829. line-height: 1.75;
  830. opacity: 0;
  831. display: flex;
  832. flex-direction: column;
  833. visibility: hidden;
  834. pointer-events: none;
  835. transition: opacity 400ms;
  836. box-sizing: border-box;
  837. border: 1px solid #d1a45f;
  838. box-shadow: inset 0 0 0 7px rgba(110, 22, 35, 0.1), inset 0 0 0 8px rgba(209, 164, 95, 0.55), 10px 14px 28px rgba(19, 7, 10, 0.65);
  839. grid-column: 3 / 4;
  840. grid-row: 1 / 4;
  841. padding: 2.5rem 2.4rem 2rem;
  842. border-radius: 18px 0 0 18px / 48% 0 0 48%;
  843. overflow: hidden;
  844. background:
  845. linear-gradient(90deg, rgba(110, 22, 35, 0.16), transparent 8%),
  846. linear-gradient(90deg, transparent 49.8%, rgba(110, 22, 35, 0.2) 50%, transparent 50.2%),
  847. radial-gradient(circle at 50% 50%, rgba(241, 223, 192, 0.94), rgba(209, 164, 95, 0.98));
  848. height: 50.6pc;
  849. overflow: scroll;
  850. }
  851.  
  852. .theatre-program-title {
  853. font: 700 1.45rem/1.2 'DM Serif Text', 'Fraunces', Georgia, 'Times New Roman', serif;
  854. color: #f1dfc0;
  855. border: 1px solid #d1a45f;
  856. border-radius: 2px;
  857. text-align: center;
  858. letter-spacing: 5px;
  859. text-transform: uppercase;
  860. text-shadow: 2px 2px 0 #13070a;
  861. background: #6e1623;
  862. position: relative;
  863. box-shadow: inset 0 0 0 3px #2a0d13, 0 5px 0 rgba(110, 22, 35, 0.22);
  864. padding: 15px 22px;
  865. font-size: 1.65rem;
  866. margin: 0 auto 1.5rem;
  867. width: calc(100% - 38px);
  868. box-sizing: border-box;
  869. }
  870. .theatre-program-title span {
  871. background: #6e1623;
  872. }
  873.  
  874. .theatre-program-scroll {
  875. overflow: clip;
  876. flex: 1;
  877. font-family: Georgia, serif;
  878. mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  879. display: grid;
  880. align-content: start;
  881. grid-template-columns: repeat(2, minmax(0, 1fr));
  882. gap: 1.15rem;
  883. padding: 0.4rem 1.1rem 3rem;
  884. }
  885. .theatre-program p:not(.theatre-program-title) {
  886. background: rgba(241, 223, 192, 0.42);
  887. border: 1px solid rgba(42, 13, 19, 0.35);
  888. border-left: 3px solid #6e1623;
  889. border-radius: 2px;
  890. font-weight: 400;
  891. color: #2a0d13;
  892. box-shadow: 4px 4px 0 rgba(110, 22, 35, 0.18);
  893. margin: 0;
  894. position: relative;
  895. font-size: 0.86rem;
  896. min-height: 150px;
  897. padding: 20px;
  898. }
  899.  
  900. .theatre-program::before {
  901. top: 22px;
  902. left: 24px;
  903. }
  904.  
  905. /* CURTAIN EFFECT: Curtains stay closed until the visitor follows the profile. */
  906.  
  907. .pp-uc-avatar-container::before,
  908. .pp-uc-avatar-container::after {
  909. content: "";
  910. position: absolute;
  911. pointer-events: none;
  912. top: 0;
  913. bottom: 0;
  914. height: auto;
  915. border: 0;
  916. width: 50%;
  917. z-index: 8;
  918. opacity: 1;
  919. transform: translateX(0);
  920. transition: transform 1.15s cubic-bezier(0.77, 0, 0.18, 1), filter 600ms ease, box-shadow 600ms ease;
  921. }
  922.  
  923. .pp-uc-avatar-container::before {
  924. border-radius: 0 0 80% 0 / 0 0 60% 0;
  925. transform-origin: top left;
  926. left: 0;
  927. background:
  928. linear-gradient(90deg, rgba(19, 7, 10, 0.72), transparent 28%, rgba(241, 223, 192, 0.08) 48%, transparent 62%, rgba(19, 7, 10, 0.82)),
  929. repeating-linear-gradient(90deg, #13070a 0 18px, #2a0d13 18px 38px, #6e1623 38px 60px, #2a0d13 60px 78px);
  930. border-right: 2px solid #d1a45f;
  931. box-shadow: inset -18px 0 28px rgba(19, 7, 10, 0.8), 8px 0 20px rgba(19, 7, 10, 0.8);
  932. }
  933. .pp-uc-avatar-container::after {
  934. border-radius: 0 0 0 80% / 0 0 0 60%;
  935. transform-origin: top right;
  936. right: 0;
  937. background:
  938. linear-gradient(270deg, rgba(19, 7, 10, 0.72), transparent 28%, rgba(241, 223, 192, 0.08) 48%, transparent 62%, rgba(19, 7, 10, 0.82)),
  939. repeating-linear-gradient(90deg, #2a0d13 0 18px, #6e1623 18px 40px, #2a0d13 40px 60px, #13070a 60px 78px);
  940. border-left: 2px solid #d1a45f;
  941. box-shadow: inset 18px 0 28px rgba(19, 7, 10, 0.8), -8px 0 20px rgba(19, 7, 10, 0.8);
  942. }
  943. .pp-uc-avatar-container:hover::before,
  944. .pp-uc-avatar-container:hover::after {
  945. transform: translateX(0);
  946. filter: brightness(1.06);
  947. }
  948.  
  949. body:has([data-following="true"]) .pp-uc-avatar-container::before {
  950. transform: translateX(-82%);
  951. box-shadow: inset -10px 0 22px rgba(19, 7, 10, 0.7), 5px 0 14px rgba(19, 7, 10, 0.55);
  952. }
  953. body:has([data-following="true"]) .pp-uc-avatar-container::after {
  954. transform: translateX(82%);
  955. box-shadow: inset 10px 0 22px rgba(19, 7, 10, 0.7), -5px 0 14px rgba(19, 7, 10, 0.55);
  956. }
  957.  
  958. .pp-uc-follow-button span::after {
  959. content: "Raise Curtain?";
  960. font: 700 0.72rem Georgia, serif;
  961. color: #f1dfc0;
  962. letter-spacing: 1.2px;
  963. text-transform: uppercase;
  964. }
  965. .pp-uc-follow-button[data-following="true"] span::after {
  966. font-size: 0.85rem;
  967. content: "Curtain Call";
  968. }
  969.  
  970. /* TEMPLATE CREDIT: Do Not Remove. */
  971.  
  972. .credits {
  973. position: absolute;
  974. bottom: -21px;
  975. left: -13px;
  976. width: fit-content;
  977. color: #d1a45f;
  978. font: 700 0.68rem Georgia, serif;
  979. padding: 5px 10px;
  980. white-space: nowrap;
  981. opacity: 60%;
  982. }
  983. .credits a {
  984. color: #d1a45f;
  985. }
  986. .credits a:hover {
  987. color: #efe6d0;
  988. }
  989.  
  990. /* THEATRE TOP BAR: Slim theatre ticket bar with a softer layout. */
  991.  
  992. .pp-top-bar {
  993. padding: 0.45rem 0.8rem;
  994. background:
  995. linear-gradient(180deg, rgba(19, 7, 10, 0.92), rgba(42, 13, 19, 0.76)),
  996. repeating-linear-gradient(90deg, rgba(110, 22, 35, 0.22) 0 22px, transparent 22px 44px);
  997. border-bottom: 1px solid rgba(209, 164, 95, 0.42);
  998. box-shadow:
  999. 0 8px 20px rgba(19, 7, 10, 0.45),
  1000. inset 0 -1px 0 rgba(241, 223, 192, 0.08);
  1001. overflow: visible;
  1002. }
  1003. ._container_1jb5k_1 {
  1004. flex-direction: row-reverse;
  1005. min-width: 0;
  1006. }
  1007. .pp-top-bar-outer,
  1008. .pp-top-bar-inner,
  1009. .pp-top-bar-left,
  1010. .pp-top-bar-right,
  1011. .pp-top-bar-search-spacer-top,
  1012. .pp-top-bar-search-spacer-bottom {
  1013. backdrop-filter: none;
  1014. box-shadow: none;
  1015. }
  1016. .pp-mnb-wrapper {
  1017. background: transparent !important;
  1018. border: 0 !important;
  1019. border-radius: 0 !important;
  1020. box-shadow: none !important;
  1021. color: #f1dfc0;
  1022. font-family: Georgia, 'Times New Roman', serif;
  1023. }
  1024. .pp-mnb-container {
  1025. padding-bottom: 0 !important;
  1026. }
  1027. .glow-on-hover::before,
  1028. .glow-on-hover::after {
  1029. background: none !important;
  1030. }
  1031. .glow-on-hover::after {
  1032. opacity: 1 !important;
  1033. }
  1034. .pp-top-bar-logo-sub-name {
  1035. display: none !important;
  1036. }
  1037. .profile-top-bar-logo-box {
  1038. min-width: 0 !important;
  1039. background: transparent !important;
  1040. border: none !important;
  1041. box-shadow: none !important;
  1042. }
  1043. .css-1bmggo3 {
  1044. position: relative;
  1045. z-index: 100000;
  1046. width: max-content;
  1047. padding: 0;
  1048. margin: 0;
  1049. background: transparent !important;
  1050. border: none !important;
  1051. box-shadow: none !important;
  1052. overflow: visible;
  1053. }
  1054. .css-1bmggo3 h2 {
  1055. position: relative;
  1056. font-size: 0 !important;
  1057. margin: 0 !important;
  1058. padding: 0 !important;
  1059. width: max-content;
  1060. overflow: visible;
  1061. }
  1062. .css-1bmggo3 h2::before,
  1063. .css-1bmggo3 h2::after {
  1064. display: inline-flex;
  1065. align-items: center;
  1066. justify-content: center;
  1067. box-sizing: border-box;
  1068. }
  1069. .css-1bmggo3 h2::before {
  1070. content: "Black Swan";
  1071. min-height: 34px;
  1072. padding: 0.45rem 1.25rem;
  1073. color: #f1dfc0;
  1074. background:
  1075. radial-gradient(circle at left center, #13070a 0 7px, transparent 7.5px),
  1076. radial-gradient(circle at right center, #13070a 0 7px, transparent 7.5px),
  1077. linear-gradient(180deg, #6e1623, #2a0d13);
  1078. border: 1px solid #d1a45f;
  1079. box-shadow:
  1080. inset 0 0 0 3px #13070a,
  1081. 3px 4px 0 rgba(19, 7, 10, 0.46);
  1082. font: 900 1.7rem/1 Georgia, serif;
  1083. letter-spacing: 2px;
  1084. text-transform: uppercase;
  1085. text-shadow: 1px 1px 0 #13070a;
  1086. }
  1087. .css-1bmggo3 h2::after {
  1088. content: "Theatre";
  1089. min-height: 18px;
  1090. margin-left: 0.35rem;
  1091. padding: 0.25rem 0.55rem;
  1092. color: #d1a45f;
  1093. background: rgba(19, 7, 10, 0.74);
  1094. border: 1px solid rgba(209, 164, 95, 0.54);
  1095. font: italic 700 0.48rem/1 Georgia, serif;
  1096. letter-spacing: 1.5px;
  1097. text-transform: uppercase;
  1098. top: -7px;
  1099. position: relative;
  1100. }
  1101. .pp-top-bar .MuiInputBase-root,
  1102. .pp-top-bar .MuiOutlinedInput-root {
  1103. background:
  1104. linear-gradient(180deg, rgba(241, 223, 192, 0.28), rgba(209, 164, 95, 0.18)),
  1105. rgba(19, 7, 10, 0.7) !important;
  1106. border: 1px solid rgba(209, 164, 95, 0.48) !important;
  1107. border-radius: 2px !important;
  1108. box-shadow:
  1109. inset 0 0 0 3px rgba(19, 7, 10, 0.56),
  1110. 3px 4px 0 rgba(19, 7, 10, 0.38) !important;
  1111. backdrop-filter: blur(8px);
  1112. -webkit-backdrop-filter: blur(8px);
  1113. overflow: hidden;
  1114. }
  1115. .pp-top-bar input {
  1116. background: transparent !important;
  1117. border: none !important;
  1118. box-shadow: none !important;
  1119. outline: none !important;
  1120. color: #f1dfc0 !important;
  1121. font-family: Georgia, 'Times New Roman', serif;
  1122. font-size: 0.92rem !important;
  1123. letter-spacing: 0.03em;
  1124. padding: 0.46rem 0.7rem !important;
  1125. }
  1126. .pp-top-bar input::placeholder {
  1127. color: rgba(241, 223, 192, 0.62) !important;
  1128. opacity: 1 !important;
  1129. }
  1130. .pp-top-bar svg,
  1131. .pp-top-bar button,
  1132. .pp-top-bar .MuiIconButton-root {
  1133. color: #d1a45f !important;
  1134. }
  1135. .pp-top-bar .MuiInputAdornment-root svg,
  1136. .pp-top-bar .MuiSvgIcon-root {
  1137. color: #d1a45f !important;
  1138. }
  1139. .pp-top-bar .MuiInputBase-root:focus-within,
  1140. .pp-top-bar .MuiOutlinedInput-root:focus-within {
  1141. border-color: #f1dfc0 !important;
  1142. background:
  1143. linear-gradient(180deg, rgba(241, 223, 192, 0.34), rgba(209, 164, 95, 0.22)),
  1144. rgba(42, 13, 19, 0.82) !important;
  1145. box-shadow:
  1146. inset 0 0 0 3px rgba(19, 7, 10, 0.58),
  1147. 0 0 14px rgba(209, 164, 95, 0.2),
  1148. 3px 4px 0 rgba(19, 7, 10, 0.38) !important;
  1149. }
  1150. .pp-top-bar-create-char {
  1151. font-size: 0 !important;
  1152. background: transparent !important;
  1153. border: none !important;
  1154. border-radius: 0;
  1155. padding: 0 !important;
  1156. transition: 220ms ease;
  1157. }
  1158. .pp-top-bar-create-char::after {
  1159. content: "Auditions";
  1160. position: relative;
  1161. display: inline-flex;
  1162. align-items: center;
  1163. justify-content: center;
  1164. min-height: 34px;
  1165. padding: 0.42rem 1rem;
  1166. color: #f1dfc0;
  1167. background:
  1168. radial-gradient(circle at left center, #13070a 0 6px, transparent 6.5px),
  1169. radial-gradient(circle at right center, #13070a 0 6px, transparent 6.5px),
  1170. linear-gradient(180deg, #2a0d13, #13070a);
  1171. border: 1px solid #d1a45f;
  1172. box-shadow:
  1173. inset 0 0 0 3px #6e1623,
  1174. 3px 4px 0 rgba(19, 7, 10, 0.42);
  1175. font: 900 0.66rem/1 Georgia, serif;
  1176. letter-spacing: 1.2px;
  1177. text-transform: uppercase;
  1178. text-shadow: 1px 1px 0 #13070a;
  1179. transition: 220ms ease;
  1180. }
  1181. .pp-top-bar-create-char:hover::after {
  1182. color: #13070a;
  1183. background:
  1184. radial-gradient(circle at left center, #13070a 0 6px, transparent 6.5px),
  1185. radial-gradient(circle at right center, #13070a 0 6px, transparent 6.5px),
  1186. linear-gradient(180deg, #f1dfc0, #d1a45f) !important;
  1187. box-shadow:
  1188. inset 0 0 0 3px #f1dfc0,
  1189. 4px 5px 0 rgba(19, 7, 10, 0.42);
  1190. text-shadow: none;
  1191. transform: translateY(-1px);
  1192. }
  1193. .profile-page-flex {
  1194. padding-top: 0.3rem;
  1195. }
  1196. .pp-top-bar-app-menu {
  1197. position: relative;
  1198. width: 38px;
  1199. height: 38px;
  1200. min-width: 38px;
  1201. min-height: 38px;
  1202. padding: 2px;
  1203. border-radius: 50%;
  1204. overflow: hidden;
  1205. transition: 220ms ease;
  1206. }
  1207. .pp-top-bar-app-menu:hover {
  1208. transform: translateY(-1px) scale(1.03);
  1209. filter: brightness(1.08);
  1210. }
  1211.  
  1212. /* DIRECTORY SIGN MENU: Styles the top-bar dropdown as a shaped stage directory sign. */
  1213.  
  1214. .pp-top-bar-app-menu-list {
  1215. position: relative;
  1216. left: 7pc;
  1217. min-width: 260px;
  1218. max-height: 563px;
  1219. overflow: hidden;
  1220. padding: 6rem 1rem 1rem;
  1221. background:
  1222. linear-gradient(145deg, rgba(241, 223, 192, 0.09), transparent 30% 72%, rgba(209, 164, 95, 0.12)),
  1223. linear-gradient(180deg, #2a0d13, #13070a 48%, #060203);
  1224. border: 2px solid #d1a45f;
  1225. border-radius: 0 0 8px 8px;
  1226. clip-path: polygon(0 82px, 6% 82px, 6% 70px, 14% 70px, 14% 58px, 24% 58px, 24% 44px, 37% 44px, 50% 0, 63% 44px, 76% 44px, 76% 58px, 86% 58px, 86% 70px, 94% 70px, 94% 82px, 100% 82px, 100% 100%, 0 100%);
  1227. background-color: #000000
  1228. box-shadow:
  1229. inset 0 0 0 4px #13070a,
  1230. inset 0 0 0 5px rgba(241, 223, 192, 0.16),
  1231. inset 0 -18px 24px rgba(0, 0, 0, 0.32),
  1232. 0 0 18px rgba(209, 164, 95, 0.24),
  1233. 0 18px 36px rgba(19, 7, 10, 0.82);
  1234. }
  1235.  
  1236. .pp-top-bar-app-menu-list::before {
  1237. content: "Stage Directory";
  1238. position: absolute;
  1239. top: 4rem;
  1240. right: 1rem;
  1241. left: 2.9rem;
  1242. min-height: 1.85rem;
  1243. width: 160px;
  1244. display: flex;
  1245. align-items: center;
  1246. justify-content: center;
  1247. color: #f1dfc0;
  1248. background:
  1249. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.16), transparent),
  1250. linear-gradient(180deg, rgba(110, 22, 35, 0.68), rgba(19, 7, 10, 0.72));
  1251. border: 1px solid rgba(209, 164, 95, 0.78);
  1252. box-shadow:
  1253. inset 0 0 0 2px rgba(19, 7, 10, 0.82),
  1254. 0 0 14px rgba(209, 164, 95, 0.18);
  1255. font: 800 0.64rem/1 Georgia, serif;
  1256. letter-spacing: 2.8px;
  1257. text-align: center;
  1258. text-transform: uppercase;
  1259. text-shadow: 1px 1px 0 #13070a;
  1260. z-index: 2;
  1261. }
  1262.  
  1263. .pp-top-bar-app-menu-list::after {
  1264. content: "★";
  1265. position: absolute;
  1266. pointer-events: none;
  1267. inset: 7px;
  1268. box-sizing: border-box;
  1269. padding-top: 1.05rem;
  1270. color: #d1a45f;
  1271. background: rgba(209, 164, 95, 0.045);
  1272. clip-path: polygon(0 75px, 6% 75px, 6% 63px, 14% 63px, 14% 51px, 24% 51px, 24% 37px, 37% 37px, 50% 0, 63% 37px, 76% 37px, 76% 51px, 86% 51px, 86% 63px, 94% 63px, 94% 75px, 100% 75px, 100% 100%, 0 100%);
  1273. box-shadow:
  1274. inset 0 0 0 1px rgba(209, 164, 95, 0.58),
  1275. inset 0 0 0 3px rgba(19, 7, 10, 0.72);
  1276. filter: drop-shadow(0 0 4px rgba(209, 164, 95, 0.25));
  1277. font: 900 1.5rem/1 Georgia, serif;
  1278. text-align: center;
  1279. text-shadow:
  1280. 0 0 4px rgba(209, 164, 95, 0.75),
  1281. 1px 1px 0 #13070a;
  1282. z-index: 1;
  1283. }
  1284.  
  1285. .pp-top-bar-app-menu-list-item,
  1286. .css-1rokoft {
  1287. position: relative;
  1288. z-index: 2;
  1289. display: flex;
  1290. align-items: center;
  1291. top: 7px;
  1292. min-height: 38px;
  1293. margin: 0 0 0.42rem;
  1294. padding: 0.42rem 0.7rem 0.42rem 0.82rem;
  1295. color: #f1dfc0 !important;
  1296. background:
  1297. linear-gradient(90deg, rgba(209, 164, 95, 0.08), transparent 26% 74%, rgba(209, 164, 95, 0.08)),
  1298. linear-gradient(180deg, rgba(42, 13, 19, 0.96), rgba(19, 7, 10, 0.94));
  1299. border: 1px solid rgba(209, 164, 95, 0.48);
  1300. border-radius: 2px;
  1301. box-shadow:
  1302. inset 0 0 0 1px rgba(19, 7, 10, 0.8),
  1303. 0 2px 0 rgba(209, 164, 95, 0.12);
  1304. font: 700 0.78rem/1 Georgia, serif;
  1305. letter-spacing: 0.35px;
  1306. text-decoration: none;
  1307. text-shadow: 1px 1px 0 #13070a;
  1308. transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
  1309. }
  1310.  
  1311. .pp-top-bar-app-menu-list-item::before,
  1312. .css-1rokoft::before {
  1313. content: "";
  1314. width: 7px;
  1315. height: 7px;
  1316. margin-right: 0.62rem;
  1317. background: #d1a45f;
  1318. border-radius: 50%;
  1319. box-shadow:
  1320. 0 0 0 2px rgba(19, 7, 10, 0.8),
  1321. 0 0 8px rgba(209, 164, 95, 0.86);
  1322. flex: 0 0 auto;
  1323. }
  1324.  
  1325. .pp-top-bar-app-menu-list-item::after,
  1326. .css-1rokoft::after {
  1327. content: "";
  1328. position: absolute;
  1329. right: 0.62rem;
  1330. width: 24px;
  1331. height: 1px;
  1332. background: linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.76));
  1333. transition: background 180ms ease;
  1334. }
  1335.  
  1336. .pp-top-bar-app-menu-list-item svg,
  1337. .css-1rokoft svg {
  1338. width: 14px;
  1339. height: 14px;
  1340. margin-right: 0.58rem;
  1341. color: #d1a45f !important;
  1342. }
  1343.  
  1344. .pp-top-bar-app-menu-list-item:hover,
  1345. .css-1rokoft:hover {
  1346. color: #13070a !important;
  1347. background:
  1348. linear-gradient(180deg, #f1dfc0, #d1a45f);
  1349. border-color: #f1dfc0;
  1350. text-shadow: none;
  1351. transform: translateX(3px);
  1352. }
  1353.  
  1354. .pp-top-bar-app-menu-list-item:hover::before,
  1355. .css-1rokoft:hover::before {
  1356. background: #13070a;
  1357. box-shadow:
  1358. 0 0 0 2px rgba(241, 223, 192, 0.28),
  1359. 0 0 7px rgba(19, 7, 10, 0.42);
  1360. }
  1361.  
  1362. .pp-top-bar-app-menu-list-item:hover::after,
  1363. .css-1rokoft:hover::after {
  1364. background: linear-gradient(90deg, transparent, rgba(19, 7, 10, 0.78));
  1365. }
  1366.  
  1367. .pp-top-bar-app-menu-list-item:hover svg,
  1368. .css-1rokoft:hover svg {
  1369. color: #13070a !important;
  1370. }
  1371.  
  1372. .pp-top-bar-app-menu-list hr {
  1373. display: none;
  1374. }
  1375.  
  1376. /* JANITOR PLUS REMOVAL: Hides the Plus menu entry from the top-bar app menu. */
  1377. .pp-top-bar-app-menu-list-item[href="/plus"],
  1378. .pp-top-bar-app-menu-list-item[href="/plus"] + hr {
  1379. display: none;
  1380. }
  1381.  
  1382. /* EDITABLE PROFILE TEXT: Change only the quoted text below. */
  1383. .pp-uc-title::before {
  1384. content: "User/Nickname";
  1385. position: static;
  1386. }
  1387. .pp-uc-followers-count span:nth-of-type(2)::before {
  1388. content: "in attendance";
  1389. }
  1390.  
  1391. /* SECTION TITLE: Displays the main title above the profile gallery and filter controls. */
  1392. #profile-tabs::before {
  1393. content: "Opening Acts";
  1394. display: block;
  1395. padding: 0 15px 0.65rem;
  1396. text-align: center;
  1397. color: #f1dfc0;
  1398. font-family: Georgia, 'Times New Roman', serif;
  1399. font-size: clamp(2.1rem, 3vw + 1rem, 3.6rem);
  1400. font-weight: 900;
  1401. line-height: 1;
  1402. letter-spacing: 0.08em;
  1403. text-transform: uppercase;
  1404. border-bottom: 1px solid rgba(209, 164, 95, 0.38);
  1405. text-shadow:
  1406. 0 2px 3px rgba(0, 0, 0, 0.75),
  1407. 0 0 14px rgba(209, 164, 95, 0.28),
  1408. 0 0 28px rgba(110, 22, 35, 0.3);
  1409. }
  1410.  
  1411. /* PROFILE TABS: Hides the native tab controls and removes their default decoration. */
  1412. .pp-tabs-wrapper {
  1413. display: none;
  1414. }
  1415. .pp-tabs-indicator {
  1416. background: none;
  1417. box-shadow: none;
  1418. height: 2px;
  1419. }
  1420. .pp-top-bar-logo,
  1421. .pp-top-bar-logo::before {
  1422. border: none;
  1423. background: none !important;
  1424. box-shadow: none;
  1425. text-shadow: none !important;
  1426. backdrop-filter: none;
  1427. padding: 3px;
  1428. }
  1429. #profile-tabs > div[role="tablist"] > button[aria-selected="true"] {
  1430. display: none;
  1431. background: rgba(209, 164, 95, 0.18);
  1432. color: #f1dfc0;
  1433. box-shadow: inset 0 0 0 1px rgba(241, 223, 192, 0.24);
  1434. }
  1435.  
  1436. /* TOTAL COUNT: Restyles the total bot count as a theatre poster count. */
  1437. .pp-pg-total {
  1438. order: -1;
  1439. box-shadow: none;
  1440. background: none;
  1441. margin-right: 0.35rem;
  1442. border: none;
  1443. flex: 0 0 auto;
  1444. }
  1445. .pp-pg-total::before {
  1446. transition: none;
  1447. border: 1px solid transparent;
  1448. border-radius: 999px;
  1449. background: transparent;
  1450. }
  1451. .pp-pg-total .css-wd8hou {
  1452. width: 100%;
  1453. font-weight: 900;
  1454. }
  1455. .pp-pg-total p {
  1456. font-size: 0;
  1457. width: 100%;
  1458. text-align: center;
  1459. font-family: Georgia, 'Times New Roman', serif;
  1460. }
  1461. .pp-pg-total strong {
  1462. color: #d1a45f;
  1463. font-family: Georgia, 'Times New Roman', serif;
  1464. font-size: 1rem;
  1465. font-weight: 900;
  1466. text-shadow:
  1467. 0 1px 2px rgba(0, 0, 0, 0.72),
  1468. 0 0 8px rgba(209, 164, 95, 0.22);
  1469. }
  1470. .pp-pg-total p::after {
  1471. content: "Performers";
  1472. color: #f1dfc0;
  1473. font-family: Georgia, 'Times New Roman', serif;
  1474. font-size: 1rem;
  1475. font-weight: 900;
  1476. text-transform: uppercase;
  1477. text-shadow:
  1478. 0 1px 2px rgba(0, 0, 0, 0.72),
  1479. 0 0 8px rgba(209, 164, 95, 0.18);
  1480. }
  1481. .profile-filters-flex-inner {
  1482. margin: auto;
  1483. }
  1484.  
  1485. /* SEARCH INPUT: Styles the profile search field as a dark theatre ticket control. */
  1486. .pp-fl-search-input {
  1487. width: 260px;
  1488. color: #f1dfc0;
  1489. font-family: Georgia, 'Times New Roman', serif;
  1490. font-size: 0.95rem;
  1491. font-weight: 800;
  1492. border-radius: 2px;
  1493. border: 1px solid transparent;
  1494. background:
  1495. radial-gradient(circle at 16% 12%, rgba(241, 223, 192, 0.12), transparent 28%),
  1496. linear-gradient(135deg, rgba(19, 7, 10, 0.94), rgba(42, 13, 19, 0.88), rgba(6, 2, 3, 0.96)) padding-box,
  1497. linear-gradient(135deg, rgba(241, 223, 192, 0.62), rgba(209, 164, 95, 0.52), rgba(110, 22, 35, 0.58)) border-box;
  1498. box-shadow:
  1499. inset 0 0 0 3px rgba(19, 7, 10, 0.68),
  1500. inset 0 1px 0 rgba(255, 255, 255, 0.1),
  1501. 3px 4px 0 rgba(19, 7, 10, 0.48),
  1502. 0 0 18px rgba(209, 164, 95, 0.08);
  1503. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  1504. }
  1505. .pp-fl-search-input::placeholder {
  1506. color: rgba(241, 223, 192, 0.64) !important;
  1507. }
  1508. .pp-fl-search-input:hover,
  1509. .pp-fl-search-input:focus,
  1510. .pp-fl-search-input:focus-visible {
  1511. outline: none !important;
  1512. border: 1px solid transparent;
  1513. color: transparent;
  1514. background:
  1515. radial-gradient(circle at 16% 12%, rgba(241, 223, 192, 0.16), transparent 28%),
  1516. linear-gradient(135deg, rgba(42, 13, 19, 0.96), rgba(110, 22, 35, 0.86), rgba(19, 7, 10, 0.98)) padding-box,
  1517. linear-gradient(135deg, rgba(241, 223, 192, 0.76), rgba(209, 164, 95, 0.66), rgba(110, 22, 35, 0.64)) border-box;
  1518. box-shadow:
  1519. 0 0 14px rgba(209, 164, 95, 0.22),
  1520. inset 0 0 0 3px rgba(19, 7, 10, 0.72),
  1521. inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  1522. }
  1523.  
  1524. /* FILTER BUTTON: Matches the search field with a gilded theatre control button. */
  1525. .pp-fl-filter-button {
  1526. flex: 0 0 auto;
  1527. border-radius: 2px;
  1528. border: 1px solid transparent;
  1529. background:
  1530. linear-gradient(135deg, rgba(19, 7, 10, 0.94), rgba(42, 13, 19, 0.88), rgba(6, 2, 3, 0.96)) padding-box,
  1531. linear-gradient(135deg, rgba(241, 223, 192, 0.62), rgba(209, 164, 95, 0.52), rgba(110, 22, 35, 0.58)) border-box;
  1532. box-shadow:
  1533. inset 0 0 0 3px rgba(19, 7, 10, 0.68),
  1534. inset 0 1px 0 rgba(255, 255, 255, 0.1),
  1535. 3px 4px 0 rgba(19, 7, 10, 0.42);
  1536. }
  1537. .pp-fl-filter-button svg {
  1538. color: #d1a45f !important;
  1539. filter:
  1540. drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65))
  1541. drop-shadow(0 0 5px rgba(209, 164, 95, 0.22));
  1542. }
  1543. .pp-fl-filter-button:hover {
  1544. background:
  1545. radial-gradient(circle at 16% 12%, rgba(241, 223, 192, 0.12), transparent 28%),
  1546. linear-gradient(135deg, rgba(42, 13, 19, 0.96), rgba(110, 22, 35, 0.86), rgba(19, 7, 10, 0.98)) padding-box,
  1547. linear-gradient(135deg, rgba(241, 223, 192, 0.76), rgba(209, 164, 95, 0.66), rgba(110, 22, 35, 0.64)) border-box;
  1548. box-shadow:
  1549. 0 0 14px rgba(209, 164, 95, 0.22),
  1550. inset 0 0 0 3px rgba(19, 7, 10, 0.72),
  1551. inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  1552. }
  1553.  
  1554. /* SELECT CONTROL: Styles the dropdown selector to match the search and filter controls. */
  1555. .react-select__indicator-separator {
  1556. background-color: transparent !important;
  1557. }
  1558. .react-select__control:hover {
  1559. border-color: unset !important;
  1560. border: 1px solid rgba(209, 164, 95, 0.62) !important;
  1561. }
  1562. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  1563. min-width: 120px;
  1564. width: 120px;
  1565. border-radius: 2px;
  1566. border: 1px solid transparent;
  1567. background:
  1568. linear-gradient(135deg, rgba(19, 7, 10, 0.94), rgba(42, 13, 19, 0.88), rgba(6, 2, 3, 0.96)) padding-box,
  1569. linear-gradient(135deg, rgba(241, 223, 192, 0.62), rgba(209, 164, 95, 0.52), rgba(110, 22, 35, 0.58)) border-box !important;
  1570. box-shadow:
  1571. inset 0 0 0 3px rgba(19, 7, 10, 0.68),
  1572. inset 0 1px 0 rgba(255, 255, 255, 0.1),
  1573. 3px 4px 0 rgba(19, 7, 10, 0.42);
  1574. }
  1575. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value {
  1576. color: #f1dfc0;
  1577. font-family: Georgia, 'Times New Roman', serif;
  1578. font-size: 0.95rem;
  1579. font-weight: 900;
  1580. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  1581. }
  1582. :is(.default, .dark, .transparent, .css-b62m3t-container) svg {
  1583. color: #d1a45f;
  1584. transition: 300ms;
  1585. }
  1586.  
  1587. /* DROPDOWN MENU: Styles the open selector menu as a velvet theatre directory. */
  1588. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu {
  1589. width: max-content;
  1590. text-align: center;
  1591. overflow: hidden;
  1592. border-radius: 2px;
  1593. border: 1px solid rgba(209, 164, 95, 0.58);
  1594. background:
  1595. radial-gradient(circle at 16% 12%, rgba(241, 223, 192, 0.1), transparent 28%),
  1596. radial-gradient(circle at 86% 88%, rgba(110, 22, 35, 0.24), transparent 34%),
  1597. linear-gradient(145deg, rgba(42, 13, 19, 0.98), rgba(19, 7, 10, 0.96) 46%, rgba(6, 2, 3, 0.98));
  1598. box-shadow:
  1599. inset 0 0 0 3px rgba(19, 7, 10, 0.78),
  1600. 0 16px 34px rgba(0, 0, 0, 0.5),
  1601. 0 0 18px rgba(209, 164, 95, 0.14),
  1602. 3px 4px 0 rgba(110, 22, 35, 0.36);
  1603. backdrop-filter: blur(12px) saturate(1.05);
  1604. }
  1605. .css-qr46ko {
  1606. padding: 0;
  1607. }
  1608.  
  1609. /* DROPDOWN OPTIONS: Styles the normal, hovered, focused, and selected menu choices. */
  1610. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option {
  1611. color: #f1dfc0;
  1612. background: transparent;
  1613. border-bottom: 1px dashed rgba(209, 164, 95, 0.22);
  1614. font-family: Georgia, 'Times New Roman', serif;
  1615. font-size: 0.9rem;
  1616. font-weight: 800;
  1617. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  1618. }
  1619. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  1620. background:
  1621. linear-gradient(135deg, rgba(110, 22, 35, 0.72), rgba(42, 13, 19, 0.9));
  1622. color: #f1dfc0;
  1623. transition: 300ms;
  1624. }
  1625. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected,
  1626. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused {
  1627. background:
  1628. linear-gradient(135deg, #d1a45f, #f1dfc0);
  1629. color: #13070a;
  1630. text-shadow: none;
  1631. transition: 300ms;
  1632. }
  1633. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:hover,
  1634. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:focus-within {
  1635. border: 1px solid transparent !important;
  1636. background:
  1637. radial-gradient(circle at 16% 12%, rgba(241, 223, 192, 0.12), transparent 28%),
  1638. linear-gradient(135deg, rgba(42, 13, 19, 0.96), rgba(110, 22, 35, 0.86), rgba(19, 7, 10, 0.98)) padding-box,
  1639. linear-gradient(135deg, rgba(241, 223, 192, 0.76), rgba(209, 164, 95, 0.66), rgba(110, 22, 35, 0.64)) border-box !important;
  1640. box-shadow:
  1641. 0 0 14px rgba(209, 164, 95, 0.22),
  1642. inset 0 0 0 3px rgba(19, 7, 10, 0.72),
  1643. inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  1644. }
  1645.  
  1646. /* MAIN POPOVER SHELL: Styles the notification dropdown. */
  1647. [class*="Popover_"] {
  1648. background:
  1649. radial-gradient(circle at 50% 0%, rgba(241, 223, 192, 0.16), transparent 26%),
  1650. linear-gradient(90deg, rgba(19, 7, 10, 0.96), rgba(42, 13, 19, 0.92) 24%, rgba(19, 7, 10, 0.98) 52%, rgba(42, 13, 19, 0.92) 78%, rgba(19, 7, 10, 0.96)),
  1651. repeating-linear-gradient(90deg, rgba(110, 22, 35, 0.5) 0 22px, rgba(19, 7, 10, 0.75) 22px 44px) !important;
  1652. border: 1px solid rgba(209, 164, 95, 0.68) !important;
  1653. border-radius: 8px !important;
  1654. box-shadow:
  1655. inset 0 0 0 4px rgba(19, 7, 10, 0.86),
  1656. inset 0 0 0 5px rgba(209, 164, 95, 0.26),
  1657. inset 0 -22px 34px rgba(0, 0, 0, 0.34),
  1658. 0 18px 38px rgba(19, 7, 10, 0.82),
  1659. 0 0 18px rgba(209, 164, 95, 0.18) !important;
  1660. backdrop-filter: blur(14px) saturate(1.05);
  1661. -webkit-backdrop-filter: blur(14px) saturate(1.05);
  1662. font-family: Georgia, 'Times New Roman', serif;
  1663. color: #f1dfc0;
  1664. overflow: hidden;
  1665. text-shadow: 1px 1px 0 #13070a;
  1666. }
  1667.  
  1668. /* LOADING STATE: Keeps loading text and spinner in the theatre palette. */
  1669. [class*="_loadingState_"] {
  1670. color: #f1dfc0;
  1671. }
  1672. [class*="_loadingSpinner_"] {
  1673. border: 3px solid rgba(241, 223, 192, 0.28);
  1674. border-top: 3px solid #d1a45f;
  1675. }
  1676. [class*="_loadingMessage_"] {
  1677. color: rgba(241, 223, 192, 0.9);
  1678. font-family: Georgia, 'Times New Roman', serif;
  1679. }
  1680.  
  1681. /* EMPTY STATE: Styles the no-notification message as a quiet stage notice. */
  1682. [class*="_emptyState_"] {
  1683. display: flex;
  1684. flex-flow: column;
  1685. align-items: center;
  1686. color: rgba(241, 223, 192, 0.9);
  1687. }
  1688. [class*="_emptyState_"] svg {
  1689. color: #d1a45f !important;
  1690. opacity: 1;
  1691. filter: drop-shadow(0 0 8px rgba(209, 164, 95, 0.32));
  1692. }
  1693. [class*="_emptyStateTitle_"] {
  1694. color: #f1dfc0;
  1695. font-family: Georgia, 'Times New Roman', serif;
  1696. letter-spacing: 1px;
  1697. text-transform: uppercase;
  1698. }
  1699. [class*="_emptyStateMessage_"] {
  1700. color: rgba(241, 223, 192, 0.74);
  1701. font-family: Georgia, 'Times New Roman', serif;
  1702. }
  1703.  
  1704. /* POPOVER HEADER: Creates the gilded title rail at the top of the dropdown. */
  1705. [class*="popoverHeader_"] {
  1706. position: relative;
  1707. background:
  1708. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.12), transparent),
  1709. linear-gradient(180deg, rgba(110, 22, 35, 0.78), rgba(19, 7, 10, 0.88)) !important;
  1710. border-bottom: 1px solid rgba(209, 164, 95, 0.52) !important;
  1711. padding: 1rem 1.2rem !important;
  1712. }
  1713. [class*="popoverHeader_"]::after {
  1714. content: "";
  1715. position: absolute;
  1716. left: 1rem;
  1717. right: 1rem;
  1718. bottom: -1px;
  1719. height: 1px;
  1720. background: linear-gradient(90deg, transparent, rgba(241, 223, 192, 0.72), rgba(209, 164, 95, 0.72), transparent);
  1721. pointer-events: none;
  1722. }
  1723. [class*="popoverTitle_"] {
  1724. font-family: Georgia, 'Times New Roman', serif;
  1725. font-size: 1.1rem;
  1726. color: #f1dfc0;
  1727. text-transform: uppercase;
  1728. letter-spacing: 2px;
  1729. text-shadow:
  1730. 1px 1px 0 #13070a,
  1731. 0 0 10px rgba(209, 164, 95, 0.24);
  1732. }
  1733.  
  1734. /* HEADER BUTTONS: Styles close and settings buttons as small gilt controls. */
  1735. [class*="popoverHeader_"] button {
  1736. color: #d1a45f !important;
  1737. border: 1px solid rgba(209, 164, 95, 0.5) !important;
  1738. border-radius: 2px !important;
  1739. background:
  1740. linear-gradient(180deg, rgba(42, 13, 19, 0.96), rgba(19, 7, 10, 0.94)) !important;
  1741. box-shadow:
  1742. inset 0 0 0 2px rgba(19, 7, 10, 0.8),
  1743. 0 5px 12px rgba(19, 7, 10, 0.34);
  1744. transition:
  1745. background 220ms ease,
  1746. border-color 220ms ease,
  1747. color 220ms ease,
  1748. transform 220ms ease;
  1749. }
  1750. [class*="popoverHeader_"] button:hover {
  1751. color: #13070a !important;
  1752. background: linear-gradient(180deg, #f1dfc0, #d1a45f) !important;
  1753. border-color: #f1dfc0 !important;
  1754. text-shadow: none;
  1755. transform: translateY(-1px);
  1756. }
  1757.  
  1758. /* NOTIFICATION LIST: Controls the scroll area inside the popover. */
  1759. [class*="notificationsList_"] {
  1760. max-height: 480px;
  1761. padding: 0.55rem;
  1762. }
  1763. [class*="notificationsList_"]::-webkit-scrollbar {
  1764. width: 7px;
  1765. }
  1766. [class*="notificationsList_"]::-webkit-scrollbar-track {
  1767. background: rgba(19, 7, 10, 0.62);
  1768. border-radius: 999px;
  1769. }
  1770. [class*="notificationsList_"]::-webkit-scrollbar-thumb {
  1771. background: linear-gradient(#6e1623, #d1a45f);
  1772. border-radius: 999px;
  1773. border: 2px solid rgba(19, 7, 10, 0.82);
  1774. }
  1775.  
  1776. /* NOTIFICATION ITEM: Turns each notification into a small velvet playbill card. */
  1777. [class*="_notificationItem_"] {
  1778. position: relative;
  1779. overflow: hidden;
  1780. margin: 0.55rem 0;
  1781. padding: 0.7rem;
  1782. border-radius: 3px !important;
  1783. border: 1px solid rgba(209, 164, 95, 0.34) !important;
  1784. background:
  1785. linear-gradient(90deg, rgba(209, 164, 95, 0.06), transparent 24% 76%, rgba(209, 164, 95, 0.06)),
  1786. linear-gradient(180deg, rgba(42, 13, 19, 0.86), rgba(19, 7, 10, 0.94)) !important;
  1787. box-shadow:
  1788. inset 0 0 0 1px rgba(19, 7, 10, 0.78),
  1789. 0 4px 12px rgba(0, 0, 0, 0.26) !important;
  1790. transition:
  1791. background 220ms ease,
  1792. border-color 220ms ease,
  1793. box-shadow 220ms ease,
  1794. transform 220ms ease;
  1795. }
  1796. [class*="_notificationItem_"]::before {
  1797. content: "";
  1798. position: absolute;
  1799. inset: 0;
  1800. pointer-events: none;
  1801. background:
  1802. linear-gradient(120deg, transparent 0 34%, rgba(241, 223, 192, 0.08), transparent 58%),
  1803. radial-gradient(circle at 18% 12%, rgba(241, 223, 192, 0.12), transparent 24%);
  1804. opacity: 0.72;
  1805. mix-blend-mode: screen;
  1806. }
  1807. [class*="_notificationItem_"]:hover {
  1808. background:
  1809. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.14), transparent),
  1810. linear-gradient(180deg, rgba(110, 22, 35, 0.82), rgba(42, 13, 19, 0.94)) !important;
  1811. border-color: rgba(241, 223, 192, 0.58) !important;
  1812. box-shadow:
  1813. inset 0 0 0 1px rgba(19, 7, 10, 0.8),
  1814. 0 6px 16px rgba(19, 7, 10, 0.48),
  1815. 0 0 14px rgba(209, 164, 95, 0.16) !important;
  1816. transform: translateY(-2px);
  1817. }
  1818.  
  1819. /* CONTENT WRAPPER: Keeps notification text above decorative overlays. */
  1820. [class*="_contentWrapper_"],
  1821. [class*="_notificationBody_"] {
  1822. position: relative;
  1823. z-index: 2;
  1824. font-family: Georgia, 'Times New Roman', serif;
  1825. }
  1826.  
  1827. ._content_di476_115 {
  1828. height: 8pc;
  1829. }
  1830.  
  1831. /* UNREAD INDICATOR: Uses a gold-and-wine strip for unread notifications. */
  1832. [class*="Indicator_"] {
  1833. width: 3px;
  1834. border-radius: 999px;
  1835. background: linear-gradient(#d1a45f, #6e1623) !important;
  1836. box-shadow: 0 0 8px rgba(209, 164, 95, 0.42);
  1837. }
  1838.  
  1839. /* NOTIFICATION TITLE: Styles subjects with theatrical billing text. */
  1840. [class*="_notificationTitle_"],
  1841. [class*="_subject_"] {
  1842. font-family: Georgia, 'Times New Roman', serif;
  1843. color: #f1dfc0 !important;
  1844. font-size: 0.95rem;
  1845. text-shadow:
  1846. 1px 1px 0 #13070a,
  1847. 0 0 8px rgba(209, 164, 95, 0.16);
  1848. font-weight: 700;
  1849. letter-spacing: 0.5px;
  1850. }
  1851.  
  1852. /* NOTIFICATION MESSAGE: Styles body previews as softer parchment text. */
  1853. [class*="_notificationMessage_"],
  1854. [class*="_body_"] {
  1855. color: rgba(241, 223, 192, 0.84) !important;
  1856. font-size: 0.86rem;
  1857. font-family: Georgia, 'Times New Roman', serif;
  1858. text-shadow: 1px 1px 0 #13070a;
  1859. width: auto;
  1860. height: auto;
  1861. max-width: 170px;
  1862. max-height: 110px;
  1863. overflow: hidden;
  1864. }
  1865.  
  1866. /* TIMESTAMP: Hides timestamps to keep the notification card cleaner. */
  1867. [class*="_notificationTime_"],
  1868. [class*="_timestamp_"] {
  1869. font-size: 0.72rem;
  1870. font-family: Georgia, 'Times New Roman', serif;
  1871. color: rgba(209, 164, 95, 0.72) !important;
  1872. opacity: 0.85;
  1873. letter-spacing: 0.03em;
  1874. display: none;
  1875. }
  1876.  
  1877. /* LOAD MORE BUTTON: Styles the footer action as a small theatre ticket. */
  1878. [class*="_loadMoreButton_"] {
  1879. font-family: Georgia, 'Times New Roman', serif;
  1880. background:
  1881. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.1), transparent),
  1882. linear-gradient(180deg, rgba(42, 13, 19, 0.96), rgba(19, 7, 10, 0.94)) !important;
  1883. color: #d1a45f !important;
  1884. border-top: 1px solid rgba(209, 164, 95, 0.34) !important;
  1885. text-transform: uppercase;
  1886. letter-spacing: 1.2px;
  1887. transition:
  1888. background 220ms ease,
  1889. color 220ms ease;
  1890. }
  1891. [class*="_loadMoreButton_"]:hover {
  1892. background: linear-gradient(180deg, #f1dfc0, #d1a45f) !important;
  1893. color: #13070a !important;
  1894. text-shadow: none;
  1895. }
  1896.  
  1897. /* NOTIFICATION ICON CONTAINER: Frames notification icons like small stage emblems. */
  1898. [class*="_notificationIconContainer_"] {
  1899. background:
  1900. radial-gradient(circle at 30% 20%, rgba(241, 223, 192, 0.22), transparent 34%),
  1901. linear-gradient(135deg, rgba(110, 22, 35, 0.68), rgba(19, 7, 10, 0.9)) !important;
  1902. border: 1px solid rgba(209, 164, 95, 0.42);
  1903. border-radius: 3px;
  1904. padding: 5px;
  1905. box-shadow:
  1906. inset 0 0 0 2px rgba(19, 7, 10, 0.68),
  1907. 0 4px 10px rgba(19, 7, 10, 0.36);
  1908. }
  1909. [class*="_notificationIconContainer_"] svg {
  1910. color: #d1a45f !important;
  1911. filter:
  1912. drop-shadow(1px 1px 0 rgba(19, 7, 10, 0.72))
  1913. drop-shadow(0 0 5px rgba(209, 164, 95, 0.2));
  1914. }
  1915.  
  1916. /* STATUS ICON COLORS: Recolors system status states into the theatre palette. */
  1917. [class*="_iconInfo_"] {
  1918. background: rgba(209, 164, 95, 0.18) !important;
  1919. color: #d1a45f !important;
  1920. }
  1921. [class*="_iconWarning_"] {
  1922. background: rgba(241, 223, 192, 0.2) !important;
  1923. color: #f1dfc0 !important;
  1924. }
  1925. [class*="_iconError_"] {
  1926. background: rgba(110, 22, 35, 0.32) !important;
  1927. color: #f1dfc0 !important;
  1928. }
  1929. [class*="_iconSuccess_"] {
  1930. background: rgba(209, 164, 95, 0.22) !important;
  1931. color: #d1a45f !important;
  1932. }
  1933.  
  1934. /* CHARACTER AVATAR: Gives character images a small gilded frame. */
  1935. [class*="_characterAvatar_"] {
  1936. position: relative;
  1937. border-radius: 4px;
  1938. overflow: hidden;
  1939. width: 200px;
  1940. object-fit: cover;
  1941. filter:
  1942. brightness(0.84)
  1943. contrast(1.08)
  1944. saturate(0.82)
  1945. sepia(0.08);
  1946. transition: filter 220ms ease;
  1947. }
  1948. [class*="_characterAvatar_"]::before {
  1949. content: "";
  1950. position: absolute;
  1951. inset: 0;
  1952. border: 1px solid rgba(209, 164, 95, 0.56);
  1953. border-radius: 4px;
  1954. pointer-events: none;
  1955. z-index: 2;
  1956. }
  1957. [class*="_characterAvatar_"]::after {
  1958. content: "";
  1959. position: absolute;
  1960. inset: 0;
  1961. background: radial-gradient(circle at center, transparent 46%, rgba(19, 7, 10, 0.58) 100%);
  1962. z-index: 1;
  1963. pointer-events: none;
  1964. }
  1965.  
  1966. /* USER AVATAR: Styles user icons with a gold ring. */
  1967. [class*="_userAvatar_"] {
  1968. border: 2px solid rgba(209, 164, 95, 0.82) !important;
  1969. box-shadow:
  1970. 0 0 8px rgba(209, 164, 95, 0.34),
  1971. 0 0 12px rgba(110, 22, 35, 0.22) !important;
  1972. border-radius: 50%;
  1973. }
  1974. [class*="_notificationItem_"]:has([class*="_avatarSection_"]):hover [class*="_userAvatar_"] {
  1975. border-color: rgba(241, 223, 192, 0.86) !important;
  1976. box-shadow:
  1977. 0 0 10px rgba(241, 223, 192, 0.28),
  1978. 0 0 16px rgba(209, 164, 95, 0.18) !important;
  1979. }
  1980.  
  1981. /* UNREAD CONTENT: Highlights unread messages without breaking the dark theatre tone. */
  1982. [class*="_contentWrapperUnread_"] {
  1983. background:
  1984. linear-gradient(90deg, rgba(209, 164, 95, 0.12), rgba(110, 22, 35, 0.12), rgba(19, 7, 10, 0.2)) !important;
  1985. box-shadow:
  1986. 0 0 10px rgba(209, 164, 95, 0.12),
  1987. inset 3px 0 0 rgba(209, 164, 95, 0.68) !important;
  1988. border-left: 0 !important;
  1989. border-radius: 3px;
  1990. top: 12px;
  1991. }
  1992. [class*="_subjectUnread_"] {
  1993. background: unset !important;
  1994. -webkit-background-clip: unset;
  1995. -webkit-text-fill-color: unset;
  1996. background-clip: unset;
  1997. color: #f1dfc0 !important;
  1998. }
  1999.  
  2000. /* HIGHLIGHTED USERNAME: Colors mentioned usernames with antique gold. */
  2001. ._highlightUsername_di476_159 {
  2002. color: #d1a45f;
  2003. text-shadow:
  2004. 1px 1px 0 #13070a,
  2005. 0 0 8px rgba(209, 164, 95, 0.38);
  2006. }
  2007.  
  2008. /* NOTIFICATION BUTTON: Removes default hover fill on the top-bar bell button. */
  2009. ._notificationsButton_wpa9q_7:hover {
  2010. background: transparent;
  2011. }
  2012.  
  2013. /* NOTIFICATION BUTTON CONTAINER: Adds the glowing theatre-bulb hover ring. */
  2014. ._notificationsContainer_wpa9q_2 {
  2015. position: relative;
  2016. border-radius: 999px;
  2017. isolation: isolate;
  2018. transition:
  2019. transform 220ms ease,
  2020. filter 220ms ease;
  2021. }
  2022. ._notificationsContainer_wpa9q_2::before {
  2023. content: "";
  2024. position: absolute;
  2025. inset: -6px;
  2026. z-index: -1;
  2027. border-radius: 999px;
  2028. background:
  2029. radial-gradient(circle at 35% 25%, rgba(241, 223, 192, 0.42), transparent 28%),
  2030. linear-gradient(135deg, rgba(209, 164, 95, 0.3), rgba(110, 22, 35, 0.22), rgba(19, 7, 10, 0.22));
  2031. border: 1px solid rgba(209, 164, 95, 0.38);
  2032. opacity: 0;
  2033. transform: scale(0.72);
  2034. box-shadow:
  2035. 0 0 14px rgba(209, 164, 95, 0.18),
  2036. inset 0 1px 0 rgba(241, 223, 192, 0.22);
  2037. pointer-events: none;
  2038. transition:
  2039. opacity 220ms ease,
  2040. transform 220ms ease;
  2041. }
  2042. ._notificationsContainer_wpa9q_2::after {
  2043. content: "";
  2044. position: absolute;
  2045. inset: -10px;
  2046. z-index: -2;
  2047. border-radius: 999px;
  2048. border: 1px solid rgba(209, 164, 95, 0.44);
  2049. opacity: 0;
  2050. transform: scale(0.5);
  2051. pointer-events: none;
  2052. }
  2053. ._notificationsContainer_wpa9q_2:hover::before {
  2054. opacity: 1;
  2055. transform: scale(1);
  2056. }
  2057. ._notificationsContainer_wpa9q_2 svg {
  2058. color: #d1a45f !important;
  2059. filter: drop-shadow(1px 1px 0 rgba(19, 7, 10, 0.78));
  2060. transition:
  2061. color 220ms ease,
  2062. filter 220ms ease,
  2063. transform 220ms ease;
  2064. }
  2065. ._notificationsContainer_wpa9q_2:hover svg {
  2066. color: #f1dfc0 !important;
  2067. filter:
  2068. drop-shadow(1px 1px 0 rgba(19, 7, 10, 0.78))
  2069. drop-shadow(0 0 8px rgba(209, 164, 95, 0.34));
  2070. }
  2071.  
  2072. </style>
  2073.  
  2074. <!-- THEATRE HEADING: Change the theatre name and company subtitle here. -->
  2075. <div class="theatre-crest">
  2076. Black Swan
  2077. <span>Royal Dramatic Company</span>
  2078. <i></i>
  2079. </div>
  2080.  
  2081. <!-- PRODUCTION SUBTITLE: Short line displayed near bottom of portrait. -->
  2082. <div class="production-billing">A dark romance in three acts</div>
  2083.  
  2084. <!-- DIRECTORY LABELS: Controls the vertical side tickets used to switch between profile panels. -->
  2085. <div class="theatre-directory">
  2086. <div class="theatre-ticket" tabindex="0">Casting Ledger</div>
  2087. <div class="theatre-ticket" tabindex="0">Backstage Index</div>
  2088. <div class="theatre-ticket" tabindex="0">Encore Selections</div>
  2089. </div>
  2090.  
  2091. <!-- CASTING LEDGER: Replace these headings and descriptions with your main profile information, links, and opening notes. -->
  2092. <div class="theatre-program" id="theatre-act-1">
  2093. <p class="theatre-program-title"><span>Casting Ledger</span></p>
  2094. <div class="theatre-program-scroll">
  2095. <div class="correspondence-desk">
  2096. <a class="correspondence-link" href="LINK1_URL" target="_blank" rel="noopener noreferrer">Link 1</a>
  2097. <a class="correspondence-link" href="LINK2_URL" target="_blank" rel="noopener noreferrer">Link 2</a>
  2098. <a class="correspondence-link" href="LINK3_URL" target="_blank" rel="noopener noreferrer">Link 3</a>
  2099. </div>
  2100. <p><strong>The Playwright</strong><br>Place your main profile introduction here: your name, interests, writing style, or anything visitors should know first.</p>
  2101. <p><strong>Current Production</strong><br>Add your present project, featured series, newest character, or the world currently occupying your thoughts.</p>
  2102. <p><strong>Preferred Roles</strong><br>List favorite genres, dynamics, character types, themes, and the stories you most enjoy creating.</p>
  2103. <p><strong>House Notice</strong><br>Keep one short personal note here, such as your availability, message preferences, or current status.</p>
  2104. <p><strong>Signature Themes</strong><br>Add recurring aesthetics, moods, motifs, or subjects that visitors are likely to find throughout your work.</p>
  2105. <p><strong>Audience Notes</strong><br>Share a small welcome, profile disclaimer, fun fact, or anything else that belongs in your opening introduction.</p>
  2106. </div>
  2107. </div>
  2108.  
  2109. <!-- BACKSTAGE INDEX: Replace these entries with rules, series links, credits, archives, or navigation details. -->
  2110. <div class="theatre-program" id="theatre-act-2">
  2111. <p class="theatre-program-title"><span>Backstage Index</span></p>
  2112. <div class="theatre-program-scroll">
  2113. <p><strong>Repertoire</strong><br>List your primary series, settings, collections, or character categories here.</p>
  2114. <p><strong>Stage Door</strong><br>Add profile links, social information, navigation notes, or places where visitors can contact you.</p>
  2115. <p><strong>House Rules</strong><br>Include boundaries, request guidelines, content preferences, or anything guests should read.</p>
  2116. <p><strong>Program Notes</strong><br>Use this space for credits, additional context, disclaimers, or a short FAQ.</p>
  2117. <p><strong>Featured Companies</strong><br>Organize important creators, friends, collaborators, inspirations, or affiliated profiles here.</p>
  2118. <p><strong>Archive Room</strong><br>Point visitors toward older releases, retired characters, completed collections, or preserved favorites.</p>
  2119. </div>
  2120. </div>
  2121.  
  2122. <!-- ENCORE SELECTIONS: Outer section for favorite creators/friends and favorite bots made by other people. -->
  2123. <div class="theatre-program" id="theatre-act-3">
  2124. <p class="theatre-program-title"><span>Encore Selections</span></p>
  2125. <div class="favorite-curtain-stage">
  2126. <div class="favorite-curtain-tabs">
  2127. <div class="favorite-curtain-tab" tabindex="0">Favorite Performers</div>
  2128. <div class="favorite-curtain-tab" tabindex="0">Favorite Performances</div>
  2129. </div>
  2130. <div class="favorite-curtain-panel" id="favorite-performers-panel">
  2131. <div class="favorite-performers-gallery">
  2132. <div class="favorite-performer">
  2133. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2134. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/TI0VCnnQftBcbGgG0Doo_.webp" alt="Performer One">
  2135. <span class="favorite-performer-name">Performer One</span>
  2136. </a>
  2137. </div>
  2138. <div class="favorite-performer">
  2139. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2140. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/96abM6dB-EszMcEwg-xAe.webp" alt="Performer Two">
  2141. <span class="favorite-performer-name">Performer Two</span>
  2142. </a>
  2143. </div>
  2144. <div class="favorite-performer">
  2145. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2146. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/TI0VCnnQftBcbGgG0Doo_.webp" alt="Performer Three">
  2147. <span class="favorite-performer-name">Performer Three</span>
  2148. </a>
  2149. </div>
  2150. <div class="favorite-performer">
  2151. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2152. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/96abM6dB-EszMcEwg-xAe.webp" alt="Performer Four">
  2153. <span class="favorite-performer-name">Performer Four</span>
  2154. </a>
  2155. </div>
  2156. <div class="favorite-performer">
  2157. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2158. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/TI0VCnnQftBcbGgG0Doo_.webp" alt="Performer Five">
  2159. <span class="favorite-performer-name">Performer Five</span>
  2160. </a>
  2161. </div>
  2162. <div class="favorite-performer">
  2163. <a href="PERFORMER_PROFILE_URL" target="_blank" rel="noopener noreferrer">
  2164. <img class="favorite-performer-image" src="https://ella.janitorai.com/media-approved/96abM6dB-EszMcEwg-xAe.webp" alt="Performer Six">
  2165. <span class="favorite-performer-name">Performer Six</span>
  2166. </a>
  2167. </div>
  2168. </div>
  2169. </div>
  2170. <div class="favorite-curtain-panel" id="favorite-performances-panel">
  2171. <div class="favorite-performers-gallery favorite-performances-gallery">
  2172. <div class="favorite-performer">
  2173. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2174. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance One">
  2175. <span class="favorite-performer-name">Bot Name One</span>
  2176. <span class="favorite-performer-credit">By Creator Name</span>
  2177. </a>
  2178. </div>
  2179. <div class="favorite-performer">
  2180. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2181. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance Two">
  2182. <span class="favorite-performer-name">Bot Name Two</span>
  2183. <span class="favorite-performer-credit">By Creator Name</span>
  2184. </a>
  2185. </div>
  2186. <div class="favorite-performer">
  2187. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2188. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance Three">
  2189. <span class="favorite-performer-name">Bot Name Three</span>
  2190. <span class="favorite-performer-credit">By Creator Name</span>
  2191. </a>
  2192. </div>
  2193. <div class="favorite-performer">
  2194. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2195. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance Four">
  2196. <span class="favorite-performer-name">Bot Name Four</span>
  2197. <span class="favorite-performer-credit">By Creator Name</span>
  2198. </a>
  2199. </div>
  2200. <div class="favorite-performer">
  2201. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2202. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance Five">
  2203. <span class="favorite-performer-name">Bot Name Five</span>
  2204. <span class="favorite-performer-credit">By Creator Name</span>
  2205. </a>
  2206. </div>
  2207. <div class="favorite-performer">
  2208. <a href="BOT_URL" target="_blank" rel="noopener noreferrer">
  2209. <img class="favorite-performer-image" src="BOT_IMAGE_URL" alt="Favorite Performance Six">
  2210. <span class="favorite-performer-name">Bot Name Six</span>
  2211. <span class="favorite-performer-credit">By Creator Name</span>
  2212. </a>
  2213. </div>
  2214. </div>
  2215. </div>
  2216. </div>
  2217. </div>
  2218.  
  2219. <!-- TEMPLATE CREDIT: Do not remove this credit block. -->
  2220. <div class="credits">
  2221. Theatre Built By <a href="https://janitorai.com/profiles/acd0fd4c-3410-4599-a987-a84c9eb0547d_profile-of-cellophane" target="_blank" rel="noopener noreferrer">Cellophane</a>
  2222. </div>
  2223.  
  2224. <style>
  2225. /* BOT CARDS: Styles the Black Swan stage-poster bot card layout. */
  2226.  
  2227. /* CARD LIST: Arranges the bot cards in a centered wrapping stage-poster grid. */
  2228. .pp-cc-list-container {
  2229. display: flex;
  2230. flex-direction: row;
  2231. flex-wrap: wrap;
  2232. justify-content: center;
  2233. align-items: flex-start;
  2234. gap: 2.35rem;
  2235. padding: 2rem 0;
  2236. }
  2237.  
  2238. /* OUTER CARD: Sets the size, perspective, and transparent wrapper for each bot card. */
  2239. .pp-cc-wrapper {
  2240. position: relative;
  2241. width: 292px;
  2242. height: 418px;
  2243. font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  2244. perspective: 1200px;
  2245. background: transparent;
  2246. }
  2247. .pp-cc-wrapper,
  2248. .pp-cc-wrapper > *:not(.profile-character-card-stack) {
  2249. background: transparent !important;
  2250. }
  2251. .pp-cc-wrapper *,
  2252. .profile-character-card-stack * {
  2253. box-sizing: border-box;
  2254. }
  2255.  
  2256. /* REMOVE DEFAULT CARD NOISE: Clears native shadows and backgrounds that clash with the poster styling. */
  2257. .css-mwqlii:hover,
  2258. .css-13wmn96:hover,
  2259. .css-1xjyfw9,
  2260. .css-y7b0z0 {
  2261. box-shadow: none;
  2262. background: transparent;
  2263. }
  2264.  
  2265. /* HIDE NATIVE CLUTTER: Removes default tokens, star line, creator name, and extra card elements. */
  2266. .pp-cc-tokens-count,
  2267. .profile-character-card-stack > a:nth-of-type(2),
  2268. .pp-cc-star-line,
  2269. .css-1wqmh16,
  2270. .css-nip9dx,
  2271. .css-xrg4vd,
  2272. .css-5v5qgx,
  2273. .css-1awld45,
  2274. .css-1cui3us,
  2275. .css-8828od {
  2276. display: none !important;
  2277. }
  2278.  
  2279. /* GRAND MARQUEE SHELL: Builds the main velvet-and-gold stage poster frame. */
  2280. .profile-character-card-stack {
  2281. position: relative;
  2282. width: 100%;
  2283. height: 100%;
  2284. overflow: visible;
  2285. isolation: isolate;
  2286. background:
  2287. radial-gradient(circle at 50% 8%, rgba(241, 223, 192, 0.18), transparent 18%),
  2288. linear-gradient(90deg, rgba(19, 7, 10, 0.96), rgba(42, 13, 19, 0.88) 18%, rgba(19, 7, 10, 0.94) 50%, rgba(42, 13, 19, 0.88) 82%, rgba(19, 7, 10, 0.96)),
  2289. repeating-linear-gradient(90deg, rgba(110, 22, 35, 0.5) 0 19px, rgba(19, 7, 10, 0.72) 19px 38px);
  2290. border: 1px solid #d1a45f;
  2291. border-radius: 38px 38px 7px 7px / 28px 28px 7px 7px;
  2292. box-shadow:
  2293. inset 0 0 0 4px #13070a,
  2294. inset 0 0 0 5px rgba(209, 164, 95, 0.66),
  2295. inset 0 0 38px rgba(0, 0, 0, 0.62),
  2296. 0 18px 34px rgba(19, 7, 10, 0.72);
  2297. transform-style: preserve-3d;
  2298. transition:
  2299. transform 280ms ease,
  2300. box-shadow 280ms ease,
  2301. filter 280ms ease;
  2302. }
  2303. .profile-character-card-stack:hover {
  2304. transform: translateY(-9px) rotateX(2deg);
  2305. box-shadow:
  2306. inset 0 0 0 4px #13070a,
  2307. inset 0 0 0 5px rgba(241, 223, 192, 0.76),
  2308. inset 0 0 46px rgba(0, 0, 0, 0.52),
  2309. 0 24px 42px rgba(19, 7, 10, 0.82),
  2310. 0 0 28px rgba(209, 164, 95, 0.24);
  2311. }
  2312.  
  2313. /* FOOTLIGHTS: Adds the row of glowing bulbs along the bottom of each poster card. */
  2314. .profile-character-card-stack::after {
  2315. content: "";
  2316. position: absolute;
  2317. bottom: 12px;
  2318. left: 14px;
  2319. z-index: 18;
  2320. height: 10px;
  2321. width: 16pc;
  2322. pointer-events: none;
  2323. background:
  2324. radial-gradient(circle at 4% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2325. radial-gradient(circle at 16% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2326. radial-gradient(circle at 28% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2327. radial-gradient(circle at 40% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2328. radial-gradient(circle at 52% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2329. radial-gradient(circle at 64% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2330. radial-gradient(circle at 76% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2331. radial-gradient(circle at 88% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px),
  2332. radial-gradient(circle at 98% 50%, #f1dfc0 0 3px, #d1a45f 3.5px 5px, transparent 5.5px);
  2333. filter: drop-shadow(0 0 8px rgba(209, 164, 95, 0.78));
  2334. opacity: 0.9;
  2335. }
  2336.  
  2337. /* CLICKABLE LAYER: Keeps the whole card clickable without covering the visual styling. */
  2338. .profile-character-card-stack > a:nth-of-type(1) {
  2339. position: absolute;
  2340. inset: 0;
  2341. z-index: 80;
  2342. display: block;
  2343. background: transparent;
  2344. border: none;
  2345. color: transparent;
  2346. text-decoration: none;
  2347. }
  2348.  
  2349. /* POSTER INTERIOR: Positions the card content inside the theatre poster frame. */
  2350. .profile-character-card-stack-link-component-box {
  2351. position: absolute;
  2352. inset: 12px;
  2353. z-index: 30;
  2354. pointer-events: none;
  2355. }
  2356.  
  2357. /* SERIES PLAQUE: Displays the small production label above the portrait window. */
  2358. .profile-character-card-stack-link-component-box::after {
  2359. content: "Velvet Performance";
  2360. position: absolute;
  2361. top: 52px;
  2362. left: 50%;
  2363. z-index: 28;
  2364. width: max-content;
  2365. max-width: 218px;
  2366. padding: 0.38rem 0.8rem;
  2367. color: #d1a45f;
  2368. background:
  2369. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.12), transparent),
  2370. rgba(19, 7, 10, 0.9);
  2371. border: 1px solid rgba(209, 164, 95, 0.66);
  2372. box-shadow:
  2373. inset 0 0 0 1px rgba(110, 22, 35, 0.78),
  2374. 0 5px 12px rgba(0, 0, 0, 0.36);
  2375. font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  2376. font-size: 0.54rem;
  2377. font-weight: 700;
  2378. letter-spacing: 2.4px;
  2379. text-align: center;
  2380. text-transform: uppercase;
  2381. text-shadow: 1px 1px 0 #13070a;
  2382. opacity: 1;
  2383. transform: translateX(-50%) translateY(0) scale(1);
  2384. transition:
  2385. opacity 260ms ease,
  2386. transform 360ms ease,
  2387. visibility 0s linear 0s;
  2388. }
  2389.  
  2390. .profile-character-card-stack:hover .profile-character-card-stack-link-component-box::after {
  2391. opacity: 0;
  2392. visibility: hidden;
  2393. transform: translateX(-50%) translateY(-8px) scale(0.96);
  2394. transition:
  2395. opacity 220ms ease,
  2396. transform 360ms ease,
  2397. visibility 0s linear 260ms;
  2398. }
  2399.  
  2400. /* ARCHED PORTRAIT FRAME: Shapes and frames the bot avatar as the main poster artwork. */
  2401. .profile-character-card-avatar-aspect-ratio {
  2402. position: absolute;
  2403. top: 76px;
  2404. left: 22px;
  2405. z-index: 8;
  2406. width: 248px;
  2407. height: 305px;
  2408. overflow: hidden;
  2409. background:
  2410. radial-gradient(circle at 50% 6%, rgba(241, 223, 192, 0.16), transparent 30%),
  2411. linear-gradient(180deg, #13070a, #060203);
  2412. border: 1px solid #d1a45f;
  2413. border-radius: 102px 102px 4px 4px / 70px 70px 4px 4px;
  2414. box-shadow:
  2415. 0 0 0 4px #13070a,
  2416. 0 0 0 5px rgba(209, 164, 95, 0.7),
  2417. inset 0 0 28px rgba(0, 0, 0, 0.52);
  2418. transition:
  2419. filter 260ms ease,
  2420. transform 260ms ease;
  2421. }
  2422. .profile-character-card-stack:hover .profile-character-card-avatar-aspect-ratio {
  2423. filter: brightness(1.08);
  2424. }
  2425.  
  2426. /* CURTAIN CLOSE EFFECT: Closes the avatar curtains before the description and tags appear on hover. */
  2427. .profile-character-card-avatar-aspect-ratio {
  2428. box-shadow:
  2429. 0 0 0 4px #13070a,
  2430. 0 0 0 5px rgba(209, 164, 95, 0.7),
  2431. inset 0 0 0 9px rgba(19, 7, 10, 0.72),
  2432. inset 0 0 0 10px rgba(241, 223, 192, 0.42),
  2433. inset 0 0 28px rgba(0, 0, 0, 0.52);
  2434. }
  2435. .profile-character-card-avatar-aspect-ratio::before,
  2436. .profile-character-card-avatar-aspect-ratio::after {
  2437. content: "";
  2438. position: absolute;
  2439. top: 0;
  2440. bottom: 0;
  2441. height: auto;
  2442. width: 52%;
  2443. z-index: 9;
  2444. pointer-events: none;
  2445. opacity: 0.96;
  2446. transition:
  2447. transform 700ms cubic-bezier(0.77, 0, 0.18, 1),
  2448. filter 350ms ease;
  2449. }
  2450. .profile-character-card-avatar-aspect-ratio::before {
  2451. left: 0;
  2452. transform: translateX(-102%);
  2453. background:
  2454. linear-gradient(90deg, rgba(19, 7, 10, 0.9), transparent 28%, rgba(241, 223, 192, 0.08) 48%, transparent 62%, rgba(19, 7, 10, 0.82)),
  2455. repeating-linear-gradient(90deg, #13070a 0 14px, #2a0d13 14px 30px, #6e1623 30px 48px);
  2456. border-right: 1px solid #d1a45f;
  2457. box-shadow:
  2458. inset -14px 0 22px rgba(19, 7, 10, 0.76),
  2459. 6px 0 14px rgba(19, 7, 10, 0.55);
  2460. }
  2461. .profile-character-card-avatar-aspect-ratio::after {
  2462. right: 0;
  2463. transform: translateX(102%);
  2464. background:
  2465. linear-gradient(270deg, rgba(19, 7, 10, 0.9), transparent 28%, rgba(241, 223, 192, 0.08) 48%, transparent 62%, rgba(19, 7, 10, 0.82)),
  2466. repeating-linear-gradient(90deg, #2a0d13 0 14px, #6e1623 14px 32px, #13070a 32px 48px);
  2467. border-left: 1px solid #d1a45f;
  2468. box-shadow:
  2469. inset 14px 0 22px rgba(19, 7, 10, 0.76),
  2470. -6px 0 14px rgba(19, 7, 10, 0.55);
  2471. }
  2472. .profile-character-card-stack:hover .profile-character-card-avatar-aspect-ratio::before, .profile-character-card-stack:hover .profile-character-card-avatar-aspect-ratio::after {
  2473. transform: translateX(0);
  2474. transition:
  2475. transform 700ms cubic-bezier(0.77, 0, 0.18, 1) 0ms,
  2476. filter 350ms ease;
  2477. }
  2478.  
  2479. /* AVATAR IMAGE: Controls the bot portrait cropping, tone, and hover movement. */
  2480. .profile-character-card-avatar-aspect-ratio > img {
  2481. position: absolute;
  2482. inset: 0;
  2483. z-index: 2;
  2484. width: 100%;
  2485. height: 100%;
  2486. object-fit: cover;
  2487. filter:
  2488. brightness(0.78)
  2489. contrast(1.12)
  2490. saturate(0.8)
  2491. sepia(0.08);
  2492. transform: scale(1.04);
  2493. transition:
  2494. filter 280ms ease,
  2495. transform 460ms ease;
  2496. }
  2497.  
  2498. /* KEEP AVATAR INTERNALS FRAMED: Keeps nested avatar wrappers clipped to the arched portrait shape. */
  2499. .profile-character-card-avatar-aspect-ratio .chakra-aspect-ratio,
  2500. .profile-character-card-avatar-aspect-ratio > div {
  2501. border-radius: inherit;
  2502. }
  2503.  
  2504. /* PERFORMER NOTES REVEAL: Shows the bot description after the curtain close animation. */
  2505. .profile-character-card-description-box {
  2506. position: absolute;
  2507. top: 76px;
  2508. left: 22px;
  2509. z-index: 80;
  2510. width: 248px;
  2511. height: 210px;
  2512. overflow: hidden;
  2513. padding: 3.3rem 1rem 1rem;
  2514. color: #f1dfc0;
  2515. background:
  2516. linear-gradient(180deg, rgba(42, 13, 19, 0.96), rgba(19, 7, 10, 0.98)),
  2517. repeating-linear-gradient(90deg, rgba(110, 22, 35, 0.22) 0 18px, transparent 18px 36px);
  2518. border: 1px solid rgba(209, 164, 95, 0.68);
  2519. border-radius: 102px 102px 4px 4px / 70px 70px 4px 4px;
  2520. box-shadow:
  2521. inset 0 0 0 3px rgba(19, 7, 10, 0.86),
  2522. inset 0 0 28px rgba(0, 0, 0, 0.48);
  2523. pointer-events: none;
  2524. opacity: 0;
  2525. visibility: hidden;
  2526. transform: scale(0.94) translateY(10px);
  2527. transition:
  2528. opacity 180ms ease 0ms,
  2529. visibility 0s linear 180ms,
  2530. transform 180ms ease 0ms;
  2531. }
  2532. .profile-character-card-stack:hover .profile-character-card-description-box {
  2533. opacity: 0.97;
  2534. visibility: visible;
  2535. transform: scale(1) translateY(0);
  2536. transition:
  2537. opacity 230ms ease 720ms,
  2538. visibility 0s linear 720ms,
  2539. transform 230ms ease 720ms;
  2540. }
  2541.  
  2542. .profile-character-card-description-box::before {
  2543. content: "Performer Notes";
  2544. position: absolute;
  2545. top: 20px;
  2546. right: 24px;
  2547. left: 24px;
  2548. padding: 0.44rem 0.55rem;
  2549. color: #f1dfc0;
  2550. background: #6e1623;
  2551. border: 1px solid rgba(209, 164, 95, 0.68);
  2552. box-shadow:
  2553. inset 0 0 0 2px #13070a;
  2554. font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  2555. font-size: 0.62rem;
  2556. font-weight: 700;
  2557. letter-spacing: 2.4px;
  2558. text-align: center;
  2559. text-transform: uppercase;
  2560. text-shadow: 1px 1px 0 #13070a;
  2561. }
  2562. .profile-character-card-description-box::after {
  2563. content: "";
  2564. position: absolute;
  2565. top: 56px;
  2566. right: 36px;
  2567. left: 36px;
  2568. height: 1px;
  2569. background: linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.68), transparent);
  2570. }
  2571.  
  2572. .profile-character-card-description-box * {
  2573. color: #f1dfc0;
  2574. text-shadow: 1px 1px 0 #13070a;
  2575. font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
  2576. pointer-events: none;
  2577. }
  2578. .pp-cc-description {
  2579. position: absolute;
  2580. top: 70px;
  2581. right: 24px;
  2582. left: 24px;
  2583. max-height: 125px;
  2584. overflow: hidden;
  2585. font-size: 0.8rem;
  2586. line-height: 1.36;
  2587. text-align: center;
  2588. }
  2589. .pp-cc-description > *:not(:first-of-type) {
  2590. display: none;
  2591. }
  2592. .css-ua3v09 {
  2593. font-size: 0.72rem;
  2594. line-height: 1.36;
  2595. }
  2596.  
  2597. /* BILLING PLAQUE: Styles the bot name as the main theatre poster title plate. */
  2598. .pp-cc-name {
  2599. position: absolute;
  2600. right: 14px;
  2601. left: 14px;
  2602. z-index: 26;
  2603. min-height: 40px;
  2604. padding: 0.84rem 1.3rem 0.7rem;
  2605. color: #f1dfc0;
  2606. background:
  2607. linear-gradient(90deg, transparent, rgba(209, 164, 95, 0.14), transparent),
  2608. linear-gradient(180deg, #6e1623, #2a0d13);
  2609. border: 1px solid #d1a45f;
  2610. box-shadow:
  2611. inset 0 0 0 3px #13070a,
  2612. 0 8px 17px rgba(0, 0, 0, 0.46);
  2613. font-family: 'DM Serif Text', 'Fraunces', Georgia, 'Times New Roman', serif;
  2614. font-size: 0.88rem;
  2615. font-weight: 700;
  2616. letter-spacing: 2px;
  2617. text-align: center;
  2618. text-transform: uppercase;
  2619. text-shadow: 1px 1px 0 #13070a;
  2620. white-space: nowrap;
  2621. overflow: hidden;
  2622. text-overflow: ellipsis;
  2623. pointer-events: none;
  2624. }
  2625. .pp-cc-name::before,
  2626. .pp-cc-name::after {
  2627. content: "";
  2628. position: absolute;
  2629. top: 50%;
  2630. width: 8px;
  2631. height: 8px;
  2632. background: #d1a45f;
  2633. transform: translateY(-50%) rotate(45deg);
  2634. }
  2635. .pp-cc-name::before {
  2636. left: 9px;
  2637. }
  2638. .pp-cc-name::after {
  2639. right: 9px;
  2640. }
  2641.  
  2642. /* ADMISSION STATS: Converts chat counts into a small ticket-style admission detail. */
  2643. .profile-character-card-stats-box {
  2644. position: absolute;
  2645. right: 20px;
  2646. bottom: 10px;
  2647. left: 20px;
  2648. z-index: 22;
  2649. display: flex;
  2650. justify-content: center;
  2651. pointer-events: none;
  2652. }
  2653. .profile-character-card-stats-box svg {
  2654. display: none;
  2655. }
  2656. .pp-cc-ribbon {
  2657. position: relative;
  2658. inset: unset;
  2659. filter: none;
  2660. overflow: visible;
  2661. }
  2662. .pp-cc-ribbon-wrap {
  2663. clip-path: none;
  2664. overflow: visible;
  2665. background: transparent;
  2666. padding: 0;
  2667. box-shadow: none;
  2668. }
  2669. .pp-cc-chats {
  2670. display: inline-flex;
  2671. align-items: center;
  2672. justify-content: center;
  2673. width: fit-content;
  2674. max-width: 220px;
  2675. bottom: 43px;
  2676. position: relative;
  2677. padding: 5px 12px;
  2678. color: #d1a45f;
  2679. background: rgba(19, 7, 10, 0.9);
  2680. border: 1px solid rgba(209, 164, 95, 0.64);
  2681. box-shadow:
  2682. inset 0 0 0 1px rgba(110, 22, 35, 0.72);
  2683. font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  2684. font-size: 0.55rem;
  2685. font-weight: 700;
  2686. letter-spacing: 1.6px;
  2687. text-transform: uppercase;
  2688. text-shadow: 1px 1px 0 #13070a;
  2689. }
  2690. .pp-cc-chats::before {
  2691. content: "Admit";
  2692. margin-right: 0.34rem;
  2693. color: #f1dfc0;
  2694. }
  2695. .pp-cc-public-chats {
  2696. display: none;
  2697. }
  2698.  
  2699. /* CAST CREDIT TAGS: Shows bot tags as cast-credit strips after the curtains close. */
  2700. .pp-cc-tags {
  2701. position: absolute;
  2702. top: 285px;
  2703. right: 21px;
  2704. left: 24px;
  2705. z-index: 80;
  2706. height: 95px;
  2707. overflow-x: hidden;
  2708. overflow-y: auto;
  2709. padding: 10px 8px;
  2710. color: #f1dfc0;
  2711. background:
  2712. linear-gradient(180deg, rgba(19, 7, 10, 0.82), rgba(19, 7, 10, 0.94));
  2713. border-top: 1px solid rgba(209, 164, 95, 0.54);
  2714. border-bottom: 1px solid rgba(209, 164, 95, 0.54);
  2715. pointer-events: auto;
  2716. opacity: 0;
  2717. visibility: hidden;
  2718. transform: translateY(8px);
  2719. transition:
  2720. opacity 180ms ease 0ms,
  2721. visibility 0s linear 180ms,
  2722. transform 180ms ease 0ms;
  2723. }
  2724. .profile-character-card-stack:hover .pp-cc-tags {
  2725. opacity: 1;
  2726. visibility: visible;
  2727. transform: translateY(0);
  2728. transition:
  2729. opacity 230ms ease 720ms,
  2730. visibility 0s linear 720ms,
  2731. transform 230ms ease 720ms;
  2732. }
  2733. .pp-cc-tags::-webkit-scrollbar {
  2734. width: 4px;
  2735. }
  2736. .pp-cc-tags::-webkit-scrollbar-thumb {
  2737. background: rgba(209, 164, 95, 0.38);
  2738. border-radius: 999px;
  2739. }
  2740.  
  2741. .css-k1urot {
  2742. display: grid;
  2743. grid-template-columns: repeat(2, minmax(0, 1fr));
  2744. gap: 6px;
  2745. width: 100%;
  2746. align-content: start;
  2747. }
  2748. .pp-cc-tags-wrap-regular,
  2749. .pp-cc-tags-wrap-custom {
  2750. display: contents;
  2751. }
  2752. .pp-cc-tags-regular,
  2753. .pp-cc-tags-custom,
  2754. .pp-tag-limitless {
  2755. display: flex;
  2756. align-items: center;
  2757. justify-content: center;
  2758. width: 100%;
  2759. min-height: 24px;
  2760. max-width: none;
  2761. padding: 4px 6px;
  2762. color: #f1dfc0;
  2763. background: rgba(110, 22, 35, 0.58);
  2764. border: 1px solid rgba(209, 164, 95, 0.34);
  2765. border-radius: 1px;
  2766. font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  2767. font-size: 0.48rem;
  2768. font-weight: 700;
  2769. letter-spacing: 1px;
  2770. text-align: center;
  2771. text-transform: uppercase;
  2772. text-shadow: 1px 1px 0 #13070a;
  2773. white-space: nowrap;
  2774. overflow: hidden;
  2775. text-overflow: ellipsis;
  2776. }
  2777. .pp-cc-tags-wrap {
  2778. margin-top: 0;
  2779. }
  2780. .pp-cc-tags-wrap span {
  2781. display: flex;
  2782. align-items: center;
  2783. justify-content: center;
  2784. color: #f1dfc0;
  2785. text-shadow: 1px 1px 0 #13070a;
  2786. background: transparent;
  2787. }
  2788. .pp-cc-tags-regular,
  2789. .pp-cc-tags-custom,
  2790. .pp-cc-tags-wrap span {
  2791. pointer-events: none;
  2792. }
  2793.  
  2794. /* SERIES REPLACEMENTS: Changes the production plaque text based on specific tag classes. */
  2795. .pp-cc-wrapper:has(.pp-tag-csstest1) .profile-character-card-stack-link-component-box::after {
  2796. content: "Series 1";
  2797. }
  2798. .pp-cc-wrapper:has(.pp-tag-csstest2) .profile-character-card-stack-link-component-box::after {
  2799. content: "Series 2";
  2800. }
  2801. .pp-cc-wrapper:has(.pp-tag-csstest3) .profile-character-card-stack-link-component-box::after {
  2802. content: "Series 3";
  2803. }
  2804. </style>
  2805.  
  2806. <style>
  2807. /* ALL MEDIA QUERY: Contains every responsive override for the profile layout and bot cards. */
  2808.  
  2809. /* MOBILE LAYOUT: Adjusts the theatre profile for smaller screens. */
  2810.  
  2811. @media (max-width: 799px) {
  2812. .pp-uc-background {
  2813. padding: 5.4rem 0.65rem 1.2rem;
  2814. background: repeating-linear-gradient(90deg, #13070a 0 34px, #2a0d13 34px 68px, #13070a 68px 102px);
  2815. overflow: visible;
  2816. }
  2817. .pp-uc-background::after {
  2818. top: 0.7rem;
  2819. width: calc(100% - 1.4rem);
  2820. padding: 0.55rem 1rem;
  2821. font-size: 0.58rem;
  2822. letter-spacing: 2px;
  2823. }
  2824. .pp-uc-background::before {
  2825. inset: 8px;
  2826. }
  2827. .css-8g8ihq:only-child {
  2828. grid-template-columns: 1fr;
  2829. grid-template-rows: 66px 470px auto 46px 58px minmax(560px, auto);
  2830. height: auto;
  2831. min-height: 0;
  2832. padding: 8px;
  2833. gap: 10px;
  2834. background: none;
  2835. }
  2836. .css-8g8ihq:only-child::before {
  2837. top: 32.5pc;
  2838. left: 10%;
  2839. right: 9%;
  2840. bottom: auto;
  2841. width: auto;
  2842. height: 18px;
  2843. }
  2844. .css-8g8ihq:only-child::after {
  2845. display: none;
  2846. }
  2847. .theatre-crest {
  2848. grid-column: 1 / 2;
  2849. grid-row: 1 / 2;
  2850. align-self: stretch;
  2851. justify-self: stretch;
  2852. left: 0;
  2853. width: 100%;
  2854. min-width: 0;
  2855. height: auto;
  2856. margin: 0;
  2857. padding: 12px 42px 9px;
  2858. font-size: 0.62rem;
  2859. letter-spacing: 2.5px;
  2860. }
  2861. .theatre-crest::before,
  2862. .theatre-crest::after {
  2863. font-size: 1.1rem;
  2864. }
  2865. .pp-uc-avatar-container {
  2866. grid-column: 1 / 2;
  2867. grid-row: 2 / 3;
  2868. width: 92%;
  2869. height: 480px;
  2870. place-self: stretch;
  2871. box-shadow:
  2872. 0 0 0 3px #13070a,
  2873. 0 0 0 5px #6e1623,
  2874. 0 0 0 7px #d1a45f;
  2875. left: 13px;
  2876. top: -12px;
  2877. }
  2878. .pp-uc-avatar-container::before,
  2879. .pp-uc-avatar-container::after {
  2880. top: 0;
  2881. bottom: 0;
  2882. width: 50%;
  2883. height: auto;
  2884. }
  2885. .pp-uc-avatar {
  2886. width: 100%;
  2887. height: 100%;
  2888. margin: 0;
  2889. object-position: center top;
  2890. mask-image: unset;
  2891. }
  2892. .production-billing {
  2893. grid-column: 1 / 2;
  2894. grid-row: 2 / 3;
  2895. align-self: end;
  2896. justify-self: center;
  2897. right: 0;
  2898. width: calc(100% - 36px);
  2899. margin: 0 0 40px;
  2900. padding: 7px 10px;
  2901. font-size: 0.52rem;
  2902. letter-spacing: 1.5px;
  2903. }
  2904. .css-8g8ihq .css-8g8ihq {
  2905. grid-column: 1 / 2;
  2906. grid-row: 3 / 4;
  2907. align-self: stretch;
  2908. width: 100%;
  2909. padding: 0;
  2910. position: relative;
  2911. overflow: visible;
  2912. }
  2913. .profile-info-stack-inner-flex {
  2914. width: 97%;
  2915. min-height: 42px;
  2916. height: auto;
  2917. left: 6px;
  2918. margin: 0;
  2919. padding: 10px 16px;
  2920. justify-content: center;
  2921. flex-wrap: wrap;
  2922. box-sizing: border-box;
  2923. }
  2924. .profile-info-stack-inner-flex::before {
  2925. font-size: 0.72rem;
  2926. }
  2927. .pp-uc-title {
  2928. margin: 0 0 0 4px !important;
  2929. }
  2930. .pp-uc-title::before {
  2931. font-size: 0.75rem;
  2932. letter-spacing: 2px;
  2933. }
  2934. .pp-uc-title::after {
  2935. display: none;
  2936. }
  2937. .pp-uc-followers-count {
  2938. left: 50%;
  2939. transform: translateX(-50%);
  2940. width: max-content;
  2941. font-size: 0.72rem;
  2942. padding: 6px 15px;
  2943. margin: 9px 0 0;
  2944. order: 3;
  2945. top: 37px;
  2946. }
  2947. .pp-uc-followers-count span:nth-of-type(2)::before {
  2948. font-size: 0.72rem;
  2949. }
  2950. .profile-badges {
  2951. left: 0;
  2952. top: -2pc;
  2953. }
  2954. div:has(> .css-1aq5geu) {
  2955. grid-column: 1 / 2;
  2956. height: 6.8pc;
  2957. margin: 0;
  2958. padding: 0;
  2959. position: static;
  2960. inset: auto;
  2961. transform: none;
  2962. place-self: stretch;
  2963. gap: 8px;
  2964. justify-content: center;
  2965. }
  2966. .Btn,
  2967. .pp-uc-options-menu {
  2968. height: 42px;
  2969. }
  2970. .theatre-directory {
  2971. grid-column: 1 / 2;
  2972. grid-row: 5 / 6;
  2973. flex-direction: row;
  2974. width: 100%;
  2975. height: 58px;
  2976. min-height: 58px;
  2977. top: 0;
  2978. margin-top: 2.5pc;
  2979. border: 1px solid #d1a45f;
  2980. padding: 0;
  2981. box-shadow: inset 0 0 0 3px #13070a;
  2982. }
  2983. .theatre-directory::before,
  2984. .theatre-directory::after {
  2985. display: none;
  2986. }
  2987. .theatre-ticket {
  2988. min-width: 0;
  2989. height: 100%;
  2990. padding: 0 5px;
  2991. font-size: 0.6rem;
  2992. line-height: 1.15;
  2993. letter-spacing: 0.3px;
  2994. writing-mode: horizontal-tb;
  2995. transform: none;
  2996. border-right: 1px dashed rgba(209, 164, 95, 0.65);
  2997. border-bottom: none;
  2998. border-top: none;
  2999. white-space: normal;
  3000. }
  3001. .theatre-ticket::before {
  3002. display: none;
  3003. }
  3004. .theatre-ticket::after {
  3005. top: 50%;
  3006. left: auto;
  3007. right: -7px;
  3008. bottom: auto;
  3009. transform: translateY(-50%);
  3010. }
  3011. .theatre-ticket:last-child {
  3012. border-right: none;
  3013. border-top: none;
  3014. }
  3015. .theatre-program {
  3016. grid-column: 1 / 2;
  3017. grid-row: 6 / 7;
  3018. width: 100%;
  3019. height: 35pc;
  3020. min-height: 0;
  3021. padding: 1.2rem 1rem 1rem;
  3022. border-radius: 0 0 8px 8px;
  3023. overflow: scroll;
  3024. box-shadow:
  3025. inset 0 0 0 5px rgba(110, 22, 35, 0.1),
  3026. inset 0 0 0 6px rgba(209, 164, 95, 0.45);
  3027. margin-top: 2.5pc;
  3028. }
  3029. .theatre-program::before {
  3030. display: none;
  3031. }
  3032. .theatre-program-title {
  3033. width: 100%;
  3034. min-height: 44px;
  3035. margin: 0 0 1rem;
  3036. padding: 12px 18px;
  3037. font-size: 1.05rem;
  3038. letter-spacing: 1px;
  3039. }
  3040. .theatre-program-scroll {
  3041. max-height: none;
  3042. overflow: visible;
  3043. flex: none;
  3044. display: grid;
  3045. grid-template-columns: 1fr;
  3046. grid-auto-rows: max-content;
  3047. align-content: start;
  3048. align-items: start;
  3049. gap: 0.85rem;
  3050. padding: 0.2rem 0.35rem 2.5rem;
  3051. }
  3052. .theatre-program p:not(.theatre-program-title) {
  3053. min-height: 0;
  3054. padding: 16px;
  3055. font-size: 0.82rem;
  3056. }
  3057.  
  3058. .correspondence-desk {
  3059. grid-template-columns: 1fr;
  3060. gap: 0.55rem;
  3061. padding: 14px;
  3062. }
  3063. .correspondence-link {
  3064. min-height: 40px;
  3065. font-size: 0.64rem;
  3066. letter-spacing: 1.2px;
  3067. }
  3068.  
  3069. .favorite-curtain-stage {
  3070. min-height: 0;
  3071. }
  3072. .favorite-curtain-tabs {
  3073. grid-template-columns: 1fr;
  3074. gap: 0.55rem;
  3075. margin: 0 0.4rem 0.9rem;
  3076. }
  3077. .favorite-curtain-tab {
  3078. min-height: 40px;
  3079. padding: 8px 10px;
  3080. font-size: 0.62rem;
  3081. letter-spacing: 1px;
  3082. }
  3083. .favorite-curtain-panel {
  3084. min-height: 0;
  3085. }
  3086. .favorite-performer-credit {
  3087. font-size: 0.56rem;
  3088. letter-spacing: 0.7px;
  3089. }
  3090. .favorite-performers-gallery {
  3091. max-height: 500px;
  3092. grid-template-columns: repeat(2, minmax(0, 1fr));
  3093. gap: 0.8rem;
  3094. padding: 0.3rem 0.4rem 2.5rem;
  3095. }
  3096. .favorite-performer {
  3097. padding: 6px 6px 10px;
  3098. }
  3099. .favorite-performer-name {
  3100. font-size: 0.65rem;
  3101. letter-spacing: 1px;
  3102. }
  3103. .credits {
  3104. bottom: -14px !important;
  3105. left: 0;
  3106. }
  3107. .css-1dwr89y, .css-1rokoft::after {
  3108. display: none;
  3109. }
  3110. .pp-top-bar-app-menu-list {
  3111. left: 0;
  3112. }
  3113. .profile-filters-flex-inner {
  3114. position: relative;
  3115. right: 9.4pc;
  3116. }
  3117. .pp-fl-search-input {
  3118. width: 22pc;
  3119. }
  3120. .pp-cc-list-container {
  3121. gap: 1.5rem;
  3122. padding: 1.25rem 0;
  3123. }
  3124. .pp-cc-wrapper {
  3125. width: 274px;
  3126. height: 408px;
  3127. }
  3128. .pp-cc-name {
  3129. font-size: .7rem;
  3130. padding: 0.84rem 1.3rem 0.7rem;
  3131. }
  3132. .profile-character-card-stack::after {
  3133. width: 15pc;
  3134. }
  3135. .profile-character-card-avatar-aspect-ratio {
  3136. left: 21px;
  3137. width: 232px;
  3138. height: 295px;
  3139. }
  3140. .profile-character-card-description-box {
  3141. left: 21px;
  3142. width: 232px;
  3143. height: 201px;
  3144. }
  3145. .pp-cc-tags {
  3146. top: 276px;
  3147. }
  3148. }
  3149. </style>
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!