Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/fortune-seeker/llms.txt
Use this file to discover all available pages before exploring further.
Fortune Seeker’s visual identity is built on three interlocking layers: a custom Tailwind CSS color token system that names every dark and golden hue, a two-font pairing loaded from Google Fonts, and a small set of hand-crafted CSS utility classes that power the glowing text, floating animations, and 3D card-flip effects throughout the template. Adjusting any of these layers lets you retheme the entire site without touching a single component.
Color Palette
Every color in Fortune Seeker is registered as a named Tailwind token so it can be used directly in utility classes such as text-gold, bg-midnight, or border-gold/30.
| Token | Hex | Usage |
|---|
gold | #c9a96e | Borders, headings, icon fills, glow accents |
midnight | #0a0a1a | Page background |
obsidian | #050505 | Card backgrounds, near-black surfaces |
velvet | #3a1a5c | Purple gradient stops, selection background |
gold-dark | #a68750 | Muted gold text, darker gradient stops |
gold-light | #e6c88a | Hover gold text |
body element carries bg-midnight as its base, while interactive surfaces like project cards use bg-obsidian. Purple depth is achieved through velvet-toned gradients and the custom scrollbar thumb.
Changing Colors
The color tokens are resolved by Tailwind from the compiled assets/main.css. To change a token’s hex value, locate the custom color definitions in your Tailwind configuration (typically tailwind.config.js) and update the theme.extend.colors block:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
gold: "#c9a96e",
"gold-dark": "#a68750",
"gold-light":"#e6c88a",
midnight: "#0a0a1a",
obsidian: "#050505",
velvet: "#3a1a5c",
},
},
},
};
vite build) to regenerate assets/main.css with the new token values. Every component that references text-gold, bg-velvet, border-gold/30, and so on will automatically pick up the new colors without any further edits.
Tools like Coolors and Realtime Colors make it easy to generate complementary mystical palettes. Export your chosen hex codes and drop them straight into the colors block above. Typography
Fortune Seeker pairs two Google Fonts — one for the arcane and one for the legible.
| Role | Family | Tailwind class | Applied to |
|---|
| Headings | Cormorant Garamond | .font-serif | All h1–h6 elements |
| Body / UI | Inter | .font-sans | Body text, form inputs, nav labels |
assets/main.css via a single @import rule:
@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap";
/* Applied globally in main.css */
body {
font-family: Inter, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Cormorant Garamond", serif;
}
Swapping fonts
- Replace the Google Fonts
@import URL with one that includes your chosen families.
- Update the
font-family declarations in main.css (or in tailwind.config.js under theme.extend.fontFamily).
- Rebuild the project.
If you want a single-font design, assign the same family to both fontFamily.serif and fontFamily.sans in the Tailwind config.
Custom CSS Utilities
Several visual effects in Fortune Seeker rely on utility classes that are defined directly in assets/main.css rather than through Tailwind’s plugin system.
| Class | Effect |
|---|
.text-shadow-gold | Adds a warm gold glow: text-shadow: 0 0 10px rgba(201,169,110,0.5) |
.animate-waver | Gentle floating loop — translateY + slight rotate, 4 s ease-in-out |
.preserve-3d | transform-style: preserve-3d — enables 3D card-flip perspective |
.backface-hidden | backface-visibility: hidden — hides the reverse face during a flip |
.rotate-y-180 | transform: rotateY(180deg) — flips an element to its back face |
.animate-waver keyframe is defined as:
@keyframes waver {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-5px) rotate(1deg); }
}
.animate-waver {
animation: waver 4s ease-in-out infinite;
}
.preserve-3d, .backface-hidden, .rotate-y-180) work together on the tarot card components: the outer wrapper carries .preserve-3d, both faces use .backface-hidden, and the back face starts with .rotate-y-180 so it is invisible until the flip animation runs.
Scrollbar Styling
The custom scrollbar reinforces the template’s dark aesthetic without any JavaScript — it is defined entirely in CSS:
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: #050505; } /* obsidian */
::-webkit-scrollbar-thumb {
background-color: #3a1a5c; /* velvet */
border-radius: 9999px;
border: 1px solid rgba(201,169,110,0.2);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(201,169,110,0.5);
}