Make the template match the atom theme, not just approximate it:
- Add Tailwind v4 (+forms/typography plugins, postcss) and port the real atom
CSS (global.css + atom app.css) into globals.css: nav-item underline, currency
+ navigation icon classes, site-bg, card-base/hover-lift, text utils — asset
paths adapted to /assets.
- Copy the real theme assets (backgrounds, icons/currency/navigation, profile,
leaderboards) into public/assets.
- Rebuild the shell 1:1 from the atom Blade: TopHeader (currency pills +
user/admin dropdowns, auth-only), SiteHeader (header image + black/50 overlay,
logo+online+Nitro client / guest Login+Create-account CTA), Navigation (white
bar, nav-item + Community/Assistance dropdowns), Footer. ThemeVars injects the
DB-driven CSS custom properties into :root like app.blade.php. Layout uses the
atom body/site-bg + grid-cols-12 max-w-7xl content wrapper.
Verified: tsc 0, next build exit 0; curl confirms the atom markup, compiled CSS
references the assets, and background-light.jpg + currency/navigation icons all
serve 200.
Faithful port of AtomCMS's "atom" theme look (light, Habbo-retro, golden
#eeb425 / amber #f59e0b accents, white cards, 12px radii, Nunito-first stack):
- globals.css: full token set + components (.site-header/.nav-item, .btn-*,
.card, .hero, currency pills, article cards, inputs, tables, footer).
- SiteHeader (brand + nav + currency pills + auth box, staff-aware) + SiteFooter;
layout wraps header/content/footer. Removed the bare SiteNav.
- Restyled home (hero + article cards), login (centered card).
- siteSettings now falls back to DEFAULTS on missing key OR DB error, so pages
render without a DB; DATABASE_CONNECT_TIMEOUT_MS env + pool acquireTimeout make
the no-DB fallback fast.
Verified in a real browser (computed styles): header white/sticky, golden logo
gradient, uppercase nav, amber primary button @12px radius, golden outline,
hero gradient — all correct. tsc exit 0, vitest 48/48, next build exit 0.
Simo