From fefdf78ae3f538c1dbfcbe801b6a9c8ee359b150 Mon Sep 17 00:00:00 2001
From: Petri Hienonen <petri.hienonen@gmail.com>
Date: Sun, 18 Jan 2026 12:02:25 +0200
Subject: Update

---
 style.css | 438 ++++++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 295 insertions(+), 143 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 470b094..f425ac0 100644
--- a/style.css
+++ b/style.css
@@ -1,196 +1,348 @@
+/* style.css - ARFHL Tactical Wi-Fi HaLow Mesh Network */
+
+/* ===== BASE STYLES ===== */
 body {
-  font-family: Arial, Helvetica, sans-serif;
-  margin: 0;
-  background-color: #0f1419;
-  color: #e6e6e6;
-  line-height: 1.6;
+	font-family: Arial, Helvetica, sans-serif;
+	margin: 0;
+	background-color: #0f1419;
+	color: #e6e6e6;
+	line-height: 1.6;
 }
+
+/* ===== HEADER & NAVIGATION ===== */
 header {
-  background: linear-gradient(135deg, #1b2633, #0f1419);
-  padding: 40px;
+	background: linear-gradient(135deg, #1b2633, #0f1419);
+	padding: 40px;
 }
+
 header h1 {
-  margin: 0;
-  font-size: 2.4em;
+	margin: 0;
+	font-size: 2.4em;
 }
+
 header p {
-  max-width: 900px;
-  color: #cfd8dc;
+	max-width: 900px;
+	color: #cfd8dc;
 }
+
 .gap-box {
-  background-color: #1a222b;
-  border: 1px solid #2e3b4a;
-  border-left: 4px solid #ff6b6b;
-  padding: 20px;
-  margin: 20px 0;
-  max-width: 900px;
+	background-color: #1a222b;
+	border: 1px solid #2e3b4a;
+	border-left: 4px solid #ff6b6b;
+	padding: 20px;
+	margin: 20px 0;
+	max-width: 900px;
+}
+
+/* ===== BADGES ===== */
+.badge {
+	display: inline-block;
+	background-color: #263238;
+	padding: 4px 10px;
+	margin: 4px 0;
+	border-radius: 4px;
+	font-size: 0.85em;
+}
+
+.procurement-badge {
+	background-color: #1a5276;
+	color: #fff;
+	margin-right: 8px;
 }
+
+/* ===== MAIN CONTENT ===== */
 section {
-  padding: 40px;
-  max-width: 1200px;
-  margin: auto;
+	padding: 40px;
+	max-width: 1200px;
+	margin: auto;
 }
+
 h2 {
-  border-bottom: 2px solid #2e3b4a;
-  padding-bottom: 8px;
+	border-bottom: 2px solid #2e3b4a;
+	padding-bottom: 8px;
 }
+
 h3 {
-  color: #90caf9;
+	color: #90caf9;
 }
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
+
+/* ===== PRODUCT SHOWCASE ===== */
+.product-showcase {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	gap: 30px;
+	margin: 40px 0;
+	padding: 25px;
+	background-color: #1a222b;
+	border: 1px solid #2e3b4a;
+	border-radius: 8px;
+	align-items: start;
 }
-th,
-td {
-  border: 1px solid #2e3b4a;
-  padding: 10px;
-  text-align: left;
-  vertical-align: top;
+
+.product-image {
+	text-align: center;
 }
-th {
-  background-color: #1b2633;
+
+.product-image img {
+	width: 100%;
+	max-width: 300px;
+	height: auto;
+	border-radius: 6px;
+	border: 1px solid #2e3b4a;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-ul {
-  margin-left: 20px;
+
+.product-image caption {
+	display: block;
+	margin-top: 10px;
+	font-size: 0.9em;
+	color: #90caf9;
+	font-style: italic;
 }
-.badge {
-  display: inline-block;
-  background-color: #263238;
-  padding: 4px 10px;
-  margin: 4px 0;
-  border-radius: 4px;
-  font-size: 0.85em;
+
+.product-features h3 {
+	margin-top: 0;
+	color: #43a047;
+	border-bottom: 2px solid #2e3b4a;
+	padding-bottom: 10px;
 }
-.procurement-badge {
-  background-color: #1a5276;
-  color: #fff;
-  margin-right: 8px;
+
+.product-subtitle {
+	color: #cfd8dc;
+	font-style: italic;
+	margin-top: -5px;
+	margin-bottom: 25px;
 }
-.footer {
-  background-color: #0b0f14;
-  padding: 20px;
-  text-align: center;
-  font-size: 0.85em;
-  color: #9e9e9e;
+
+.feature-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 30px;
+	margin-bottom: 20px;
 }
-.cta-box {
-  background-color: #1a222b;
-  padding: 30px;
-  margin: 40px 0;
-  border: 1px solid #2e3b4a;
-  text-align: center;
+
+.feature-category h4 {
+	color: #90caf9;
+	margin-top: 0;
+	margin-bottom: 15px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid #2e3b4a;
+	font-size: 1.1em;
 }
-.diagram {
-  background-color: #111820;
-  padding: 20px;
-  margin: 20px 0;
-  border: 1px solid #2e3b4a;
+
+.feature-category ul {
+	margin-left: 0;
+	list-style-type: none;
+	padding-left: 0;
 }
-.note {
-  background-color: #1a222b;
-  padding: 15px;
-  border-left: 4px solid #90caf9;
-  margin: 20px 0;
+
+.feature-category li {
+	margin-bottom: 12px;
+	padding-left: 22px;
+	position: relative;
+	line-height: 1.5;
 }
-.warning {
-  background-color: #2d1b1b;
-  padding: 15px;
-  border-left: 4px solid #ff6b6b;
-  margin: 20px 0;
+
+.feature-category li:before {
+	content: "•";
+	color: #43a047;
+	position: absolute;
+	left: 8px;
+	font-size: 1.2em;
 }
+
+.feature-category strong {
+	color: #cfd8dc;
+	font-weight: 600;
+}
+
+.product-highlight {
+	background-color: #2d1b1b;
+	padding: 15px;
+	border-left: 4px solid #ff6b6b;
+	margin-top: 20px;
+	font-size: 0.95em;
+}
+
+.product-highlight strong {
+	color: #ff6b6b;
+}
+
+/* ===== ADVANTAGES CARDS ===== */
 .advantages {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-  margin: 30px 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+	gap: 20px;
+	margin: 30px 0;
 }
+
 .advantage-card {
-  background-color: #1a222b;
-  padding: 20px;
-  border-radius: 4px;
-  border-top: 3px solid #43a047;
+	background-color: #1a222b;
+	padding: 20px;
+	border-radius: 4px;
+	border-top: 3px solid #43a047;
 }
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
+
+/* ===== TABLES ===== */
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin-top: 20px;
 }
 
-/* Product Showcase Styles */
-.product-showcase {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 30px;
-  margin: 40px 0;
-  padding: 25px;
-  background-color: #1a222b;
-  border: 1px solid #2e3b4a;
-  border-radius: 8px;
-  align-items: start;
+th,
+td {
+	border: 1px solid #2e3b4a;
+	padding: 10px;
+	text-align: left;
+	vertical-align: top;
 }
 
-.product-image {
-  text-align: center;
+th {
+	background-color: #1b2633;
 }
 
-.product-image img {
-  width: 100%;
-  max-width: 300px;
-  height: auto;
-  border-radius: 6px;
-  border: 1px solid #2e3b4a;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+/* ===== LISTS ===== */
+ul {
+	margin-left: 20px;
 }
 
-.product-image caption {
-  display: block;
-  margin-top: 10px;
-  font-size: 0.9em;
-  color: #90caf9;
-  font-style: italic;
+/* ===== DIAGRAM ===== */
+.diagram {
+	background-color: #111820;
+	padding: 20px;
+	margin: 20px 0;
+	border: 1px solid #2e3b4a;
 }
 
-.product-features h3 {
-  margin-top: 0;
-  color: #43a047;
-  border-bottom: 2px solid #2e3b4a;
-  padding-bottom: 10px;
+/* ===== CALL TO ACTION ===== */
+.cta-box {
+	background-color: #1a222b;
+	padding: 30px;
+	margin: 40px 0;
+	border: 1px solid #2e3b4a;
+	text-align: center;
+}
+
+/* ===== NOTES & WARNINGS ===== */
+.note {
+	background-color: #1a222b;
+	padding: 15px;
+	border-left: 4px solid #90caf9;
+	margin: 20px 0;
 }
 
-.product-features ul {
-  margin-left: 20px;
-  list-style-type: none;
+.warning {
+	background-color: #2d1b1b;
+	padding: 15px;
+	border-left: 4px solid #ff6b6b;
+	margin: 20px 0;
 }
 
-.product-features li {
-  margin-bottom: 15px;
-  padding-left: 25px;
-  position: relative;
-  line-height: 1.5;
+/* ===== FOOTER ===== */
+.footer {
+	background-color: #0b0f14;
+	padding: 20px;
+	text-align: center;
+	font-size: 0.85em;
+	color: #9e9e9e;
 }
 
-.product-features li:before {
-  content: "✓";
-  color: #43a047;
-  position: absolute;
-  left: 0;
-  font-weight: bold;
+/* ===== ACCESSIBILITY & TYPOGRAPHY ===== */
+abbr {
+	cursor: help;
+	text-decoration: underline dotted;
 }
 
-.product-features strong {
-  color: #90caf9;
-  font-weight: 600;
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 992px) {
+	.product-showcase {
+		grid-template-columns: 1fr;
+		gap: 20px;
+	}
+
+	.feature-grid {
+		grid-template-columns: 1fr;
+		gap: 25px;
+	}
+
+	.product-image {
+		text-align: center;
+	}
+
+	.product-image img {
+		max-width: 250px;
+	}
 }
 
-/* Responsive adjustments */
 @media (max-width: 768px) {
-  .product-showcase {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-
-  .product-image img {
-    max-width: 250px;
-  }
+	header {
+		padding: 25px;
+	}
+
+	section {
+		padding: 25px 20px;
+	}
+
+	.advantages {
+		grid-template-columns: 1fr;
+	}
+
+	.cta-box {
+		padding: 20px;
+		margin: 25px 15px;
+	}
+
+	header h1 {
+		font-size: 1.8em;
+	}
+
+	h2 {
+		font-size: 1.5em;
+	}
+
+	h3 {
+		font-size: 1.2em;
+	}
+
+	table {
+		font-size: 0.9em;
+	}
+
+	th,
+	td {
+		padding: 8px 6px;
+	}
+}
+
+@media (max-width: 480px) {
+	header {
+		padding: 20px 15px;
+	}
+
+	.gap-box {
+		padding: 15px;
+	}
+
+	.badge {
+		display: block;
+		margin: 5px 0;
+		width: fit-content;
+	}
+
+	.procurement-badge {
+		margin-right: 0;
+	}
+
+	.advantage-card {
+		padding: 15px;
+	}
+
+	.product-showcase {
+		padding: 15px;
+	}
+
+	.product-features h3 {
+		font-size: 1.3em;
+	}
 }
-- 
cgit v1.2.3-70-g09d2