:root { --bg: #040b07; --accent: #43ff8e; --accent-rgb: 67, 255, 142; --fg-bright: #e2ffee; --fg: #9fe9bd; --fg-dim: #3c7d57; --warn: #ffb454; --warn-rgb: 255, 180, 84; --ink: #0a120c; --border: rgba(var(--accent-rgb), 0.16); --border-strong: rgba(var(--accent-rgb), 0.3); } /* Amber P1/P3 phosphor variant. Green stays the default; switch via ?theme=amber (persisted to localStorage) - see the inline snippet in home.html's and the comment there for why it's inline rather than in crt.js. Contrast ratios against --bg are tuned to stay in the same ballpark as the green defaults above so legibility doesn't regress. */ html[data-theme="amber"] { --bg: #120b02; --accent: #ffb000; --accent-rgb: 255, 176, 0; --fg-bright: #fff2d9; --fg: #e8b565; --fg-dim: #8a5a1f; --warn: #ff6a4d; --warn-rgb: 255, 106, 77; --ink: #1a0f02; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--fg); font-family: "IBM Plex Mono", monospace; } a { color: inherit; text-decoration: none; } @keyframes blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } } @keyframes flick { 0%, 95%, 100% { opacity: 1; } 96% { opacity: 0.82; } 97% { opacity: 0.96; } 98% { opacity: 0.88; } } @keyframes sig { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .crt { position: relative; min-height: 100vh; animation: flick 8s infinite; } .crt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px); z-index: 5; } .crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.45) 100%); z-index: 6; } /* Once the WebGL2 overlay is running it draws its own pulsing vignette (see vignetteDarken() in crt.js) so the static CSS one is hidden to avoid doubling up. Left active whenever WebGL2 is unavailable. */ html.crt-canvas-active .crt::after { display: none; } @keyframes crtDegauss { 0% { transform: skewX(0deg) scaleX(1); } 10% { transform: skewX(1.3deg) scaleX(1.01); } 25% { transform: skewX(-0.9deg) scaleX(0.994); } 45% { transform: skewX(0.5deg) scaleX(1.004); } 70% { transform: skewX(-0.2deg) scaleX(0.998); } 100% { transform: skewX(0deg) scaleX(1); } } /* Triggered briefly by crt.js on a randomized 25-50s timer, synced with the shader's uDegauss burst. Whole-container skew/scale stays well under 1.5deg / 1% so it reads as a "wobble" without distorting glyph legibility. */ .crt.is-degaussing { animation: crtDegauss 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 1; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: sig 2s infinite; } .dot--sm { width: 9px; height: 9px; box-shadow: none; animation: none; } .dot--warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: sig 1.8s infinite; } .cursor { display: inline-block; width: 8px; height: 15px; background: var(--accent); transform: translateY(2px); animation: blink 1.1s steps(1) infinite; } .ok { color: var(--accent); } /* Top bar */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 13px 26px; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim); } .topbar__brand { color: var(--fg); } .topbar__meta { display: flex; align-items: center; gap: 14px; } /* CRT overlay canvas (WebGL2 grain + flicker, see /static/js/crt.js). Positioned above the page, never intercepts pointer events, and never duplicates the scanline/vignette treatment already provided by .crt::before / .crt::after above. */ #crt-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; mix-blend-mode: overlay; } .crt-toggle { font-family: inherit; font-size: 10px; letter-spacing: 0.08em; color: var(--fg-dim); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 9px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .crt-toggle:hover { color: var(--fg); border-color: var(--border-strong); } .crt-toggle[aria-pressed="false"] { opacity: 0.6; } .crt-toggle:disabled { opacity: 0.35; cursor: default; } /* Phosphor "bloom": a blurred, screen-blended ghost duplicate of a heading sitting behind the real glyphs (content: attr(data-text)), approximating CRT bloom without capturing the page to a texture (see crt.js's header comment for why real screen-space bloom is out of scope). Uses currentColor, so it themes correctly under both the green default and the amber variant with no hardcoded color. The ::before is decorative only - not in the accessibility tree, non-interactive, and doesn't affect the real (selectable) text underneath it. Coexists with a trimmed-down text-shadow on the host elements rather than stacking two full-strength glows. */ .glow-text { position: relative; z-index: 0; display: inline-block; } .glow-text::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: currentColor; filter: blur(6px); mix-blend-mode: screen; opacity: 0.55; pointer-events: none; } /* Hero */ .hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; } .hero__main { padding: 60px 44px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(var(--accent-rgb), 0.1); } .hero__status { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 0.16em; color: var(--fg); margin-bottom: 30px; } .hero__name { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(40px, 6vw, 74px); line-height: 0.95; letter-spacing: -0.025em; color: var(--fg-bright); /* Trimmed down from the original 20px/0.4 - the .glow-text ghost (see home.html) now supplies the wider soft bloom, this is just a tight residual glow at the glyph edge so the two don't stack into one overblown halo. */ text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25); margin: 0; } .hero__tagline { font-family: "Archivo", sans-serif; font-weight: 500; font-size: 21px; line-height: 1.4; color: var(--fg); margin: 26px 0 0; max-width: 420px; } .hero__role { font-size: 13px; color: var(--fg-dim); margin: 14px 0 0; letter-spacing: 0.04em; } .hero__actions { display: flex; gap: 14px; margin-top: 38px; align-items: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: 0.08em; padding: 12px 22px; border-radius: 5px; } .btn--primary { color: var(--ink); background: var(--accent); font-weight: 600; box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35); } .btn--ghost { color: var(--fg); border: 1px solid var(--border-strong); padding: 11px 20px; } .btn--pill { align-self: flex-start; color: var(--ink); background: var(--accent); font-weight: 600; font-size: 12px; padding: 8px 14px; border-radius: 4px; box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.3); } .hero__panel { padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; background: rgba(var(--accent-rgb), 0.03); } .terminal { border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 8px; overflow: hidden; position: relative; } .terminal__bar { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: rgba(var(--accent-rgb), 0.07); border-bottom: 1px solid rgba(var(--accent-rgb), 0.18); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.06em; } .terminal__body { padding: 20px 18px; font-size: 12.5px; line-height: 2; color: var(--fg-dim); } .terminal__gap { height: 12px; } .terminal__ready { color: var(--fg); } /* Previously */ .previously { padding: 34px 44px 0; } .previously__label { font-size: 11px; letter-spacing: 0.16em; color: var(--fg-dim); margin-bottom: 14px; } .previously__row { display: flex; gap: 14px; flex-wrap: wrap; } .company-slot { flex: 1 1 160px; height: 46px; border: 1px dashed rgba(var(--accent-rgb), 0.22); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim); } .company-slot:hover { cursor: pointer; color: var(--bg); background-color: var(--accent); } /* Projects */ .projects { padding: 56px 44px 64px; } .projects__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 26px; margin-bottom: 34px; } .projects__eyebrow { font-size: 12px; letter-spacing: 0.16em; color: var(--fg); margin-bottom: 12px; } .projects__title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -0.02em; color: var(--fg-bright); /* Trimmed down from the original 18px/0.35 for the same reason as .hero__name above - the .glow-text ghost carries the wide bloom now. */ text-shadow: 0 0 7px rgba(var(--accent-rgb), 0.22); margin: 0; } .projects__count { font-size: 12px; letter-spacing: 0.08em; color: var(--fg-dim); } .projects__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; } .card { border: 1px solid var(--border); background: rgba(var(--accent-rgb), 0.03); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; } .card--flagship { grid-row: span 2; border-color: rgba(var(--accent-rgb), 0.2); background: rgba(var(--accent-rgb), 0.04); padding: 26px; position: relative; overflow: hidden; } .card__shot { height: 300px; border-radius: 7px; border: 1px dashed rgba(var(--accent-rgb), 0.28); background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0 11px, rgba(var(--accent-rgb), 0.02) 11px 22px); display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.12em; color: var(--fg-dim); margin-bottom: 24px; } .card__badges { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .badge { font-size: 11px; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 3px; } .badge--solid { color: var(--ink); background: var(--accent); font-weight: 600; } .badge--warn { color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.5); display: flex; align-items: center; gap: 6px; } .card__title { font-family: "Archivo", sans-serif; font-weight: 800; color: var(--fg-bright); letter-spacing: -0.01em; margin: 0; } .card--flagship .card__title { font-size: 32px; line-height: 1.1; } .card__desc { font-size: 14.5px; line-height: 1.65; color: var(--fg); margin: 14px 0 0; } .card__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .tag { font-size: 11px; color: var(--fg); border: 1px solid var(--border-strong); padding: 4px 9px; border-radius: 3px; } .card__spacer { flex: 1; } .card__link { display: inline-block; align-self: flex-start; margin-top: 24px; font-size: 13px; letter-spacing: 0.06em; color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.5); padding-bottom: 3px; } .card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .card__price { text-align: right; } .card__amount { font-size: 26px; font-weight: 600; color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); line-height: 1; } .card__period { font-size: 10px; letter-spacing: 0.1em; color: var(--fg-dim); } .card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .card__wide-main { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .card__wide-main .card__title { font-size: 21px; white-space: nowrap; } .card__wide-main .card__desc { margin-top: 0; font-size: 13.5px; } .card__wide-side { display: flex; align-items: center; gap: 18px; flex: none; flex-wrap: wrap; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero__main { border-right: none; border-bottom: 1px solid rgba(var(--accent-rgb), 0.1); padding: 44px 24px; } .hero__panel { padding: 24px; } .previously { padding: 24px 24px 0; } .projects { padding: 40px 24px 48px; } .projects__grid { grid-template-columns: 1fr; } .card--flagship { grid-row: auto; } .card--wide { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .crt, .dot, .dot--warn, .cursor, .crt.is-degaussing { animation: none; } }