ITS TOO COLORFUL AND CHEERFUL LETS MAKE IT MORE LIKE A GOVERMENT WEBSITE

swat.html

@@ -75,49 +75,59 @@
             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
             border-color: rgba(255,255,255,0.2);
         }
-        
         .gradient-text {
-            background: linear-gradient(135deg, #00d4ff, #090979, #7700ff);
-            background-size: 200% auto;
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            animation: gradientFlow 6s ease infinite;
-        }
-
-        @keyframes gradientFlow {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
+            color: #005288;
+            text-shadow: none;
         }
         
         .swat-hero {
-            background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.9)), url('http://static.photos/military/1200x630/45') center/cover no-repeat;
-            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
-            padding-bottom: 10rem;
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/government/1200x630/45') center/cover no-repeat;
         }
 
         section {
-            padding: 6rem 0;
-            position: relative;
-        }
-
-        section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+            padding: 3rem 0;
         }
 
         body {
-            background: radial-gradient(circle at center, #0a0a1a 0%, #000000 100%);
+            background: #f8f9fa;
+            color: #212529;
+            font-family: 'Helvetica Neue', Arial, sans-serif;
         }
 
         .bg-gradient-to-b {
-            background: linear-gradient(to bottom, #0a0a1a, #000000);
+            background: #fff;
+            border-bottom: 1px solid #dee2e6;
+        }
+
+        .department-card {
+            background: #fff;
+            border: 1px solid #dee2e6;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            transition: none;
+        }
+
+        .department-card:hover {
+            transform: none;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+
+        .btn-primary {
+            background: #005288;
+            color: white;
+            border: none;
+        }
+
+        .btn-primary:hover {
+            background: #003d66;
+        }
+
+        .btn-outline {
+            border: 1px solid #005288;
+            color: #005288;
+        }
+
+        .btn-outline:hover {
+            background: #f1f8ff;
         }
 </style>
 </head>
@@ -151,48 +161,47 @@
         </div>
     </header>
     <!-- Hero Section -->
-    <section class="swat-hero py-40">
+    <section class="swat-hero py-20">
 <div class="container mx-auto px-4 text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
-                Special Weapons And Tactics
+            <h1 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">
+                SPECIAL WEAPONS AND TACTICS UNIT
             </h1>
-            <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8">
-                Elite tactical units of Atlantic Shores Roleplay, serving Key West with precision and professionalism
+            <p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-700 mb-8">
+                Official tactical response division serving Key West, Florida
             </p>
             <div class="flex flex-wrap justify-center gap-4">
-                <a href="https://asrp.us/apply" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
+                <a href="https://asrp.us/apply" class="px-8 py-3 btn-primary rounded font-semibold">
                     <i class="fas fa-user-plus mr-2"></i> Apply to SWAT
                 </a>
-                <a href="https://asrp.us#dept" class="px-8 py-3 bg-transparent border-2 border-orange-500 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:bg-orange-500 hover:bg-opacity-10 hover:border-orange-400">
-                    <i class="fas fa-arrow-left mr-2"></i> All Departments
+                <a href="https://asrp.us#dept" class="px-8 py-3 btn-outline rounded font-semibold">
+                    <i class="fas fa-arrow-left mr-2"></i> View All Departments
                 </a>
             </div>
-        </div>
+</div>
     </section>
     <!-- About SWAT Section -->
-    <section class="bg-gradient-to-b">
+    <section class="bg-gradient-to-b bg-white">
 <div class="container mx-auto px-4">
             <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
-                    About Our SWAT Division
+                <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
+                    ABOUT THE SWAT DIVISION
                 </h2>
-                <p class="max-w-3xl mx-auto text-gray-400 text-lg">
-                    Comprised of four specialized tactical teams, our SWAT division handles high-risk situations with precision and professionalism
+                <p class="max-w-3xl mx-auto text-gray-700">
+                    Specialized tactical unit handling high-risk situations with precision and professionalism
                 </p>
-            </div>
+</div>
             
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                 <div>
-                    <h3 class="text-2xl font-bold mb-4 text-white">Mission Statement</h3>
-                    <p class="text-gray-400 mb-6">
-                        The Atlantic Shores Roleplay SWAT Division is committed to providing specialized tactical response to high-risk situations that exceed the capabilities of standard law enforcement units. We operate with the highest standards of professionalism, precision, and dedication to public safety.
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">MISSION STATEMENT</h3>
+                    <p class="text-gray-700 mb-6">
+The Atlantic Shores Roleplay SWAT Division is committed to providing specialized tactical response to high-risk situations that exceed the capabilities of standard law enforcement units. We operate with the highest standards of professionalism, precision, and dedication to public safety.
                     </p>
-                    
-                    <h3 class="text-2xl font-bold mb-4 text-white">Core Values</h3>
-                    <ul class="space-y-3 text-gray-400">
+                    <h3 class="text-xl font-bold mb-4 text-gray-800">CORE VALUES</h3>
+                    <ul class="space-y-3 text-gray-700">
                         <li class="flex items-start">
-                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
-                            <span>Tactical Excellence in all operations</span>
+                            <i class="fas fa-check text-gray-600 mt-1 mr-3"></i>
+<span>Tactical Excellence in all operations</span>
                         </li>
                         <li class="flex items-start">
                             <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
@@ -209,36 +218,36 @@
                     </ul>
                 </div>
                 <div class="grid grid-cols-2 gap-4">
-                    <img src="http://static.photos/military/640x360/123" alt="SWAT Training" class="rounded-lg shadow-lg">
-                    <img src="http://static.photos/technology/640x360/456" alt="SWAT Equipment" class="rounded-lg shadow-lg mt-8">
-                    <img src="http://static.photos/people/640x360/789" alt="SWAT Team" class="rounded-lg shadow-lg">
-                    <img src="http://static.photos/cityscape/640x360/321" alt="SWAT Operations" class="rounded-lg shadow-lg mt-8">
+                    <img src="http://static.photos/government/640x360/123" alt="SWAT Training" class="rounded shadow">
+                    <img src="http://static.photos/government/640x360/456" alt="SWAT Equipment" class="rounded shadow mt-4">
+                    <img src="http://static.photos/government/640x360/789" alt="SWAT Team" class="rounded shadow">
+                    <img src="http://static.photos/government/640x360/321" alt="SWAT Operations" class="rounded shadow mt-4">
                 </div>
-            </div>
+</div>
         </div>
     </section>
     <!-- SWAT Teams Section -->
     <section class="bg-gradient-to-b">
 <div class="container mx-auto px-4">
             <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
-                    Our Tactical Teams
+                <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
+                    TACTICAL TEAMS
                 </h2>
-                <p class="max-w-2xl mx-auto text-gray-400">
-                    Four specialized units within our SWAT division, each with unique capabilities and responsibilities
+                <p class="max-w-2xl mx-auto text-gray-700">
+                    Specialized units within the SWAT division
                 </p>
-            </div>
+</div>
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                 <!-- Team Alpha -->
-                <div class="department-card rounded-xl overflow-hidden">
-<div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center">
-                        <div class="text-5xl font-bold text-white">A</div>
+                <div class="department-card rounded overflow-hidden">
+                    <div class="h-48 bg-gray-100 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-gray-400">A</div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-blue-400">Team Alpha</h3>
-                        <p class="text-gray-400 mb-4">
-                            Primary assault team specializing in direct entry operations and high-risk warrant service.
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM ALPHA</h3>
+                        <p class="text-gray-700 mb-4">
+Primary assault team specializing in direct entry operations and high-risk warrant service.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
                             <i class="fas fa-users mr-2"></i>
@@ -248,14 +257,14 @@
                 </div>
                 
                 <!-- Team Bravo -->
-                <div class="department-card rounded-xl overflow-hidden">
-<div class="h-48 bg-red-800 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-white">B</div>
+                <div class="department-card rounded overflow-hidden">
+                    <div class="h-48 bg-gray-100 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-gray-400">B</div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-red-400">Team Bravo</h3>
-                        <p class="text-gray-400 mb-4">
-                            Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM BRAVO</h3>
+                        <p class="text-gray-700 mb-4">
+Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
                             <i class="fas fa-users mr-2"></i>
@@ -265,14 +274,14 @@
                 </div>
                 
                 <!-- Team Charlie -->
-                <div class="department-card rounded-xl overflow-hidden">
-<div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-white">C</div>
+                <div class="department-card rounded overflow-hidden">
+                    <div class="h-48 bg-gray-100 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-gray-400">C</div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-purple-400">Team Charlie</h3>
-                        <p class="text-gray-400 mb-4">
-                            Breaching and entry specialists equipped with advanced tools for complex operations.
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM CHARLIE</h3>
+                        <p class="text-gray-700 mb-4">
+Breaching and entry specialists equipped with advanced tools for complex operations.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
                             <i class="fas fa-users mr-2"></i>
@@ -282,14 +291,14 @@
                 </div>
                 
                 <!-- Team Delta -->
-                <div class="department-card rounded-xl overflow-hidden">
-<div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center">
-                        <div class="text-5xl font-bold text-white">D</div>
+                <div class="department-card rounded overflow-hidden">
+                    <div class="h-48 bg-gray-100 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-gray-400">D</div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 text-orange-400">Team Delta</h3>
-                        <p class="text-gray-400 mb-4">
-                            Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">TEAM DELTA</h3>
+                        <p class="text-gray-700 mb-4">
+Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
                         </p>
                         <div class="flex items-center text-sm text-gray-500">
                             <i class="fas fa-users mr-2"></i>
@@ -304,52 +313,52 @@
     <section class="bg-gradient-to-b">
 <div class="container mx-auto px-4">
             <div class="text-center mb-16">
-                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
-                    SWAT Requirements
+                <h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
+                    REQUIREMENTS
                 </h2>
-                <p class="max-w-2xl mx-auto text-gray-400">
-                    Rigorous standards to ensure only the most qualified candidates join our elite division
+                <p class="max-w-2xl mx-auto text-gray-700">
+                    Minimum qualifications for SWAT candidates
                 </p>
-            </div>
+</div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
 <!-- Requirement 1 -->
-                <div class="department-card rounded-xl p-8 transition-all">
-<div class="text-4xl mb-4">
-                        <i class="fas fa-shield-alt gradient-text"></i>
+                <div class="department-card rounded p-6">
+                    <div class="text-3xl mb-4">
+                        <i class="fas fa-shield-alt text-gray-600"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-white">Law Enforcement Experience</h3>
-                    <p class="text-gray-400">
-                        Minimum of 6 months active service in a law enforcement department with excellent performance record.
+                    <h3 class="text-lg font-bold mb-3 text-gray-800">LAW ENFORCEMENT EXPERIENCE</h3>
+                    <p class="text-gray-700">
+Minimum of 6 months active service in a law enforcement department with excellent performance record.
                     </p>
                 </div>
                 
                 <!-- Requirement 2 -->
-                <div class="department-card rounded-xl p-8 transition-all">
-<div class="text-4xl mb-4">
-                        <i class="fas fa-dumbbell gradient-text"></i>
+                <div class="department-card rounded p-6">
+                    <div class="text-3xl mb-4">
+                        <i class="fas fa-dumbbell text-gray-600"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3>
-                    <p class="text-gray-400">
-                        Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
+                    <h3 class="text-lg font-bold mb-3 text-gray-800">PHYSICAL FITNESS</h3>
+                    <p class="text-gray-700">
+Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
                     </p>
                 </div>
                 
                 <!-- Requirement 3 -->
-                <div class="department-card rounded-xl p-8 transition-all">
-<div class="text-4xl mb-4">
-                        <i class="fas fa-brain gradient-text"></i>
+                <div class="department-card rounded p-6">
+                    <div class="text-3xl mb-4">
+                        <i class="fas fa-brain text-gray-600"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3>
-                    <p class="text-gray-400">
-                        Must successfully complete psychological screening to ensure mental stability under pressure.
+                    <h3 class="text-lg font-bold mb-3 text-gray-800">PSYCHOLOGICAL EVALUATION</h3>
+                    <p class="text-gray-700">
+Must successfully complete psychological screening to ensure mental stability under pressure.
                     </p>
                 </div>
             </div>
             
             <div class="text-center mt-12">
-                <a href="https://asrp.us/apply" class="inline-block px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] hover:from-[#ed2d57] hover:to-[#fc8e0d] rounded-full font-semibold transition duration-300 transform hover:scale-105 shadow-lg">
-                    <i class="fas fa-file-alt mr-2"></i> Apply to SWAT Division
-                </a>
+                <a href="https://asrp.us/apply" class="inline-block px-8 py-3 btn-primary rounded font-semibold">
+                    <i class="fas fa-file-alt mr-2"></i> SUBMIT APPLICATION
+</a>
             </div>
         </div>
     </section>