fix: background position responsive

Fix background position repsonsive

<img width="1709" alt="Captura de pantalla 2025-07-04 a la(s) 4 12 35 p
 m"
src="https://github.com/user-attachments/assets/72108ad0-fcd1-4b1d-b464-54a45c026421"
/>
<img width="856" alt="Captura de pantalla 2025-07-04 a la(s) 4 13 07 p
 m"
src="https://github.com/user-attachments/assets/8f4164ef-9a34-412c-b671-5baf98cb9133"
/>
<img width="856" alt="Captura de pantalla 2025-07-04 a la(s) 4 15 45 p
 m"
src="https://github.com/user-attachments/assets/669bafbb-4b41-4680-8963-2b73ffdb4078"
/>
<img width="856" alt="Captura de pantalla 2025-07-04 a la(s) 4 15 54 p
 m"
src="https://github.com/user-attachments/assets/d99a15ba-15ec-4ab7-bf98-c7e07ec97493"
/>

ISSUE #CHA-338 https://linear.app/defi-wonderland/issue/CHA-338/ui-fixes


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added a modal disclaimer dialog accessible via a new "Disclaimer"
button in the navbar.
* Introduced sidebar expand and collapse buttons for improved navigation
on desktop.
* Enhanced navigation experience by ensuring category card clicks scroll
the page to the top before navigating.

* **Style**
* Unified the visual theme with a new accent color and updated font
family across all UI elements.
* Refined sidebar, dropdown, and code block styles for consistency and
improved usability.
  * Updated category icons and improved responsive background effects.

* **Bug Fixes**
* Fixed sidebar category collapsing behavior to remain expanded by
default.

* **Chores**
  * Reformatted sidebar configuration for consistency and clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Signed-off-by: 0xLeopoldo <leopoldo@wonderland.xyz>

Author: 0xLeopoldo

packages/common-config/static/common/styles/global.css

@@ -155,18 +155,53 @@ html::before {
   z-index: -1;
 }
 
+/* Responsive background - Common responsive properties */
 @media (max-width: 1024px) {
   html {
     background-size: 110%;
     background-position: right center;
+    overflow: visible;
+  }
+
+  html::before {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 150vw;
+    height: 150vh;
+    mask-position: 60% 50%;
+    -webkit-mask-position: 60% 50%;
+    mask-size: 80%;
+    -webkit-mask-size: 80%;
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 750px) {
   html {
     background-size: 45rem;
     background-position: 100% 59%;
   }
+
+  html::before {
+    width: 200vw;
+    height: 200vh;
+    mask-position: 40% 50%;
+    -webkit-mask-position: 40% 50%;
+    mask-size: 100%;
+    -webkit-mask-size: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  html::before {
+    width: 250vw;
+    height: 250vh;
+    mask-position: 30% 50%;
+    -webkit-mask-position: 30% 50%;
+    mask-size: 120%;
+    -webkit-mask-size: 120%;
+  }
 }
 
 body {