/* ============================================================================ usri.css — USRI Research Showcase page ("Is this fix real?") Layers on top of 98.css. Everything here is prefixed .u- so it cannot collide with styles.css / project_contents.css / desktop.css. Design notes ------------ * 98.css supplies the chrome (windows, title bars, buttons, sliders, tabs). * Prose gets a slightly larger, non-pixel font — this page is long-form reading for a general audience, and Pixelated MS Sans Serif at 11px is punishing past a paragraph. The chrome stays period-correct. * No colour-only signalling anywhere: every PASS/FAIL carries a word, a glyph, and a fill pattern. Jacob Lee | jacoblee.codes ========================================================================= */ :root { --u-ink: #1a1a1a; --u-ink-soft: #4a4a4a; --u-face: #c0c0c0; --u-face-lit: #dfdfdf; --u-shadow: #808080; --u-navy: #000080; --u-pass: #006b1f; --u-pass-bg: #d8f0d8; --u-fail: #a80000; --u-fail-bg: #ffdcdc; --u-warn: #7a5f00; --u-warn-bg: #fff8cc; --u-paper: #ffffff; --u-paper-alt: #f6f6f0; --u-prose: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, sans-serif; --u-mono: "Courier New", Courier, monospace; } /* ---------------------------------------------------------------- shell -- */ /* The classic Win98 desktop teal, matching .content in desktop.css. styles.css puts an animated tiled-blue gif on for the rest of the site; this page is meant to read as the desktop itself, so it overrides that. */ html.u-html { background-color: #008080 !important; background-image: none !important; animation: none !important; } body.u-body { margin: 0; padding: 0; } .u-page { max-width: 860px; margin: 18px auto 40px; padding: 0 14px; box-sizing: border-box; } /* Each beat of the story is its own window. 98.css already gives .window a silver face with a 3px pad, and .window-body an 8px margin — so a silver gutter shows around the body by default. We turn that body into a *sunken white document field*, which is what Notepad and Word actually looked like: silver chrome, white paper inset into it. Keeps long-form reading comfortable while staying period-correct and consistent with the windows on the rest of the site. */ .u-win { margin-bottom: 20px; } .u-win > .window-body { padding: 14px 16px 16px; background: var(--u-paper); border: 2px solid; border-top-color: var(--u-shadow); border-left-color: var(--u-shadow); border-right-color: var(--u-face-lit); border-bottom-color: var(--u-face-lit); } .u-win .title-bar-text { display: flex; align-items: center; gap: 6px; } .u-win .title-bar-text img { width: 16px; height: 16px; image-rendering: pixelated; } /* Prose ------------------------------------------------------------------ */ .u-win p, .u-win li { font-family: var(--u-prose); font-size: 14px; line-height: 1.62; color: var(--u-ink); } .u-win p { margin: 0 0 12px; } .u-win p:last-child { margin-bottom: 0; } .u-win h2 { font-family: var(--u-prose); font-size: 19px; line-height: 1.3; margin: 0 0 10px; color: var(--u-ink); } .u-win h3 { font-family: var(--u-prose); font-size: 15px; margin: 18px 0 8px; color: var(--u-ink); } .u-win ul, .u-win ol { margin: 0 0 12px; padding-left: 22px; } .u-win li { margin-bottom: 6px; } .u-lead { font-size: 15.5px !important; line-height: 1.6 !important; } /* A pulled-out line that carries a beat. */ .u-turn { margin: 16px 0; padding: 12px 14px; background: var(--u-paper-alt); border-left: 4px solid var(--u-navy); border-top: 1px solid var(--u-shadow); border-right: 1px solid var(--u-face-lit); border-bottom: 1px solid var(--u-face-lit); } .u-turn p { margin: 0; font-size: 14.5px; } /* A named technical term, on first introduction. Bold + a dotted rule so the eye registers "this is the word for it" rather than mere emphasis. */ .u-named { font-weight: 700; border-bottom: 2px solid var(--u-navy); } /* Inline maths symbol, so r / f₀ / W / B are familiar before the readout. */ .u-sym { font-family: var(--u-mono); font-size: 0.94em; background: var(--u-face); padding: 0 4px; border: 1px solid; border-top-color: var(--u-face-lit); border-left-color: var(--u-face-lit); border-right-color: var(--u-shadow); border-bottom-color: var(--u-shadow); white-space: nowrap; } /* ------------------------------------------------------------- glossary -- */ /* 98.css styles every for its file-listing widget: `white-space: nowrap` on the table plus a sticky silver `table > thead > tr > *`. On a prose glossary that means the cells refuse to wrap, the table grows wider than the panel, and the silver header band slides out past the border. Both are undone here — this table is a definition list, not a file listing. */ .u-glossary { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 12.5px; white-space: normal; } .u-glossary th { text-align: left; font-family: var(--u-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--u-ink-soft); border-bottom: 1px solid var(--u-shadow); padding: 0 8px 5px 0; font-weight: 700; background: transparent; box-shadow: none; position: static; height: auto; } .u-glossary td { font-family: var(--u-prose); vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid #e4e4e4; line-height: 1.45; height: auto; overflow-wrap: break-word; } .u-glossary tr:last-child td { border-bottom: 0; } .u-glossary td:first-child { width: 34%; } .u-glossary .u-gl-tech { font-weight: 700; color: var(--u-ink); } .u-glossary .u-gl-sym { font-family: var(--u-mono); font-size: 11.5px; color: var(--u-navy); display: block; } @media (max-width: 560px) { .u-glossary, .u-glossary tbody, .u-glossary tr, .u-glossary td { display: block; width: auto; } .u-glossary thead { display: none; } .u-glossary tr { border-bottom: 1px solid var(--u-shadow); padding: 6px 0; } .u-glossary td { border: 0; padding: 2px 0; } .u-glossary td:first-child { width: auto; } } /* ------------------------------------------------------------------ hero -- */ .u-hero-title { font-family: var(--u-prose); font-size: 27px; font-weight: 700; line-height: 1.15; margin: 0 0 10px; color: var(--u-ink); } /* Scoped inside .u-win so it outranks `.u-win p { font-size: 14px }`. */ .u-win .u-hero-sub { font-family: var(--u-prose); font-size: 15.5px; color: var(--u-ink-soft); margin: 0 0 14px; line-height: 1.55; } .u-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--u-shadow); box-shadow: 0 1px 0 var(--u-face-lit); } /* ---------------------------------------------------------------- panels -- */ .u-panel { border: 1px solid; border-top-color: var(--u-shadow); border-left-color: var(--u-shadow); border-right-color: var(--u-face-lit); border-bottom-color: var(--u-face-lit); background: var(--u-face); padding: 10px 12px; margin: 12px 0; } .u-panel-title { display: block; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; } /* Step 2 uses a