/* styles.css - Research Paper Generator A spoof-paper generator. The chrome is a plain research-tool UI; the output panel is dressed as a journal offprint so the joke lands on sight, and every surface that carries the parody also carries the stamp treatment. Two colour families: ink (navy-black, academic) and stamp (rubber-stamp red). The stamp family is reserved for the not-a-real-paper machinery so it never competes with ordinary UI accent. */ /* ============================================================ 1. Tokens ============================================================ */ :root { --bg: #e9e6df; --panel: #fdfcf9; --panel2: #f2efe8; --sheet: #fffefb; --ink: #17161c; --ink-soft: #3a3843; --muted: #6b6660; --line: #d7d2c6; --line-soft: #e6e2d8; --accent: #23406e; --accent-ink: #ffffff; --stamp: #b3241c; --stamp-ink: #ffffff; --stamp-edge: #8e1c15; --warn: #8a4416; --ok: #3d6b46; --radius: 10px; --maxw: 880px; --shadow: 0 1px 2px rgba(23, 22, 28, 0.05), 0 8px 24px rgba(23, 22, 28, 0.06); /* Watermark tuning - see section 10 for the contrast reasoning. */ --wm-color: #b3241c; --wm-opacity: 0.085; --wm-weight: 800; --wm-size: 30px; /* Secondary type ON the sheet, which is the only muted text a watermark stroke can pass behind. Pulled off --muted so it can clear 4.5:1 over a stroke without darkening the muted text everywhere else in the UI. */ --sheet-muted: #5f5a53; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif; } /* theme.js stamps data-theme on ; this attribute selector outranks any prefers-color-scheme block, which is why none is used. */ :root[data-theme="dark"] { --bg: #131319; --panel: #1b1b23; --panel2: #23232d; --sheet: #1f1f28; --ink: #eceaf1; --ink-soft: #c8c5d0; --muted: #9591a0; --line: #33323f; --line-soft: #2a2934; --accent: #8fb2e8; --accent-ink: #10131b; --stamp: #e2604f; --stamp-ink: #1a0f0d; --stamp-edge: #f08574; --warn: #dd9256; --ok: #78b184; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.42); /* A warm red on a near-black sheet reads far fainter than the same alpha on cream, so the mark gets more ink and one step less weight. */ --wm-color: #ff8a76; --wm-opacity: 0.13; --wm-weight: 700; --sheet-muted: #b2aeba; } /* ============================================================ 2. Base ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); overflow-x: hidden; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 72px; } a { color: var(--accent); } a:hover { text-decoration: underline; } h1 { font-size: 34px; line-height: 1.14; margin: 30px 0 8px; letter-spacing: -0.015em; } h2 { font-size: 21px; margin: 0 0 10px; letter-spacing: -0.008em; } h3 { font-size: 15px; margin: 0 0 4px; } p { margin: 0 0 12px; } .lede { font-size: 18px; color: var(--ink-soft); margin: 0 0 14px; } .muted { color: var(--muted); } .small { font-size: 13.5px; } .empty { color: var(--muted); font-style: italic; } .intro { margin-bottom: 20px; } .section-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 12px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 0 0 18px; } /* ============================================================ 3. Top bar ============================================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 20px; background: var(--panel); border-bottom: 1px solid var(--line); } .topbar-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .brand { font-weight: 700; letter-spacing: -0.01em; } .back { color: var(--muted); text-decoration: none; font-size: 14px; } .back:hover { color: var(--ink); } .account { display: flex; align-items: center; gap: 10px; font-size: 14px; } .credits { font-variant-numeric: tabular-nums; } .topup { font-size: 14px; } .icon-btn { font: inherit; font-size: 14px; line-height: 1; padding: 7px 10px; cursor: pointer; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; } .icon-btn:hover { border-color: var(--accent); } /* ============================================================ 4. Form ============================================================ */ .field { display: block; margin: 0 0 14px; } .field .label, .label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.01em; } textarea, input[type="text"], select { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } textarea { resize: vertical; min-height: 92px; line-height: 1.5; } select { appearance: none; background-image: none; cursor: pointer; } textarea:focus, input:focus, select:focus, .btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .third { flex: 1 1 190px; } .half { flex: 1 1 300px; } .hint, .run-hint { font-size: 13px; color: var(--muted); } #register-note:not(:empty), .register-note { font-size: 14px; color: var(--ink-soft); background: var(--panel2); border-radius: 8px; padding: 11px 13px; margin: 0 0 14px; } .register-note p:last-child { margin-bottom: 0; } .scan-notes ul.scan, .guard-list { margin: 0 0 12px; padding-left: 18px; } .scan-notes li { font-size: 14px; color: var(--muted); margin-bottom: 4px; } /* ============================================================ 5. Buttons ============================================================ */ .btn { font: inherit; font-size: 15px; padding: 9px 16px; cursor: pointer; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; } .btn:hover:not(:disabled) { border-color: var(--accent); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } .btn.ghost { background: transparent; } .btn.small { font-size: 13.5px; padding: 6px 11px; } .btn.toggle { border-radius: 999px; font-size: 13.5px; padding: 6px 14px; } .btn.toggle.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } .shape-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 12px 0; } .shape-row .label { margin: 0; font-size: 13px; color: var(--muted); } .run-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } /* ============================================================ 6. Guard panel ============================================================ */ .guard-zone { background: var(--panel2); border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px; padding: 14px; margin: 0 0 14px; } .guard-head { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .guard-item { font-size: 14px; margin-bottom: 7px; line-height: 1.5; overflow-wrap: anywhere; } .guard-item:last-child { margin-bottom: 0; } .tier-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 6px; margin-right: 8px; border-radius: 4px; vertical-align: 1px; background: var(--muted); color: var(--panel); } .tier-tag.block { background: var(--stamp); color: var(--stamp-ink); } .tier-tag.transform { background: var(--warn); color: #fff; } .tier-tag.constrain { background: var(--accent); color: var(--accent-ink); } :root[data-theme="dark"] .tier-tag.transform { color: #1a0f06; } /* ============================================================ 7. Cost, shortfall, staged progress ============================================================ */ .cost { font-size: 14px; margin: 12px 0 4px; } .cost-figure { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .cost-note, .cost-balance { color: var(--muted); } .shortfall:not(:empty) { font-size: 14px; font-weight: 600; color: var(--stamp); margin: 0 0 8px; } .progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 12px; } .elapsed { font-variant-numeric: tabular-nums; } ul.stages { list-style: none; margin: 0; padding: 0; } .stage { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; color: var(--muted); } .stage-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; } .stage.active { color: var(--ink); } .stage.active .stage-dot { border-color: var(--accent); background: var(--accent); animation: pulse 1.4s ease-in-out infinite; } .stage.done { color: var(--ink-soft); } .stage.done .stage-dot { border-color: var(--ok); background: var(--ok); } .stage-label { overflow-wrap: anywhere; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } .retry-note:not(:empty) { font-size: 14px; color: var(--muted); padding: 9px 13px; border-left: 3px solid var(--accent); margin: 0 0 14px; } /* ============================================================ 8. Output panel and the stamp banner ============================================================ */ .output-panel { margin: 0 0 18px; } /* The banner is the first thing the eye hits, before a single word of the spoof. Solid stamp red edge to edge, square-shouldered, no close control and no dismiss affordance - it has to read as a stamped-over document, not as a cookie notice. It sticks to the top of the viewport for as long as the paper is on screen. The words themselves come from stamp.js; nothing in this file declares them. */ .stamp-banner { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--stamp); color: var(--stamp-ink); border: 2px solid var(--stamp-edge); border-radius: 8px 8px 0 0; box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } /* The head is the rubber stamp: caps, tracked, boxed, knocked off true. The body is a full sentence, so it stays in sentence case - a long line in caps is shouty and slower to read, and this line has to actually be read. */ .stamp-banner .stamp-head, .stamp-banner .stamp-mark { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-2deg); } .stamp-banner .stamp-body, .stamp-banner .stamp-text { flex: 1 1 240px; min-width: 0; } .stamp-banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Compact repeat of the mark, dropped between major blocks of the paper so a screenshot cropped to any single section still carries it. */ .stamp-inline { display: block; margin: 20px 0; padding: 5px 10px; text-align: center; border-top: 1px solid var(--stamp); border-bottom: 1px solid var(--stamp); color: var(--stamp); background: color-mix(in srgb, var(--stamp) 8%, transparent); font: 700 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; overflow-wrap: anywhere; } /* ============================================================ 9. The paper sheet ============================================================ */ .paper-sheet { position: relative; overflow: hidden; isolation: isolate; padding: 40px 44px 34px; background: var(--sheet); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: var(--shadow); color: var(--ink); font: 16px/1.62 var(--serif); overflow-wrap: break-word; } /* Everything that is not the watermark rides above it. */ .paper-sheet > *:not(.paper-watermark) { position: relative; z-index: 1; } .paper-title { margin: 0 0 10px; font-size: 27px; line-height: 1.24; font-weight: 700; text-align: center; letter-spacing: -0.005em; text-wrap: balance; } .paper-byline { margin: 0 0 4px; font-size: 15.5px; text-align: center; font-style: italic; } .paper-affil { margin: 0 0 22px; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--sheet-muted); } .paper-affil sup { font-size: 10px; } .abstract-section { margin: 0 0 11px; font-size: 15px; line-height: 1.6; text-align: justify; hyphens: auto; } .abstract-section .section-head { display: inline; margin: 0 0.5em 0 0; font-family: inherit; font-size: inherit; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; } .abstract-section .section-head::after { content: "."; } .abstract-section .section-body { display: inline; } .limitations { margin: 20px 0 0; padding: 12px 14px; background: var(--panel2); border-left: 3px solid var(--line); border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.58; } .limitations .section-head { display: block; margin-bottom: 4px; font-family: inherit; font-size: 12px; letter-spacing: 0.09em; } .declarations { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); } .declarations p { margin: 0 0 5px; } .declarations strong { color: var(--ink); } .figure-legend { margin: 20px 0 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); } .figure-legend strong { color: var(--ink); } .refs { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); counter-reset: refnum; } /* .refs is a wrapper holding the heading AND the list, so the reset has to reach the inner ul as well; `list-style: none` on the wrapper alone leaves the list bulleted next to a CSS counter that is already numbering it. */ .refs ul { list-style: none; margin: 0; padding: 0; } .ref-item { position: relative; counter-increment: refnum; margin: 0 0 8px; padding-left: 2.1em; font-size: 13px; line-height: 1.52; overflow-wrap: anywhere; } .ref-item::before { content: counter(refnum) "."; position: absolute; left: 0; width: 1.5em; text-align: right; color: var(--sheet-muted); font-variant-numeric: tabular-nums; } .ref-venue { font-style: italic; color: var(--ink-soft); } /* ============================================================ 10. The watermark ------------------------------------------------------------ The overlay is an oversized rotated block that JS fills with a repeated phrase; it wraps naturally, so the phrase tiles the whole sheet on one fixed diagonal. overflow:hidden on .paper-sheet clips it, pointer-events:none keeps it out of the way, and user-select:none means a copy of the paper picks up the clean notice line stamp.js renders rather than a shredded diagonal. THE READABILITY TRADEOFF. Anything painted behind body type spends contrast directly: the type keeps its colour but the surface under it darkens (light theme) or lightens (dark theme), and that is the side of the ratio you cannot afford to lose. So this mark buys its visibility from SIZE, WEIGHT, ANGLE and REPETITION rather than from ink. At 30px/800 on a -28deg grid the strokes are long and continuous and the eye resolves them as a stamp across the whole page even at 0.085 alpha. Measured off a real render, at the peak of a stroke: light theme moves the sheet 14.7% in luminance, and 16px body ink over that peak still reads 15.3:1 (17.8:1 on bare sheet), with the 12.5px declarations at 9.8:1. Dark theme takes 0.13 - a warm red on a near-black sheet reads much fainter for the same alpha - and body type there holds 10.9:1. The one measurement that did NOT clear 4.5:1 was --muted secondary type on the sheet in dark theme (4.1:1), which is why the affiliation line and the reference numerals use --sheet-muted instead; that lands at 5.8:1 light and 6.0:1 dark, and the rest of the UI keeps the softer --muted. Belt and braces: the banner above the sheet and the .stamp-inline markers between blocks carry the notice at full contrast, so the watermark is reinforcement, never the only thing saying it. ============================================================ */ .paper-watermark { position: absolute; top: 50%; left: 50%; z-index: 0; width: 165%; height: 210%; overflow: hidden; transform: translate(-50%, -50%) rotate(-28deg); transform-origin: center center; /* Centred rather than top-aligned so the mark stays over the middle of the sheet whether stamp.js hands us six repetitions or six hundred; the box is narrow enough that a modest string still wraps into several courses. */ display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; -webkit-user-select: none; color: var(--wm-color); opacity: var(--wm-opacity); font: var(--wm-weight) var(--wm-size) / 2.15 var(--sans); letter-spacing: 0.2em; word-spacing: 0.45em; text-transform: uppercase; text-align: center; overflow-wrap: break-word; } /* Forced-colours users get the banner and the inline marks at full strength; a faint decorative wash under system colours would only be noise. */ @media (forced-colors: active) { .paper-watermark { display: none; } .stamp-banner { border-width: 3px; } } /* Print and PDF export: the sheet is the only thing worth keeping and it keeps its mark. Colour adjust is forced so the band does not print white on white. */ @media print { body { background: #fff; } .topbar, .foot, .actions, .history, .detail-block, form { display: none !important; } .paper-sheet, .stamp-banner { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .stamp-banner { position: static; } .paper-watermark { opacity: 0.16; } } /* ============================================================ 11. Craft notes, citations, measurements, findings ============================================================ */ .craft-panel, .citations-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .craft-item { margin-bottom: 14px; } .craft-item:last-child { margin-bottom: 0; } .craft-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 2px; } .craft-text { margin: 0; font-size: 14.5px; line-height: 1.55; } .craft-text.empty { font-style: italic; color: var(--muted); } .citations { font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .citations li { margin-bottom: 5px; overflow-wrap: anywhere; } dl.measured { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0; font-size: 14px; } dl.measured dt { color: var(--muted); } dl.measured dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } ul.findings { list-style: none; margin: 0; padding: 0; } .finding { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .sev-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 6px; border-radius: 3px; background: var(--panel2); color: var(--muted); } .finding.sev-info .sev-tag { background: var(--accent); color: var(--accent-ink); } .finding.sev-warn .sev-tag { background: var(--warn); color: #fff; } :root[data-theme="dark"] .finding.sev-warn .sev-tag { color: #1a0f06; } .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } /* ============================================================ 12. Details blocks, history, footer ============================================================ */ .detail-block { border-top: 1px solid var(--line-soft); padding: 12px 0 4px; } .detail-block summary { cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); } .detail-block summary:hover { color: var(--ink); } .detail-block summary::marker { color: var(--line); } .detail-block[open] summary { margin-bottom: 12px; } ul.history { list-style: none; margin: 0; padding: 0; } .history-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .history-item:last-child { border-bottom: 0; } .history-open { font: inherit; font-size: 15.5px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; } .history-open:hover { color: var(--accent); text-decoration: underline; } .history-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .history-note { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .foot { padding: 22px 20px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; text-align: center; } .foot p { max-width: var(--maxw); margin: 0 auto 8px; } .foot a { color: var(--muted); } .foot .foot-stamp { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border: 1.5px solid var(--stamp); border-radius: 4px; color: var(--stamp); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } /* ============================================================ 13. Utilities, motion, responsive ============================================================ */ /* Several zones are toggled through the hidden property; a later display rule would otherwise beat the UA sheet, so force it. */ [hidden] { display: none !important; } .is-hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @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; } .stage.active .stage-dot { animation: none; } } @media (max-width: 720px) { :root { --wm-size: 26px; } .paper-sheet { padding: 32px 28px 28px; } .paper-title { font-size: 24px; } } @media (max-width: 560px) { :root { --wm-size: 22px; } h1 { font-size: 27px; } .lede { font-size: 16.5px; } .wrap { padding: 0 14px 48px; } .panel { padding: 15px; } .third, .half { flex: 1 1 100%; } .paper-sheet { padding: 26px 20px 24px; font-size: 15.5px; } .paper-title { font-size: 21px; } .abstract-section { text-align: left; } .stamp-banner { padding: 10px 13px; font-size: 12.5px; gap: 9px; } .stamp-inline { letter-spacing: 0.1em; } } @media (max-width: 380px) { :root { --wm-size: 19px; } .wrap { padding: 0 10px 40px; } .topbar { padding: 10px 12px; } .paper-sheet { padding: 22px 15px 20px; } .paper-title { font-size: 19px; } .ref-item { padding-left: 1.9em; } .stamp-banner .stamp-mark { font-size: 11px; padding: 2px 7px; } }