diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 438 |
1 files changed, 295 insertions, 143 deletions
@@ -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; + } } |