arcline-project/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand landing for security practitioners, redesign, drop toolchain

Browse Source 
- 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
This commit is contained in:
Blake Ridgway
2026-08-22 21:45:10 -05:00
parent 21b2cd7e88
commit 8ba41f7e3c
5 changed files with 475 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

479
static/css/style.css
View File

@@ -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;
}
}