keays.io / moonjamaica.com
Jamaican Travel Blog Revamp
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: implement light mode theme with Jamaica colors

Co-authored-by: Antigravity <antigravity@google.com>

Michael-Andrew Keays 24346e8c 17d77810

+47 -46
+3 -2
src/app.css
··· 24 24 @layer base { 25 25 html { 26 26 /* Force dark mode for tropical dark theme */ 27 - color-scheme: dark; 28 - --bg-color: #07130c; /* Very dark green/black */ 27 + /* Light mode default */ 28 + color-scheme: light; 29 + --bg-color: #ffffff; 29 30 } 30 31 } 31 32
+1 -1
src/routes/+layout.svelte
··· 12 12 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet"> 13 13 </svelte:head> 14 14 15 - <div class="min-h-screen bg-[#07130c] text-neutral-200 selection:bg-emerald-900 selection:text-white font-sans antialiased"> 15 + <div class="min-h-screen bg-white text-zinc-900 selection:bg-yellow-300 selection:text-zinc-900 font-sans antialiased"> 16 16 {@render children()} 17 17 </div> 18 18
+43 -43
src/routes/+page.svelte
··· 128 128 </script> 129 129 130 130 <div 131 - class="bg-zinc-950 text-green-50 selection:bg-yellow-300 selection:text-zinc-900 pb-20 font-sans" 131 + class="bg-white text-zinc-900 selection:bg-yellow-300 selection:text-zinc-900 pb-20 font-sans" 132 132 > 133 133 <!-- Navbar --> 134 134 <header 135 - class="fixed w-full z-50 transition-all duration-300 bg-zinc-950/90 backdrop-blur-md border-b border-green-900/30" 135 + class="fixed w-full z-50 transition-all duration-300 bg-green-950/95 backdrop-blur-md border-b border-green-800" 136 136 > 137 137 <Navbar class="bg-transparent px-4 py-3 mx-auto max-w-7xl"> 138 138 <NavBrand href="/"> ··· 221 221 > 222 222 <div class="relative flex-shrink-0 flex items-stretch"> 223 223 <Button 224 - class="rounded-r-none border-r-0 whitespace-nowrap bg-zinc-900/90 border border-green-500/40 text-green-100 hover:bg-zinc-800 focus:ring-0 px-4 md:px-6 transition-colors font-medium" 224 + class="rounded-r-none border-r-0 whitespace-nowrap bg-white/90 border border-zinc-200 text-zinc-900 hover:bg-zinc-50 focus:ring-0 px-4 md:px-6 transition-colors font-medium" 225 225 > 226 226 {selectCategory} 227 227 <ChevronDownOutline class="ms-2 h-4 w-4" /> 228 228 </Button> 229 229 <Dropdown 230 - class="w-44 bg-zinc-900 border border-green-800/60 rounded-xl shadow-xl z-50 p-0 overflow-hidden" 230 + class="w-44 bg-white border border-zinc-200 rounded-xl shadow-xl z-50 p-0 overflow-hidden" 231 231 > 232 232 <ul class="m-0 p-0 list-none custom-dropdown-list"> 233 233 {#each searchCategories as { label } (label)} ··· 235 235 onclick={() => { 236 236 selectCategory = label; 237 237 }} 238 - class={`list-none text-green-100 hover:bg-green-900/60 px-4 py-2.5 transition-colors ${selectCategory === label ? 'bg-green-900/40 text-yellow-300 font-medium' : ''}`} 238 + class={`list-none text-zinc-700 hover:bg-zinc-100 px-4 py-2.5 transition-colors ${selectCategory === label ? 'bg-zinc-50 text-green-700 font-medium' : ''}`} 239 239 > 240 240 {label} 241 241 </DropdownItem> ··· 245 245 </div> 246 246 <input 247 247 type="search" 248 - class="block w-full border border-x-0 border-green-500/40 bg-zinc-950/70 text-green-50 placeholder-green-100/40 focus:ring-0 focus:outline-none backdrop-blur-md px-4 py-3 md:py-4 md:text-lg m-0 rounded-none h-auto" 248 + class="block w-full border border-x-0 border-zinc-200 bg-white/90 text-zinc-900 placeholder-zinc-500 focus:ring-0 focus:outline-none backdrop-blur-md px-4 py-3 md:py-4 md:text-lg m-0 rounded-none h-auto" 249 249 placeholder="Search destinations, tours, or ask AI..." 250 250 /> 251 251 <Button ··· 278 278 <!-- Discover Regions --> 279 279 <section class="py-24 px-4 max-w-7xl mx-auto relative z-10"> 280 280 <div class="text-center mb-16"> 281 - <h2 class="text-4xl font-serif font-bold text-white mb-4">Discover Jamaica</h2> 281 + <h2 class="text-4xl font-serif font-bold text-zinc-900 mb-4">Discover Jamaica</h2> 282 282 <div class="w-24 h-1 bg-yellow-300 mx-auto rounded-full mb-6"></div> 283 - <p class="text-green-200/70 font-light max-w-2xl mx-auto text-lg"> 283 + <p class="text-zinc-600 font-light max-w-2xl mx-auto text-lg"> 284 284 Explore the distinct flavors and unique landscapes of the island's regions. 285 285 </p> 286 286 </div> ··· 288 288 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 289 289 {#each regions as region} 290 290 <Card 291 - class="bg-zinc-900 border-green-900/30 hover:border-yellow-300/50 transition-all duration-300 hover:-translate-y-2 overflow-hidden group cursor-pointer w-full max-w-none" 291 + class="bg-green-50/50 border-green-200 hover:border-yellow-400/50 transition-all duration-300 hover:-translate-y-2 overflow-hidden group cursor-pointer w-full max-w-none" 292 292 > 293 293 <div 294 - class="h-48 overflow-hidden bg-zinc-800 p-6 flex items-center justify-center relative rounded-t-lg" 294 + class="h-48 overflow-hidden bg-white border-b border-green-200 p-6 flex items-center justify-center relative rounded-t-lg" 295 295 > 296 296 <div 297 297 class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent z-10 opacity-60" ··· 304 304 </div> 305 305 <div class="p-6 relative z-20"> 306 306 <h5 307 - class="mb-2 text-2xl font-serif font-bold tracking-tight text-white group-hover:text-yellow-300 transition-colors" 307 + class="mb-2 text-2xl font-serif font-bold tracking-tight text-zinc-900 group-hover:text-green-700 transition-colors" 308 308 > 309 309 {region.name} 310 310 </h5> 311 - <p class="font-light text-green-100/60 leading-relaxed mb-4">{region.description}</p> 311 + <p class="font-light text-zinc-700 leading-relaxed mb-4">{region.description}</p> 312 312 <span 313 - class="text-green-300 font-medium text-sm flex items-center group-hover:gap-2 transition-all" 313 + class="text-green-700 font-medium text-sm flex items-center group-hover:gap-2 transition-all" 314 314 > 315 315 Explore Region <ArrowRightOutline class="ml-1 w-4 h-4" /> 316 316 </span> ··· 321 321 </section> 322 322 323 323 <!-- Featured & Curated Split --> 324 - <section class="py-16 px-4 max-w-7xl mx-auto border-t border-green-900/30"> 324 + <section class="py-16 px-4 max-w-7xl mx-auto border-t border-green-200/60"> 325 325 <div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> 326 326 <!-- Curated Trips --> 327 327 <div class="lg:col-span-7"> 328 - <h3 class="text-3xl font-serif font-bold text-white mb-8 flex items-center"> 328 + <h3 class="text-3xl font-serif font-bold text-zinc-900 mb-8 flex items-center"> 329 329 Curated Trips 330 - <span class="ml-4 flex-grow h-px bg-gradient-to-r from-green-900/50 to-transparent" 330 + <span class="ml-4 flex-grow h-px bg-gradient-to-r from-green-200 to-transparent" 331 331 ></span> 332 332 </h3> 333 333 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> 334 334 {#each curatedTrips as trip} 335 335 <div 336 - class="bg-zinc-900/50 hover:bg-zinc-900 border border-green-900/20 p-6 rounded-2xl transition-all duration-300 group cursor-pointer" 336 + class="bg-white hover:bg-green-50/30 border border-green-100 shadow-sm hover:shadow-md p-6 rounded-2xl transition-all duration-300 group cursor-pointer" 337 337 > 338 338 <div 339 - class="w-12 h-12 bg-green-900/40 rounded-xl flex items-center justify-center mb-4 text-green-300 group-hover:bg-yellow-300 group-hover:text-zinc-900 transition-colors" 339 + class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4 text-green-800 group-hover:bg-yellow-300 group-hover:text-zinc-900 transition-colors" 340 340 > 341 341 <svelte:component this={trip.icon} class="w-6 h-6" /> 342 342 </div> 343 343 <h4 344 - class="text-lg font-bold text-white mb-2 font-serif group-hover:text-yellow-200 transition-colors" 344 + class="text-lg font-bold text-zinc-900 mb-2 font-serif group-hover:text-green-700 transition-colors" 345 345 > 346 346 {trip.title} 347 347 </h4> 348 - <p class="text-sm font-light text-green-100/60 leading-relaxed">{trip.desc}</p> 348 + <p class="text-sm font-light text-zinc-600 leading-relaxed">{trip.desc}</p> 349 349 </div> 350 350 {/each} 351 351 </div> ··· 353 353 354 354 <!-- Featured Spotlight --> 355 355 <div class="lg:col-span-5 space-y-8"> 356 - <h3 class="text-3xl font-serif font-bold text-white mb-8 flex items-center"> 356 + <h3 class="text-3xl font-serif font-bold text-zinc-900 mb-8 flex items-center"> 357 357 Featured Spotlight 358 358 </h3> 359 359 ··· 415 415 </section> 416 416 417 417 <!-- Footer --> 418 - <footer class="mt-20 border-t border-green-900/30 bg-zinc-950 pt-16 pb-8"> 418 + <footer class="mt-20 border-t border-green-200 bg-green-50 pt-16 pb-8"> 419 419 <div class="max-w-7xl mx-auto px-4"> 420 420 <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> 421 421 <div class="col-span-1 md:col-span-2"> 422 - <span class="text-2xl font-serif font-bold text-green-300 tracking-tight block mb-4"> 422 + <span class="text-2xl font-serif font-bold text-green-800 tracking-tight block mb-4"> 423 423 MOON JAMAICA 424 424 </span> 425 - <p class="text-green-100/50 font-light max-w-sm mb-6 leading-relaxed"> 425 + <p class="text-zinc-600 font-light max-w-sm mb-6 leading-relaxed"> 426 426 Your premier guide and reservation platform for an authentic Jamaican experience. 427 427 Discover the hidden gems and vibrant culture of the island. 428 428 </p> 429 429 <div class="flex gap-4"> 430 - <a href="#" class="text-neutral-500 hover:text-yellow-300 transition-colors"> 430 + <a href="#" class="text-neutral-500 hover:text-green-700 transition-colors"> 431 431 <span class="sr-only">Facebook</span> 432 432 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 433 433 ><path ··· 437 437 /></svg 438 438 > 439 439 </a> 440 - <a href="#" class="text-neutral-500 hover:text-yellow-300 transition-colors"> 440 + <a href="#" class="text-neutral-500 hover:text-green-700 transition-colors"> 441 441 <span class="sr-only">Instagram</span> 442 442 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 443 443 ><path ··· 447 447 /></svg 448 448 > 449 449 </a> 450 - <a href="#" class="text-neutral-500 hover:text-yellow-300 transition-colors"> 450 + <a href="#" class="text-neutral-500 hover:text-green-700 transition-colors"> 451 451 <span class="sr-only">Twitter</span> 452 452 <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 453 453 ><path ··· 458 458 </div> 459 459 </div> 460 460 <div> 461 - <h2 class="mb-6 text-sm font-semibold text-yellow-200 uppercase tracking-widest"> 461 + <h2 class="mb-6 text-sm font-semibold text-green-800 uppercase tracking-widest"> 462 462 Regions 463 463 </h2> 464 - <ul class="text-green-100/60 font-light space-y-3 list-none p-0 mx-0"> 464 + <ul class="text-zinc-600 font-light space-y-3 list-none p-0 mx-0"> 465 465 <li class="list-none"> 466 - <a href="#" class="hover:text-yellow-300 transition-colors">Kingston</a> 466 + <a href="#" class="hover:text-green-700 transition-colors">Kingston</a> 467 467 </li> 468 468 <li class="list-none"> 469 - <a href="#" class="hover:text-yellow-300 transition-colors">Blue Mountains</a> 469 + <a href="#" class="hover:text-green-700 transition-colors">Blue Mountains</a> 470 470 </li> 471 471 <li class="list-none"> 472 - <a href="#" class="hover:text-yellow-300 transition-colors">Montego Bay</a> 472 + <a href="#" class="hover:text-green-700 transition-colors">Montego Bay</a> 473 473 </li> 474 474 <li class="list-none"> 475 - <a href="#" class="hover:text-yellow-300 transition-colors">Negril</a> 475 + <a href="#" class="hover:text-green-700 transition-colors">Negril</a> 476 476 </li> 477 477 </ul> 478 478 </div> 479 479 <div> 480 - <h2 class="mb-6 text-sm font-semibold text-yellow-200 uppercase tracking-widest"> 480 + <h2 class="mb-6 text-sm font-semibold text-green-800 uppercase tracking-widest"> 481 481 Company 482 482 </h2> 483 - <ul class="text-green-100/60 font-light space-y-3 list-none p-0 mx-0"> 483 + <ul class="text-zinc-600 font-light space-y-3 list-none p-0 mx-0"> 484 484 <li class="list-none"> 485 - <a href="#" class="hover:text-yellow-300 transition-colors">About Us</a> 485 + <a href="#" class="hover:text-green-700 transition-colors">About Us</a> 486 486 </li> 487 487 <li class="list-none"> 488 - <a href="#" class="hover:text-yellow-300 transition-colors">Membership Packages</a> 488 + <a href="#" class="hover:text-green-700 transition-colors">Membership Packages</a> 489 489 </li> 490 490 <li class="list-none"> 491 - <a href="#" class="hover:text-yellow-300 transition-colors">Advertise with us</a> 491 + <a href="#" class="hover:text-green-700 transition-colors">Advertise with us</a> 492 492 </li> 493 493 <li class="list-none"> 494 - <a href="#" class="hover:text-yellow-300 transition-colors">Business Login</a> 494 + <a href="#" class="hover:text-green-700 transition-colors">Business Login</a> 495 495 </li> 496 496 </ul> 497 497 </div> 498 498 </div> 499 499 500 500 <div 501 - class="border-t border-green-900/30 pt-8 flex flex-col md:flex-row justify-between items-center gap-4" 501 + class="border-t border-green-200 pt-8 flex flex-col md:flex-row justify-between items-center gap-4" 502 502 > 503 503 <span class="text-sm text-neutral-500 font-light"> 504 - © 2026 <a href="/" class="hover:text-yellow-300">Moon Jamaica™</a>. All Rights Reserved. 504 + © 2026 <a href="/" class="hover:text-green-700">Moon Jamaica™</a>. All Rights Reserved. 505 505 </span> 506 506 <div class="flex gap-6 text-sm text-neutral-500 font-light list-none"> 507 - <a href="#" class="hover:text-yellow-300">Privacy Policy</a> 508 - <a href="#" class="hover:text-yellow-300">Terms & Conditions</a> 507 + <a href="#" class="hover:text-green-700">Privacy Policy</a> 508 + <a href="#" class="hover:text-green-700">Terms & Conditions</a> 509 509 </div> 510 510 </div> 511 511 </div>