From 8ba41f7e3c864a08cbe27f43f8c331c417b49a4a Mon Sep 17 00:00:00 2001 From: Blake Ridgway Date: Sat, 22 Aug 2026 21:45:10 -0500 Subject: [PATCH] Rebrand landing for security practitioners, redesign, drop toolchain - Reposition Arcline OS as the OS for people who defend infrastructure - Add Security Stack section (Wazuh, Suricata, ClamAV, OpenSCAP, Falco, gitleaks/trufflehog, syft/grype, Lynis) plus compliance-ready callout - Reframe editions for SOC/blue-team/cloud-security audiences; add Kali and Security Onion comparisons; update meta/OG tags for security intent - Remove the custom Arcline Toolchain (11 Go tools) and all references - Redesign CSS: tactical near-black + amber palette, HUD details (hero grid, terminal caret + sigil, card corner brackets, status dot), sharpened nav/buttons, responsive fixups; both dark and light themes --- main.go | 2 +- static/css/style.css | 479 ++++++++++++++++++++++++++++++++----------- static/favicon.svg | 4 +- templates/base.html | 8 + templates/index.html | 185 ++++++++++------- 5 files changed, 475 insertions(+), 203 deletions(-) diff --git a/main.go b/main.go index 33e6528..be5a844 100644 --- a/main.go +++ b/main.go @@ -163,7 +163,7 @@ func handleIndex(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html; charset=utf-8") data := map[string]interface{}{ - "Title": "Arcline Project", + "Title": "Arcline OS — Hardened Linux for Security Practitioners", } if err := templates["index"].ExecuteTemplate(w, "base", data); err != nil { log.Printf("render error: %v", err) diff --git a/static/css/style.css b/static/css/style.css index 0ab599a..4c1f2a6 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -14,31 +14,34 @@ /* ── Design Tokens ── */ /* Dark mode is the default */ :root { - /* Colors */ - --color-bg: #0d1117; - --color-bg-alt: #161b22; - --color-bg-card: #161b22; - --color-bg-card-hover: #1c2333; - --color-bg-dark: #0b0c0e; + /* Colors — tactical near-black, cool cast */ + --color-bg: #08090d; + --color-bg-alt: #0d1016; + --color-bg-card: #0f1219; + --color-bg-card-hover: #151b26; + --color-bg-dark: #05060a; - --color-border: #30363d; - --color-border-hover: #484f58; - --color-border-light: #21262d; + --color-border: #202634; + --color-border-hover: #2e3748; + --color-border-light: #141923; - --color-text: #e6edf3; - --color-text-soft: #8b949e; - --color-text-faint: #6e7681; - --color-text-inverse: #e6edf3; + --color-text: #e8ecf2; + --color-text-soft: #8b93a4; + --color-text-faint: #5e6879; + --color-text-inverse: #e8ecf2; - --color-accent: #0acf97; - --color-accent-dim: hsl(162 88% 43%); - --color-accent-bg: hsla(162 88% 43% / 0.10); - --color-accent-border: hsla(162 88% 43% / 0.22); + /* Amber / alert accent */ + --color-accent: #fbbf24; + --color-accent-dim: #f59e0b; + --color-accent-bg: hsla(48 97% 55% / 0.09); + --color-accent-border: hsla(48 97% 55% / 0.26); - --color-cta-text: #0b0c0e; + --color-cta-text: #191204; - --color-nav-bg: rgba(13, 17, 23, 0.92); - --color-hero-gradient: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #0d1117 100%); + --color-nav-bg: rgba(8, 9, 13, 0.88); + --color-hero-grid: hsla(223 30% 70% / 0.05); + --color-hero-glow: hsla(48 97% 55% / 0.10); + --color-hero-gradient: linear-gradient(180deg, #08090d 0%, #0d1016 55%, #08090d 100%); /* Typography */ --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; @@ -50,15 +53,15 @@ --pad-section: 80px; --pad-card: 28px; - /* Radii */ - --radius-sm: 6px; - --radius-md: 10px; - --radius-lg: 14px; + /* Radii — sharp, tactical */ + --radius-sm: 3px; + --radius-md: 6px; + --radius-lg: 9px; /* Shadows */ - --shadow-card: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16); - --shadow-hover: 0 4px 14px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.16); - --shadow-nav: 0 1px 3px rgba(0,0,0,0.24); + --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3); + --shadow-hover: 0 6px 18px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); + --shadow-nav: 0 1px 2px rgba(0,0,0,0.5); /* Transitions */ --ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1); @@ -66,33 +69,35 @@ /* Light mode overrides */ [data-theme="light"] { - --color-bg: #ffffff; - --color-bg-alt: #f5f6f8; + --color-bg: #f6f7f9; + --color-bg-alt: #ebeef2; --color-bg-card: #ffffff; - --color-bg-card-hover: #f8f9fb; + --color-bg-card-hover: #f3f5f8; - --color-border: #e2e4e8; - --color-border-hover: #c8cad0; - --color-border-light: #eeeff2; + --color-border: #d8dce3; + --color-border-hover: #b7bfca; + --color-border-light: #e8eaee; - --color-text: #1a1c22; - --color-text-soft: #4a4e58; - --color-text-faint: #7c808a; + --color-text: #171a21; + --color-text-soft: #454d5b; + --color-text-faint: #717b89; --color-text-inverse: #ffffff; - --color-accent: #0acf97; - --color-accent-dim: hsl(162 88% 33%); - --color-accent-bg: hsla(162 88% 43% / 0.07); - --color-accent-border: hsla(162 88% 43% / 0.18); + --color-accent: #b45309; + --color-accent-dim: #92400e; + --color-accent-bg: hsla(34 100% 37% / 0.08); + --color-accent-border: hsla(34 100% 37% / 0.20); - --color-cta-text: #0d1117; + --color-cta-text: #ffffff; - --color-nav-bg: rgba(255, 255, 255, 0.92); - --color-hero-gradient: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%); + --color-nav-bg: rgba(246, 247, 249, 0.9); + --color-hero-grid: hsla(222 45% 28% / 0.05); + --color-hero-glow: hsla(34 100% 37% / 0.07); + --color-hero-gradient: linear-gradient(180deg, #f2f4f7 0%, #ffffff 100%); - --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); - --shadow-hover: 0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); - --shadow-nav: 0 1px 3px rgba(0,0,0,0.06); + --shadow-card: 0 1px 2px rgba(23,31,45,0.05), 0 1px 3px rgba(23,31,45,0.04); + --shadow-hover: 0 8px 22px rgba(23,31,45,0.10), 0 2px 6px rgba(23,31,45,0.06); + --shadow-nav: 0 1px 2px rgba(23,31,45,0.05); } /* ── Base ── */ @@ -110,6 +115,17 @@ body { -moz-osx-font-smoothing: grayscale; } +/* HUD polish: amber selection + focus ring */ +::selection { + background: var(--color-accent); + color: var(--color-cta-text); +} + +:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + /* ── Skip to Content ── */ .skip-link { position: absolute; @@ -157,11 +173,24 @@ body { align-items: center; gap: 10px; font-family: var(--font-mono); - font-size: 1.05rem; + font-size: 1.0rem; font-weight: 650; color: var(--color-text); text-decoration: none; - letter-spacing: -0.01em; + letter-spacing: 0.02em; + position: relative; +} + +/* pulsing "live" status dot — HUD detail */ +.logo::after { + content: ""; + width: 6px; + height: 6px; + margin-left: 2px; + border-radius: 50%; + background: var(--color-accent); + box-shadow: 0 0 8px var(--color-accent); + animation: status-pulse 2.6s ease-in-out infinite; } .logo-icon { @@ -178,10 +207,13 @@ body { .nav nav a { color: var(--color-text-soft); text-decoration: none; - padding: 8px 16px; + padding: 8px 15px; border-radius: var(--radius-sm); - font-size: 0.875rem; - font-weight: 500; + font-family: var(--font-mono); + font-size: 0.73rem; + font-weight: 560; + letter-spacing: 0.05em; + text-transform: uppercase; transition: color var(--ease), background var(--ease); } @@ -194,7 +226,9 @@ body { .nav-cta { background: var(--color-accent) !important; color: var(--color-cta-text) !important; - font-weight: 600 !important; + font-weight: 640 !important; + letter-spacing: 0.05em; + text-transform: uppercase; margin-left: 8px; } @@ -232,9 +266,15 @@ body { /* ── Hero ── */ .hero { - padding: 90px 28px 70px; + position: relative; + padding: 96px 28px 72px; text-align: center; - background: var(--color-hero-gradient); + background: + linear-gradient(var(--color-hero-grid) 1px, transparent 1px), + linear-gradient(90deg, var(--color-hero-grid) 1px, transparent 1px), + radial-gradient(ellipse 60% 45% at 50% -5%, var(--color-hero-glow), transparent 70%), + var(--color-hero-gradient); + background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%; border-bottom: 1px solid var(--color-border-light); } @@ -243,6 +283,16 @@ body { margin: 0 auto; } +/* terminal-style sigil line above the headline */ +.hero-sigil { + font-family: var(--font-mono); + font-size: 0.74rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--color-accent-dim); + margin-bottom: 22px; +} + .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 750; @@ -256,6 +306,18 @@ body { color: var(--color-accent); } +/* blinking block caret — terminal cue */ +.hero-highlight::after { + content: ""; + display: inline-block; + width: 0.5ch; + height: 1.02em; + margin-left: 5px; + vertical-align: text-bottom; + background: var(--color-accent); + animation: caret-blink 1.15s steps(1) infinite; +} + .tagline { font-size: 1.1rem; color: var(--color-text-soft); @@ -279,20 +341,21 @@ body { background: var(--color-accent); color: var(--color-cta-text); padding: 14px 32px; - font-size: 0.95rem; - font-weight: 620; + font-size: 0.82rem; + font-weight: 640; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-family: var(--font-mono); - letter-spacing: -0.01em; - box-shadow: 0 2px 8px hsla(162 88% 43% / 0.25); + letter-spacing: 0.08em; + text-transform: uppercase; + box-shadow: 0 2px 8px hsla(48 97% 55% / 0.22); } .cta:hover { background: var(--color-accent-dim); transform: translateY(-2px); - box-shadow: 0 4px 16px hsla(162 88% 43% / 0.35); + box-shadow: 0 4px 18px hsla(48 97% 55% / 0.32); } .cta-secondary { @@ -300,11 +363,14 @@ body { align-items: center; color: var(--color-text-soft); padding: 14px 32px; - font-size: 0.95rem; - font-weight: 500; + font-size: 0.82rem; + font-weight: 520; text-decoration: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); + font-family: var(--font-mono); + letter-spacing: 0.08em; + text-transform: uppercase; transition: border-color var(--ease), color var(--ease), background var(--ease); } @@ -334,15 +400,16 @@ body { .section-label { display: inline-block; font-family: var(--font-mono); - font-size: 0.72rem; - font-weight: 600; + font-size: 0.68rem; + font-weight: 620; color: var(--color-accent); text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.12em; margin-bottom: 14px; - padding: 5px 14px; + padding: 5px 13px; background: var(--color-accent-bg); - border-radius: 20px; + border: 1px solid var(--color-accent-border); + border-radius: var(--radius-sm); } .section-inner h2 { @@ -357,6 +424,16 @@ body { max-width: 640px; } +.section-inner h2::before { + content: ""; + display: block; + width: 32px; + height: 3px; + margin: 0 auto 16px; + background: var(--color-accent); + box-shadow: 0 0 10px var(--color-accent-border); +} + .section-desc { color: var(--color-text-soft); font-size: 1.02rem; @@ -367,6 +444,74 @@ body { line-height: 1.7; } +/* ── HUD corner brackets (tactical detail) ── */ +.edition-card, +.principle, +.stack-card, +.compare-card, +.contribute-card, +.feature-card, +.compliance-callout { + position: relative; +} + +.edition-card::before, +.principle::before, +.stack-card::before, +.compare-card::before, +.contribute-card::before, +.feature-card::before, +.compliance-callout::before { + content: ""; + position: absolute; + top: 7px; + left: 7px; + width: 11px; + height: 11px; + border-top: 2px solid var(--color-accent-border); + border-left: 2px solid var(--color-accent-border); + opacity: 0.9; + transition: border-color var(--ease); + pointer-events: none; +} + +.edition-card::after, +.principle::after, +.stack-card::after, +.compare-card::after, +.contribute-card::after, +.feature-card::after, +.compliance-callout::after { + content: ""; + position: absolute; + bottom: 7px; + right: 7px; + width: 11px; + height: 11px; + border-bottom: 2px solid var(--color-accent-border); + border-right: 2px solid var(--color-accent-border); + opacity: 0.9; + transition: border-color var(--ease); + pointer-events: none; +} + +.edition-card:hover::before, +.principle:hover::before, +.stack-card:hover::before, +.compare-card:hover::before, +.contribute-card:hover::before, +.feature-card:hover::before, +.compliance-callout:hover::before, +.edition-card:hover::after, +.principle:hover::after, +.stack-card:hover::after, +.compare-card:hover::after, +.contribute-card:hover::after, +.feature-card:hover::after, +.compliance-callout:hover::after { + border-color: var(--color-accent); +} + /* ── Edition Cards ── */ .editions-grid { display: grid; @@ -433,13 +578,14 @@ body { display: inline-flex; align-items: center; padding: 9px 22px; - font-size: 0.85rem; - font-weight: 600; + font-size: 0.76rem; + font-weight: 620; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--ease), color var(--ease), border-color var(--ease); font-family: var(--font-mono); - letter-spacing: -0.01em; + letter-spacing: 0.06em; + text-transform: uppercase; } .card-btn-primary { @@ -558,7 +704,7 @@ body { /* ── Stack Grid ── */ .stack-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } @@ -613,6 +759,55 @@ body { opacity: 0.5; } +/* ── Security Stack ── */ +.security-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); + gap: 16px; + margin-bottom: 28px; +} + +.compliance-callout { + max-width: 760px; + margin: 0 auto 24px; + text-align: left; + padding: 22px 28px; + border: 1px dashed var(--color-accent-border); + border-radius: var(--radius-md); + background: var(--color-accent-bg); +} + +.compliance-badge { + display: inline-block; + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 650; + color: var(--color-accent-dim); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 10px; +} + +.compliance-callout p { + color: var(--color-text-soft); + font-size: 0.9rem; + line-height: 1.7; + margin: 0; +} + +.compliance-callout strong { + color: var(--color-text); + font-weight: 660; +} + +.security-note { + max-width: 640px; + margin: 0 auto; + color: var(--color-text-soft); + font-size: 0.85rem; + line-height: 1.7; +} + /* Edition Teaser */ .edition-teaser { margin-top: 24px; @@ -646,44 +841,6 @@ body { font-weight: 660; } -/* ── Tool Grid ── */ -.tool-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); - gap: 12px; -} - -.tool { - display: flex; - flex-direction: column; - gap: 6px; - background: var(--color-bg-card); - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - padding: 20px 24px; - text-align: left; - transition: border-color var(--ease), box-shadow var(--ease); -} - -.tool:hover { - border-color: var(--color-accent-border); - box-shadow: var(--shadow-card); -} - -.tool code { - font-family: var(--font-mono); - font-size: 0.84rem; - font-weight: 600; - color: var(--color-accent-dim); - letter-spacing: -0.01em; -} - -.tool span { - color: var(--color-text-soft); - font-size: 0.83rem; - line-height: 1.55; -} - /* ── Compare Grid ── */ .compare-grid { display: grid; @@ -928,10 +1085,11 @@ body { border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); - font-size: 0.92rem; + font-size: 0.9rem; outline: none; transition: border-color var(--ease), box-shadow var(--ease); font-family: var(--font-mono); + letter-spacing: 0.02em; } .input::placeholder { @@ -950,12 +1108,13 @@ body { border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-cta-text); - font-size: 0.92rem; - font-weight: 620; + font-size: 0.8rem; + font-weight: 640; cursor: pointer; transition: background var(--ease), transform var(--ease); font-family: var(--font-mono); - letter-spacing: -0.01em; + letter-spacing: 0.08em; + text-transform: uppercase; } .btn:hover { @@ -1059,6 +1218,16 @@ body { font-size: 0.76rem; } +/* ── Keyframes (HUD) ── */ +@keyframes caret-blink { + 50% { opacity: 0; } +} + +@keyframes status-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + /* ── Responsive ── */ @media (max-width: 920px) { .stack-grid { @@ -1075,7 +1244,7 @@ body { } } -@media (max-width: 768px) { +@media (max-width: 800px) { :root { --pad-section: 56px; } @@ -1104,18 +1273,15 @@ body { } .nav nav a { - padding: 6px 10px; - font-size: 0.8rem; + padding: 6px 8px; + font-size: 0.7rem; + letter-spacing: 0.03em; } .principles-grid { grid-template-columns: 1fr; } - .tool-grid { - grid-template-columns: 1fr; - } - .editions-grid { grid-template-columns: 1fr; } @@ -1125,6 +1291,29 @@ body { } } +@media (max-width: 640px) { + .nav-inner { + padding: 0 14px; + gap: 6px; + } + + /* keep just the mark below 640px */ + .logo span { + display: none; + } + + .nav nav a { + padding: 6px 7px; + font-size: 0.68rem; + letter-spacing: 0.02em; + } + + .nav-cta { + padding: 6px 12px; + margin-left: 4px; + } +} + @media (max-width: 580px) { .hero { padding: 44px 18px 36px; @@ -1143,12 +1332,28 @@ body { } .nav-inner { - padding: 0 14px; + padding: 0 12px; + gap: 6px; + } + + .logo { + font-size: 0.9rem; + } + + /* keep just the mark on small phones */ + .logo span { + display: none; } .nav nav a { - padding: 6px 7px; - font-size: 0.74rem; + padding: 5px 6px; + font-size: 0.62rem; + letter-spacing: 0.02em; + } + + .nav-cta { + padding: 6px 10px; + margin-left: 4px; } .input { @@ -1163,6 +1368,10 @@ body { grid-template-columns: 1fr; } + .security-grid { + grid-template-columns: 1fr; + } + .compare-grid { grid-template-columns: 1fr; } @@ -1181,3 +1390,29 @@ body { } } +/* Very small screens: wrap the nav links onto their own row */ +@media (max-width: 480px) { + .nav-inner { + height: auto; + flex-wrap: wrap; + padding: 10px 14px 8px; + row-gap: 8px; + } + + .nav nav { + order: 3; + flex-wrap: wrap; + justify-content: center; + width: 100%; + } + + .nav nav a { + padding: 5px 8px; + font-size: 0.66rem; + } + + .theme-toggle { + margin-left: auto; + } +} + diff --git a/static/favicon.svg b/static/favicon.svg index 2645bfc..b6d49ae 100644 --- a/static/favicon.svg +++ b/static/favicon.svg @@ -1,6 +1,6 @@ - - + + diff --git a/templates/base.html b/templates/base.html index 54e4972..b882b2f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,14 @@ {{.Title}} + + + + + + + + diff --git a/templates/index.html b/templates/index.html index c0fa245..ff136e7 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,15 +6,15 @@