/* ============================================================ Dr GHK-Cu — 90s Retro Video Game Aesthetic Dark CRT indigo ground, neon cyan/hot-pink/lime trio Press Start 2P for HUD labels, Nunito 900 for headings, Inter for body prose. ============================================================ */ /* ── Google Fonts loaded in via tags ── */ /* ── CSS Custom Properties ── */ :root { --primary: #00E5FF; --primary-50: #0A2A33; --primary-900: #0096AA; --secondary: #FF4FA3; --accent: #B6FF3C; --neutral-50: #1B1B30; --neutral-200: #2C2C4A; --neutral-500: #8A8AB0; --neutral-900: #0B0B16; --bg: #10101E; --surface: #181830; --surface-elevated:#20203C; --text: #EDEDFF; --text-muted: #A6A6CC; --rule: #2C2C4A; --rule-accent: #00E5FF; --purple: #7C4DFF; --gold: #FFD700; --success: #3CFF8E; --warning: #FFC542; --danger: #FF5C7A; --max-width: 70rem; --container-px: clamp(1rem, 3vw, 2rem); --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-pixel: 'Press Start 2P', 'Courier New', monospace; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; min-height: 100vh; position: relative; overflow-x: hidden; } /* ── CRT Scanline Overlay ── */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( to bottom, transparent, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px ); pointer-events: none; z-index: 9999; } /* ── CRT vignette on bg ── */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, #0B0B16 100%); pointer-events: none; z-index: 0; } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 900; line-height: 1.12; letter-spacing: -0.01em; color: var(--text); } h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); text-shadow: 2px 2px 0 var(--primary); } h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 900; } h3 { font-size: 1.3125rem; font-weight: 800; } h4 { font-size: 1.125rem; font-weight: 800; } p { margin-bottom: 1rem; max-width: 68ch; } p:last-child { margin-bottom: 0; } a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: color 120ms steps(2); } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } strong, b { font-weight: 700; color: var(--text); } em, i { font-style: italic; } small { font-size: 0.875rem; color: var(--text-muted); } ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; } li { margin-bottom: 0.375rem; } /* ── Pixel Font ── */ .pixel, .eyebrow, .hud-label, .nav-num, .card-tag, .stat-label, .ref-badge, .footer-colophon { font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: 0.04em; } .eyebrow { font-size: clamp(0.6875rem, 1.4vw, 0.9375rem); color: var(--accent); line-height: 1.5; display: block; margin-bottom: 0.75rem; } .hud-label { font-size: 0.625rem; color: var(--primary); letter-spacing: 0.06em; } /* ── Layout: Container ── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-px); position: relative; z-index: 1; } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 2px solid var(--rule-accent); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 56px; } .site-brand { font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; letter-spacing: -0.01em; } .site-brand::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--accent); flex-shrink: 0; } .site-brand:hover { color: var(--primary); } .site-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Nav ── */ .site-nav { display: none; } .site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; align-items: center; } .site-nav li { margin: 0; } .site-nav a { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 120ms steps(2); border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--text); } .site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .site-nav a.active { border-bottom-color: var(--accent); color: var(--text); } .site-nav .nav-num { font-size: 0.5625rem; color: var(--primary); transition: color 120ms steps(2); } .site-nav a:hover .nav-num, .site-nav a.active .nav-num { color: var(--accent); } /* ── Mobile Nav Toggle ── */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: 2px solid var(--neutral-200); cursor: pointer; padding: 6px; } .nav-toggle span { display: block; height: 2px; background: var(--text); transition: background 120ms steps(2); } .nav-toggle:hover span { background: var(--primary); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Mobile Nav Open ── */ .site-nav.open { display: block; position: absolute; top: 56px; left: 0; right: 0; background: var(--surface); border-bottom: 2px solid var(--rule-accent); z-index: 99; } .site-nav.open ul { flex-direction: column; padding: 1rem var(--container-px); } .site-nav.open a { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); } .site-nav.open a.active { border-bottom-color: var(--rule); color: var(--accent); } /* Desktop nav */ @media (min-width: 768px) { .site-nav { display: block !important; } .nav-toggle { display: none; } } /* ── Score Strip (index only) ── */ .score-strip { background: var(--surface); border-bottom: 1px solid var(--rule-accent); border-top: 1px solid var(--rule-accent); overflow: hidden; } .score-strip .container { padding-top: 0.375rem; padding-bottom: 0.375rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; } .score-strip .hud-label { color: var(--text-muted); white-space: nowrap; } .score-strip .hud-value { font-family: var(--font-pixel); font-size: 0.625rem; color: var(--primary); letter-spacing: 0.06em; white-space: nowrap; } .score-strip .score-item { display: flex; gap: 0.5rem; align-items: center; } /* ── Main ── */ main { position: relative; z-index: 1; } /* ── Hero ── */ .hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem); } .hero .container { display: grid; grid-template-columns: 1fr; gap: 2rem; } .hero-content { max-width: 46rem; } .hero h1 { margin-bottom: 1.25rem; } .hero .subheadline { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 54ch; } /* ── Cursor Blink ── */ .pixel-cursor { display: inline-block; width: 10px; height: 1em; background: var(--primary); vertical-align: text-bottom; margin-left: 4px; animation: blink 1s steps(2) infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pixel-cursor { animation: none; opacity: 1; } } /* ── Hero Stats Panel ── */ .hud-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; max-width: 40rem; } .hud-stat { background: var(--surface); border: 2px solid var(--neutral-200); border-top: 2px solid var(--primary); padding: 0.75rem 1rem; } .hud-stat .hud-label { display: block; margin-bottom: 0.375rem; } .hud-stat .hud-value { font-family: var(--font-pixel); font-size: 0.6875rem; color: var(--accent); line-height: 1.5; letter-spacing: 0.04em; } /* ── Stat Bar ── */ .stat-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; } .stat-bar .stat-label { font-size: 0.5625rem; color: var(--text-muted); min-width: 4rem; flex-shrink: 0; } .stat-bar-track { display: flex; gap: 2px; flex: 1; } .stat-bar-track .cell { width: 8px; height: 8px; background: var(--neutral-200); } .stat-bar-track .cell.filled { background: var(--accent); } /* ── CTA Row ── */ .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 0.9375rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; border-radius: 0; transition: background 120ms steps(2), border-color 120ms steps(2), color 120ms steps(2), box-shadow 120ms steps(2); line-height: 1; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--neutral-900); } .btn-primary { background: var(--primary); color: var(--neutral-900); border-color: var(--primary-900); box-shadow: 2px 2px 0 var(--primary-900), 2px 0 0 var(--primary-900); } .btn-primary:hover { background: #33ECFF; box-shadow: inset 2px 2px 0 var(--primary-900); color: var(--neutral-900); } .btn-secondary { background: transparent; color: var(--secondary); border-color: var(--secondary); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary); } /* ── Hero Figure ── */ .hero-figure { margin: 2rem 0 0; } .pixel-plate { display: inline-block; position: relative; border: 4px solid; border-image: repeating-linear-gradient( to bottom, var(--primary) 0px, var(--primary) 4px, var(--neutral-200) 4px, var(--neutral-200) 8px ) 4; box-shadow: 4px 4px 0 var(--neutral-900); } .pixel-plate img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; } .pixel-plate figcaption { background: var(--surface); padding: 0.5rem 0.75rem; border-top: 2px solid var(--neutral-200); } .plate-tag { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); display: block; letter-spacing: 0.06em; margin-bottom: 0.25rem; } .plate-caption { font-size: 0.8125rem; color: var(--text-muted); } /* ── Page body ── */ .page-body { padding: 3rem 0 4rem; } .page-body .container { display: grid; grid-template-columns: 1fr; gap: 3rem; } /* ── Section heading decorations ── */ .stage-label { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); letter-spacing: 0.06em; display: block; margin-bottom: 0.5rem; } section { position: relative; } section > h2, section > h3 { margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); } section > h3 { border-bottom-color: var(--neutral-200); } section > p, section > ul, section > ol { margin-bottom: 1rem; } /* ── Panel ── */ .panel { background: var(--surface); border: 2px solid var(--neutral-200); padding: 1.5rem; } .panel + .panel { margin-top: 1.5rem; } /* ── Level Card (research findings) ── */ .level-card { background: var(--surface); border: 2px solid var(--neutral-200); border-top: 2px solid var(--primary); padding: 1.5rem; margin-bottom: 1.5rem; position: relative; box-shadow: 4px 4px 0 var(--neutral-900); } .level-card.boss { border: 2px solid var(--secondary); box-shadow: 4px 4px 0 var(--neutral-900); } .level-card .card-badge { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); position: absolute; top: 0.75rem; left: 0.75rem; letter-spacing: 0.06em; } .level-card.boss .card-badge { color: var(--secondary); } .level-card .card-tag { font-size: 0.5625rem; color: var(--text-muted); display: block; margin-bottom: 0.5rem; margin-top: 0.25rem; } .level-card h3 { border: none; padding: 0; margin-bottom: 0.75rem; font-size: 1.0625rem; } .level-card p { font-size: 0.9375rem; max-width: 70ch; } /* ── Callout ── */ .callout { background: var(--surface-elevated); border: 2px solid var(--primary); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .callout .callout-tag { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); display: block; margin-bottom: 0.625rem; letter-spacing: 0.06em; } .callout-warning { border-color: var(--warning); } .callout-warning .callout-tag { color: var(--warning); } .callout-danger { border-color: var(--danger); } .callout-danger .callout-tag { color: var(--danger); } .callout-gold { border-color: var(--gold); } .callout-gold .callout-tag { color: var(--gold); } /* ── Citation chips (superscript) ── */ sup.citation a { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; color: var(--primary); text-decoration: none; border: 1px solid var(--primary); padding: 0 2px; border-radius: 0; line-height: 1; vertical-align: super; } sup.citation a:hover { background: var(--primary); color: var(--neutral-900); } /* ── Inline code ── */ code { font-family: var(--font-pixel); font-size: 0.6875rem; color: var(--accent); background: var(--surface); border: 1px solid var(--neutral-200); border-left: 2px solid var(--primary); padding: 0.1em 0.375em; } /* ── Table ── */ .data-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: var(--surface-elevated); font-size: 0.9375rem; } .data-table th { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid var(--primary); background: var(--surface); letter-spacing: 0.06em; } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--neutral-200); color: var(--text); vertical-align: top; } .data-table tr:last-child td { border-bottom: none; } .data-table td:first-child { color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); } /* ── FAQ ── */ .faq-list { list-style: none; padding: 0; margin: 0; } .faq-item { border: 2px solid var(--neutral-200); border-top-color: var(--primary); margin-bottom: 1rem; } .faq-item summary, .faq-question { padding: 1rem 1.25rem; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--surface); color: var(--text); list-style: none; font-size: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-family: var(--font-pixel); font-size: 0.75rem; color: var(--primary); flex-shrink: 0; } details[open] > summary::after { content: '−'; } .faq-answer { padding: 1rem 1.25rem 1.25rem; background: var(--surface-elevated); border-top: 1px solid var(--neutral-200); font-size: 0.9375rem; } .faq-answer p { max-width: 70ch; } /* ── References list ── */ .references-list { list-style: none; padding: 0; counter-reset: ref-counter; } .references-list li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--neutral-200); font-size: 0.9375rem; counter-increment: ref-counter; margin: 0; } .references-list li:target { background: var(--surface-elevated); padding-left: 0.75rem; border-left: 2px solid var(--primary); } .ref-num { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); flex-shrink: 0; padding-top: 0.25rem; min-width: 3rem; letter-spacing: 0.04em; } .ref-body { flex: 1; } .ref-body .ref-meta { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--text-muted); display: block; margin-top: 0.375rem; letter-spacing: 0.04em; } .ref-body a { font-size: 0.8125rem; } /* ── Contact Form ── */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 40rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); letter-spacing: 0.06em; } .form-group input, .form-group textarea { background: var(--surface); border: 2px solid var(--neutral-200); color: var(--text); padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; border-radius: 0; width: 100%; transition: border-color 120ms steps(2); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-group textarea { min-height: 8rem; resize: vertical; } /* ── Breadcrumb ── */ .breadcrumb { padding: 0.75rem 0; margin-bottom: 2rem; } .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; } .breadcrumb li { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .breadcrumb li + li::before { content: '›'; color: var(--neutral-500); } .breadcrumb a { color: var(--primary); text-decoration: none; font-size: 0.8125rem; } .breadcrumb a:hover { text-decoration: underline; } /* ── 404 ── */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 4rem var(--container-px); } .error-page .error-code { font-family: var(--font-pixel); font-size: clamp(3rem, 12vw, 6rem); color: var(--danger); display: block; line-height: 1; margin-bottom: 1rem; letter-spacing: 0.04em; } .error-page h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; text-shadow: none; } .error-page p { color: var(--text-muted); margin-bottom: 2rem; max-width: 40ch; margin-left: auto; margin-right: auto; } /* ── Footer ── */ .site-footer { background: var(--neutral-900); border-top: 2px solid var(--primary); padding: 3rem 0 2rem; position: relative; z-index: 1; } .site-footer .disclaimer { font-style: italic; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--neutral-200); max-width: none; } .footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem; } .footer-col-heading { font-family: var(--font-pixel); font-size: 0.5625rem; color: var(--primary); letter-spacing: 0.06em; display: block; margin-bottom: 0.875rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.5rem; } .footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.9375rem; transition: color 120ms steps(2); } .footer-col a:hover { color: var(--text); } .footer-colophon { font-size: 0.5rem; color: var(--neutral-500); padding-top: 1.5rem; border-top: 1px solid var(--neutral-200); letter-spacing: 0.06em; text-transform: uppercase; line-height: 2; } .footer-copyright { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.5rem; } /* ── HUD stat-bar widget on hero ── */ @media (min-width: 768px) { .hud-stats { grid-template-columns: repeat(4, 1fr); } } /* ── Responsive breakpoints ── */ @media (min-width: 768px) { .hero .container { grid-template-columns: 1fr 1fr; align-items: start; } .footer-nav { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .footer-nav { grid-template-columns: repeat(4, 1fr); } .page-body .container { grid-template-columns: 1fr; } } /* ── Page-header band ── */ .page-header { background: var(--surface); border-bottom: 2px solid var(--neutral-200); padding: 3rem 0 2rem; } .page-header .eyebrow { margin-bottom: 0.75rem; } .page-header h1 { margin-bottom: 1rem; } .page-header .lead { font-size: 1.125rem; color: var(--text-muted); max-width: 60ch; } /* ── Tippy tooltip custom skin ── */ .tippy-box[data-theme~='crt'] { background: var(--neutral-900); color: var(--text); border: 1px solid var(--primary); border-radius: 0; font-size: 0.8125rem; max-width: 320px; padding: 0; } .tippy-box[data-theme~='crt'] .tippy-content { padding: 0.75rem; } .tippy-box[data-theme~='crt'] .ref-tooltip-header { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--primary); display: block; margin-bottom: 0.5rem; letter-spacing: 0.06em; } .tippy-box[data-theme~='crt'] .tippy-arrow { color: var(--primary); } /* ── Utility ── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } .text-accent { color: var(--accent); } .text-secondary { color: var(--secondary); } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } /* HUD bar fill widths */ .hud-fill-full { width: 100%; } .hud-fill-80 { width: 80%; } .hud-fill-60 { width: 60%; } .hud-fill-40 { width: 40%; } .hud-fill-20 { width: 20%; } .table-wrap { overflow-x: auto; }