/* ─────────────────────────────────────────────────────────────────── * Console — live prototype stylesheet * * All theme values live in CSS custom properties — flipping * [data-theme] on swaps every surface, hairline and text colour * in one go, and the accent comes off [data-accent] so the Tweaks * panel can re-tint the whole site without touching the DOM. * ─────────────────────────────────────────────────────────────────── */ :root { --sans: "Geist", "Inter Tight", -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace; /* defaults — overridden per theme below */ color-scheme: dark; --bg: oklch(0.07 0.005 145); --bg-grid: oklch(0.10 0.008 145); --surface: oklch(0.11 0.012 145); --surface-hi: oklch(0.14 0.014 145); --hairline: oklch(0.30 0.020 145 / 0.25); --hairline-hi:oklch(0.40 0.022 145 / 0.45); --fg: oklch(0.94 0.020 145); --fg-muted: oklch(0.68 0.025 145); --fg-dim: oklch(0.56 0.020 145); /* syntax-highlighting palette — used in code blocks + frontmatter */ --syn-key: oklch(0.78 0.20 0); /* pink */ --syn-str: oklch(0.84 0.16 75); /* amber */ --syn-num: oklch(0.85 0.13 210); /* cyan */ --syn-com: oklch(0.56 0.020 145); /* dim */ /* accent — replaced by data-accent + data-theme block below */ --accent: oklch(0.90 0.22 148); --accent-on: oklch(0.08 0.02 148); /* foreground on top of accent */ --accent-soft: oklch(0.90 0.22 148 / 0.10); --accent-glow: oklch(0.90 0.22 148 / 0.55); --accent-shadow: 0 0 22px oklch(0.90 0.22 148 / 0.45); /* glow filter for accent icons — toggled off in light theme */ --glow: drop-shadow(0 0 5px var(--accent-glow)); --text-glow: 0 0 16px var(--accent-glow); } /* ── LIGHT — terminal-on-paper, dark forest green on warm off-white ── */ :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.96 0.014 95); --bg-grid: oklch(0.92 0.018 95); --surface: oklch(0.94 0.016 95); --surface-hi: oklch(0.89 0.018 95); --hairline: oklch(0.40 0.05 148 / 0.18); --hairline-hi:oklch(0.30 0.07 148 / 0.35); --fg: oklch(0.28 0.07 148); --fg-muted: oklch(0.40 0.06 148); --fg-dim: oklch(0.50 0.05 148); --syn-key: oklch(0.42 0.18 350); --syn-str: oklch(0.48 0.16 35); --syn-num: oklch(0.42 0.18 240); --syn-com: oklch(0.54 0.04 148); --glow: none; --text-glow: none; } /* ── ACCENTS — per theme, since neon glow needs to dial back on paper ── */ :root[data-accent="mint"] { --accent: oklch(0.90 0.22 148); --accent-on: oklch(0.08 0.02 148); --accent-soft: oklch(0.90 0.22 148 / 0.10); --accent-glow: oklch(0.90 0.22 148 / 0.55); } :root[data-accent="blue"] { --accent: oklch(0.78 0.18 235); --accent-on: oklch(0.10 0.02 235); --accent-soft: oklch(0.78 0.18 235 / 0.10); --accent-glow: oklch(0.78 0.18 235 / 0.55); } :root[data-accent="magenta"] { --accent: oklch(0.78 0.22 330); --accent-on: oklch(0.10 0.02 330); --accent-soft: oklch(0.78 0.22 330 / 0.10); --accent-glow: oklch(0.78 0.22 330 / 0.55); } :root[data-accent="amber"] { --accent: oklch(0.85 0.18 75); --accent-on: oklch(0.10 0.02 75); --accent-soft: oklch(0.85 0.18 75 / 0.10); --accent-glow: oklch(0.85 0.18 75 / 0.55); } :root[data-theme="light"][data-accent="mint"] { --accent: oklch(0.50 0.18 148); --accent-on: oklch(0.97 0.02 148); --accent-soft: oklch(0.50 0.18 148 / 0.10); --accent-glow: oklch(0.50 0.18 148 / 0.30); } :root[data-theme="light"][data-accent="blue"] { --accent: oklch(0.45 0.20 240); --accent-on: oklch(0.97 0.02 240); --accent-soft: oklch(0.45 0.20 240 / 0.10); --accent-glow: oklch(0.45 0.20 240 / 0.30); } :root[data-theme="light"][data-accent="magenta"] { --accent: oklch(0.50 0.22 340); --accent-on: oklch(0.97 0.02 340); --accent-soft: oklch(0.50 0.22 340 / 0.10); --accent-glow: oklch(0.50 0.22 340 / 0.30); } :root[data-theme="light"][data-accent="amber"] { --accent: oklch(0.55 0.16 60); --accent-on: oklch(0.97 0.02 60); --accent-soft: oklch(0.55 0.16 60 / 0.10); --accent-glow: oklch(0.55 0.16 60 / 0.30); } /* ── BASE ──────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; transition: background 320ms ease, color 320ms ease; min-height: 100vh; } /* Tracks mouse position; cursor-highlight + ambient hover effects read it. */ body { --mx: 50%; --my: 30%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, textarea { font: inherit; color: var(--fg); background: transparent; border: 0; outline: 0; } input::placeholder, textarea::placeholder { color: var(--fg-dim); opacity: 1; } ::selection { background: var(--accent); color: var(--accent-on); } /* The grid + scanline are painted on a fixed body::before so they stay behind every page even during transitions. The grid intensifies near the cursor via a radial mask centered on --mx/--my. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(280px circle at var(--mx) var(--my), var(--accent-soft), transparent 75%), linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / 48px 48px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 95%); opacity: .7; transition: opacity 320ms ease; } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, var(--bg-grid) 2px 3px); opacity: .18; } :root[data-theme="light"] body::after { opacity: 0; } :root[data-theme="light"] body::before { opacity: .4; } /* ── LAYOUT WRAPPERS ───────────────────────────────────────────────── */ .app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* Padding split into axis-specific properties so .section (vertical) and * .page (horizontal) compose instead of overwriting each other. The * shorthand `padding` form has same specificity for both rules and the * later one would win — separating them by axis avoids that footgun. */ .page { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 56px; padding-right: 56px; } .section { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--hairline); } .section:first-of-type { border-top: 0; } @media (max-width: 880px) { .page { padding-left: 24px; padding-right: 24px; } .section { padding-top: 40px; padding-bottom: 40px; } } @media (max-width: 520px) { /* phones — pull right to the edges, content fits */ .page { padding-left: 10px; padding-right: 10px; } .section { padding-top: 32px; padding-bottom: 32px; } } /* ── TYPE ──────────────────────────────────────────────────────────── */ .mono { font-family: var(--mono); } .sans { font-family: var(--sans); } .dim { color: var(--fg-dim); } .muted{ color: var(--fg-muted); } .fg { color: var(--fg); } .accent { color: var(--accent); } .accent-glow { color: var(--accent); text-shadow: var(--text-glow); } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; } .display { font-family: var(--sans); font-size: clamp(40px, 7vw, 96px); line-height: 0.96; letter-spacing: -0.03em; } .h1 { font-family: var(--sans); font-size: clamp(32px, 4.5vw, 56px); line-height: 1.02; letter-spacing: -0.02em; } .h2 { font-family: var(--sans); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.015em; } .body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--fg-muted); } .body-lg { font-family: var(--sans); font-size: 19px; line-height: 1.55; color: var(--fg-muted); } .body-mono { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--fg-muted); } /* Section label — mono, uppercase, accent number prefix */ .label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); } .label .label-no { color: var(--accent); } .label .label-rule{ width: 24px; height: 1px; background: var(--hairline-hi); } /* ── PROMPT LINE ──────────────────────────────────────────────────── */ .prompt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; /* cmd drops to a 2nd line on narrow */ font-family: var(--mono); font-size: 14px; line-height: 1.7; word-break: break-word; /* very long cmds break cleanly */ } .prompt-prefix { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; /* tim@dev:path$ stays one unit */ min-width: 0; } .prompt .p-user { color: var(--fg-dim); } .prompt .p-path { color: var(--syn-num); } .prompt .p-mark { color: var(--accent); font-weight: 600; } .prompt .p-cmd { color: var(--fg); min-width: 0; } @media (max-width: 520px) { /* On phones, force the cmd onto its own row by taking 100% width after the prefix. Reads like a real two-line terminal prompt. */ .prompt { gap: 4px 8px; font-size: 13px; } .prompt .p-cmd { flex-basis: 100%; padding-left: 14px; } .prompt-prefix { font-size: 12px; } } .cursor { display: inline-block; width: 8px; height: 14px; background: var(--accent); box-shadow: var(--accent-shadow); transform: translateY(2px); animation: blink 1.1s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── SURFACES + CARDS ─────────────────────────────────────────────── */ .surface { background: var(--surface); border: 1px solid var(--hairline-hi); } .surface-hi { background: var(--surface-hi); } /* File-window chrome — title strip + body */ .file { background: var(--surface); border: 1px solid var(--hairline-hi); } .file-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--hairline); background: var(--surface-hi); font-family: var(--mono); font-size: 12px; color: var(--fg-muted); } .file-head .glyph { color: var(--accent); } .file-head .sep { color: var(--fg-dim); } .file-foot { border-top: 1px solid var(--hairline); padding: 12px 18px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); } /* Card — lift + glow on hover, reveals a "// comment" line. */ .card { background: var(--surface); border: 1px solid var(--hairline-hi); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; position: relative; } .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 36px rgba(0,0,0,.25), 0 0 0 1px var(--accent-soft), 0 0 24px var(--accent-glow); } .card .reveal { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease; } .card:hover .reveal { max-height: 60px; opacity: 1; } /* Generic clickable list-row with the same hover energy */ .row { display: grid; align-items: center; border-bottom: 1px solid var(--hairline); padding: 12px 18px; transition: background .15s ease, color .15s ease; cursor: pointer; } .row:hover { background: var(--accent-soft); } .row:hover .row-name { color: var(--accent); text-shadow: var(--text-glow); } .row:last-child { border-bottom: 0; } /* ── BUTTONS ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 0; cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; background: transparent; color: var(--fg); transition: transform .15s ease, box-shadow .25s ease, background .15s ease; } .btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: 0 0 0 1px var(--accent), 0 0 22px var(--accent-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 0 36px var(--accent-glow); } .btn-ghost { border: 1px solid var(--hairline-hi); background: transparent; color: var(--fg); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ── KBD ──────────────────────────────────────────────────────────── */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--hairline-hi); background: var(--bg); color: var(--accent); font-family: var(--mono); font-size: 11px; } /* ── BADGES + CHIPS ───────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--hairline-hi); color: var(--fg-muted); background: var(--bg); transition: color .15s ease, border-color .15s ease, background .15s ease; cursor: pointer; } .chip:hover { color: var(--accent); border-color: var(--accent); } .chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } /* ── FRONTMATTER block (yaml-ish) ─────────────────────────────────── */ .frontmatter { padding: 14px 18px; border: 1px solid var(--hairline); background: var(--bg); font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--fg-muted); } .frontmatter .fm-sep { color: var(--fg-dim); } .frontmatter .fm-k { color: var(--syn-key); } .frontmatter .fm-s { color: var(--syn-str); } .frontmatter .fm-n { color: var(--syn-num); } /* ── CODE BLOCK ───────────────────────────────────────────────────── */ .code { padding: 20px; border: 1px solid var(--hairline-hi); background: var(--bg); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; } .code .tk-k { color: var(--syn-key); } .code .tk-s { color: var(--syn-str); } .code .tk-n { color: var(--syn-num); } .code .tk-c { color: var(--syn-com); } .code .tk-r { color: var(--accent); } /* ── FORM FIELD ───────────────────────────────────────────────────── */ .field { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hairline); } .field-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); padding-top: 4px; } .field-input { font-family: var(--sans); font-size: 15px; color: var(--fg); line-height: 1.55; } .field-input.multiline { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; } /* ── NAV ──────────────────────────────────────────────────────────── */ .nav-shell { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav-bar1 { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--hairline); } .nav-lights { display: flex; gap: 6px; } .nav-lights span { width: 10px; height: 10px; border-radius: 50%; opacity: .7; } .nav-lights span:nth-child(1) { background: oklch(0.78 0.20 0); } .nav-lights span:nth-child(2) { background: oklch(0.84 0.16 75); } .nav-lights span:nth-child(3) { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .nav-title { flex: 1; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); letter-spacing: 0.05em; } .nav-meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-muted); } .nav-bar2 { display: flex; align-items: stretch; height: 38px; } .tab { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--hairline); background: transparent; color: var(--fg-dim); font-family: var(--mono); font-size: 12px; cursor: pointer; position: relative; transition: background .15s ease, color .15s ease; } .tab:hover { color: var(--fg); } .tab .glyph { color: var(--accent); font-size: 14px; } .tab.active { background: var(--surface); color: var(--fg); } .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .tab .x { color: var(--fg-dim); margin-left: 6px; opacity: 0; transition: opacity .15s; } .tab:hover .x { opacity: 1; } .tab-spacer { flex: 1; border-bottom: 1px solid var(--hairline); } .tab-tools { display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; color: var(--fg-dim); } .tab-tools .sep { width: 1px; height: 12px; background: var(--hairline-hi); } .theme-toggle { display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--hairline-hi); background: var(--surface); font-family: var(--mono); font-size: 11px; } .theme-toggle button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim); background: transparent; border: 0; cursor: pointer; } .theme-toggle button.is-on { background: var(--accent-soft); color: var(--accent); } /* ── STATUS BAR (bottom) ─────────────────────────────────────────── */ .status { border-top: 1px solid var(--hairline-hi); background: var(--surface); padding: 8px 22px; display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--fg-muted); } .status > * { white-space: nowrap; } .status .dim { color: oklch(0.62 0.020 145); } [data-theme="light"] .status .dim { color: oklch(0.46 0.05 148); } .status .pill { background: var(--accent); color: var(--accent-on); padding: 3px 10px; font-weight: 600; letter-spacing: 0.05em; } .grecaptcha-badge { transform: translateY(-40px) !important; } /* ── CURSOR HIGHLIGHT (mouse-tracked spotlight, distinct from grid) ─ */ /* implemented inline on body::before above via --mx/--my */ /* ── PAGE TRANSITION ─────────────────────────────────────────────── */ .transition-overlay { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 18px; color: var(--accent); text-shadow: var(--text-glow); } .transition-overlay.fading-in { animation: tover-in 220ms ease forwards; } .transition-overlay.fading-out { animation: tover-out 220ms ease forwards; } @keyframes tover-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tover-out { from { opacity: 1; } to { opacity: 0; } } .page-wrapper { animation: page-in 320ms ease both; } @keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── COMMAND PALETTE ─────────────────────────────────────────────── */ .palette-scrim { position: fixed; inset: 0; z-index: 90; background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; animation: page-in 160ms ease; } .palette { width: 560px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--hairline-hi); box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px var(--accent-soft); } .palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); } .palette-input .p-mark { color: var(--accent); font-weight: 600; } .palette-input input { flex: 1; color: var(--fg); font-size: 15px; } .palette-list { max-height: 380px; overflow-y: auto; padding: 6px; } .palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; font-family: var(--mono); font-size: 13px; } .palette-item .p-glyph { color: var(--accent); width: 18px; text-align: center; } .palette-item .p-label { flex: 1; color: var(--fg); } .palette-item .p-hint { color: var(--fg-dim); font-size: 11px; } .palette-item.selected { background: var(--accent-soft); color: var(--accent); } .palette-item.selected .p-label { color: var(--accent); } .palette-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; color: var(--fg-dim); } /* ── PROJECT-CARD PREVIEW (used on portfolio grid + home) ─────────── */ .preview { position: relative; overflow: hidden; } .preview .browser { position: absolute; top: 28px; left: 28px; right: 28px; bottom: 0; background: oklch(0.96 0.005 250); box-shadow: 0 20px 40px rgba(0,0,0,.4); } :root[data-theme="light"] .preview .browser { background: oklch(0.99 0.003 95); } .preview-tint-sage { background: oklch(0.86 0.10 148); } .preview-tint-plum { background: oklch(0.55 0.13 340); } .preview-tint-sand { background: oklch(0.82 0.07 80); } .preview-tint-indigo { background: oklch(0.60 0.14 260); } .preview-tint-rust { background: oklch(0.65 0.14 40); } .preview-tint-steel { background: oklch(0.70 0.04 230); } .preview-tint-amber { background: oklch(0.82 0.14 75); } .preview-tint-coral { background: oklch(0.72 0.15 20); } .preview-tint-violet { background: oklch(0.65 0.16 300); } /* ── PLACEHOLDER (when no real image yet) ────────────────────────── */ .ph { display: flex; align-items: center; justify-content: center; color: var(--fg-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: lowercase; user-select: none; background-image: repeating-linear-gradient(45deg, var(--hairline) 0 1px, transparent 1px 14px); } .ph span { padding: 4px 10px; } :root[data-theme="light"] .ph { background-image: repeating-linear-gradient(45deg, oklch(0.30 0.07 148 / 0.10) 0 1px, transparent 1px 14px); } /* ── TRANSITIONS for theme + accent ──────────────────────────────── */ /* Most colour properties live on CSS vars — a transition on the * root means the whole document fades between themes instead of * snapping. */ :root, body, .surface, .file, .card, .nav-shell, .status, .btn, .chip, .tab, .palette { transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; } /* ── RESPONSIVE ──────────────────────────────────────────────────── */ /* The desktop design uses fixed two-column layouts in many places * (hero, contact, project meta strip). On tablet we tighten paddings; * on phones we collapse to single column, swap the ASCII wordmark * for a compact one, and trim chrome that doesn't earn its space. */ .show-mobile { display: none !important; } .compact-wordmark { display: none; } @media (max-width: 1100px) { .hero-row { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 32px !important; } } @media (max-width: 880px) { /* nav: drop the centered title (window-chrome flavour) and the help shortcut — keeps the bar clean and the search icon discoverable */ .nav-title { display: none; } .tab-tools { padding: 0 14px; gap: 10px; } .tab-tools .sep { display: none; } .tab-tools > *:nth-child(n+3) { display: none; } /* hero — stack content over status panel */ .hero-row { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } .ascii-wordmark { display: none; } .compact-wordmark { display: block; } /* about — drop the line-number gutter, ease padding */ .about-grid { grid-template-columns: 1fr !important; } .about-linenos { display: none; } .about-body { padding: 24px 22px !important; } /* skills ls table — drop two columns at narrow widths */ .ls-table { grid-template-columns: 100px 1fr !important; column-gap: 16px !important; } .ls-table .ls-perms, .ls-table .ls-size { display: none; } /* contact + sidebar — stack */ .contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* portfolio listing — hide stack column on narrow */ .listing-row { grid-template-columns: 36px 1fr 80px 64px !important; gap: 12px !important; } .listing-row .col-stack { display: none; } .listing-name .listing-tag { margin-left: 12px; } /* portfolio cards: smaller min so they don't blow out the row */ .portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; } /* project gallery — single column on small screens */ .gallery-grid { grid-template-columns: 1fr !important; } /* prev/next — still side-by-side but smaller */ .prevnext-grid { gap: 12px !important; } .prevnext-grid .card .sans { font-size: 16px !important; } .prevnext-grid .card { padding: 14px 16px !important; } /* status bar — drop secondary items on narrow */ .status .status-aux { display: none; } .status { gap: 10px; padding: 8px 16px; font-size: 10px; } /* form fields stack label over input */ .field { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; } .field-label { padding-top: 0; } /* huge displays scale down */ .display { font-size: clamp(36px, 9vw, 64px); } .h1 { font-size: clamp(28px, 6vw, 44px); } .h2 { font-size: clamp(20px, 4vw, 28px); } /* tighter section gap on home */ .hero-section { padding-top: 28px !important; } /* portfolio CTA — stack heading + button */ .cta-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .cta-row .btn { width: 100%; justify-content: center; } /* hide-mobile classes */ .hide-mobile { display: none !important; } .show-mobile { display: inline-flex !important; } .show-mobile.block { display: block !important; } /* code block: stays scrollable horizontally, smaller font */ .code { font-size: 11.5px; padding: 14px; } /* hero CTAs — make primary stretch */ .hero-ctas { width: 100%; } .hero-ctas .btn { flex: 1; justify-content: center; } /* compact-wordmark — block letterform we swap in for the ASCII */ .compact-wordmark { font-family: var(--mono); font-size: clamp(36px, 11vw, 56px); line-height: 1; color: var(--accent); text-shadow: var(--text-glow); letter-spacing: -0.02em; margin: 8px 0 0; } .compact-wordmark .slash { color: var(--fg-dim); margin: 0 6px; } } /* Phones-and-under: drop file-window inner padding more aggressively */ @media (max-width: 520px) { .nav-bar1 { padding: 10px 14px; gap: 10px; } .nav-bar2 .tab { padding: 0 12px; font-size: 11px; } .file-head { padding: 8px 12px; font-size: 11px; gap: 8px; flex-wrap: wrap; } .file-head .file-head-meta { display: none; } .file-foot { padding: 10px 12px; font-size: 11px; gap: 8px; flex-wrap: wrap; } .about-body { padding: 18px 14px !important; } .project-body { padding: 20px 14px 28px !important; } .listing-row { padding: 10px 12px; font-size: 12px; gap: 10px; } .preview { height: 220px !important; } /* portfolio listing on phone — drop YEAR col too, let NAME stretch, and stack the tag below the slug so long names breathe */ .listing-row { grid-template-columns: 28px 1fr 56px !important; gap: 8px !important; } .listing-row .col-year { display: none; } .listing-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .listing-name .listing-tag { margin-left: 18px; /* aligns with name (past the ▸) */ font-size: 10.5px; letter-spacing: 0.04em; } /* status bar — drop the location string entirely, ultra-compact */ .status { gap: 8px; padding: 6px 10px; font-size: 10px; } .status .status-loc { display: none; } .status .pill { padding: 2px 8px; font-size: 10px; } /* portfolio cards single column on phone */ .portfolio-grid { grid-template-columns: 1fr !important; } } /* hide vertical scrollbars inside artboards on the design canvas */ .dc-card * { scrollbar-width: none; } .dc-card *::-webkit-scrollbar { display: none; } /* ── LIGHTBOX ────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 100; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); display: flex; flex-direction: column; animation: page-in 160ms ease; } .lightbox-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--hairline); background: var(--surface); flex-shrink: 0; } .lightbox-close { background: transparent; border: 0; cursor: pointer; color: inherit; padding: 0; transition: transform 120ms; } .lightbox-close:hover .kbd { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .lightbox-close:hover { transform: scale(1.08); } .lightbox-body { flex: 1; display: flex; align-items: stretch; overflow: hidden; position: relative; } .lightbox-arrow { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--fg-dim); transition: color 160ms, background 160ms; } .lightbox-arrow:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, transparent); } .lightbox-arrow span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--hairline-hi); border-radius: 4px; background: var(--surface); } .lightbox-arrow:hover span { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .lightbox-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; } .lightbox-scroll img { max-width: 1200px; width: 100%; margin: 0 auto; display: block; border: 1px solid var(--hairline-hi); box-shadow: 0 24px 80px rgba(0,0,0,.4); } @media (max-width: 880px) { .lightbox-scroll { padding: 16px; } .lightbox-scroll img { max-width: 100%; } .lightbox-chrome .dim:not(:first-child) { display: none; } .lightbox-arrow { width: 40px; } .lightbox-arrow span { width: 30px; height: 30px; font-size: 16px; } }