-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
369 lines (340 loc) · 17.4 KB
/
Copy pathindex.html
File metadata and controls
369 lines (340 loc) · 17.4 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Storied Security, LLC — Tabletop Exercises & Crisis Readiness</title>
<meta name="description" content="Storied Security runs practical tabletop exercises that turn ordinary information security programs into ones your team can execute without hesitation.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--ink:#1B1F23;
--ink-soft:#2A2F35;
--paper:#F1EDE4;
--paper-dim:#E6E0D2;
--paper-line:#D8D0BE;
--amber:#E8A33D;
--rust:#A13D2B;
--slate:#5B6570;
--slate-on-dark:#9CA6AF;
--serif:'Fraunces', Georgia, serif;
--mono:'IBM Plex Mono', 'Courier New', monospace;
--sans:'IBM Plex Sans', -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
/* ---------- header ---------- */
header{
position:sticky; top:0; z-index:50;
background:var(--paper); border-bottom:1px solid var(--paper-line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{font-family:var(--mono); font-size:14px; letter-spacing:0.14em; text-decoration:none; font-weight:600; color:var(--ink);}
.logo span{color:var(--rust);}
nav ul{list-style:none; display:flex; gap:32px; margin:0; padding:0; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
nav a{text-decoration:none; color:var(--slate); border-bottom:1px solid transparent; padding-bottom:3px; transition:color .15s, border-color .15s;}
nav a:hover{color:var(--ink); border-color:var(--rust);}
/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--paper); padding:88px 0 96px; position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); margin:0 0 18px;}
.eyebrow::before{content:"// "; color:var(--slate-on-dark);}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(32px,4.4vw,54px); line-height:1.08; margin:0 0 22px; letter-spacing:-0.01em;}
h1 em{font-style:italic; color:var(--amber);}
.hero-sub{font-size:17px; color:#C9C2B4; max-width:46ch; margin:0 0 32px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
padding:13px 22px; text-decoration:none; border:1px solid currentColor; transition:transform .15s, background .15s, color .15s;
}
.btn-primary{background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:600;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{color:var(--paper); border-color:#4A5158;}
.btn-ghost:hover{border-color:var(--paper);}
/* ---------- injection deck (signature element) ---------- */
.deck{position:relative; height:340px; user-select:none;}
.card{
position:absolute; inset:0; background:var(--paper); color:var(--ink);
border:1px solid var(--paper-line); padding:26px 26px 22px;
box-shadow:0 18px 40px rgba(0,0,0,0.35);
display:flex; flex-direction:column; justify-content:space-between;
transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
cursor:pointer;
}
.card-head{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); border-bottom:1px dashed var(--paper-line); padding-bottom:12px;}
.card-head .tag{color:var(--rust); font-weight:600;}
.card-body{font-family:var(--serif); font-size:19px; line-height:1.4; margin:16px 0;}
.card-foot{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--slate);}
.deck-hint{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-on-dark); text-align:center; margin-top:14px;}
.deck-hint::before{content:"↻ ";}
/* ---------- philosophy strip ---------- */
.philosophy{background:var(--paper-dim); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); padding:52px 0;}
.philosophy blockquote{
margin:0; font-family:var(--serif); font-style:italic; font-weight:500;
font-size:clamp(19px,2.3vw,27px); line-height:1.45; max-width:900px;
color:var(--ink-soft);
}
.philosophy blockquote::before{content:"“"; color:var(--rust); font-style:normal;}
.philosophy blockquote::after{content:"”"; color:var(--rust); font-style:normal;}
/* ---------- approach ---------- */
.section{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin:0 0 12px;}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3vw,36px); margin:0 0 14px; letter-spacing:-0.01em;}
.section-head p{color:var(--slate); font-size:16px; margin:0;}
.approach-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line);}
.approach-cell{background:var(--paper); padding:34px 32px;}
.approach-cell .num{font-family:var(--mono); font-size:12px; color:var(--rust); display:block; margin-bottom:10px;}
.approach-cell h3{font-family:var(--serif); font-size:21px; margin:0 0 10px; font-weight:600;}
.approach-cell p{color:var(--slate); margin:0; font-size:15px;}
/* ---------- services ---------- */
.services{background:var(--ink); color:var(--paper); padding:90px 0;}
.services .kicker{color:var(--amber);}
.services .section-head p{color:#B7AFA0;}
.svc-list{display:flex; flex-direction:column; border-top:1px solid #3A4048;}
.svc-row{
display:grid; grid-template-columns:64px 1fr 1.3fr; gap:28px; align-items:start;
padding:32px 0; border-bottom:1px solid #3A4048;
}
.svc-index{font-family:var(--mono); color:var(--amber); font-size:14px; padding-top:4px;}
.svc-row h3{font-family:var(--serif); font-size:24px; margin:0; font-weight:600;}
.svc-row p{margin:0; color:#B7AFA0; font-size:15.5px; max-width:56ch;}
/* ---------- contact ---------- */
.contact{padding:90px 0 100px;}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact-info h2{margin-bottom:16px;}
.contact-info p{color:var(--slate); font-size:15.5px; max-width:42ch;}
.contact-detail{margin-top:34px; font-family:var(--mono); font-size:14px;}
.contact-detail div{margin-bottom:10px;}
.contact-detail a{text-decoration:none; border-bottom:1px solid var(--paper-line);}
.contact-detail a:hover{border-color:var(--rust); color:var(--rust);}
.credentials{margin-top:34px; padding-top:22px; border-top:1px dashed var(--paper-line); font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; color:var(--slate);}
form{background:var(--paper-dim); border:1px solid var(--paper-line); padding:32px;}
.field{margin-bottom:20px;}
label{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:8px;}
input, textarea{
width:100%; padding:12px 14px; border:1px solid var(--paper-line); background:var(--paper);
font-family:var(--sans); font-size:14.5px; color:var(--ink); resize:vertical;
}
input:focus, textarea:focus{outline:2px solid var(--rust); outline-offset:1px; border-color:var(--rust);}
.submit-btn{
font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
background:var(--rust); color:var(--paper); border:none; padding:14px 26px; cursor:pointer; transition:transform .15s, background .15s;
}
.submit-btn:hover{background:#8A3222; transform:translateY(-2px);}
.form-note{font-family:var(--mono); font-size:11px; color:var(--slate); margin-top:14px;}
/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--slate-on-dark); padding:34px 0; font-family:var(--mono); font-size:12px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
@media (max-width:860px){
.hero .wrap{grid-template-columns:1fr;}
.deck{height:300px; margin-top:12px;}
.approach-grid{grid-template-columns:1fr;}
.svc-row{grid-template-columns:1fr;}
.svc-index{padding-top:0;}
.contact-grid{grid-template-columns:1fr;}
nav ul{gap:18px;}
}
</style>
</head>
<body>
<header>
<div class="wrap nav-inner">
<a class="logo" href="#top">STORIED<span>·</span>SECURITY</a>
<nav>
<ul>
<li><a href="#approach">Approach</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main id="top">
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Exercise Control — In Session</p>
<h1>Turning ordinary security programs into <em>Storied</em> ones.</h1>
<p class="hero-sub">We run practical tabletop exercises that prepare your team for the incident before it happens — so when it's real, nobody's reaching for the playbook for the first time.</p>
<div class="btn-row">
<a class="btn btn-primary" href="#contact">Start a conversation</a>
<a class="btn btn-ghost" href="#services">See what we run</a>
</div>
</div>
<div>
<div class="deck" id="deck" role="button" tabindex="0" aria-label="Click to reveal the next exercise injection">
<!-- cards injected by JS -->
</div>
<p class="deck-hint">Click the card — this is how an injection lands mid-exercise</p>
</div>
</div>
</section>
<section class="philosophy">
<div class="wrap">
<blockquote>We don't practice to think about what needs to be done — we do it so we don't have to think when it is time to execute.</blockquote>
</div>
</section>
<section class="section" id="approach">
<div class="wrap">
<div class="section-head">
<p class="kicker">Our Approach</p>
<h2>Rehearsal beats improvisation, every time.</h2>
<p>A tabletop exercise only works if it's uncomfortable in the right ways. We build scenarios around your actual environment, your actual team, and the decisions they'll genuinely have to make.</p>
</div>
<div class="approach-grid">
<div class="approach-cell">
<span class="num">01</span>
<h3>Scenario, not script</h3>
<p>Injections are built from your real infrastructure and threat landscape, not a generic ransomware template.</p>
</div>
<div class="approach-cell">
<span class="num">02</span>
<h3>Decisions under pressure</h3>
<p>We pace injects to force the same time pressure and incomplete information your team will face for real.</p>
</div>
<div class="approach-cell">
<span class="num">03</span>
<h3>Every role at the table</h3>
<p>IT, legal, comms, and leadership all get pulled in — because a real incident doesn't stay in one department.</p>
</div>
<div class="approach-cell">
<span class="num">04</span>
<h3>After-action that sticks</h3>
<p>You leave with a documented gap list and owners assigned, not just a slide deck nobody reopens.</p>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="wrap">
<div class="section-head">
<p class="kicker">What We Run</p>
<h2>Three ways we get your team exercise-ready.</h2>
<p>Each engagement is scoped to your organization — not a canned deck pulled off a shelf.</p>
</div>
<div class="svc-list">
<div class="svc-row">
<span class="svc-index">TTX</span>
<h3>Tabletop Exercises</h3>
<p>Facilitated, scenario-driven sessions that put your team through the decisions a real incident would force — ransomware, data exposure, insider threat, and beyond.</p>
</div>
<div class="svc-row">
<span class="svc-index">CM</span>
<h3>Crisis Management</h3>
<p>Playbooks and response strategies built around who actually needs to act, in what order, and with what authority — so a crisis doesn't stall on "who decides this?"</p>
</div>
<div class="svc-row">
<span class="svc-index">SP</span>
<h3>Security Preparedness</h3>
<p>Ongoing readiness work — gap assessments, escalation paths, and communication plans — that builds confidence long before an exercise or an actual event.</p>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="wrap contact-grid">
<div class="contact-info">
<p class="kicker">Contact Us</p>
<h2>Ready to prepare your team?</h2>
<p>Tell us a bit about your organization and what you're looking to test. We'll follow up to scope an exercise that fits.</p>
<div class="contact-detail">
<div><a href="mailto:jeff.story@storiedsec.com">jeff.story@storiedsec.com</a></div>
<div><a href="tel:+14054646146">405-464-6146</a></div>
</div>
<div class="credentials">JEFF STORY — CISM · CISSP · PMP · CCSP</div>
</div>
<form id="contact-form" action="https://formspree.io/f/mqpzozpv" method="POST">
<div class="field">
<label for="name">Your name</label>
<input type="text" id="name" name="name" autocomplete="name">
</div>
<div class="field">
<label for="email">Your email address *</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div class="field">
<label for="message">Your message *</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button class="submit-btn" type="submit">Submit your information</button>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap">
<span>© 2026 Storied Security, LLC. All rights reserved.</span>
<span>Oklahoma City, OK</span>
</div>
</footer>
<script>
// Injection deck — cycles through realistic tabletop exercise inject cards
const injects = [
{ time: "T+00:00", tag: "INJECT 01", body: "A help desk ticket reports several employees locked out of shared drives. IT has not yet confirmed the cause.", role: "Audience: IT Lead" },
{ time: "T+00:15", tag: "INJECT 02", body: "A ransom note is found on the file server. The attacker claims to have exfiltrated customer data.", role: "Audience: Leadership" },
{ time: "T+00:32", tag: "INJECT 03", body: "A reporter emails asking if the company has been breached. They reference the leaked note directly.", role: "Audience: Comms" },
{ time: "T+00:50", tag: "INJECT 04", body: "Legal asks whether this event triggers a regulatory notification clock — and if so, when it started.", role: "Audience: Legal" },
{ time: "T+01:10", tag: "INJECT 05", body: "Backups exist, but nobody in the room can confirm how recent they are or whether they were also affected.", role: "Audience: IT / Ops" }
];
const deck = document.getElementById('deck');
let current = 0;
function renderDeck(){
deck.innerHTML = '';
injects.forEach((inj, i) => {
const offset = (i - current + injects.length) % injects.length;
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div class="card-head"><span class="tag">${inj.tag}</span><span>${inj.time}</span></div>
<div class="card-body">${inj.body}</div>
<div class="card-foot"><span>${inj.role}</span><span>EXERCISE — SIMULATED</span></div>
`;
if (offset === 0){
card.style.transform = 'translateY(0) scale(1)';
card.style.zIndex = 5;
card.style.opacity = 1;
} else if (offset === 1){
card.style.transform = 'translateY(14px) scale(0.96)';
card.style.zIndex = 4;
card.style.opacity = 0.85;
} else if (offset === 2){
card.style.transform = 'translateY(26px) scale(0.92)';
card.style.zIndex = 3;
card.style.opacity = 0.6;
} else {
card.style.transform = 'translateY(26px) scale(0.92)';
card.style.zIndex = 1;
card.style.opacity = 0;
}
deck.appendChild(card);
});
}
function advance(){
current = (current + 1) % injects.length;
renderDeck();
}
deck.addEventListener('click', advance);
deck.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' '){ e.preventDefault(); advance(); }
});
renderDeck();
</script>
</body>
</html>