-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
154 lines (149 loc) · 7.8 KB
/
contact.html
File metadata and controls
154 lines (149 loc) · 7.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact · SENTINEL</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--black: #0a0a0a;
--white: #f0f0f0;
--grey: #888;
--accent: #ff3333;
--wolf: #ff6600;
--dim: #333;
--dark: #111;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font-family: 'Space Mono', monospace; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(10,10,10,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--dim); z-index: 1000; }
.nav .inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: 'Syne', sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links { display: flex; gap: 14px; align-items: center; }
.nav-links a { padding: 8px 10px; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; color: var(--grey); }
.nav-links a:hover, .nav-links a:focus { background: var(--dark); color: var(--white); }
.menu-toggle { display: none; background: var(--dark); color: var(--white); border: 1px solid var(--dim); border-radius: 8px; padding: 8px 10px; font-family: 'Space Mono', monospace; }
main { padding: 120px 20px 80px; max-width: 1100px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: center; margin-bottom: 48px; }
.hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 12px; letter-spacing: -0.02em; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--dim); border-radius: 999px; background: var(--dark); color: var(--grey); font-size: 0.9rem; }
.section { margin: 48px 0; border: 1px solid var(--dim); border-radius: 16px; padding: 24px; background: var(--dark); }
.section h2 { font-family: 'Syne', sans-serif; margin: 0 0 12px; font-size: 1.6rem; letter-spacing: -0.01em; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { padding: 18px; border: 1px solid var(--dim); border-radius: 12px; background: linear-gradient(145deg, #0c0c0c, #0e0e0e); min-height: 140px; }
.card h3 { font-family: 'Syne', sans-serif; margin: 0 0 10px; font-size: 1.2rem; }
.meta { color: var(--grey); font-size: 0.95rem; }
.list { padding-left: 18px; color: var(--white); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.btn { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--black); font-weight: 700; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Syne', sans-serif; }
.btn.secondary { background: transparent; color: var(--white); border-color: var(--dim); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,51,51,0.2); }
.fade { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade.visible { opacity: 1; transform: translateY(0); }
footer { margin-top: 60px; padding: 20px 0 10px; color: var(--grey); font-size: 0.95rem; }
@media (max-width: 760px) {
.nav .inner { align-items: flex-start; }
.menu-toggle { display: inline-flex; }
.nav-links { position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; padding: 12px 20px; background: var(--dark); border-top: 1px solid var(--dim); display: none; }
.nav-links.open { display: flex; }
main { padding-top: 120px; }
}
</style>
</head>
<body>
<header class="nav">
<div class="inner">
<div class="brand">SENTINEL</div>
<button class="menu-toggle" aria-label="Toggle navigation">Menu</button>
<nav class="nav-links" aria-label="Primary">
<a href="index.html">Home</a>
<a href="manifesto.html">Manifesto</a>
<a href="wolf.html">CORD</a>
<a href="architecture.html">Architecture</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</header>
<main>
<section class="hero fade">
<div>
<p class="tag">Contact · Alignment · Response</p>
<h1>Open a channel with the SENTINEL team.</h1>
<p>Reach out for architecture reviews, deployment guidance, or to shape an identity-bound signal for your environment.</p>
<div class="cta-row">
<a class="btn" href="mailto:team@artificialpersistentintel.example">Email</a>
<a class="btn secondary" href="architecture.html">Review Architecture</a>
</div>
</div>
<div class="section" style="margin:0;">
<h2>Engagement Modes</h2>
<ul class="list">
<li>Readiness Assessment: evaluate your sensing, response, and recovery posture.</li>
<li>Deployment Sprint: stand up SENTINEL primitives with clear SLOs and observability.</li>
<li>Signal Calibration: review how the system learns and reflect your intent.</li>
<li>Operator Training: empower teams with playbooks and explainable tooling.</li>
</ul>
</div>
</section>
<section class="section fade">
<h2>Signals We Value</h2>
<div class="grid">
<div class="card">
<h3>Urgency</h3>
<p class="meta">Active incidents needing containment guidance.</p>
</div>
<div class="card">
<h3>Integration</h3>
<p class="meta">Hooks into your observability, IAM, and automation layers.</p>
</div>
<div class="card">
<h3>Policy</h3>
<p class="meta">Governance needs across jurisdictions and compliance regimes.</p>
</div>
<div class="card">
<h3>Scale</h3>
<p class="meta">Performance envelopes and resilience targets we must meet.</p>
</div>
</div>
</section>
<section class="section fade">
<h2>Direct Lines</h2>
<div class="grid">
<div class="card">
<h3>Secure Email</h3>
<p class="meta"><a href="mailto:team@artificialpersistentintel.example">team@artificialpersistentintel.example</a></p>
</div>
<div class="card">
<h3>Escalation</h3>
<p class="meta">Use your identity keywords to prioritize routing and follow-up.</p>
</div>
<div class="card">
<h3>Hours</h3>
<p class="meta">Persistent monitoring; staffed human response during business hours.</p>
</div>
</div>
<div class="cta-row" style="margin-top:18px;">
<a class="btn" href="index.html">Return Home</a>
<a class="btn secondary" href="manifesto.html">Manifesto</a>
</div>
</section>
<footer class="fade">Contact · SENTINEL</footer>
</main>
<script>
(() => {
const navLinks = document.querySelector('.nav-links');
const toggle = document.querySelector('.menu-toggle');
if (toggle && navLinks) {
toggle.addEventListener('click', () => navLinks.classList.toggle('open'));
navLinks.querySelectorAll('a').forEach(link => link.addEventListener('click', () => navLinks.classList.remove('open')));
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.15 });
document.querySelectorAll('.fade').forEach(el => observer.observe(el));
})();
</script>
</body>
</html>