/* ========================================================================== StoneRed design system 1. Tokens (defaults) 5. Pages & widgets 2. Theme token sets 6. Theme character (per-theme flourishes) 3. Base 7. 1994 — the full Geocities treatment 4. Article components 8. Responsive, motion, low bandwidth, print Themes only change tokens + a few character rules; markup is shared. ========================================================================== */ /* 1. TOKENS ---------------------------------------------------------------- */ :root, [data-theme] { --fs-scale: 1; --fs-base: calc(1.125rem * var(--fs-scale)); --lh: 1.65; --measure: 40rem; --page: 78rem; --gap: clamp(1rem, 2.5vw, 2rem); --bg: #f4f1ea; --bg-image: none; --fg: #161513; --muted: #5e5a52; --accent: #b3261e; --accent-2: #1d3557; --link: var(--fg); --link-visited: var(--fg); --link-decoration: underline; --rule: #1615131f; --rule-strong: #161513; --surface: #fffdf8; --surface-2: #ebe6da; --border: 1px solid var(--rule); --radius: 4px; --shadow: 0 1px 2px #0000000d, 0 8px 24px #0000000f; --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-border: 1px solid var(--fg); --btn-radius: 999px; --btn-shadow: none; --btn-transform: none; --font-body: Georgia, 'Times New Roman', serif; --font-display: Georgia, 'Times New Roman', serif; --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-masthead: var(--font-display); --headline-size: clamp(2.4rem, 6vw, 4.8rem); --headline-weight: 800; --headline-tracking: -0.02em; --headline-transform: none; --headline-style: normal; --headline-lh: 1.02; --kicker-color: var(--accent); --anim: 220ms; --ease: cubic-bezier(.2, .7, .2, 1); --art-bg: #efeadf; --art-1: #1a1a1a; --art-2: #6b6b6b; --art-3: #b7b0a2; --art-ink: #1a1a1a; --claim-fact: #1f7a4d; --claim-hyp: #b7791f; --claim-spec: #8e44ad; color-scheme: light; } /* 2. THEME TOKEN SETS -------------------------------------------------------- */ [data-theme="newspaper"] { --bg: #f2efe6; --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --fg: #141414; --muted: #555; --accent: #141414; --accent-2: #8a1c1c; --kicker-color: #8a1c1c; --rule: #14141433; --rule-strong: #141414; --surface: #f7f4ec; --surface-2: #e8e3d6; --radius: 0; --shadow: none; --btn-radius: 0; --font-body: 'Source Serif 4', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --font-ui: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --font-masthead: 'UnifrakturMaguntia', 'Old English Text MT', serif; --headline-weight: 900; --headline-tracking: -0.015em; --art-bg: #efeadf; --art-1: #1a1a1a; --art-2: #6b6b6b; --art-3: #b7b0a2; --art-ink: #1a1a1a; } [data-theme="library"] { --bg: #efe4cc; --bg-image: radial-gradient(ellipse at 20% 0%, #f8efd9 0, transparent 60%), radial-gradient(ellipse at 100% 100%, #e2d1ad 0, transparent 55%); --fg: #2e2216; --muted: #6d5a43; --accent: #7a2e1d; --accent-2: #2f4a3a; --kicker-color: #7a2e1d; --link: #5b2414; --link-visited: #4a2c4a; --rule: #6d5a4340; --rule-strong: #6d5a43; --surface: #f8f0dc; --surface-2: #e6d7b6; --radius: 2px; --shadow: 0 1px 0 #fff8 inset, 0 2px 6px #3b2a1a26; --btn-bg: #7a2e1d; --btn-fg: #f8f0dc; --btn-border: 1px solid #5b2414; --btn-radius: 2px; --font-body: 'EB Garamond', Garamond, Georgia, serif; --font-display: 'Cormorant Garamond', Garamond, Georgia, serif; --font-ui: 'EB Garamond', Garamond, Georgia, serif; --font-mono: 'Courier Prime', 'Courier New', monospace; --fs-base: calc(1.2rem * var(--fs-scale)); --headline-weight: 600; --headline-style: italic; --headline-tracking: 0; --art-bg: #e9dcc0; --art-1: #7a2e1d; --art-2: #2f4a3a; --art-3: #b88a3e; --art-ink: #3b2a1a; } [data-theme="terminal"] { --bg: #030803; --bg-image: repeating-linear-gradient(0deg, #00000000 0 2px, #00000059 2px 3px), radial-gradient(ellipse at center, #0b1f0b 0, #030803 75%); --fg: #3dff7a; --muted: #22a64c; --accent: #ffb000; --accent-2: #3dff7a; --kicker-color: #ffb000; --link: #9cffbd; --link-visited: #6fd393; --rule: #3dff7a40; --rule-strong: #3dff7a; --surface: #061206; --surface-2: #0a1d0a; --border: 1px solid #3dff7a66; --radius: 0; --shadow: 0 0 0 1px #3dff7a33, 0 0 24px #3dff7a14; --btn-bg: transparent; --btn-fg: #3dff7a; --btn-border: 1px solid #3dff7a; --btn-radius: 0; --font-body: 'IBM Plex Mono', ui-monospace, monospace; --font-display: 'VT323', 'IBM Plex Mono', monospace; --font-ui: 'IBM Plex Mono', ui-monospace, monospace; --font-masthead: 'VT323', monospace; --fs-base: calc(1rem * var(--fs-scale)); --lh: 1.7; --measure: 44rem; --headline-size: clamp(2.6rem, 7vw, 5.2rem); --headline-weight: 400; --headline-tracking: 0.01em; --headline-transform: uppercase; --art-bg: #050a05; --art-1: #3dff7a; --art-2: #1d8f3a; --art-3: #ffb000; --art-ink: #3dff7a; --claim-fact: #3dff7a; --claim-hyp: #ffb000; --claim-spec: #ff6bd6; color-scheme: dark; } [data-theme="cosmic"] { --bg: #050816; --bg-image: radial-gradient(ellipse at 15% 10%, #1b1f5a 0, transparent 45%), radial-gradient(ellipse at 90% 30%, #3a0f4f 0, transparent 40%), radial-gradient(ellipse at 50% 100%, #08263f 0, transparent 50%); --fg: #e8ecff; --muted: #9aa3d6; --accent: #ff7ab6; --accent-2: #7ef0ff; --kicker-color: #7ef0ff; --link: #b9c4ff; --link-visited: #d3b9ff; --rule: #b9c4ff2e; --rule-strong: #b9c4ff; --surface: #0d1330b3; --surface-2: #151d47cc; --border: 1px solid #b9c4ff26; --radius: 18px; --shadow: 0 10px 40px #00000066, inset 0 1px 0 #ffffff14; --btn-bg: linear-gradient(135deg, #ff7ab6, #7a6bff); --btn-fg: #fff; --btn-border: 0; --btn-radius: 999px; --btn-shadow: 0 6px 24px #ff7ab655; --font-body: 'Newsreader', Georgia, serif; --font-display: 'Syne', 'Inter', sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --headline-size: clamp(2.8rem, 7.5vw, 6rem); --headline-weight: 800; --headline-tracking: -0.03em; --art-bg: #070b1f; --art-1: #ff7ab6; --art-2: #5b6cff; --art-3: #7ef0ff; --art-ink: #e8ecff; --claim-fact: #5cf0b0; --claim-hyp: #ffd36b; --claim-spec: #ff7ab6; color-scheme: dark; } [data-theme="midnight"] { --bg: #0c0e12; --bg-image: radial-gradient(ellipse at 50% -20%, #1b2130 0, transparent 60%); --fg: #d9dce2; --muted: #8b93a1; --accent: #c9b8ff; --accent-2: #8fb3ff; --kicker-color: #a99ae0; --link: #e7e2ff; --link-visited: #c9b8ff; --rule: #ffffff17; --rule-strong: #ffffff40; --surface: #12151b; --surface-2: #181c24; --border: 1px solid #ffffff12; --radius: 10px; --shadow: 0 20px 60px #0008; --btn-bg: #1c212b; --btn-fg: #e7e2ff; --btn-border: 1px solid #ffffff1f; --btn-radius: 999px; --font-body: 'Newsreader', Georgia, serif; --font-display: 'Newsreader', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; --fs-base: calc(1.2rem * var(--fs-scale)); --lh: 1.75; --measure: 36rem; --headline-weight: 300; --headline-tracking: -0.025em; --art-bg: #101318; --art-1: #c9b8ff; --art-2: #3a4352; --art-3: #6b7a90; --art-ink: #e6e6e6; --claim-fact: #7fd1a8; --claim-hyp: #e6c27a; --claim-spec: #c9b8ff; color-scheme: dark; } [data-theme="fieldnotes"] { --bg: #e9dfc6; --bg-image: linear-gradient(#0000 0 calc(100% - 1px), #2b5d8a1f calc(100% - 1px)), linear-gradient(90deg, #0000 0 calc(100% - 1px), #2b5d8a14 calc(100% - 1px)); --fg: #26231d; --muted: #6a5f4b; --accent: #b0412e; --accent-2: #2b5d8a; --kicker-color: #2b5d8a; --link: #1f4f7a; --link-visited: #5a3f78; --rule: #26231d33; --rule-strong: #26231d; --surface: #f5eedb; --surface-2: #e2d6b8; --border: 1px solid #26231d40; --radius: 3px; --shadow: 2px 3px 0 #26231d22; --btn-bg: #f5eedb; --btn-fg: #26231d; --btn-border: 2px solid #26231d; --btn-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; --btn-shadow: 2px 2px 0 #26231d; --font-body: 'Crimson Pro', Georgia, serif; --font-display: 'Caveat', 'Segoe Print', cursive; --font-ui: 'Special Elite', 'Courier New', monospace; --font-mono: 'Special Elite', 'Courier New', monospace; --fs-base: calc(1.2rem * var(--fs-scale)); --headline-size: clamp(3rem, 8vw, 6rem); --headline-weight: 700; --headline-tracking: 0; --headline-lh: 0.95; --art-bg: #efe6cf; --art-1: #2b5d8a; --art-2: #8a5a2b; --art-3: #5d7a3a; --art-ink: #2a2a2a; } [data-theme="fieldnotes"] { background-size: 100% 28px, 28px 100%; } [data-theme="deadhead"] { --bg: #f4e3c1; --bg-image: radial-gradient(circle at 10% 20%, #e0482a26 0 12%, transparent 13%), radial-gradient(circle at 85% 15%, #2a7f7a26 0 10%, transparent 11%), radial-gradient(circle at 70% 85%, #f2b13433 0 14%, transparent 15%), repeating-radial-gradient(circle at 50% 120%, #e0482a0d 0 18px, #f2b1340d 18px 36px, #2a7f7a0d 36px 54px, #6b2d7a0d 54px 72px); --fg: #2d1638; --muted: #6b4a5e; --accent: #e0482a; --accent-2: #2a7f7a; --kicker-color: #6b2d7a; --link: #a8321c; --link-visited: #6b2d7a; --rule: #2d163833; --rule-strong: #2d1638; --surface: #fbf1dc; --surface-2: #f2dcb1; --border: 3px solid #2d1638; --radius: 22px; --shadow: 6px 6px 0 #2d1638; --btn-bg: #e0482a; --btn-fg: #fbf1dc; --btn-border: 3px solid #2d1638; --btn-radius: 999px; --btn-shadow: 4px 4px 0 #2d1638; --font-body: 'Fraunces', Georgia, serif; --font-display: 'Shrikhand', 'Cooper Black', serif; --font-ui: 'Righteous', 'Trebuchet MS', sans-serif; --headline-size: clamp(2.8rem, 8vw, 6.4rem); --headline-weight: 400; --headline-tracking: 0.005em; --headline-lh: 0.98; --art-bg: #f6e7c8; --art-1: #e0482a; --art-2: #2a7f7a; --art-3: #f2b134; --art-ink: #3b1f4a; } [data-theme="1994"] { --fs-base: calc(1rem * var(--fs-scale)); --lh: 1.35; --measure: 100%; --page: 62rem; --gap: 8px; --bg: #c0c0c0; --fg: #000; --muted: #333; --accent: #f00; --accent-2: #00f; --kicker-color: #800080; --link: #0000ee; --link-visited: #551a8b; --rule: #808080; --rule-strong: #000; --surface: #fff; --surface-2: #dcdcdc; --border: 2px outset #fff; --radius: 0; --shadow: none; --btn-bg: #c0c0c0; --btn-fg: #000; --btn-border: 2px outset #fff; --btn-radius: 0; --btn-shadow: none; --font-body: 'Times New Roman', Times, serif; --font-display: 'Times New Roman', Times, serif; --font-ui: 'Times New Roman', Times, serif; --font-mono: 'Courier New', Courier, monospace; --headline-size: 2rem; --headline-weight: 700; --headline-tracking: 0; --headline-lh: 1.1; --anim: 0ms; --art-bg: #000080; --art-1: #ff0000; --art-2: #00ffff; --art-3: #ffff00; --art-ink: #ffffff; --claim-fact: #008000; --claim-hyp: #ff8c00; --claim-spec: #800080; } [data-theme="1991"] { --bg: #ffffff; --bg-image: none; --fg: #000; --muted: #000; --accent: #000; --accent-2: #000; --kicker-color: #000; --link: #0000ee; --link-visited: #551a8b; --rule: #000; --rule-strong: #000; --surface: #fff; --surface-2: #fff; --border: 0; --radius: 0; --shadow: none; --btn-bg: transparent; --btn-fg: #0000ee; --btn-border: 0; --btn-radius: 0; --font-body: 'Times New Roman', Times, serif; --font-display: 'Times New Roman', Times, serif; --font-ui: 'Times New Roman', Times, serif; --headline-weight: 700; --headline-tracking: 0; --anim: 0ms; --art-bg: #fff; --art-1: #000; --art-2: #555; --art-3: #aaa; --art-ink: #000; } /* 3. BASE ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; } body { margin: 0; background-color: var(--bg); background-image: var(--bg-image); background-attachment: fixed; color: var(--fg); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; animation: page-in 420ms var(--ease) both; } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } a { color: var(--link); text-decoration: var(--link-decoration); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:visited { color: var(--link-visited); } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } img, svg { max-width: 100%; } kbd { font-family: var(--font-mono); font-size: 0.85em; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.35em; } code { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; border-top: 1px solid var(--rule); } button, input, select, textarea { font: inherit; color: inherit; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .small { font-size: 0.85em; color: var(--muted); } .tiny { font-size: 0.7em; } .center { text-align: center; } .skip { position: absolute; left: -999px; top: 0; background: var(--fg); color: var(--bg); padding: 0.5rem 1rem; z-index: 100; } .skip:focus { left: 0.5rem; top: 0.5rem; } main { max-width: var(--page); margin: 0 auto; padding: 0 var(--gap) 4rem; outline: none; } /* Label variants (default / 1994 / terminal) */ .r94, .w91, .dead-fab, .w91-menu, .w91-titlebar, .w91-ascii { display: none; } .t-term { display: none; } /* Progress bar */ .progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none; } .progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--accent); transition: transform 80ms linear; } /* Masthead */ .masthead { max-width: var(--page); margin: 0 auto; padding: 0.75rem var(--gap) 0; text-align: center; } .masthead-strip { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; } .masthead-strip a { color: inherit; text-decoration: none; } .masthead-strip a:hover { color: var(--accent); } .strip-streak { color: var(--accent); } .brand { padding: 1rem 0 0.5rem; } .brand-link { text-decoration: none; color: var(--fg) !important; display: inline-block; } .brand-name { font-family: var(--font-masthead); font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: 1; letter-spacing: -0.01em; display: block; } .brand-tagline { font-family: var(--font-ui); font-size: 0.82rem; color: var(--muted); margin: 0.4rem auto 0; max-width: 36rem; } .nav { border-top: 3px double var(--rule-strong); border-bottom: 1px solid var(--rule-strong); margin-top: 0.75rem; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; } .nav a { display: block; padding: 0.55rem 0.9rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--fg); } .nav a:hover { color: var(--accent); } .nav a[aria-current="page"] { color: var(--accent); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.6em 1.15em; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--btn-bg); color: var(--btn-fg) !important; border: var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); transition: transform var(--anim) var(--ease), box-shadow var(--anim) var(--ease), filter var(--anim); } .btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .btn:active { transform: translateY(0); } .btn-quiet { background: transparent; color: var(--fg) !important; border: 1px solid var(--rule-strong); } .btn-block { display: flex; width: 100%; margin-top: 0.5rem; } .btn-xl { font-size: 1.15rem; padding: 0.9em 1.8em; } .btn-random .btn-arrow { transition: transform var(--anim) var(--ease); display: inline-block; } .btn-random:hover .btn-arrow { transform: translateX(4px) rotate(-8deg); } .btn-random-label { display: inline-block; min-width: 12ch; transition: opacity 180ms; } .btn-random-label.swap { opacity: 0; } .moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.25rem 0; } .btn-mood { background: var(--surface); color: var(--fg) !important; border: var(--border); box-shadow: var(--shadow); } /* 4. ARTICLE ---------------------------------------------------------------- */ .story { margin-top: clamp(1.5rem, 4vw, 3rem); } .story-head { text-align: center; max-width: 56rem; margin: 0 auto; } .todays-read { display: inline-block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bg); background: var(--fg); padding: 0.3em 0.9em; margin: 0 0 1rem; } .resurfaced { font-weight: 400; opacity: 0.8; letter-spacing: 0.08em; } .kicker { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker-color); margin: 0 0 0.75rem; } .kicker a { color: inherit; text-decoration: none; font-weight: 700; } .kicker-sep { opacity: 0.5; margin: 0 0.3em; } .headline { font-family: var(--font-display); font-size: var(--headline-size); font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); text-transform: var(--headline-transform); font-style: var(--headline-style); line-height: var(--headline-lh); margin: 0 auto 0.6rem; text-wrap: balance; } .dek { font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.45; color: var(--muted); max-width: 44rem; margin: 0 auto 1rem; text-wrap: pretty; font-style: italic; } .byline { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; } .byline a { color: inherit; } .hero { margin: clamp(1.25rem, 3vw, 2rem) 0; } .hero-frame { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--art-bg); } .hero-frame > svg, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cover-art .bg { fill: var(--art-bg); } .cover-art .a1 { fill: var(--art-1); } .cover-art .a2 { fill: var(--art-2); } .cover-art .a3 { fill: var(--art-3); } .cover-art .ink { fill: var(--art-ink); } .cover-art .stroke-1 { stroke: var(--art-1); } .cover-art .stroke-2 { stroke: var(--art-2); } .cover-art .stroke-3 { stroke: var(--art-3); } .cover-art [class^="stroke-"], .cover-art path.stroke-1, .cover-art path.stroke-2, .cover-art path.stroke-3 { fill: none; } .cover-art .grain { pointer-events: none; } .cover-art { transition: transform 1.2s var(--ease); } .hero:hover .cover-art { transform: scale(1.015); } .hero-img.failed { display: none; } .hero-img.fit-contain, .card-art img.fit-contain { object-fit: contain; background: var(--art-bg); } .hero-has-img .hero-frame > svg { opacity: 0.35; filter: blur(2px); } .card-art-photo { background: var(--art-bg); } .lowbw-placeholder { display: none; } .hero figcaption { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; } .story-grid { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, var(--measure)) minmax(12rem, 16rem); justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .rail { font-family: var(--font-ui); font-size: 0.85rem; } .rail-sticky { position: sticky; top: 1.5rem; } .rail-block { padding: 1rem 0; border-top: 2px solid var(--rule-strong); } .rail-block + .rail-block { margin-top: 1rem; } .rail-h { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--muted); } .rail-h .hint { text-transform: none; letter-spacing: 0; opacity: 0.7; } .toc ol { margin: 0; padding-left: 1.2em; } .toc li { margin: 0.3rem 0; } .toc a { text-decoration: none; color: var(--fg); } .toc a:hover, .toc a.active { color: var(--accent); } .toc a.active { font-weight: 700; } .tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0; } .tool { font-family: var(--font-ui); font-size: 0.78rem; padding: 0.35em 0.7em; background: var(--surface); color: var(--fg) !important; border: var(--border); border-radius: var(--btn-radius); cursor: pointer; text-decoration: none; transition: background var(--anim), transform var(--anim); } .tool:hover { transform: translateY(-1px); } .tool[aria-pressed="true"] { background: var(--accent); color: var(--bg) !important; } .tags ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .tags a { display: inline-block; font-size: 0.75rem; padding: 0.15em 0.6em; border: var(--border); border-radius: var(--btn-radius); text-decoration: none; color: var(--muted); } .strange-fact { cursor: help; } .strange-fact p { margin: 0; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.45; transition: opacity 240ms; } .strange-fact.swapping p { opacity: 0; } .rail-list { margin: 0; padding: 0; list-style: none; counter-reset: k; } .rail-list li { counter-increment: k; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1.6rem 1fr; } .rail-list li::before { content: counter(k); font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--accent); } .rail-list a { text-decoration: none; color: var(--fg); font-family: var(--font-body); line-height: 1.3; } .rail-list-cat { display: block; font-family: var(--font-ui); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* Prose */ .prose { font-size: var(--fs-base); } .prose > p:first-of-type::first-letter { font-family: var(--font-display); float: left; font-size: 4.2em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--accent); font-weight: var(--headline-weight); } .prose p { margin: 0 0 1.1em; text-wrap: pretty; hanging-punctuation: first; } .prose h2 { font-family: var(--font-display); font-size: 1.65em; line-height: 1.15; margin: 2em 0 0.6em; font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); } .prose h3 { font-family: var(--font-ui); font-size: 1em; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.6em 0 0.5em; } .prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .prose li { margin: 0.35em 0; } .prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 3px solid var(--rule-strong); font-style: italic; } .prose strong { font-weight: 700; } .section-break { border: 0; text-align: center; margin: 2.2em 0; } .section-break::after { content: "✦ ✦ ✦"; color: var(--muted); letter-spacing: 0.6em; font-size: 0.8em; } .pullquote { margin: 2em -1rem; padding: 1.2em 0; border-top: 3px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .pullquote blockquote { margin: 0; padding: 0; border: 0; font-style: normal; } .pullquote p { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin: 0; font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); text-wrap: balance; } .pullquote p::before { content: "“"; color: var(--accent); } .pullquote p::after { content: "”"; color: var(--accent); } .pullquote figcaption { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; } .box { margin: 2em 0; padding: 1.2em 1.4em; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.95em; } .box > :last-child { margin-bottom: 0; } .box-title { font-family: var(--font-ui) !important; font-size: 0.75rem !important; letter-spacing: 0.18em !important; text-transform: uppercase; margin: 0 0 0.7em !important; color: var(--accent); } .box-weird { border-left: 6px solid var(--accent); } .box-weird .box-title::before { content: "⚠ "; } .box-think { background: var(--surface-2); } .box-think .box-title::before { content: "◎ "; } .box-trivia .box-title::before { content: "✎ "; } .sidenote { float: right; clear: right; width: min(16rem, 42%); margin: 0.3em 0 1em 1.5em; padding: 0.8em 1em; font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.45; color: var(--muted); border-top: 2px solid var(--accent); background: var(--surface); } .sidenote p { margin: 0; } .sidenote-label { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3em; } .claim { margin: 1.6em 0; padding: 1em 1.2em 0.2em; border: 2px solid var(--c); border-radius: var(--radius); background: color-mix(in srgb, var(--c) 7%, var(--surface)); position: relative; } .claim-fact { --c: var(--claim-fact); } .claim-hypothesis { --c: var(--claim-hyp); border-style: dashed; } .claim-speculation { --c: var(--claim-spec); border-style: dotted; } .claim-label { margin: 0 0 0.6em !important; font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); } .claim-tag { display: inline-block; font-weight: 800; letter-spacing: 0.15em; padding: 0.15em 0.6em; color: #fff; background: var(--c); border-radius: 3px; margin-right: 0.4em; } .claim-title { margin-bottom: 0.4em !important; } .claim-chip { font-family: var(--font-ui); font-size: 0.75em; font-weight: 700; padding: 0 0.4em; border-radius: 3px; color: #fff; } .claim-chip-fact { background: var(--claim-fact); } .claim-chip-hypothesis { background: var(--claim-hyp); } .claim-chip-speculation { background: var(--claim-spec); } .box-timeline { background: transparent; box-shadow: none; border: 0; padding: 0; } .timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--rule-strong); } .timeline li { position: relative; padding: 0 0 1.1em 0.6rem; } .timeline li::before { content: ""; position: absolute; left: calc(-1.2rem - 7px); top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } .tl-when { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 0.85rem; color: var(--accent); letter-spacing: 0.04em; } .tl-what { font-size: 0.95em; } /* You learned this today */ .learned { margin: 3rem 0 2rem; padding: 1.6rem 1.6rem 1.2rem; border: 2px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); position: relative; } .learned-title { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 1rem; display: inline-block; background: var(--fg); color: var(--bg); padding: 0.3em 0.8em; } .learned-list { list-style: none; margin: 0; padding: 0; } .learned-list li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.4rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule); line-height: 1.45; } .learned-list li:last-child { border-bottom: 0; } .learned-mark { width: 1.2rem; height: 1.2rem; margin-top: 0.15em; border: 2px solid var(--accent); border-radius: 50%; position: relative; } .learned-mark::after { content: ""; position: absolute; left: 0.32rem; top: 0.08rem; width: 0.3rem; height: 0.6rem; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(1); transition: transform 300ms var(--ease); transition-delay: calc(var(--i) * 140ms + 200ms); } .js .learned:not(.seen) .learned-mark::after { transform: rotate(45deg) scale(0); } .learned-list li { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay: calc(var(--i) * 120ms); } .js .learned:not(.seen) .learned-list li { opacity: 0.25; transform: translateX(-6px); } /* One more thing */ .one-more { margin: 2rem 0; padding: 2rem 0 1rem; border-top: 3px double var(--rule-strong); text-align: center; } .one-more-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.6rem; font-weight: var(--headline-weight); } .one-more-text { font-size: 1.15em; font-style: italic; max-width: 32rem; margin: 0 auto 1rem; } .one-more-link { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; } .sources { margin-top: 2rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--muted); } .sources-title { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); } .sources ol { padding-left: 1.3em; } .sources li { margin: 0.3em 0; } .sources a { color: var(--muted); } /* Section titles & cards */ .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); margin: 0 0 0.3rem; text-align: center; } .section-dek { text-align: center; color: var(--muted); margin: 0 0 1.4rem; font-style: italic; } .liked, .home-weird, .home-archive, .home-themes, .archive-search, .archive-results, .archive-cats, .archive-calendar { margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; padding-top: 2rem; border-top: 3px double var(--rule-strong); } .home-weird { text-align: center; } .next-up { margin-top: 3rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .card-grid-one { max-width: 26rem; margin: 0 auto; grid-template-columns: 1fr; } .card { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--anim) var(--ease), box-shadow var(--anim) var(--ease); } .card:hover { transform: translateY(-4px) rotate(-0.25deg); } .card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--fg) !important; } .card-art { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--art-bg); } .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); } .card:hover .card-art img { transform: scale(1.05); } .card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1.1rem; flex: 1; } .card-kicker { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker-color); } .card-title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); } .card-sm .card-title { font-size: 1.08rem; } .card-dek { font-size: 0.9rem; color: var(--muted); line-height: 1.4; } .card-why { font-family: var(--font-ui); font-size: 0.78rem; line-height: 1.4; padding: 0.5rem 0.6rem; background: var(--surface-2); border-radius: var(--radius); } .card-meta { margin-top: auto; font-family: var(--font-ui); font-size: 0.72rem; color: var(--muted); } .theme-row { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .btn-theme { font-size: 0.78rem; letter-spacing: 0.08em; } /* 5. PAGES & WIDGETS -------------------------------------------------------- */ .page-head { text-align: center; margin: clamp(2rem, 5vw, 3.5rem) auto 1rem; max-width: 50rem; } .page-title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: var(--headline-weight); letter-spacing: var(--headline-tracking); text-transform: var(--headline-transform); font-style: var(--headline-style); line-height: 1.05; margin: 0 0 0.5rem; } .search-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; justify-content: center; font-family: var(--font-ui); font-size: 0.85rem; } .search-form label { display: flex; flex-direction: column; gap: 0.2rem; } .search-form label > span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .search-q { flex: 1 1 100%; } .search-q input { width: 100%; font-size: 1.3rem; padding: 0.6rem 0.9rem; font-family: var(--font-body); } .search-form input, .search-form select { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: 0.45rem 0.6rem; } .results-count { text-align: center; font-family: var(--font-display); font-size: 1.4rem; font-style: italic; margin: 0 0 1.2rem; } .empty { text-align: center; } .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .chip { display: inline-block; font-family: var(--font-ui); font-size: 0.8rem; padding: 0.3em 0.85em; border: var(--border); border-radius: var(--btn-radius); text-decoration: none; color: var(--fg) !important; background: var(--surface); } .chip-empty { opacity: 0.45; } .daylog { list-style: none; padding: 0; max-width: 46rem; margin: 0 auto; } .daylog li { display: grid; grid-template-columns: 8rem 1fr auto; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .daylog-date { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted) !important; text-decoration: none; } .daylog-title { text-decoration: none; color: var(--fg) !important; font-family: var(--font-display); } .daylog-cat { font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .bored-card { text-align: center; margin: 2rem auto; max-width: 40rem; padding: 2rem; border: var(--border); background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius); } .bored-hook { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 1.5rem; } .rabbit { list-style: none; padding: 0; max-width: 42rem; margin: 2rem auto; } .rabbit-step { margin-left: calc(var(--depth) * min(4vw, 2.2rem)); animation: dig-in 500ms var(--ease) both; animation-delay: calc(var(--depth) * 160ms); } @keyframes dig-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } .rabbit-why { font-style: italic; color: var(--muted); margin: 0.6rem 0 0.6rem 1rem; font-size: 0.95em; } .rabbit-link { display: block; padding: 1rem 1.2rem; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--fg) !important; transition: transform var(--anim) var(--ease); } .rabbit-link:hover { transform: translateX(4px); } .rabbit-level { display: block; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .rabbit-title { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; font-weight: var(--headline-weight); } .rabbit-meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); } .theme-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.2rem; margin: 2rem 0; } .theme-preview { background-color: var(--bg); background-image: var(--bg-image); color: var(--fg); font-family: var(--font-body); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .tp-inner { padding: 1.4rem; min-height: 15rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; } .tp-kicker { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker-color); margin: 0; } .tp-title { font-family: var(--font-display); font-size: 2rem; font-weight: var(--headline-weight); text-transform: var(--headline-transform); font-style: var(--headline-style); margin: 0; line-height: 1.05; } .tp-dek, .tp-sample { margin: 0; font-size: 0.95rem; color: var(--muted); } .tp-inner .btn { margin-top: auto; } .about { max-width: var(--measure); margin: 0 auto; } .about-sign { font-style: italic; } .my { max-width: 60rem; margin: 0 auto; } .my section { margin: 2.5rem 0; } .my-streak p { text-align: center; font-family: var(--font-display); font-size: 1.3rem; } .my .card-grid { margin-top: 1rem; } /* Footer */ .site-footer { margin-top: 4rem; border-top: 3px double var(--rule-strong); font-family: var(--font-ui); font-size: 0.85rem; } .ticker { max-width: var(--page); margin: 0 auto; padding: 1rem var(--gap); display: flex; gap: 0.8rem; align-items: baseline; border-bottom: 1px solid var(--rule); } .ticker-label { flex: none; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 0.2em 0.6em; } .ticker-text { font-family: var(--font-body); font-style: italic; transition: opacity 400ms; } .ticker-text.fade { opacity: 0; } .footer-grid { max-width: var(--page); margin: 0 auto; padding: 1.5rem var(--gap) 2.5rem; display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 2rem; } .footer-h { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; } .theme-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .theme-pills a { display: inline-block; padding: 0.25em 0.75em; border: var(--border); border-radius: var(--btn-radius); text-decoration: none; color: var(--fg) !important; font-size: 0.78rem; background: var(--surface); } .theme-pills a[aria-current="true"] { background: var(--fg); color: var(--bg) !important; } .btn-ambient { background: var(--surface); border: var(--border); border-radius: var(--btn-radius); padding: 0.45em 0.9em; cursor: pointer; font-family: var(--font-ui); font-size: 0.85rem; } .btn-ambient.on { background: var(--accent); color: var(--bg); } /* Dialogs, overlay, toast */ .panel { border: var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 0; max-width: min(46rem, calc(100vw - 2rem)); box-shadow: 0 30px 80px #0006; font-family: var(--font-ui); } .panel::backdrop { background: #0008; backdrop-filter: blur(3px); } .panel-inner { padding: 1.5rem; } .panel-title { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 1rem; font-weight: var(--headline-weight); } .panel-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.2rem; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; } .theme-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; padding: 0.7rem; border: var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: transform var(--anim); } .theme-choice:hover { transform: translateY(-2px); } .theme-choice[aria-pressed="true"] { outline: 3px solid var(--accent); } .theme-choice small { color: var(--muted); font-size: 0.72rem; line-height: 1.3; } .theme-swatch { display: flex; gap: 3px; } .theme-swatch i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid #0003; } [data-swatch="newspaper"] i:nth-child(1) { background: #f2efe6; } [data-swatch="newspaper"] i:nth-child(2) { background: #141414; } [data-swatch="newspaper"] i:nth-child(3) { background: #8a1c1c; } [data-swatch="1991"] i:nth-child(1) { background: #fff; } [data-swatch="1991"] i:nth-child(2) { background: #000; } [data-swatch="1991"] i:nth-child(3) { background: #0000ee; } [data-swatch="1994"] i:nth-child(1) { background: #c0c0c0; } [data-swatch="1994"] i:nth-child(2) { background: #0000ee; } [data-swatch="1994"] i:nth-child(3) { background: #ff0; } [data-swatch="library"] i:nth-child(1) { background: #efe4cc; } [data-swatch="library"] i:nth-child(2) { background: #7a2e1d; } [data-swatch="library"] i:nth-child(3) { background: #2f4a3a; } [data-swatch="terminal"] i:nth-child(1) { background: #030803; } [data-swatch="terminal"] i:nth-child(2) { background: #3dff7a; } [data-swatch="terminal"] i:nth-child(3) { background: #ffb000; } [data-swatch="cosmic"] i:nth-child(1) { background: #050816; } [data-swatch="cosmic"] i:nth-child(2) { background: #ff7ab6; } [data-swatch="cosmic"] i:nth-child(3) { background: #7ef0ff; } [data-swatch="midnight"] i:nth-child(1) { background: #0c0e12; } [data-swatch="midnight"] i:nth-child(2) { background: #d9dce2; } [data-swatch="midnight"] i:nth-child(3) { background: #c9b8ff; } [data-swatch="fieldnotes"] i:nth-child(1) { background: #e9dfc6; } [data-swatch="fieldnotes"] i:nth-child(2) { background: #2b5d8a; } [data-swatch="fieldnotes"] i:nth-child(3) { background: #b0412e; } [data-swatch="deadhead"] i:nth-child(1) { background: #f4e3c1; } [data-swatch="deadhead"] i:nth-child(2) { background: #e0482a; } [data-swatch="deadhead"] i:nth-child(3) { background: #2a7f7a; } .ambient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem; } .ambient-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.6rem 0.75rem; border: var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; text-align: left; } .ambient-choice small { color: var(--muted); font-size: 0.72rem; } .ambient-choice[aria-pressed="true"] { background: var(--accent); color: var(--bg); } .ambient-choice[aria-pressed="true"] small { color: inherit; opacity: 0.85; } .ambient-volume { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; } .byo { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; } .byo summary { cursor: pointer; font-weight: 700; } .byo label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.6rem 0; font-size: 0.85rem; } .byo input { padding: 0.4rem 0.5rem; border: var(--border); border-radius: var(--radius); background: var(--bg); } .byo-actions { display: flex; gap: 0.5rem; } .byo-player iframe, .byo-player audio { width: 100%; margin-top: 0.8rem; border: 0; } .keys { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; } .keys dd { margin: 0; } .dig { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); animation: fade-in 200ms both; } .dig[hidden] { display: none; } @keyframes fade-in { from { opacity: 0; } } .dig-inner { text-align: center; } .dig-spinner { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; border: 4px solid var(--rule); border-top-color: var(--accent); animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .dig-text { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; } .dig-text::after { content: ""; animation: dots 1.2s steps(4) infinite; } @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 210; background: var(--fg); color: var(--bg); padding: 0.6rem 1.1rem; border-radius: var(--btn-radius); font-family: var(--font-ui); font-size: 0.85rem; box-shadow: 0 10px 30px #0004; animation: toast-in 240ms var(--ease) both; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } } /* Admin */ .admin { max-width: 80rem; margin: 0 auto; font-family: var(--font-ui); font-size: 0.9rem; } .admin-login, .admin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin: 1rem 0; } .admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; align-items: start; } .admin table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .admin td, .admin th { text-align: left; padding: 0.35rem; border-bottom: 1px solid var(--rule); } .admin tr[data-slug] { cursor: pointer; } .admin tr[data-slug]:hover { background: var(--surface-2); } .admin label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0; } .admin label.check { flex-direction: row; align-items: center; } .admin input, .admin select, .admin textarea { padding: 0.4rem 0.5rem; border: var(--border); border-radius: var(--radius); background: var(--surface); } .admin textarea { font-family: var(--font-mono); font-size: 0.82rem; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .admin fieldset { border: var(--border); border-radius: var(--radius); margin: 0.8rem 0; } /* 6. THEME CHARACTER -------------------------------------------------------- */ /* Newspaper: hairlines, column rules, justified text, tiny caps. */ [data-theme="newspaper"] .brand-name { font-size: clamp(3rem, 10vw, 6.4rem); } [data-theme="newspaper"] .masthead-strip { border-bottom: 1px solid var(--rule-strong); } [data-theme="newspaper"] .nav { border-top: 4px double var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } [data-theme="newspaper"] .todays-read { background: none; color: var(--fg); border-top: 1px solid; border-bottom: 1px solid; letter-spacing: 0.3em; } [data-theme="newspaper"] .prose p { text-align: justify; hyphens: auto; } [data-theme="newspaper"] .story-grid { column-rule: 1px solid var(--rule); } [data-theme="newspaper"] .rail-left { border-right: 1px solid var(--rule); padding-right: 1.5rem; } [data-theme="newspaper"] .rail-right { border-left: 1px solid var(--rule); padding-left: 1.5rem; } [data-theme="newspaper"] .hero-frame { filter: grayscale(1) contrast(1.15); } [data-theme="newspaper"] .card-art img { filter: grayscale(1) contrast(1.1); } [data-theme="newspaper"] .hero figcaption { font-style: italic; border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; } [data-theme="newspaper"] .card { border: 0; border-top: 3px solid var(--fg); background: transparent; } [data-theme="newspaper"] .card:hover { transform: none; } [data-theme="newspaper"] .card-grid { gap: 1.5rem 2rem; } [data-theme="newspaper"] .dek { font-style: italic; } [data-theme="newspaper"] .learned-title, [data-theme="newspaper"] .ticker-label { background: var(--fg); color: var(--bg); } @media (min-width: 70rem) { [data-theme="newspaper"] .home-archive .card-grid { display: block; columns: 3; column-rule: 1px solid var(--rule); column-gap: 2rem; } [data-theme="newspaper"] .home-archive .card { break-inside: avoid; margin-bottom: 1.5rem; } } /* Library: catalog cards, marginalia, footnote sources. */ [data-theme="library"] .brand-name { font-variant: small-caps; letter-spacing: 0.06em; font-weight: 600; } [data-theme="library"] .nav { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } [data-theme="library"] .nav a { font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; font-size: 1rem; font-weight: 400; } [data-theme="library"] .todays-read { background: none; color: var(--accent); font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.15em; font-size: 1rem; border: 1px solid; } [data-theme="library"] .card { background: #fbf6e8 linear-gradient(#0000 0 2.2rem, #c0392b55 2.2rem calc(2.2rem + 1px), #0000 0) no-repeat; background-image: linear-gradient(#c0392b66, #c0392b66), repeating-linear-gradient(#0000 0 1.45rem, #2f4a3a22 1.45rem calc(1.45rem + 1px)); background-size: 100% 1px, 100% 100%; background-position: 0 2.3rem, 0 2.3rem; background-repeat: no-repeat; border: 1px solid #b5a37f; box-shadow: 1px 2px 0 #b5a37f, 2px 4px 10px #3b2a1a22; } [data-theme="library"] .card-art { filter: sepia(0.6) saturate(0.8); height: 0; aspect-ratio: auto; } [data-theme="library"] .card-art { display: none; } [data-theme="library"] .card-body { font-family: var(--font-mono); padding: 0.6rem 1rem 1rem; } [data-theme="library"] .card-kicker { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--accent); } [data-theme="library"] .card-kicker::before { content: "Call no. "; color: var(--muted); } [data-theme="library"] .card-title { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; line-height: 1.45; margin-top: 0.4rem; } [data-theme="library"] .card-dek { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.45rem; } [data-theme="library"] .card:hover { transform: rotate(-0.6deg) translateY(-3px); } [data-theme="library"] .sidenote { background: none; border: 0; border-left: 1px solid var(--accent); font-family: var(--font-body); font-style: italic; font-size: 0.92rem; } [data-theme="library"] .sources ol { list-style: none; padding: 0; counter-reset: fn; } [data-theme="library"] .sources li { counter-increment: fn; padding-left: 2rem; text-indent: -2rem; font-family: var(--font-body); font-size: 0.95rem; } [data-theme="library"] .sources li::before { content: counter(fn) ". "; font-variant-numeric: oldstyle-nums; color: var(--accent); display: inline-block; width: 2rem; text-indent: 0; } [data-theme="library"] .hero-frame { filter: sepia(0.45); border: 8px solid #fbf6e8; outline: 1px solid #b5a37f; } [data-theme="library"] .prose > p:first-of-type::first-letter { font-family: var(--font-display); font-style: italic; color: var(--accent); } [data-theme="library"] .learned { background: #fbf6e8; border: 1px solid #b5a37f; } [data-theme="library"] .learned-title { background: none; color: var(--accent); border-bottom: 1px solid; padding: 0 0 0.2em; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; font-size: 1.1rem; } /* Terminal: prompts, glow, blinking cursor. */ [data-theme="terminal"] body { text-shadow: 0 0 6px #3dff7a59; } [data-theme="terminal"] .t-std { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } [data-theme="terminal"] .t-term { display: inline; } [data-theme="terminal"] .brand-name { font-size: clamp(3rem, 11vw, 6rem); } [data-theme="terminal"] .brand-name::before { content: "> "; color: var(--accent); } [data-theme="terminal"] .brand-name::after { content: "_"; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } [data-theme="terminal"] .nav, [data-theme="terminal"] .masthead-strip { border-color: var(--rule-strong); border-style: dashed; } [data-theme="terminal"] .nav a::before { content: "./"; color: var(--muted); } [data-theme="terminal"] .todays-read { background: none; color: var(--accent); border: 1px solid; letter-spacing: 0.05em; text-transform: none; } [data-theme="terminal"] .headline::after { content: "█"; font-size: 0.6em; vertical-align: 0.1em; margin-left: 0.15em; animation: blink 1.1s steps(1) infinite; color: var(--accent); } [data-theme="terminal"] .prose h2::before { content: "## "; color: var(--muted); } [data-theme="terminal"] .prose > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; } [data-theme="terminal"] .hero-frame { filter: saturate(0) brightness(0.9) sepia(1) hue-rotate(70deg) saturate(3); } [data-theme="terminal"] .card-art img { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(0.85); } [data-theme="terminal"] .learned-title { background: none; color: var(--accent); text-transform: none; letter-spacing: 0; padding: 0; } [data-theme="terminal"] .learned-mark { border-radius: 0; } [data-theme="terminal"] .claim-tag { color: #000; } [data-theme="terminal"] .btn:hover { background: var(--fg); color: var(--bg) !important; } [data-theme="terminal"] .pullquote p::before { content: "> "; } [data-theme="terminal"] .pullquote p::after { content: ""; } [data-theme="terminal"] ::selection { background: #3dff7a; color: #000; } /* Cosmic: drifting stars, glass, glow. */ [data-theme="cosmic"] body::before, [data-theme="cosmic"] body::after { content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 20px 30px, #fff, #0000), radial-gradient(1px 1px at 120px 80px, #fffc, #0000), radial-gradient(1.5px 1.5px at 200px 160px, #fff, #0000), radial-gradient(1px 1px at 300px 40px, #cdf, #0000), radial-gradient(1px 1px at 380px 220px, #fff9, #0000), radial-gradient(2px 2px at 90px 260px, #fde, #0000); background-size: 420px 300px; animation: drift 180s linear infinite; opacity: 0.8; } [data-theme="cosmic"] body::after { background-size: 640px 520px; animation-duration: 300s; opacity: 0.5; } @keyframes drift { to { transform: translate3d(-420px, -300px, 0); } } [data-theme="cosmic"] .brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; font-size: clamp(2rem, 7vw, 4.4rem); background: linear-gradient(90deg, #7ef0ff, #ff7ab6, #b9c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="cosmic"] .nav, [data-theme="cosmic"] .masthead-strip { border-color: #b9c4ff33; } [data-theme="cosmic"] .headline { background: linear-gradient(180deg, #fff 30%, #b9c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="cosmic"] .todays-read { background: linear-gradient(90deg, #ff7ab6, #7a6bff); color: #fff; border-radius: 999px; } [data-theme="cosmic"] .card, [data-theme="cosmic"] .box, [data-theme="cosmic"] .learned, [data-theme="cosmic"] .panel { backdrop-filter: blur(12px); } [data-theme="cosmic"] .card:hover { box-shadow: 0 0 0 1px #7ef0ff66, 0 20px 60px #7a6bff44; } [data-theme="cosmic"] .learned-title { background: none; color: var(--accent-2); padding: 0; } [data-theme="cosmic"] .hero-frame { box-shadow: 0 0 80px #7a6bff33, var(--shadow); } /* Midnight: quiet, narrow, low-contrast chrome, bright words. */ [data-theme="midnight"] .brand-name { font-weight: 300; letter-spacing: 0.3em; text-transform: lowercase; font-size: clamp(2rem, 6vw, 3.4rem); } [data-theme="midnight"] .nav { border: 0; } [data-theme="midnight"] .nav a { font-weight: 400; color: var(--muted); } [data-theme="midnight"] .masthead-strip { border: 0; } [data-theme="midnight"] .todays-read { background: none; color: var(--accent); font-weight: 500; } [data-theme="midnight"] .prose > p:first-of-type::first-letter { color: var(--fg); font-weight: 300; } [data-theme="midnight"] .rail-block { border-top-width: 1px; border-color: var(--rule); } [data-theme="midnight"] .learned-title { background: none; color: var(--accent); padding: 0; } [data-theme="midnight"] .hero-frame { opacity: 0.88; } [data-theme="midnight"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, #0000 50%, #000a 100%); z-index: 40; } /* Field notes: tape, ink, handwriting, coffee. */ [data-theme="fieldnotes"] body { background-attachment: local; } [data-theme="fieldnotes"] .brand-name { font-family: var(--font-display); font-weight: 700; transform: rotate(-2deg); color: var(--accent-2); } [data-theme="fieldnotes"] .brand-tagline { font-family: var(--font-display); font-size: 1.2rem; } [data-theme="fieldnotes"] .nav { border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); } [data-theme="fieldnotes"] .headline { color: var(--accent-2); transform: rotate(-0.8deg); } [data-theme="fieldnotes"] .todays-read { background: #f3d36b; color: var(--fg); transform: rotate(-2deg); box-shadow: 2px 2px 0 #0002; font-family: var(--font-ui); } [data-theme="fieldnotes"] .hero-frame { border: 10px solid #fdfaf1; border-bottom-width: 36px; transform: rotate(0.6deg); box-shadow: 4px 6px 14px #0003; } [data-theme="fieldnotes"] .hero-frame::before, [data-theme="fieldnotes"] .hero-frame::after { content: ""; position: absolute; z-index: 2; width: 7rem; height: 1.6rem; background: #f3e6a8cc; top: -14px; box-shadow: 0 1px 2px #0002; } [data-theme="fieldnotes"] .hero-frame::before { left: 8%; transform: rotate(-6deg); } [data-theme="fieldnotes"] .hero-frame::after { right: 8%; transform: rotate(5deg); } [data-theme="fieldnotes"] .hero figcaption { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-2); } [data-theme="fieldnotes"] .sidenote { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--accent); background: none; border: 0; transform: rotate(-2deg); } [data-theme="fieldnotes"] .sidenote-label { font-family: var(--font-ui); font-size: 0.7rem; } [data-theme="fieldnotes"] .prose h2 { color: var(--accent-2); font-size: 2.3em; } [data-theme="fieldnotes"] .pullquote p { font-size: 2.2rem; color: var(--accent); } [data-theme="fieldnotes"] .card { transform: rotate(var(--tilt, -0.6deg)); } [data-theme="fieldnotes"] .card:nth-child(2n) { --tilt: 0.7deg; } [data-theme="fieldnotes"] .card:nth-child(3n) { --tilt: -1.1deg; } [data-theme="fieldnotes"] .card-title { font-size: 1.7rem; color: var(--accent-2); } [data-theme="fieldnotes"] .learned { background: #fdfaf1 radial-gradient(circle at 92% 12%, #0000 2.4rem, #8a5a2b33 2.5rem, #8a5a2b1a 2.9rem, #0000 3rem); } [data-theme="fieldnotes"] .learned-title { background: none; color: var(--accent); font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 1.8rem; padding: 0; } [data-theme="fieldnotes"] .learned-mark { border-radius: 2px; } [data-theme="fieldnotes"] .box-weird { border-left: 0; outline: 2px dashed var(--accent); outline-offset: -8px; } /* Dead-Head: poster type, melting headline, slow colour drift. */ [data-theme="deadhead"] body { animation: page-in 420ms var(--ease) both, hue 60s linear infinite alternate; } @keyframes hue { to { background-position: 40px 30px, -30px 20px, 20px -40px, 0 -200px; } } [data-theme="deadhead"] .brand-name { font-family: var(--font-display); font-size: clamp(3rem, 11vw, 7rem); color: var(--accent); -webkit-text-stroke: 2px var(--fg); text-shadow: 4px 4px 0 var(--accent-2), 8px 8px 0 #f2b134; filter: url(#melt); letter-spacing: 0.02em; } [data-theme="deadhead"] .brand-tagline { font-family: var(--font-ui); font-size: 0.95rem; color: var(--kicker-color); } [data-theme="deadhead"] .nav { border: 3px solid var(--fg); border-radius: 999px; background: var(--surface); } [data-theme="deadhead"] .nav a { font-family: var(--font-ui); letter-spacing: 0.06em; font-weight: 400; } [data-theme="deadhead"] .nav li:nth-child(3n+1) a:hover { color: var(--accent); } [data-theme="deadhead"] .nav li:nth-child(3n+2) a:hover { color: var(--accent-2); } [data-theme="deadhead"] .headline { color: var(--fg); text-shadow: 3px 3px 0 #f2b134, 6px 6px 0 var(--accent); filter: url(#melt); } [data-theme="deadhead"] .todays-read { background: var(--accent-2); color: #fbf1dc; border: 3px solid var(--fg); border-radius: 999px; font-family: var(--font-ui); transform: rotate(-3deg); } [data-theme="deadhead"] .hero-frame { border: 4px solid var(--fg); border-radius: 48% 52% 40% 60% / 22% 26% 18% 24%; } [data-theme="deadhead"] .hero-frame > svg { animation: hue-rot 40s linear infinite; } @keyframes hue-rot { to { filter: hue-rotate(360deg); } } [data-theme="deadhead"] .card:nth-child(4n+1) { --surface: #fde3d4; } [data-theme="deadhead"] .card:nth-child(4n+2) { --surface: #d7efe9; } [data-theme="deadhead"] .card:nth-child(4n+3) { --surface: #fbecc2; } [data-theme="deadhead"] .card:nth-child(4n) { --surface: #ead9f0; } [data-theme="deadhead"] .card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 10px 10px 0 var(--fg); } [data-theme="deadhead"] .prose h2 { font-family: var(--font-display); color: var(--accent); text-shadow: 2px 2px 0 var(--fg); } [data-theme="deadhead"] .pullquote { border: 0; background: var(--accent-2); color: #fbf1dc; border-radius: 30px; padding: 1.4rem 1.6rem; box-shadow: 6px 6px 0 var(--fg); } [data-theme="deadhead"] .pullquote p::before, [data-theme="deadhead"] .pullquote p::after { color: #f2b134; } [data-theme="deadhead"] .pullquote figcaption { color: #fbf1dc; } [data-theme="deadhead"] .learned-title { background: var(--accent); color: #fbf1dc; border: 3px solid var(--fg); border-radius: 999px; font-family: var(--font-ui); } [data-theme="deadhead"] .prose, [data-theme="deadhead"] .learned, [data-theme="deadhead"] .sources { background: #fbf1dcf2; } [data-theme="deadhead"] .story-main { background: #fbf1dcf2; border: 3px solid var(--fg); border-radius: 26px; padding: clamp(1rem, 3vw, 2rem); box-shadow: 8px 8px 0 var(--fg); } /* 7. 1994 — STONERED ONLINE --------------------------------------------- */ [data-theme="1994"] { scrollbar-color: #808080 #c0c0c0; } [data-theme="1994"] body { animation: none; background-color: #c0c0c0; /* A hand-tiled "granite" background, 32×32. Yes, really. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23bdbdbd'/%3E%3Cg fill='%23a8a8a8'%3E%3Crect x='3' y='2' width='2' height='1'/%3E%3Crect x='17' y='5' width='3' height='1'/%3E%3Crect x='9' y='11' width='1' height='2'/%3E%3Crect x='25' y='13' width='2' height='1'/%3E%3Crect x='5' y='21' width='3' height='1'/%3E%3Crect x='20' y='24' width='1' height='2'/%3E%3Crect x='12' y='28' width='2' height='1'/%3E%3C/g%3E%3Cg fill='%23d6d6d6'%3E%3Crect x='11' y='3' width='1' height='1'/%3E%3Crect x='28' y='7' width='1' height='1'/%3E%3Crect x='2' y='15' width='1' height='1'/%3E%3Crect x='15' y='18' width='2' height='1'/%3E%3Crect x='27' y='27' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: scroll; -webkit-font-smoothing: none; text-shadow: none; } [data-theme="1994"] ::-webkit-scrollbar { width: 16px; background: #c0c0c0; } [data-theme="1994"] ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px outset #fff; } [data-theme="1994"] ::-webkit-scrollbar-track { background: #dcdcdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E"); } [data-theme="1994"] .r94 { display: block; } [data-theme="1994"] span.r94, [data-theme="1994"] .brand-94 { display: inline; } [data-theme="1994"] .t-std { display: none; } [data-theme="1994"] a { text-decoration: underline; } [data-theme="1994"] a:hover { color: #f00; } [data-theme="1994"] :focus-visible { outline: 1px dotted #000; outline-offset: 1px; } [data-theme="1994"] .progress span { background: #000080; } [data-theme="1994"] .r94-top { background: #000080; color: #ff0; font-family: 'Courier New', monospace; font-weight: bold; border-bottom: 2px solid #ff0; } [data-theme="1994"] marquee { display: block; padding: 2px 0; } [data-theme="1994"] .masthead { text-align: center; padding-top: 8px; } [data-theme="1994"] .masthead-strip { display: none; } [data-theme="1994"] .brand { padding: 10px 0 0; } [data-theme="1994"] .brand-name { display: none; } [data-theme="1994"] .flame { font-family: 'Impact', 'Arial Black', sans-serif; font-size: clamp(2rem, 7vw, 3.6rem); letter-spacing: 2px; color: #ff0; -webkit-text-stroke: 1px #800000; text-shadow: 0 -2px 4px #ff0, 0 -5px 8px #ff8000, 0 -10px 16px #f00, 0 -16px 24px #f00; animation: flicker 0.18s steps(2) infinite alternate; } @keyframes flicker { to { text-shadow: 0 -2px 5px #ff0, 0 -6px 10px #ff8000, 0 -12px 18px #f00, 0 -18px 26px #a00; } } [data-theme="1994"] .brand-tagline { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-weight: bold; font-size: 0.95rem; color: #800080; max-width: none; margin-top: 14px; } [data-theme="1994"] .nav { border: 0; margin: 6px 0; } [data-theme="1994"] .nav ul { gap: 0; } [data-theme="1994"] .nav a { display: inline; padding: 0 2px; font-family: 'Times New Roman', serif; font-size: 1rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0; color: #0000ee; text-decoration: underline; } [data-theme="1994"] .nav a:visited { color: #551a8b; } [data-theme="1994"] .nav li::before { content: "[ "; font-weight: bold; } [data-theme="1994"] .nav li::after { content: " ]"; font-weight: bold; margin-right: 6px; } [data-theme="1994"] .r94-under { margin: 6px auto 0; } [data-theme="1994"] .r94-counter-table { margin: 0 auto; border: 2px inset #fff; background: #fff; border-collapse: separate; border-spacing: 4px; font-size: 0.85rem; } [data-theme="1994"] .r94-counter-table td { padding: 2px 6px; border: 1px solid #808080; vertical-align: middle; } [data-theme="1994"] .odometer { display: inline-flex; gap: 1px; margin-left: 4px; vertical-align: middle; } [data-theme="1994"] .odometer span { display: inline-block; background: #000; color: #0f0; font-family: 'Courier New', monospace; font-weight: bold; padding: 0 3px; border: 1px solid #555; } [data-theme="1994"] .blink, [data-theme="1994"] .blink-new { animation: blink94 1s steps(1) infinite; } @keyframes blink94 { 50% { visibility: hidden; } } [data-theme="1994"] .blink { color: #f00; font-weight: bold; } [data-theme="1994"] .blink-new { display: inline-block; background: #ff0; color: #f00; font-weight: bold; padding: 0 4px; border: 1px solid #f00; font-family: Arial, sans-serif; font-size: 0.75rem; margin-right: 4px; } [data-theme="1994"] .lowbw-toggle { font-family: 'Times New Roman', serif; font-size: 0.8rem; background: none; border: 0; color: #0000ee; text-decoration: underline; cursor: pointer; padding: 0; } [data-theme="1994"] .r94-construction { margin: 10px 0 0; font-family: Arial, sans-serif; font-size: 0.9rem; color: #000; background: repeating-linear-gradient(45deg, #ff0 0 12px, #000 12px 24px); padding: 4px; display: inline-block; } [data-theme="1994"] .r94-construction b, [data-theme="1994"] .r94-construction small { background: #ff0; padding: 2px 6px; vertical-align: middle; } [data-theme="1994"] .px { vertical-align: middle; image-rendering: pixelated; } [data-theme="1994"] .px.spin { animation: spin94 2s steps(8) infinite; } @keyframes spin94 { to { transform: rotateY(360deg); } } [data-theme="1994"] main { background: #fff; border: 3px ridge #808080; padding: 12px 16px 24px; margin-top: 10px; max-width: 62rem; } [data-theme="1994"] .story { margin-top: 0; } [data-theme="1994"] .story-head { text-align: left; } [data-theme="1994"] .todays-read { background: none; color: #f00; font-family: 'Arial Black', Impact, sans-serif; font-size: 1.1rem; letter-spacing: 0; padding: 0; text-transform: uppercase; } [data-theme="1994"] .kicker { font-family: Arial, sans-serif; font-size: 0.8rem; text-transform: none; letter-spacing: 0; color: #008000; } [data-theme="1994"] .kicker a { color: #008000; text-decoration: underline; } [data-theme="1994"] .headline { color: #000080; font-family: 'Times New Roman', serif; text-wrap: wrap; margin-left: 0; text-transform: uppercase; } [data-theme="1994"] .dek { margin-left: 0; color: #000; font-style: italic; font-size: 1rem; } [data-theme="1994"] .byline { justify-content: flex-start; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #000; } [data-theme="1994"] .hero { margin: 10px 0; } [data-theme="1994"] .hero-frame { max-width: 400px; border: 2px solid #0000ee; box-shadow: none; image-rendering: pixelated; } [data-theme="1994"] .hero-frame > svg { filter: contrast(1.4) saturate(2); } [data-theme="1994"] .hero figcaption { font-family: Arial, sans-serif; font-size: 0.7rem; color: #000; } [data-theme="1994"] .story-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; } [data-theme="1994"] .rail-left { grid-row: span 2; background: #000080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23000080'/%3E%3Ccircle cx='4' cy='5' r='1' fill='%23ffff00'/%3E%3Ccircle cx='15' cy='14' r='1' fill='%23ffffff'/%3E%3C/svg%3E"); color: #fff; padding: 8px; border: 3px ridge #808080; font-family: Arial, sans-serif; font-size: 0.8rem; } [data-theme="1994"] .rail-left a, [data-theme="1994"] .rail-left .rail-h { color: #ff0 !important; } [data-theme="1994"] .rail-left .tool { color: #000 !important; } [data-theme="1994"] .rail-sticky { position: static; } [data-theme="1994"] .rail-block { border-top: 0; padding: 4px 0; } [data-theme="1994"] .rail-h { font-family: Arial, sans-serif; font-weight: bold; font-size: 0.8rem; letter-spacing: 0; text-transform: uppercase; color: #000; } [data-theme="1994"] .rail-right { grid-column: 2; background: #ffffcc; border: 1px solid #000; padding: 8px; font-family: Arial, sans-serif; font-size: 0.85rem; } [data-theme="1994"] .tool { border-radius: 0; background: #c0c0c0; border: 2px outset #fff; font-family: Arial, sans-serif; font-size: 0.75rem; } [data-theme="1994"] .tool:active { border-style: inset; } [data-theme="1994"] .tags a { border: 0; border-radius: 0; color: #ff0; padding: 0; } [data-theme="1994"] .tags a::before { content: "» "; } [data-theme="1994"] .prose { font-size: var(--fs-base); } [data-theme="1994"] .prose > p:first-of-type::first-letter { float: none; font-size: 1.6em; padding: 0; color: #f00; font-family: 'Times New Roman', serif; font-weight: bold; line-height: 1; } [data-theme="1994"] .prose h2 { font-family: 'Arial Black', Arial, sans-serif; font-size: 1.25rem; color: #800000; text-transform: uppercase; margin: 1.4em 0 0.4em; } [data-theme="1994"] .prose h2::before { content: ""; display: block; height: 6px; margin-bottom: 10px; background: linear-gradient(90deg, #f00, #ff8000, #ff0, #0f0, #00f, #8000ff); } [data-theme="1994"] .prose p { margin: 0 0 0.9em; } [data-theme="1994"] .pullquote { margin: 1em 0; border: 0; padding: 0; text-align: center; } [data-theme="1994"] .pullquote p { font-family: 'Comic Sans MS', cursive; font-size: 1.15rem; color: #f0f; font-weight: bold; } [data-theme="1994"] .pullquote p::before, [data-theme="1994"] .pullquote p::after { content: " ★ "; color: #f00; } [data-theme="1994"] .box, [data-theme="1994"] .claim { border: 3px double #000; border-radius: 0; box-shadow: none; background: #ffffe0; } [data-theme="1994"] .box-title { color: #f00 !important; font-family: Arial, sans-serif !important; letter-spacing: 0 !important; } [data-theme="1994"] .box-weird { background: #ffe0ff; } [data-theme="1994"] .box-think { background: #e0ffff; } [data-theme="1994"] .claim-tag { border-radius: 0; font-family: 'Courier New', monospace; } [data-theme="1994"] .sidenote { background: #e0e0ff; border: 1px dashed #00f; font-family: Arial, sans-serif; color: #000; } [data-theme="1994"] .timeline { border-left: 3px solid #000; } [data-theme="1994"] .timeline li::before { border-radius: 0; background: #f00; border-color: #000; } [data-theme="1994"] .learned { border: 4px ridge #ff0; background: #000; color: #0f0; box-shadow: none; font-family: 'Courier New', monospace; } [data-theme="1994"] .learned-title { background: none; color: #ff0; font-family: 'Arial Black', sans-serif; letter-spacing: 0; padding: 0; font-size: 1.1rem; animation: rainbow94 2s steps(6) infinite; } @keyframes rainbow94 { 0% { color: #f00; } 17% { color: #ff8000; } 33% { color: #ff0; } 50% { color: #0f0; } 67% { color: #0ff; } 83% { color: #f0f; } } [data-theme="1994"] .learned-list li { border-bottom: 1px dotted #0f0; } [data-theme="1994"] .learned-mark { border-radius: 0; border-color: #0f0; } [data-theme="1994"] .learned-mark::after { border-color: #0f0; } [data-theme="1994"] .one-more { border-top: 0; } [data-theme="1994"] .one-more::before { content: ""; display: block; height: 8px; margin-bottom: 14px; background: repeating-linear-gradient(90deg, #f00 0 8px, #ff0 8px 16px, #0f0 16px 24px, #00f 24px 32px); } [data-theme="1994"] .one-more-title { font-family: 'Comic Sans MS', cursive; color: #00f; font-size: 1.3rem; } [data-theme="1994"] .sources { font-family: 'Courier New', monospace; color: #000; } [data-theme="1994"] .sources a { color: #0000ee; } [data-theme="1994"] .section-title { font-family: 'Arial Black', sans-serif; font-size: 1.3rem; text-align: left; color: #000080; text-transform: uppercase; } [data-theme="1994"] .section-title::before { content: "► "; color: #f00; } [data-theme="1994"] .section-dek { text-align: left; } [data-theme="1994"] .liked, [data-theme="1994"] .home-weird, [data-theme="1994"] .home-archive, [data-theme="1994"] .home-themes, [data-theme="1994"] .archive-search, [data-theme="1994"] .archive-results, [data-theme="1994"] .archive-cats, [data-theme="1994"] .archive-calendar { border-top: 0; margin-top: 1.5rem; padding-top: 0; } [data-theme="1994"] .liked::before, [data-theme="1994"] .home-weird::before, [data-theme="1994"] .home-archive::before, [data-theme="1994"] .home-themes::before, [data-theme="1994"] .archive-results::before, [data-theme="1994"] .archive-cats::before { content: ""; display: block; height: 4px; margin-bottom: 12px; border-top: 2px groove #fff; border-bottom: 2px groove #fff; background: #808080; } [data-theme="1994"] .home-weird { text-align: left; } [data-theme="1994"] .btn, [data-theme="1994"] .btn-mood, [data-theme="1994"] .btn-quiet { font-family: Arial, sans-serif; font-weight: normal; font-size: 0.85rem; color: #000 !important; background: #c0c0c0; border: 2px outset #fff; border-radius: 0; box-shadow: none; padding: 3px 10px; } [data-theme="1994"] .btn:hover { transform: none; filter: none; } [data-theme="1994"] .btn:active { border-style: inset; } [data-theme="1994"] .btn-xl { font-size: 1rem; font-weight: bold; } [data-theme="1994"] .moods { justify-content: flex-start; } [data-theme="1994"] .card-grid { display: block; } [data-theme="1994"] .card { border: 0; background: none; box-shadow: none; border-radius: 0; margin: 0 0 6px; } [data-theme="1994"] .card:hover { transform: none; } [data-theme="1994"] .card-link { display: block; color: #0000ee !important; text-decoration: underline; } [data-theme="1994"] .card-art { display: inline-block; width: 64px; height: 34px; vertical-align: middle; border: 1px solid #0000ee; margin-right: 6px; } [data-theme="1994"] .card-body { display: inline; padding: 0; } [data-theme="1994"] .card-kicker, [data-theme="1994"] .card-dek, [data-theme="1994"] .card-why, [data-theme="1994"] .card-meta { display: none; } [data-theme="1994"] .card-title { font-family: 'Times New Roman', serif; font-size: 1rem; font-weight: bold; letter-spacing: 0; } [data-theme="1994"] .card-title::after { content: " NEW!"; color: #f00; font-size: 0.7em; font-family: Arial, sans-serif; text-decoration: none; display: inline-block; } [data-theme="1994"] .card:nth-child(n+3) .card-title::after { content: ""; } [data-theme="1994"] .page-head { text-align: left; margin: 0 0 10px; } [data-theme="1994"] .page-title { font-family: 'Times New Roman', serif; color: #000080; font-size: 2rem; text-transform: uppercase; } [data-theme="1994"] .search-form { justify-content: flex-start; font-family: Arial, sans-serif; } [data-theme="1994"] .search-form input, [data-theme="1994"] .search-form select { border: 2px inset #fff; border-radius: 0; background: #fff; font-family: 'Courier New', monospace; font-size: 0.9rem; } [data-theme="1994"] .search-q input { font-size: 1rem; } [data-theme="1994"] .results-count { text-align: left; font-family: 'Comic Sans MS', cursive; color: #008000; } [data-theme="1994"] .chip { border-radius: 0; border: 0; background: none; color: #0000ee !important; text-decoration: underline; padding: 0 4px; } [data-theme="1994"] .chips { justify-content: flex-start; } [data-theme="1994"] .daylog li { font-family: 'Courier New', monospace; } [data-theme="1994"] .rabbit-link, [data-theme="1994"] .bored-card { border: 2px outset #fff; border-radius: 0; box-shadow: none; background: #c0c0c0; } [data-theme="1994"] .theme-previews .theme-preview { border-radius: 0; } [data-theme="1994"] .site-footer { border-top: 0; font-family: 'Times New Roman', serif; text-align: center; } [data-theme="1994"] .ticker { background: #000; color: #0f0; font-family: 'Courier New', monospace; border: 0; max-width: 62rem; } [data-theme="1994"] .ticker-text { font-style: normal; font-family: 'Courier New', monospace; } [data-theme="1994"] .ticker-label { background: #f00; color: #ff0; } [data-theme="1994"] .footer-grid { max-width: 62rem; text-align: left; background: #fff; border: 2px inset #fff; margin-top: 8px; padding: 10px; gap: 10px; } [data-theme="1994"] .theme-pills a, [data-theme="1994"] .btn-ambient { border-radius: 0; border: 2px outset #fff; background: #c0c0c0; color: #000 !important; font-family: Arial, sans-serif; } [data-theme="1994"] .r94-footer { max-width: 62rem; margin: 0 auto; padding: 8px 16px 40px; } [data-theme="1994"] .r94-hr { height: 6px; border: 0; background: linear-gradient(90deg, #f00, #ff8000, #ff0, #0f0, #00f, #8000ff, #f00); } [data-theme="1994"] .badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } [data-theme="1994"] .badge88 { width: 88px; height: 31px; display: inline-flex; flex-direction: column; justify-content: center; font: 9px/1.05 Arial, sans-serif; text-align: center; border: 2px outset #fff; overflow: hidden; } [data-theme="1994"] .badge88 b { font-size: 11px; } [data-theme="1994"] .b-netscape { background: linear-gradient(#000080, #0000ff); color: #fff; } [data-theme="1994"] .b-notepad { background: #fff; color: #000; } [data-theme="1994"] .b-800 { background: #000; color: #0f0; } [data-theme="1994"] .b-y2k { background: #ff0; color: #f00; } [data-theme="1994"] .b-html { background: #f80; color: #000; } [data-theme="1994"] .b-nofr { background: #808080; color: #fff; } [data-theme="1994"] .webring { margin: 10px auto; border: 3px ridge #808080; background: #ffffcc; font-family: Arial, sans-serif; font-size: 0.85rem; } [data-theme="1994"] .webring td { padding: 3px 10px; text-align: center; } [data-theme="1994"] .rainbow-bar { height: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f); } [data-theme="1994"] .panel { border: 2px outset #fff; border-radius: 0; background: #c0c0c0; font-family: Arial, sans-serif; } [data-theme="1994"] .panel-title { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-family: Arial, sans-serif; font-size: 0.95rem; margin: -1.5rem -1.5rem 1rem; padding: 3px 6px; } [data-theme="1994"] .theme-choice, [data-theme="1994"] .ambient-choice { border-radius: 0; border: 2px outset #fff; background: #c0c0c0; } [data-theme="1994"] .dig { background: #c0c0c0; backdrop-filter: none; } [data-theme="1994"] .dig-spinner { border-radius: 0; border: 0; width: 200px; height: 18px; background: repeating-linear-gradient(90deg, #000080 0 10px, #c0c0c0 10px 12px); border: 2px inset #fff; animation: none; } [data-theme="1994"] .dig-text { font-family: 'Courier New', monospace; font-style: normal; } [data-theme="1994"] .toast { border-radius: 0; background: #ffffe1; color: #000; border: 1px solid #000; font-family: Arial, sans-serif; } [data-theme="1994"] .sparkle { position: fixed; pointer-events: none; z-index: 300; width: 6px; height: 6px; background: #ff0; box-shadow: 0 0 2px #f0f; animation: sparkle 700ms linear forwards; } @keyframes sparkle { to { transform: translateY(18px) scale(0.2); opacity: 0; } } .sparkle { display: none; } [data-theme="1994"] .sparkle { display: block; } /* Low bandwidth (14.4k modem) mode: no art, no animation, alt-text boxes. */ [data-lowbw] *, [data-lowbw] *::before, [data-lowbw] *::after { animation: none !important; transition: none !important; } [data-lowbw] .hero-frame > svg, [data-lowbw] .hero-img, [data-lowbw] .card-art, [data-lowbw] .px, [data-lowbw] .sparkle { display: none !important; } [data-lowbw] .hero-frame { aspect-ratio: auto; min-height: 3rem; display: grid; place-items: center; border: 1px dashed var(--muted); background: none; } [data-lowbw] .lowbw-placeholder { display: block; font-family: 'Courier New', monospace; font-size: 0.8rem; padding: 0.6rem; color: var(--muted); } [data-lowbw] .hero-frame:not(:has(.lowbw-placeholder))::after { content: "[IMAGE]"; font-family: 'Courier New', monospace; font-size: 0.8rem; color: var(--muted); } [data-lowbw] body { background-image: none; } /* 8. RESPONSIVE / MOTION / PRINT ------------------------------------------- */ @media (max-width: 68rem) { .story-grid { grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 15rem); } .rail-left { grid-column: 1 / -1; order: -1; } .rail-left .rail-sticky { position: static; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: start; } .rail-left .toc { display: none; } .rail-left .tools { margin: 0; } [data-theme="newspaper"] .rail-left { border: 0; padding: 0; } } @media (max-width: 52rem) { .story-grid, [data-theme="1994"] .story-grid { grid-template-columns: minmax(0, 1fr); } .rail-right, [data-theme="1994"] .rail-right { grid-column: auto; } [data-theme="1994"] .rail-left { grid-row: auto; } [data-theme="newspaper"] .rail-right { border: 0; padding: 0; } .sidenote { float: none; width: auto; margin: 1.2em 0; } .footer-grid { grid-template-columns: 1fr; } .pullquote { margin: 1.6em 0; } .admin-cols, .grid2 { grid-template-columns: 1fr; } .daylog li { grid-template-columns: 6.5rem 1fr; } .daylog-cat { display: none; } .masthead-strip { justify-content: center; } .strip-motto { display: none; } [data-theme="deadhead"] .story-main { border-width: 2px; box-shadow: 4px 4px 0 var(--fg); } [data-theme="1994"] main { padding: 8px; } [data-theme="1994"] .r94-counter-table, [data-theme="1994"] .r94-counter-table tbody, [data-theme="1994"] .r94-counter-table tr, [data-theme="1994"] .r94-counter-table td { display: block; text-align: center; } } @media (max-width: 30rem) { .nav a { padding: 0.5rem 0.55rem; font-size: 0.72rem; } .learned { padding: 1.1rem; } .prose > p:first-of-type::first-letter { font-size: 3.3em; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @view-transition { navigation: none; } [data-theme="1994"] marquee { display: none; } [data-theme="deadhead"] .brand-name, [data-theme="deadhead"] .headline { filter: none; } } @media print { .masthead nav, .rail, .tools, .site-footer, .r94, .moods, .home-weird, .home-themes, .home-archive, .progress, .liked, .next-up, dialog { display: none !important; } body { background: #fff !important; color: #000 !important; animation: none; } .story-grid { display: block; } a { color: #000 !important; } } .no-js [data-js-only] { display: none !important; } /* Radio --------------------------------------------------------------------- */ .radio { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 64rem; margin: 1rem auto 0; } .radio-dial { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; } .radio-status { font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem; } .radio-show { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.15; margin: 0 0 0.3rem; font-weight: var(--headline-weight); } .radio-show a { text-decoration: none; color: var(--fg); } .radio-meta { font-family: var(--font-ui); font-size: 0.82rem; color: var(--muted); margin: 0 0 1rem; } .radio-track { font-size: 1.25rem; font-style: italic; margin: 0 0 0.6rem; min-height: 1.6em; } .radio-progress { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .radio-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms linear; } .radio-time { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 1rem; } .radio-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; } .radio-play { min-width: 8rem; } .radio-options { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; font-family: var(--font-ui); font-size: 0.85rem; } .radio-options label { display: inline-flex; align-items: center; gap: 0.4rem; } .radio-options select { background: var(--bg); border: var(--border); border-radius: var(--radius); padding: 0.3rem; } .radio-tip { margin: 1rem 0 0; } .radio-setlist { margin: 0; padding-left: 1.6rem; max-height: 28rem; overflow: auto; font-size: 0.95rem; } .radio-setlist li { padding: 0.15rem 0; } .radio-setlist button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--fg); font: inherit; } .radio-setlist button:hover { color: var(--accent); } .radio-setlist li.on button { font-weight: 700; color: var(--accent); } .radio-setlist li.on::marker { content: "▶ "; color: var(--accent); } .radio-credit { max-width: 64rem; margin: 1.5rem auto 0; } .radio-entry { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; margin-bottom: 0.8rem; border: 2px solid var(--accent); border-radius: var(--radius); text-decoration: none; color: var(--fg) !important; background: var(--bg); } .radio-entry small { color: var(--muted); font-size: 0.75rem; } .is-popout .masthead, .is-popout .site-footer, .is-popout .dead-fab, .is-popout .r94-top, .is-popout .deadbar { display: none !important; } .is-popout main { padding-top: 0.5rem; } .is-popout .radio { grid-template-columns: 1fr; gap: 1rem; } .is-popout .page-head { margin: 1rem auto 0.5rem; } .is-popout .page-title { font-size: 2rem; } .is-popout .dek { font-size: 0.95rem; } [data-theme="deadhead"] .dead-fab { display: inline-flex; position: fixed; right: 1rem; bottom: 1rem; z-index: 60; align-items: center; gap: 0.3rem; padding: 0.6rem 1rem; font-family: var(--font-ui); text-decoration: none; color: #fbf1dc !important; background: var(--accent); border: 3px solid var(--fg); border-radius: 999px; box-shadow: 4px 4px 0 var(--fg); animation: fab-bob 4s ease-in-out infinite; } @keyframes fab-bob { 50% { transform: translateY(-4px) rotate(-2deg); } } [data-theme="deadhead"].is-radio .dead-fab, [data-theme="deadhead"] .is-radio .dead-fab { display: none; } @media (max-width: 52rem) { .radio { grid-template-columns: 1fr; } } /* 1991 — THE FIRST WEB ------------------------------------------------------- Every element is returned to the browser's own default styles, exactly as an unstyled HTML document looked when the web was a few dozen servers at CERN. Only what must be hidden (images, decoration, other themes' furniture) is touched. */ [data-theme="1991"] body, [data-theme="1991"] body * { all: revert; } /* Doubled attribute selector so this outranks every decorative pseudo-element rule above. */ [data-theme="1991"][data-theme="1991"] body *::before, [data-theme="1991"][data-theme="1991"] body *::after, [data-theme="1991"][data-theme="1991"] body *::first-letter { all: revert; } [data-theme="1991"] body { background: #fff; color: #000; margin: 8px; font-family: 'Times New Roman', Times, serif; } [data-theme="1991"] .w91 { display: block; } [data-theme="1991"] .r94, [data-theme="1991"] .t-term, [data-theme="1991"] .masthead-strip, [data-theme="1991"] .brand, [data-theme="1991"] .nav, [data-theme="1991"] .progress, [data-theme="1991"] svg, [data-theme="1991"] img, [data-theme="1991"] .hero, [data-theme="1991"] .card-art, [data-theme="1991"] .card-kicker, [data-theme="1991"] .card-dek, [data-theme="1991"] .card-meta, [data-theme="1991"] .card-why, [data-theme="1991"] .tool-icon, [data-theme="1991"] .learned-mark, [data-theme="1991"] .btn-arrow, [data-theme="1991"] .dig-spinner, [data-theme="1991"] .dead-fab, [data-theme="1991"] .ticker-label, [data-theme="1991"] .todays-read, [data-theme="1991"] .kicker-sep, [data-theme="1991"] .skip, [data-theme="1991"] .kbd-hint, [data-theme="1991"] .theme-swatch, [data-theme="1991"] .radio-progress, [data-theme="1991"] marquee { display: none; } [data-theme="1991"] [hidden] { display: none; } [data-theme="1991"] .card { display: list-item; list-style: disc; margin-left: 2.5em; } [data-theme="1991"] .card-title { display: inline; } [data-theme="1991"] .rail, [data-theme="1991"] .story-grid, [data-theme="1991"] .liked, [data-theme="1991"] .learned, [data-theme="1991"] .sources, [data-theme="1991"] .one-more { display: block; } [data-theme="1991"] body { counter-reset: lm; } /* The CERN line-mode browser numbered every link so you could type its number. */ [data-theme="1991"][data-theme="1991"] main a::after, [data-theme="1991"][data-theme="1991"] .site-footer a::after, [data-theme="1991"][data-theme="1991"] .w91 a::after { counter-increment: lm; content: "[" counter(lm) "]"; } [data-theme="1991"] .dig:not([hidden]) { position: fixed; inset: 0 0 auto 0; background: #fff; border-bottom: 1px solid #000; padding: 4px 8px; } [data-theme="1991"] .toast:not([hidden]) { position: fixed; left: 0; bottom: 0; background: #fff; border-top: 1px solid #000; padding: 2px 8px; width: 100%; } [data-theme="1991"] .theme-preview { all: revert; } .theme-preview[data-theme="1991"] { background: #fff; font-family: 'Times New Roman', Times, serif; border: 1px solid #000; box-shadow: none; border-radius: 0; } .theme-preview[data-theme="1991"] .tp-kicker, .theme-preview[data-theme="1991"] .tp-title { font-family: 'Times New Roman', Times, serif; text-transform: none; letter-spacing: 0; color: #000; } .theme-preview[data-theme="1991"] .btn { color: #0000ee !important; text-decoration: underline; padding: 0; font-family: 'Times New Roman', Times, serif; font-weight: normal; } /* 1991: the NeXT workstation around the document. The page itself stays unstyled; only the "browser" chrome — menu, window frame, title bar — is drawn. */ html[data-theme="1991"] { background: #545454; } [data-theme="1991"] body { background: #fff; margin: 14px 14px 14px 232px; padding: 0 14px 14px; border: 1px solid #000; box-shadow: 3px 3px 0 #000; min-height: calc(100vh - 30px); } [data-theme="1991"] .w91-titlebar { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 5; margin: 0 -14px 10px; padding: 2px 4px; background: #000; color: #fff; font: 13px/1.3 Helvetica, Arial, sans-serif; text-align: center; } [data-theme="1991"] .w91-titlebar > span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="1991"] .w91-btn { display: inline-block; width: 15px; height: 15px; line-height: 13px; font-size: 11px; color: #000; background: #aaa; border: 1px solid; border-color: #fff #555 #555 #fff; } [data-theme="1991"] .w91-menu { display: block; position: fixed; left: 14px; top: 14px; width: 200px; background: #aaa; border: 1px solid #000; box-shadow: 3px 3px 0 #000; font: 13px/1.2 Helvetica, Arial, sans-serif; z-index: 10; } [data-theme="1991"] .w91-menu-title { display: block; margin: 0; padding: 3px 6px; background: #000; color: #fff; font-weight: bold; } [data-theme="1991"] .w91-menu a { display: flex; justify-content: space-between; padding: 3px 6px; color: #000; text-decoration: none; border-top: 1px solid #fff; border-bottom: 1px solid #555; } [data-theme="1991"] .w91-menu a:hover, [data-theme="1991"] .w91-menu a:focus-visible { background: #fff; outline: none; } [data-theme="1991"] .w91-menu a span { color: #333; } [data-theme="1991"] .w91-banner { display: block; margin: 0 0 4px; font-size: 13px; line-height: 1.1; overflow-x: auto; } [data-theme="1991"] .w91-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } [data-theme="1991"] .w91-conn { display: block; color: #000; margin: 0 0 10px; } [data-theme="1991"] .w91-img { display: block; } [data-theme="1991"] .w91-ascii:not(:empty) { display: block; font-size: 6px; line-height: 6px; letter-spacing: 0; overflow-x: auto; max-width: 100%; margin: 4px 0 12px; } [data-theme="1991"] .w91-prompt { display: block; margin: 0; } [data-theme="1991"] .w91-prompt input { border: 0; border-bottom: 1px dotted #000; font-family: monospace; outline: none; } [data-theme="1991"] .w91-out { display: block; white-space: pre-wrap; margin: 4px 0 0; } [data-theme="1991"] .w91-out:empty { display: none; } @media (max-width: 56rem) { [data-theme="1991"] .w91-menu { display: none; } [data-theme="1991"] body { margin: 6px; padding: 0 8px 8px; } [data-theme="1991"] .w91-titlebar { margin: 0 -8px 8px; } [data-theme="1991"] .w91-banner { font-size: 8px; } } @media print { [data-theme="1991"] .w91-menu, [data-theme="1991"] .w91-titlebar { display: none; } [data-theme="1991"] body { margin: 0; border: 0; box-shadow: none; } } /* Persistent radio bar ----------------------------------------------------------- */ .deadbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem max(0.8rem, env(safe-area-inset-left)) calc(0.55rem + env(safe-area-inset-bottom)); background: var(--surface); color: var(--fg); border-top: var(--border); border-top: 2px solid var(--rule-strong); box-shadow: 0 -8px 30px #0003; font-family: var(--font-ui); font-size: 0.85rem; } .deadbar[hidden] { display: none; } body.has-deadbar { padding-bottom: 4.5rem; } body.has-deadbar .dead-fab, body.has-deadbar .toast { bottom: 5rem; } .db-progress { position: absolute; left: 0; right: 0; top: -2px; height: 3px; } .db-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms linear; } .db-btn { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: var(--border); border: 1px solid var(--rule-strong); background: var(--bg); color: var(--fg); cursor: pointer; font-size: 0.95rem; } .db-play { background: var(--accent); color: var(--bg); border-color: var(--accent); } .db-close { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; } .db-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .db-track { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-show { font-size: 0.75rem; color: var(--muted) !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-modes { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; flex: none; } .db-modes button { border: 0; background: transparent; color: var(--fg); padding: 0.35rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.78rem; } .db-modes button[aria-pressed="true"] { background: var(--fg); color: var(--bg); } .db-link { flex: none; font-size: 0.78rem; } .radio-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 1rem; } .radio-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.7rem 0.9rem; text-align: left; cursor: pointer; background: var(--bg); color: var(--fg); border: 2px solid var(--rule); border-radius: var(--radius); font-family: var(--font-ui); } .radio-mode small { color: var(--muted); font-size: 0.75rem; } .radio-mode[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .radio-mode[aria-pressed="true"] b::before { content: "● "; color: var(--accent); } [data-theme="deadhead"] .deadbar { background: var(--fg); color: #fbf1dc; border-top: 3px solid var(--accent); } [data-theme="deadhead"] .db-show { color: #f2b134 !important; } [data-theme="deadhead"] .db-modes { border-color: #fbf1dc; } [data-theme="deadhead"] .db-modes button { color: #fbf1dc; } [data-theme="deadhead"] .db-modes button[aria-pressed="true"] { background: #f2b134; color: var(--fg); } [data-theme="1994"] .deadbar { background: #c0c0c0; border-top: 2px outset #fff; box-shadow: none; font-family: Arial, sans-serif; } [data-theme="1994"] .db-btn, [data-theme="1994"] .db-modes { border-radius: 0; border: 2px outset #fff; background: #c0c0c0; color: #000; } [data-theme="1994"] .db-play { background: #c0c0c0; } [data-theme="1991"] .deadbar:not([hidden]) { display: flex; gap: 6px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #aaa; border-top: 1px solid #000; padding: 3px 8px; font: 13px Helvetica, Arial, sans-serif; } [data-theme="1991"] .deadbar .db-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } [data-theme="1991"] .deadbar .db-progress { display: none; } @media (max-width: 40rem) { .db-link, .db-show { display: none; } .db-modes button { padding: 0.3rem 0.5rem; } .radio-modes { grid-template-columns: 1fr; } } /* The Wall (reader art & music) ------------------------------------------------------ */ .wall { max-width: 72rem; margin: 0 auto; } .wall-tabs { display: flex; justify-content: center; gap: 0.5rem; margin: 0 0 1.5rem; } .wall-tab { font-family: var(--font-ui); font-weight: 700; text-decoration: none; padding: 0.55rem 1.2rem; border: var(--border); border: 2px solid var(--rule-strong); border-radius: var(--btn-radius); color: var(--fg) !important; } .wall-tab[aria-current="page"] { background: var(--fg); color: var(--bg) !important; } .wall-notice { text-align: center; font-family: var(--font-ui); padding: 0.7rem 1rem; background: var(--surface); border-left: 4px solid var(--claim-fact); } .wall-error { border-left-color: var(--accent); } .wall-form-wrap { max-width: 40rem; margin: 0 auto 2rem; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.4rem 1.2rem; } .wall-form-wrap summary { cursor: pointer; font-family: var(--font-display); font-size: 1.3rem; padding: 0.6rem 0; font-weight: var(--headline-weight); } .wall-form { display: grid; gap: 0.8rem; padding-bottom: 1rem; font-family: var(--font-ui); font-size: 0.9rem; } .wall-form label { display: flex; flex-direction: column; gap: 0.25rem; } .wall-form label.check { flex-direction: row; align-items: center; gap: 0.5rem; } .wall-form input:not([type="checkbox"]):not([type="file"]), .wall-form textarea { padding: 0.5rem 0.6rem; border: var(--border); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; } .wall-drop { display: grid; gap: 0.4rem; place-items: center; text-align: center; padding: 1rem; border: 2px dashed var(--rule-strong); border-radius: var(--radius); } .wall-drop img { max-height: 16rem; max-width: 100%; border-radius: var(--radius); } .wall-file input { font-size: 0.85rem; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wall-sort { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.2rem; } .wall-sort .chip[aria-current="true"] { background: var(--fg); color: var(--bg) !important; } .wall-grid { columns: 3 16rem; column-gap: 1.2rem; } .wall-art { break-inside: avoid; margin: 0 0 1.2rem; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--anim) var(--ease); } .wall-art:hover { transform: translateY(-3px) rotate(-0.3deg); } .wall-art img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; background: var(--surface-2); } .wall-art figcaption { padding: 0.6rem 0.8rem 0; font-family: var(--font-ui); font-size: 0.85rem; } .wall-title { font-weight: 700; color: var(--fg) !important; text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; } .wall-by { color: var(--muted); font-size: 0.85em; margin: 0; } .wall-votes { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.8rem 0.6rem; } .wall-like, .wall-report { background: none; border: 0; cursor: pointer; font-family: var(--font-ui); color: var(--muted); font-size: 0.8rem; padding: 0.2rem 0; } .wall-like { font-size: 0.95rem; color: var(--fg); } .wall-like.loved { color: var(--accent); } .wall-report:hover { color: var(--accent); text-decoration: underline; } .wall-hidden { opacity: 0.3; filter: grayscale(1); } .wall-songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.2rem; } .wall-song { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1rem 0.2rem; display: flex; flex-direction: column; gap: 0.5rem; } .wall-song-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: var(--headline-weight); } .wall-embed iframe { width: 100%; height: 100%; border: 0; border-radius: calc(var(--radius) / 2); } .wall-embed-video { aspect-ratio: 16 / 9; } .wall-embed-spotify { height: 152px; } .wall-embed-audio { height: 166px; } .wall-why { font-style: italic; margin: 0; } .wall-song .wall-votes { padding: 0.2rem 0 0.4rem; } .wall-empty { font-style: italic; color: var(--muted); padding: 2rem 0; } .wall-detail { max-width: 60rem; margin: 2rem auto 0; } .wall-detail-figure { margin: 1rem 0; text-align: center; } .wall-detail-figure img { max-width: 100%; max-height: 80vh; height: auto; width: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .wall-detail .wall-votes { justify-content: center; gap: 2rem; } .wall-detail-text { margin: 0 auto; } /* The Gallery ----------------------------------------------------------------------- */ .gallery-intro { max-width: 44rem; margin: 0 auto 1.5rem; text-align: center; } .gallery-rooms { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 2rem; } .gallery-rooms .chip[aria-current="true"] { background: var(--fg); color: var(--bg) !important; } .gallery-room { margin: 0 0 3rem; } .gallery-room-head { text-align: center; margin-bottom: 1.2rem; } .gallery-room-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0; font-weight: var(--headline-weight); } .gallery-room-head p { margin: 0.3rem auto 0; max-width: 36rem; color: var(--muted); font-style: italic; } .gallery-grid { columns: 3 17rem; column-gap: 1.4rem; } .piece-card { break-inside: avoid; display: block; margin: 0 0 1.4rem; text-decoration: none; color: var(--fg) !important; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--anim) var(--ease); } .piece-card:hover { transform: translateY(-4px); } .piece-card img { display: block; width: 100%; height: auto; background: var(--surface-2); } .piece-card-body { display: block; padding: 0.7rem 0.9rem 0.9rem; } .piece-card-title { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; font-weight: var(--headline-weight); } .piece-card-meta { display: block; font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; } .piece { max-width: 78rem; margin: 1.5rem auto 0; } .piece-figure { margin: 0 0 1.5rem; text-align: center; background: var(--surface-2); border-radius: var(--radius); padding: clamp(0.5rem, 2vw, 1.5rem); } .piece-figure img { max-width: 100%; max-height: 82vh; width: auto; height: auto; box-shadow: 0 12px 40px #0004; } .piece-figure figcaption { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); margin-top: 0.7rem; } .piece-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 18rem); gap: clamp(1.5rem, 4vw, 3rem); justify-content: center; } .piece-label { font-family: var(--font-ui); font-size: 0.85rem; border-top: 2px solid var(--rule-strong); padding-top: 0.8rem; align-self: start; position: sticky; top: 1.5rem; } .piece-label dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; margin: 0; } .piece-label dt { color: var(--muted); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; padding-top: 0.15em; } .piece-label dd { margin: 0; } .piece-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--font-ui); } @media (max-width: 52rem) { .piece-grid { grid-template-columns: 1fr; } .piece-label { position: static; } } [data-theme="newspaper"] .piece-card img, [data-theme="newspaper"] .piece-figure img { filter: none; } [data-theme="1991"] .gallery-grid, [data-theme="1991"] .wall-grid { columns: auto; } [data-theme="1991"] .piece-card, [data-theme="1991"] .wall-art { display: list-item; list-style: disc; margin-left: 2.5em; } [data-theme="1991"] .piece-card-body, [data-theme="1991"] .piece-card-title, [data-theme="1991"] .piece-card-meta { display: inline; } .admin-wall { margin: 1rem 0 2rem; padding: 0.8rem 1rem; border: var(--border); border: 1px solid var(--rule-strong); border-radius: var(--radius); } .admin-wall-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 0.8rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); } .admin-wall-item img { width: 96px; height: 96px; object-fit: cover; background: var(--surface-2); } .admin-wall-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; } /* Fake advertising ------------------------------------------------------------------- */ .ad { position: relative; font-family: var(--font-ui); } .ad-label { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .ad-link { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--fg) !important; } .ad-advertiser { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .ad-headline { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; font-weight: var(--headline-weight); } .ad-body { font-size: 0.82rem; line-height: 1.4; color: var(--muted); } .ad-cta { font-size: 0.8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; } .ad-phone { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; font-family: var(--font-mono); } .ad-box { padding: 1rem; border: 1px dashed var(--rule-strong); background: var(--surface); border-radius: var(--radius); } .rail .ad-box { margin-top: 1rem; } .piece-label .ad-box { margin-top: 1.5rem; } .ad-banner { margin: 2rem 0; padding: 0.9rem 1.1rem; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); background: var(--surface-2); } .ad-banner .ad-link { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; } .ad-banner .ad-advertiser { grid-column: 1 / -1; } .ad-banner .ad-headline { grid-column: 1; } .ad-banner .ad-body { grid-column: 2; } .ad-banner .ad-cta { grid-column: 3; white-space: nowrap; padding: 0.4rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: var(--btn-radius); text-decoration: none; } .ad-inline { margin: 2.2rem -0.5rem; } .ad-wide { max-width: 60rem; margin-left: auto; margin-right: auto; } .ad-link:hover .ad-headline { color: var(--accent); } .ad-theme, .ad-468 { display: none; } .classifieds { max-width: var(--page); margin: 0 auto; padding: 1rem var(--gap); border-bottom: 1px solid var(--rule); } .classifieds-title { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--muted); } .classifieds ul { list-style: none; margin: 0; padding: 0; columns: 4 14rem; column-gap: 1.5rem; font-size: 0.8rem; line-height: 1.4; } .classifieds li { break-inside: avoid; margin: 0 0 0.6rem; padding-left: 0.6rem; border-left: 2px solid var(--rule); } .sponsor-reel { max-width: 64rem; margin: 1.5rem auto 0; padding: 0.9rem 1.1rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--surface); } .sponsor { display: block; text-decoration: none; color: var(--fg) !important; font-size: 0.9rem; } .sponsor[hidden] { display: none; } .ad-landing { max-width: 48rem; margin: 0 auto; } .ad-landing-card { text-align: center; padding: 2rem; border: 3px double var(--rule-strong); background: var(--surface); border-radius: var(--radius); } .ad-landing-body { font-size: 1.2rem; } .ad-disclaimer { margin: 1.5rem 0 2rem; padding: 0.8rem 1rem; border-left: 4px solid var(--accent); background: var(--surface-2); font-family: var(--font-ui); font-size: 0.9rem; } .ad-landing-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-bottom: 2rem; } @media (max-width: 40rem) { .ad-banner .ad-link { grid-template-columns: 1fr; } .ad-banner .ad-headline, .ad-banner .ad-body, .ad-banner .ad-cta { grid-column: 1; } .ad-banner .ad-cta { justify-self: start; } } /* Each theme only shows its own house ad. */ [data-theme="1994"] .ad-theme[data-for="1994"], [data-theme="terminal"] .ad-theme[data-for="terminal"], [data-theme="cosmic"] .ad-theme[data-for="cosmic"], [data-theme="midnight"] .ad-theme[data-for="midnight"], [data-theme="fieldnotes"] .ad-theme[data-for="fieldnotes"], [data-theme="library"] .ad-theme[data-for="library"], [data-theme="deadhead"] .ad-theme[data-for="deadhead"] { display: block; max-width: 30rem; margin: 1rem auto; padding: 0 var(--gap); } /* Newspaper: proper classifieds */ [data-theme="newspaper"] .classifieds { border-top: 4px double var(--rule-strong); } [data-theme="newspaper"] .classifieds-title { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0; text-transform: none; color: var(--fg); text-align: center; font-weight: 900; } [data-theme="newspaper"] .classifieds ul { column-rule: 1px solid var(--rule); font-family: var(--font-body); text-align: justify; } [data-theme="newspaper"] .classifieds li { border: 0; padding: 0; } [data-theme="newspaper"] .classifieds li::first-line { font-weight: 700; } [data-theme="newspaper"] .ad-box, [data-theme="newspaper"] .ad-banner { border: 2px solid var(--fg); background: transparent; border-radius: 0; } [data-theme="newspaper"] .ad-headline { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; } /* Library: notices on a card */ [data-theme="library"] .ad-box, [data-theme="library"] .ad-banner { background: #fbf6e8; border: 1px solid #b5a37f; box-shadow: 1px 2px 0 #b5a37f; font-family: var(--font-mono); } [data-theme="library"] .ad-label::before { content: "Notice — "; } /* Terminal: ads as command output */ [data-theme="terminal"] .ad-box, [data-theme="terminal"] .ad-banner { background: transparent; border: 1px dashed var(--fg); } [data-theme="terminal"] .ad-label::before { content: "$ cat /var/spam/"; color: var(--accent); } [data-theme="terminal"] .ad-advertiser { color: var(--accent); } /* Cosmic: transmissions */ [data-theme="cosmic"] .ad-label::before { content: "◉ Incoming transmission · "; } [data-theme="cosmic"] .ad-box, [data-theme="cosmic"] .ad-banner { border-style: solid; border-color: #7ef0ff55; backdrop-filter: blur(8px); } /* Dead-Head: handbills */ [data-theme="deadhead"] .ad-box, [data-theme="deadhead"] .ad-banner { background: #fff6dc; border: 3px solid var(--fg); border-radius: 14px; box-shadow: 5px 5px 0 var(--fg); transform: rotate(-0.6deg); } [data-theme="deadhead"] .ad-headline { font-family: var(--font-display); color: var(--accent); } /* Field notes: taped-in clipping */ [data-theme="fieldnotes"] .ad-box, [data-theme="fieldnotes"] .ad-banner { background: #fffdf3; border: 1px solid #0002; transform: rotate(0.8deg); box-shadow: 2px 3px 6px #0002; } /* 1994: 468×60 banners, blinking, everything */ [data-theme="1994"] .ad-468 { display: block; width: 468px; max-width: calc(100% - 16px); margin: 6px auto; padding: 0; border: 0; background: none; } [data-theme="1994"] .ad-468 .ad-label { display: none; } [data-theme="1994"] .ad-468 .ad-link { display: block; height: 60px; overflow: hidden; padding: 4px 8px; border: 2px outset #fff; background: linear-gradient(90deg, #ff0, #0ff, #f0f); color: #000 !important; font-family: Arial, sans-serif; text-align: center; text-decoration: none; } [data-theme="1994"] .ad-468 .ad-advertiser, [data-theme="1994"] .ad-468 .ad-body { display: none; } [data-theme="1994"] .ad-468 .ad-headline { display: block; font-family: Impact, 'Arial Black', sans-serif; font-size: 18px; color: #f00; animation: blink94 0.8s steps(1) infinite; } [data-theme="1994"] .ad-468 .ad-cta { display: inline-block; margin-top: 2px; padding: 0 8px; background: #00f; color: #fff; border: 2px outset #fff; text-decoration: none; font-size: 12px; } [data-theme="1994"] .ad-box, [data-theme="1994"] .ad-banner:not(.ad-468) { border: 3px ridge #808080; background: #ffffcc; border-radius: 0; } [data-theme="1994"] .ad-headline { color: #f00; font-family: 'Arial Black', sans-serif; } [data-theme="1994"] .ad-cta { color: #0000ee; } [data-theme="1994"] .classifieds { background: #fff; border: 2px inset #fff; max-width: 62rem; } /* 1991: commercial traffic not permitted on NSFNET */ [data-theme="1991"] .ad, [data-theme="1991"] .classifieds, [data-theme="1991"] .ad-theme { display: none; } @media print { .ad, .classifieds, .ad-theme { display: none !important; } }