faq.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /* FAQ Stylesheet Settings */
  2. body {
  3. -webkit-tap-highlight-color: transparent;
  4. -webkit-font-smoothing: antialiased;
  5. overscroll-behavior-y: none;
  6. }
  7. /* Custom Scrollbar */
  8. .custom-scrollbar::-webkit-scrollbar {
  9. width: 4px;
  10. }
  11. .custom-scrollbar::-webkit-scrollbar-track {
  12. background: transparent;
  13. }
  14. .custom-scrollbar::-webkit-scrollbar-thumb {
  15. background-color: #D9D9D9;
  16. border-radius: 4px;
  17. }
  18. /* Fluid Animation for the Mascot image */
  19. @keyframes faqFloat {
  20. 0% {
  21. transform: translateY(0px) rotate(0deg);
  22. }
  23. 50% {
  24. transform: translateY(-8px) rotate(-1.5deg);
  25. }
  26. 100% {
  27. transform: translateY(0px) rotate(0deg);
  28. }
  29. }
  30. .faq-float-anim {
  31. animation: faqFloat 6s ease-in-out infinite;
  32. transform-origin: bottom center;
  33. }
  34. /* Glowing text shadow for Impact question mark */
  35. .faq-question-mark {
  36. background: linear-gradient(155deg, rgba(229, 40, 62, 1) 38%, rgba(127, 22, 34, 1) 100%);
  37. -webkit-background-clip: text;
  38. background-clip: text;
  39. text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  40. -webkit-text-stroke: 3px #fff;
  41. }
  42. /* Ensure bottom nav is visible immediately on FAQ */
  43. .navigation {
  44. position: fixed !important;
  45. left: 50% !important;
  46. transform: translateX(-50%) !important;
  47. bottom: 12px !important;
  48. width: calc(100% - 1.5rem) !important;
  49. max-width: 430px !important;
  50. z-index: 120 !important;
  51. }