/* ========================================================================= aarav.me · Ditherpunk Terminal (V1, minimal pass) No neon. No phosphor glow. Three levels of warm-white, on near-black. Personality from structure, type, and ASCII — not from luminance noise. ========================================================================= */ :root { /* Palette — minimal, no accent color. All emphasis happens via FG level (muted / body / strong). */ --bg: #0D0D0F; /* near-black, very slight warmth */ --bg-deep: #08080A; /* top strip / footer */ --surface: #16161A; /* panels */ --fg: #D8D6D0; /* body */ --fg-strong: #F2F0EA; /* emphasis, headings, "active" */ --fg-muted: #6E6B65; /* secondary, captions, labels */ --rule: #24221F; /* hairlines, dashed borders */ --rule-soft: rgba(216, 214, 208, 0.06); /* Three sparingly-used warm hues for log-level scannability. All desaturated. None of these glow. None appear in body copy. */ --warm-amber: #B8945E; /* WARN / IN_PRESS / UNKNOWN */ --warm-rust: #A06A60; /* ERR / KILLED */ --warm-moss: #8A9078; /* SHIPPED */ /* Type — monospace, ever. Swappable via data-font on . */ --mono-plex: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --mono-jetbrains: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --mono-geist: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --mono: var(--mono-plex); --container: 1100px; /* Motion — stepped only. No easing, ever. */ --step: 50ms steps(2); } html[data-font="jetbrains"] { --mono: var(--mono-jetbrains); } html[data-font="geist"] { --mono: var(--mono-geist); } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); cursor: crosshair; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 14px; font-weight: 400; line-height: 1.65; font-feature-settings: "tnum" 1, "kern" 1; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } img, svg { max-width: 100%; display: block; } ul, ol, dl { margin: 0; padding: 0; } h1, h2, h3, p, dt, dd { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; } a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; cursor: pointer; transition: color var(--step), border-color var(--step); } a:hover, a:focus-visible { color: var(--fg-strong); border-bottom-color: var(--fg-strong); } a:focus-visible { outline: 1px dashed var(--fg-strong); outline-offset: 2px; } /* ========================================================================= CRT OVERLAYS — present, but barely. No mood lighting. ========================================================================= */ .crt-scanlines, .crt-grain, .crt-vignette { position: fixed; inset: 0; pointer-events: none; } .crt-scanlines { z-index: 999; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.22) 2px, rgba(0, 0, 0, 0.22) 3px ); mix-blend-mode: multiply; opacity: 0.28; } .crt-grain { z-index: 998; opacity: 0.05; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); } .crt-vignette { z-index: 997; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%); } @media (prefers-reduced-motion: reduce) { .crt-scanlines { opacity: 0.18; } } /* ========================================================================= TOP STRIP — serial console bar, quiet ========================================================================= */ .top-strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 6px 24px; background: var(--bg-deep); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } .top-strip__cell { white-space: nowrap; } .top-strip__cell--right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--fg); } .dot { display: inline-block; color: var(--fg-strong); font-size: 9px; line-height: 1; } .dot--pulse { animation: blockBlink 1.4s steps(1) infinite; } @keyframes blockBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .dot--pulse { animation: none; opacity: 1; } } /* ========================================================================= FRAME — main container ========================================================================= */ .frame { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 32px 24px 64px; } /* ========================================================================= MASTHEAD — wordmark bar + nav. ASCII corners drawn with borders. ========================================================================= */ .masthead { border: 1px solid var(--rule); padding: 18px 20px; margin-bottom: 32px; position: relative; background: rgba(22, 22, 26, 0.5); } .masthead::before, .masthead::after { content: ''; position: absolute; width: 8px; height: 8px; border-color: var(--fg-muted); border-style: solid; } .masthead::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .masthead::after { top: -1px; right: -1px; border-width: 1px 1px 0 0; } .masthead__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule); } .brand { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--fg-strong); } .status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-muted); } .nav { display: flex; gap: 22px; flex-wrap: wrap; } .nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; color: var(--fg); border-bottom: 0; } .nav a:hover, .nav a:focus-visible { color: var(--fg-strong); background: none; } .prompt { color: var(--fg-muted); } /* ========================================================================= "GLOW" — kept as a class for compatibility, but no longer glows. Just elevates color to FG-strong. Emphasis through value, not shadow. ========================================================================= */ .glow { color: var(--fg-strong); text-shadow: none; } /* Caret — block cursor, blinks via opacity only. No phosphor. */ .caret { display: inline-block; color: var(--fg-strong); font-weight: 500; animation: caretBlink 1s steps(1) infinite; margin-left: 2px; } @keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } } /* ========================================================================= HERO — dithered portrait + ASCII nameblock ========================================================================= */ .hero { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: start; margin-bottom: 36px; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 24px; } } .plate { margin: 0; border: 1px solid var(--rule); background: var(--bg-deep); padding: 10px; position: relative; } .plate::before, .plate::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--fg-muted); border-style: solid; } .plate::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .plate::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .plate__inner { overflow: hidden; position: relative; } .plate__inner img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: url(#dither) contrast(1.04); image-rendering: pixelated; display: block; opacity: 0.92; } /* Dot overlay — quieter, just enough to read as "newsprint" */ .plate__inner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient( circle at center, rgba(13, 13, 15, 0.45) 0.6px, transparent 1.1px ); background-size: 3px 3px; mix-blend-mode: multiply; } .plate__caption { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-muted); text-transform: uppercase; } .nameblock { padding-top: 4px; } .nameblock__intro { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; color: var(--fg-muted); margin-bottom: 14px; } .nameblock__name { font-family: var(--mono); font-size: clamp(40px, 7vw, 64px); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-strong); margin-bottom: 16px; text-wrap: balance; } .nameblock__rule { font-family: var(--mono); font-size: 14px; color: var(--fg-muted); margin: 12px 0 14px; letter-spacing: -0.05em; overflow: hidden; white-space: nowrap; } .nameblock__role { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--fg); margin-bottom: 18px; } .nameblock__line { font-family: var(--mono); font-size: 14px; color: var(--fg); margin: 4px 0; } /* ========================================================================= MARQUEE — stack scroll, muted ========================================================================= */ .marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 32px 0; overflow: hidden; background: var(--bg-deep); } .marquee__track { display: inline-flex; white-space: nowrap; animation: marqueeRun 60s linear infinite; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--fg-muted); } @keyframes marqueeRun { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ========================================================================= BLOCK — section heading with [ NN ] number + rule ========================================================================= */ .block { margin: 48px 0; } .block__head { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--fg); margin-bottom: 18px; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .block__num { color: var(--fg-strong); font-weight: 600; } .block__rule { color: var(--fg-muted); font-weight: 400; letter-spacing: -0.05em; overflow: hidden; white-space: nowrap; flex: 1; min-width: 40px; } /* ========================================================================= ARCHIVE TABLE — selected work ========================================================================= */ .archive-wrap { overflow-x: auto; } .archive { width: 100%; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; border: 1px dashed var(--rule); } .archive thead th { text-align: left; font-weight: 500; letter-spacing: 0.08em; color: var(--fg-muted); font-size: 10.5px; padding: 10px 14px; background: var(--surface); border-bottom: 1px dashed var(--rule); } .archive tbody td { padding: 12px 14px; border-bottom: 1px dashed var(--rule); color: var(--fg); vertical-align: baseline; } .archive tbody tr { transition: background var(--step); } .archive tbody tr:hover { background: rgba(242, 240, 234, 0.03); } .archive tbody td:first-child { color: var(--fg-strong); } .archive tbody td:last-child { text-align: right; width: 1%; white-space: nowrap; } .archive a { color: var(--fg-muted); border-bottom: 0; } .archive a:hover { color: var(--fg-strong); background: none; } .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; } .badge--press { color: var(--warm-amber); } .badge--shipped { color: var(--warm-moss); } .badge--archived { color: var(--fg-muted); } .badge--killed { color: var(--warm-rust); text-decoration: line-through; text-decoration-thickness: 1px; } .badge--unknown { color: var(--warm-amber); border-style: dashed; } /* ========================================================================= LOG — writing entries, syslog style ========================================================================= */ .log { list-style: none; } .log__entry { display: grid; grid-template-columns: 110px 80px 1fr; gap: 8px 18px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--rule); font-family: var(--mono); font-size: 13px; } .log__ts { color: var(--fg-muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .log__lvl { font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; } .log__lvl--info { color: var(--fg-strong); } .log__lvl--warn { color: var(--warm-amber); } .log__lvl--err { color: var(--warm-rust); } .log__lvl--debug { color: var(--fg-muted); } .log__title { color: var(--fg); border-bottom: 0; letter-spacing: 0.01em; } .log__title:hover { color: var(--fg-strong); background: none; } .log__lede { grid-column: 3 / -1; color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; } @media (max-width: 640px) { .log__entry { grid-template-columns: auto auto; gap: 2px 12px; } .log__lede { grid-column: 1 / -1; padding-left: 0; } } /* ========================================================================= ENTITY — about, structured data record ========================================================================= */ .entity { display: grid; grid-template-columns: 130px 1fr; gap: 10px 24px; font-family: var(--mono); font-size: 13px; border: 1px dashed var(--rule); padding: 18px 22px; background: rgba(22, 22, 26, 0.3); } .entity dt { color: var(--fg-muted); letter-spacing: 0.08em; font-weight: 500; font-size: 11.5px; padding-top: 3px; } .entity dd { color: var(--fg); margin: 0; word-wrap: break-word; } .entity dd a { color: var(--fg-strong); border-bottom: 1px solid var(--rule); } .entity dd a:hover { color: var(--fg-strong); border-bottom-color: var(--fg-strong); background: none; } .entity__stack { display: flex; flex-wrap: wrap; gap: 5px; } .chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg); border: 1px solid var(--rule); padding: 1px 7px; text-transform: lowercase; } .entity__links { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; } .entity__links .sep { color: var(--fg-muted); padding: 0 4px; } @media (max-width: 560px) { .entity { grid-template-columns: 1fr; gap: 14px; } .entity dt { padding-top: 0; } } /* ========================================================================= ENDLINE — footer ========================================================================= */ .endline { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 32px 24px 48px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-muted); } .endline__rule { color: var(--fg-muted); margin-bottom: 18px; overflow: hidden; white-space: nowrap; letter-spacing: -0.05em; opacity: 0.65; } .endline__meta { margin-bottom: 14px; text-transform: uppercase; } .endline__prompt { color: var(--fg); text-transform: lowercase; letter-spacing: 0.04em; } /* ========================================================================= TYPE TOGGLE — same widget, no neon active state ========================================================================= */ .type-toggle { position: fixed; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 2px; padding: 7px 9px; background: var(--bg-deep); border: 1px solid var(--rule); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; z-index: 1001; color: var(--fg); } .type-toggle__label { color: var(--fg-muted); padding-right: 9px; margin-right: 4px; border-right: 1px dashed var(--rule); } .type-toggle button { color: var(--fg-muted); padding: 4px 7px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color var(--step), background var(--step); } .type-toggle button:hover { color: var(--fg); background: rgba(242, 240, 234, 0.04); } .type-toggle button[aria-pressed="true"] { color: var(--fg-strong); } @media (max-width: 560px) { .type-toggle { bottom: 12px; right: 12px; padding: 6px 7px; font-size: 9.5px; } } /* ========================================================================= SELECTION + SCROLLBAR — quiet ========================================================================= */ ::selection { background: var(--fg-strong); color: var(--bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--bg-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); } /* ========================================================================= PRINT ========================================================================= */ @media print { .crt-scanlines, .crt-grain, .crt-vignette, .type-toggle { display: none; } html { cursor: auto; } body { background: white; color: black; } a { color: black; border-bottom: 0; } }