/* ============================================================ Print Object theme (PROTOTYPE) Loaded last in _includes/head.html so it overrides styles.css and custom-theme.css. Purely presentational. It changes no page content, so nothing here can introduce copy that is not already on the site. Strategy: the existing theme is token-driven, so most of the retone happens by redefining :root. The rest neutralises the neon glow and rebuilds the shared components. ============================================================ */ :root { /* Paper stock and ink, replacing the vaporwave tokens */ --color-bg: #efe9dc; --color-text: #14100c; --color-accent: #c0330f; --color-accent-cyan: #14100c; --color-accent-purple: #c0330f; --color-muted: #4a4238; --color-border: #14100c; --color-card-bg: #e7e0d0; --color-window-chrome: #ded5c2; --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --po-paper: #efe9dc; --po-ink: #14100c; --po-soft: #4a4238; --po-spot: #c0330f; --po-serif: "Young Serif", Georgia, serif; --po-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif; --po-rule: 2px solid #14100c; --po-hair: 1px solid #14100c; } html { background: var(--po-paper); } body { background-color: var(--po-paper) !important; color: var(--po-ink) !important; font-family: var(--po-grotesk) !important; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.018) 0 1px, transparent 1px), radial-gradient(circle at 70% 65%, rgba(0,0,0,0.015) 0 1px, transparent 1px) !important; background-size: 7px 7px, 11px 11px; } /* Kill the neon. Glow is the single strongest signal of the old theme. */ body *, body *::before, body *::after { text-shadow: none !important; } h1, h2, h3, h4, h5, h6, .btn, .card, .gallery-card, .project-card, .badge, .gallery-image, .gallery-content, summary, table, td, th, img, video { box-shadow: none !important; } /* Scanlines and CRT flicker belong to the old theme */ body::before, body::after { display: none !important; } /* Drones were hidden on mobile already; the paper theme has no place for them */ .drone { display: none !important; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--po-grotesk) !important; color: var(--po-ink) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.03; border-left: none !important; padding-left: 0 !important; } h1 { font-size: clamp(2.2rem, 6vw, 4rem); } h2 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); } h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); } h4 { font-size: 1.05rem; } /* The old theme prefixed headings with a shell prompt */ h1::before, h2::before, h3::before, .summary-heading::before, .h1-kicker::before { content: none !important; } p, li, dd, blockquote, .gallery-excerpt, .card-text, .bio { font-family: var(--po-serif) !important; color: var(--po-ink) !important; line-height: 1.6; } a { color: var(--po-spot) !important; text-underline-offset: 3px; } a:hover { color: var(--po-ink) !important; } /* Lists: markers were sitting on the left edge with no indent, so wrapped lines did not align under the first line. */ ul, ol { padding-left: 1.5em; margin: 0 0 1.1rem; } li { margin-bottom: 0.55rem; } li > p { margin: 0; } li > p + p { margin-top: 0.5rem; } /* custom-theme.css adds a '>' prompt glyph before every list item, which doubles up with the real bullet and lands on its own line */ ul li::before { content: none !important; margin-right: 0 !important; } /* Inline year labels sat flush against the title that follows them */ .year-label { margin-right: 0.75em; } .mono, code, pre, kbd, samp, .meta-label, .meta-value, .location, .year-label, .badge, .nav-group-label, .hero-eyebrow, .tag-sku { font-family: var(--po-mono, var(--font-mono)) !important; color: var(--po-soft) !important; text-transform: uppercase; letter-spacing: 0.14em; } /* ---------- Section headings ---------- Scoped with :not() so the heavy rule lands on real section headings and not on card titles, which are also h2 in the gallery markup. */ h2:not(.gallery-title):not(.card-title), .summary-heading { padding-bottom: 10px; border-bottom: 6px solid var(--po-ink); display: block; } /* Terminal window chrome: the ⬤⬤⬤ dots and the title-bar strips */ .header::before, .gallery-image::before, .gallery-card::before { content: none !important; } .gallery-image, .gallery-card { border-top-width: 0 !important; } /* The old theme prefixed back-links with a prompt glyph */ .back-link::before, .back-link::after { content: none !important; } /* ---------- Buttons ---------- */ .btn, .btn-primary, .back-link { background: var(--po-paper) !important; border: 2px solid var(--po-ink) !important; color: var(--po-ink) !important; font-family: var(--po-grotesk) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 var(--po-ink) !important; padding: 11px 18px !important; min-height: 46px; display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none !important; transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease !important; } .btn::before, .btn::after { content: none !important; } .btn:hover, .btn-primary:hover, .back-link:hover { background: var(--po-ink) !important; color: var(--po-paper) !important; box-shadow: 0 0 0 var(--po-ink) !important; transform: translate(3px, 3px); } /* ---------- Cards ---------- */ .card, .gallery-card, .project-card, .content-block { background: var(--po-paper) !important; border: var(--po-hair) !important; border-radius: 0 !important; border-left: var(--po-hair) !important; } .gallery-image, .card-img-top, .profile-image { border: none !important; border-bottom: var(--po-hair) !important; border-radius: 0 !important; background: var(--color-card-bg) !important; } .gallery-title, .card-title { color: var(--po-ink) !important; } .gallery-content, .project-content { background: transparent !important; } /* Window chrome dots on gallery cards read as macOS decoration, not paper */ .gallery-card .window-chrome, .gallery-card .chrome-dots { display: none !important; } /* ---------- Details / accordions ---------- */ details { border-top: var(--po-hair); } details summary { background: transparent !important; color: var(--po-ink) !important; } details summary:hover { background: rgba(0,0,0,0.04) !important; } details[open] summary { border-bottom: var(--po-hair) !important; } /* ---------- Tables ---------- */ table { border-collapse: collapse !important; width: 100%; } th { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px !important; color: var(--po-soft) !important; border-bottom: var(--po-rule) !important; text-align: left; } td { border-bottom: var(--po-hair) !important; font-family: var(--po-serif) !important; } table tr:hover { background: rgba(0,0,0,0.03) !important; } /* ---------- Badges ---------- */ .badge { background: transparent !important; border: 2px solid var(--po-spot) !important; color: var(--po-spot) !important; border-radius: 999px !important; padding: 8px 14px !important; font-size: 10px !important; } /* ---------- Header / footer ---------- */ .gallery-header, .header { background: transparent !important; border-bottom: var(--po-rule) !important; } .site-copyright { border-top: var(--po-rule); color: var(--po-soft) !important; font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.02em; } /* ---------- Interactive tools ---------- The tools under /smalltools/ are applications, not documents. Media surfaces must stay dark or the output is washed out, and controls must stay in a UI face rather than inheriting the prose serif. */ canvas, video, .canvas-wrap, .stage, .viewport { background: #0b0b0b !important; } input, select, button, textarea, label, option, .control, .controls, .slider, .toolbar { font-family: var(--po-grotesk) !important; color: var(--po-ink) !important; } input, select, textarea { background: var(--po-paper) !important; border: var(--po-hair) !important; border-radius: 0 !important; min-height: 38px; } button:not(.btn) { background: var(--po-paper) !important; color: var(--po-ink) !important; border: 2px solid var(--po-ink) !important; border-radius: 0 !important; font-weight: 700 !important; min-height: 38px; padding: 6px 12px !important; } button:not(.btn):hover { background: var(--po-ink) !important; color: var(--po-paper) !important; } /* ---------- Cursor ---------- custom-theme.css sets `cursor: none` because the drone replaced the pointer, so the pointer has to be restored here. The replacement is a printer's registration mark, the target used to align colour plates on press. Each mark is drawn twice: a thick paper stroke underneath and a thin ink stroke on top, so it stays legible on paper, on photographs and on the dark canvases in /smalltools/. */ body, div, section, article, main, header, footer, p, span, li, td, th, h1, h2, h3, h4, h5, h6, img, canvas, video { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23efe9dc' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M13 1.5v4.5M13 20v4.5M1.5 13h4.5M20 13h4.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%2314100c' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M13 1.5v4.5M13 20v4.5M1.5 13h4.5M20 13h4.5'/%3E%3C/g%3E%3C/svg%3E") 13 13, auto !important; } /* Interactive: the mark closes up and inks in, in the spot colour */ a, button, summary, label, .btn, .tag, .outbound, [role="button"], input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select, details summary { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23efe9dc' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1v4M13 21v4M1 13h4M21 13h4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c0330f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1v4M13 21v4M1 13h4M21 13h4'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c0330f'/%3E%3C/svg%3E") 13 13, pointer !important; } /* Text entry keeps a real caret; a target mark there would be misleading */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea { cursor: text !important; } /* ---------- Panels built for a dark background ---------- Translucent black overlays turn into dark-on-dark once the page is paper, so the text inside them becomes unreadable. */ .spatial-block, .demo-block, .note-block, .callout, .highlight-block { background: rgba(20, 16, 12, 0.05) !important; border: var(--po-hair) !important; color: var(--po-ink) !important; } /* ---------- Surveillance tracker bar ---------- tracker.js injects its own