patx/tikitide
initial mockups
Commit 754a6e9 · patx · 2026-05-16T19:00:00-04:00
Comments
No comments yet.
Diff
diff --git a/hero-bg-alligator-lighthouse.jpg b/hero-bg-alligator-lighthouse.jpg
new file mode 100644
index 0000000..d560b0b
Binary files /dev/null and b/hero-bg-alligator-lighthouse.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29d9e58
--- /dev/null
+++ b/index.html
@@ -0,0 +1,447 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Tiki Tide Boat Rentals - Premier boat rentals in the Florida Keys. Rent center console, pontoon, fishing & luxury boats in Key Largo, Islamorada, Marathon, Key West, Big Pine Key, Tavernier & all Florida Keys.">
+ <meta name="keywords" content="boat rentals florida keys, key largo boat rental, islamorada boat rental, marathon boat rental, key west boat rental, big pine key boat rental, tavernier boat rental, florida keys boat charters, pontoon rental keys, fishing boat rental florida keys">
+ <title>Tiki Tide Boat Rentals | Florida Keys Boat Rentals</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');
+
+ :root {
+ --aqua: #2ee6d6;
+ --deep-ocean: #06283d;
+ --midnight: #031621;
+ --reef: #0a5c67;
+ --coral: #ff7a59;
+ --sun: #ffd166;
+ }
+
+ .hero-bg {
+ background: linear-gradient(135deg, rgba(255, 122, 89, 0.18), transparent 42%),
+ linear-gradient(rgba(3, 22, 33, 0.72), rgba(3, 22, 33, 0.89)),
+ url('hero-bg-alligator-lighthouse.jpg') center/cover no-repeat;
+ }
+
+ .neon-text {
+ text-shadow: 0 0 15px var(--aqua),
+ 0 0 34px rgba(255, 122, 89, 0.55);
+ }
+
+ .boat-card {
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .boat-card:hover {
+ transform: translateY(-15px);
+ box-shadow: 0 25px 50px -12px rgb(255 122 89 / 0.24),
+ 0 0 24px rgb(46 230 214 / 0.12);
+ }
+
+ .nav-link {
+ position: relative;
+ }
+
+ .nav-link:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: -4px;
+ left: 0;
+ background: linear-gradient(90deg, var(--aqua), var(--coral));
+ transition: width 0.3s;
+ }
+
+ .nav-link:hover:after {
+ width: 100%;
+ }
+
+ .selected-boat-type {
+ background: var(--coral) !important;
+ color: var(--midnight) !important;
+ }
+
+ .selected-boat-type:hover {
+ background: var(--sun) !important;
+ }
+ </style>
+</head>
+<body class="bg-[#06283d] text-white font-['Inter'] overflow-x-hidden">
+ <!-- NAVBAR -->
+ <nav class="fixed top-0 w-full bg-[#031621]/95 backdrop-blur-lg z-50 border-b border-[#2ee6d6]/25">
+ <div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
+ <div class="flex items-center gap-3">
+ <div class="w-9 h-9 sm:w-10 sm:h-10 bg-[#ff7a59] text-[#031621] rounded-full flex items-center justify-center text-2xl">🌴</div>
+ <div>
+ <span class="text-2xl sm:text-3xl font-bold tracking-tighter">TIKI TIDE</span>
+ </div>
+ </div>
+
+ <div class="hidden md:flex items-center gap-8 text-sm uppercase tracking-widest">
+ <a href="#fleet" class="nav-link hover:text-[#2ee6d6] transition-colors">Our Fleet</a>
+ <a href="#locations" class="nav-link hover:text-[#2ee6d6] transition-colors">Locations</a>
+ <a href="#experiences" class="nav-link hover:text-[#2ee6d6] transition-colors">Experiences</a>
+ <a href="#book" class="nav-link hover:text-[#2ee6d6] transition-colors">Book Now</a>
+ </div>
+
+ <a href="#book"
+ class="bg-[#ff7a59] text-[#031621] font-bold px-5 sm:px-8 py-3 sm:py-3.5 rounded-2xl hover:bg-[#ffd166] transition-all flex items-center gap-2 text-sm sm:text-base">
+ <i class="fas fa-anchor"></i>
+ RESERVE YOUR BOAT
+ </a>
+ </div>
+ </nav>
+
+ <!-- HERO -->
+ <header class="hero-bg min-h-screen flex items-center pt-36 pb-12 md:pt-20 md:pb-0">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-6 py-2 rounded-full mb-6 border border-white/30">
+ <span class="text-[#ffd166]">★</span>
+ <span class="uppercase tracking-widest text-sm">Florida Keys Premier Boat Rentals</span>
+ </div>
+
+ <h1 class="text-6xl md:text-7xl font-bold leading-none mb-6">
+ CRUISE THE<br>
+ <span class="neon-text text-[#2ee6d6]">FLORIDA KEYS</span>
+ </h1>
+
+ <p class="max-w-2xl mx-auto text-xl text-gray-200 mb-10">
+ Rent the perfect boat in Key Largo, Islamorada, Marathon, Key West, Big Pine Key, Tavernier & everywhere in between.
+ Center consoles, pontoons, fishing boats & luxury yachts.
+ </p>
+
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
+ <a href="#book"
+ class="bg-[#ff7a59] text-[#031621] px-10 py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-3 hover:bg-[#ffd166] transition-all">
+ <i class="fas fa-calendar-alt"></i>
+ Book Your Adventure
+ </a>
+ <a href="#fleet"
+ class="border-2 border-white/70 hover:border-[#2ee6d6] hover:text-[#2ee6d6] px-10 py-5 rounded-2xl font-semibold text-lg flex items-center justify-center gap-3 transition-all">
+ See Our Fleet
+ </a>
+ </div>
+
+ <div class="mt-16 flex justify-center gap-8 text-sm">
+ <div class="flex items-center gap-2">
+ <i class="fas fa-map-marker-alt text-[#2ee6d6]"></i>
+ <span>All Florida Keys</span>
+ </div>
+ <div class="flex items-center gap-2">
+ <i class="fas fa-clock text-[#2ee6d6]"></i>
+ <span>Daily Rentals & Charters</span>
+ </div>
+ <div class="flex items-center gap-2">
+ <i class="fas fa-star text-[#ffd166]"></i>
+ <span>5-Star Rated</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="hidden md:flex absolute bottom-10 left-1/2 -translate-x-1/2 flex-col items-center">
+ <div class="text-xs tracking-widest mb-2">SCROLL TO EXPLORE</div>
+ <div class="w-6 h-10 border-2 border-white/50 rounded-full flex items-center justify-center">
+ <div class="w-1 h-2 bg-white rounded-full animate-bounce"></div>
+ </div>
+ </div>
+ </header>
+
+ <!-- TRUST BAR -->
+ <div class="bg-[#083b4c]/80 py-6 border-b border-white/10">
+ <div class="max-w-7xl mx-auto px-6 flex flex-wrap justify-center gap-x-12 gap-y-4 items-center text-sm opacity-75">
+ <div class="flex items-center gap-3">
+ <i class="fas fa-check text-[#48d597]"></i>
+ <span>Captained & Bareboat</span>
+ </div>
+ <div class="flex items-center gap-3">
+ <i class="fas fa-check text-[#48d597]"></i>
+ <span>Insurance Included</span>
+ </div>
+ <div class="flex items-center gap-3">
+ <i class="fas fa-check text-[#48d597]"></i>
+ <span>Free Fuel on Select Boats</span>
+ </div>
+ <div class="flex items-center gap-3">
+ <i class="fas fa-check text-[#48d597]"></i>
+ <span>24/7 Support</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- LOCATIONS -->
+ <section id="locations" class="py-24 bg-[#04202e]">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <span class="uppercase text-[#ffd166] tracking-widest text-sm">Serving All The Keys</span>
+ <h2 class="text-5xl font-bold mt-3">Florida Keys Boat Rentals</h2>
+ </div>
+
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">🏝️</div>
+ <h3 class="font-bold">Key Largo</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">Upper Keys</p>
+ </div>
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">🌴</div>
+ <h3 class="font-bold">Islamorada</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">Sportfishing Capital</p>
+ </div>
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">🐟</div>
+ <h3 class="font-bold">Marathon</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">Middle Keys</p>
+ </div>
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">🌅</div>
+ <h3 class="font-bold">Key West</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">Southernmost Point</p>
+ </div>
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">🦀</div>
+ <h3 class="font-bold">Big Pine Key</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">Lower Keys</p>
+ </div>
+ <div class="bg-[#0a5c67]/25 hover:bg-[#0a5c67]/40 transition-all rounded-3xl p-8 text-center border border-transparent hover:border-[#ff7a59]/40">
+ <div class="text-4xl mb-4">⛵</div>
+ <h3 class="font-bold">Tavernier</h3>
+ <p class="text-xs text-[#2ee6d6] mt-1">& All Keys</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- FLEET -->
+ <section id="fleet" class="py-24 bg-[#06283d]">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <span class="uppercase text-[#ffd166] tracking-widest text-sm">Our Fleet</span>
+ <h2 class="text-5xl font-bold mt-3">Choose Your Perfect Boat</h2>
+ </div>
+
+ <div class="grid md:grid-cols-3 gap-8">
+ <!-- Boat 1 -->
+ <div class="boat-card bg-white/5 rounded-3xl overflow-hidden border border-[#2ee6d6]/15">
+ <img src="https://picsum.photos/id/1015/800/600" alt="Center Console Boat Rental Florida Keys"
+ class="w-full h-64 object-cover">
+ <div class="p-8">
+ <div class="flex justify-between items-start">
+ <div>
+ <h3 class="text-2xl font-bold">Reef Runner</h3>
+ <p class="text-[#2ee6d6]">25ft Center Console</p>
+ </div>
+ <div class="text-right">
+ <div class="text-3xl font-bold">$399</div>
+ <div class="text-xs">/ day</div>
+ </div>
+ </div>
+ <div class="flex gap-4 text-sm mt-6">
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">6 Passengers</div>
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">Fishing Ready</div>
+ </div>
+ <a href="#book" class="mt-8 block text-center bg-[#ff7a59] text-[#031621] py-4 rounded-2xl font-bold hover:bg-[#ffd166] transition-all">Book This Boat</a>
+ </div>
+ </div>
+
+ <!-- Boat 2 -->
+ <div class="boat-card bg-white/5 rounded-3xl overflow-hidden border border-[#2ee6d6]/15">
+ <img src="https://picsum.photos/id/201/800/600" alt="Pontoon Boat Rental Islamorada Marathon"
+ class="w-full h-64 object-cover">
+ <div class="p-8">
+ <div class="flex justify-between items-start">
+ <div>
+ <h3 class="text-2xl font-bold">Tiki Cruiser</h3>
+ <p class="text-[#2ee6d6]">22ft Pontoon</p>
+ </div>
+ <div class="text-right">
+ <div class="text-3xl font-bold">$299</div>
+ <div class="text-xs">/ day</div>
+ </div>
+ </div>
+ <div class="flex gap-4 text-sm mt-6">
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">10 Passengers</div>
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">Party Boat</div>
+ </div>
+ <a href="#book" class="mt-8 block text-center bg-[#ff7a59] text-[#031621] py-4 rounded-2xl font-bold hover:bg-[#ffd166] transition-all">Book This Boat</a>
+ </div>
+ </div>
+
+ <!-- Boat 3 -->
+ <div class="boat-card bg-white/5 rounded-3xl overflow-hidden border border-[#2ee6d6]/15">
+ <img src="https://picsum.photos/id/106/800/600" alt="Luxury Yacht Charter Key West"
+ class="w-full h-64 object-cover">
+ <div class="p-8">
+ <div class="flex justify-between items-start">
+ <div>
+ <h3 class="text-2xl font-bold">Sunset Queen</h3>
+ <p class="text-[#2ee6d6]">32ft Twin Engine</p>
+ </div>
+ <div class="text-right">
+ <div class="text-3xl font-bold">$699</div>
+ <div class="text-xs">/ day</div>
+ </div>
+ </div>
+ <div class="flex gap-4 text-sm mt-6">
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">8 Passengers</div>
+ <div class="bg-white/10 px-4 py-2 rounded-2xl">Luxury</div>
+ </div>
+ <a href="#book" class="mt-8 block text-center bg-[#ff7a59] text-[#031621] py-4 rounded-2xl font-bold hover:bg-[#ffd166] transition-all">Book This Boat</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- EXPERIENCES -->
+ <section id="experiences" class="py-24 bg-[#04202e]">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-16 items-center">
+ <div>
+ <h2 class="text-5xl font-bold leading-tight mb-8">Sun, Sea & <span class="text-[#ff7a59]">Tiki Vibes</span></h2>
+ <div class="space-y-8">
+ <div class="flex gap-6">
+ <div class="text-5xl">🐠</div>
+ <div>
+ <h3 class="text-2xl font-semibold">Snorkel & Reef Tours</h3>
+ <p class="text-[#c7e7e4]">Explore the beautiful coral reefs of the Florida Keys with our knowledgeable captains.</p>
+ </div>
+ </div>
+ <div class="flex gap-6">
+ <div class="text-5xl">🎣</div>
+ <div>
+ <h3 class="text-2xl font-semibold">Sport Fishing Charters</h3>
+ <p class="text-[#c7e7e4]">Tarpon, sailfish, snapper, and more in the legendary waters of Islamorada and Marathon.</p>
+ </div>
+ </div>
+ <div class="flex gap-6">
+ <div class="text-5xl">🌴</div>
+ <div>
+ <h3 class="text-2xl font-semibold">Sunset Cruises</h3>
+ <p class="text-[#c7e7e4]">Private sunset cruises with tiki drinks and unforgettable Key West views.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="relative">
+ <img src="https://picsum.photos/id/866/800/900" alt="Florida Keys Sunset Boat Rental"
+ class="rounded-3xl shadow-2xl">
+ <div class="absolute -bottom-6 -right-6 bg-[#06283d] border border-[#ff7a59] p-6 rounded-3xl max-w-[220px]">
+ <div class="text-[#ffd166] text-sm mb-1">4.98 • 247 reviews</div>
+ <div class="text-2xl font-bold">"Best day of our entire vacation!"</div>
+ <div class="text-xs mt-4">- Sarah M., Chicago</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- BOOKING CTA -->
+ <section id="book" class="py-28 bg-[#031621]">
+ <div class="max-w-4xl mx-auto px-6 text-center">
+ <h2 class="text-6xl font-bold mb-6">Ready to Hit the Water?</h2>
+ <p class="text-2xl text-gray-300 mb-12">Book your Florida Keys boat rental in under 2 minutes</p>
+
+ <div class="bg-[#0a5c67]/25 backdrop-blur-xl border border-[#2ee6d6]/20 rounded-3xl p-12 max-w-2xl mx-auto">
+ <form class="space-y-8">
+ <div class="grid grid-cols-2 gap-6">
+ <div>
+ <label class="block text-sm mb-2 text-[#ffd166]">Pickup Location</label>
+ <select class="w-full bg-[#031621] border border-white/30 rounded-2xl px-6 py-4 focus:outline-none focus:border-[#ff7a59]">
+ <option>Key Largo</option>
+ <option>Islamorada</option>
+ <option>Marathon</option>
+ <option>Key West</option>
+ <option>Big Pine Key</option>
+ </select>
+ </div>
+ <div>
+ <label class="block text-sm mb-2 text-[#ffd166]">Date</label>
+ <input type="date" class="w-full bg-[#031621] border border-white/30 rounded-2xl px-6 py-4 focus:outline-none focus:border-[#ff7a59]">
+ </div>
+ </div>
+
+ <div>
+ <label class="block text-sm mb-2 text-[#ffd166]">Boat Type</label>
+ <div class="flex flex-wrap gap-3">
+ <button type="button" onclick="this.classList.toggle('selected-boat-type')"
+ class="bg-white/10 hover:bg-white/20 transition-colors px-6 py-3 rounded-2xl">Center Console</button>
+ <button type="button" onclick="this.classList.toggle('selected-boat-type')"
+ class="bg-white/10 hover:bg-white/20 transition-colors px-6 py-3 rounded-2xl">Pontoon</button>
+ <button type="button" onclick="this.classList.toggle('selected-boat-type')"
+ class="bg-white/10 hover:bg-white/20 transition-colors px-6 py-3 rounded-2xl">Fishing</button>
+ <button type="button" onclick="this.classList.toggle('selected-boat-type')"
+ class="bg-white/10 hover:bg-white/20 transition-colors px-6 py-3 rounded-2xl">Luxury</button>
+ </div>
+ </div>
+
+ <button type="submit"
+ class="w-full bg-[#ff7a59] text-[#031621] font-bold text-2xl py-7 rounded-3xl hover:bg-[#ffd166] transition-all">
+ FIND AVAILABLE BOATS →
+ </button>
+ </form>
+ </div>
+
+ <p class="text-xs text-gray-500 mt-8">✓ Instant confirmation • ✓ Free cancellation up to 48hrs • ✓ Best price guarantee</p>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer class="bg-[#031621] py-20 border-t border-[#2ee6d6]/15">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-4 gap-12">
+ <div>
+ <div class="flex items-center gap-3 mb-6">
+ <div class="w-9 h-9 bg-[#ff7a59] text-[#031621] rounded-full flex items-center justify-center text-3xl">🌴</div>
+ <span class="text-3xl font-bold tracking-tighter">TIKI TIDE</span>
+ </div>
+ <p class="text-gray-400">Premium boat rentals across the entire Florida Keys.</p>
+ </div>
+
+ <div>
+ <h4 class="font-bold mb-6">QUICK LINKS</h4>
+ <ul class="space-y-3 text-gray-400">
+ <li><a href="#" class="hover:text-white">Boat Rentals</a></li>
+ <li><a href="#" class="hover:text-white">Fishing Charters</a></li>
+ <li><a href="#" class="hover:text-white">Sunset Cruises</a></li>
+ <li><a href="#" class="hover:text-white">Snorkeling Tours</a></li>
+ </ul>
+ </div>
+
+ <div>
+ <h4 class="font-bold mb-6">KEYS WE SERVE</h4>
+ <ul class="space-y-3 text-gray-400">
+ <li>Key Largo • Tavernier</li>
+ <li>Islamorada</li>
+ <li>Marathon</li>
+ <li>Big Pine Key</li>
+ <li>Key West</li>
+ </ul>
+ </div>
+
+ <div>
+ <h4 class="font-bold mb-6">CONTACT</h4>
+ <a href="tel:3055551234" class="block text-2xl hover:text-[#2ee6d6]">(305) 555-1234</a>
+ <a href="mailto:[email protected]" class="text-[#ff7a59] hover:underline">[email protected]</a>
+ <div class="mt-8 flex gap-4">
+ <i class="fab fa-instagram text-2xl hover:text-[#2ee6d6] cursor-pointer"></i>
+ <i class="fab fa-facebook text-2xl hover:text-[#2ee6d6] cursor-pointer"></i>
+ </div>
+ </div>
+ </div>
+
+ <div class="text-center text-xs text-gray-500 mt-20">
+ © 2026 Tiki Tide Boat Rentals • All Rights Reserved • Florida Keys, FL
+ </div>
+ </div>
+ </footer>
+
+ <script>
+ console.log('%cTiki Tide Boat Rentals Landing Page Ready 🌴', 'color: #2ee6d6; font-size: 14px;');
+ </script>
+</body>
+</html>
diff --git a/index2.html b/index2.html
new file mode 100644
index 0000000..f99cdb8
--- /dev/null
+++ b/index2.html
@@ -0,0 +1,1481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <!-- ═══════════════════════════════════════════════════
+ PRIMARY SEO
+ ═══════════════════════════════════════════════════ -->
+ <title>Tiki Tide Boat Rentals | Florida Keys – Key West, Islamorada, Marathon & More</title>
+ <meta name="description" content="Tiki Tide Boat Rentals – the Florida Keys' premier boat rental company. Serving Key West, Islamorada, Marathon, Tavernier, Big Pine Key, the Upper Keys, Lower Keys & all of the Florida Keys. Book your sunset cruise, snorkel adventure, or full-day charter today." />
+ <meta name="keywords" content="boat rental Florida Keys, boat rental Key West, boat rental Islamorada, boat rental Marathon, boat rental Tavernier, boat rental Big Pine Key, boat rental Upper Keys, boat rental Lower Keys, boat rental Key Largo, boat rental Cudjoe Key, boat rental Summerland Key, boat rental Sugarloaf Key, boat rental Stock Island, Florida Keys boat charter, pontoon rental Florida Keys, center console rental Keys, sunset cruise Florida Keys, snorkeling Florida Keys, fishing charter Florida Keys, boat rental near me Florida Keys, Tiki Tide Boat Rentals" />
+ <meta name="robots" content="index, follow" />
+ <meta name="author" content="Tiki Tide Boat Rentals" />
+ <link rel="canonical" href="https://www.tikitideboatrentals.com/" />
+
+ <!-- ═══════════════════════════════════════════════════
+ OPEN GRAPH / SOCIAL
+ ═══════════════════════════════════════════════════ -->
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://www.tikitideboatrentals.com/" />
+ <meta property="og:title" content="Tiki Tide Boat Rentals | Florida Keys Boat Rentals" />
+ <meta property="og:description" content="Explore the Florida Keys by boat. Serving Key West, Islamorada, Marathon, Big Pine, Tavernier & all the Keys. Reserve your adventure today!" />
+ <meta property="og:image" content="https://www.tikitideboatrentals.com/og-image.jpg" />
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta property="twitter:title" content="Tiki Tide Boat Rentals | Florida Keys" />
+ <meta property="twitter:description" content="The Florida Keys' favorite boat rental. Book now – Key West, Islamorada, Marathon & beyond." />
+
+ <!-- ═══════════════════════════════════════════════════
+ LOCAL BUSINESS SCHEMA
+ ═══════════════════════════════════════════════════ -->
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@type": "LocalBusiness",
+ "name": "Tiki Tide Boat Rentals",
+ "description": "Premier boat rental company serving the entire Florida Keys including Key West, Islamorada, Marathon, Big Pine Key, Tavernier, Key Largo, and all the Upper and Lower Keys.",
+ "url": "https://www.tikitideboatrentals.com",
+ "telephone": "+1-305-555-0190",
+ "address": {
+ "@type": "PostalAddress",
+ "streetAddress": "1 Tiki Tide Marina Way",
+ "addressLocality": "Islamorada",
+ "addressRegion": "FL",
+ "postalCode": "33036",
+ "addressCountry": "US"
+ },
+ "geo": {
+ "@type": "GeoCoordinates",
+ "latitude": 24.9248,
+ "longitude": -80.6318
+ },
+ "openingHours": "Mo-Su 07:00-19:00",
+ "priceRange": "$$",
+ "areaServed": [
+ "Key West, FL", "Islamorada, FL", "Marathon, FL",
+ "Big Pine Key, FL", "Tavernier, FL", "Key Largo, FL",
+ "Cudjoe Key, FL", "Summerland Key, FL", "Sugarloaf Key, FL",
+ "Stock Island, FL", "Upper Florida Keys", "Lower Florida Keys",
+ "Florida Keys, FL"
+ ],
+ "sameAs": [
+ "https://www.facebook.com/tikitideboatrentals",
+ "https://www.instagram.com/tikitideboatrentals"
+ ]
+ }
+ </script>
+
+ <!-- ═══════════════════════════════════════════════════
+ FONTS
+ ═══════════════════════════════════════════════════ -->
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Bebas+Neue&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet" />
+
+ <style>
+ /* ═══════════════════════════════════════════
+ DESIGN TOKENS – Miami Vice Tropical Keys
+ ═══════════════════════════════════════════ */
+ :root {
+ --pink: #FF2D78;
+ --cyan: #00E5D4;
+ --cyan-dim: #00B4AA;
+ --navy: #07101F;
+ --navy-mid: #0D1E35;
+ --navy-light: #122840;
+ --coral: #FF6B4A;
+ --gold: #FFD166;
+ --white: #F0F8FF;
+ --muted: rgba(240,248,255,0.55);
+
+ --font-display: 'Pacifico', cursive;
+ --font-head: 'Bebas Neue', sans-serif;
+ --font-body: 'Jost', sans-serif;
+
+ --glow-pink: 0 0 30px rgba(255,45,120,0.5), 0 0 60px rgba(255,45,120,0.2);
+ --glow-cyan: 0 0 30px rgba(0,229,212,0.5), 0 0 60px rgba(0,229,212,0.2);
+ }
+
+ /* ═══════════════════════════════════════════
+ RESET & BASE
+ ═══════════════════════════════════════════ */
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+ html { scroll-behavior: smooth; }
+
+ body {
+ background: var(--navy);
+ color: var(--white);
+ font-family: var(--font-body);
+ font-weight: 300;
+ overflow-x: hidden;
+ line-height: 1.65;
+ }
+
+ a { color: inherit; text-decoration: none; }
+
+ /* ═══════════════════════════════════════════
+ ANIMATED GRADIENT BACKGROUND (global)
+ ═══════════════════════════════════════════ */
+ body::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 50% at 10% 20%, rgba(255,45,120,0.07) 0%, transparent 60%),
+ radial-gradient(ellipse 60% 40% at 90% 80%, rgba(0,229,212,0.07) 0%, transparent 60%);
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ /* ═══════════════════════════════════════════
+ NAVBAR
+ ═══════════════════════════════════════════ */
+ nav {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.2rem 5%;
+ background: rgba(7,16,31,0.7);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
+ border-bottom: 1px solid rgba(0,229,212,0.12);
+ animation: fadeDown 0.8s ease both;
+ }
+
+ .nav-logo {
+ font-family: var(--font-display);
+ font-size: 1.45rem;
+ background: linear-gradient(135deg, var(--pink), var(--cyan));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ filter: drop-shadow(0 0 8px rgba(255,45,120,0.4));
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2.2rem;
+ list-style: none;
+ font-size: 0.82rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-weight: 500;
+ }
+
+ .nav-links a {
+ color: var(--muted);
+ transition: color 0.25s;
+ }
+ .nav-links a:hover { color: var(--cyan); }
+
+ .nav-cta {
+ background: linear-gradient(135deg, var(--pink), #c4006a);
+ color: #fff !important;
+ padding: 0.5rem 1.3rem;
+ border-radius: 50px;
+ font-weight: 600 !important;
+ letter-spacing: 0.08em;
+ box-shadow: var(--glow-pink);
+ transition: transform 0.2s, box-shadow 0.2s !important;
+ }
+ .nav-cta:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0 40px rgba(255,45,120,0.7) !important;
+ }
+
+ /* ═══════════════════════════════════════════
+ HERO
+ ═══════════════════════════════════════════ */
+ .hero {
+ position: relative;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 0 5%;
+ overflow: hidden;
+ }
+
+ /* Animated sunset gradient sky */
+ .hero-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(180deg,
+ #060D1A 0%,
+ #0D1E35 20%,
+ #1A1040 40%,
+ #3D0F30 58%,
+ #7A1A2E 70%,
+ #C43B1E 82%,
+ #E8731A 90%,
+ #FFAA44 100%
+ );
+ z-index: -2;
+ }
+
+ /* Shimmering water at bottom */
+ .hero-water {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 22%;
+ background: linear-gradient(180deg, rgba(0,100,120,0.0), rgba(0,60,90,0.95));
+ z-index: -1;
+ }
+ .hero-water::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: repeating-linear-gradient(
+ 90deg,
+ transparent,
+ transparent 40px,
+ rgba(0,229,212,0.06) 40px,
+ rgba(0,229,212,0.06) 80px
+ );
+ animation: waterShimmer 4s linear infinite;
+ }
+
+ /* Sun glow */
+ .hero::after {
+ content: '';
+ position: absolute;
+ bottom: 18%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 220px;
+ height: 220px;
+ border-radius: 50%;
+ background: radial-gradient(circle, #FFD166 0%, #FF8C42 35%, transparent 70%);
+ filter: blur(30px);
+ opacity: 0.55;
+ z-index: -1;
+ animation: sunPulse 5s ease-in-out infinite;
+ }
+
+ /* Palm silhouettes */
+ .palm-left, .palm-right {
+ position: absolute;
+ bottom: 0;
+ width: 220px;
+ height: 420px;
+ z-index: 1;
+ pointer-events: none;
+ }
+ .palm-left { left: -20px; }
+ .palm-right { right: -20px; transform: scaleX(-1); }
+
+ .hero-content {
+ position: relative;
+ z-index: 2;
+ max-width: 860px;
+ }
+
+ .hero-eyebrow {
+ display: inline-block;
+ font-size: 0.72rem;
+ letter-spacing: 0.28em;
+ text-transform: uppercase;
+ color: var(--cyan);
+ border: 1px solid rgba(0,229,212,0.4);
+ padding: 0.35rem 1.2rem;
+ border-radius: 50px;
+ margin-bottom: 1.4rem;
+ animation: fadeUp 0.9s 0.2s ease both;
+ }
+
+ .hero h1 {
+ font-family: var(--font-display);
+ font-size: clamp(3rem, 8vw, 6.2rem);
+ line-height: 1.1;
+ background: linear-gradient(145deg, #FFFFFF 0%, #FFD166 40%, #FF6B4A 65%, #FF2D78 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ filter: drop-shadow(0 4px 20px rgba(255,45,120,0.3));
+ animation: fadeUp 1s 0.35s ease both;
+ }
+
+ .hero-sub {
+ font-family: var(--font-head);
+ font-size: clamp(1rem, 2.5vw, 1.6rem);
+ letter-spacing: 0.22em;
+ color: var(--cyan);
+ text-transform: uppercase;
+ margin-top: 0.6rem;
+ animation: fadeUp 1s 0.5s ease both;
+ }
+
+ .hero-desc {
+ max-width: 580px;
+ margin: 1.6rem auto 2.4rem;
+ font-size: 1.05rem;
+ color: rgba(240,248,255,0.75);
+ animation: fadeUp 1s 0.65s ease both;
+ }
+
+ .hero-btns {
+ display: flex;
+ gap: 1.2rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ animation: fadeUp 1s 0.8s ease both;
+ }
+
+ .btn-primary {
+ background: linear-gradient(135deg, var(--pink), #c4006a);
+ color: #fff;
+ padding: 0.9rem 2.4rem;
+ border-radius: 50px;
+ font-weight: 600;
+ font-size: 0.95rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ box-shadow: var(--glow-pink);
+ transition: transform 0.25s, box-shadow 0.25s;
+ cursor: pointer;
+ border: none;
+ }
+ .btn-primary:hover {
+ transform: translateY(-3px) scale(1.02);
+ box-shadow: 0 0 50px rgba(255,45,120,0.7);
+ }
+
+ .btn-outline {
+ background: transparent;
+ color: var(--cyan);
+ padding: 0.9rem 2.4rem;
+ border-radius: 50px;
+ font-weight: 500;
+ font-size: 0.95rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ border: 1.5px solid var(--cyan);
+ box-shadow: var(--glow-cyan);
+ transition: transform 0.25s, background 0.25s, color 0.25s;
+ cursor: pointer;
+ }
+ .btn-outline:hover {
+ background: var(--cyan);
+ color: var(--navy);
+ transform: translateY(-3px) scale(1.02);
+ }
+
+ /* Scroll indicator */
+ .scroll-hint {
+ position: absolute;
+ bottom: 2.5rem;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.68rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+ animation: fadeUp 1s 1.2s ease both;
+ z-index: 2;
+ }
+ .scroll-hint span {
+ display: block;
+ width: 1px;
+ height: 36px;
+ background: linear-gradient(to bottom, var(--cyan), transparent);
+ animation: scrollLine 1.8s ease-in-out infinite;
+ }
+
+ /* ═══════════════════════════════════════════
+ MARQUEE STRIP
+ ═══════════════════════════════════════════ */
+ .marquee-strip {
+ background: linear-gradient(90deg, var(--pink), var(--coral), var(--gold), var(--cyan), var(--pink));
+ background-size: 300%;
+ animation: gradientMove 6s linear infinite;
+ padding: 0.75rem 0;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .marquee-inner {
+ display: inline-flex;
+ gap: 0;
+ animation: marquee 30s linear infinite;
+ }
+
+ .marquee-inner span {
+ font-family: var(--font-head);
+ font-size: 0.9rem;
+ letter-spacing: 0.18em;
+ color: var(--navy);
+ padding: 0 2.5rem;
+ }
+
+ .marquee-dot {
+ color: var(--navy-mid) !important;
+ }
+
+ /* ═══════════════════════════════════════════
+ SECTION SHARED
+ ═══════════════════════════════════════════ */
+ section {
+ position: relative;
+ z-index: 1;
+ }
+
+ .section-tag {
+ display: inline-block;
+ font-size: 0.68rem;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ color: var(--cyan);
+ margin-bottom: 0.7rem;
+ }
+
+ h2.section-title {
+ font-family: var(--font-head);
+ font-size: clamp(2.2rem, 5vw, 3.8rem);
+ letter-spacing: 0.05em;
+ line-height: 1;
+ color: var(--white);
+ }
+
+ h2.section-title em {
+ font-style: normal;
+ color: var(--pink);
+ }
+
+ .section-desc {
+ color: var(--muted);
+ font-size: 1rem;
+ max-width: 520px;
+ margin-top: 0.9rem;
+ }
+
+ /* ═══════════════════════════════════════════
+ FLEET
+ ═══════════════════════════════════════════ */
+ .fleet {
+ padding: 7rem 5%;
+ background: var(--navy-mid);
+ }
+
+ .fleet-header {
+ text-align: center;
+ margin-bottom: 4rem;
+ }
+
+ .fleet-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .boat-card {
+ background: var(--navy-light);
+ border: 1px solid rgba(0,229,212,0.14);
+ border-radius: 20px;
+ overflow: hidden;
+ transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+ }
+ .boat-card:hover {
+ transform: translateY(-6px);
+ border-color: rgba(0,229,212,0.4);
+ box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--glow-cyan);
+ }
+
+ .boat-img {
+ width: 100%;
+ height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 5rem;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .boat-img-pontoon { background: linear-gradient(135deg, #0D2A40, #1A4060); }
+ .boat-img-center { background: linear-gradient(135deg, #1A0D30, #3D1A50); }
+ .boat-img-kayak { background: linear-gradient(135deg, #0D2A20, #1A5040); }
+ .boat-img-sailboat { background: linear-gradient(135deg, #2A1A0D, #503020); }
+
+ .boat-img::after {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 40%;
+ background: linear-gradient(to top, var(--navy-light), transparent);
+ }
+
+ .boat-body {
+ padding: 1.5rem;
+ }
+
+ .boat-badge {
+ display: inline-block;
+ font-size: 0.63rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ background: rgba(255,45,120,0.15);
+ color: var(--pink);
+ border: 1px solid rgba(255,45,120,0.3);
+ padding: 0.25rem 0.75rem;
+ border-radius: 50px;
+ margin-bottom: 0.7rem;
+ }
+
+ .boat-name {
+ font-family: var(--font-head);
+ font-size: 1.6rem;
+ letter-spacing: 0.05em;
+ color: var(--white);
+ margin-bottom: 0.4rem;
+ }
+
+ .boat-desc {
+ font-size: 0.88rem;
+ color: var(--muted);
+ line-height: 1.6;
+ margin-bottom: 1.2rem;
+ }
+
+ .boat-specs {
+ display: flex;
+ gap: 1.4rem;
+ font-size: 0.78rem;
+ color: var(--cyan);
+ margin-bottom: 1.4rem;
+ }
+
+ .boat-spec { display: flex; align-items: center; gap: 0.35rem; }
+
+ .boat-price {
+ display: flex;
+ align-items: baseline;
+ gap: 0.3rem;
+ }
+ .boat-price-amount {
+ font-family: var(--font-head);
+ font-size: 2rem;
+ color: var(--gold);
+ }
+ .boat-price-unit {
+ font-size: 0.78rem;
+ color: var(--muted);
+ }
+
+ .boat-book {
+ width: 100%;
+ margin-top: 1.2rem;
+ padding: 0.75rem;
+ background: linear-gradient(135deg, var(--pink), #c4006a);
+ color: white;
+ border: none;
+ border-radius: 12px;
+ font-family: var(--font-body);
+ font-size: 0.85rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: opacity 0.2s, transform 0.2s;
+ }
+ .boat-book:hover { opacity: 0.88; transform: scale(1.01); }
+
+ /* ═══════════════════════════════════════════
+ EXPERIENCES / ADVENTURES
+ ═══════════════════════════════════════════ */
+ .adventures {
+ padding: 7rem 5%;
+ background: var(--navy);
+ }
+
+ .adventures-inner {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5rem;
+ align-items: center;
+ }
+
+ .adventures-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-top: 2rem;
+ }
+
+ .adv-item {
+ display: flex;
+ gap: 1.2rem;
+ align-items: flex-start;
+ padding: 1.2rem;
+ border-radius: 16px;
+ background: rgba(13,30,53,0.6);
+ border: 1px solid rgba(0,229,212,0.1);
+ transition: border-color 0.3s, background 0.3s;
+ cursor: default;
+ }
+ .adv-item:hover {
+ border-color: rgba(0,229,212,0.35);
+ background: rgba(13,30,53,0.9);
+ }
+
+ .adv-icon {
+ font-size: 2rem;
+ flex-shrink: 0;
+ width: 52px;
+ height: 52px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0,229,212,0.08);
+ border-radius: 12px;
+ }
+
+ .adv-name {
+ font-family: var(--font-head);
+ font-size: 1.2rem;
+ letter-spacing: 0.06em;
+ color: var(--white);
+ margin-bottom: 0.25rem;
+ }
+
+ .adv-desc { font-size: 0.87rem; color: var(--muted); }
+
+ /* Right visual panel */
+ .adventures-visual {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+ }
+
+ .adv-card-big {
+ border-radius: 24px;
+ overflow: hidden;
+ height: 260px;
+ display: flex;
+ align-items: flex-end;
+ padding: 1.8rem;
+ position: relative;
+ background: linear-gradient(145deg, #0D2A40, #1A3050);
+ border: 1px solid rgba(0,229,212,0.15);
+ }
+
+ .adv-card-big::before {
+ content: '🌅';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -55%);
+ font-size: 7rem;
+ filter: drop-shadow(0 0 20px rgba(255,180,60,0.6));
+ }
+
+ .adv-card-label {
+ position: relative;
+ z-index: 1;
+ }
+ .adv-card-label strong {
+ display: block;
+ font-family: var(--font-head);
+ font-size: 1.4rem;
+ letter-spacing: 0.06em;
+ color: var(--gold);
+ }
+ .adv-card-label span { font-size: 0.82rem; color: var(--muted); }
+
+ .adv-card-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1.2rem;
+ }
+
+ .adv-card-sm {
+ border-radius: 18px;
+ height: 150px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ border: 1px solid rgba(255,45,120,0.15);
+ font-size: 3rem;
+ background: linear-gradient(135deg, rgba(13,30,53,0.8), rgba(30,10,40,0.8));
+ transition: transform 0.3s, border-color 0.3s;
+ }
+ .adv-card-sm:hover { transform: scale(1.03); border-color: rgba(255,45,120,0.4); }
+
+ .adv-card-sm span {
+ font-family: var(--font-head);
+ font-size: 0.85rem;
+ letter-spacing: 0.1em;
+ color: var(--pink);
+ }
+
+ /* ═══════════════════════════════════════════
+ LOCATIONS / SEO SECTION
+ ═══════════════════════════════════════════ */
+ .locations {
+ padding: 6rem 5%;
+ background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
+ text-align: center;
+ }
+
+ .locations-header { margin-bottom: 3.5rem; }
+
+ .locations-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1rem;
+ max-width: 900px;
+ margin: 0 auto 3rem;
+ }
+
+ .loc-chip {
+ padding: 0.55rem 1.4rem;
+ border-radius: 50px;
+ background: var(--navy-light);
+ border: 1px solid rgba(0,229,212,0.2);
+ font-size: 0.85rem;
+ color: var(--muted);
+ font-weight: 400;
+ transition: all 0.25s;
+ cursor: default;
+ }
+ .loc-chip:hover {
+ background: rgba(0,229,212,0.1);
+ border-color: var(--cyan);
+ color: var(--cyan);
+ transform: translateY(-2px);
+ }
+ .loc-chip.featured {
+ background: rgba(255,45,120,0.12);
+ border-color: rgba(255,45,120,0.35);
+ color: var(--pink);
+ }
+
+ /* Map illustration */
+ .keys-map {
+ max-width: 700px;
+ margin: 0 auto;
+ background: var(--navy-light);
+ border: 1px solid rgba(0,229,212,0.15);
+ border-radius: 24px;
+ padding: 2rem 2.5rem;
+ text-align: left;
+ }
+
+ .keys-map-label {
+ font-family: var(--font-head);
+ font-size: 0.85rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--cyan);
+ margin-bottom: 1.2rem;
+ text-align: center;
+ }
+
+ /* SVG map path style */
+ .keys-road {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0;
+ font-size: 0.75rem;
+ letter-spacing: 0.05em;
+ }
+ .keys-stop {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.3rem;
+ }
+ .keys-stop-dot {
+ width: 12px; height: 12px;
+ border-radius: 50%;
+ background: var(--pink);
+ box-shadow: 0 0 10px var(--pink);
+ }
+ .keys-stop.secondary .keys-stop-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
+ .keys-stop-name {
+ color: var(--white);
+ font-weight: 500;
+ white-space: nowrap;
+ font-size: 0.78rem;
+ }
+ .keys-connector {
+ height: 2px;
+ width: 30px;
+ background: linear-gradient(90deg, var(--pink), var(--cyan));
+ flex-shrink: 0;
+ margin-top: -18px;
+ }
+
+ /* ═══════════════════════════════════════════
+ TESTIMONIALS
+ ═══════════════════════════════════════════ */
+ .testimonials {
+ padding: 7rem 5%;
+ background: var(--navy);
+ }
+
+ .testimonials-header { text-align: center; margin-bottom: 4rem; }
+
+ .reviews-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ max-width: 1100px;
+ margin: 0 auto;
+ }
+
+ .review-card {
+ background: var(--navy-light);
+ border: 1px solid rgba(0,229,212,0.12);
+ border-radius: 20px;
+ padding: 2rem;
+ position: relative;
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+ .review-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.4);
+ }
+ .review-card::before {
+ content: '"';
+ position: absolute;
+ top: -0.5rem;
+ left: 1.5rem;
+ font-size: 5rem;
+ line-height: 1;
+ color: var(--pink);
+ opacity: 0.3;
+ font-family: Georgia, serif;
+ }
+
+ .review-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 1rem; }
+ .review-text { font-size: 0.93rem; color: rgba(240,248,255,0.8); line-height: 1.7; margin-bottom: 1.3rem; font-style: italic; }
+ .review-author { font-weight: 600; font-size: 0.85rem; color: var(--cyan); }
+ .review-location { font-size: 0.78rem; color: var(--muted); }
+
+ /* ═══════════════════════════════════════════
+ BOOKING / CTA
+ ═══════════════════════════════════════════ */
+ .booking-cta {
+ padding: 8rem 5%;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ background: var(--navy-mid);
+ }
+
+ .booking-cta::before {
+ content: '';
+ position: absolute;
+ top: 50%; left: 50%;
+ transform: translate(-50%, -50%);
+ width: 600px; height: 600px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(255,45,120,0.1) 0%, transparent 65%);
+ pointer-events: none;
+ }
+
+ .booking-cta::after {
+ content: '';
+ position: absolute;
+ top: 50%; left: 60%;
+ transform: translate(-50%, -50%);
+ width: 400px; height: 400px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(0,229,212,0.08) 0%, transparent 65%);
+ pointer-events: none;
+ }
+
+ .cta-content { position: relative; z-index: 1; }
+
+ .cta-content h2 {
+ font-family: var(--font-display);
+ font-size: clamp(2rem, 5vw, 3.5rem);
+ background: linear-gradient(135deg, var(--white) 0%, var(--gold) 50%, var(--pink) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ .cta-content p {
+ color: var(--muted);
+ font-size: 1.05rem;
+ max-width: 500px;
+ margin: 0 auto 2.5rem;
+ }
+
+ .phone-number {
+ display: block;
+ font-family: var(--font-head);
+ font-size: clamp(1.8rem, 4vw, 2.8rem);
+ letter-spacing: 0.1em;
+ color: var(--cyan);
+ text-shadow: var(--glow-cyan);
+ margin-bottom: 1.5rem;
+ transition: color 0.25s;
+ }
+ .phone-number:hover { color: var(--white); }
+
+ /* ═══════════════════════════════════════════
+ FOOTER
+ ═══════════════════════════════════════════ */
+ footer {
+ background: #040B15;
+ border-top: 1px solid rgba(0,229,212,0.1);
+ padding: 4rem 5% 2rem;
+ }
+
+ .footer-top {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding-bottom: 3rem;
+ border-bottom: 1px solid rgba(255,255,255,0.06);
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .footer-brand-name {
+ font-family: var(--font-display);
+ font-size: 1.6rem;
+ background: linear-gradient(135deg, var(--pink), var(--cyan));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-tagline { font-size: 0.88rem; color: var(--muted); line-height: 1.6; max-width: 240px; }
+
+ .footer-col h4 {
+ font-family: var(--font-head);
+ font-size: 0.9rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--cyan);
+ margin-bottom: 1.2rem;
+ }
+
+ .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
+ .footer-col ul li a { font-size: 0.85rem; color: var(--muted); transition: color 0.2s; }
+ .footer-col ul li a:hover { color: var(--white); }
+
+ .footer-bottom {
+ max-width: 1200px;
+ margin: 2rem auto 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ font-size: 0.78rem;
+ color: rgba(240,248,255,0.3);
+ }
+
+ .footer-bottom a { color: var(--cyan); }
+
+ /* ═══════════════════════════════════════════
+ KEYFRAMES
+ ═══════════════════════════════════════════ */
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ @keyframes fadeDown {
+ from { opacity: 0; transform: translateY(-20px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ @keyframes marquee {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+ }
+
+ @keyframes gradientMove {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 200% 50%; }
+ }
+
+ @keyframes waterShimmer {
+ from { background-position: 0 0; }
+ to { background-position: 80px 0; }
+ }
+
+ @keyframes sunPulse {
+ 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
+ 50% { opacity: 0.7; transform: translateX(-50%) scale(1.08); }
+ }
+
+ @keyframes scrollLine {
+ 0% { transform: scaleY(0); transform-origin: top; }
+ 50% { transform: scaleY(1); transform-origin: top; }
+ 51% { transform: scaleY(1); transform-origin: bottom; }
+ 100% { transform: scaleY(0); transform-origin: bottom; }
+ }
+
+ /* ═══════════════════════════════════════════
+ RESPONSIVE
+ ═══════════════════════════════════════════ */
+ @media (max-width: 900px) {
+ .adventures-inner { grid-template-columns: 1fr; gap: 3rem; }
+ .footer-top { grid-template-columns: 1fr 1fr; }
+ .nav-links { display: none; }
+ }
+
+ @media (max-width: 600px) {
+ .footer-top { grid-template-columns: 1fr; }
+ .adv-card-row { grid-template-columns: 1fr; }
+ }
+ </style>
+</head>
+<body>
+
+ <!-- ═══════════════════════════════════════════
+ NAVBAR
+ ═══════════════════════════════════════════ -->
+ <nav aria-label="Main navigation">
+ <a href="#" class="nav-logo" aria-label="Tiki Tide Boat Rentals Home">Tiki Tide</a>
+ <ul class="nav-links" role="list">
+ <li><a href="#fleet">Fleet</a></li>
+ <li><a href="#adventures">Adventures</a></li>
+ <li><a href="#locations">Locations</a></li>
+ <li><a href="#reviews">Reviews</a></li>
+ <li><a href="#book" class="nav-cta">Book Now</a></li>
+ </ul>
+ </nav>
+
+ <!-- ═══════════════════════════════════════════
+ HERO
+ ═══════════════════════════════════════════ -->
+ <section class="hero" id="home" aria-label="Hero section">
+ <div class="hero-bg" aria-hidden="true"></div>
+ <div class="hero-water" aria-hidden="true"></div>
+
+ <!-- Palm SVGs -->
+ <svg class="palm-left" aria-hidden="true" viewBox="0 0 220 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M80 420 L95 200 Q100 150 110 120" stroke="#0A3020" stroke-width="14" stroke-linecap="round" fill="none"/>
+ <path d="M110 120 Q80 80 20 60 Q60 90 90 130" fill="#0D4030" opacity="0.9"/>
+ <path d="M110 120 Q100 60 60 20 Q80 60 100 110" fill="#0A3828" opacity="0.85"/>
+ <path d="M110 120 Q140 70 160 30 Q140 70 118 118" fill="#0C402E" opacity="0.8"/>
+ <path d="M110 120 Q155 90 200 95 Q165 100 118 122" fill="#0A3A2A" opacity="0.75"/>
+ <path d="M110 120 Q75 110 30 125 Q70 110 108 124" fill="#0D4030" opacity="0.7"/>
+ <circle cx="110" cy="120" r="6" fill="#0A2A1A" opacity="0.5"/>
+ </svg>
+
+ <svg class="palm-right" aria-hidden="true" viewBox="0 0 220 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M80 420 L95 200 Q100 150 110 120" stroke="#0A3020" stroke-width="14" stroke-linecap="round" fill="none"/>
+ <path d="M110 120 Q80 80 20 60 Q60 90 90 130" fill="#0D4030" opacity="0.9"/>
+ <path d="M110 120 Q100 60 60 20 Q80 60 100 110" fill="#0A3828" opacity="0.85"/>
+ <path d="M110 120 Q140 70 160 30 Q140 70 118 118" fill="#0C402E" opacity="0.8"/>
+ <path d="M110 120 Q155 90 200 95 Q165 100 118 122" fill="#0A3A2A" opacity="0.75"/>
+ <path d="M110 120 Q75 110 30 125 Q70 110 108 124" fill="#0D4030" opacity="0.7"/>
+ <circle cx="110" cy="120" r="6" fill="#0A2A1A" opacity="0.5"/>
+ </svg>
+
+ <div class="hero-content">
+ <div class="hero-eyebrow">Florida Keys Premier Boat Rentals</div>
+ <h1>Tiki Tide<br>Boat Rentals</h1>
+ <p class="hero-sub">Key West · Islamorada · Marathon · The Upper Keys</p>
+ <p class="hero-desc">
+ Escape the ordinary. Rent a boat and explore the turquoise flats, hidden sandbars, and coral reefs of the Florida Keys — all at your own pace.
+ </p>
+ <div class="hero-btns">
+ <a href="#book" class="btn-primary">Book Your Adventure</a>
+ <a href="#fleet" class="btn-outline">View Our Fleet</a>
+ </div>
+ </div>
+
+ <div class="scroll-hint" aria-hidden="true">
+ <p>Scroll</p>
+ <span></span>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ MARQUEE
+ ═══════════════════════════════════════════ -->
+ <div class="marquee-strip" aria-hidden="true" role="presentation">
+ <div class="marquee-inner">
+ <!-- duplicated for seamless loop -->
+ <span>Key West</span><span class="marquee-dot">✦</span>
+ <span>Islamorada</span><span class="marquee-dot">✦</span>
+ <span>Marathon</span><span class="marquee-dot">✦</span>
+ <span>Big Pine Key</span><span class="marquee-dot">✦</span>
+ <span>Tavernier</span><span class="marquee-dot">✦</span>
+ <span>Key Largo</span><span class="marquee-dot">✦</span>
+ <span>Upper Keys</span><span class="marquee-dot">✦</span>
+ <span>Lower Keys</span><span class="marquee-dot">✦</span>
+ <span>Sugarloaf Key</span><span class="marquee-dot">✦</span>
+ <span>Stock Island</span><span class="marquee-dot">✦</span>
+ <span>Cudjoe Key</span><span class="marquee-dot">✦</span>
+ <span>Florida Bay</span><span class="marquee-dot">✦</span>
+ <span>Key West</span><span class="marquee-dot">✦</span>
+ <span>Islamorada</span><span class="marquee-dot">✦</span>
+ <span>Marathon</span><span class="marquee-dot">✦</span>
+ <span>Big Pine Key</span><span class="marquee-dot">✦</span>
+ <span>Tavernier</span><span class="marquee-dot">✦</span>
+ <span>Key Largo</span><span class="marquee-dot">✦</span>
+ <span>Upper Keys</span><span class="marquee-dot">✦</span>
+ <span>Lower Keys</span><span class="marquee-dot">✦</span>
+ <span>Sugarloaf Key</span><span class="marquee-dot">✦</span>
+ <span>Stock Island</span><span class="marquee-dot">✦</span>
+ <span>Cudjoe Key</span><span class="marquee-dot">✦</span>
+ <span>Florida Bay</span><span class="marquee-dot">✦</span>
+ </div>
+ </div>
+
+ <!-- ═══════════════════════════════════════════
+ FLEET
+ ═══════════════════════════════════════════ -->
+ <section class="fleet" id="fleet" aria-labelledby="fleet-heading">
+ <div class="fleet-header">
+ <span class="section-tag">Our Fleet</span>
+ <h2 class="section-title" id="fleet-heading">Choose Your <em>Ride</em></h2>
+ <p class="section-desc" style="margin: 0.9rem auto 0;">From laid-back pontoon cruises to fast center consoles built for fishing — we have the perfect boat for every Keys adventure.</p>
+ </div>
+
+ <div class="fleet-grid">
+ <article class="boat-card">
+ <div class="boat-img boat-img-pontoon" aria-label="Pontoon boat illustration">🚢</div>
+ <div class="boat-body">
+ <span class="boat-badge">Most Popular</span>
+ <h3 class="boat-name">Pontoon Party Barge</h3>
+ <p class="boat-desc">Perfect for families and groups. Cruise the backcountry, anchor up on a sandbar, or float through the mangrove channels at sunset.</p>
+ <div class="boat-specs">
+ <span class="boat-spec">👥 Up to 12</span>
+ <span class="boat-spec">⚡ 90 HP</span>
+ <span class="boat-spec">🕒 Half or Full Day</span>
+ </div>
+ <div class="boat-price">
+ <span class="boat-price-amount">$350</span>
+ <span class="boat-price-unit">/ half day</span>
+ </div>
+ <button class="boat-book" onclick="document.getElementById('book').scrollIntoView({behavior:'smooth'})">Reserve Now</button>
+ </div>
+ </article>
+
+ <article class="boat-card">
+ <div class="boat-img boat-img-center" aria-label="Center console boat illustration">⛵</div>
+ <div class="boat-body">
+ <span class="boat-badge">Angler's Pick</span>
+ <h3 class="boat-name">Center Console 24ft</h3>
+ <p class="boat-desc">Built for the flats and the offshore. Chase tarpon, bonefish, and permit through some of the world's most legendary fishing grounds.</p>
+ <div class="boat-specs">
+ <span class="boat-spec">👥 Up to 6</span>
+ <span class="boat-spec">⚡ 150 HP</span>
+ <span class="boat-spec">🐟 Fishing Gear Incl.</span>
+ </div>
+ <div class="boat-price">
+ <span class="boat-price-amount">$450</span>
+ <span class="boat-price-unit">/ half day</span>
+ </div>
+ <button class="boat-book" onclick="document.getElementById('book').scrollIntoView({behavior:'smooth'})">Reserve Now</button>
+ </div>
+ </article>
+
+ <article class="boat-card">
+ <div class="boat-img boat-img-kayak" aria-label="Kayak illustration">🛶</div>
+ <div class="boat-body">
+ <span class="boat-badge">Eco Adventure</span>
+ <h3 class="boat-name">Kayak & Paddleboard</h3>
+ <p class="boat-desc">Glide silently through mangrove tunnels and crystal flats. Spot dolphins, manatees, and sea turtles up close in a way no motorboat can.</p>
+ <div class="boat-specs">
+ <span class="boat-spec">👥 1–2</span>
+ <span class="boat-spec">🌿 Zero Emissions</span>
+ <span class="boat-spec">🐢 Wildlife-friendly</span>
+ </div>
+ <div class="boat-price">
+ <span class="boat-price-amount">$65</span>
+ <span class="boat-price-unit">/ half day</span>
+ </div>
+ <button class="boat-book" onclick="document.getElementById('book').scrollIntoView({behavior:'smooth'})">Reserve Now</button>
+ </div>
+ </article>
+
+ <article class="boat-card">
+ <div class="boat-img boat-img-sailboat" aria-label="Luxury deck boat illustration">🛥️</div>
+ <div class="boat-body">
+ <span class="boat-badge">Premium</span>
+ <h3 class="boat-name">Luxury Deck Boat 28ft</h3>
+ <p class="boat-desc">Our crown jewel. Premium sound system, built-in cooler, snorkeling gear, and a slide. Perfect for celebrations on the water.</p>
+ <div class="boat-specs">
+ <span class="boat-spec">👥 Up to 10</span>
+ <span class="boat-spec">⚡ 200 HP</span>
+ <span class="boat-spec">🎉 Party Ready</span>
+ </div>
+ <div class="boat-price">
+ <span class="boat-price-amount">$599</span>
+ <span class="boat-price-unit">/ half day</span>
+ </div>
+ <button class="boat-book" onclick="document.getElementById('book').scrollIntoView({behavior:'smooth'})">Reserve Now</button>
+ </div>
+ </article>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ ADVENTURES
+ ═══════════════════════════════════════════ -->
+ <section class="adventures" id="adventures" aria-labelledby="adv-heading">
+ <div class="adventures-inner">
+ <div>
+ <span class="section-tag">What To Do</span>
+ <h2 class="section-title" id="adv-heading">Keys <em>Adventures</em><br>Await You</h2>
+ <p class="section-desc">The Florida Keys is one of the most biodiverse marine ecosystems on Earth. Here's what's on the menu.</p>
+
+ <div class="adventures-list">
+ <div class="adv-item">
+ <div class="adv-icon">🐠</div>
+ <div>
+ <p class="adv-name">Reef Snorkeling</p>
+ <p class="adv-desc">Florida's living coral reef — the only one in the continental US — begins just offshore. Anchor up and explore with our included gear.</p>
+ </div>
+ </div>
+ <div class="adv-item">
+ <div class="adv-icon">🎣</div>
+ <div>
+ <p class="adv-name">World-Class Fishing</p>
+ <p class="adv-desc">Islamorada is the Sport Fishing Capital of the World. Pursue tarpon on the flats or offshore mahi, wahoo, and sailfish.</p>
+ </div>
+ </div>
+ <div class="adv-item">
+ <div class="adv-icon">🌅</div>
+ <div>
+ <p class="adv-name">Sunset Cruises</p>
+ <p class="adv-desc">Watch the sun melt into the Gulf of Mexico from the deck of your private boat. Bring drinks — we'll handle the backdrop.</p>
+ </div>
+ </div>
+ <div class="adv-item">
+ <div class="adv-icon">🐬</div>
+ <div>
+ <p class="adv-name">Dolphin & Wildlife Tours</p>
+ <p class="adv-desc">Cruise the backcountry flats and encounter wild dolphins, manatees, osprey, and sea turtles in their natural habitat.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="adventures-visual">
+ <div class="adv-card-big">
+ <div class="adv-card-label">
+ <strong>Florida Keys Sunset</strong>
+ <span>Unforgettable views every evening</span>
+ </div>
+ </div>
+ <div class="adv-card-row">
+ <div class="adv-card-sm">🐠<span>Reef Life</span></div>
+ <div class="adv-card-sm">🎣<span>Deep Fishing</span></div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ LOCATIONS (SEO section)
+ ═══════════════════════════════════════════ -->
+ <section class="locations" id="locations" aria-labelledby="loc-heading">
+ <div class="locations-header">
+ <span class="section-tag">Where We Operate</span>
+ <h2 class="section-title" id="loc-heading">Serving <em>All</em> The Keys</h2>
+ <p class="section-desc" style="margin: 0.9rem auto 0; max-width: 560px;">
+ From Key Largo down to Key West — wherever you are on the Overseas Highway, Tiki Tide has you covered. Pick up and drop off available at multiple marinas.
+ </p>
+ </div>
+
+ <div class="locations-grid" role="list" aria-label="Locations served">
+ <div class="loc-chip featured" role="listitem">Key West</div>
+ <div class="loc-chip featured" role="listitem">Islamorada</div>
+ <div class="loc-chip featured" role="listitem">Marathon</div>
+ <div class="loc-chip featured" role="listitem">Key Largo</div>
+ <div class="loc-chip" role="listitem">Big Pine Key</div>
+ <div class="loc-chip" role="listitem">Tavernier</div>
+ <div class="loc-chip" role="listitem">Upper Keys</div>
+ <div class="loc-chip" role="listitem">Lower Keys</div>
+ <div class="loc-chip" role="listitem">Sugarloaf Key</div>
+ <div class="loc-chip" role="listitem">Cudjoe Key</div>
+ <div class="loc-chip" role="listitem">Stock Island</div>
+ <div class="loc-chip" role="listitem">Summerland Key</div>
+ <div class="loc-chip" role="listitem">Duck Key</div>
+ <div class="loc-chip" role="listitem">Grassy Key</div>
+ <div class="loc-chip" role="listitem">Layton</div>
+ <div class="loc-chip" role="listitem">Long Key</div>
+ <div class="loc-chip" role="listitem">Conch Key</div>
+ <div class="loc-chip" role="listitem">Plantation Key</div>
+ <div class="loc-chip" role="listitem">Windley Key</div>
+ <div class="loc-chip" role="listitem">Rock Harbor</div>
+ </div>
+
+ <!-- Stylized "US-1" location strip -->
+ <div class="keys-map" aria-label="Florida Keys route from Key Largo to Key West">
+ <p class="keys-map-label">🛣️ US-1 Overseas Highway — Mile Marker Guide</p>
+ <div class="keys-road" role="list" aria-label="Key stops along US-1">
+ <div class="keys-stop" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Key Largo<br><small style="color:var(--muted);font-size:0.65rem">MM 100–90</small></span>
+ </div>
+ <div class="keys-connector" aria-hidden="true"></div>
+ <div class="keys-stop" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Tavernier<br><small style="color:var(--muted);font-size:0.65rem">MM 91–86</small></span>
+ </div>
+ <div class="keys-connector" aria-hidden="true"></div>
+ <div class="keys-stop" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Islamorada<br><small style="color:var(--muted);font-size:0.65rem">MM 90–73</small></span>
+ </div>
+ <div class="keys-connector" aria-hidden="true"></div>
+ <div class="keys-stop secondary" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Marathon<br><small style="color:var(--muted);font-size:0.65rem">MM 53–47</small></span>
+ </div>
+ <div class="keys-connector" aria-hidden="true"></div>
+ <div class="keys-stop secondary" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Big Pine Key<br><small style="color:var(--muted);font-size:0.65rem">MM 33–29</small></span>
+ </div>
+ <div class="keys-connector" aria-hidden="true"></div>
+ <div class="keys-stop secondary" role="listitem">
+ <div class="keys-stop-dot"></div>
+ <span class="keys-stop-name">Key West<br><small style="color:var(--muted);font-size:0.65rem">MM 4–0</small></span>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ TESTIMONIALS
+ ═══════════════════════════════════════════ -->
+ <section class="testimonials" id="reviews" aria-labelledby="rev-heading">
+ <div class="testimonials-header">
+ <span class="section-tag">Customer Reviews</span>
+ <h2 class="section-title" id="rev-heading">What Our <em>Captains</em> Say</h2>
+ </div>
+
+ <div class="reviews-grid">
+ <article class="review-card">
+ <div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
+ <p class="review-text">Rented the pontoon for a family day trip from Islamorada. Kids spotted dolphins within the first hour. The boat was immaculate, and the staff had us on the water in 20 minutes. Best day of our vacation — period.</p>
+ <p class="review-author">— Sarah M.</p>
+ <p class="review-location">Islamorada, FL</p>
+ </article>
+
+ <article class="review-card">
+ <div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
+ <p class="review-text">Took the center console out for a full day of flats fishing near Big Pine Key. Caught two tarpon before noon. The boat ran perfectly and the included charts were super helpful. Already planning our next trip.</p>
+ <p class="review-author">— James T.</p>
+ <p class="review-location">Big Pine Key, FL</p>
+ </article>
+
+ <article class="review-card">
+ <div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
+ <p class="review-text">We celebrated our anniversary on the luxury deck boat at sunset near Key West. Champagne, music, and the most incredible pink sky I've ever seen. Tiki Tide made it absolutely magical. 10 out of 10.</p>
+ <p class="review-author">— Diana & Marco R.</p>
+ <p class="review-location">Key West, FL</p>
+ </article>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ BOOKING CTA
+ ═══════════════════════════════════════════ -->
+ <section class="booking-cta" id="book" aria-labelledby="cta-heading">
+ <div class="cta-content">
+ <span class="section-tag">Ready To Go?</span>
+ <h2 id="cta-heading">Your Keys Adventure<br>Starts Here</h2>
+ <p>Call or text us to check availability, get a quote, and reserve your boat today. We're on the water every day of the week.</p>
+ <a href="tel:+13055550190" class="phone-number" aria-label="Call Tiki Tide Boat Rentals">(305) 555-0190</a>
+ <div class="hero-btns" style="justify-content:center;">
+ <a href="tel:+13055550190" class="btn-primary">📞 Call Now</a>
+ <a href="sms:+13055550190" class="btn-outline">💬 Text Us</a>
+ </div>
+ <p style="margin-top:2rem; font-size:0.82rem; color:var(--muted);">
+ Open 7 days a week · 7am – 7pm · Islamorada, Marathon & Key West Marinas
+ </p>
+ </div>
+ </section>
+
+ <!-- ═══════════════════════════════════════════
+ FOOTER
+ ═══════════════════════════════════════════ -->
+ <footer role="contentinfo">
+ <div class="footer-top">
+ <div>
+ <p class="footer-brand-name">Tiki Tide Boat Rentals</p>
+ <p class="footer-tagline">Serving the entire Florida Keys — from Key Largo to Key West — since 2012. Family-owned, locally operated.</p>
+ <p style="margin-top:1.2rem; font-size:0.82rem; color:var(--muted);">
+ 📍 1 Tiki Tide Marina Way, Islamorada, FL 33036<br>
+ 📞 <a href="tel:+13055550190" style="color:var(--cyan)">(305) 555-0190</a><br>
+ ✉️ <a href="mailto:[email protected]" style="color:var(--cyan)">[email protected]</a>
+ </p>
+ </div>
+
+ <div class="footer-col">
+ <h4>Our Fleet</h4>
+ <ul>
+ <li><a href="#fleet">Pontoon Boat Rentals</a></li>
+ <li><a href="#fleet">Center Console Rentals</a></li>
+ <li><a href="#fleet">Luxury Deck Boat</a></li>
+ <li><a href="#fleet">Kayak & Paddleboard</a></li>
+ </ul>
+ </div>
+
+ <div class="footer-col">
+ <h4>Locations</h4>
+ <ul>
+ <li><a href="#locations">Key West Boat Rentals</a></li>
+ <li><a href="#locations">Islamorada Boat Rentals</a></li>
+ <li><a href="#locations">Marathon Boat Rentals</a></li>
+ <li><a href="#locations">Key Largo Boat Rentals</a></li>
+ <li><a href="#locations">Big Pine Key Rentals</a></li>
+ <li><a href="#locations">Tavernier Boat Rentals</a></li>
+ <li><a href="#locations">Upper Keys Rentals</a></li>
+ </ul>
+ </div>
+
+ <div class="footer-col">
+ <h4>Info</h4>
+ <ul>
+ <li><a href="#adventures">Adventures</a></li>
+ <li><a href="#reviews">Reviews</a></li>
+ <li><a href="#book">Book Online</a></li>
+ <li><a href="#">Rental Policies</a></li>
+ <li><a href="#">Safety Info</a></li>
+ <li><a href="#">FAQ</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="footer-bottom">
+ <p>© 2025 Tiki Tide Boat Rentals LLC · All rights reserved · Islamorada, Florida Keys, FL</p>
+ <p>
+ <a href="#">Privacy Policy</a> ·
+ <a href="#">Terms</a> ·
+ <a href="#">Sitemap</a>
+ </p>
+ </div>
+ </footer>
+
+</body>
+</html>