/* ═══════════════════════════════════════════════════════════════ INTERNET ARCHIVE FORENSIC EXAMINATION — Page Styles Hybrid of /story/ narrative + /database/ download conventions ═══════════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #0c0c12; --surface: #111119; --card: #161622; --elevated: #1c1c2a; --border: #2a2a3c; --border-dim: #3a3a50; --text: #cdc8d4; --text-bright: #e8e6e1; --text-white: #ffffff; --text-dim: #a0a0a0; --text-muted: #707070; --red: #ff5545; --gold: #ffb732; --blue: #3a86ba; --green: #2de0b6; --cyan: #4eecc8; --orange: #ff8c42; --mono: 'IBM Plex Mono', 'Consolas', monospace; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; } body { background-color: var(--bg); background-image: radial-gradient(ellipse at center top, rgba(58,134,186,0.14), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100vh; background-position: top center; color: var(--text); font-family: var(--sans); line-height: 1.7; overflow-x: hidden; } /* ── SITE BAR (shared convention) ───────────────────────────── */ .site-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: 12px 30px; background: #111119; border-bottom: 2px solid var(--border-dim); } .site-bar a { text-decoration: none; } .bar-brand { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--red); letter-spacing: 5px; } .bar-sep { color: var(--border-dim); font-size: 18px; } .bar-section { font-family: var(--mono); font-size: 12px; color: #b0b0b0; letter-spacing: 2px; text-transform: uppercase; } .bar-nav { margin-left: auto; display: flex; gap: 12px; } .bar-link { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 1px; padding: 6px 14px; border: 1px solid var(--border-dim); border-radius: 4px; transition: all 0.2s; } .bar-link:hover { color: #fff; border-color: var(--red); background: #ff554515; } /* ── HERO ───────────────────────────────────────────────────── */ /* Locked-gradient pattern — the blue radial glow now lives on (background-attachment: fixed), so it stays as the page's ambient lighting regardless of scroll position. Hero itself is transparent so that lighting shows through. */ .ia-hero { position: relative; padding: 56px 30px 48px; text-align: center; } .ia-hero-inner { position: relative; max-width: 960px; margin: 0 auto; } .ia-badge { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 4px; border: 1px solid rgba(255,183,50,0.45); padding: 8px 22px; border-radius: 4px; margin-bottom: 24px; background: var(--bg); } .ia-hero h1 { font-family: var(--sans); font-size: 44px; font-weight: 700; color: var(--text-white); line-height: 1.15; margin-bottom: 18px; } .ia-hero h1 em { font-style: normal; color: var(--gold); } .ia-hero-sub { font-size: 18px; color: #b0b0b0; line-height: 1.65; max-width: 800px; margin: 0 auto 36px; } .ia-hero-stats { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; } .ia-hero-stat { text-align: center; } .ia-hero-stat .val { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--red); display: block; } .ia-hero-stat .val.cyan { color: var(--cyan); } .ia-hero-stat .val.gold { color: var(--gold); } .ia-hero-stat .val.blue { color: var(--blue); } .ia-hero-stat .lbl { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } /* ── PAGE ───────────────────────────────────────────────────── */ .page { max-width: 1080px; margin: 0 auto; padding: 40px 30px 60px; } .section-block { margin-bottom: 56px; } .section-label { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .section-h { font-size: 28px; font-weight: 700; color: var(--text-white); margin-bottom: 18px; line-height: 1.25; } .section-sub { font-size: 16px; color: var(--text-dim); margin-bottom: 28px; max-width: 880px; } .prose p { font-size: 17px; line-height: 1.75; color: var(--text); margin-bottom: 18px; } .prose strong { color: var(--text-white); } .prose em { color: var(--gold); font-style: normal; } .prose code { font-family: var(--mono); font-size: 14px; color: var(--cyan); background: #111119; padding: 1px 6px; border-radius: 3px; } .prose a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(58,134,186,0.4); } .prose a:hover { color: var(--cyan); border-color: var(--cyan); } /* ── FINDING CALLOUT CARDS ─────────────────────────────────── */ .findings-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .finding-card { background: var(--surface); border: 1px solid var(--border-dim); border-left: 5px solid var(--red); border-radius: 6px; padding: 18px 22px; } .finding-card.critical { border-left-color: var(--red); } .finding-card.high { border-left-color: var(--cyan); } .finding-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .finding-num { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text-dim); letter-spacing: 2px; } .finding-sev { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 3px 10px; border-radius: 3px; } .finding-sev.critical { background: rgba(255,85,69,0.15); color: var(--red); } .finding-sev.high { background: rgba(78,236,200,0.15); color: var(--cyan); } .finding-title { font-size: 16px; font-weight: 600; color: var(--text-white); flex: 1; } .finding-body { font-size: 15px; line-height: 1.6; color: var(--text); } .finding-body strong { color: var(--gold); } /* ── DOWNLOAD PACKAGES (database.css conventions) ─────────── */ .dl-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .download-card { background: #1a1a28; border: 1px solid var(--border-dim); border-radius: 6px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s; } .download-card:hover { border-color: var(--cyan); background: #1e1e32; } .download-card.primary { border-left: 4px solid var(--red); } .download-card.large { border-left: 4px solid var(--gold); } .dl-title { font-size: 15px; font-weight: 600; color: var(--text-white); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dl-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; } .dl-badge.zip { background: #4eecc815; color: #4eecc8; } .dl-badge.pdf { background: #ff8c4215; color: #ff8c42; } .dl-badge.docx { background: #3a86ba15; color: #3a86ba; } .dl-badge.md { background: #3a86ba15; color: #3a86ba; } .dl-badge.ots { background: #3a86ba15; color: #3a86ba; } .dl-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; } .dl-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 12px; } .dl-size { color: var(--red); font-weight: 600; } .dl-hash { color: var(--text-muted); font-size: 11px; cursor: pointer; } .dl-hash:hover { color: var(--blue); } .dl-hash.copied { color: var(--cyan); } .dl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .dl-btn { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 4px; text-decoration: none; border: 1px solid; transition: all 0.2s; } .dl-btn.download { background: #1e1e32; color: var(--cyan); border-color: var(--cyan); } .dl-btn.download:hover { background: var(--cyan); color: var(--bg); } .dl-btn.ots { background: #1e1e32; color: var(--blue); border-color: rgba(58,134,186,0.55); } .dl-btn.ots:hover { background: var(--blue); color: var(--bg); } /* ── CROSS-LINKS ────────────────────────────────────────────── */ .xlink-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .xlink { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; text-decoration: none; transition: all 0.2s; } .xlink:hover { border-color: var(--blue); background: #161626; } .xlink-label { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .xlink-title { font-size: 15px; font-weight: 600; color: var(--text-white); margin-bottom: 4px; } .xlink-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; } /* ── INTEGRITY BOX ──────────────────────────────────────────── */ .integrity-box { background: #111119; border: 1px solid var(--border-dim); border-left: 4px solid var(--blue); border-radius: 6px; padding: 18px 22px; font-size: 14px; color: var(--text); line-height: 1.65; } .integrity-box strong { color: var(--blue); } .integrity-box code { font-family: var(--mono); font-size: 12px; color: var(--cyan); background: #0c0c12; padding: 1px 6px; border-radius: 3px; } /* ── CARD-STACK CAPTION OVERRIDE (brighter captions for /internet-archive/) ── */ #ia-cards .cs-inline-caption { color: var(--text-bright); font-size: 13px; } /* ── FOOTER ─────────────────────────────────────────────────── */ .ia-footer { border-top: 1px solid var(--border); padding: 30px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--text-muted); letter-spacing: 1px; } .ia-footer a { color: var(--blue); text-decoration: none; } .ia-footer a:hover { color: var(--cyan); } /* ── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 768px) { .ia-hero h1 { font-size: 30px; } .ia-hero-stats { gap: 20px; } .ia-hero-stat .val { font-size: 24px; } .section-h { font-size: 22px; } .prose p { font-size: 15px; } .page { padding: 30px 18px 40px; } }