/* ============================================================
retro.css — activates when has class "retro"
Inspired by cameronsworld.net / GeoCities-era personal sites
Uses real period GIFs hot-linked from gifcities.org
============================================================ */
/* ── Hide/show retro-only and modern-only elements ────────── */
.retro-only { display: none; }
html.retro .retro-only { display: revert; }
html.retro .modern-only { display: none !important; }
/* ── Toggle badge (lives in footer, morphs based on mode) ── */
.retro-toggle {
background: none;
border: 0;
cursor: pointer;
font-family: "Times New Roman", Times, serif;
font-size: 0.7rem;
color: #888;
opacity: 0.55;
padding: 4px 8px;
text-decoration: underline;
letter-spacing: 0.02em;
}
.retro-toggle:hover { opacity: 1; }
.retro-toggle::before { content: "Best viewed in Netscape Navigator 4.0"; }
/* Top exit bar — in-flow, left-aligned, above the marquee in retro mode */
.retro-exit-bar {
text-align: left;
padding: 0.5rem 0.75rem;
}
html.retro .retro-toggle {
display: inline-block;
background: #c0c0c0;
border: 3px outset #ffffff;
color: #000080;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 0.85rem;
font-weight: bold;
text-decoration: none;
opacity: 1;
padding: 4px 14px;
letter-spacing: 0.02em;
margin: 0.5rem;
text-shadow: none;
}
html.retro .retro-toggle:hover { background: #ffff99; color: #ff0000; }
html.retro .retro-toggle:active { border-style: inset; }
html.retro .retro-toggle::before { content: "[ exit to " attr(data-year) " ]"; }
/* ── Retro guestbook form ── */
.retro-guestbook-form table { margin: 0 auto; }
.retro-guestbook-form input[type="text"],
.retro-guestbook-form input[type="email"],
.retro-guestbook-form textarea {
border: 3px inset #ffffff;
background: #ffffff;
color: #000080;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
padding: 4px 6px;
}
.retro-guestbook-form textarea { resize: vertical; }
.retro-submit-btn {
background: linear-gradient(#d0d0d0, #808080);
border: 4px outset #ffffff;
color: #000080;
font-family: "Impact", "Arial Black", sans-serif;
font-size: 1.1rem;
padding: 8px 20px;
cursor: pointer;
margin-top: 10px;
letter-spacing: 0.04em;
}
.retro-submit-btn:hover { background: linear-gradient(#e8e8e8, #a0a0a0); }
.retro-submit-btn:active { border-style: inset; }
/* ============================================================
FROM HERE DOWN: retro-mode styling
============================================================ */
html.retro {
background: #000014 url("data:image/svg+xml;utf8,") repeat;
}
html.retro body {
background: transparent !important;
font-family: "Times New Roman", Times, serif !important;
color: #ffffff !important;
margin: 0;
overflow-x: clip; /* strictly clip — never create a horizontal scroll container */
overflow-anchor: none; /* stop the browser from auto-adjusting scroll when images decode */
overscroll-behavior: none; /* kill rubber-band / pull-to-refresh on both axes */
}
/* Reserve the scrollbar gutter at all times so layout doesn't jump when
content grows past the viewport or images finish loading. */
html.retro { scrollbar-gutter: stable; }
/* ── Hide modern nav and footer chrome ── */
html.retro .site-nav,
html.retro .site-footer {
display: none !important;
}
/* ── Floating decoration layer (real GIFs scattered Cameron's-World style) ── */
.retro-deco-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
contain: strict; /* fully isolate so the layer can't contribute to document height */
width: 100vw;
height: 100dvh; /* dynamic viewport height — adapts to mobile URL-bar show/hide */
}
img.retro-deco {
position: absolute;
user-select: none;
pointer-events: none;
filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
will-change: transform;
image-rendering: pixelated;
}
img.retro-deco.drift { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift {
from { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
to { transform: translate(24px, -18px) rotate(var(--rot, 0deg)); }
}
/* Content sits above the deco layer */
html.retro body > *:not(.retro-deco-layer) { position: relative; z-index: 1; }
/* Cap any in-flow chrome image at the viewport so big gifs (e.g. 385×250 under-construction)
can't push the page horizontally on mobile. Aspect ratio is preserved via the explicit
width/height attrs the patch script added.
Skip width="100%" images (the rainbow dividers) — they intentionally stretch to a fixed
small height regardless of natural aspect ratio. */
html.retro .wrapper img:not([width="100%"]),
html.retro .retro-footer-block img:not([width="100%"]) {
max-width: 100%;
height: auto;
}
/* Marquee text shouldn't render below its container's edge on narrow viewports either. */
html.retro .retro-marquee { max-width: 100vw; }
html.retro table { max-width: 100%; }
/* ── Top marquee (real