/* ============================================================ ALMA ERP — Brand Edition Same puffy "clay" 3D-pressed UI mechanic as before, retextured into the ALMA ERP logo palette: royal blue + deep navy surfaces, teal-green "XP" accents, dog-tag badges and HUD-style panels instead of the old military-green/camo skin. ============================================================ */ /* ---------- 1. Design tokens ---------------------------------------*/ :root { --clay-bg: #EEF3FB; /* page canvas — icy blue-white */ --clay-surface: #FFFFFF; /* default card fill */ --clay-surface-pink: #E3ECFC; /* pale sky blue */ --clay-surface-mint: #DCF3EA; /* pale teal-green */ --clay-surface-sky: #E4E9FA; /* pale indigo-blue */ --clay-surface-peach: #FDEEDD; /* soft warm peach (contrast accent) */ --clay-surface-lavender: #ECE6FB; /* soft purple */ --clay-surface-yellow: #FDF4D8; /* soft warm yellow */ --clay-shadow-dark: rgba(11, 30, 91, 0.35); --clay-shadow-light: rgba(255, 255, 255, 0.85); --color-primary: #1465D8; --color-primary-dark: #0B1E5B; --color-primary-light: #4F9BEE; --color-text: #10192E; --color-text-muted: #57607A; --color-accent: #10B981; /* teal-green — XP, stars, ribbons */ --color-accent-dark: #0C8F68; } html { scroll-behavior: smooth; width: 100%; } body { background: var(--clay-bg); color: var(--color-text); font-family: "Plus Jakarta Sans", "Poppins", sans-serif; /* `overflow-x: hidden` belongs here, on — NOT also (or instead) on . Setting it on the root element gets special "propagate to the viewport" handling that, in testing, silently broke every `position: sticky` element on the site — #site-header just scrolled away instead of sticking, because having any non-`visible` overflow-x turns into an independent scroll container that sticky's containing-block math doesn't resolve the same as the true viewport. Keeping it on only still fully prevents horizontal overflow, without that side effect. */ overflow-x: hidden; width: 100%; /* Magic wand cursor — hotspot (24,13) sits on the star tip so the "active" point of the pointer is where the sparkle bursts. */ cursor: url("../images/cursor/wand-cursor.svg") 24 13, auto; } /* Links/buttons get `cursor: pointer` from Tailwind's preflight reset, which — since Tailwind CDN injects/updates its