Mystery Haunting’s visual identity is built entirely on Tailwind CSS with a custom theme configuration that extends the default palette with spooky-specific color tokens, typography families, and keyframe animations. All styles are compiled into theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/mystery-haunting/llms.txt
Use this file to discover all available pages before exploring further.
assets/main.css bundle during the Vite build — the resulting file contains every Tailwind utility class used across the application, the custom theme overrides, and the global base styles including the custom scrollbar and cursor rules.
Color Palette
The theme defines four named color tokens that establish the gothic atmosphere across every page and component.| Token | Hex Value | Usage |
|---|---|---|
ghost-teal | #2dd4bf | Primary accent color — used for nav active states, glow effects, headings, skill bar highlights, and interactive borders |
pumpkin | #f97316 | Secondary accent color — used for CTAs, timeline dots, warning states, hover highlights, and form submit buttons |
spooky-black | #0a0a0a | Application background — applied to <body>, the sidebar, card backgrounds, and overlays |
bone | #f5f5f4 | Body text, subtle backgrounds, ghost icon fills, and muted UI elements at reduced opacity |
ghost-teal-light (#5eead4), appears in the cursor trail component for the inner dot highlight.
Typography
Mystery Haunting imports two font families from Google Fonts and maps them to Tailwind utility classes.font-spooky — Maps to Creepster, a display serif with a handcrafted horror aesthetic. Used for all headings, page titles, nav labels, section headers, button text, and decorative typographic elements throughout the portfolio.
font-mono — Maps to the browser’s default monospace stack (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace). Used for metadata labels, data attributes, timestamps, tag lines, and technical copy — providing a clinical contrast to the decorative font-spooky headings.
font-sans (default body font) — Maps to Space Grotesk, a geometric sans-serif used for body copy, prose paragraphs, and the <html> element’s base font. The CSS global sets font-family: Space Grotesk, sans-serif on html and body.
Custom Animation Utilities
The theme defines four keyframe animations registered as Tailwind utility classes.| Class | Effect |
|---|---|
animate-float-ghost | A four-step floating motion that translates an element up, right, back to baseline, and then down-right, looping every 6 s with ease-in-out timing. Used on ghost icons in the Landing page and on book particle effects in the Blog page. |
animate-bubble | A rising bubble animation that scales an element from 50% to 150% while translating it upward and fading in then out, completing in 2 s with ease-in timing. Used for the potion bubble particles that appear on skill bottle hover in the Skills page. |
text-glow-teal | A CSS text-shadow utility (not a keyframe) that applies a two-layer teal neon glow: 0 0 10px rgba(45,212,191,0.7), 0 0 20px rgba(45,212,191,0.5). Used on active nav labels and major section headings. |
animate-pulse | Tailwind’s built-in pulse animation (opacity cycling between 1 and 0.5 every 2 s). Used on the glowing window and light elements in the haunted house silhouette on the Landing page. |
animate-fog | A slow horizontal drift and scale oscillation that translates the fog layer ±10% over 20 s, used by the GlobalEffects fog overlay component. |
animate-lightning | A flash pattern keyframe that keeps the overlay invisible for ~95% of its 15 s cycle and briefly snaps to 80% opacity twice in quick succession, simulating distant lightning. |
Glow Shadow Utilities
Several components use Tailwind’s arbitrary value syntax to apply neon-style box shadows and drop shadows in the theme’s accent colors. These classes appear frequently across interactive elements:drop-shadow-[0_0_5px_rgba(45,212,191,0.3)] variant is used on bat SVGs in the GlobalEffects flying bats component to give them a subtle atmospheric glow without the hard halo of a full box shadow.
Global Base Styles
assets/main.css sets several global styles on the body element that establish the application-wide atmosphere:
GlobalEffects renders a custom cursor via two motion.div elements: a larger blurred teal orb that follows the mouse with spring physics and a small teal dot that tracks it with tighter spring settings. The custom cursor also scales up when hovering over interactive elements detected via getComputedStyle(target).cursor === "pointer".
A custom scrollbar style is also applied globally, giving the scrollbar a teal semi-transparent thumb on the spooky-black track to maintain the color theme even in the browser chrome.