API tools faq
paste
Cellophane_

Moonlit Apothecary Profile Code

Cellophane_
Jun 16th, 2026 (edited)
838
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 100.45 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. /* Base fixes */
  4. .profile-background-effect-image {
  5. display: none !important;
  6. }
  7. .pp-uc-background,
  8. .pp-uc-background > div {
  9. max-width: 1440px;
  10. margin: 0 auto;
  11. padding: 0 10px;
  12. background: transparent !important;
  13. box-shadow: none !important;
  14. }
  15. .profile-page-flex {
  16. flex-direction: column;
  17. }
  18. .pp-uc-about-me {
  19. display: contents;
  20. font-family: Georgia, 'Times New Roman', serif;
  21. }
  22. .profile-info-stack {
  23. position: relative !important;
  24. isolation: isolate;
  25. }
  26. .profile-info-stack-inner {
  27. position: relative;
  28. left: 2pc;
  29. }
  30.  
  31. /* Page board */
  32. .profile-info-stack {
  33. display: grid;
  34. grid-template-columns: minmax(270px, 0.82fr) minmax(0, 1.2fr) minmax(280px, 0.62fr);
  35. grid-template-areas:
  36. "profile profile profile"
  37. "window window window"
  38. "note rack portrait"
  39. "familiars familiars familiars"
  40. "links ledger ledger"
  41. "credit credit credit";
  42. gap: 18px;
  43. padding: 22px 22px 0.5rem;
  44. min-height: 100vh;
  45. background:
  46. radial-gradient(circle at 8% 10%, rgba(184,155,94,0.12), transparent 24%),
  47. radial-gradient(circle at 90% 20%, rgba(143,159,120,0.14), transparent 28%),
  48. linear-gradient(135deg, #050604 0%, #0c120b 42%, #050605 100%);
  49. border: 1px solid rgba(184,155,94,0.18);
  50. box-shadow: inset 0 0 120px rgba(0,0,0,0.78), 0 26px 80px rgba(0,0,0,0.46);
  51. overflow: hidden;
  52. }
  53.  
  54. .profile-info-stack::before {
  55. content: "";
  56. position: absolute;
  57. inset: 12px;
  58. border: 1px solid rgba(216,200,167,0.08);
  59. pointer-events: none;
  60. z-index: -1;
  61. }
  62. .profile-info-stack::after {
  63. content: "OPEN • BOTTLED WORLDS • STRANGE LITTLE THINGS";
  64. grid-area: profile;
  65. justify-self: end;
  66. align-self: center;
  67. width: min(480px, 42%);
  68. padding: 0.95rem 1.2rem;
  69. border: 1px solid rgba(184,155,94,0.30);
  70. border-radius: 999px;
  71. background: rgba(8,11,7,0.62);
  72. color: #a99d82;
  73. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  74. font-size: 0.62rem;
  75. letter-spacing: 0.18em;
  76. text-align: center;
  77. box-shadow: inset 0 0 22px rgba(184,155,94,0.06), 0 12px 28px rgba(0,0,0,0.30);
  78. z-index: 3;
  79. }
  80.  
  81. /* Profile sign */
  82. .profile-info-hstack {
  83. grid-area: profile;
  84. width: min(720px, 100%);
  85. justify-self: start;
  86. min-height: 112px;
  87. padding: 1rem 1.25rem;
  88. display: flex;
  89. align-items: center;
  90. gap: 1rem;
  91. position: relative;
  92. z-index: 12;
  93. background:
  94. linear-gradient(90deg, rgba(8,10,7,0.98), rgba(20,27,18,0.96)),
  95. linear-gradient(180deg, rgba(184,155,94,0.10), transparent);
  96. border: 1px solid rgba(184,155,94,0.45);
  97. border-radius: 18px;
  98. box-shadow: 0 18px 46px rgba(0,0,0,0.46), inset 0 0 34px rgba(184,155,94,0.08);
  99. backdrop-filter: blur(12px);
  100. }
  101. .profile-info-hstack::before,
  102. .profile-info-hstack::after {
  103. content: "";
  104. position: absolute;
  105. top: 16px;
  106. width: 8px;
  107. height: 8px;
  108. border-radius: 50%;
  109. background: #b89b5e;
  110. box-shadow: 0 0 0 4px rgba(184,155,94,0.10), 0 0 18px rgba(184,155,94,0.30);
  111. }
  112. .profile-info-hstack::before {
  113. left: 18px;
  114. }
  115. .profile-info-hstack::after {
  116. right: 18px;
  117. }
  118. .pp-uc-avatar-container {
  119. display: none;
  120. }
  121. .pp-uc-title {
  122. font-family: Georgia;
  123. font-size: clamp(1.45rem, 2.5vw, 2.55rem);
  124. font-weight: 700;
  125. letter-spacing: 0.10em;
  126. color: #f1e5ca;
  127. text-shadow: 0 2px 0 #050605, 0 0 22px rgba(184,155,94,0.16);
  128. line-height: 1.05;
  129. margin: 0;
  130. }
  131. .pp-uc-followers-count,
  132. .pp-uc-member-since {
  133. font-family: system-ui;
  134. font-size: 0.66rem;
  135. letter-spacing: 0.16em;
  136. color: #a99d82;
  137. text-transform: uppercase;
  138. }
  139. .pp-uc-followers-count > span + span {
  140. font-size: 0 !important;
  141. }
  142. .pp-uc-followers-count > span + span::after {
  143. content: "Patrons";
  144. font-size: 0.66rem;
  145. position: relative;
  146. right: 13px;
  147. }
  148. .pp-uc-member-since {
  149. opacity: 0.78;
  150. }
  151. .profile-badges {
  152. transform: scale(0.66);
  153. transform-origin: top left;
  154. width: max-content;
  155. max-width: 350px;
  156. margin-top: 2px;
  157. scrollbar-width: none;
  158. }
  159. .profile-badges::-webkit-scrollbar {
  160. display: none !important;
  161. }
  162. .profile-info-stack-inner button {
  163. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  164. font-size: 0.68rem;
  165. letter-spacing: 0.12em;
  166. text-transform: uppercase;
  167. padding: 0.42rem 0.95rem;
  168. border-radius: 6px;
  169. border: 1px solid rgba(184,155,94,0.42);
  170. background: rgba(89,104,78,0.16);
  171. color: #d8c8a7;
  172. transition: all 0.28s ease;
  173. margin-top: 0.24rem;
  174. width: fit-content;
  175. }
  176. .profile-info-stack-inner button:hover {
  177. background: rgba(184,155,94,0.18) !important;
  178. color: #f1e5ca !important;
  179. box-shadow: 0 0 16px rgba(184,155,94,0.22) !important;
  180. }
  181.  
  182. /* Follow buttons */
  183. .profile-info-stack > div:has(.Btn),
  184. .profile-info-stack > .css-3nlpdq {
  185. grid-area: profile;
  186. align-self: end;
  187. margin: 0 0 0.95rem 7.5rem;
  188. z-index: 20;
  189. position: relative;
  190. left: 20pc;
  191. }
  192. .profile-info-stack > div:has(.Btn) > div,
  193. .profile-info-stack > .css-3nlpdq > div {
  194. gap: 9px !important;
  195. }
  196. .Btn {
  197. position: relative;
  198. background: linear-gradient(145deg, #59684e, #8f9f78);
  199. border: 1px solid rgba(216,200,167,0.35);
  200. border-radius: 6px;
  201. overflow: hidden;
  202. transition: all 0.28s ease;
  203. box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 0 18px rgba(216,200,167,0.12);
  204. padding: 0.55rem 1.4rem;
  205. }
  206. .Btn:before {
  207. background: transparent;
  208. }
  209. .Btn:hover {
  210. transform: translateY(-2px);
  211. box-shadow: 0 16px 28px rgba(0,0,0,0.42), 0 0 18px rgba(143,159,120,0.28);
  212. }
  213. .Btn > span {
  214. font-family: Georgia;
  215. color: #f6edda;
  216. font-size: 0.78rem;
  217. letter-spacing: 0.13em;
  218. font-weight: 700;
  219. }
  220. .pp-uc-options-menu {
  221. background: rgba(9,12,8,0.88);
  222. border: 1px solid rgba(184,155,94,0.42);
  223. border-radius: 6px;
  224. padding: 0.48rem 1rem;
  225. font-family: Georgia;
  226. font-size: 0.75rem;
  227. letter-spacing: 0.10em;
  228. color: #d8c8a7;
  229. transition: all 0.28s ease;
  230. backdrop-filter: blur(12px);
  231. }
  232. .pp-uc-options-menu:hover,
  233. .pp-uc-options-menu[data-active] {
  234. background: rgba(184,155,94,0.18);
  235. color: #f6edda;
  236. box-shadow: 0 0 16px rgba(184,155,94,0.24);
  237. }
  238.  
  239. /* Shopfront board */
  240. .apothecary-window {
  241. grid-area: window;
  242. position: relative;
  243. min-height: 230px;
  244. overflow: hidden;
  245. border-radius: 24px;
  246. border: 1px solid rgba(184,155,94,0.40);
  247. background:
  248. linear-gradient(135deg, rgba(8,11,7,0.98), rgba(23,32,21,0.96));
  249. box-shadow: 0 20px 54px rgba(0,0,0,0.46), inset 0 -80px 110px rgba(0,0,0,0.62);
  250. }
  251. .apothecary-window img {
  252. position: absolute;
  253. inset: 0;
  254. width: 100%;
  255. height: 100%;
  256. display: block;
  257. object-fit: cover;
  258. object-position: center 48%;
  259. filter: brightness(0.50) saturate(0.70) sepia(0.12);
  260. }
  261. .apothecary-window::before {
  262. content: "";
  263. position: absolute;
  264. inset: 0;
  265. background:
  266. linear-gradient(90deg, rgba(5,7,5,0.90) 0%, rgba(5,7,5,0.70) 28%, rgba(5,7,5,0.24) 58%, rgba(5,7,5,0.74) 100%),
  267. linear-gradient(180deg, rgba(5,7,5,0.12), rgba(5,7,5,0.86));
  268. pointer-events: none;
  269. }
  270. .apothecary-window::after {
  271. content: "";
  272. position: absolute;
  273. left: 18px;
  274. right: 18px;
  275. top: 18px;
  276. bottom: 18px;
  277. border: 1px solid rgba(216,200,167,0.16);
  278. border-radius: 18px 18px 6px 6px;
  279. pointer-events: none;
  280. }
  281. .window-card {
  282. position: absolute;
  283. left: 30px;
  284. top: 50%;
  285. transform: translateY(-50%);
  286. width: min(430px, calc(46% - 40px));
  287. padding: 1.15rem 1.2rem 1.05rem;
  288. background: rgba(12,17,10,0.86);
  289. border: 1px solid rgba(216,200,167,0.30);
  290. color: #efe6d0;
  291. box-shadow: 0 16px 34px rgba(0,0,0,0.50);
  292. backdrop-filter: blur(8px);
  293. }
  294. .window-card b {
  295. display: block;
  296. font-size: clamp(1.25rem, 2vw, 1.9rem);
  297. letter-spacing: 0.14em;
  298. text-transform: uppercase;
  299. color: #d6bf82;
  300. margin-bottom: 0.45rem;
  301. }
  302. .window-card span {
  303. display: block;
  304. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  305. font-size: 0.82rem;
  306. line-height: 1.65;
  307. color: #c7b99a;
  308. }
  309. .window-pins {
  310. position: absolute;
  311. right: 30px;
  312. top: 50%;
  313. bottom: auto;
  314. transform: translateY(-50%);
  315. width: min(560px, calc(54% - 40px));
  316. display: grid;
  317. grid-template-columns: repeat(2, minmax(0, 1fr));
  318. gap: 0.65rem;
  319. }
  320. .pin-note {
  321. min-height: 82px;
  322. padding: 0.72rem 0.7rem;
  323. display: flex;
  324. flex-direction: column;
  325. justify-content: center;
  326. background: rgba(216,200,167,0.90);
  327. border: 1px solid rgba(184,155,94,0.48);
  328. color: #172015;
  329. box-shadow: 0 12px 24px rgba(0,0,0,0.34);
  330. transform: rotate(-1.5deg);
  331. }
  332. .pin-note:nth-child(2) {
  333. transform: rotate(1deg);
  334. }
  335. .pin-note:nth-child(3) {
  336. transform: rotate(-0.5deg);
  337. }
  338. .pin-note b {
  339. display: block;
  340. font-size: 0.68rem;
  341. letter-spacing: 0.14em;
  342. text-transform: uppercase;
  343. }
  344. .pin-note span {
  345. display: block;
  346. margin-top: 0.22rem;
  347. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  348. font-size: 0.68rem;
  349. line-height: 1.35;
  350. }
  351.  
  352. /* Shopkeeper card */
  353. .portrait-cabinet {
  354. grid-area: portrait;
  355. position: relative;
  356. min-height: 100%;
  357. border-radius: 20px;
  358. border: 1px solid rgba(184,155,94,0.34);
  359. background:
  360. linear-gradient(145deg, rgba(25,33,21,0.90), rgba(8,10,7,0.96)),
  361. linear-gradient(90deg, rgba(216,200,167,0.08), transparent);
  362. overflow: hidden;
  363. box-shadow: 0 18px 44px rgba(0,0,0,0.42), inset 0 0 45px rgba(184,155,94,0.08);
  364. }
  365. .portrait-cabinet::before {
  366. content: "";
  367. position: absolute;
  368. inset: 14px;
  369. border: 1px solid rgba(216,200,167,0.14);
  370. border-radius: 14px;
  371. pointer-events: none;
  372. z-index: 3;
  373. }
  374. .portrait-cabinet::after {
  375. content: "Keeper of the counter, labels, odd requests, and questionable bottles.";
  376. position: absolute;
  377. left: 20px;
  378. right: 20px;
  379. bottom: 18px;
  380. padding: 0.72rem 0.78rem;
  381. background: rgba(8,11,7,0.76);
  382. border: 1px solid rgba(216,200,167,0.18);
  383. color: #c7b99a;
  384. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  385. font-size: 0.72rem;
  386. line-height: 1.45;
  387. z-index: 4;
  388. }
  389. .portrait-cabinet img {
  390. position: absolute;
  391. right: -50px;
  392. bottom: -2px;
  393. width: 132%;
  394. max-width: none;
  395. height: auto;
  396. filter: drop-shadow(0 20px 28px rgba(0,0,0,0.70)) saturate(0.82) brightness(0.88);
  397. mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  398. -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  399. }
  400. .cabinet-label {
  401. position: absolute;
  402. left: 20px;
  403. right: auto;
  404. top: 20px;
  405. padding: 0.68rem 0.85rem;
  406. background: rgba(216,200,167,0.90);
  407. color: #172015;
  408. border: 1px solid rgba(184,155,94,0.48);
  409. text-align: center;
  410. font-size: 0.68rem;
  411. letter-spacing: 0.16em;
  412. text-transform: uppercase;
  413. box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  414. z-index: 4;
  415. }
  416.  
  417. /* Shared headings */
  418. .board-title {
  419. display: flex;
  420. align-items: center;
  421. gap: 0.7rem;
  422. margin-bottom: 1rem;
  423. padding-bottom: 0.72rem;
  424. border-bottom: 1px solid rgba(184,155,94,0.25);
  425. }
  426. .board-mark {
  427. width: 34px;
  428. height: 34px;
  429. display: inline-flex;
  430. align-items: center;
  431. justify-content: center;
  432. flex-shrink: 0;
  433. border-radius: 50%;
  434. background: rgba(184,155,94,0.16);
  435. border: 1px solid rgba(184,155,94,0.38);
  436. color: #d6bf82;
  437. font-size: 1rem;
  438. }
  439. .board-label {
  440. font-family: Georgia, 'Times New Roman', serif;
  441. font-size: 1rem;
  442. letter-spacing: 0.16em;
  443. text-transform: uppercase;
  444. color: #e6d7b9;
  445. }
  446.  
  447. /* Note */
  448. .counter-note {
  449. grid-area: note;
  450. padding: 1.6rem;
  451. background:
  452. linear-gradient(145deg, rgba(31,38,24,0.92), rgba(12,16,10,0.94)),
  453. linear-gradient(90deg, rgba(216,200,167,0.08), transparent);
  454. border: 1px solid rgba(184,155,94,0.32);
  455. border-radius: 18px;
  456. box-shadow: 0 18px 44px rgba(0,0,0,0.42), inset 0 0 34px rgba(216,200,167,0.05);
  457. position: relative;
  458. overflow: hidden;
  459. }
  460. .counter-note::after {
  461. content: "❧";
  462. position: absolute;
  463. right: 20px;
  464. bottom: -28px;
  465. font-size: 7rem;
  466. color: #d6bf82;
  467. opacity: 0.06;
  468. pointer-events: none;
  469. }
  470. .counter-note p {
  471. color: #efe6d0;
  472. font-size: 1.05rem;
  473. line-height: 1.72;
  474. margin: 0 0 1rem;
  475. text-shadow: 0 1px 3px rgba(0,0,0,0.48);
  476. }
  477. .ingredient-tags {
  478. display: flex;
  479. flex-wrap: wrap;
  480. gap: 0.5rem;
  481. margin-top: 1rem;
  482. }
  483. .ingredient-tags span {
  484. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  485. font-size: 0.68rem;
  486. letter-spacing: 0.12em;
  487. text-transform: uppercase;
  488. padding: 0.38rem 0.68rem;
  489. color: #172015;
  490. background: #d8c8a7;
  491. border: 1px solid rgba(184,155,94,0.50);
  492. border-radius: 2px;
  493. box-shadow: 0 5px 12px rgba(0,0,0,0.20);
  494. }
  495.  
  496. /* Rack */
  497. .tincture-rack {
  498. grid-area: rack;
  499. padding: 1.4rem;
  500. background: rgba(8,11,7,0.82);
  501. border: 1px solid rgba(184,155,94,0.28);
  502. border-radius: 18px;
  503. box-shadow: inset 0 0 40px rgba(0,0,0,0.42), 0 18px 44px rgba(0,0,0,0.36);
  504. }
  505. .bottle-row {
  506. display: grid;
  507. grid-template-columns: repeat(2, minmax(0, 1fr));
  508. gap: 1rem;
  509. max-height: 500px;
  510. overflow-y: auto;
  511. overflow-x: hidden;
  512. padding-right: 0.35rem;
  513. scrollbar-width: thin;
  514. scrollbar-color: rgba(184,155,94,0.42) rgba(8,11,7,0.45);
  515. }
  516. .bottle-row::-webkit-scrollbar {
  517. width: 6px;
  518. }
  519. .bottle-row::-webkit-scrollbar-track {
  520. background: rgba(8,11,7,0.45);
  521. border-radius: 99px;
  522. }
  523. .bottle-row::-webkit-scrollbar-thumb {
  524. background: rgba(184,155,94,0.42);
  525. border-radius: 99px;
  526. }
  527. .bottle-card {
  528. min-height: 230px;
  529. padding: 0.85rem;
  530. display: flex;
  531. flex-direction: column;
  532. justify-content: flex-end;
  533. position: relative;
  534. overflow: hidden;
  535. text-decoration: none;
  536. color: #efe6d0;
  537. border: 1px solid rgba(216,200,167,0.20);
  538. border-radius: 90px 90px 12px 12px;
  539. background: #10160f;
  540. box-shadow: inset 0 -50px 70px rgba(0,0,0,0.74), 0 14px 30px rgba(0,0,0,0.35);
  541. transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  542. }
  543. .bottle-card:hover {
  544. transform: translateY(-5px) rotate(-1deg);
  545. border-color: rgba(214,191,130,0.54);
  546. box-shadow: inset 0 -50px 70px rgba(0,0,0,0.70), 0 22px 44px rgba(0,0,0,0.46), 0 0 20px rgba(184,155,94,0.14);
  547. }
  548. .bottle-card img {
  549. position: absolute;
  550. inset: 0;
  551. width: 100%;
  552. height: 100%;
  553. object-fit: cover;
  554. filter: brightness(0.48) saturate(0.62) sepia(0.10);
  555. transition: filter 0.3s ease, transform 0.45s ease;
  556. }
  557. .bottle-card:hover img {
  558. filter: brightness(0.66) saturate(0.80) sepia(0.05);
  559. transform: scale(1.05);
  560. }
  561. .bottle-card b,
  562. .bottle-card p,
  563. .bottle-card .mini-tags {
  564. position: relative;
  565. z-index: 1;
  566. }
  567. .bottle-card b {
  568. display: block;
  569. font-size: 0.95rem;
  570. letter-spacing: 0.12em;
  571. text-transform: uppercase;
  572. color: #f1e5ca;
  573. }
  574. .bottle-card p {
  575. font-size: 0.88rem;
  576. line-height: 1.45;
  577. margin: 0.35rem 0 0;
  578. color: #cfc0a2;
  579. }
  580. .mini-tags {
  581. display: flex;
  582. flex-wrap: wrap;
  583. gap: 0.3rem;
  584. margin-top: 0.55rem;
  585. }
  586. .mini-tags span {
  587. font-size: 0.6rem;
  588. letter-spacing: 0.10em;
  589. text-transform: uppercase;
  590. color: #d8c8a7;
  591. background: rgba(8,11,7,0.72);
  592. border: 1px solid rgba(216,200,167,0.20);
  593. padding: 0.18rem 0.42rem;
  594. }
  595.  
  596. /* Familiar tab */
  597. .familiars-tray {
  598. grid-area: familiars;
  599. padding: 1.35rem;
  600. border: 1px solid rgba(184,155,94,0.28);
  601. border-radius: 20px;
  602. background:
  603. linear-gradient(180deg, rgba(23,32,21,0.90), rgba(8,10,7,0.96));
  604. box-shadow: 0 18px 44px rgba(0,0,0,0.38), inset 0 0 35px rgba(184,155,94,0.06);
  605. }
  606. .familiars-scroll {
  607. display: grid;
  608. grid-template-columns: repeat(6, minmax(220px, 1fr));
  609. gap: 0.85rem;
  610. overflow-x: auto;
  611. overflow-y: hidden;
  612. padding-bottom: 1rem;
  613. scrollbar-width: thin;
  614. scrollbar-color: rgba(184,155,94,0.48) rgba(8,11,7,0.42);
  615. }
  616. .familiars-scroll::-webkit-scrollbar {
  617. height: 7px;
  618. }
  619. .familiars-scroll::-webkit-scrollbar-track {
  620. background: rgba(8,11,7,0.42);
  621. border: 1px solid rgba(216,200,167,0.10);
  622. border-radius: 999px;
  623. }
  624. .familiars-scroll::-webkit-scrollbar-thumb {
  625. background: linear-gradient(
  626. 90deg,
  627. rgba(143,159,120,0.55),
  628. rgba(184,155,94,0.72),
  629. rgba(216,200,167,0.55)
  630. );
  631. border-radius: 999px;
  632. border: 1px solid rgba(8,11,7,0.65);
  633. }
  634. .familiars-scroll::-webkit-scrollbar-thumb:hover {
  635. background: linear-gradient(
  636. 90deg,
  637. rgba(184,155,94,0.78),
  638. rgba(216,200,167,0.80),
  639. rgba(184,155,94,0.78)
  640. );
  641. }
  642. .familiars {
  643. min-height: 260px;
  644. position: relative;
  645. overflow: hidden;
  646. border: 1px solid rgba(216,200,167,0.24);
  647. border-radius: 16px 16px 6px 6px;
  648. background: #10160f;
  649. text-decoration: none;
  650. box-shadow: 0 12px 24px rgba(0,0,0,0.34);
  651. transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  652. }
  653. .familiars:nth-child(even) {
  654. transform: none;
  655. }
  656. .familiars:hover {
  657. transform: translateY(-4px);
  658. box-shadow: 0 20px 34px rgba(0,0,0,0.46);
  659. border-color: rgba(214,191,130,0.50);
  660. }
  661. .familiars img {
  662. width: 100%;
  663. height: 100%;
  664. object-fit: cover;
  665. filter: brightness(0.58) saturate(0.66) sepia(0.10);
  666. transition: filter 0.3s ease, transform 0.4s ease;
  667. }
  668. .familiars:hover img {
  669. filter: brightness(0.78) saturate(0.85);
  670. transform: scale(1.04);
  671. }
  672. .familiars span {
  673. position: absolute;
  674. left: 10px;
  675. right: 10px;
  676. bottom: 10px;
  677. padding: 0.48rem 0.5rem;
  678. background: rgba(216,200,167,0.92);
  679. color: #172015;
  680. text-align: center;
  681. font-size: 0.66rem;
  682. letter-spacing: 0.14em;
  683. text-transform: uppercase;
  684. box-shadow: 0 10px 18px rgba(0,0,0,0.34);
  685. }
  686.  
  687. /* Links */
  688. .calling-cards {
  689. grid-area: links;
  690. padding: 1.25rem;
  691. border: 1px solid rgba(184,155,94,0.30);
  692. border-radius: 18px;
  693. background: rgba(8,11,7,0.86);
  694. box-shadow: 0 18px 44px rgba(0,0,0,0.36), inset 0 0 30px rgba(143,159,120,0.07);
  695. }
  696. .card-link-grid {
  697. display: grid;
  698. gap: 0.65rem;
  699. }
  700. .card-link,
  701. .creator-link {
  702. display: block;
  703. padding: 0.85rem 0.9rem;
  704. color: #efe6d0;
  705. text-decoration: none;
  706. border: 1px solid rgba(216,200,167,0.18);
  707. background: linear-gradient(90deg, rgba(89,104,78,0.22), rgba(184,155,94,0.08));
  708. border-radius: 8px;
  709. transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  710. }
  711. .card-link:hover,
  712. .creator-link:hover {
  713. transform: translateX(5px);
  714. border-color: rgba(214,191,130,0.48);
  715. background: linear-gradient(90deg, rgba(184,155,94,0.18), rgba(89,104,78,0.18));
  716. }
  717. .card-link b,
  718. .creator-link b {
  719. display: block;
  720. font-size: 0.78rem;
  721. letter-spacing: 0.15em;
  722. text-transform: uppercase;
  723. color: #d6bf82;
  724. }
  725. .card-link span,
  726. .creator-link span {
  727. display: block;
  728. margin-top: 0.18rem;
  729. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  730. font-size: 0.75rem;
  731. color: #a99f84;
  732. }
  733.  
  734. /* Ledger */
  735. .ledger-book {
  736. grid-area: ledger;
  737. display: grid;
  738. grid-template-columns: repeat(2, minmax(0, 1fr));
  739. gap: 1rem;
  740. align-items: start;
  741. }
  742. .ledger-page {
  743. border: 1px solid rgba(184,155,94,0.30);
  744. border-radius: 14px;
  745. background: rgba(8,11,7,0.88);
  746. overflow: hidden;
  747. box-shadow: 0 16px 36px rgba(0,0,0,0.34);
  748. }
  749. .ledger-page[open] {
  750. box-shadow: 0 22px 44px rgba(0,0,0,0.44), 0 0 20px rgba(184,155,94,0.12);
  751. }
  752. .ledger-tab {
  753. list-style: none;
  754. cursor: pointer;
  755. padding: 1rem 1.1rem;
  756. display: flex;
  757. justify-content: space-between;
  758. align-items: center;
  759. gap: 1rem;
  760. color: #e6d7b9;
  761. font-size: 0.82rem;
  762. letter-spacing: 0.14em;
  763. text-transform: uppercase;
  764. }
  765. .ledger-tab::-webkit-details-marker,
  766. .ledger-tab::marker {
  767. display: none;
  768. }
  769. .ledger-tab::after {
  770. content: "+";
  771. color: #d6bf82;
  772. font-size: 1rem;
  773. }
  774. .ledger-page[open] .ledger-tab::after {
  775. content: "−";
  776. }
  777. .ledger-inside {
  778. padding: 0 1.1rem 1.1rem;
  779. color: #efe6d0;
  780. font-size: 0.98rem;
  781. line-height: 1.65;
  782. }
  783. .ledger-inside p {
  784. margin: 0 0 0.75rem;
  785. padding-left: 0.8rem;
  786. border-left: 2px solid rgba(184,155,94,0.32);
  787. }
  788.  
  789. /* Credit */
  790. .template-credit {
  791. grid-area: credit;
  792. text-align: center;
  793. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  794. font-size: 0.62rem;
  795. letter-spacing: 0.14em;
  796. text-transform: uppercase;
  797. color: #83775f;
  798. opacity: 0.78;
  799. padding: 0.4rem 0 0.6rem;
  800. }
  801. .template-credit a {
  802. color: #b89b5e;
  803. text-decoration: none;
  804. }
  805. .template-credit a:hover {
  806. color: #efe6d0;
  807. }
  808.  
  809. /* Shop ticket */
  810. .shop-ticket {
  811. position: fixed;
  812. right: 18px;
  813. top: 5pc;
  814. bottom: auto;
  815. width: 245px;
  816. z-index: 999;
  817. border: 1px solid rgba(184,155,94,0.42);
  818. border-radius: 18px 18px 14px 14px;
  819. background:
  820. linear-gradient(180deg, rgba(18,24,15,0.96), rgba(7,10,6,0.96));
  821. box-shadow:
  822. 0 18px 42px rgba(0,0,0,0.56),
  823. inset 0 0 20px rgba(184,155,94,0.08);
  824. overflow: visible;
  825. color: #efe6d0;
  826. }
  827. .shop-ticket::before {
  828. content: "";
  829. position: absolute;
  830. top: -30px;
  831. left: 50%;
  832. width: 1px;
  833. height: 32px;
  834. background: linear-gradient(
  835. to bottom,
  836. rgba(216,200,167,0.06),
  837. rgba(184,155,94,0.88)
  838. );
  839. transform: translateX(-50%);
  840. }
  841. /* Brass pin */
  842. .shop-ticket::after {
  843. content: "";
  844. position: absolute;
  845. top: -6px;
  846. left: 50%;
  847. width: 12px;
  848. height: 12px;
  849. border-radius: 50%;
  850. background: #b89b5e;
  851. border: 1px solid rgba(246,237,218,0.36);
  852. box-shadow:
  853. 0 0 0 5px rgba(184,155,94,0.12),
  854. 0 0 16px rgba(184,155,94,0.34);
  855. transform: translateX(-50%);
  856. }
  857. .ticket-tab {
  858. list-style: none;
  859. min-height: 48px;
  860. padding: 0.85rem 1rem;
  861. display: flex;
  862. align-items: center;
  863. justify-content: space-between;
  864. cursor: pointer;
  865. color: #e6d7b9;
  866. font-family: Georgia, 'Times New Roman', serif;
  867. font-size: 0.74rem;
  868. font-weight: 700;
  869. letter-spacing: 0.17em;
  870. text-transform: uppercase;
  871. background:
  872. linear-gradient(180deg, rgba(184,155,94,0.13), rgba(184,155,94,0.03));
  873. border-radius: 18px 18px 0 0;
  874. position: relative;
  875. }
  876. .ticket-tab::-webkit-details-marker,
  877. .ticket-tab::marker {
  878. display: none;
  879. }
  880. .ticket-tab::after {
  881. content: "☾";
  882. color: #d6bf82;
  883. font-size: 0.95rem;
  884. margin-left: 0.8rem;
  885. transition: transform 0.25s ease, color 0.25s ease;
  886. }
  887. .shop-ticket[open] .ticket-tab {
  888. border-bottom: 1px dashed rgba(184,155,94,0.28);
  889. }
  890. .shop-ticket[open] .ticket-tab::after {
  891. content: "✕";
  892. color: #d8c8a7;
  893. transform: rotate(90deg);
  894. }
  895. .ticket-note {
  896. padding: 0.8rem 1rem 1rem;
  897. color: #efe6d0;
  898. font-family: Georgia, 'Times New Roman', serif;
  899. font-size: 0.88rem;
  900. line-height: 1.55;
  901. max-height: 130px;
  902. overflow-y: auto;
  903. background:
  904. linear-gradient(180deg, rgba(12,17,10,0.92), rgba(8,11,7,0.96));
  905. border-radius: 0 0 14px 14px;
  906. }
  907. .ticket-note::before {
  908. content: "Counter note";
  909. display: block;
  910. margin-bottom: 0.45rem;
  911. color: #a99d82;
  912. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  913. font-size: 0.58rem;
  914. font-weight: 700;
  915. letter-spacing: 0.15em;
  916. text-transform: uppercase;
  917. }
  918. .ticket-note::-webkit-scrollbar {
  919. width: 4px;
  920. }
  921. .ticket-note::-webkit-scrollbar-track {
  922. background: rgba(8,11,7,0.45);
  923. }
  924. .ticket-note::-webkit-scrollbar-thumb {
  925. background: rgba(184,155,94,0.42);
  926. border-radius: 99px;
  927. }
  928.  
  929. /* Section title */
  930. #profile-tabs::before {
  931. content: "Tincture Rack";
  932. display: block;
  933. padding: 0 15px 0.65rem;
  934. text-align: center;
  935. color: #e6d7b9;
  936. font-family: Georgia, 'Times New Roman', serif;
  937. font-size: clamp(2.1rem, 3vw + 1rem, 3.6rem);
  938. font-weight: 900;
  939. line-height: 1;
  940. letter-spacing: 0.08em;
  941. text-transform: uppercase;
  942. border-bottom: 1px solid rgba(184, 155, 94, 0.32);
  943. text-shadow:
  944. 0 2px 3px rgba(0, 0, 0, 0.75),
  945. 0 0 14px rgba(184, 155, 94, 0.24),
  946. 0 0 28px rgba(87, 111, 73, 0.16);
  947. }
  948.  
  949. .pp-tabs-wrapper {
  950. display: none;
  951. }
  952. .pp-tabs-indicator {
  953. background: none;
  954. box-shadow: none;
  955. height: 2px;
  956. }
  957. .pp-top-bar-logo,
  958. .pp-top-bar-logo::before {
  959. border: none;
  960. background: none !important;
  961. box-shadow: none;
  962. text-shadow: none !important;
  963. backdrop-filter: none;
  964. padding: 3px;
  965. }
  966. #profile-tabs > div[role="tablist"] > button[aria-selected="true"] {
  967. display: none;
  968. background: rgba(184, 155, 94, 0.18);
  969. color: #efe6d0;
  970. box-shadow: inset 0 0 0 1px rgba(216, 200, 167, 0.24);
  971. }
  972. .css-1fgzixv {
  973. height: auto;
  974. width: 36px;
  975. }
  976.  
  977. /* Total count */
  978. .pp-pg-total {
  979. order: -1;
  980. box-shadow: none;
  981. background: none;
  982. margin-right: 0.35rem;
  983. border: none;
  984. flex: 0 0 auto;
  985. }
  986. .pp-pg-total::before {
  987. transition: none;
  988. border: 1px solid transparent;
  989. border-radius: 999px;
  990. background: transparent;
  991. }
  992. .pp-pg-total .css-wd8hou {
  993. width: 100%;
  994. font-weight: 900;
  995. }
  996. .pp-pg-total p {
  997. font-size: 0;
  998. width: 100%;
  999. text-align: center;
  1000. font-family: Georgia, 'Times New Roman', serif;
  1001. }
  1002. .pp-pg-total strong {
  1003. color: #d6bf82;
  1004. font-family: Georgia, 'Times New Roman', serif;
  1005. font-size: 1rem;
  1006. font-weight: 900;
  1007. text-shadow:
  1008. 0 1px 2px rgba(0, 0, 0, 0.72),
  1009. 0 0 8px rgba(184, 155, 94, 0.18);
  1010. }
  1011. .pp-pg-total p::after {
  1012. content: "Bottles";
  1013. color: #d8c8a7;
  1014. font-family: Georgia, 'Times New Roman', serif;
  1015. font-size: 1rem;
  1016. font-weight: 900;
  1017. text-transform: uppercase;
  1018. text-shadow:
  1019. 0 1px 2px rgba(0, 0, 0, 0.72),
  1020. 0 0 8px rgba(184, 155, 94, 0.14);
  1021. }
  1022. .profile-filters-flex-inner {
  1023. margin: auto;
  1024. }
  1025.  
  1026. /* Search input */
  1027. .pp-fl-search-input {
  1028. width: 260px;
  1029. color: #efe6d0;
  1030. font-family: Georgia, 'Times New Roman', serif;
  1031. font-size: 0.95rem;
  1032. font-weight: 800;
  1033. border-radius: 14px;
  1034. border: 1px solid transparent;
  1035. background:
  1036. radial-gradient(circle at 16% 12%, rgba(246, 237, 218, 0.12), transparent 28%),
  1037. linear-gradient(135deg, rgba(18, 28, 18, 0.88), rgba(46, 38, 25, 0.82), rgba(8, 11, 7, 0.92)) padding-box,
  1038. linear-gradient(135deg, rgba(216, 200, 167, 0.48), rgba(184, 155, 94, 0.42), rgba(87, 111, 73, 0.38)) border-box;
  1039. box-shadow:
  1040. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  1041. 0 6px 14px rgba(0, 0, 0, 0.28),
  1042. 0 0 18px rgba(184, 155, 94, 0.06);
  1043. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  1044. }
  1045. .pp-fl-search-input::placeholder {
  1046. color: rgba(216, 200, 167, 0.64) !important;
  1047. }
  1048. .pp-fl-search-input:hover,
  1049. .pp-fl-search-input:focus,
  1050. .pp-fl-search-input:focus-visible {
  1051. outline: none !important;
  1052. border: 1px solid transparent;
  1053. color: transparent;
  1054. background:
  1055. radial-gradient(circle at 16% 12%, rgba(246, 237, 218, 0.16), transparent 28%),
  1056. linear-gradient(135deg, rgba(34, 43, 27, 0.94), rgba(62, 48, 27, 0.88), rgba(12, 17, 10, 0.96)) padding-box,
  1057. linear-gradient(135deg, rgba(239, 230, 208, 0.70), rgba(184, 155, 94, 0.56), rgba(143, 159, 120, 0.48)) border-box;
  1058. box-shadow:
  1059. 0 0 14px rgba(184, 155, 94, 0.18),
  1060. inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  1061. }
  1062.  
  1063. /* Filter button */
  1064. .pp-fl-filter-button {
  1065. flex: 0 0 auto;
  1066. border-radius: 14px;
  1067. border: 1px solid transparent;
  1068. background:
  1069. linear-gradient(135deg, rgba(18, 28, 18, 0.88), rgba(46, 38, 25, 0.82), rgba(8, 11, 7, 0.92)) padding-box,
  1070. linear-gradient(135deg, rgba(216, 200, 167, 0.48), rgba(184, 155, 94, 0.42), rgba(87, 111, 73, 0.38)) border-box;
  1071. box-shadow:
  1072. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  1073. 0 6px 14px rgba(0, 0, 0, 0.24);
  1074. }
  1075. .pp-fl-filter-button svg {
  1076. color: #d8c8a7 !important;
  1077. filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
  1078. }
  1079. .pp-fl-filter-button:hover {
  1080. background:
  1081. radial-gradient(circle at 16% 12%, rgba(246, 237, 218, 0.12), transparent 28%),
  1082. linear-gradient(135deg, rgba(34, 43, 27, 0.94), rgba(62, 48, 27, 0.88), rgba(12, 17, 10, 0.96)) padding-box,
  1083. linear-gradient(135deg, rgba(239, 230, 208, 0.70), rgba(184, 155, 94, 0.56), rgba(143, 159, 120, 0.48)) border-box;
  1084. box-shadow:
  1085. 0 0 14px rgba(184, 155, 94, 0.18),
  1086. inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  1087. }
  1088.  
  1089. /* Select dropdown base */
  1090. .react-select__indicator-separator {
  1091. background-color: transparent !important;
  1092. }
  1093. .react-select__control:hover {
  1094. border-color: unset !important;
  1095. border: 1px solid rgba(184, 155, 94, 0.62) !important;
  1096. }
  1097. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  1098. min-width: 120px;
  1099. width: 120px;
  1100. border-radius: 14px;
  1101. border: 1px solid transparent;
  1102. background:
  1103. linear-gradient(135deg, rgba(18, 28, 18, 0.88), rgba(46, 38, 25, 0.82), rgba(8, 11, 7, 0.92)) padding-box,
  1104. linear-gradient(135deg, rgba(216, 200, 167, 0.48), rgba(184, 155, 94, 0.42), rgba(87, 111, 73, 0.38)) border-box !important;
  1105. box-shadow:
  1106. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  1107. 0 6px 14px rgba(0, 0, 0, 0.24);
  1108. }
  1109. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value {
  1110. color: #efe6d0;
  1111. font-family: Georgia, 'Times New Roman', serif;
  1112. font-size: 0.95rem;
  1113. font-weight: 900;
  1114. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  1115. }
  1116. :is(.default, .dark, .transparent, .css-b62m3t-container) svg {
  1117. color: #d8c8a7;
  1118. transition: 300ms;
  1119. }
  1120.  
  1121. /* Dropdown menu */
  1122. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu {
  1123. width: max-content;
  1124. text-align: center;
  1125. overflow: hidden;
  1126. border-radius: 18px;
  1127. border: 1px solid rgba(216, 200, 167, 0.38);
  1128. background:
  1129. radial-gradient(circle at 16% 12%, rgba(246, 237, 218, 0.12), transparent 28%),
  1130. radial-gradient(circle at 86% 88%, rgba(184, 155, 94, 0.14), transparent 34%),
  1131. linear-gradient(145deg, rgba(18, 28, 18, 0.96), rgba(46, 38, 25, 0.92) 42%, rgba(8, 11, 7, 0.96));
  1132. box-shadow:
  1133. 0 16px 34px rgba(0, 0, 0, 0.42),
  1134. 0 0 18px rgba(184, 155, 94, 0.10),
  1135. inset 0 1px 0 rgba(255, 255, 255, 0.12);
  1136. backdrop-filter: blur(12px) saturate(1.05);
  1137. }
  1138. .css-qr46ko {
  1139. padding: 0;
  1140. }
  1141.  
  1142. /* Dropdown options */
  1143. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option {
  1144. color: #efe6d0;
  1145. background: transparent;
  1146. border-bottom: 1px solid rgba(216, 200, 167, 0.10);
  1147. font-family: Georgia, 'Times New Roman', serif;
  1148. font-size: 0.9rem;
  1149. font-weight: 800;
  1150. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  1151. }
  1152. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  1153. background:
  1154. linear-gradient(135deg, rgba(184, 155, 94, 0.18), rgba(87, 111, 73, 0.14));
  1155. color: #fff4da;
  1156. transition: 300ms;
  1157. }
  1158. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected,
  1159. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused {
  1160. background:
  1161. linear-gradient(135deg, rgba(184, 155, 94, 0.26), rgba(87, 111, 73, 0.18));
  1162. color: #fff4da;
  1163. transition: 300ms;
  1164. }
  1165. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:hover,
  1166. :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control:focus-within {
  1167. border: 1px solid transparent !important;
  1168. background:
  1169. radial-gradient(circle at 16% 12%, rgba(246, 237, 218, 0.12), transparent 28%),
  1170. linear-gradient(135deg, rgba(34, 43, 27, 0.94), rgba(62, 48, 27, 0.88), rgba(12, 17, 10, 0.96)) padding-box,
  1171. linear-gradient(135deg, rgba(239, 230, 208, 0.70), rgba(184, 155, 94, 0.56), rgba(143, 159, 120, 0.48)) border-box !important;
  1172. box-shadow:
  1173. 0 0 14px rgba(184, 155, 94, 0.18),
  1174. inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  1175. }
  1176. .css-m8ywhg {
  1177. justify-content: center;
  1178. }
  1179.  
  1180. /* removes old logo decoration */
  1181. .glow-logo {
  1182. border: none;
  1183. background: none;
  1184. box-shadow: none;
  1185. text-shadow: none;
  1186. backdrop-filter: none;
  1187. }
  1188.  
  1189. /* main top bar */
  1190. .pp-top-bar {
  1191. padding: 0.5rem 1rem;
  1192. background: transparent;
  1193. overflow: visible;
  1194. }
  1195. .pp-top-bar-outer, .pp-top-bar-inner, .pp-top-bar-left, .pp-top-bar-right, .pp-top-bar-search-spacer-top, .pp-top-bar-search-spacer-bottom {
  1196. backdrop-filter: none;
  1197. box-shadow: none;
  1198. }
  1199.  
  1200. /* removes old sub-name */
  1201. .pp-top-bar-logo-sub-name {
  1202. display: none !important;
  1203. }
  1204.  
  1205. /* logo box cleanup */
  1206. .profile-top-bar-logo-box {
  1207. min-width: 0 !important;
  1208. background: transparent !important;
  1209. border: none !important;
  1210. box-shadow: none !important;
  1211. }
  1212.  
  1213. /* the old logo container */
  1214. .css-1bmggo3 {
  1215. position: fixed;
  1216. top: 0.48rem;
  1217. left: 1rem;
  1218. z-index: 100000;
  1219. width: max-content;
  1220. padding: 0;
  1221. margin: 0;
  1222. background: transparent !important;
  1223. border: none !important;
  1224. box-shadow: none !important;
  1225. overflow: visible;
  1226. }
  1227.  
  1228. /* actual h2 container */
  1229. .css-1bmggo3 h2 {
  1230. position: relative;
  1231. font-size: 0 !important;
  1232. margin: 0 !important;
  1233. padding: 0 !important;
  1234. width: max-content;
  1235. overflow: visible;
  1236. }
  1237.  
  1238. /* main text */
  1239. .css-1bmggo3 h2::after {
  1240. content: "Open For Business";
  1241. position: relative;
  1242. display: inline-block;
  1243. z-index: 3;
  1244. color: rgba(230, 215, 185, 0.94);
  1245. font-family: Georgia, 'Times New Roman', serif;
  1246. font-size: 1.85rem;
  1247. font-weight: 900;
  1248. letter-spacing: 0.055em;
  1249. text-decoration: underline;
  1250. text-decoration-thickness: 1px;
  1251. text-decoration-color: rgba(184, 155, 94, 0.58);
  1252. text-underline-offset: 5px;
  1253. text-transform: uppercase;
  1254. text-shadow:
  1255. 0 1px 2px rgba(0, 0, 0, 0.72),
  1256. 0 0 9px rgba(184, 155, 94, 0.22),
  1257. 0 0 18px rgba(87, 111, 73, 0.12);
  1258. animation: apothecary-text-flicker 7s ease-in-out infinite;
  1259. }
  1260.  
  1261. /* title animation */
  1262. @keyframes apothecary-text-flicker {
  1263. 0%, 100% {
  1264. opacity: 0.92;
  1265. filter: blur(0);
  1266. transform: translateY(0);
  1267. }
  1268.  
  1269. 48% {
  1270. opacity: 0.78;
  1271. filter: blur(0.18px);
  1272. transform: translateY(0.5px);
  1273. }
  1274.  
  1275. 52% {
  1276. opacity: 1;
  1277. filter: blur(0);
  1278. transform: translateY(0);
  1279. }
  1280. }
  1281.  
  1282. /* main menu wrapper cleanup */
  1283. .pp-mnb-wrapper {
  1284. background:
  1285. linear-gradient(
  1286. 180deg,
  1287. rgba(8, 11, 7, 0.76),
  1288. rgba(23, 32, 21, 0.52)
  1289. ) !important;
  1290. border: none !important;
  1291. border-radius: 0 !important;
  1292. box-shadow:
  1293. inset 0 1px 0 rgba(255, 255, 255, 0.045),
  1294. 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  1295. backdrop-filter: blur(10px) saturate(1.04);
  1296. -webkit-backdrop-filter: blur(10px) saturate(1.04);
  1297. color: rgba(239, 230, 208, 0.88);
  1298. font-family: Georgia, 'Times New Roman', serif;
  1299. }
  1300. .pp-mnb-container {
  1301. padding-bottom: 0 !important;
  1302. }
  1303.  
  1304. /* remove old glow-on-hover effects */
  1305. .glow-on-hover::before,
  1306. .glow-on-hover::after {
  1307. background: none !important;
  1308. }
  1309. .glow-on-hover::after {
  1310. opacity: 1 !important;
  1311. }
  1312.  
  1313. /* search input */
  1314. .pp-top-bar .MuiInputBase-root,
  1315. .pp-top-bar .MuiOutlinedInput-root {
  1316. background:
  1317. linear-gradient(
  1318. 135deg,
  1319. rgba(246, 237, 218, 0.11),
  1320. rgba(184, 155, 94, 0.08),
  1321. rgba(87, 111, 73, 0.08)
  1322. ) !important;
  1323. border: 1px solid rgba(216, 200, 167, 0.22) !important;
  1324. border-radius: 15px !important;
  1325. box-shadow:
  1326. inset 0 1px 0 rgba(255, 255, 255, 0.10),
  1327. 0 6px 18px rgba(0, 0, 0, 0.16) !important;
  1328. backdrop-filter: blur(8px);
  1329. -webkit-backdrop-filter: blur(8px);
  1330. overflow: hidden;
  1331. }
  1332. .pp-top-bar input {
  1333. background: transparent !important;
  1334. border: none !important;
  1335. box-shadow: none !important;
  1336. outline: none !important;
  1337. color: rgba(239, 230, 208, 0.94) !important;
  1338. font-family: Georgia, 'Times New Roman', serif;
  1339. font-size: 1.15rem !important;
  1340. letter-spacing: 0.02em;
  1341. padding: 0.55rem 0.7rem !important;
  1342. }
  1343. .pp-top-bar input::placeholder {
  1344. color: rgba(216, 200, 167, 0.58) !important;
  1345. opacity: 1 !important;
  1346. }
  1347.  
  1348. /* top bar icons */
  1349. .pp-top-bar svg,
  1350. .pp-top-bar button,
  1351. .pp-top-bar .MuiIconButton-root {
  1352. color: rgba(216, 200, 167, 0.84) !important;
  1353. }
  1354. .pp-top-bar .MuiInputAdornment-root svg,
  1355. .pp-top-bar .MuiSvgIcon-root {
  1356. color: rgba(216, 200, 167, 0.72) !important;
  1357. }
  1358.  
  1359. /* search focus glow */
  1360. .pp-top-bar .MuiInputBase-root:focus-within,
  1361. .pp-top-bar .MuiOutlinedInput-root:focus-within {
  1362. border-color: rgba(184, 155, 94, 0.42) !important;
  1363. background:
  1364. linear-gradient(
  1365. 135deg,
  1366. rgba(246, 237, 218, 0.16),
  1367. rgba(184, 155, 94, 0.12),
  1368. rgba(87, 111, 73, 0.10)
  1369. ) !important;
  1370. box-shadow:
  1371. inset 0 1px 0 rgba(255, 255, 255, 0.13),
  1372. 0 6px 18px rgba(0, 0, 0, 0.18),
  1373. 0 0 16px rgba(184, 155, 94, 0.12) !important;
  1374. }
  1375.  
  1376. .pp-top-bar-search {
  1377. left: 12pc;
  1378. }
  1379. .pp-top-bar-search-icon {
  1380. left: 15pc;
  1381. position: relative;
  1382. }
  1383.  
  1384. /* create character button */
  1385. .pp-top-bar-create-char {
  1386. font-size: 0 !important;
  1387. background: transparent !important;
  1388. border-radius: 999px;
  1389. padding: 0 !important;
  1390. border: none !important;
  1391. transition: 220ms ease;
  1392. }
  1393.  
  1394. /* new button text */
  1395. .pp-top-bar-create-char::after {
  1396. content: "＋ New Bottle";
  1397. position: relative;
  1398. left: 0;
  1399. display: inline-flex;
  1400. align-items: center;
  1401. justify-content: center;
  1402. padding: 0.46rem 0.95rem;
  1403. border-radius: 12px;
  1404. color: rgba(239, 230, 208, 0.96);
  1405. background:
  1406. linear-gradient(
  1407. 180deg,
  1408. rgba(246, 237, 218, 0.13),
  1409. rgba(184, 155, 94, 0.09) 48%,
  1410. rgba(8, 11, 7, 0.22)
  1411. ),
  1412. repeating-linear-gradient(
  1413. 90deg,
  1414. rgba(255, 255, 255, 0.035) 0 1px,
  1415. transparent 1px 10px
  1416. );
  1417. border: 1px solid rgba(216, 200, 167, 0.34);
  1418. border-left: 3px solid rgba(184, 155, 94, 0.62);
  1419. box-shadow:
  1420. inset 0 1px 0 rgba(255, 255, 255, 0.14),
  1421. inset 0 -10px 18px rgba(0, 0, 0, 0.20),
  1422. 0 7px 16px rgba(0, 0, 0, 0.26),
  1423. 0 0 18px rgba(184, 155, 94, 0.08);
  1424. font-family: Georgia, 'Times New Roman', serif;
  1425. font-size: 0.78rem;
  1426. font-weight: 900;
  1427. letter-spacing: 0.035em;
  1428. text-transform: uppercase;
  1429. text-shadow:
  1430. 0 1px 2px rgba(0, 0, 0, 0.65),
  1431. 0 0 10px rgba(184, 155, 94, 0.14);
  1432. transition:
  1433. transform 220ms ease,
  1434. background 220ms ease,
  1435. border-color 220ms ease,
  1436. box-shadow 220ms ease,
  1437. color 220ms ease;
  1438. }
  1439.  
  1440. /* new button hover */
  1441. .pp-top-bar-create-char:hover::after {
  1442. color: #fff4da;
  1443. background:
  1444. linear-gradient(
  1445. 180deg,
  1446. rgba(246, 237, 218, 0.19),
  1447. rgba(184, 155, 94, 0.16) 48%,
  1448. rgba(8, 11, 7, 0.26)
  1449. ),
  1450. repeating-linear-gradient(
  1451. 90deg,
  1452. rgba(255, 255, 255, 0.045) 0 1px,
  1453. transparent 1px 10px
  1454. );
  1455. border-color: rgba(246, 237, 218, 0.46);
  1456. border-left-color: rgba(143, 159, 120, 0.66);
  1457. box-shadow:
  1458. inset 0 1px 0 rgba(255, 255, 255, 0.18),
  1459. inset 0 -10px 18px rgba(0, 0, 0, 0.22),
  1460. 0 9px 20px rgba(0, 0, 0, 0.30),
  1461. 0 0 20px rgba(184, 155, 94, 0.14);
  1462. transform: translateY(-1px);
  1463. }
  1464.  
  1465.  
  1466. .profile-page-flex {
  1467. padding-top: 0.3rem;
  1468. }
  1469.  
  1470. /* pfp bottle bubble */
  1471. .pp-top-bar-app-menu {
  1472. position: relative;
  1473. width: 38px;
  1474. height: 38px;
  1475. min-width: 38px;
  1476. min-height: 38px;
  1477. padding: 2px;
  1478. border-radius: 999px;
  1479. background:
  1480. radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.72), transparent 24%),
  1481. radial-gradient(circle at 72% 78%, rgba(184, 155, 94, 0.26), transparent 34%),
  1482. linear-gradient(
  1483. 135deg,
  1484. rgba(246, 237, 218, 0.74),
  1485. rgba(184, 155, 94, 0.42),
  1486. rgba(87, 111, 73, 0.38)
  1487. );
  1488. border: 1px solid rgba(246, 237, 218, 0.64);
  1489. box-shadow:
  1490. inset 0 1px 1px rgba(255, 255, 255, 0.68),
  1491. inset 0 -5px 10px rgba(46, 38, 25, 0.26),
  1492. 0 0 10px rgba(184, 155, 94, 0.18),
  1493. 0 5px 14px rgba(0, 0, 0, 0.30);
  1494. overflow: hidden;
  1495. transition:
  1496. transform 220ms ease,
  1497. box-shadow 220ms ease,
  1498. filter 220ms ease;
  1499. }
  1500. /* app menu */
  1501. .pp-top-bar-app-menu-list {
  1502. position: relative;
  1503. overflow: hidden;
  1504. min-width: 255px;
  1505. padding: .7rem 0.7rem 0.7rem;
  1506. border-radius: 18px 18px 26px 26px;
  1507. background:
  1508. radial-gradient(circle at 18% 12%, rgba(246, 237, 218, 0.16), transparent 24%),
  1509. radial-gradient(circle at 84% 88%, rgba(87, 111, 73, 0.18), transparent 34%),
  1510. repeating-linear-gradient(
  1511. 90deg,
  1512. rgba(255, 255, 255, 0.025) 0 1px,
  1513. transparent 1px 18px
  1514. ),
  1515. linear-gradient(
  1516. 145deg,
  1517. rgba(8, 11, 7, 0.96),
  1518. rgba(23, 32, 21, 0.94) 36%,
  1519. rgba(46, 38, 25, 0.92) 68%,
  1520. rgba(8, 11, 7, 0.96)
  1521. );
  1522. border: 1px solid rgba(184, 155, 94, 0.48);
  1523. box-shadow:
  1524. 0 18px 38px rgba(0, 0, 0, 0.48),
  1525. 0 0 18px rgba(184, 155, 94, 0.12),
  1526. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  1527. inset 0 0 0 1px rgba(216, 200, 167, 0.08),
  1528. inset 0 -22px 32px rgba(0, 0, 0, 0.26);
  1529. backdrop-filter: blur(18px) saturate(1.08);
  1530. -webkit-backdrop-filter: blur(18px) saturate(1.08);
  1531. }
  1532. /* dust and glass specks */
  1533. .pp-top-bar-app-menu-list::after {
  1534. content: "";
  1535. position: absolute;
  1536. inset: 10px;
  1537. z-index: 1;
  1538. pointer-events: none;
  1539. background:
  1540. radial-gradient(circle at 14% 18%, rgba(246, 237, 218, 0.22) 0 1px, transparent 2px),
  1541. radial-gradient(circle at 82% 22%, rgba(184, 155, 94, 0.22) 0 2px, transparent 3px),
  1542. radial-gradient(circle at 72% 76%, rgba(87, 111, 73, 0.18) 0 2px, transparent 3px),
  1543. radial-gradient(circle at 24% 88%, rgba(246, 237, 218, 0.18) 0 1px, transparent 2px),
  1544. linear-gradient(
  1545. 125deg,
  1546. transparent 0 22%,
  1547. rgba(255, 255, 255, 0.055) 36%,
  1548. rgba(184, 155, 94, 0.035) 44%,
  1549. transparent 62% 100%
  1550. );
  1551. opacity: 0.62;
  1552. mix-blend-mode: screen;
  1553. }
  1554. /* links and icons */
  1555. .pp-top-bar-app-menu-list a,
  1556. .pp-top-bar-app-menu-list svg {
  1557. color: rgba(239, 230, 208, 0.95) !important;
  1558. filter:
  1559. drop-shadow(0 1px 1px rgba(0, 0, 0, 0.72))
  1560. drop-shadow(0 0 4px rgba(184, 155, 94, 0.10));
  1561. }
  1562. /* menu rows */
  1563. .pp-top-bar-app-menu-list-item,
  1564. .css-1rokoft {
  1565. position: relative;
  1566. z-index: 2;
  1567. margin: 0.28rem 0;
  1568. padding: 0.62rem 0.82rem 0.62rem 2.15rem;
  1569. border-radius: 10px 18px 18px 10px;
  1570. border: 1px solid rgba(216, 200, 167, 0.14);
  1571. color: rgba(239, 230, 208, 0.98) !important;
  1572. background:
  1573. linear-gradient(
  1574. 90deg,
  1575. rgba(184, 155, 94, 0.18) 0 0.42rem,
  1576. rgba(8, 11, 7, 0.46) 0.42rem,
  1577. rgba(23, 32, 21, 0.34) 45%,
  1578. rgba(246, 237, 218, 0.045)
  1579. );
  1580. font-family: Georgia, 'Times New Roman', serif;
  1581. font-size: 0.94rem;
  1582. font-weight: 800;
  1583. letter-spacing: 0.035em;
  1584. text-shadow:
  1585. 0 1px 2px rgba(0, 0, 0, 0.84),
  1586. 0 0 8px rgba(184, 155, 94, 0.10);
  1587. box-shadow:
  1588. inset 0 1px 0 rgba(255, 255, 255, 0.06),
  1589. inset 0 -8px 14px rgba(0, 0, 0, 0.12),
  1590. 0 2px 8px rgba(0, 0, 0, 0.10);
  1591. transition:
  1592. color 220ms ease,
  1593. background 220ms ease,
  1594. border-color 220ms ease,
  1595. box-shadow 220ms ease,
  1596. transform 220ms ease;
  1597. }
  1598. /* little dot */
  1599. .pp-top-bar-app-menu-list-item::before,
  1600. .css-1rokoft::before {
  1601. content: "";
  1602. position: absolute;
  1603. left: 0.76rem;
  1604. top: 50%;
  1605. width: 0.62rem;
  1606. height: 0.62rem;
  1607. border-radius: 50% 50% 46% 46%;
  1608. background:
  1609. radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.62), transparent 24%),
  1610. radial-gradient(circle at 60% 70%, rgba(87, 111, 73, 0.38), transparent 38%),
  1611. linear-gradient(
  1612. 145deg,
  1613. rgba(216, 200, 167, 0.92),
  1614. rgba(184, 155, 94, 0.72),
  1615. rgba(23, 32, 21, 0.72)
  1616. );
  1617. border: 1px solid rgba(246, 237, 218, 0.34);
  1618. box-shadow:
  1619. inset 0 1px 0 rgba(255, 255, 255, 0.26),
  1620. 0 0 8px rgba(184, 155, 94, 0.18);
  1621. transform: translateY(-50%);
  1622. pointer-events: none;
  1623. }
  1624. /* tiny label line */
  1625. .pp-top-bar-app-menu-list-item::after,
  1626. .css-1rokoft::after {
  1627. content: "";
  1628. position: absolute;
  1629. left: 2.1rem;
  1630. right: 0.85rem;
  1631. bottom: 0.42rem;
  1632. height: 1px;
  1633. background:
  1634. linear-gradient(
  1635. 90deg,
  1636. rgba(184, 155, 94, 0.28),
  1637. transparent
  1638. );
  1639. pointer-events: none;
  1640. }
  1641. /* row hover */
  1642. .pp-top-bar-app-menu-list-item:hover,
  1643. .css-1rokoft:hover {
  1644. color: #fff4da !important;
  1645. background:
  1646. radial-gradient(circle at 16% 18%, rgba(246, 237, 218, 0.14), transparent 34%),
  1647. linear-gradient(
  1648. 90deg,
  1649. rgba(143, 159, 120, 0.28) 0 0.42rem,
  1650. rgba(46, 38, 25, 0.64) 0.42rem,
  1651. rgba(23, 32, 21, 0.52) 48%,
  1652. rgba(184, 155, 94, 0.10)
  1653. );
  1654. border-color: rgba(216, 200, 167, 0.34);
  1655. box-shadow:
  1656. inset 0 1px 0 rgba(255, 255, 255, 0.13),
  1657. inset 0 -8px 14px rgba(0, 0, 0, 0.14),
  1658. 0 6px 14px rgba(0, 0, 0, 0.24),
  1659. 0 0 14px rgba(184, 155, 94, 0.14);
  1660. transform: translateX(4px);
  1661. }
  1662. /* dot hover */
  1663. .pp-top-bar-app-menu-list-item:hover::before,
  1664. .css-1rokoft:hover::before {
  1665. background:
  1666. radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 24%),
  1667. radial-gradient(circle at 60% 70%, rgba(143, 159, 120, 0.46), transparent 38%),
  1668. linear-gradient(
  1669. 145deg,
  1670. rgba(246, 237, 218, 0.98),
  1671. rgba(184, 155, 94, 0.82),
  1672. rgba(87, 111, 73, 0.74)
  1673. );
  1674. box-shadow:
  1675. inset 0 1px 0 rgba(255, 255, 255, 0.32),
  1676. 0 0 10px rgba(184, 155, 94, 0.28);
  1677. }
  1678. /* icon and link hover */
  1679. .pp-top-bar-app-menu-list a:hover,
  1680. .pp-top-bar-app-menu-list svg:hover {
  1681. color: #fff4da !important;
  1682. text-shadow:
  1683. 0 0 8px rgba(184, 155, 94, 0.28),
  1684. 0 0 14px rgba(87, 111, 73, 0.14);
  1685. }
  1686. /* Janitor Plus removal */
  1687. .pp-top-bar-app-menu-list-item[href="/plus"], .pp-top-bar-app-menu-list-item[href="/plus"] + hr{
  1688. display: none;
  1689. }
  1690.  
  1691. /* modal overlay */
  1692. .profile-filter-modal-modal-overlay {
  1693. background:
  1694. radial-gradient(circle at 50% 18%, rgba(184, 155, 94, 0.12), transparent 30%),
  1695. radial-gradient(circle at 18% 86%, rgba(87, 111, 73, 0.12), transparent 34%),
  1696. rgba(0, 0, 0, 0.82) !important;
  1697. backdrop-filter: blur(6px) saturate(0.92);
  1698. -webkit-backdrop-filter: blur(6px) saturate(0.92);
  1699. }
  1700.  
  1701. /* spinner */
  1702. .chakra-spinner {
  1703. color: #d6bf82 !important;
  1704. filter: drop-shadow(0 0 8px rgba(184, 155, 94, 0.32));
  1705. }
  1706.  
  1707. /* modal spacing */
  1708. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * {
  1709. padding: 0.5rem;
  1710. }
  1711.  
  1712. /* main filter cabinet */
  1713. #root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  1714. position: relative;
  1715. overflow: hidden;
  1716. max-width: 40rem;
  1717. padding: 1.15rem;
  1718. gap: 1rem;
  1719. border-radius: 1.15rem;
  1720. background:
  1721. radial-gradient(circle at 14% 10%, rgba(246, 237, 218, 0.12), transparent 24%),
  1722. radial-gradient(circle at 86% 92%, rgba(87, 111, 73, 0.14), transparent 34%),
  1723. repeating-linear-gradient(
  1724. 90deg,
  1725. rgba(255, 255, 255, 0.018) 0 1px,
  1726. transparent 1px 22px
  1727. ),
  1728. linear-gradient(
  1729. 145deg,
  1730. rgba(8, 11, 7, 0.98),
  1731. rgba(18, 28, 18, 0.96) 38%,
  1732. rgba(46, 38, 25, 0.92) 68%,
  1733. rgba(8, 11, 7, 0.98)
  1734. );
  1735. border: 1px solid rgba(184, 155, 94, 0.46);
  1736. box-shadow:
  1737. 0 20px 42px rgba(0, 0, 0, 0.54),
  1738. 0 0 18px rgba(184, 155, 94, 0.12),
  1739. inset 0 1px 0 rgba(255, 255, 255, 0.10),
  1740. inset 0 0 0 1px rgba(216, 200, 167, 0.06),
  1741. inset 0 -26px 34px rgba(0, 0, 0, 0.28);
  1742. }
  1743.  
  1744. /* cabinet dust overlay */
  1745. #root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > *::before {
  1746. content: "";
  1747. position: absolute;
  1748. inset: 10px;
  1749. pointer-events: none;
  1750. background:
  1751. radial-gradient(circle at 16% 22%, rgba(246, 237, 218, 0.16) 0 1px, transparent 2px),
  1752. radial-gradient(circle at 82% 24%, rgba(184, 155, 94, 0.16) 0 2px, transparent 3px),
  1753. radial-gradient(circle at 72% 78%, rgba(87, 111, 73, 0.14) 0 2px, transparent 3px),
  1754. linear-gradient(
  1755. 125deg,
  1756. transparent 0 26%,
  1757. rgba(255, 255, 255, 0.035) 40%,
  1758. rgba(184, 155, 94, 0.026) 48%,
  1759. transparent 66% 100%
  1760. );
  1761. opacity: 0.58;
  1762. mix-blend-mode: screen;
  1763. }
  1764.  
  1765. /* inner cabinet rim */
  1766. #root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > *::after {
  1767. content: "";
  1768. position: absolute;
  1769. inset: 7px;
  1770. pointer-events: none;
  1771. border: 1px solid rgba(216, 200, 167, 0.11);
  1772. border-radius: 0.9rem;
  1773. box-shadow:
  1774. inset 0 0 18px rgba(184, 155, 94, 0.06),
  1775. inset 0 -18px 24px rgba(0, 0, 0, 0.18);
  1776. }
  1777.  
  1778. /* modal header */
  1779. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header {
  1780. position: relative;
  1781. z-index: 2;
  1782. padding: 0;
  1783. font-size: 0;
  1784. line-height: 0.7;
  1785. text-transform: uppercase;
  1786. color: #e6d7b9;
  1787. width: 35pc;
  1788. }
  1789.  
  1790. /* modal header text */
  1791. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header::after {
  1792. content: "Cabinet Filters";
  1793. display: inline-block;
  1794. color: #e6d7b9;
  1795. font-family: Georgia, 'Times New Roman', serif;
  1796. font-size: clamp(2rem, 5vw, 3rem);
  1797. font-weight: 900;
  1798. line-height: 1;
  1799. letter-spacing: 0.08em;
  1800. text-shadow:
  1801. 0 2px 3px rgba(0, 0, 0, 0.78),
  1802. 0 0 12px rgba(184, 155, 94, 0.18),
  1803. 0 0 24px rgba(87, 111, 73, 0.12);
  1804. }
  1805.  
  1806. /* close button */
  1807. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button {
  1808. top: 1rem;
  1809. right: 1rem;
  1810. margin: 0;
  1811. border-radius: 999px;
  1812. color: #e6d7b9;
  1813. background:
  1814. radial-gradient(circle at 30% 22%, rgba(216, 200, 167, 0.12), transparent 30%),
  1815. linear-gradient(
  1816. 145deg,
  1817. rgba(34, 43, 27, 0.88),
  1818. rgba(8, 11, 7, 0.94)
  1819. );
  1820. border: 1px solid rgba(216, 200, 167, 0.34);
  1821. box-shadow:
  1822. inset 0 1px 0 rgba(255, 255, 255, 0.10),
  1823. 0 5px 12px rgba(0, 0, 0, 0.24);
  1824. transition:
  1825. background 300ms ease,
  1826. color 300ms ease,
  1827. border-color 300ms ease,
  1828. box-shadow 300ms ease,
  1829. transform 300ms ease;
  1830. }
  1831.  
  1832. /* close button hover */
  1833. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) {
  1834. color: #fff4da;
  1835. background:
  1836. radial-gradient(circle at 30% 22%, rgba(216, 200, 167, 0.18), transparent 30%),
  1837. linear-gradient(
  1838. 145deg,
  1839. rgba(184, 155, 94, 0.16),
  1840. rgba(23, 32, 21, 0.90)
  1841. );
  1842. border: 1px solid rgba(246, 237, 218, 0.42);
  1843. box-shadow:
  1844. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  1845. 0 6px 14px rgba(0, 0, 0, 0.28),
  1846. 0 0 12px rgba(184, 155, 94, 0.12);
  1847. transform: translateY(-1px);
  1848. }
  1849.  
  1850. /* modal body wrapper */
  1851. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button + * {
  1852. position: relative;
  1853. z-index: 2;
  1854. padding: 0;
  1855. }
  1856.  
  1857. /* body layout */
  1858. .profile-filter-modal-body-flex {
  1859. gap: 1rem;
  1860. }
  1861.  
  1862. /* removes empty wrapper box */
  1863. .profile-filter-modal-body-flex .css-0 {
  1864. display: contents;
  1865. }
  1866.  
  1867. /* tag section heading */
  1868. .profile-filter-modal-body-tags-flex-box-heading {
  1869. margin: 0;
  1870. font-size: 0;
  1871. line-height: 1;
  1872. color: #d6bf82;
  1873. }
  1874.  
  1875. /* tag section heading text */
  1876. .profile-filter-modal-body-tags-flex-box-heading::after {
  1877. content: "Choose from the shelf...";
  1878. display: inline-block;
  1879. color: #d6bf82;
  1880. font-family: Georgia, 'Times New Roman', serif;
  1881. font-size: 1rem;
  1882. font-weight: 900;
  1883. letter-spacing: 0.08em;
  1884. text-transform: uppercase;
  1885. text-shadow:
  1886. 0 1px 2px rgba(0, 0, 0, 0.72),
  1887. 0 0 8px rgba(184, 155, 94, 0.16);
  1888. }
  1889.  
  1890. /* tag area wrapper */
  1891. *:has(> [class*="_tagsContainer_"]) {
  1892. margin: 0;
  1893. padding: 0;
  1894. gap: 1rem;
  1895. flex-flow: column;
  1896. align-items: center;
  1897. }
  1898.  
  1899. /* hides default filter buttons */
  1900. [class*="_filterButton_"] {
  1901. display: none;
  1902. }
  1903.  
  1904. /* expand button */
  1905. [class*="_expandButton_"] {
  1906. display: flex;
  1907. align-items: center;
  1908. width: auto;
  1909. padding: 0.38rem 0.85rem;
  1910. gap: 0.5rem;
  1911. border-radius: 999px;
  1912. color: #e6d7b9;
  1913. background:
  1914. linear-gradient(
  1915. 180deg,
  1916. rgba(34, 43, 27, 0.96),
  1917. rgba(8, 11, 7, 0.98)
  1918. );
  1919. border: 1px solid rgba(184, 155, 94, 0.46);
  1920. box-shadow:
  1921. 0 6px 12px rgba(0, 0, 0, 0.28),
  1922. inset 0 1px 0 rgba(246, 237, 218, 0.10),
  1923. 0 0 10px rgba(184, 155, 94, 0.08);
  1924. font-family: Georgia, 'Times New Roman', serif;
  1925. transition:
  1926. background 300ms ease,
  1927. color 300ms ease,
  1928. border-color 300ms ease,
  1929. box-shadow 300ms ease,
  1930. transform 300ms ease;
  1931. }
  1932.  
  1933. /* expand button icon */
  1934. [class*="_expandButton_"] *:is(svg, path) {
  1935. stroke: currentColor !important;
  1936. }
  1937.  
  1938. /* expand button hover */
  1939. [class*="_expandButton_"]:is(:hover, :focus, :active) {
  1940. color: #fff4da;
  1941. background:
  1942. linear-gradient(
  1943. 180deg,
  1944. rgba(184, 155, 94, 0.20),
  1945. rgba(23, 32, 21, 0.96)
  1946. );
  1947. border: 1px solid rgba(246, 237, 218, 0.42);
  1948. box-shadow:
  1949. 0 8px 16px rgba(0, 0, 0, 0.32),
  1950. 0 0 12px rgba(184, 155, 94, 0.14);
  1951. transform: translateY(-1px);
  1952. }
  1953.  
  1954. /* expand button text */
  1955. [class*="_expandButton_"]::before {
  1956. content: "Open Shelf";
  1957. font-family: Georgia, 'Times New Roman', serif;
  1958. font-size: 0.88rem;
  1959. font-weight: 900;
  1960. letter-spacing: 0.08em;
  1961. text-transform: uppercase;
  1962. }
  1963.  
  1964. /* collapse button text */
  1965. [class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {
  1966. content: "Close Shelf";
  1967. }
  1968.  
  1969. /* tags container */
  1970. [class*="_tagsContainer_"] {
  1971. width: 100%;
  1972. padding: 0.65rem;
  1973. border-radius: 1.4rem;
  1974. border: 1px solid rgba(184, 155, 94, 0.42);
  1975. background:
  1976. radial-gradient(circle at 16% 14%, rgba(216, 200, 167, 0.10), transparent 26%),
  1977. linear-gradient(
  1978. 145deg,
  1979. rgba(8, 11, 7, 0.92),
  1980. rgba(18, 28, 18, 0.88),
  1981. rgba(46, 38, 25, 0.72)
  1982. );
  1983. box-shadow:
  1984. inset 0 1px 0 rgba(255, 255, 255, 0.08),
  1985. inset 0 -16px 22px rgba(0, 0, 0, 0.20),
  1986. 0 8px 18px rgba(0, 0, 0, 0.20);
  1987. transition:
  1988. border-radius 300ms ease,
  1989. border-color 300ms ease,
  1990. box-shadow 300ms ease;
  1991. }
  1992.  
  1993. /* left fade */
  1994. [class*="_gradientLeft_"] {
  1995. background:
  1996. linear-gradient(
  1997. to left,
  1998. transparent,
  1999. rgba(8, 11, 7, 0.94) 52%
  2000. );
  2001. }
  2002.  
  2003. /* right fade */
  2004. [class*="_gradientRight_"] {
  2005. right: 0 !important;
  2006. background:
  2007. linear-gradient(
  2008. to right,
  2009. transparent,
  2010. rgba(8, 11, 7, 0.94) 52%
  2011. );
  2012. }
  2013.  
  2014. /* navigation buttons */
  2015. [class*="_navigationButton"] {
  2016. padding: 0;
  2017. border-radius: 999px;
  2018. color: #e6d7b9;
  2019. background:
  2020. radial-gradient(circle at 30% 22%, rgba(216, 200, 167, 0.12), transparent 30%),
  2021. linear-gradient(
  2022. 145deg,
  2023. rgba(34, 43, 27, 0.90),
  2024. rgba(8, 11, 7, 0.94)
  2025. );
  2026. border: 1px solid rgba(184, 155, 94, 0.42);
  2027. box-shadow:
  2028. inset 0 1px 0 rgba(255, 255, 255, 0.08),
  2029. 0 4px 10px rgba(0, 0, 0, 0.20);
  2030. transition:
  2031. background 300ms ease,
  2032. color 300ms ease,
  2033. border-color 300ms ease,
  2034. box-shadow 300ms ease,
  2035. transform 300ms ease;
  2036. }
  2037.  
  2038. /* navigation button icon */
  2039. [class*="_navigationButton"] path {
  2040. opacity: 1;
  2041. stroke: currentColor;
  2042. }
  2043.  
  2044. [class*="_navigationButton"] svg {
  2045. position: relative;
  2046. top: -1px;
  2047. }
  2048.  
  2049. [class*="_navigationButtonLeft"] svg {
  2050. left: -2px;
  2051. }
  2052.  
  2053. /* navigation button hover */
  2054. [class*="_navigationButton"]:is(:hover, :focus, :active) {
  2055. color: #fff4da;
  2056. background:
  2057. linear-gradient(
  2058. 145deg,
  2059. rgba(184, 155, 94, 0.22),
  2060. rgba(23, 32, 21, 0.92)
  2061. );
  2062. border: 1px solid rgba(246, 237, 218, 0.42);
  2063. box-shadow:
  2064. 0 0 12px rgba(184, 155, 94, 0.14),
  2065. 0 5px 12px rgba(0, 0, 0, 0.26);
  2066. transform: translateY(-1px);
  2067. }
  2068.  
  2069. /* collapsed tag container */
  2070. [class*="_collapsedContainer_"] {
  2071. gap: 0.5rem;
  2072. padding: 0;
  2073. }
  2074.  
  2075. /* expanded tag alignment */
  2076. [class*="_collapsedContainer_"][class*="_expanded_"] {
  2077. justify-content: center;
  2078. }
  2079.  
  2080. /* tag motion wrapper */
  2081. [class*="_collapsedContainer_"] [class*="_motionDiv_"] {
  2082. margin: 0;
  2083. }
  2084.  
  2085. /* normal tag */
  2086. [class*="_collapsedContainer_"] [class*="_tag_"] {
  2087. color: #d8c8a7;
  2088. border-radius: 999px;
  2089. font-family: Georgia, 'Times New Roman', serif;
  2090. font-size: 0.92rem;
  2091. font-weight: 800;
  2092. letter-spacing: 0.04em;
  2093. border: 1px solid rgba(216, 200, 167, 0.26);
  2094. background:
  2095. radial-gradient(circle at 18% 18%, rgba(246, 237, 218, 0.10), transparent 26%),
  2096. linear-gradient(
  2097. 145deg,
  2098. rgba(23, 32, 21, 0.92),
  2099. rgba(8, 11, 7, 0.96)
  2100. );
  2101. box-shadow:
  2102. inset 0 1px 0 rgba(255, 255, 255, 0.08),
  2103. 0 3px 8px rgba(0, 0, 0, 0.16);
  2104. text-shadow:
  2105. 0 1px 2px rgba(0, 0, 0, 0.70);
  2106. transition:
  2107. background 300ms ease,
  2108. color 300ms ease,
  2109. border-color 300ms ease,
  2110. box-shadow 300ms ease,
  2111. transform 300ms ease;
  2112. }
  2113.  
  2114. /* selected tag */
  2115. [class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  2116. color: #172015;
  2117. font-weight: 900;
  2118. border: 1px solid rgba(246, 237, 218, 0.48);
  2119. background:
  2120. radial-gradient(circle at 18% 18%, rgba(255, 248, 220, 0.55), transparent 26%),
  2121. linear-gradient(
  2122. 180deg,
  2123. rgba(230, 215, 185, 0.98),
  2124. rgba(184, 155, 94, 0.92)
  2125. );
  2126. box-shadow:
  2127. 0 0 12px rgba(184, 155, 94, 0.18),
  2128. inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  2129. text-shadow: none;
  2130. }
  2131.  
  2132. /* normal tag hover */
  2133. [class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  2134. color: #fff4da;
  2135. background:
  2136. radial-gradient(circle at 18% 18%, rgba(216, 200, 167, 0.14), transparent 26%),
  2137. linear-gradient(
  2138. 145deg,
  2139. rgba(34, 43, 27, 0.96),
  2140. rgba(8, 11, 7, 0.98)
  2141. );
  2142. border-color: rgba(216, 200, 167, 0.42);
  2143. box-shadow:
  2144. 0 0 10px rgba(184, 155, 94, 0.12),
  2145. inset 0 1px 0 rgba(255, 255, 255, 0.10);
  2146. }
  2147.  
  2148. /* tag active */
  2149. [class*="_collapsedContainer_"] [class*="_tag_"]:active {
  2150. transform: scale(0.95);
  2151. }
  2152.  
  2153. /* divider */
  2154. [class*="_motionDiv_"][class*="_divider_"] {
  2155. color: #d6bf82;
  2156. padding: 0 0.25rem;
  2157. text-shadow:
  2158. 0 0 8px rgba(184, 155, 94, 0.24);
  2159. }
  2160.  
  2161. /* notification popover shell */
  2162. [class*="Popover_"] {
  2163. background:
  2164. radial-gradient(circle at 16% 10%, rgba(216, 200, 167, 0.10), transparent 26%),
  2165. radial-gradient(circle at 88% 92%, rgba(87, 111, 73, 0.14), transparent 34%),
  2166. linear-gradient(
  2167. 145deg,
  2168. rgba(8, 11, 7, 0.98),
  2169. rgba(18, 28, 18, 0.96) 42%,
  2170. rgba(23, 32, 21, 0.94) 72%,
  2171. rgba(8, 11, 7, 0.98)
  2172. ) !important;
  2173.  
  2174. border: 1px solid rgba(184, 155, 94, 0.42) !important;
  2175. border-radius: 18px 18px 24px 24px !important;
  2176.  
  2177. box-shadow:
  2178. 0 20px 42px rgba(0, 0, 0, 0.56),
  2179. 0 0 18px rgba(184, 155, 94, 0.10),
  2180. inset 0 1px 0 rgba(255, 255, 255, 0.10),
  2181. inset 0 0 0 1px rgba(216, 200, 167, 0.06),
  2182. inset 0 -24px 34px rgba(0, 0, 0, 0.26) !important;
  2183.  
  2184. backdrop-filter: blur(18px) saturate(1.04);
  2185. -webkit-backdrop-filter: blur(18px) saturate(1.04);
  2186.  
  2187. font-family: Georgia, 'Times New Roman', serif;
  2188. color: rgba(239, 230, 208, 0.96);
  2189. overflow: hidden;
  2190. text-shadow: none;
  2191. }
  2192.  
  2193. /* soft glass haze */
  2194. [class*="Popover_"]::before {
  2195. content: "";
  2196. position: absolute;
  2197. inset: 8px;
  2198. z-index: 1;
  2199. pointer-events: none;
  2200. background:
  2201. radial-gradient(circle at 18% 18%, rgba(246, 237, 218, 0.10) 0 1px, transparent 2px),
  2202. radial-gradient(circle at 84% 24%, rgba(184, 155, 94, 0.12) 0 2px, transparent 3px),
  2203. radial-gradient(circle at 76% 80%, rgba(87, 111, 73, 0.12) 0 2px, transparent 3px),
  2204. linear-gradient(
  2205. 125deg,
  2206. transparent 0 28%,
  2207. rgba(255, 255, 255, 0.035) 40%,
  2208. rgba(184, 155, 94, 0.025) 48%,
  2209. transparent 66% 100%
  2210. );
  2211. opacity: 0.52;
  2212. mix-blend-mode: screen;
  2213. }
  2214.  
  2215. /* inner bottle-glass rim */
  2216. [class*="Popover_"]::after {
  2217. content: "";
  2218. position: absolute;
  2219. inset: 6px;
  2220. z-index: 1;
  2221. pointer-events: none;
  2222. border: 1px solid rgba(216, 200, 167, 0.10);
  2223. border-radius: 14px 14px 20px 20px;
  2224. box-shadow:
  2225. inset 0 0 18px rgba(184, 155, 94, 0.06),
  2226. inset 0 -18px 24px rgba(0, 0, 0, 0.18);
  2227. }
  2228.  
  2229. /* loading */
  2230. [class*="_loadingState_"] {
  2231. position: relative;
  2232. z-index: 2;
  2233. color: rgba(239, 230, 208, 0.96);
  2234. }
  2235.  
  2236. /* loading spinner */
  2237. [class*="_loadingSpinner_"] {
  2238. border: 3px solid rgba(216, 200, 167, 0.24);
  2239. border-top: 3px solid #d6bf82;
  2240. filter: drop-shadow(0 0 8px rgba(184, 155, 94, 0.26));
  2241. }
  2242.  
  2243. /* loading message */
  2244. [class*="_loadingMessage_"] {
  2245. color: rgba(239, 230, 208, 0.90);
  2246. font-family: Georgia, 'Times New Roman', serif;
  2247. letter-spacing: 0.03em;
  2248. }
  2249.  
  2250. /* empty state */
  2251. [class*="_emptyState_"] {
  2252. position: relative;
  2253. z-index: 2;
  2254. display: flex;
  2255. flex-flow: column;
  2256. align-items: center;
  2257. color: rgba(239, 230, 208, 0.90);
  2258. }
  2259.  
  2260. /* empty state icon */
  2261. [class*="_emptyState_"] svg {
  2262. color: rgba(216, 200, 167, 0.88) !important;
  2263. opacity: 1;
  2264. filter:
  2265. drop-shadow(0 1px 1px rgba(0, 0, 0, 0.72))
  2266. drop-shadow(0 0 8px rgba(184, 155, 94, 0.16));
  2267. }
  2268.  
  2269. /* empty state title */
  2270. [class*="_emptyStateTitle_"] {
  2271. color: rgba(239, 230, 208, 0.96);
  2272. font-family: Georgia, 'Times New Roman', serif;
  2273. text-transform: uppercase;
  2274. letter-spacing: 0.06em;
  2275. }
  2276.  
  2277. /* empty state message */
  2278. [class*="_emptyStateMessage_"] {
  2279. color: rgba(216, 200, 167, 0.74);
  2280. font-family: Georgia, 'Times New Roman', serif;
  2281. }
  2282.  
  2283. /* popover header */
  2284. [class*="popoverHeader_"] {
  2285. position: relative;
  2286. z-index: 3;
  2287. padding: 1.15rem 1.2rem 0.85rem !important;
  2288. background:
  2289. radial-gradient(circle at 18% 0%, rgba(216, 200, 167, 0.10), transparent 30%),
  2290. linear-gradient(
  2291. 180deg,
  2292. rgba(34, 43, 27, 0.58),
  2293. rgba(18, 28, 18, 0.36),
  2294. rgba(8, 11, 7, 0.18)
  2295. ) !important;
  2296. border-bottom: 1px solid rgba(184, 155, 94, 0.24) !important;
  2297. }
  2298.  
  2299. /* header plaque line */
  2300. [class*="popoverHeader_"]::before {
  2301. content: "sealed notices";
  2302. position: absolute;
  2303. left: 1.15rem;
  2304. bottom: -0.58rem;
  2305. z-index: 4;
  2306. padding: 0.24rem 0.6rem;
  2307. border-radius: 999px;
  2308. color: rgba(230, 215, 185, 0.96);
  2309. background:
  2310. linear-gradient(
  2311. 180deg,
  2312. rgba(34, 43, 27, 0.96),
  2313. rgba(8, 11, 7, 0.98)
  2314. );
  2315. border: 1px solid rgba(184, 155, 94, 0.38);
  2316. box-shadow:
  2317. 0 6px 12px rgba(0, 0, 0, 0.32),
  2318. inset 0 1px 0 rgba(246, 237, 218, 0.10),
  2319. 0 0 10px rgba(184, 155, 94, 0.08);
  2320. font-family: Georgia, 'Times New Roman', serif;
  2321. font-size: 0.54rem;
  2322. font-weight: 900;
  2323. letter-spacing: 0.16em;
  2324. line-height: 1;
  2325. text-transform: uppercase;
  2326. pointer-events: none;
  2327. }
  2328.  
  2329. /* popover header glow line */
  2330. [class*="popoverHeader_"]::after {
  2331. content: "";
  2332. position: absolute;
  2333. left: 1rem;
  2334. right: 1rem;
  2335. bottom: -1px;
  2336. height: 1px;
  2337. background:
  2338. linear-gradient(
  2339. 90deg,
  2340. transparent,
  2341. rgba(184, 155, 94, 0.48),
  2342. rgba(216, 200, 167, 0.18),
  2343. rgba(87, 111, 73, 0.20),
  2344. transparent
  2345. );
  2346. pointer-events: none;
  2347. }
  2348.  
  2349. /* popover title */
  2350. [class*="popoverTitle_"] {
  2351. font-family: Georgia, 'Times New Roman', serif;
  2352. font-size: 1.18rem;
  2353. color: rgba(239, 230, 208, 0.98);
  2354. text-transform: uppercase;
  2355. letter-spacing: 0.08em;
  2356. text-shadow:
  2357. 0 1px 2px rgba(0, 0, 0, 0.78),
  2358. 0 0 10px rgba(184, 155, 94, 0.14);
  2359. }
  2360.  
  2361. /* header close and settings button */
  2362. [class*="popoverHeader_"] button {
  2363. color: rgba(239, 230, 208, 0.92) !important;
  2364. border: 1px solid rgba(216, 200, 167, 0.24) !important;
  2365. border-radius: 999px !important;
  2366. background:
  2367. radial-gradient(circle at 30% 22%, rgba(216, 200, 167, 0.12), transparent 30%),
  2368. linear-gradient(
  2369. 145deg,
  2370. rgba(34, 43, 27, 0.84),
  2371. rgba(8, 11, 7, 0.90)
  2372. ) !important;
  2373. box-shadow:
  2374. inset 0 1px 0 rgba(255, 255, 255, 0.08),
  2375. 0 5px 12px rgba(0, 0, 0, 0.22);
  2376. transition:
  2377. background 220ms ease,
  2378. border-color 220ms ease,
  2379. color 220ms ease,
  2380. transform 220ms ease,
  2381. box-shadow 220ms ease;
  2382. }
  2383.  
  2384. /* header button hover */
  2385. [class*="popoverHeader_"] button:hover {
  2386. background:
  2387. radial-gradient(circle at 30% 22%, rgba(216, 200, 167, 0.18), transparent 30%),
  2388. linear-gradient(
  2389. 145deg,
  2390. rgba(184, 155, 94, 0.16),
  2391. rgba(23, 32, 21, 0.88)
  2392. ) !important;
  2393. border-color: rgba(216, 200, 167, 0.40) !important;
  2394. color: #fff4da !important;
  2395. box-shadow:
  2396. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  2397. 0 6px 14px rgba(0, 0, 0, 0.26),
  2398. 0 0 12px rgba(184, 155, 94, 0.12);
  2399. transform: translateY(-1px);
  2400. }
  2401.  
  2402. /* notifications list */
  2403. [class*="notificationsList_"] {
  2404. position: relative;
  2405. z-index: 2;
  2406. max-height: 480px;
  2407. padding: 1.02rem 0.62rem 0.65rem;
  2408. }
  2409.  
  2410. /* notifications scrollbar */
  2411. [class*="notificationsList_"]::-webkit-scrollbar {
  2412. width: 7px;
  2413. }
  2414.  
  2415. /* notifications scrollbar track */
  2416. [class*="notificationsList_"]::-webkit-scrollbar-track {
  2417. background: rgba(216, 200, 167, 0.06);
  2418. border-radius: 999px;
  2419. }
  2420.  
  2421. /* notifications scrollbar thumb */
  2422. [class*="notificationsList_"]::-webkit-scrollbar-thumb {
  2423. background:
  2424. linear-gradient(
  2425. 180deg,
  2426. rgba(143, 159, 120, 0.82),
  2427. rgba(184, 155, 94, 0.88),
  2428. rgba(75, 48, 22, 0.86)
  2429. );
  2430. border-radius: 999px;
  2431. border: 2px solid rgba(216, 200, 167, 0.24);
  2432. }
  2433.  
  2434. /* notification item */
  2435. [class*="_notificationItem_"] {
  2436. position: relative;
  2437. overflow: hidden;
  2438. margin: 0.62rem 0;
  2439. padding: 0.78rem 0.78rem 0.78rem 0.9rem;
  2440. border-radius: 16px !important;
  2441. border: 1px solid rgba(184, 155, 94, 0.22) !important;
  2442. background:
  2443. radial-gradient(circle at 18% 18%, rgba(216, 200, 167, 0.08), transparent 34%),
  2444. linear-gradient(
  2445. 135deg,
  2446. rgba(18, 28, 18, 0.74),
  2447. rgba(34, 43, 27, 0.56) 48%,
  2448. rgba(46, 38, 25, 0.40)
  2449. ) !important;
  2450. box-shadow:
  2451. inset 0 1px 0 rgba(255, 255, 255, 0.08),
  2452. inset 0 -12px 18px rgba(0, 0, 0, 0.14),
  2453. 0 5px 13px rgba(0, 0, 0, 0.20) !important;
  2454. transition:
  2455. background 220ms ease,
  2456. border-color 220ms ease,
  2457. box-shadow 220ms ease,
  2458. transform 220ms ease,
  2459. filter 220ms ease;
  2460. }
  2461.  
  2462. /* notification glass texture */
  2463. [class*="_notificationItem_"]::before {
  2464. content: "";
  2465. position: absolute;
  2466. inset: 0;
  2467. pointer-events: none;
  2468. background:
  2469. radial-gradient(circle at 16% 20%, rgba(246, 237, 218, 0.08), transparent 18%),
  2470. radial-gradient(circle at 86% 82%, rgba(87, 111, 73, 0.08), transparent 26%),
  2471. linear-gradient(
  2472. 125deg,
  2473. transparent 0 28%,
  2474. rgba(255, 255, 255, 0.035) 42%,
  2475. transparent 58% 100%
  2476. );
  2477. opacity: 0.70;
  2478. mix-blend-mode: screen;
  2479. }
  2480.  
  2481. /* notification tiny seal */
  2482. [class*="_notificationItem_"]::after {
  2483. content: "";
  2484. position: absolute;
  2485. right: 0.72rem;
  2486. top: 0.66rem;
  2487. width: 0.58rem;
  2488. height: 0.58rem;
  2489. border-radius: 50%;
  2490. background:
  2491. radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 24%),
  2492. radial-gradient(circle at 50% 50%, rgba(122, 48, 37, 0.70), rgba(67, 24, 18, 0.82));
  2493. border: 1px solid rgba(216, 200, 167, 0.18);
  2494. box-shadow:
  2495. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  2496. 0 0 7px rgba(122, 48, 37, 0.18);
  2497. pointer-events: none;
  2498. opacity: 0.72;
  2499. }
  2500.  
  2501. /* notification item hover */
  2502. [class*="_notificationItem_"]:hover {
  2503. background:
  2504. radial-gradient(circle at 18% 18%, rgba(216, 200, 167, 0.12), transparent 34%),
  2505. linear-gradient(
  2506. 135deg,
  2507. rgba(34, 43, 27, 0.82),
  2508. rgba(23, 32, 21, 0.64) 48%,
  2509. rgba(46, 38, 25, 0.46)
  2510. ) !important;
  2511. border-color: rgba(184, 155, 94, 0.36) !important;
  2512. box-shadow:
  2513. inset 0 1px 0 rgba(255, 255, 255, 0.12),
  2514. inset 0 -12px 18px rgba(0, 0, 0, 0.16),
  2515. 0 8px 18px rgba(0, 0, 0, 0.28),
  2516. 0 0 14px rgba(184, 155, 94, 0.12) !important;
  2517. filter: saturate(1.02);
  2518. transform: translateX(3px) translateY(-1px);
  2519. }
  2520.  
  2521. /* content */
  2522. [class*="_contentWrapper_"],
  2523. [class*="_notificationBody_"] {
  2524. position: relative;
  2525. z-index: 2;
  2526. font-family: Georgia, 'Times New Roman', serif;
  2527. }
  2528.  
  2529. /* unread indicator */
  2530. [class*="Indicator_"] {
  2531. width: 4px;
  2532. border-radius: 999px;
  2533. background:
  2534. linear-gradient(
  2535. 180deg,
  2536. #8f9f78,
  2537. #d6bf82,
  2538. #7b5a31
  2539. ) !important;
  2540. box-shadow:
  2541. 0 0 8px rgba(184, 155, 94, 0.30),
  2542. 0 0 14px rgba(143, 159, 120, 0.10);
  2543. }
  2544.  
  2545. /* notification title */
  2546. [class*="_notificationTitle_"],
  2547. [class*="_subject_"] {
  2548. font-family: Georgia, 'Times New Roman', serif;
  2549. color: rgba(230, 215, 185, 0.96) !important;
  2550. font-size: 0.98rem;
  2551. font-weight: 900;
  2552. letter-spacing: 0.035em;
  2553. text-shadow:
  2554. 0 1px 2px rgba(0, 0, 0, 0.78),
  2555. 0 0 8px rgba(184, 155, 94, 0.12);
  2556. }
  2557.  
  2558. /* notification message */
  2559. [class*="_notificationMessage_"],
  2560. [class*="_body_"] {
  2561. color: rgba(216, 200, 167, 0.72) !important;
  2562. font-size: 0.84rem;
  2563. font-family: Georgia, 'Times New Roman', serif;
  2564. line-height: 1.35;
  2565. text-shadow:
  2566. 0 1px 2px rgba(0, 0, 0, 0.62);
  2567. width: auto;
  2568. height: auto;
  2569. max-width: 178px;
  2570. max-height: 110px;
  2571. overflow: hidden;
  2572. }
  2573.  
  2574. /* timestamp */
  2575. [class*="_notificationTime_"],
  2576. [class*="_timestamp_"] {
  2577. font-size: 0.72rem;
  2578. font-family: Georgia, 'Times New Roman', serif;
  2579. color: rgba(216, 200, 167, 0.52) !important;
  2580. opacity: 0.85;
  2581. letter-spacing: 0.03em;
  2582. display: none;
  2583. }
  2584.  
  2585. /* load more */
  2586. [class*="_loadMoreButton_"] {
  2587. position: relative;
  2588. z-index: 2;
  2589. font-family: Georgia, 'Times New Roman', serif;
  2590. background:
  2591. linear-gradient(
  2592. 135deg,
  2593. rgba(184, 155, 94, 0.14),
  2594. rgba(87, 111, 73, 0.08),
  2595. rgba(8, 11, 7, 0.18)
  2596. ) !important;
  2597. color: rgba(239, 230, 208, 0.94) !important;
  2598. border-top: 1px solid rgba(216, 200, 167, 0.18) !important;
  2599. text-transform: uppercase;
  2600. letter-spacing: 0.06em;
  2601. transition:
  2602. background 220ms ease,
  2603. color 220ms ease,
  2604. box-shadow 220ms ease;
  2605. }
  2606.  
  2607. /* load more hover */
  2608. [class*="_loadMoreButton_"]:hover {
  2609. background:
  2610. linear-gradient(
  2611. 135deg,
  2612. rgba(184, 155, 94, 0.22),
  2613. rgba(87, 111, 73, 0.12),
  2614. rgba(8, 11, 7, 0.22)
  2615. ) !important;
  2616. color: #fff4da !important;
  2617. box-shadow:
  2618. 0 0 14px rgba(184, 155, 94, 0.10);
  2619. }
  2620.  
  2621. /* notification icon container */
  2622. [class*="_notificationIconContainer_"] {
  2623. position: relative;
  2624. background:
  2625. radial-gradient(circle at 30% 20%, rgba(216, 200, 167, 0.16), transparent 32%),
  2626. linear-gradient(
  2627. 145deg,
  2628. rgba(34, 43, 27, 0.90),
  2629. rgba(8, 11, 7, 0.92)
  2630. ) !important;
  2631. border: 1px solid rgba(184, 155, 94, 0.32);
  2632. border-radius: 16px;
  2633. padding: 5px;
  2634. box-shadow:
  2635. inset 0 1px 0 rgba(255, 255, 255, 0.10),
  2636. 0 4px 10px rgba(0, 0, 0, 0.18),
  2637. 0 0 8px rgba(184, 155, 94, 0.10);
  2638. }
  2639.  
  2640. /* notification icons */
  2641. [class*="_notificationIconContainer_"] svg {
  2642. color: rgba(216, 200, 167, 0.90) !important;
  2643. filter:
  2644. drop-shadow(0 1px 1px rgba(0, 0, 0, 0.62))
  2645. drop-shadow(0 0 5px rgba(184, 155, 94, 0.10));
  2646. }
  2647.  
  2648. /* info icon */
  2649. [class*="_iconInfo_"] {
  2650. background:
  2651. linear-gradient(
  2652. 145deg,
  2653. rgba(184, 155, 94, 0.18),
  2654. rgba(46, 38, 25, 0.40)
  2655. ) !important;
  2656. color: #d6bf82 !important;
  2657. }
  2658.  
  2659. /* warning icon */
  2660. [class*="_iconWarning_"] {
  2661. background:
  2662. linear-gradient(
  2663. 145deg,
  2664. rgba(255, 240, 189, 0.16),
  2665. rgba(70, 48, 25, 0.36)
  2666. ) !important;
  2667. color: #fff0bd !important;
  2668. }
  2669.  
  2670. /* error icon */
  2671. [class*="_iconError_"] {
  2672. background:
  2673. linear-gradient(
  2674. 145deg,
  2675. rgba(122, 48, 37, 0.28),
  2676. rgba(67, 24, 18, 0.46)
  2677. ) !important;
  2678. color: #d68f82 !important;
  2679. }
  2680.  
  2681. /* success icon */
  2682. [class*="_iconSuccess_"] {
  2683. background:
  2684. linear-gradient(
  2685. 145deg,
  2686. rgba(143, 159, 120, 0.24),
  2687. rgba(34, 43, 27, 0.44)
  2688. ) !important;
  2689. color: #c8d4a1 !important;
  2690. }
  2691.  
  2692. /* character avatar */
  2693. [class*="_characterAvatar_"] {
  2694. position: relative;
  2695. border-radius: 16px;
  2696. overflow: hidden;
  2697. width: 100%;
  2698. height: 100%;
  2699. object-fit: cover;
  2700. filter:
  2701. brightness(0.82)
  2702. contrast(0.98)
  2703. saturate(0.82)
  2704. sepia(0.10);
  2705. transition: filter 220ms ease;
  2706. }
  2707.  
  2708. /* character avatar border */
  2709. [class*="_characterAvatar_"]::before {
  2710. content: "";
  2711. position: absolute;
  2712. inset: 0;
  2713. border: 1px solid rgba(184, 155, 94, 0.32);
  2714. border-radius: 16px;
  2715. pointer-events: none;
  2716. z-index: 2;
  2717. }
  2718.  
  2719. /* character avatar vignette */
  2720. [class*="_characterAvatar_"]::after {
  2721. content: "";
  2722. position: absolute;
  2723. inset: 0;
  2724. background:
  2725. radial-gradient(circle at center, transparent 46%, rgba(8, 11, 7, 0.58) 100%);
  2726. z-index: 1;
  2727. pointer-events: none;
  2728. }
  2729.  
  2730. /* user avatar */
  2731. [class*="_userAvatar_"] {
  2732. border: 2px solid rgba(184, 155, 94, 0.64) !important;
  2733. box-shadow:
  2734. 0 0 8px rgba(184, 155, 94, 0.22),
  2735. 0 0 12px rgba(87, 111, 73, 0.12) !important;
  2736. border-radius: 50%;
  2737. }
  2738.  
  2739. /* user avatar hover */
  2740. [class*="_notificationItem_"]:has([class*="_avatarSection_"]):hover [class*="_userAvatar_"] {
  2741. border-color: rgba(143, 159, 120, 0.74) !important;
  2742. box-shadow:
  2743. 0 0 10px rgba(143, 159, 120, 0.24),
  2744. 0 0 16px rgba(184, 155, 94, 0.14) !important;
  2745. }
  2746.  
  2747. /* unread content */
  2748. [class*="_contentWrapperUnread_"] {
  2749. background:
  2750. linear-gradient(
  2751. 135deg,
  2752. rgba(184, 155, 94, 0.12),
  2753. rgba(87, 111, 73, 0.08),
  2754. rgba(8, 11, 7, 0.16)
  2755. ) !important;
  2756. box-shadow:
  2757. 0 0 10px rgba(184, 155, 94, 0.10),
  2758. inset 3px 0 0 rgba(184, 155, 94, 0.54) !important;
  2759. border-left: 0 !important;
  2760. border-radius: 14px;
  2761. }
  2762.  
  2763. /* unread subject */
  2764. [class*="_subjectUnread_"] {
  2765. background: unset !important;
  2766. -webkit-background-clip: unset;
  2767. -webkit-text-fill-color: unset;
  2768. background-clip: unset;
  2769. color: rgba(230, 215, 185, 0.98) !important;
  2770. }
  2771.  
  2772. /* highlighted username */
  2773. ._highlightUsername_di476_159 {
  2774. color: #d6bf82;
  2775. text-shadow:
  2776. 0 1px 2px rgba(0, 0, 0, 0.76),
  2777. 0 0 8px rgba(184, 155, 94, 0.24);
  2778. }
  2779.  
  2780. /* notification button hover cleanup */
  2781. ._notificationsButton_wpa9q_7:hover {
  2782. background: transparent;
  2783. }
  2784.  
  2785. /* notification button container */
  2786. ._notificationsContainer_wpa9q_2 {
  2787. position: relative;
  2788. border-radius: 999px;
  2789. isolation: isolate;
  2790. transition:
  2791. transform 220ms ease,
  2792. filter 220ms ease;
  2793. }
  2794.  
  2795. /* extra icon bubble */
  2796. .css-1l8kxqv {
  2797. position: relative;
  2798. border-radius: 999px;
  2799. isolation: isolate;
  2800. }
  2801.  
  2802. /* extra icon glow */
  2803. .css-1l8kxqv::before {
  2804. content: "";
  2805. position: absolute;
  2806. inset: -5px;
  2807. z-index: -1;
  2808. border-radius: 999px;
  2809. background:
  2810. radial-gradient(circle at 35% 25%, rgba(246, 237, 218, 0.20), transparent 28%),
  2811. linear-gradient(
  2812. 135deg,
  2813. rgba(184, 155, 94, 0.22),
  2814. rgba(87, 111, 73, 0.16),
  2815. rgba(46, 38, 25, 0.14)
  2816. );
  2817. border: 1px solid rgba(216, 200, 167, 0.24);
  2818. opacity: 0;
  2819. transform: scale(0.72);
  2820. box-shadow:
  2821. 0 0 14px rgba(184, 155, 94, 0.12),
  2822. inset 0 1px 0 rgba(255, 255, 255, 0.12);
  2823. pointer-events: none;
  2824. transition:
  2825. opacity 220ms ease,
  2826. transform 220ms ease;
  2827. }
  2828.  
  2829. /* extra icon ring */
  2830. .css-1l8kxqv::after {
  2831. content: "";
  2832. position: absolute;
  2833. inset: -9px;
  2834. z-index: -2;
  2835. border-radius: 999px;
  2836. border: 1px solid rgba(184, 155, 94, 0.30);
  2837. opacity: 0;
  2838. transform: scale(0.5);
  2839. pointer-events: none;
  2840. }
  2841.  
  2842. /* extra icon hover glow */
  2843. .css-1l8kxqv:hover::before {
  2844. opacity: 1;
  2845. transform: scale(1);
  2846. }
  2847.  
  2848. /* extra icon hover ring */
  2849. .css-1l8kxqv:hover::after {
  2850. animation: notification-cabinet-ripple 900ms ease-out infinite;
  2851. }
  2852.  
  2853. /* extra icon */
  2854. .css-1l8kxqv svg {
  2855. color: rgba(216, 200, 167, 0.88) !important;
  2856. filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.72));
  2857. transition:
  2858. color 220ms ease,
  2859. filter 220ms ease;
  2860. }
  2861.  
  2862. /* extra icon hover */
  2863. .css-1l8kxqv:hover svg {
  2864. color: #fff4da !important;
  2865. filter:
  2866. drop-shadow(0 1px 1px rgba(0, 0, 0, 0.72))
  2867. drop-shadow(0 0 8px rgba(184, 155, 94, 0.26));
  2868. }
  2869. </style>
  2870.  
  2871.  
  2872.  
  2873. <!-- Shop ticket -->
  2874. <details class="shop-ticket">
  2875. <summary class="ticket-tab">Shop Notice</summary>
  2876. <div class="ticket-note">Requests are simmering. Leave something strange on the counter.</div>
  2877. </details>
  2878.  
  2879. <!-- Shopfront board -->
  2880. <div class="apothecary-window">
  2881. <img src="https://files.catbox.moe/cr6okg.png" alt="apothecary banner" draggable="false">
  2882. <div class="window-card">
  2883. <b>Moonlit Apothecary</b>
  2884. <span>A little cabinet of stories, bottles, warnings, pretty monsters, and things that should not be opened after midnight.</span>
  2885. </div>
  2886. <div class="window-pins">
  2887. <div class="pin-note"><b>Now Brewing</b><span>Requests, rewrites, and odd little edits.</span></div>
  2888. <div class="pin-note"><b>Shelf Note</b><span>Slow burn, dark fantasy, lore-heavy worlds.</span></div>
  2889. <div class="pin-note"><b>Careful</b><span>Some bottles bite when opened.</span></div>
  2890. </div>
  2891. </div>
  2892.  
  2893. <!-- Portrait -->
  2894. <aside class="portrait-cabinet">
  2895. <div class="cabinet-label">Shopkeeper</div>
  2896. <img src="https://files.catbox.moe/p3a5h8.png" alt="character" draggable="false">
  2897. </aside>
  2898.  
  2899. <!-- About -->
  2900. <section class="counter-note">
  2901. <div class="board-title">
  2902. <span class="board-mark">❦</span>
  2903. <span class="board-label">The Counter</span>
  2904. </div>
  2905. <p>Welcome in. Replace this with a short introduction, like 'who you are', 'what you write and are planning to write', 'what people should know before wandering too far into your shelves'.</p>
  2906. <p>Use this second note for request status, favorite tropes, schedules, or the kinds of stories you usually keep bottled and want to let out. The tags below are replaceable and represent what you commonly write.</p>
  2907. <div class="ingredient-tags">
  2908. <span>Slow Burn</span>
  2909. <span>Dark Fantasy</span>
  2910. <span>Lore Heavy</span>
  2911. <span>Pretty Monsters</span>
  2912. <span>Fae Politics</span>
  2913. <span>Unhinged Men</span>
  2914. </div>
  2915. </section>
  2916.  
  2917. <!-- Series -->
  2918. <section class="tincture-rack">
  2919. <div class="board-title">
  2920. <span class="board-mark">☽</span>
  2921. <span class="board-label">Bottled Worlds</span>
  2922. </div>
  2923. <div class="bottle-row">
  2924. <a class="bottle-card" href="LINK HERE">
  2925. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2926. <b>Series One</b>
  2927. <p>A small description for the first world, arc, or collection.</p>
  2928. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2929. </a>
  2930. <a class="bottle-card" href="LINK HERE">
  2931. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2932. <b>Series Two</b>
  2933. <p>A small description for the second world, arc, or collection.</p>
  2934. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2935. </a>
  2936. <a class="bottle-card" href="LINK HERE">
  2937. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2938. <b>Series Three</b>
  2939. <p>A small description for the third world, arc, or collection.</p>
  2940. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2941. </a>
  2942. <a class="bottle-card" href="LINK HERE">
  2943. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2944. <b>Series Four</b>
  2945. <p>A small description for the fourth world, arc, or collection.</p>
  2946. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2947. </a>
  2948. <a class="bottle-card" href="LINK HERE">
  2949. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2950. <b>Series Five</b>
  2951. <p>A small description for the fifth world, arc, or collection.</p>
  2952. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2953. </a>
  2954. <a class="bottle-card" href="LINK HERE">
  2955. <img src="https://files.catbox.moe/bwjkh7.jpg" alt="series" draggable="false">
  2956. <b>Series Six</b>
  2957. <p>A small description for the sixth world, arc, or collection.</p>
  2958. <div class="mini-tags"><span>tag</span><span>tag</span></div>
  2959. </a>
  2960. </div>
  2961. </section>
  2962.  
  2963. <!-- Familiar tab -->
  2964. <section class="familiars-tray">
  2965. <div class="board-title">
  2966. <span class="board-mark">✧</span>
  2967. <span class="board-label">Familiar Tab</span>
  2968. </div>
  2969. <div class="familiars-scroll">
  2970. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar One</span></a>
  2971. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar Two</span></a>
  2972. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar Three</span></a>
  2973. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar Four</span></a>
  2974. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar Five</span></a>
  2975. <a class="familiars" href="LINK HERE"><img src="https://files.catbox.moe/v9d8qr.png" alt="familiar" draggable="false"><span>Familiar Six</span></a>
  2976. </div>
  2977. </section>
  2978.  
  2979. <!-- Links -->
  2980. <section class="calling-cards">
  2981. <div class="board-title">
  2982. <span class="board-mark">⌑</span>
  2983. <span class="board-label">Calling Cards</span>
  2984. </div>
  2985. <div class="card-link-grid">
  2986. <a class="card-link" href="LINK HERE" target="_blank" rel="noopener noreferrer"><b>Discord Server</b><span>enter quietly</span></a>
  2987. <a class="card-link" href="LINK HERE" target="_blank" rel="noopener noreferrer"><b>Carrd</b><span>read the labels</span></a>
  2988. <a class="card-link" href="LINK HERE" target="_blank" rel="noopener noreferrer"><b>Request Form</b><span>leave a note</span></a>
  2989. </div>
  2990.  
  2991. </section>
  2992.  
  2993. <!-- Ledger -->
  2994. <div class="ledger-book">
  2995. <details class="ledger-page">
  2996. <summary class="ledger-tab">House Rules</summary>
  2997. <div class="ledger-inside">
  2998. <p>Write your rules here or change the category to fit your needs.</p>
  2999. <p>Add any disclaimers or boundaries you want Patrons to see.</p>
  3000. </div>
  3001. </details>
  3002.  
  3003. <details class="ledger-page">
  3004. <summary class="ledger-tab">Creations</summary>
  3005. <div class="ledger-inside">
  3006. <p>Notes about your bots, stories, lore, characters, and what you usually make. Everything is editable for your needs.</p>
  3007. </div>
  3008. </details>
  3009. </div>
  3010.  
  3011. <!-- Credit -->
  3012. <div class="template-credit">
  3013. CSS made by <a href="https://janitorai.com/profiles/acd0fd4c-3410-4599-a987-a84c9eb0547d_profile-of-cellophane" target="_blank" rel="noopener noreferrer">Cellophane</a>
  3014. </div>
  3015.  
  3016. <style>
  3017. /* Card list */
  3018. .pp-cc-list-container {
  3019. display: flex;
  3020. flex-direction: row;
  3021. flex-wrap: wrap;
  3022. justify-content: center;
  3023. align-items: flex-start;
  3024. gap: 2rem;
  3025. padding: 1.5rem 0;
  3026. }
  3027.  
  3028. /* Outer card */
  3029. .pp-cc-wrapper {
  3030. width: 285px;
  3031. height: 430px;
  3032. position: relative;
  3033. font-family: Georgia, 'Times New Roman', serif;
  3034. perspective: 1000px;
  3035. background: transparent;
  3036. }
  3037. .pp-cc-wrapper,
  3038. .pp-cc-wrapper > *:not(.profile-character-card-stack) {
  3039. background: transparent !important;
  3040. }
  3041. .pp-cc-wrapper *,
  3042. .profile-character-card-stack * {
  3043. box-sizing: border-box;
  3044. }
  3045.  
  3046. /* Remove default card noise */
  3047. .css-mwqlii:hover,
  3048. .css-13wmn96:hover,
  3049. .css-1xjyfw9,
  3050. .css-y7b0z0 {
  3051. box-shadow: none;
  3052. background: transparent;
  3053. }
  3054.  
  3055. /* Hides tokens, star/starline, and creator name */
  3056. .pp-cc-tokens-count,
  3057. .profile-character-card-stack > a:nth-of-type(2),
  3058. .pp-cc-star-line,
  3059. .css-1wqmh16,
  3060. .css-nip9dx,
  3061. .css-xrg4vd,
  3062. .css-5v5qgx,
  3063. .css-1awld45,
  3064. .css-1cui3us {
  3065. display: none !important;
  3066. }
  3067.  
  3068. /* Main card shell */
  3069. .profile-character-card-stack {
  3070. position: relative;
  3071. width: 100%;
  3072. height: 100%;
  3073. overflow: visible;
  3074. transform-style: preserve-3d;
  3075. transition:
  3076. transform 280ms ease,
  3077. box-shadow 280ms ease,
  3078. border-color 280ms ease;
  3079. }
  3080. .profile-character-card-stack:hover {
  3081. transform: translateY(-7px);
  3082. }
  3083.  
  3084. /* Bottle neck */
  3085. .profile-character-card-stack::before {
  3086. content: "";
  3087. position: absolute;
  3088. left: 50%;
  3089. top: 47px;
  3090. width: 58px;
  3091. height: 58px;
  3092. z-index: 9;
  3093. border-radius: 16px 16px 8px 8px;
  3094. box-shadow:
  3095. inset 0 0 14px rgba(184, 155, 94, 0.10),
  3096. 0 10px 22px rgba(0, 0, 0, 0.10);
  3097. transform: translateX(-50%);
  3098. }
  3099.  
  3100. /* Cork */
  3101. .profile-character-card-stack::after {
  3102. content: "";
  3103. position: absolute;
  3104. left: 50%;
  3105. top: 40px;
  3106. width: 42px;
  3107. height: 24px;
  3108. z-index: 9;
  3109. border-radius: 8px 8px 4px 4px;
  3110. background:
  3111. radial-gradient(circle at 20% 32%, rgba(48, 29, 14, 0.48) 0 2px, transparent 3px),
  3112. radial-gradient(circle at 74% 30%, rgba(54, 33, 16, 0.42) 0 1.5px, transparent 2.5px),
  3113. radial-gradient(circle at 50% 74%, rgba(69, 42, 20, 0.44) 0 2px, transparent 3px),
  3114. repeating-linear-gradient(
  3115. 90deg,
  3116. rgba(61, 37, 18, 0.20) 0 2px,
  3117. rgba(137, 93, 48, 0.15) 2px 5px,
  3118. rgba(79, 48, 24, 0.20) 5px 7px
  3119. ),
  3120. linear-gradient(
  3121. 180deg,
  3122. #a47a43 0%,
  3123. #76502b 52%,
  3124. #4d3019 100%
  3125. );
  3126. border: 1px solid rgba(246, 237, 218, 0.22);
  3127. box-shadow:
  3128. 0 8px 16px rgba(0, 0, 0, 0.34),
  3129. inset 0 2px 0 rgba(255, 236, 190, 0.24),
  3130. inset 0 -5px 8px rgba(58, 34, 17, 0.34),
  3131. inset 6px 0 10px rgba(255, 232, 178, 0.08),
  3132. inset -6px 0 10px rgba(45, 27, 14, 0.22);
  3133. transform: translateX(-50%);
  3134. pointer-events: none;
  3135. }
  3136.  
  3137. /* Clickable layer */
  3138. .profile-character-card-stack > a:nth-of-type(1) {
  3139. position: absolute;
  3140. inset: 0;
  3141. display: block;
  3142. background: transparent;
  3143. border: none;
  3144. color: transparent;
  3145. text-decoration: none;
  3146. }
  3147.  
  3148. /* Inner cabinet layer */
  3149. .profile-character-card-stack-link-component-box {
  3150. position: absolute;
  3151. inset: 12px;
  3152. z-index: 30;
  3153. pointer-events: none;
  3154. }
  3155.  
  3156. /* Small series/bottle label */
  3157. .profile-character-card-stack-link-component-box::after {
  3158. content: "Unknown Contents";
  3159. position: absolute;
  3160. top: 23.5pc;
  3161. left: 2.5%;
  3162. max-width: calc(84% - 28px);
  3163. padding: 5px 5px;
  3164. color: #172015;
  3165. background: rgba(216, 200, 167, 0.92);
  3166. border: 1px solid rgba(184, 155, 94, 0.58);
  3167. box-shadow:
  3168. 0 8px 16px rgba(0, 0, 0, 0.28),
  3169. inset 0 1px 0 rgba(255, 255, 255, 0.32);
  3170. font-family: Georgia, 'Times New Roman', serif;
  3171. font-size: 0.6rem;
  3172. font-weight: 800;
  3173. letter-spacing: 0.1em;
  3174. line-height: 1;
  3175. text-transform: uppercase;
  3176. opacity: 0.94;
  3177. visibility: visible;
  3178. border-radius: 10px;
  3179. transition:
  3180. opacity 220ms ease,
  3181. visibility 220ms ease;
  3182. }
  3183.  
  3184. /* Hide front labels while bottle flips */
  3185. .profile-character-card-stack:hover .pp-cc-name,
  3186. .profile-character-card-stack:hover .profile-character-card-stack-link-component-box::after,
  3187. .profile-character-card-stack:hover .profile-character-card-stats-box {
  3188. opacity: 0;
  3189. visibility: hidden;
  3190. }
  3191.  
  3192. /* Round potion bottle avatar */
  3193. .profile-character-card-avatar-aspect-ratio {
  3194. position: absolute;
  3195. left: 2px;
  3196. top: 83px;
  3197. width: 280px;
  3198. height: 300px;
  3199. z-index: 8;
  3200. overflow: hidden;
  3201. border-radius: 50% 50% 44% 44%;
  3202. border: 1px solid rgba(216, 200, 167, 0.50);
  3203. backface-visibility: visible;
  3204. transform-style: preserve-3d;
  3205. transform: rotateY(0deg);
  3206. transition:
  3207. transform 620ms cubic-bezier(.2, .8, .2, 1),
  3208. filter 420ms ease;
  3209. }
  3210.  
  3211. /* Bottle body flips on hover */
  3212. .profile-character-card-stack:hover .profile-character-card-avatar-aspect-ratio {
  3213. transform: rotateY(180deg);
  3214. }
  3215.  
  3216. /* Glass shine */
  3217. .profile-character-card-avatar-aspect-ratio::before {
  3218. content: "";
  3219. position: absolute;
  3220. top: -15px;
  3221. left: 190px;
  3222. width: 9px;
  3223. height: 134px;
  3224. background:
  3225. linear-gradient(
  3226. 180deg,
  3227. rgba(255, 255, 255, 0.38),
  3228. rgba(255, 255, 255, 0.26) 28%,
  3229. rgba(255, 255, 255, 0.38) 62%,
  3230. rgba(255, 255, 255, 0)
  3231. );
  3232. box-shadow:
  3233. 0 0 8px rgba(255, 255, 255, 0.38),
  3234. 0 0 18px rgba(216, 200, 167, 0.18);
  3235. filter: blur(0.35px);
  3236. pointer-events: none;
  3237. z-index: 12;
  3238. transform: rotate(24deg);
  3239. transform-origin: top center;
  3240. opacity: 0.6;
  3241. backface-visibility: visible;
  3242. }
  3243.  
  3244. /* Inner glass */
  3245. .profile-character-card-avatar-aspect-ratio::after {
  3246. content: "";
  3247. position: absolute;
  3248. inset: 6px;
  3249. z-index: 5;
  3250. pointer-events: none;
  3251. border-radius: inherit;
  3252. border: 1px solid rgba(216, 200, 167, 0.40);
  3253. box-shadow:
  3254. inset 0 0 0 1px rgba(255, 232, 170, 0.12),
  3255. 0 0 6px rgba(212, 175, 55, 0.10);
  3256. backface-visibility: visible;
  3257. }
  3258.  
  3259. /* Avatar image */
  3260. .profile-character-card-avatar-aspect-ratio > img {
  3261. position: absolute;
  3262. left: 50%;
  3263. top: 50%;
  3264. z-index: 2;
  3265. width: 270px;
  3266. height: 290px;
  3267. border-radius: 50%;
  3268. filter:
  3269. brightness(0.72)
  3270. saturate(0.72)
  3271. sepia(0.10);
  3272. transform: translate(-50%, -50%);
  3273. backface-visibility: hidden;
  3274. mask-image: radial-gradient(circle, #000 68%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
  3275. -webkit-mask-image: radial-gradient(circle, #000 68%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
  3276. transition:
  3277. opacity 180ms ease 260ms,
  3278. filter 420ms ease,
  3279. transform 420ms ease;
  3280. }
  3281.  
  3282. .profile-character-card-stack:hover .profile-character-card-avatar-aspect-ratio > img {
  3283. opacity: 0;
  3284. }
  3285.  
  3286. /* Keep avatar internals rounded */
  3287. .profile-character-card-avatar-aspect-ratio .chakra-aspect-ratio,
  3288. .profile-character-card-avatar-aspect-ratio > div {
  3289. border-radius: inherit;
  3290. }
  3291.  
  3292. /* Card Description Box */
  3293. .profile-character-card-description-box {
  3294. position: absolute;
  3295. left: 3px;
  3296. top: 85px;
  3297. height: 290px;
  3298. width: 278px;
  3299. z-index: 32;
  3300. overflow: hidden;
  3301. padding: 3.1rem 1.15rem 2.65rem;
  3302. box-sizing: border-box;
  3303. border-radius: 50px 50px;
  3304. border: 1px solid rgba(184, 155, 94, 0.62);
  3305. background:
  3306. radial-gradient(
  3307. circle at 50% 28%,
  3308. rgba(255, 244, 210, 0.96),
  3309. rgba(216, 200, 167, 0.90) 58%,
  3310. rgba(176, 145, 86, 0.88) 100%
  3311. );
  3312. box-shadow:
  3313. inset 0 0 28px rgba(92, 61, 28, 0.22),
  3314. inset 0 1px 0 rgba(255, 255, 255, 0.46),
  3315. 0 12px 26px rgba(0, 0, 0, 0.38);
  3316. color: #172015;
  3317. text-shadow: none;
  3318. pointer-events: none;
  3319. opacity: 0;
  3320. visibility: hidden;
  3321. transform: scaleX(0.72);
  3322. transform-origin: center;
  3323. transition:
  3324. opacity 180ms ease,
  3325. visibility 180ms ease,
  3326. transform 220ms ease;
  3327. }
  3328.  
  3329. .profile-character-card-stack:hover .profile-character-card-description-box {
  3330. opacity: 0.96;
  3331. visibility: visible;
  3332. transform: scaleX(1);
  3333. transition: opacity 220ms ease 430ms,
  3334. visibility 220ms ease 30ms,
  3335. transform 100ms ease 430ms;
  3336. }
  3337.  
  3338. /* Bottle label title */
  3339. .profile-character-card-description-box::before {
  3340. content: "Warning Label";
  3341. position: absolute;
  3342. top: 18px;
  3343. left: 24px;
  3344. right: 24px;
  3345. padding: 0.42rem 0.65rem;
  3346. color: #d6bf82;
  3347. background:
  3348. linear-gradient(90deg, rgba(23, 32, 21, 0.98), rgba(8, 11, 7, 0.98));
  3349. border-bottom: 1px dashed rgba(184, 155, 94, 0.38);
  3350. border-radius: 999px;
  3351. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  3352. font-size: 0.58rem;
  3353. font-weight: 800;
  3354. letter-spacing: 0.17em;
  3355. text-align: center;
  3356. text-transform: uppercase;
  3357. }
  3358. .profile-character-card-description-box::after {
  3359. content: "";
  3360. position: absolute;
  3361. left: 38px;
  3362. right: 38px;
  3363. top: 52px;
  3364. height: 1px;
  3365. background: linear-gradient(90deg, transparent, rgba(69, 48, 25, 0.28), transparent);
  3366. }
  3367.  
  3368. /* Bio text */
  3369. .profile-character-card-description-box * {
  3370. color: #172015;
  3371. text-shadow: none;
  3372. font-family: Georgia, 'Times New Roman', serif;
  3373. pointer-events: none;
  3374. }
  3375. .pp-cc-description {
  3376. position: absolute;
  3377. top: 70px;
  3378. left: 26px;
  3379. right: 26px;
  3380. height: 75px;
  3381. overflow: hidden;
  3382. font-size: 0.72rem;
  3383. line-height: 1.34;
  3384. text-align: center;
  3385. }
  3386. .pp-cc-description > *:not(:first-of-type) {
  3387. display: none;
  3388. }
  3389. .css-ua3v09 {
  3390. font-size: 0.72rem;
  3391. line-height: 1.34;
  3392. }
  3393.  
  3394. /* Name parchment ribbon */
  3395. .pp-cc-name {
  3396. position: absolute;
  3397. top: 20pc;
  3398. left: -18px;
  3399. width: 292px;
  3400. z-index: 24;
  3401. padding: 0.62rem 1.8rem;
  3402. color: #172015;
  3403. background:
  3404. linear-gradient(
  3405. 180deg,
  3406. rgba(247, 238, 215, 0.98),
  3407. rgba(216, 200, 167, 0.96)
  3408. );
  3409. border: none;
  3410. border-radius: 0;
  3411. clip-path: polygon(
  3412. 0 0,
  3413. 292px 0,
  3414. 276px 50%,
  3415. 292px 100%,
  3416. 0 100%,
  3417. 16px 50%
  3418. );
  3419. filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35));
  3420. font-family: Georgia, 'Times New Roman', serif;
  3421. font-size: 0.76rem;
  3422. font-weight: 800;
  3423. line-height: 1.1;
  3424. text-align: center;
  3425. letter-spacing: 0.13em;
  3426. text-transform: uppercase;
  3427. text-shadow: none;
  3428. white-space: nowrap;
  3429. overflow: hidden;
  3430. text-overflow: ellipsis;
  3431. pointer-events: none;
  3432. transition:
  3433. opacity 220ms ease,
  3434. visibility 220ms ease;
  3435. }
  3436.  
  3437. /* Stats / chat count */
  3438. .profile-character-card-stats-box {
  3439. position: absolute;
  3440. right: 20px;
  3441. top: 24pc;
  3442. z-index: 22;
  3443. display: flex;
  3444. justify-content: center;
  3445. pointer-events: none;
  3446. transition:
  3447. opacity 220ms ease,
  3448. visibility 220ms ease;
  3449. }
  3450. .profile-character-card-stats-box svg {
  3451. display: none;
  3452. }
  3453. .pp-cc-ribbon {
  3454. position: relative;
  3455. inset: unset;
  3456. filter: none;
  3457. overflow: visible;
  3458. }
  3459. .pp-cc-ribbon-wrap {
  3460. clip-path: none;
  3461. overflow: visible;
  3462. background: transparent;
  3463. padding: 0;
  3464. box-shadow: none;
  3465. }
  3466. .pp-cc-chats {
  3467. display: inline-flex;
  3468. align-items: center;
  3469. gap: 0.28rem;
  3470. width: fit-content;
  3471. padding: 5px 9px;
  3472. border-radius: 999px;
  3473. color: #172015;
  3474. background: rgba(216, 200, 167, 0.94);
  3475. border: 1px solid rgba(184, 155, 94, 0.58);
  3476. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  3477. font-size: 0.58rem;
  3478. font-weight: 800;
  3479. letter-spacing: 0.08em;
  3480. text-transform: uppercase;
  3481. text-shadow: none;
  3482. }
  3483. .pp-cc-chats::before {
  3484. content: "❧";
  3485. margin-right: 0.2rem;
  3486. }
  3487. .pp-cc-public-chats {
  3488. display: none;
  3489. }
  3490.  
  3491. /* Bottle-shaped back label: tags */
  3492. .pp-cc-tags {
  3493. position: absolute;
  3494. top: 240px;
  3495. z-index: 33;
  3496. width: 282px;
  3497. height: 155px;
  3498. overflow-x: hidden;
  3499. overflow-y: auto;
  3500. padding: 14px 8px 18px;
  3501. box-sizing: border-box;
  3502. border-radius: 0 0 50px 50px;
  3503. background:
  3504. linear-gradient(
  3505. 90deg,
  3506. rgba(8, 11, 7, 0.94),
  3507. rgba(23, 32, 21, 0.94)
  3508. );
  3509. pointer-events: auto;
  3510. opacity: 0;
  3511. visibility: hidden;
  3512. transform: scaleX(0.72);
  3513. transform-origin: center;
  3514. transition:
  3515. opacity 180ms ease,
  3516. visibility 180ms ease,
  3517. transform 220ms ease;
  3518. }
  3519. .profile-character-card-stack:hover .pp-cc-tags {
  3520. opacity: 1;
  3521. visibility: visible;
  3522. transform: scaleX(1);
  3523. transition:
  3524. opacity 220ms ease 430ms,
  3525. visibility 220ms ease 430ms,
  3526. transform 300ms ease 430ms;
  3527. }
  3528. .pp-cc-tags::-webkit-scrollbar {
  3529. width: 4px;
  3530. }
  3531. .pp-cc-tags::-webkit-scrollbar-thumb {
  3532. background: rgba(216, 200, 167, 0.30);
  3533. border-radius: 999px;
  3534. }
  3535. /* Main tag grid */
  3536. .css-k1urot {
  3537. display: grid;
  3538. grid-template-columns: repeat(3, minmax(0, 1fr));
  3539. gap: 6px;
  3540. width: 100%;
  3541. align-content: start;
  3542. }
  3543. /* Flatten the category wrappers so all tags share one grid */
  3544. .pp-cc-tags-wrap-regular,
  3545. .pp-cc-tags-wrap-custom {
  3546. display: contents;
  3547. }
  3548.  
  3549. /* Tag pills */
  3550. .pp-cc-tags-regular,
  3551. .pp-cc-tags-custom,
  3552. .pp-tag-limitless {
  3553. display: flex;
  3554. align-items: center;
  3555. justify-content: center;
  3556. width: 100%;
  3557. min-height: 24px;
  3558. max-width: none;
  3559. padding: 4px 6px;
  3560. border-radius: 3px;
  3561. color: #d8c8a7;
  3562. background: rgba(216, 200, 167, 0.08);
  3563. border: 1px solid rgba(216, 200, 167, 0.18);
  3564. font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  3565. font-size: 0.52rem;
  3566. font-weight: 700;
  3567. letter-spacing: 0.06em;
  3568. line-height: 1.1;
  3569. text-transform: uppercase;
  3570. text-shadow: none;
  3571. text-align: center;
  3572. white-space: nowrap;
  3573. overflow: hidden;
  3574. text-overflow: ellipsis;
  3575. }
  3576. .pp-cc-tags-wrap {
  3577. margin-top: 0px;
  3578. }
  3579. .pp-cc-tags-wrap span {
  3580. display: flex;
  3581. align-items: center;
  3582. justify-content: center;
  3583. color: #d8c8a7;
  3584. text-shadow: none;
  3585. background: transparent;
  3586. }
  3587.  
  3588. /* Hide weird native overflow/title behavior */
  3589. .pp-cc-tags-regular,
  3590. .pp-cc-tags-custom,
  3591. .pp-cc-tags-wrap span {
  3592. pointer-events: none;
  3593. }
  3594.  
  3595. /* Unknown Contents Tag replacements */
  3596. .pp-cc-wrapper:has(.pp-tag-csstest1) .profile-character-card-stack-link-component-box::after {
  3597. content: 'Series One';
  3598. color: black;
  3599. }
  3600. .pp-cc-wrapper:has(.pp-tag-csstest2) .profile-character-card-stack-link-component-box::after {
  3601. content: 'Series Two';
  3602. color: red;
  3603. }
  3604. .pp-cc-wrapper:has(.pp-tag-csstest3) .profile-character-card-stack-link-component-box::after {
  3605. content: 'Series Three';
  3606. color: blue;
  3607. }
  3608. </style>
  3609.  
  3610. <style>
  3611. /* Mobile */
  3612. @media screen and (max-width: 768px) {
  3613. .pp-uc-background,
  3614. .pp-uc-background > div {
  3615. padding: 0;
  3616. }
  3617. html,
  3618. body {
  3619. overflow-x: hidden;
  3620. overflow-y: auto;
  3621. height: auto;
  3622. min-height: 100vh;
  3623. max-width: 100vw;
  3624. -webkit-overflow-scrolling: touch;
  3625. }
  3626. body {
  3627. position: relative;
  3628. }
  3629.  
  3630. .profile-info-stack {
  3631. grid-template-columns: minmax(0, 1fr);
  3632. grid-template-areas:
  3633. "profile"
  3634. "follow"
  3635. "ticket"
  3636. "window"
  3637. "portrait"
  3638. "note"
  3639. "rack"
  3640. "familiars"
  3641. "links"
  3642. "ledger"
  3643. "credit";
  3644. gap: 12px;
  3645. padding: 10px 8px 0rem;
  3646. }
  3647.  
  3648. .profile-info-stack::after {
  3649. position: relative;
  3650. top: 5.5pc;
  3651. left: 2.5px;
  3652. width: 90%;
  3653. font-size: .5rem;
  3654. }
  3655. .profile-info-stack::before {
  3656. inset: 8px;
  3657. }
  3658.  
  3659. .profile-info-stack-inner {
  3660. left: 1pc;
  3661. }
  3662. .profile-info-hstack::before,
  3663. .profile-info-hstack::after {
  3664. top: 12px;
  3665. width: 6px;
  3666. height: 6px;
  3667. }
  3668. .profile-info-hstack::before {
  3669. left: 12px;
  3670. }
  3671. .profile-info-hstack::after {
  3672. right: 12px;
  3673. }
  3674.  
  3675. .pp-uc-followers-count {
  3676. font-size: 0.58rem !important;
  3677. }
  3678. .pp-uc-followers-count > span + span::after {
  3679. font-size: 0.58rem !important;
  3680. right: 8px;
  3681. }
  3682. .pp-uc-member-since::before {
  3683. font-size: 0.55rem !important;
  3684. }
  3685. .profile-badges {
  3686. transform: scale(0.58) !important;
  3687. transform-origin: top left;
  3688. max-width: 210px !important;
  3689. overflow-x: auto;
  3690. overflow-y: visible;
  3691. }
  3692.  
  3693. /* Follow buttons */
  3694. .profile-info-stack > div:has(.Btn),
  3695. .profile-info-stack > .css-3nlpdq {
  3696. grid-area: follow !important;
  3697. left: 3pc;
  3698. margin: 0 0 0 0.25rem !important;
  3699. padding: 10px !important;
  3700. top: 18px;
  3701. }
  3702. .profile-info-stack > div:has(.Btn) > div,
  3703. .profile-info-stack > .css-3nlpdq > div {
  3704. display: flex !important;
  3705. overflow: visible;
  3706. }
  3707. .Btn {
  3708. padding: 0.5rem 1.05rem !important;
  3709. }
  3710. .Btn > span,
  3711. .profile-uc-follow-text {
  3712. font-size: 0.68rem !important;
  3713. white-space: nowrap;
  3714. }
  3715.  
  3716. /* Shop ticket */
  3717. .shop-ticket {
  3718. position: relative;
  3719. top: auto;
  3720. right: auto;
  3721. bottom: auto;
  3722. left: auto;
  3723. width: 100%;
  3724. z-index: auto;
  3725. }
  3726. .shop-ticket::before,
  3727. .shop-ticket::after {
  3728. display: none;
  3729. }
  3730. .ticket-note {
  3731. padding: 0.72rem 0.85rem 0.9rem;
  3732. font-size: 0.82rem;
  3733. }
  3734. .ticket-note::before {
  3735. font-size: 0.52rem;
  3736. }
  3737.  
  3738. /* Shopfront board */
  3739. .apothecary-window {
  3740. min-height: 335px;
  3741. border-radius: 16px;
  3742. overflow: hidden;
  3743. }
  3744. .window-card {
  3745. left: 12px;
  3746. right: 12px;
  3747. top: 12px;
  3748. width: auto;
  3749. transform: none;
  3750. padding: 0.8rem;
  3751. z-index: 1;
  3752. }
  3753. .window-card b {
  3754. font-size: 0.95rem;
  3755. letter-spacing: 0.10em;
  3756. }
  3757. .window-card span {
  3758. font-size: 0.72rem;
  3759. line-height: 1.5;
  3760. }
  3761. .window-pins {
  3762. left: 12px;
  3763. right: 12px;
  3764. top: auto;
  3765. bottom: 12px;
  3766. width: auto;
  3767. transform: none;
  3768. gap: 0.45rem;
  3769. }
  3770. .pin-note {
  3771. min-height: 0;
  3772. padding: 0.58rem 0.65rem;
  3773. transform: none;
  3774. }
  3775. .pin-note b {
  3776. font-size: 0.62rem;
  3777. }
  3778. .pin-note span {
  3779. font-size: 0.64rem;
  3780. }
  3781.  
  3782. /* Shopkeeper */
  3783. .portrait-cabinet {
  3784. min-height: 455px;
  3785. border-radius: 16px;
  3786. overflow: hidden;
  3787. }
  3788. .portrait-cabinet img {
  3789. right: 0px;
  3790. bottom: -45px;
  3791. width: 100%;
  3792. }
  3793. .portrait-cabinet::after {
  3794. left: 16px;
  3795. right: 16px;
  3796. bottom: 14px;
  3797. font-size: 0.68rem;
  3798. }
  3799. .cabinet-label {
  3800. font-size: 0.60rem;
  3801. }
  3802.  
  3803. /* Main cards */
  3804. .board-title {
  3805. gap: 0.55rem;
  3806. margin-bottom: 0.85rem;
  3807. padding-bottom: 0.62rem;
  3808. }
  3809. .board-mark {
  3810. width: 30px;
  3811. height: 30px;
  3812. }
  3813. .board-label {
  3814. font-size: 0.84rem;
  3815. letter-spacing: 0.12em;
  3816. }
  3817. .counter-note p {
  3818. font-size: 0.85rem;
  3819. line-height: 1.62;
  3820. }
  3821. .ingredient-tags {
  3822. overflow-x: auto;
  3823. padding-bottom: 0.35rem;
  3824. }
  3825. .ingredient-tags span {
  3826. font-size: 0.58rem;
  3827. padding: 0.32rem 0.52rem;
  3828. }
  3829.  
  3830. /* Bottled Worlds */
  3831. .bottle-row {
  3832. grid-template-columns: 1fr;
  3833. max-height: 445px;
  3834. padding-right: 0.25rem;
  3835. }
  3836. .bottle-card {
  3837. min-height: 210px;
  3838. border-radius: 70px 70px 12px 12px;
  3839. }
  3840. .bottle-card b {
  3841. font-size: 0.75rem;
  3842. }
  3843. .bottle-card p {
  3844. font-size: 0.7rem;
  3845. }
  3846.  
  3847. /* Familiar Tab */
  3848. .familiars-scroll {
  3849. grid-template-columns: repeat(6, 150px);
  3850. -webkit-overflow-scrolling: touch;
  3851. }
  3852. .familiars span {
  3853. font-size: 0.56rem;
  3854. letter-spacing: 0.11em;
  3855. }
  3856.  
  3857. /* Calling Cards */
  3858. .card-link,
  3859. .creator-link {
  3860. padding: 0.75rem 0.8rem;
  3861. }
  3862. .card-link b,
  3863. .creator-link b {
  3864. font-size: 0.70rem;
  3865. }
  3866. .card-link span,
  3867. .creator-link span {
  3868. font-size: 0.70rem;
  3869. }
  3870.  
  3871. /* Ledger */
  3872. .ledger-book {
  3873. gap: 12px;
  3874. }
  3875. .ledger-tab {
  3876. padding: 0.9rem 1rem;
  3877. font-size: 0.74rem;
  3878. }
  3879. .ledger-inside {
  3880. padding: 0 1rem 1rem;
  3881. font-size: 0.80rem;
  3882. }
  3883.  
  3884. /* Credit */
  3885. .template-credit {
  3886. grid-area: credit;
  3887. width: 100%;
  3888. max-width: 100%;
  3889. font-size: 0.54rem;
  3890. letter-spacing: 0.10em;
  3891. padding-bottom: 0.8rem;
  3892. }
  3893.  
  3894. .css-m8ywhg {
  3895. display: flex !important;
  3896. align-items: center !important;
  3897. justify-content: center !important;
  3898. gap: .55rem;
  3899. flex-wrap: wrap !important;
  3900. overflow: visible;
  3901. }
  3902.  
  3903. .pp-fl-search-input {
  3904. width: 155px;
  3905. }
  3906.  
  3907. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header {
  3908. width: 19pc;
  3909. }
  3910. .profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header::after {
  3911. font-size: clamp(1.7rem, 5vw, 2rem);
  3912. }
  3913. }
  3914.  
  3915. </style>
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!