/* =========================================================================
UAP Disclosure Timeline — page-scoped via
========================================================================= */
body.ufo-page {
background: radial-gradient(1200px 800px at 70% -200px, #1a2433 0%, #0a0e14 60%) fixed, #0a0e14;
color: #d6dde7;
font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
line-height: 1.55;
overflow-x: hidden;
}
body.ufo-page,
body.ufo-page *,
body.ufo-page *::before,
body.ufo-page *::after { box-sizing: border-box; }
body.ufo-page::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
radial-gradient(circle at 50% -10%, rgba(255,182,72,0.08), transparent 40%);
z-index: 1;
mix-blend-mode: overlay;
}
body.ufo-page::after {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background:
url("data:image/svg+xml;utf8,");
z-index: 1;
mix-blend-mode: overlay;
}
.ufo-shell {
--bg: #0a0e14;
--bg-2: #11171f;
--paper: #f4ecd8;
--paper-2: #e9dec3;
--paper-edge: #c9b88e;
--ink: #1a1410;
--ink-2: #3b2f1f;
--amber: #ffb648;
--amber-2: #ffd591;
--cyan: #6cd4e0;
--magenta: #e26d8a;
--rose: #f08a6b;
--green: #8bc97a;
--muted: #76808c;
--line: rgba(255,255,255,.08);
--shadow: 0 24px 60px rgba(0,0,0,.5);
max-width: 1280px;
margin: 0 auto;
padding: 32px 32px 120px;
position: relative;
z-index: 2;
}
.ufo-shell a { color: var(--amber-2); text-decoration: none; border-bottom: 1px dotted rgba(255,213,145,.4); }
.ufo-shell a:hover { color: #fff; border-bottom-color: #fff; }
/* ---------- header ---------- */
.ufo-shell header.top {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
padding: 20px 0 32px;
border-bottom: 1px solid var(--line);
margin-bottom: 40px;
}
.ufo-shell .eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: .28em;
color: var(--amber);
text-transform: uppercase;
margin-bottom: 14px;
}
.ufo-shell .eyebrow .dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 14px var(--amber);
margin-right: 10px;
animation: ufo-pulse 2.4s infinite;
transform: translateY(1px);
}
@keyframes ufo-pulse {
0%, 100% { opacity: 1; transform: translateY(1px) scale(1); }
50% { opacity: .35; transform: translateY(1px) scale(.85); }
}
.ufo-shell h1.title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(34px, 5.4vw, 64px);
line-height: .98;
letter-spacing: -0.025em;
margin: 0 0 18px;
color: #fff;
}
.ufo-shell h1.title em { font-style: normal; color: var(--amber-2); }
.ufo-shell .lede {
max-width: 60ch;
color: #a4b0bf;
font-size: 16px;
margin: 0;
}
/* declassified stamp + lang toggle stack */
.ufo-shell .right-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 18px;
}
.ufo-shell .stamp {
--c: #d35a47;
border: 3px solid var(--c);
color: var(--c);
padding: 10px 18px 8px;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
transform: rotate(-7deg);
border-radius: 4px;
text-align: center;
line-height: 1.2;
user-select: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
background: rgba(211,90,71,.04);
}
.ufo-shell .stamp .small { display: block; font-size: 9px; letter-spacing: .25em; opacity: .9; margin-top: 2px; }
/* language toggle */
.ufo-shell .lang-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 2px;
font-family: 'JetBrains Mono', monospace;
}
.ufo-shell .lang-toggle button {
background: transparent;
border: 0;
color: #a4b0bf;
cursor: pointer;
font: 700 11px/1 'JetBrains Mono', monospace;
letter-spacing: .14em;
padding: 8px 14px;
border-radius: 999px;
transition: all .15s ease;
}
.ufo-shell .lang-toggle button:hover { color: #fff; }
.ufo-shell .lang-toggle button[data-active="1"] {
background: var(--amber);
color: #0a0e14;
}
/* ---------- stat strip ---------- */
.ufo-shell .stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
margin-bottom: 56px;
}
.ufo-shell .stat { background: var(--bg-2); padding: 22px 22px 20px; }
.ufo-shell .stat .num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 36px;
font-weight: 700;
color: #fff;
letter-spacing: -0.04em;
line-height: 1;
}
.ufo-shell .stat .num small { font-size: 16px; color: var(--muted); margin-left: 4px; }
.ufo-shell .stat .lab {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--muted);
margin-top: 8px;
}
/* ---------- key moments rail ---------- */
.ufo-shell .section-h {
display: flex;
align-items: baseline;
gap: 18px;
margin: 0 0 22px;
flex-wrap: wrap;
}
.ufo-shell .section-h h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 600;
margin: 0;
color: #fff;
letter-spacing: -0.01em;
}
.ufo-shell .section-h .meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--muted);
letter-spacing: .18em;
text-transform: uppercase;
}
.ufo-shell .rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
margin-bottom: 64px;
}
.ufo-shell .key {
background: linear-gradient(180deg, rgba(20,28,42,.85), rgba(13,19,28,.92));
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px;
position: relative;
overflow: hidden;
transition: transform .25s ease, border-color .25s ease;
cursor: pointer;
color: inherit;
text-decoration: none;
}
.ufo-shell .key:hover {
transform: translateY(-3px);
border-color: rgba(255,182,72,.35);
}
.ufo-shell .key::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: var(--accent, var(--amber));
}
.ufo-shell .key .yr {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--accent, var(--amber));
letter-spacing: .14em;
margin-bottom: 6px;
}
.ufo-shell .key h3 {
font-size: 17px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
line-height: 1.3;
}
.ufo-shell .key p {
font-size: 14px;
color: #a8b3c0;
margin: 0;
}
/* ---------- toolbar ---------- */
.ufo-shell .toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
margin-bottom: 26px;
padding: 14px 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
position: sticky;
top: 12px;
z-index: 50;
backdrop-filter: saturate(140%) blur(10px);
}
.ufo-shell .filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ufo-shell .chip {
font: 500 12px/1 'JetBrains Mono', monospace;
letter-spacing: .14em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--line);
color: #b8c1ce;
cursor: pointer;
transition: all .15s ease;
user-select: none;
}
.ufo-shell .chip:hover { color: #fff; border-color: #2c3645; }
.ufo-shell .chip[data-active="1"] {
background: var(--chip-active, var(--amber));
color: #0a0e14;
border-color: transparent;
}
.ufo-shell .search {
flex: 1;
min-width: 220px;
margin-left: auto;
background: #0a0e14;
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 14px;
color: #d6dde7;
font: 14px 'Space Grotesk', sans-serif;
outline: none;
}
.ufo-shell .search:focus { border-color: var(--amber); }
.ufo-shell .count-pill {
font: 600 11px/1 'JetBrains Mono', monospace;
letter-spacing: .12em;
color: var(--muted);
padding: 8px 10px;
}
/* ---------- timeline ---------- */
.ufo-shell .timeline { position: relative; }
.ufo-shell .timeline::before {
content: "";
position: absolute;
left: 110px; top: 0; bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(255,182,72,.3) 5%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.08) 75%, rgba(255,182,72,.3) 95%, transparent);
}
.ufo-shell .decade {
display: grid;
grid-template-columns: 110px 1fr;
gap: 0;
margin-bottom: 8px;
align-items: start;
}
.ufo-shell .decade-label {
position: sticky;
top: 90px;
align-self: start;
padding-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--muted);
letter-spacing: .18em;
text-align: right;
padding-right: 22px;
z-index: 5;
}
.ufo-shell .decade-label .num {
display: block;
font-size: 28px;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.ufo-shell .decade-events { padding-left: 38px; position: relative; }
/* event card */
.ufo-shell .event {
position: relative;
background: var(--paper);
color: var(--ink);
border-radius: 6px;
padding: 22px 24px 20px;
margin-bottom: 22px;
box-shadow:
0 1px 0 rgba(0,0,0,.4),
0 14px 30px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(0,0,0,.05);
transition: transform .2s ease;
}
.ufo-shell .event:hover { transform: translateY(-2px); }
.ufo-shell .event::before {
content: "";
position: absolute; inset: 0;
border-radius: 6px;
background:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, rgba(0,0,0,.02), transparent 30%);
pointer-events: none;
border-radius: 6px;
}
.ufo-shell .event::after {
content: "";
position: absolute;
left: -38px; top: 26px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent, var(--amber));
box-shadow: 0 0 0 4px var(--bg), 0 0 16px var(--accent, var(--amber));
}
.ufo-shell .event.featured {
background: linear-gradient(180deg, var(--paper), var(--paper-2));
border-left: 4px solid var(--accent, var(--amber));
padding-left: 24px;
}
.ufo-shell .ehead {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
margin-bottom: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-2);
}
.ufo-shell .ehead .date {
color: var(--ink);
font-weight: 700;
background: rgba(0,0,0,.06);
padding: 4px 8px;
border-radius: 3px;
}
.ufo-shell .agency {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
font-weight: 700;
color: #fff;
background: var(--accent, #888);
letter-spacing: .14em;
}
.ufo-shell .agency::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,.85);
}
.ufo-shell .loc { color: var(--ink-2); }
.ufo-shell .ehead .featured-tag {
margin-left: auto;
font-family: 'Special Elite', monospace;
font-size: 10px;
color: #b1452f;
border: 1.5px solid #b1452f;
padding: 3px 7px 2px;
border-radius: 2px;
transform: rotate(-2deg);
letter-spacing: .2em;
}
.ufo-shell .event h3.title {
font-family: 'Space Grotesk', sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.3;
}
.ufo-shell .event.featured h3.title { font-size: 22px; }
.ufo-shell .event p.desc {
margin: 0 0 12px;
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.6;
}
.ufo-shell blockquote.quote {
font-family: 'Special Elite', monospace;
font-size: 14px;
line-height: 1.5;
color: var(--ink);
border-left: 3px solid #b1452f;
margin: 14px 0;
padding: 10px 14px;
background: rgba(0,0,0,.04);
border-radius: 0 4px 4px 0;
position: relative;
}
.ufo-shell blockquote.quote .qsrc {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .2em;
color: #8a6f50;
margin-bottom: 6px;
}
.ufo-shell .redacted {
background: #1a1410;
color: #1a1410;
padding: 0 4px;
border-radius: 1px;
user-select: none;
transition: color .25s, background .25s;
}
.ufo-shell .redacted:hover {
background: rgba(26,20,16,.15);
color: var(--ink);
}
.ufo-shell .efoot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px dashed rgba(0,0,0,.18);
}
.ufo-shell .src {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-2);
border-bottom: 1px dotted #999;
padding-bottom: 1px;
}
.ufo-shell .src:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ufo-shell .extras {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: #8a7d65;
letter-spacing: .1em;
}
/* agency colors */
.ufo-shell .ag-fbi { --accent: #4a86e8; }
.ufo-shell .ag-dow { --accent: #d35a47; }
.ufo-shell .ag-nasa { --accent: #1ea7c0; }
.ufo-shell .ag-dos { --accent: #b07ad8; }
.ufo-shell .ag-aaro { --accent: #ffb648; }
/* hidden when filtered */
.ufo-shell .event[hidden],
.ufo-shell .decade[hidden] { display: none; }
/* ---------- footer ---------- */
.ufo-shell .ufo-footer {
margin-top: 80px;
padding-top: 32px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
.ufo-shell .ufo-footer .src-list { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; }
/* ---------- responsive ---------- */
@media (max-width: 760px) {
.ufo-shell { padding: 22px 16px 80px; }
.ufo-shell header.top { grid-template-columns: 1fr; }
.ufo-shell .right-stack { align-items: flex-start; flex-direction: row; gap: 14px; }
.ufo-shell .stamp { transform: rotate(-5deg); }
.ufo-shell .stats { grid-template-columns: 1fr 1fr; }
.ufo-shell .timeline::before { left: 18px; }
.ufo-shell .decade { grid-template-columns: 1fr; }
.ufo-shell .decade-label { position: static; text-align: left; padding: 8px 0 12px; }
.ufo-shell .decade-label .num { display: inline-block; margin-right: 12px; }
.ufo-shell .decade-events { padding-left: 36px; }
.ufo-shell .event::after { left: -28px; }
.ufo-shell .toolbar { position: static; }
.ufo-shell .ehead .featured-tag { margin-left: 0; }
}
/* ---------- radar header art ---------- */
.ufo-shell .scope {
width: 110px; height: 110px;
border-radius: 50%;
border: 1px solid rgba(255,182,72,.4);
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.ufo-shell .scope::before, .ufo-shell .scope::after {
content: ""; position: absolute; inset: 0;
border-radius: 50%;
border: 1px solid rgba(255,182,72,.18);
margin: 18px;
}
.ufo-shell .scope::after { margin: 36px; border-color: rgba(255,182,72,.12); }
.ufo-shell .scope .arm {
position: absolute;
left: 50%; top: 50%;
width: 50%; height: 1px;
background: linear-gradient(to right, rgba(255,182,72,.7), transparent);
transform-origin: left;
animation: ufo-sweep 4s linear infinite;
}
.ufo-shell .scope .arm::before {
content: ""; position: absolute; left: 0; top: -2px;
width: 5px; height: 5px;
background: var(--amber);
border-radius: 50%;
box-shadow: 0 0 12px var(--amber);
}
@keyframes ufo-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ufo-shell .scope .blip {
position: absolute;
width: 3px; height: 3px;
background: var(--cyan);
border-radius: 50%;
opacity: 0;
box-shadow: 0 0 8px var(--cyan);
animation: ufo-blip 4s linear infinite;
}
.ufo-shell .scope .blip:nth-child(2) { left: 28%; top: 35%; animation-delay: .9s; }
.ufo-shell .scope .blip:nth-child(3) { left: 65%; top: 24%; animation-delay: 1.6s; }
.ufo-shell .scope .blip:nth-child(4) { left: 60%; top: 70%; animation-delay: 2.3s; }
.ufo-shell .scope .blip:nth-child(5) { left: 25%; top: 65%; animation-delay: 3.1s; }
@keyframes ufo-blip {
0%, 90%, 100% { opacity: 0; }
8% { opacity: 1; }
40% { opacity: .3; }
}
.ufo-shell .header-flex {
display: flex;
gap: 22px;
align-items: flex-start;
}
.ufo-shell .header-text { flex: 1; }
/* ---------- back-to-home topbar ---------- */
body.ufo-page .ufo-topbar {
position: relative;
z-index: 3;
max-width: 1280px;
margin: 0 auto;
padding: 18px 32px 0;
}
body.ufo-page .ufo-topbar-logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: #d6dde7;
text-decoration: none;
border: 1px solid rgba(255,213,145,.18);
border-radius: 999px;
padding: 6px 14px 6px 10px;
background: rgba(20, 26, 36, .6);
backdrop-filter: blur(4px);
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body.ufo-page .ufo-topbar-logo:hover {
color: #fff;
border-color: #ffb648;
background: rgba(255, 182, 72, .08);
}
body.ufo-page .ufo-topbar-mark { color: #ffb648; }
body.ufo-page .ufo-topbar-logo:hover .ufo-topbar-mark { color: #ffd591; }
body.ufo-page .ufo-topbar-back {
font-size: 14px;
color: #ffb648;
transition: transform .15s ease;
}
body.ufo-page .ufo-topbar-logo:hover .ufo-topbar-back { transform: translateX(-2px); }
@media (max-width: 640px) {
body.ufo-page .ufo-topbar { padding: 14px 16px 0; }
}