API tools faq
paste
Velvet_RidingHood

Hawk's (Keigo Takami)

Velvet_RidingHood
Aug 9th, 2026
20
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.47 KB | Source Code | 0 0
raw download clone embed print report
  1. Note: The base for this isn't mine! I did tweek it and add new things to it. Here is the link to the base of it I used.
  2.  
  3. Link: https://janitorai.com/characters/2e3e3206-787c-4779-816d-20a48d078f5c_character-coffee-shop-free-css-theme
  4.  
  5.  
  6. <style>
  7. .css-1wfbrwg div:first-child:hover{
  8. box-shadow: none!important;
  9. }
  10. </style>
  11.  
  12. <style>
  13. .css-1uodvt1 {
  14. display: flex !important;
  15. flex-direction: column !important;
  16. align-items: center !important;
  17. gap: 15px !important;
  18. text-align: center !important;
  19. }
  20.  
  21. .css-18bnokj {
  22. order: 1 !important;
  23. }
  24.  
  25. .css-o5an2m,
  26. .css-hjkukh {
  27. order: 2 !important;
  28. }
  29.  
  30. .css-1x04uxb {
  31. order: 3 !important;
  32. }
  33.  
  34. .css-18bnokj {
  35. width: 300px !important;
  36. height: 300px !important;
  37. border: 5px solid #dc2626 !important;
  38. border-radius: 50% !important;
  39. object-fit: cover !important;
  40. padding: 5px !important;
  41. background-color: #0f172a !important;
  42. box-shadow: 0 0 25px rgba(220, 38, 38, 0.8), 0 0 12px rgba(234, 179, 8, 0.7) !important;
  43. }
  44. </style>
  45.  
  46. <style>
  47. .profile-title-heading {
  48. color: #ffffff !important;
  49. text-shadow: 0 0 10px #dc2626, 2px 2px 0px #0f172a !important;
  50. font-size: 1.6rem !important;
  51. text-align: center !important;
  52.  
  53. background: #0f172a !important;
  54. padding: 12px 11px !important;
  55. border-radius: 19px !important;
  56. border: 2px solid #dc2626 !important;
  57. display: inline-block !important;
  58. margin-top: 10px !important;
  59. }
  60. </style>
  61.  
  62. <style>
  63. .profile-title-heading {
  64. font-family: 'Impact', 'Trebuchet MS', sans-serif !important;
  65. font-weight: 500 !important;
  66. text-transform: uppercase !important;
  67. letter-spacing: 1.5px !important;
  68. }
  69. </style>
  70.  
  71. <style>
  72. .css-1uodvt1 {
  73. padding-top: 0px;
  74. flex-direction: column;
  75. justify-items: center;
  76. text-align: center;
  77. }
  78. </style>
  79.  
  80. <style>
  81. .profile-title-heading::after {
  82. content: " | πŸͺΆπŸ¦…βœ¨" !important;
  83. display: inline-block !important;
  84. font-size: 1.5rem !important;
  85. margin-left: 4px !important;
  86. vertical-align: middle !important;
  87. }
  88. </style>
  89.  
  90. <style>
  91. .character-list-pagination-flex {
  92. align-items: center;
  93. flex-direction: column;
  94. gap: 12px;
  95. }
  96.  
  97. .profile-badge-flex-outer {
  98. background: #0f172a;
  99. color: #dc2626 !important;
  100. border: 2px solid #dc2626 !important;
  101. border-radius: 6px;
  102. font-family: 'Trebuchet MS', sans-serif;
  103. box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
  104. text-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
  105. }
  106.  
  107. .profile-character-search-input {
  108. background: #1e293b;
  109. color: #ffffff;
  110. caret-color: #dc2626;
  111. font-family: 'Trebuchet MS', sans-serif;
  112. }
  113.  
  114. .profile-character-search-input,
  115. .profile-character-search-input:is(:hover, :focus) {
  116. border: 2px solid #dc2626;
  117. border-radius: 8px 0 0 8px;
  118. box-shadow: 0 0 10px rgba(220, 38, 38, 0.7);
  119. }
  120.  
  121. .profile-character-search-input::placeholder {
  122. color: #dc2626a0;
  123. }
  124.  
  125. .profile-character-search-input ~ div svg {
  126. color: #dc2626 !important;
  127. transform: scale(1.3);
  128. }
  129.  
  130. .profile-filter-button {
  131. background: #1e293b !important;
  132. border: 2px solid #dc2626;
  133. border-radius: 6px;
  134. }
  135.  
  136. .profile-filter-button svg {
  137. color: #dc2626 !important;
  138. }
  139.  
  140. #root ~ *:has(> .profile-filter-modal-modal-overlay)
  141. [data-focus-lock-disabled] > * > * {
  142. background: #0f172a !important;
  143. border: 2px solid #dc2626;
  144. box-shadow: 0 0 20px rgba(220, 38, 38, 0.7);
  145. }
  146.  
  147. .profile-filter-modal-body-tags-flex-box-heading {
  148. text-align: center;
  149. font-family: 'Trebuchet MS', sans-serif;
  150. color: #ffffff;
  151. letter-spacing: 1px;
  152. }
  153.  
  154. [class*="_tagsContainer_"] {
  155. background: #0f172a;
  156. border: 2px solid #dc2626;
  157. }
  158.  
  159. [class*="_collapsedContainer_"] [class*="_tag_"] {
  160. border: 1px solid #dc2626;
  161. background: #1e293b;
  162. color: #ffffff;
  163. }
  164.  
  165. [class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  166. background: #dc2626;
  167. color: #ffffff;
  168. box-shadow: 0 0 8px rgba(220, 38, 38, 0.8);
  169. }
  170.  
  171. [class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  172. background: #eab308;
  173. color: #0f172a;
  174. box-shadow: 0 0 10px rgba(234, 179, 8, 0.8);
  175. }
  176.  
  177. [class*="_navigationButton"] {
  178. background: #1e293b;
  179. border: 1px solid #dc2626;
  180. color: #ffffff;
  181. }
  182.  
  183. #root .react-select__control {
  184. background: #1e293b;
  185. border: 2px solid #dc2626 !important;
  186. }
  187.  
  188. #root .react-select__single-value {
  189. color: #ffffff;
  190. font-family: 'Trebuchet MS', sans-serif;
  191. }
  192.  
  193. #root .react-select__dropdown-indicator svg {
  194. color: #dc2626;
  195. }
  196.  
  197. .profile-pagination-prev-hstack svg {
  198. color: #dc2626;
  199. }
  200.  
  201. .profile-badge-flex-outer {
  202. height: 45px;
  203. background: #0f172a !important;
  204. color: #dc2626 !important;
  205. box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  206. border: none !important;
  207. border-bottom: 3px solid #eab308 !important;
  208. border-radius: 0;
  209. font-family: 'Trebuchet MS', sans-serif;
  210. letter-spacing: 1px;
  211. text-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
  212. }
  213.  
  214. .profile-badge-flex-outer,
  215. .profile-badge-total-text::after {
  216. font-size: 1.0rem !important;
  217. }
  218.  
  219. .profile-badge-total-text {
  220. font-size: 0 !important;
  221. }
  222.  
  223. .profile-badge-total-text::after {
  224. content: "Hawks' High-Speed Nest πŸͺΆ";
  225. letter-spacing: 1px;
  226. color: #ffffff;
  227. }
  228.  
  229. .profile-tabs-wrapper {
  230. visibility: hidden !important;
  231. }
  232. </style>
  233.  
  234. <style>
  235. .torn-paper {
  236. background-color: #0f172a !important;
  237. color: #ffffff !important;
  238. padding: 30px !important;
  239. border-radius: 6px !important;
  240. font-family: 'Trebuchet MS', sans-serif !important;
  241. position: relative !important;
  242. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
  243. margin: -9px auto !important;
  244. max-width: 100% !important;
  245. border: 3px solid #dc2626 !important;
  246. }
  247.  
  248. .torn-paper h3 {
  249. text-transform: uppercase !important;
  250. border-bottom: 2px solid #eab308 !important;
  251. margin-bottom: 15px !important;
  252. padding-bottom: 5px !important;
  253. color: #dc2626 !important;
  254. }
  255. </style>
  256.  
  257. <div class="torn-paper">
  258. <h3>Too Fast For My Own Good πŸͺΆ</h3>
  259. <p>I just want a world where heroes have so much free time they don't know what to do with themselves. So let me handle the dirty work in the sky while everyone else relaxes, alright? πŸ¦…βœ¨</p>
  260. </div>
  261.  
  262. <style>
  263. .torn-paper {
  264. position: relative !important;
  265. }
  266.  
  267. .torn-paper::before {
  268. content: "πŸͺΆβœ¨ Λšβ‚Šβ€§" !important;
  269. position: absolute !important;
  270. top: 5px !important;
  271. left: 5px !important;
  272. font-size: 1.2rem !important;
  273. z-index: 1 !important;
  274. }
  275.  
  276. .torn-paper::after {
  277. content: "Λ™βœ§Λ–Β°πŸ¦… FIERCE WINGS! ༘ β‹†ο½‘Λš" !important;
  278. position: absolute !important;
  279. bottom: 5px !important;
  280. right: 5px !important;
  281. font-size: 1.2rem !important;
  282. z-index: 1 !important;
  283. }
  284. </style>
  285.  
  286. <div class="cafe-button-container">
  287. <a href="#" class="cafe-btn">Button</a>
  288. <a href="#" class="cafe-btn">Button</a>
  289. <a href="#" class="cafe-btn">Button</a>
  290. </div>
  291.  
  292. <style>
  293. .cafe-button-container {
  294. display: flex;
  295. justify-content: center;
  296. gap: 15px;
  297. margin: 20px 0;
  298. }
  299.  
  300. .cafe-btn {
  301. background: #0f172a !important;
  302. color: #dc2626 !important;
  303. padding: 10px 25px !important;
  304. border: 2px solid #dc2626 !important;
  305. border-radius: 25px !important;
  306. font-family: 'Trebuchet MS', sans-serif !important;
  307. font-weight: bold !important;
  308. text-decoration: none !important;
  309. transition: 0.3s !important;
  310. box-shadow: 2px 4px 6px rgba(0,0,0,0.5) !important;
  311. }
  312.  
  313. .cafe-btn:hover {
  314. background: #dc2626 !important;
  315. color: #ffffff !important;
  316. border: 2px solid #eab308 !important;
  317. transform: translateY(-3px) !important;
  318. box-shadow: 0 0 15px rgba(220, 38, 38, 0.9) !important;
  319. cursor: pointer;
  320. }
  321. </style>
  322.  
  323. <div class="wood-divider"></div>
  324. <style>
  325. .wood-divider {
  326. width: 80%;
  327. height: 12px;
  328. margin: 20px auto;
  329. border-radius: 6px;
  330. background: repeating-linear-gradient(
  331. -45deg,
  332. #0f172a,
  333. #0f172a 12px,
  334. #dc2626 12px,
  335. #dc2626 24px,
  336. #eab308 24px,
  337. #eab308 36px
  338. );
  339. box-shadow: 0 2px 8px rgba(220, 38, 38, 0.6);
  340. }
  341. </style>
  342.  
  343. <div class="cork-board">
  344. <h2 class="board-title">Flight Intel</h2>
  345. <div class="pinned-note">
  346. <p><strong>Fierce Wings Quirk</strong><br>Controlling every single crimson feather independently. Perfect for recon, speed, and blade strikes.</p>
  347. </div>
  348. <div class="pinned-note">
  349. <p><strong>Commission Directive</strong><br>Keep an eye on Tokoyami's progress. Kid's got talent, just needs to broaden his horizon.</p>
  350. </div>
  351. <div class="pinned-note">
  352. <p><strong>Undercover Ops</strong><br>Playing both sides of the board. The higher you fly, the sharper you have to look.</p>
  353. </div>
  354. </div>
  355.  
  356. <style>
  357. .cork-board {
  358. background-color: #0f172a !important;
  359. border: 4px solid #dc2626 !important;
  360. padding: 20px !important;
  361. margin: 20px auto !important;
  362. max-width: 500px !important;
  363. box-shadow: 0 0 20px rgba(220, 38, 38, 0.7) !important;
  364. border-radius: 12px !important;
  365. }
  366.  
  367. .cork-board h2 {
  368. font-family: 'Impact', sans-serif !important;
  369. color: #dc2626 !important;
  370. font-size: 2rem !important;
  371. text-transform: uppercase !important;
  372. letter-spacing: 3px !important;
  373. text-align: center !important;
  374. text-shadow: 2px 2px #eab308 !important;
  375. margin: 0 !important;
  376. padding: 10px 0 !important;
  377. background: transparent !important;
  378. }
  379.  
  380. .pinned-note {
  381. background-color: #1e293b !important;
  382. color: #ffffff !important;
  383. padding: 15px !important;
  384. margin: 10px 0 !important;
  385. border-radius: 8px !important;
  386. font-family: 'Trebuchet MS', sans-serif !important;
  387. border-left: 5px solid #eab308 !important;
  388. position: relative !important;
  389. box-shadow: 3px 3px 5px rgba(0,0,0,0.5) !important;
  390. }
  391.  
  392. .pinned-note::before {
  393. content: "πŸͺΆ" !important;
  394. position: absolute !important;
  395. top: -12px !important;
  396. right: 15px !important;
  397. font-size: 1rem !important;
  398. }
  399. </style>
  400.  
  401. <div class="status-indicator">
  402. <div class="status-dot"></div>
  403. <span class="status-text">PATROL SPEED: MACH 2 πŸͺΆ</span>
  404. </div>
  405.  
  406. <style>
  407. .status-indicator {
  408. position: absolute !important;
  409. top: 300px !important;
  410. left: 60px !important;
  411. display: flex !important;
  412. align-items: center !important;
  413. gap: 5px !important;
  414. background: rgba(15, 23, 42, 0.95) !important;
  415. padding: 6px 12px !important;
  416. border-radius: 15px !important;
  417. border: 1px solid #dc2626 !important;
  418. z-index: 10 !important;
  419. box-shadow: 0 0 12px rgba(220, 38, 38, 0.8) !important;
  420. }
  421.  
  422. .status-dot {
  423. width: 10px !important;
  424. height: 10px !important;
  425. background-color: #dc2626 !important;
  426. border-radius: 50% !important;
  427. box-shadow: 0 0 8px #dc2626 !important;
  428. }
  429.  
  430. .status-text {
  431. color: #ffffff !important;
  432. font-family: 'Trebuchet MS', sans-serif !important;
  433. font-weight: bold !important;
  434. font-size: 0.8rem !important;
  435. }
  436.  
  437. @media (max-width: 768px) {
  438. .status-indicator {
  439. top: 300px !important;
  440. left: 5px !important;
  441. padding: 3px 6px !important;
  442. }
  443. .status-text {
  444. font-size: 0.7rem !important;
  445. }
  446. }
  447. </style>
  448.  
  449. <div class="wood-divider"></div>
  450.  
  451. <style>
  452. .profile-character-card-wrapper {
  453. margin-bottom: 0.5rem;
  454. transition: 500ms ease;
  455. }
  456. .profile-character-card-wrapper, .profile-character-card-wrapper > div:empty {
  457. background: transparent !important;
  458. box-shadow: none;
  459. }
  460. .profile-character-card-wrapper:hover {
  461. box-shadow: none;
  462. transform: translateY(-4px) scale(1.01);
  463. }
  464. .profile-character-card-stack {
  465. background: #0f172a;
  466. border: 2px solid #dc2626;
  467. border-radius: 15px;
  468. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  469. }
  470. .profile-character-card-stack-link-component {
  471. display: flex;
  472. flex-direction: column-reverse;
  473. flex-wrap: nowrap;
  474. justify-content: center;
  475. }
  476.  
  477. .profile-character-card-name-box {
  478. color: #dc2626;
  479. font-family: 'Impact', sans-serif;
  480. font-size: 1.1rem;
  481. letter-spacing: 1px;
  482. text-transform: uppercase;
  483. text-shadow: 1px 1px 2px #eab308;
  484. text-align: center;
  485. }
  486.  
  487. .profile-character-card-stats-box {
  488. position: absolute;
  489. display: flex;
  490. top: -0.75rem;
  491. right: unset;
  492. align-content: center;
  493. align-items: center;
  494. justify-content: center;
  495. width: 100%;
  496. }
  497. .profile-character-card-stats-box * {
  498. width: 100%;
  499. }
  500. .profile-character-card-ribbon {
  501. position: static;
  502. overflow: visible;
  503. filter: none;
  504. }
  505. .profile-character-card-ribbon-wrap {
  506. padding: 0;
  507. clip-path: polygon(25% 0, 75% 0, 70% 50%, 75% 100%, 25% 100%, 30% 50%);
  508. box-shadow: none;
  509. background: #eab308;
  510. overflow: visible;
  511. border-radius: 0;
  512. transition: all 500ms;
  513. }
  514. .profile-character-cards-chat-count-tbmessages {
  515. display: none;
  516. }
  517. .profile-character-card-chats-count::before {
  518. content: "| πŸͺΆ ";
  519. font-weight: normal;
  520. }
  521. .profile-character-card-chats-count::after {
  522. content: " Feathers |";
  523. font-weight: normal;
  524. }
  525. .profile-character-card-chats-count {
  526. text-align: center;
  527. color: #0f172a;
  528. font-family: 'Trebuchet MS', sans-serif;
  529. font-weight: bold;
  530. }
  531.  
  532. .profile-character-card-avatar-aspect-ratio {
  533. margin: 10px;
  534. }
  535. .profile-character-card-avatar-image {
  536. border-radius: 8px;
  537. border: 2px solid #dc2626;
  538. }
  539.  
  540. .profile-character-card-creator-name-link {
  541. display: none;
  542. }
  543.  
  544. .profile-character-card-description-markdown-container * {
  545. font-family: 'Trebuchet MS', sans-serif;
  546. color: #ffffff !important;
  547. text-align: center !important;
  548. }
  549.  
  550. .profile-character-card-star-line {
  551. border-color: #dc2626;
  552. }
  553. .profile-character-card-star {
  554. display: none;
  555. }
  556. .profile-character-card-star-line::after {
  557. content: "πŸͺΆπŸ¦…";
  558. position: absolute;
  559. color: #dc2626;
  560. font-size: 0.9rem;
  561. right: -25px;
  562. top: -15px;
  563. }
  564.  
  565. .profile-character-card-tags ul {
  566. justify-content: center;
  567. padding-bottom: 10px;
  568. }
  569. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless), .profile-character-card-tag-limitless {
  570. flex: 1 1 100%;
  571. width: 100%;
  572. }
  573. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) {
  574. padding-top: 2px;
  575. padding-bottom: 2px;
  576. background: rgba(220, 38, 38, 0.3);
  577. border-radius: 20px;
  578. }
  579. .profile-character-card-tag-limitless {
  580. border: none;
  581. font-size: 0;
  582. background: transparent;
  583. }
  584. .profile-character-card-tag-limitless::before, .profile-character-card-tag-limitless::after {
  585. font-size: 0.9rem;
  586. font-family: 'Trebuchet MS', sans-serif;
  587. font-weight: bold;
  588. color: #dc2626;
  589. text-align: center;
  590. position: absolute;
  591. transition: opacity 500ms ease;
  592. }
  593. .profile-character-card-tag-limitless::before {
  594. content: "πŸͺΆ Feather Blades Recon";
  595. }
  596. .profile-character-card-tag-limitless::after {
  597. content: "πŸ¦… HIGH-SPEED AERIAL STRIKE!!";
  598. opacity: 0;
  599. }
  600. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::before {
  601. opacity: 0;
  602. }
  603. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::after {
  604. opacity: 1;
  605. transition-delay: 250ms;
  606. }
  607. .profile-character-card-tags-wrap:not(:has(.profile-character-card-tag-limitless)) {
  608. border: 1px solid #dc2626;
  609. border-radius: 15px;
  610. }
  611. .profile-character-card-tags-wrap a {
  612. display: flex;
  613. }
  614. .pp-cc-tags-regular {
  615. font-size: 0;
  616. display: inline;
  617. border: none !important;
  618. }
  619. .pp-cc-tags-regular::first-letter {
  620. font-size: 0.9rem;
  621. }
  622. .pp-cc-tags-item:hover:not(.profile-character-card-tag-limitless) {
  623. background: rgba(220, 38, 38, 0.3);
  624. }
  625. .pp-cc-tags-custom {
  626. border: none !important;
  627. color: #dc2626;
  628. font-family: 'Trebuchet MS', sans-serif;
  629. font-weight: 600;
  630. }
  631.  
  632. .profile-character-card-tokens-count {
  633. color: #dc2626;
  634. text-shadow: none;
  635. font-family: 'Trebuchet MS', sans-serif;
  636. font-weight: 500;
  637. }
  638.  
  639. .profile-character-card-box ~ div {
  640. display: none;
  641. }
  642. </style>
  643.  
  644. <div class="cafe-chalkboard-menu">
  645. <div class="chalkboard-frame">
  646. <div class="chalkboard-surface">
  647. <h3 class="chalk-title">Hawks' Flying Yakitori Bar πŸ—</h3>
  648. <ul class="chalk-items">
  649. <li>πŸ— Flame-Grilled Charcoal Yakitori Skewers</li>
  650. <li>🍺 Chilled Ginger Honey Highball</li>
  651. <li>πŸ₯ Crispy Seasoned Chicken Skin Skewers</li>
  652. <li>🍚 Savory Chicken & Egg Oyakodon Bowl</li>
  653. <li>πŸ‹ Zesty Lemon-Pepper Wings</li>
  654. <li>🍑 Sweet Maple Glazed Tsukune Meatballs</li>
  655. </ul>
  656. <div class="chalk-footer">"Fast food for the fastest hero around."</div>
  657. </div>
  658. </div>
  659. </div>
  660.  
  661. <style>
  662. .css-p641ht {
  663. background-color: #0f172a !important;
  664. border-bottom: 4px solid #dc2626 !important;
  665. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
  666. }
  667.  
  668. .css-1qj3ulc {
  669. font-size: 0 !important;
  670. visibility: hidden !important;
  671. position: relative !important;
  672. display: inline-block !important;
  673. }
  674.  
  675. .css-1qj3ulc::after {
  676. content: "Hawks.Keigo πŸͺΆ" !important;
  677. visibility: visible !important;
  678. font-family: 'Impact', sans-serif !important;
  679. font-size: 1.6rem !important;
  680. font-weight: bold !important;
  681. color: #dc2626 !important;
  682. letter-spacing: 2px !important;
  683. text-shadow: 2px 2px 0px #eab308 !important;
  684. position: absolute !important;
  685. left: 0 !important;
  686. top: 50% !important;
  687. transform: translateY(-50%) !important;
  688. white-space: nowrap !important;
  689. }
  690.  
  691. .cafe-page-doll {
  692. position: fixed !important;
  693. bottom: 30px !important;
  694. right: 30px !important;
  695. z-index: 9999 !important;
  696. display: flex !important;
  697. flex-direction: column !important;
  698. align-items: center !important;
  699. pointer-events: auto !important;
  700. user-select: none !important;
  701. }
  702.  
  703. .doll-graphic {
  704. font-size: 3rem !important;
  705. line-height: 1 !important;
  706. filter: drop-shadow(3px 3px 0px #0f172a) !important;
  707. animation: dollFloat 3s ease-in-out infinite !important;
  708. }
  709.  
  710. .doll-steam {
  711. color: #dc2626 !important;
  712. font-family: Arial, sans-serif !important;
  713. font-size: 1.5rem !important;
  714. font-weight: bold !important;
  715. opacity: 0 !important;
  716. transform: translateY(10px) !important;
  717. animation: dollSteam 3s ease-in-out infinite !important;
  718. }
  719.  
  720. .doll-shadow {
  721. width: 30px !important;
  722. height: 6px !important;
  723. background: rgba(220, 38, 38, 0.5) !important;
  724. border-radius: 50% !important;
  725. margin-top: 5px !important;
  726. animation: dollShadow 3s ease-in-out infinite !important;
  727. }
  728.  
  729. @keyframes dollFloat {
  730. 0%, 100% { transform: translateY(0); }
  731. 50% { transform: translateY(-12px); }
  732. }
  733.  
  734. @keyframes dollShadow {
  735. 0%, 100% { transform: scale(1); opacity: 0.5; }
  736. 50% { transform: scale(0.7); opacity: 0.2; }
  737. }
  738.  
  739. @keyframes dollSteam {
  740. 0% { transform: translateY(5px) scale(0.8); opacity: 0; }
  741. 50% { opacity: 0.8; }
  742. 100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
  743. }
  744.  
  745. .cafe-chalkboard-menu {
  746. margin: 25px auto !important;
  747. max-width: 480px !important;
  748. width: 300% !important;
  749. box-sizing: border-box !important;
  750. }
  751.  
  752. .chalkboard-frame {
  753. background: #0f172a !important;
  754. border: 4px solid #dc2626 !important;
  755. border-radius: 8px !important;
  756. padding: 10px !important;
  757. box-shadow: 0 0 15px rgba(220, 38, 38, 0.5) !important;
  758. }
  759.  
  760. .chalkboard-surface {
  761. background: #1e293b !important;
  762. border: 1px dashed #dc2626 !important;
  763. padding: 15px !important;
  764. text-align: center !important;
  765. }
  766.  
  767. .chalk-title {
  768. color: #dc2626 !important;
  769. font-family: 'Impact', sans-serif !important;
  770. font-size: 1.3rem !important;
  771. text-transform: uppercase !important;
  772. letter-spacing: 1px !important;
  773. border-bottom: 1px solid rgba(234, 179, 8, 0.6) !important;
  774. padding-bottom: 8px !important;
  775. margin-bottom: 12px !important;
  776. }
  777.  
  778. .chalk-items {
  779. list-style: none !important;
  780. padding: 0 !important;
  781. margin: 0 !important;
  782. }
  783.  
  784. .chalk-items li {
  785. color: #ffffff !important;
  786. font-family: 'Trebuchet MS', sans-serif !important;
  787. font-size: 0.95rem !important;
  788. margin: 8px 0 !important;
  789. text-align: left !important;
  790. }
  791.  
  792. .chalk-footer {
  793. color: #eab308 !important;
  794. font-family: 'Trebuchet MS', sans-serif !important;
  795. font-size: 0.85rem !important;
  796. font-style: italic !important;
  797. margin-top: 15px !important;
  798. }
  799.  
  800. @media (max-width: 768px) {
  801.  
  802. .css-1qj3ulc::after {
  803. font-size: 1.3rem !important;
  804. }
  805.  
  806. .cafe-page-doll {
  807. bottom: 15px !important;
  808. right: 15px !important;
  809. transform: scale(0.8) !important;
  810. opacity: 0.8 !important;
  811. }
  812.  
  813. .cafe-chalkboard-menu {
  814. max-width: 90% !important;
  815. padding: 0 10px !important;
  816. }
  817. }
  818. </style>
  819.  
  820. <style>
  821. .profile-top-bar {
  822. background: rgba(15, 23, 42, 0.95);
  823. backdrop-filter: blur(5px);
  824. box-shadow: none;
  825. border-bottom: 3px solid #dc2626;
  826. }
  827. .profile-top-box-flex-inner, .profile-top-bar-logo-box {
  828. min-width: fit-content;
  829. }
  830.  
  831. .profile-top-bar-logo-name:hover { text-shadow: none; }
  832. .profile-top-bar-logo { background: transparent; }
  833.  
  834. .pp-uc-followers-count span + span { font-size:0; }
  835.  
  836. .pp-uc-followers-count span + span::after {
  837. content: "Flock";
  838. font-size:1rem;
  839. }
  840.  
  841. .sonner-toast-container [data-sonner-toast][data-type=success]{
  842. background: #0f172a!important;
  843. color: #dc2626!important;
  844. border: 2px solid #eab308!important;
  845. }
  846. </style>
Tags: Mha CSS Code janitor.ai
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!