/* Depth mode — a Z-axis variation of the portfolio. The document is a readable, flat page by default. depth.js adds .is-depth to and only then does the camera, the 3D stage, and the HUD exist. */ :root { color-scheme: dark; --bg: #05070d; --void: #02040a; --panel: rgba(13, 22, 38, .88); --panel-solid: #0b111c; --text: #ffffff; --muted: #9aa7bd; --subtle: #6b7a94; --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .22); --accent: #0d94fb; --fill: #0b6fd0; --accent-ink: #ffffff; --accent-dim: rgba(13, 148, 251, .14); --font: 'Space Grotesk', Arial, sans-serif; --mono: 'IBM Plex Mono', Consolas, monospace; --radius: 14px; --enter: 1; } * { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; } h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .96; letter-spacing: -.045em; } h2 { font-size: clamp(1.85rem, 4.3vw, 3.3rem); line-height: 1.04; } h3 { font-size: 1.0625rem; letter-spacing: -.01em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } ::selection { background: var(--fill); color: var(--accent-ink); } .accent { color: var(--accent); } .muted { color: var(--subtle); } .dim { color: var(--subtle); } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--fill); color: var(--accent-ink); font: 500 .85rem/1 var(--mono); text-decoration: none; transform: translateY(-160%); } .skip-link:focus-visible { transform: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------- content */ .eyebrow { font: 500 clamp(.66rem, 1.05vw, .74rem)/1.5 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: var(--subtle); display: flex; align-items: center; gap: .55em; flex-wrap: wrap; margin-bottom: clamp(.9rem, 2vh, 1.4rem); } .eyebrow i { font-style: normal; color: var(--accent); opacity: .8; } .eyebrow .cross { color: var(--accent); font-size: 1.1em; } .eyebrow .pnum { color: var(--accent); } .eyebrow .pnum::before { content: '/'; margin-right: .55em; color: var(--subtle); } .lede { font-size: clamp(1rem, 1.55vw, 1.24rem); line-height: 1.62; color: var(--muted); max-width: 46ch; margin-top: clamp(1rem, 2.4vh, 1.75rem); } .body { font-size: clamp(.95rem, 1.25vw, 1.05rem); line-height: 1.68; color: var(--muted); max-width: 62ch; margin-top: clamp(.9rem, 2vh, 1.35rem); } .body strong { color: var(--text); font-weight: 500; } .footnote { margin-top: clamp(1rem, 2.2vh, 1.6rem); font: 400 .78rem/1.55 var(--mono); color: var(--subtle); max-width: 58ch; } .notes { margin-top: clamp(1rem, 2.2vh, 1.5rem); display: grid; gap: .65rem; } .notes li { position: relative; padding-left: 1.5rem; font-size: clamp(.9rem, 1.15vw, .98rem); line-height: 1.6; color: var(--muted); max-width: 62ch; } .notes li::before { content: ''; position: absolute; left: 0; top: .62em; width: .55rem; height: 1px; background: var(--accent); opacity: .75; } .notes strong { color: var(--text); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: clamp(1rem, 2.2vh, 1.5rem); } .chips li { padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px; font: 400 .76rem/1 var(--mono); color: var(--muted); background: rgba(255, 255, 255, .03); white-space: nowrap; } .chips-lg { gap: .6rem; } .chips-lg li { padding: .7rem 1.15rem; font-size: clamp(.8rem, 1.2vw, .95rem); border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, .045); } .mono-strip { margin-top: clamp(1rem, 2.2vh, 1.5rem); display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1.05rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 8, 16, .6); font: 400 clamp(.78rem, 1.1vw, .9rem)/1.4 var(--mono); color: var(--text); } .mono-strip .prompt, .mono-strip .glyph { color: var(--accent); } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 .92rem/1 var(--font); text-decoration: none; cursor: pointer; background: transparent; color: var(--text); transition: background .2s, color .2s, border-color .2s, transform .2s; } .btn-primary { background: var(--fill); border-color: var(--fill); color: var(--accent-ink); } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.2rem, 3vh, 2rem); } .project-copy .btn { margin-top: clamp(1.2rem, 2.6vh, 1.8rem); } .text-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font: 500 .9rem/1 var(--font); color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(13, 148, 251, .35); padding-bottom: 3px; } .text-link:hover { border-color: var(--accent); } .ingress-meta { display: flex; align-items: center; gap: .8rem; margin-top: clamp(1.2rem, 2.8vh, 1.9rem); font-size: .9rem; line-height: 1.5; color: var(--muted); } .ingress-meta strong { color: var(--text); font-weight: 500; } .avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--accent-dim); color: var(--accent); font: 500 .78rem/1 var(--mono); letter-spacing: .06em; } .ghost-mark, .ghost-num { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 600 clamp(12rem, 34vw, 30rem)/1 var(--font); color: rgba(255, 255, 255, .028); letter-spacing: -.06em; pointer-events: none; user-select: none; z-index: -1; } .ghost-num { font-family: var(--mono); font-size: clamp(11rem, 30vw, 26rem); } /* metrics */ .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); margin-top: clamp(1.4rem, 3vh, 2.4rem); } .metric-card { padding: clamp(1.2rem, 2.6vw, 1.9rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: .5rem; } .metric-value { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; } .metric-value i { font-style: normal; color: var(--accent); } .metric-label { font-size: clamp(.85rem, 1.1vw, .95rem); line-height: 1.45; color: var(--text); } .metric-note { font: 400 .74rem/1.4 var(--mono); color: var(--subtle); } /* pipeline branch */ .branch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.3rem); margin-top: clamp(1.4rem, 3vh, 2.2rem); } .branch-card { padding: clamp(1.1rem, 2.2vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: .6rem; } .branch-icon { width: 26px; height: 26px; color: var(--accent); } .branch-icon svg { width: 100%; height: 100%; } .branch-card p { font-size: .92rem; line-height: 1.55; color: var(--muted); } .branch-tech { margin-top: auto; font: 400 .73rem/1.4 var(--mono); color: var(--subtle); } /* stack */ .stack-sub { margin-top: .7rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--muted); } .plane-stack h2 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); letter-spacing: -.045em; } /* work index */ .work-index { margin-top: clamp(1.4rem, 3vh, 2.2rem); border-top: 1px solid var(--line); } .work-index li { border-bottom: 1px solid var(--line); } .work-index button { width: 100%; display: grid; align-items: center; gap: 1rem; grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.4rem; padding: clamp(.7rem, 1.5vh, 1rem) .4rem; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font-family: var(--font); transition: background .18s, padding .18s; } .work-index button:hover { background: rgba(255, 255, 255, .04); padding-left: .9rem; } .wi-num { font: 400 .8rem/1 var(--mono); color: var(--accent); } .wi-name { font-size: clamp(1rem, 1.9vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; } .wi-cat { font: 400 .76rem/1 var(--mono); color: var(--subtle); text-transform: uppercase; letter-spacing: .1em; } .wi-go { color: var(--subtle); text-align: right; } .work-index button:hover .wi-go { color: var(--accent); } /* projects */ .project-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; } .project-visual { display: flex; flex-direction: column; gap: .6rem; } .viz { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, rgba(14, 26, 44, .85), rgba(6, 11, 20, .9)); padding: 0 0 .9rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); } .viz-bar { display: flex; align-items: center; gap: .5rem; justify-content: space-between; padding: .6rem .85rem; border-bottom: 1px solid var(--line); font-size: .72rem; letter-spacing: .06em; color: var(--subtle); background: rgba(0, 0, 0, .25); } .viz .pill { padding: .18rem .45rem; border: 1px solid var(--line); border-radius: 4px; font-size: .62rem; letter-spacing: .1em; color: var(--accent); } .viz-line { padding: .55rem .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .viz-line .prompt { color: var(--accent); } .viz-line.dim { color: var(--subtle); } .viz-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; padding: .34rem .85rem; } .viz-row span:first-child { color: var(--subtle); } .viz-row.on { background: var(--accent-dim); color: var(--accent); border-left: 2px solid var(--accent); padding-left: calc(.85rem - 2px); } .viz-label { font: 400 .64rem/1 var(--mono); letter-spacing: .16em; color: var(--subtle); text-transform: uppercase; } .caret { display: inline-block; width: 7px; height: 1em; margin-left: .3rem; background: var(--accent); vertical-align: -.15em; animation: blink 1.15s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .csv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: .7rem .85rem; background: var(--line); border: 1px solid var(--line); } .csv-grid span { background: rgba(4, 8, 16, .7); padding: .4rem .55rem; font-size: .72rem; } .csv-grid span:nth-child(-n+3) { color: var(--accent); letter-spacing: .06em; } .viz-map { display: flex; flex-direction: column; align-items: center; padding: 1.3rem .85rem 1.4rem; gap: 0; } .map-node { padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(4, 8, 16, .7); font-size: .74rem; color: var(--text); } .map-node.hot { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .map-link { width: 1px; height: 20px; background: linear-gradient(var(--line-strong), var(--accent)); } .map-split { display: flex; gap: .7rem; margin-top: 0; } .map-caption { margin-top: 1.1rem; font-size: .64rem; letter-spacing: .18em; color: var(--subtle); } .viz-chart svg { display: block; width: 100%; height: auto; padding: .6rem .5rem 0; } .c-grid { stroke: var(--line); stroke-width: 1; } .c-band { fill: rgba(13, 148, 251, .06); } .c-line { stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; fill: none; } .c-dot { fill: #05070d; stroke: var(--accent); stroke-width: 2.5; } .viz-legend { display: flex; gap: 1rem; padding: .5rem .85rem 0; font-size: .68rem; color: var(--subtle); } .viz-legend i { display: inline-block; width: 10px; height: 2px; background: var(--accent); vertical-align: .25em; margin-right: .35rem; } .viz-legend .k-ano { width: 7px; height: 7px; border-radius: 50%; background: none; border: 2px solid var(--accent); vertical-align: 0; } .ex-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.1rem 0 .9rem; } .ex-doc { width: 34px; height: 44px; border: 1px solid var(--line-strong); border-radius: 3px; background: repeating-linear-gradient(rgba(255, 255, 255, .16) 0 1px, transparent 1px 6px) center / 22px 30px no-repeat, rgba(4, 8, 16, .7); } .ex-arrow { color: var(--accent); } .ex-json { font-size: 1.3rem; color: var(--accent); } .ex-row { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem .85rem; font-size: .74rem; } .ex-row span:first-child { color: var(--subtle); } .viz-chat { padding-bottom: .4rem; } .bubble { margin: .55rem .85rem; padding: .5rem .75rem; border-radius: 10px; font-size: .76rem; line-height: 1.45; max-width: 82%; } .bubble.user { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); margin-left: auto; } .bubble.bot { background: var(--accent-dim); border: 1px solid rgba(13, 148, 251, .3); color: var(--text); } /* open agents */ .viz-agents { padding-bottom: .5rem; } .ag-box { margin: .6rem .85rem 0; padding: .55rem .7rem; border-radius: 7px; border: 1px solid var(--line); background: rgba(4, 8, 16, .7); display: flex; flex-direction: column; gap: .35rem; } .ag-box.hot { border-color: rgba(13, 148, 251, .5); background: var(--accent-dim); } .ag-title { font-size: .68rem; letter-spacing: .12em; color: var(--subtle); } .ag-box.hot .ag-title { color: var(--accent); } .ag-note { font-size: .7rem; color: var(--muted); } .ag-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .ag-chips i { font-style: normal; padding: .15rem .38rem; border-radius: 3px; font-size: .66rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); } .ag-wire { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .45rem 0 .1rem; font-size: .68rem; color: var(--subtle); } .ag-wire b { color: var(--accent); font-weight: 400; } .ag-rail { width: 42px; height: 1px; background: var(--line-strong); } /* hierarchical document parsing */ .viz-doc { padding-bottom: .5rem; } .doc-node { display: flex; align-items: center; gap: .45rem; margin: .45rem .85rem 0; padding: .34rem .55rem; border: 1px dashed transparent; border-radius: 4px; font-size: .74rem; color: var(--muted); } .doc-node.boxed { border-color: rgba(13, 148, 251, .55); background: var(--accent-dim); color: var(--accent); } .doc-node.lvl2 { margin-left: 2rem; color: var(--subtle); } .doc-tag, .doc-branch { color: var(--subtle); flex: none; } .doc-node.boxed .doc-tag { color: var(--accent); } .viz-line b { color: var(--accent); font-weight: 400; } /* project credit line + award tier chip */ .credit { margin-top: clamp(.8rem, 1.8vh, 1.15rem); font: 400 .76rem/1.7 var(--mono); color: var(--subtle); max-width: 58ch; } .credit-tag { display: inline-block; margin-right: .55rem; padding: .12rem .45rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .04); letter-spacing: .1em; color: var(--muted); } .credit a { color: var(--muted); border-bottom: 1px solid var(--line); text-decoration: none; } .credit a:hover { color: var(--accent); border-color: var(--accent); } .card strong .tier { display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border: 1px solid rgba(13, 148, 251, .45); border-radius: 3px; background: var(--accent-dim); font: 400 .66rem/1.5 var(--mono); letter-spacing: .1em; color: var(--accent); } /* experience */ .role-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .badge { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; color: var(--accent); border: 1px solid rgba(13, 148, 251, .35); border-radius: 999px; padding: .4rem .75rem; } .company { margin-top: .6rem; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text); } .timeline { margin-top: clamp(1.3rem, 3vh, 2rem); display: grid; gap: 0; border-top: 1px solid var(--line); } .timeline li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.2rem; padding: clamp(.85rem, 1.9vh, 1.25rem) 0; border-bottom: 1px solid var(--line); } .tl-date { font: 500 .74rem/1.6 var(--mono); letter-spacing: .1em; color: var(--accent); } .timeline h3 { font-weight: 500; } .timeline h3 .muted { font-weight: 400; font-size: .95em; } .timeline p { margin-top: .35rem; font-size: .9rem; line-height: 1.55; color: var(--muted); max-width: 62ch; } /* about */ .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); margin-top: clamp(1rem, 2.4vh, 1.6rem); } .about-cards { display: grid; gap: .9rem; align-content: start; } .card { display: flex; gap: .9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .card strong { display: block; font-weight: 500; font-size: .98rem; margin-bottom: .35rem; } .card p { font-size: .88rem; line-height: 1.55; color: var(--muted); } .card-icon { flex: none; width: 22px; height: 22px; color: var(--accent); } .card-icon svg { width: 100%; height: 100%; } .card-icon.glyph { font-size: 1.1rem; line-height: 1; } /* contact */ .contact-row { display: flex; align-items: center; gap: .7rem; margin-top: clamp(1.2rem, 3vh, 2rem); flex-wrap: wrap; } .contact-email { font-size: clamp(1rem, 2.4vw, 1.7rem); font-weight: 500; letter-spacing: -.025em; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: .2rem; word-break: break-word; } .contact-email:hover { color: var(--accent); border-color: var(--accent); } .icon-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--muted); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .socials { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: clamp(1.2rem, 2.6vh, 1.8rem); } .socials a { font: 500 .9rem/1 var(--font); text-decoration: none; color: var(--muted); } .socials a:hover { color: var(--accent); } /* ----------------------------------------------------------- flat default */ .stage { position: relative; } .depthfield, .stage-veil, .scroll-track, .hud { display: none; } .world { display: block; } .plane { position: relative; padding: clamp(3.2rem, 8vh, 6rem) 0; scroll-margin-top: 4.5rem; border-bottom: 1px solid var(--line); } .plane-inner { position: relative; width: min(1120px, 90vw); margin: 0 auto; } .plane:last-child { border-bottom: 0; } .toast { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 120; padding: .7rem 1.1rem; border-radius: 999px; background: var(--fill); color: var(--accent-ink); font: 500 .85rem/1 var(--font); opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; } .toast.on { opacity: 1; translate: -50% -6px; } /* ------------------------------------------------------------- depth mode */ html.is-depth, html.is-depth body { height: 100%; } html.is-depth body { overflow-x: hidden; background: var(--void); } .is-depth .stage { position: fixed; inset: 0; z-index: 1; perspective: 1000px; perspective-origin: 50% 50%; overflow: hidden; background: radial-gradient(120% 80% at 50% 46%, rgba(10, 38, 74, calc(.12 + .5 * var(--enter))), transparent 62%), var(--void); } /* The opening screen is a still 2D page. The chapter rail, the readout and the corridor only arrive once the camera starts moving into the world. */ .is-depth .rail, .is-depth .hud-bottom { opacity: calc(.1 + .9 * var(--enter)); } .is-depth .stage-veil { opacity: calc(.35 + .65 * var(--enter)); } .is-depth .depthfield { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .is-depth .stage-veil { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(78% 62% at 50% 50%, transparent 42%, rgba(7, 8, 6, .78) 100%), linear-gradient(var(--void) 0%, transparent 16%, transparent 84%, var(--void) 100%); } .is-depth .world { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s cubic-bezier(.22, .8, .3, 1); } .is-depth .plane { position: absolute; inset: 0; padding: 0; border: 0; display: grid; place-items: center; transform-style: preserve-3d; pointer-events: none; visibility: hidden; } .is-depth .plane.is-live { visibility: visible; will-change: transform; } .is-depth .plane.is-focus { pointer-events: auto; } .is-depth .plane-inner { width: min(1120px, 86vw); max-height: calc(100vh - 168px); transform-style: preserve-3d; } .is-depth .layer { transform: translateZ(var(--d, 0px)); transform-style: flat; } .is-depth .zgroup { transform-style: preserve-3d; } .is-depth .ghost-mark, .is-depth .ghost-num { z-index: auto; } /* text stays crisp: no blur or partial opacity once a plane settles */ .is-depth .plane.is-focus .layer { filter: none !important; opacity: 1 !important; } .is-depth .scroll-track { display: block; } .is-depth .hud { display: block; } /* ------------------------------------------------------------------- HUD */ .hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; } .hud a, .hud button { pointer-events: auto; } /* top bar + view switcher: present in BOTH depth and flat view, so the visitor can always move between the classic site, depth mode, and the flat page. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(.75rem, 2vh, 1.15rem) clamp(1rem, 3.5vw, 2.4rem); } .topbar-brand { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; font: 600 1.05rem/1 var(--mono); letter-spacing: -.02em; color: var(--text); } .topbar-brand span { color: var(--accent); } .topbar-brand em { font: 400 .68rem/1 var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--subtle); } .viewswitch { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 7, 13, .72); backdrop-filter: blur(10px); } .viewswitch > * { appearance: none; border: 0; cursor: pointer; text-decoration: none; padding: .46rem .85rem; border-radius: 999px; background: transparent; font: 500 .78rem/1 var(--font); color: var(--muted); white-space: nowrap; transition: color .18s, background .18s; } .viewswitch > *:hover { color: var(--text); } .viewswitch > [aria-current="true"], .viewswitch > [aria-pressed="true"] { background: var(--fill); color: #fff; } /* flat view: the bar sits in the flow so it never covers the copy */ html:not(.is-depth) .topbar { position: sticky; background: rgba(5, 7, 13, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* chapter rail */ .rail { position: absolute; right: clamp(.9rem, 2.6vw, 2rem); top: 50%; translate: 0 -50%; } .rail ul { display: grid; gap: .1rem; } .rail button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .42rem .3rem; background: none; border: 0; cursor: pointer; font: 400 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); flex-direction: row-reverse; text-align: right; } .rail button i { flex: none; display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--line-strong); transition: width .28s cubic-bezier(.22, .8, .3, 1), background .28s; } .rail button span { opacity: 0; transition: opacity .25s, color .25s; white-space: nowrap; } .rail:hover button span { opacity: 1; } .rail button:hover i, .rail button:focus-visible i { background: var(--accent); width: 30px; } .rail button[aria-current="true"] i { background: var(--accent); width: 38px; } .rail button[aria-current="true"] { color: var(--text); } .rail button[aria-current="true"] span { opacity: 1; } /* readout */ .hud-bottom { position: absolute; left: 0; bottom: 0; right: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(.9rem, 2.4vh, 1.5rem) clamp(1rem, 3.5vw, 2.4rem) clamp(1.1rem, 2.8vh, 1.7rem); } .readout { display: grid; gap: .3rem; font-family: var(--mono); } .readout-main { display: flex; align-items: baseline; gap: .35rem; font-size: .82rem; color: var(--text); } .readout-main i { font-style: normal; color: var(--subtle); } .readout-main b { font-weight: 500; font-variant-numeric: tabular-nums; } .readout-main em { font-style: normal; margin-left: .55rem; padding-left: .7rem; border-left: 1px solid var(--line-strong); letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; color: var(--accent); } .readout-sub { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); } .readout-sub b { font-weight: 400; font-variant-numeric: tabular-nums; } .hud-hint { font: 400 .68rem/1.5 var(--mono); letter-spacing: .06em; color: var(--subtle); text-align: right; } .hud-hint kbd { display: inline-block; padding: .15rem .35rem; margin: 0 .05rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; color: var(--muted); } .cue { position: absolute; left: 50%; bottom: clamp(4.4rem, 11vh, 6.4rem); translate: -50% 0; display: grid; justify-items: center; gap: .55rem; font: 400 .68rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--subtle); transition: opacity .4s; opacity: 1; } .cue.off { opacity: 0; } .cue-line { display: block; width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: cue 1.9s ease-in-out infinite; } @keyframes cue { 0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } } .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .07); } .progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; } /* --------------------------------------------------------------- responsive */ @media (max-width: 960px) { .project-grid, .about-grid { grid-template-columns: minmax(0, 1fr); } .metric-row, .branch-row { grid-template-columns: minmax(0, 1fr); } .timeline li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } .is-depth .project-visual { display: none; } .is-depth .plane-inner { width: 88vw; } .work-index button { grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem; } .wi-cat { display: none; } } @media (max-width: 720px) { .rail { right: .55rem; } .rail button { padding-block: .38rem; } .rail button span { display: none; } .rail button i { width: 14px; } .rail button:hover i, .rail button:focus-visible i { width: 20px; } .rail button[aria-current="true"] i { width: 26px; } .hud-hint { display: none; } .topbar-brand em { display: none; } .topbar { padding-inline: .85rem; } .viewswitch > * { padding: .42rem .6rem; font-size: .72rem; } /* leave a gutter on both sides so the rail never sits on top of the copy */ .is-depth .plane-inner { width: calc(100vw - 4.6rem); max-height: calc(100vh - 150px); } .socials { gap: 1rem; } } @media (max-height: 720px) { .is-depth .lede, .is-depth .body { font-size: .95rem; } .is-depth .notes li { font-size: .875rem; } .is-depth h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); } .is-depth h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); } } @media (max-height: 620px) { .is-depth .footnote, .is-depth .metric-note { display: none; } .is-depth .cue { display: none; } } @media (prefers-reduced-motion: reduce) { .caret, .cue-line { animation: none; } .is-depth .world { transition: none; } .btn, .work-index button { transition: none; } }