/* =========================================
ORION CONCORD ARCHIVE // ACCESS RESTRICTED
Neocities CSS Theme
========================================= */
/* --- Fonts (optional but recommended) ---
Put this in your HTML if you want:
*/
:root{
--bg: #0b1622;
--panel: #0f1e2e;
--panel2: #13263a;
}
body{
background: var(--bg);
}
h1, h2, h3, h4{
color: #ffffff;
}
.brand h1,
.panel .hd .title,
.card h3{
text-shadow: 0 0 6px rgba(77,163,255,0.25);
}
*{ box-sizing:border-box; }
html, body{
height:100%;
}
body{
margin:0;
background: var(--bg);
color: #EDEDED;
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: .2px;
line-height: 1.5;
overflow-x: hidden;
}
/* --- Global CRT overlays (scanlines + subtle noise) --- */
body::before{
content:"";
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events:none;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.035) 0px,
rgba(255,255,255,.035) 1px,
rgba(0,0,0,0) 3px,
rgba(0,0,0,0) 6px
);
opacity:.22;
mix-blend-mode: overlay;
z-index: 9998;
}
body::after{
content:"";
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events:none;
background:
radial-gradient(circle at 20% 20%, rgba(77,163,255,.08), transparent 35%),
radial-gradient(circle at 80% 30%, rgba(215,38,56,.06), transparent 40%),
linear-gradient(to bottom, rgba(255,255,255,.03), transparent 55%);
opacity:.25;
z-index: 9997;
animation: crtFlicker 6.5s infinite steps(1, end);
}
@keyframes crtFlicker{
0%, 100% { opacity: .22; }
7% { opacity: .34; }
9% { opacity: .18; }
13% { opacity: .28; }
44% { opacity: .20; }
47% { opacity: .30; }
71% { opacity: .17; }
73% { opacity: .29; }
}
/* --- Layout helpers --- */
.wrap{
max-width: 1000px;
width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
padding-top: 28px;
padding-bottom: 80px;
}
/* --- Header / Top bar --- */
.topbar{
border: 1px solid rgba(77,163,255,0.18);
background: linear-gradient(180deg, var(--panel2), var(--panel));
padding: 12px 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.55);
display:flex;
gap: 10px;
align-items:center;
justify-content: space-between;
}
.brand{
display:flex;
align-items:center;
gap: 10px;
min-width: 0;
}
.emblem{
width: 34px;
height: 34px;
border: 1px solid rgba(77,163,255,0.18);
background:
linear-gradient(135deg, rgba(77,163,255,.22), rgba(215,38,56,.16)),
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px);
flex: 0 0 auto;
}
.brand h1{
margin:0;
font-size: 14px;
letter-spacing: 1.6px;
text-transform: uppercase;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.brand .sub{
display:block;
font-size: 11px;
color: rgba(237,237,237,0.72);
letter-spacing: 1.2px;
text-transform: uppercase;
}
/* --- Warning ticker --- */
.ticker .msg{
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.ticker .msg span{
display: inline-block;
transform: translateX(100%);
animation: scrollLeft 12s linear infinite;
}
@keyframes scrollLeft{
0%{ transform: translateX(100%); }
100%{ transform: translateX(-100%); }
}
/* --- Navigation --- */
nav{
margin-top: 12px;
border: 1px solid rgba(77,163,255,0.18);
background: var(--panel);
display:flex;
flex-wrap: wrap;
gap: 0;
}
nav a{
color: #EDEDED;
text-decoration:none;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1.3px;
padding: 12px 14px;
border-right: 1px solid rgba(77,163,255,0.18);
position: relative;
}
nav a:hover{
color: #4DA3FF;
background: rgba(77,163,255,.06);
}
nav .active{
color: #4DA3FF;
background: rgba(77,163,255,0.10);
box-shadow: inset 0 -2px 0 #4DA3FF;
}
/* --- Panels / Cards --- */
.panel{
border: 1px solid rgba(77,163,255,0.18);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 12px 34px rgba(0,0,0,0.55);
}
.panel .hd{
padding: 12px 14px;
border-bottom: 1px solid rgba(77,163,255,0.18);
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.panel .hd .title{
margin:0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #EDEDED;
}
.badge{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
padding: 4px 8px;
border: 1px solid rgba(77,163,255,0.18);
color: #4DA3FF;
background: rgba(77,163,255,.06);
}
.badge.red{
color: #D72638;
border-color: rgba(215,38,56,.35);
background: rgba(215,38,56,.08);
}
.panel .bd{
padding: 14px;
color: rgba(237,237,237,0.72);
font-size: 13px;
}
/* --- Data styling --- */
.kv{
display:grid;
grid-template-columns: 160px 1fr;
gap: 8px 12px;
margin: 0;
}
.kv dt{
color: rgba(77,163,255,.82);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1.2px;
}
.kv dd{
margin: 0;
color: #EDEDED;
}
/* --- Dossier cards (systems, threats) --- */
.card{
border: 1px solid rgba(77,163,255,0.18);
background: rgba(17,17,17,.9);
padding: 12px 12px 10px;
position: relative;
overflow:hidden;
}
.card::before{
content:"";
position:absolute;
top: -2;
right: -2;
bottom: -2;
left: -2;
background:
linear-gradient(90deg, transparent, rgba(77,163,255,.08), transparent);
transform: translateX(-60%);
opacity: .0;
transition: opacity .18s ease;
pointer-events:none;
}
.card:hover::before{
opacity: .9;
animation: sweep 1.0s linear infinite;
}
@keyframes sweep{
0%{ transform: translateX(-70%); }
100%{ transform: translateX(70%); }
}
.card h3{
margin: 0 0 6px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #EDEDED;
}
.card .meta{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.pill{
font-size: 11px;
letter-spacing: 1.1px;
text-transform: uppercase;
border: 1px solid rgba(77,163,255,0.18);
padding: 4px 8px;
color: #4DA3FF;
background: rgba(77,163,255,.06);
}
.pill.red{
color: #D72638;
border-color: rgba(215,38,56,.35);
background: rgba(215,38,56,.08);
}
.note{
color: rgba(237,237,237,0.72);
font-size: 13px;
}
.denied{
position: relative;
overflow: hidden;
}
.denied::after{
content: "ACCESS DENIED";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #D72638;
background: rgba(0,0,0,0.7);
border: 1px solid rgba(215,38,56,0.35);
opacity: 0;
transform: translateY(6px);
filter: blur(0);
transition:
opacity 220ms ease,
transform 220ms ease,
filter 220ms ease;
pointer-events: none;
}
.denied:hover::after{
opacity: 1;
transform: translateY(0);
filter: blur(0.25px);
animation: deniedGlitch 1.6s ease-in-out infinite;
}
@keyframes deniedGlitch{
0%, 100% { transform: translate(0, 0); }
15% { transform: translate(0.6px, -0.4px); }
30% { transform: translate(-0.6px, 0.4px); }
45% { transform: translate(0.9px, 0); }
60% { transform: translate(-0.4px, -0.3px); }
75% { transform: translate(0.5px, 0.3px); }
}
/* --- Buttons --- */
.btn{
display:inline-block;
padding: 10px 14px;
border: 1px solid rgba(77,163,255,0.18);
background: rgba(77,163,255,.08);
color: #EDEDED;
text-transform: uppercase;
letter-spacing: 1.6px;
font-size: 12px;
text-decoration:none;
position: relative;
}
.btn:hover{
background: rgba(77,163,255,.14);
color: #4DA3FF;
}
.btn.red{
background: rgba(215,38,56,.10);
border-color: rgba(215,38,56,.35);
}
.btn.red:hover{
color: #D72638;
background: rgba(215,38,56,.14);
}
/* --- Timeline --- */
.timeline{
position: relative;
padding: 10px 0 10px 0;
}
.timeline::before{
content:"";
position:absolute;
left: 14px;
top: 0;
bottom: 0;
width: 1px;
background: rgba(77,163,255,.22);
}
.titem{
position: relative;
padding-left: 40px;
margin: 0 0 14px;
}
.titem::before{
content:"";
position:absolute;
left: 10px;
top: 6px;
width: 9px;
height: 9px;
border: 1px solid rgba(77,163,255,.5);
background: rgba(77,163,255,.12);
}
.titem h4{
margin: 0 0 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: #4DA3FF;
}
.titem p{
margin: 0;
color: rgba(237,237,237,0.72);
font-size: 13px;
}
/* --- Links / small text --- */
a{ color: #4DA3FF; }
a:hover{ color: #EDEDED; }
.small{
font-size: 12px;
color: rgba(237,237,237,0.72);
text-transform: uppercase;
letter-spacing: 1.2px;
}
/* --- Mobile tweaks --- */
@media (max-width: 700px){
.ticker{ max-width: 100%; }
.kv{ grid-template-columns: 1fr; }
nav a{ flex: 1 1 auto; }
}
/* =========================
SYSTEMS PAGE LAYOUT
========================= */
.systems-title{
margin-top: 14px;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
color: #EDEDED;
}
.systems-grid{
display: grid;
gap: 14px;
}
.systems-grid.top{
grid-template-columns: repeat(4, 1fr);
}
.systems-grid.bottom{
grid-template-columns: repeat(3, 1fr);
margin-top: 14px;
}
/* A custom “system card” that matches your aesthetic */
.system-card{
border: 1px solid rgba(77,163,255,0.18);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 12px 34px rgba(0,0,0,0.55);
padding: 12px;
}
.system-card h3{
margin: 0 0 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.6px;
color: #EDEDED;
}
.system-thumb{
border: 1px solid rgba(77,163,255,0.18);
background: rgba(0,0,0,0.25);
height: 160px; /* top row size */
display: flex;
align-items: center;
justify-content: center;
color: rgba(237,237,237,0.70);
text-transform: uppercase;
letter-spacing: 1.2px;
font-size: 12px;
position: relative;
overflow: hidden;
}
/* subtle “scan” */
.system-thumb::after{
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(90deg, transparent, rgba(77,163,255,0.08), transparent);
transform: translateX(-60%);
opacity: 0;
}
.system-card:hover .system-thumb::after{
opacity: 1;
animation: sweep 1.0s linear infinite;
}
/* bigger thumbnails for the bottom row like your sketch */
.system-card.big .system-thumb{
height: 240px;
}
.system-meta{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.system-note{
margin-top: 10px;
color: rgba(237,237,237,0.82);
font-size: 13px;
}
/* responsive */
@media (max-width: 980px){
.systems-grid.top{ grid-template-columns: repeat(2, 1fr); }
.systems-grid.bottom{ grid-template-columns: 1fr; }
.system-card.big .system-thumb{ height: 220px; }
}
/* ===== TIMELINE OVERRIDES (bigger + scroll fade) ===== */
.timeline{
position: relative;
padding: 16px 0 6px 0;
}
.timeline::before{
content:"";
position:absolute;
left: 14px;
top: 0;
bottom: 0;
width: 1px;
background: rgba(77,163,255,0.22);
}
/* IMPORTANT: start hidden so fading is visible */
.titem{
position: relative;
padding-left: 44px;
margin: 0 0 40px;
opacity: 0 !important;
transform: translateY(18px) !important;
transition: opacity 700ms ease, transform 700ms ease !important;
}
.titem.is-visible{
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Bigger heading + text */
.titem h4{
margin: 0 0 6px;
font-size: 15px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #4DA3FF;
}
.titem p{
margin: 0;
font-size: 15px;
line-height: 1.6;
color: rgba(237,237,237,0.88);
}
/* ===== TIMELINE STAGGER (scroll reveal) ===== */
/* Each item gets a different delay based on its position in the list */
.timeline .titem{
transition-delay: 0ms;
}
.timeline .titem:nth-child(1){ transition-delay: 0ms; }
.timeline .titem:nth-child(2){ transition-delay: 90ms; }
.timeline .titem:nth-child(3){ transition-delay: 180ms; }
.timeline .titem:nth-child(4){ transition-delay: 270ms; }
.timeline .titem:nth-child(5){ transition-delay: 360ms; }
.timeline .titem:nth-child(6){ transition-delay: 450ms; }
.timeline .titem:nth-child(7){ transition-delay: 540ms; }
.timeline .titem:nth-child(8){ transition-delay: 630ms; }
.timeline .titem:nth-child(9){ transition-delay: 720ms; }
.timeline .titem:nth-child(10){ transition-delay: 810ms; }
.timeline .titem:nth-child(11){ transition-delay: 900ms; }
.timeline .titem:nth-child(12){ transition-delay: 990ms; }
/* When fading OUT, remove the delay so it responds immediately */
.timeline .titem:not(.is-visible){
transition-delay: 0ms;
}
/* =========================
THREATS PAGE
========================= */
.threat-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 14px;
}
.threat-card{
border: 1px solid rgba(215,38,56,0.35);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 12px 34px rgba(0,0,0,0.55);
padding: 12px;
position: relative;
}
.threat-card::before{
content:"THREAT FILE";
position:absolute;
top: 8px;
right: 10px;
font-size: 10px;
letter-spacing: 1.4px;
color: rgba(215,38,56,0.7);
}
.threat-name{
margin: 0 0 6px;
font-size: 14px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #EDEDED;
}
.threat-alias{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(237,237,237,0.72);
margin-bottom: 8px;
}
.threat-meta{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.threat-desc{
font-size: 14px;
line-height: 1.6;
color: rgba(237,237,237,0.85);
}
.threat-card.severe{
border-color: rgba(215,38,56,0.7);
}
@media (max-width: 900px){
.threat-grid{
grid-template-columns: 1fr;
}
}
.threat-link{
text-decoration: none;
color: inherit;
display: block;
}
/* ===== HOVER-ONLY SMOOTH GLITCH ===== */
@keyframes smoothGlitch {
0% {
transform: translate(0, 0);
filter: none;
}
20% {
transform: translate(0.5px, -0.5px);
filter: hue-rotate(0deg);
}
40% {
transform: translate(-0.5px, 0.5px);
filter: hue-rotate(2deg);
}
60% {
transform: translate(0.8px, 0);
filter: hue-rotate(-2deg);
}
80% {
transform: translate(-0.4px, -0.4px);
filter: hue-rotate(1deg);
}
100% {
transform: translate(0, 0);
filter: none;
}
}
.threat-card.severe:hover{
animation: smoothGlitch 1.6s ease-in-out infinite;
box-shadow:
0 0 14px rgba(215,38,56,0.35),
0 12px 34px rgba(0,0,0,0.55);
}
.threat-thumb{
height: 120px;
margin-bottom: 10px;
border: 1px solid rgba(215,38,56,0.35);
background:
linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
display: flex;
align-items: center;
justify-content: center;
color: rgba(237,237,237,0.6);
text-transform: uppercase;
letter-spacing: 1.4px;
font-size: 11px;
}
/* subtle emphasis for doctrine */
.panel .kv dt{
text-shadow: 0 0 6px rgba(77,163,255,0.2);
}
/* ===== ANDROMEDA CHARACTERS (2-column layout like your sketch) ===== */
.profile-grid{
display: grid;
grid-template-columns: 340px 1fr;
gap: 14px;
align-items: start;
}
.profile-img{
height: 320px;
border: 1px solid rgba(77,163,255,0.18);
background: rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
}
.profile-img span{
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(237,237,237,0.70);
}
.profile-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
/* mobile */
@media (max-width: 900px){
.profile-grid{
grid-template-columns: 1fr;
}
.profile-img{
height: 260px;
}
}
/* ===== FULL DOSSIER LAYOUT ===== */
.dossier-grid{
display: grid;
grid-template-columns: 340px 1fr;
gap: 14px;
align-items: start;
}
.dossier-photo{
height: 380px;
border: 1px solid rgba(77,163,255,0.18);
background: rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
}
.dossier-photo span{
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(237,237,237,0.70);
}
.redact{
display: inline-block;
padding: 0 6px;
border: 1px solid rgba(215,38,56,0.35);
background: rgba(215,38,56,0.08);
color: rgba(237,237,237,0.90);
letter-spacing: 1.4px;
text-transform: uppercase;
font-size: 12px;
}
.log{
border-left: 2px solid rgba(77,163,255,0.22);
padding-left: 12px;
margin-top: 10px;
}
.log .entry{
margin: 0 0 12px;
}
.log .stamp{
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(237,237,237,0.62);
}
@media (max-width: 900px){
.dossier-grid{
grid-template-columns: 1fr;
}
.dossier-photo{
height: 280px;
}
}
.system-card{
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.system-card:hover{
transform: translateY(-2px);
border-color: rgba(77,163,255,0.35);
box-shadow: 0 16px 40px rgba(0,0,0,0.60);
}
.system-card.denied:hover{
border-color: rgba(215,38,56,0.55);
}
.system-thumb{
background:
radial-gradient(circle at 30% 30%, rgba(77,163,255,0.12), transparent 45%),
linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}
.system-thumb .label{
position: absolute;
bottom: 10px;
left: 10px;
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(237,237,237,0.70);
border: 1px solid rgba(77,163,255,0.18);
background: rgba(0,0,0,0.35);
padding: 4px 8px;
}
/* ===== Page transition ===== */
.page{
opacity: 0;
transition: opacity 1s ease;
}
.page.is-ready{
opacity: 1;
}
.page.is-leaving{
opacity: 0;
}
/* ===== Element fade-in on page load ===== */
.fade-item{
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 420ms ease;
}
.fade-item.is-in{
opacity: 1;
transform: translateY(0);
}
/* ===== HOME TITLE CARD (FIXED) ===== */
.home-title{
margin: 48px auto 36px;
padding: 44px 32px;
max-width: 680px;
text-align: center;
border: 1px solid rgba(77,163,255,0.35);
background: linear-gradient(
180deg,
rgba(12,22,36,0.95),
rgba(8,14,24,0.98)
);
box-shadow:
0 0 0 1px rgba(77,163,255,0.12),
0 24px 60px rgba(0,0,0,0.7);
}
.home-title h1{
margin: 0;
font-size: 44px;
letter-spacing: 6px;
text-transform: uppercase;
color: #EDEDED;
}
.home-title .sub{
margin-top: 12px;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(237,237,237,0.7);
}
nav{
margin-bottom: 8px;
}
/* ===== MAIN CONTENT WIDTH FIX ===== */
.wrap{
max-width: 1110px;
margin: 0 auto;
padding: 0 24px 80px;
}
nav{
max-width: 1100px;
margin: 0 auto;
}
/* ===== OOC (out-of-world) section ===== */
.ooc{
margin-top: 18px;
}
.ooc .ooc-hd{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.ooc .ooc-tag{
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 4px 8px;
border: 1px solid rgba(215,38,56,.35);
color: #D72638;
background: rgba(215,38,56,.08);
}
/* ===== FAQ dropdowns (details/summary) ===== */
.faq{
display:grid;
gap: 10px;
margin-top: 10px;
}
.faq details{
border: 1px solid rgba(77,163,255,0.18);
background: rgba(10,14,22,0.55);
box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.faq summary{
cursor: pointer;
list-style: none;
padding: 12px 14px;
text-transform: uppercase;
letter-spacing: 1.4px;
font-size: 12px;
color: #EDEDED;
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:"+";
color: #4DA3FF;
font-size: 16px;
line-height: 1;
}
.faq details[open] summary::after{
content:"–";
color: #D72638;
}
.faq .answer{
padding: 0 14px 14px;
color: rgba(237,237,237,0.78);
font-size: 13px;
}
.faq .answer p{
margin: 10px 0 0;
}
.ticker .dot{
width: 8px;
height: 8px;
background: #D72638;
box-shadow: 0 0 12px rgba(215,38,56,0.6);
animation: blink 1.1s infinite steps(1,end);
flex: 0 0 auto;
}
@keyframes blink{
50%{ opacity: .25; }
}
.ticker{
color: #D72638;
}
.ticker .msg span{
color: #D72638;
display: inline-block;
transform: translateX(100%);
animation: scrollLeft 12s linear infinite;
letter-spacing: 1.4px;
text-transform: uppercase;
font-size: 11px;
}
/* ===== Systems layout: 4 across, then 3 across ===== */
.systems-grid{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
width: 100%;
margin-top: 14px;
}
.system-link{
display: block;
grid-column: span 3; /* 4 across */
text-decoration: none;
color: inherit;
}
.system-link.big{
grid-column: span 4; /* 3 across */
}
/* make cards fill their link */
.system-card{
height: 100%;
display: flex;
flex-direction: column;
}
/* ===== Citizen mini dossiers ===== */
.citizen-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 14px;
}
@media (max-width: 900px){
.citizen-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
.citizen-grid{ grid-template-columns: 1fr; }
}
/* small card */
.citizen-card{
border: 1px solid rgba(77,163,255,0.18);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
padding: 12px;
cursor: pointer;
position: relative;
}
.citizen-card:hover{
background: rgba(77,163,255,0.05);
}
.citizen-thumb{
height: 110px;
border: 1px solid rgba(77,163,255,0.18);
display:flex;
align-items:center;
justify-content:center;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(237,237,237,0.6);
margin-bottom: 10px;
}
.citizen-name{
font-size: 13px;
letter-spacing: 1.6px;
text-transform: uppercase;
margin: 0;
}
.citizen-home{
font-size: 11px;
margin-top: 4px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(237,237,237,0.7);
}
/* expanded dossier */
.citizen-dossier{
grid-column: 1 / -1;
border: 1px solid rgba(77,163,255,0.25);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 18px 44px rgba(0,0,0,0.6);
padding: 14px;
display: none;
}
.citizen-dossier.active{
display: block;
}
/* ===== Citizen dossiers (NO JS) ===== */
.citizen-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 14px;
}
@media (max-width: 900px){
.citizen-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
.citizen-grid{ grid-template-columns: 1fr; }
}
/* details behaves like a card */
.citizen{
grid-column: span 1;
border: 1px solid rgba(77,163,255,0.18);
background: linear-gradient(180deg, var(--panel2), var(--panel));
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.citizen summary{
cursor: pointer;
list-style: none;
padding: 12px;
}
.citizen summary::-webkit-details-marker{ display:none; }
/* mini card layout */
.citizen-mini{
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.citizen-thumb{
height: 110px;
border: 1px solid rgba(77,163,255,0.18);
display:flex;
align-items:center;
justify-content:center;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(237,237,237,0.6);
}
.citizen-name{
font-size: 13px;
letter-spacing: 1.6px;
text-transform: uppercase;
margin: 0;
}
.citizen-home{
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(237,237,237,0.7);
}
.subject-thumb{
margin-top: 10px;
border: 1px solid rgba(77,163,255,0.18);
background: rgba(0,0,0,0.25);
overflow: hidden;
height: 300px; /* ← controls size */
}
.subject-thumb img{
width: 100%;
height: 100%;
object-fit: cover; /* ← THIS is the magic */
display: block;
opacity: 0.92;
}