/* ========================================================= OZBAY — industrial / HUD portfolio system Two typefaces, one accent, dark ground. Everything else is grid lines, brackets and status text. ========================================================= */ :root { --bg: #141414; --bg-panel: #1a1a1a; --bg-panel-alt: #101010; --fg: #ededed; --muted: #8a8f93; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18); --accent: #ffffff; --accent-dim: rgba(255, 255, 255, 0.14); --accent-fg: #141414; --hazard: #ff3b30; --hazard-dim: rgba(255, 59, 48, 0.18); --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --display: "Space Grotesk", var(--mono); --gap: clamp(16px, 2.4vw, 32px); } /* -- light theme: same industrial/HUD system, inverted ground. Toggled via [data-theme] on , see .theme-toggle in script.js. -- */ :root[data-theme="light"] { --bg: #f2f1ec; --bg-panel: #e9e7e0; --bg-panel-alt: #dfdcd3; --fg: #16171a; --muted: #6b6f73; --line: rgba(0, 0, 0, 0.09); --line-strong: rgba(0, 0, 0, 0.2); --accent: #16171a; --accent-dim: rgba(0, 0, 0, 0.12); --accent-fg: #f2f1ec; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--accent-fg); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .mono { font-family: var(--mono); } .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .accent { color: var(--accent); } /* ---------- noise / grain overlay ---------- */ .grain { pointer-events: none; position: fixed; inset: 0; z-index: 999; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- ticker ---------- */ .ticker { --ticker-h: 28.5px; position: relative; height: var(--ticker-h); overflow: hidden; background-color: var(--bg-panel-alt); background-image: url("assets/scanning_shape1.png"); background-repeat: repeat; background-position: center; background-size: 46px 46px; border-bottom: 1px solid var(--line-strong); } /* -- the whole plate (corner badge + text pill + index badge) rides as one rigid group at one speed: enters from the right, drifts left, exits, loops back around. transform keeps the maths correct regardless of the plate's own (content-driven) width. -- */ .ticker__unit { position: absolute; top: 0; left: 0; height: 100%; display: inline-flex; align-items: stretch; white-space: nowrap; animation: ticker-slide 60s linear infinite; } @keyframes ticker-slide { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ticker__unit { animation: none; transform: none; } } /* -- left badge: corner-bracket + centre mark, cut from one square. The badge itself has no background — only the 5 small cells are filled white (matching the text pill), so the gaps between them stay transparent over the ticker's own tile. -- */ .ticker__corner { flex-shrink: 0; width: var(--ticker-h); margin-right: 8px; display: grid; grid-template-columns: 4fr 9fr 4fr; grid-template-rows: 4fr 9fr 4fr; } .ticker__corner-cell { background-color: var(--hazard); background-image: url("assets/scanning_shape1.png"); background-repeat: repeat; background-position: center; background-size: 46px 46px; } .ticker__corner-cell--tl { grid-column: 1; grid-row: 1; } .ticker__corner-cell--tr { grid-column: 3; grid-row: 1; } .ticker__corner-cell--c { grid-column: 2; grid-row: 2; } .ticker__corner-cell--bl { grid-column: 1; grid-row: 3; } .ticker__corner-cell--br { grid-column: 3; grid-row: 3; } /* -- middle: the white text pill, sized to its own content and riding along with the badges — no separate scroll of its own -- */ .ticker__band { flex-shrink: 0; white-space: nowrap; background: var(--hazard); color: var(--accent-fg); } .ticker__track { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 100px; } .ticker__track span { margin-right: 48px; } .ticker__track span:last-child { margin-right: 0; } /* -- right badge: inset frame + index number, no backing plate -- */ .ticker__index { position: relative; flex-shrink: 0; width: var(--ticker-h); background-image: url("assets/scanning_shape1.png"); background-repeat: repeat; background-position: center; background-size: 46px 46px; } .ticker__index::before { content: ""; position: absolute; inset: 22%; border: 1px solid var(--fg); } .ticker__index-num { position: absolute; top: 4px; right: 5px; font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--fg); letter-spacing: 0.04em; } /* ---------- header ---------- */ header.site { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap); padding: 18px var(--gap) 14px; background: var(--bg); border-bottom: 1px solid var(--line); } .header__left { display: flex; align-items: center; gap: 20px; } .header__right { display: flex; align-items: center; gap: 28px; } .office { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--muted); line-height: 1.25; } .office strong { color: var(--fg); display: block; font-size: 17px; } .status-block { text-align: right; } .status-block .label { display: block; margin-bottom: 2px; } .status-block .label:first-child { color: var(--fg); } .clock-block { display: flex; align-items: stretch; min-width: 260px; } .clock-block__col { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; } .clock-block__col:first-child { padding-left: 0; } .clock-block__col--local { opacity: 0.6; border-left: 1px solid var(--line); } .clock-block__timerow { display: flex; align-items: baseline; gap: 6px; } .clock-block__zone, .clock-block .time, .clock-block .date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .clock-block__zone { color: var(--muted); } .clock-block .time { color: var(--fg); font-variant-numeric: tabular-nums; } .clock-block .date { color: var(--muted); } .header__sep { width: 1px; align-self: stretch; background: var(--line-strong); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hazard); background: transparent; color: var(--fg); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--accent); color: var(--accent-fg); } .theme-toggle__icon { display: block; } .theme-toggle__icon--moon { display: none; } :root[data-theme="light"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: block; } .cta { display: none; } @media (min-width: 860px) { .cta { display: inline-block; } } .cta a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 27px; border: 1px solid var(--hazard); background: repeating-linear-gradient( 45deg, var(--hazard-dim), var(--hazard-dim) 6px, transparent 6px, transparent 12px ); color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; } .cta a:hover { background: var(--accent); color: var(--accent-fg); } .cta__icon { flex-shrink: 0; } /* -- hero's own comms-activate button, under the wordmark; visible at every width (unlike the header's copy, which hides below 860px) -- */ .hero__cta { display: inline-block; width: fit-content; margin: 6px 0 4px; } .hero__cta a { width: 330px; justify-content: center; } @media (max-width: 859px) { .header__right { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: clamp(560px, 62vh, 820px); display: flex; flex-direction: column; justify-content: center; padding: 64px var(--gap); border-bottom: 1px solid var(--line); background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 42px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 42px 100%, var(--bg-panel-alt); background-blend-mode: overlay, overlay, normal; } .hero__grid { position: relative; } .hero__content { display: flex; flex-direction: column; gap: 20px; } .hero__idcard { display: none; position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: 1 / 1; } @media (min-width: 980px) { .hero__idcard { display: block; } .hero__content { padding-right: clamp(200px, 24vw, 400px); } } .hero__eye { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; height: 460px; pointer-events: none; } @media (min-width: 1440px) { .hero__eye { display: block; } } /* -- satellite eyes: smaller spheres orbiting the central one, offset from the same shared centre point so they scale together with it. -- */ .hero__eye--tl { width: 160px; height: 160px; top: calc(50% - 185px); left: calc(50% - 260px); } .hero__eye--tr { width: 180px; height: 180px; top: calc(50% - 205px); left: calc(50% + 230px); } .hero__eye--bl { width: 220px; height: 220px; top: calc(50% + 140px); left: calc(50% - 275px); } .hero__eye--br { width: 160px; height: 160px; top: calc(50% + 175px); left: calc(50% + 245px); } .hero__eyebrow { display: flex; gap: 24px; flex-wrap: wrap; } .hero__wordmark { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(48px, 11vw, 148px); line-height: 0.92; letter-spacing: -0.01em; color: var(--accent); text-shadow: 0 0 18px var(--accent-dim), 0 0 60px rgba(255, 255, 255, 0.25); } .hero__tagline { font-family: var(--mono); font-size: clamp(13px, 1.6vw, 17px); color: var(--muted); max-width: 640px; } .hero__readout { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } /* -- trace line sits 8px below the readout, level with the ID card's bottom edge (which stretches to match .hero__content's height) -- anchored to .hero__grid (not .hero__readout) so it spans the full width, running under the ID card too, and positioned absolutely so it doesn't add to the height that the ID card stretches to match. -- */ .hero__grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--hazard); } .chip { padding: 6px 10px; background-image: repeating-linear-gradient( 45deg, var(--hazard-dim), var(--hazard-dim) 6px, transparent 6px, transparent 12px ); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .chip.on { color: var(--accent); } .chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; box-shadow: 0 0 6px currentColor; } /* ---------- background music toggle ---------- */ .sound-toggle { position: fixed; right: var(--gap); bottom: var(--gap); z-index: 500; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background-color: var(--bg-panel); background-image: repeating-linear-gradient( 45deg, var(--hazard-dim), var(--hazard-dim) 6px, transparent 6px, transparent 12px ); border: 1px solid var(--hazard); color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .sound-toggle:hover { background: var(--accent); color: var(--accent-fg); } .sound-toggle[aria-pressed="true"] { border-color: var(--hazard); color: var(--accent); } .sound-toggle .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .sound-toggle[aria-pressed="true"] .dot { background: currentColor; box-shadow: 0 0 6px currentColor; } /* ---------- prev/next project hints ---------- */ .project-jump { display: inline-flex; align-items: center; gap: 10px; max-width: min(90vw, 420px); padding: 9px 16px; background: var(--bg-panel); border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .project-jump--next { position: fixed; left: 50%; z-index: 400; bottom: var(--gap); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.15s ease, color 0.15s ease; } .project-jump--next.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .project-jump:hover { border-color: var(--accent); color: var(--accent); } .project-jump:hover .project-jump__title { color: var(--accent); } .project-jump__title { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; } .project-jump__arrow { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; } .project-jump--prev .project-jump__arrow { border-bottom: 7px solid currentColor; } .project-jump--next .project-jump__arrow { border-top: 7px solid currentColor; } .project-jump__arrow--up { border-bottom: 7px solid currentColor; } @media (max-width: 640px) { .project-jump__title { display: none; } } /* -- "back to top" rides alongside the previous-project hint, both shown/hidden as one unit near the top of the viewport -- */ .project-jump-group { position: fixed; top: 78px; left: 50%; z-index: 400; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .project-jump-group.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .project-jump-group .project-jump--prev { max-width: min(60vw, 340px); } .project-jump--top { flex-shrink: 0; max-width: none; padding: 9px 14px; } /* -- hero elements share the ID card's glitch animation -- */ .hero__eyebrow .label, .hero__wordmark, .hero__tagline, .chip { animation: idcard-glitch 4.5s steps(1, end) infinite; } .hero__eyebrow .label:nth-child(1) { animation-delay: -0.6s; } .hero__eyebrow .label:nth-child(2) { animation-delay: -3.5s; } .hero__wordmark { animation-delay: -1.5s; } .hero__tagline { animation-delay: -2.8s; } .hero__readout .chip:nth-child(1) { animation-delay: -0.2s; } .hero__readout .chip:nth-child(2) { animation-delay: -1.9s; } .hero__readout .chip:nth-child(3) { animation-delay: -3.2s; } /* ---------- ID card (hero, right side) ---------- Built to spec from SPEN Figma file, node 2026-151336. Base canvas is 1024x1024; all layers are sized as percentages of that so the card scales as one unit. */ .idcard { --idc-fg: #ededed; --idc-muted: #9a9a9a; --idc-dim: rgba(255, 255, 255, 0.32); --idc-line: rgba(255, 255, 255, 0.14); position: relative; width: 100%; height: 100%; background: #373737; border: 1px solid var(--hazard); overflow: hidden; container-type: inline-size; container-name: idcard; font-family: var(--mono); color: var(--idc-fg); } .idcard__corner { position: absolute; z-index: 5; width: 2px; height: 2px; background: var(--hazard); } .idcard__corner.tl { top: 0; left: 0; } .idcard__corner.tr { top: 0; right: 0; } .idcard__corner.bl { bottom: 0; left: 0; } .idcard__corner.br { bottom: 0; right: 0; } .idcard__panel { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 89.8438%; /* 920 / 1024 */ background: #070707; overflow: hidden; } /* -- left/right margins -- */ .idcard__index { position: absolute; left: 1.46%; top: 1.95%; font-size: 12pt; color: var(--idc-muted); } .idcard__ticks { position: absolute; top: 0; height: 100%; width: 5.08%; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 8px); } .idcard__ticks--l { left: 0; } .idcard__ticks--r { right: 0; } .idcard__vtext { position: absolute; font-size: 12pt; letter-spacing: 0.16em; text-transform: uppercase; color: var(--idc-muted); writing-mode: vertical-rl; white-space: nowrap; } .idcard__vtext--core { left: 1.9%; bottom: 2%; transform: rotate(180deg); } .idcard__vtext--research { right: 1.9%; top: 2%; } .idcard__vtext--hgi { right: 1.9%; bottom: 2%; transform: rotate(180deg); } /* -- header: wordmark + status bar + barcode -- */ .idcard__slogo { position: absolute; left: 4.67%; top: 3.42%; width: 41.85%; height: 5.86%; object-fit: contain; object-position: left center; } .idcard__bar { position: absolute; left: 4.67%; top: 12.5%; width: 66.3%; height: 3.32%; } .idcard__bar img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .idcard__barcode { display: flex; flex-direction: column; gap: 2px; } .idcard__barcode--top { position: absolute; left: 4.67%; top: 16.6%; width: 64.67%; height: 2.6%; } .idcard__barcode-ticks { flex: 1; background: repeating-linear-gradient( 90deg, #cfcfcf 0 2px, transparent 2px 3px, #cfcfcf 5px 6px, transparent 6px 9px, #cfcfcf 10px 11px, transparent 11px 12px ); opacity: 0.85; } .idcard__barcode-num { font-size: 0.82cqw; letter-spacing: 0.06em; color: var(--idc-dim); } /* -- left icon stack -- */ .idcard__wlogo { position: absolute; left: 4.67%; top: 21.97%; width: 20.1%; height: 19.04%; object-fit: contain; } .idcard__sqr { position: absolute; left: 9.57%; top: 46.88%; width: 11.96%; height: 8.3%; object-fit: contain; } .idcard__circ { position: absolute; left: 10.65%; top: 57.8%; width: 9.78%; height: 8.59%; object-fit: contain; } /* -- photo -- */ .idcard__photo { position: absolute; left: 28.9%; top: 24.8%; width: 42.17%; height: 50.4%; display: flex; flex-direction: column; gap: 0.6cqw; } .idcard__photo-label { font-size: 1.2cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--idc-muted); } .idcard__photo-frame { position: relative; flex: 1; overflow: hidden; border: 1px solid var(--idc-line); } .idcard__photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; } .idcard__crosshair { position: absolute; inset: 4% 4% 12% 4%; border: 2px dashed var(--hazard); pointer-events: none; } @keyframes idcard-glitch { 0%, 78%, 100% { transform: translate(0, 0) scaleY(1); box-shadow: none; filter: none; } 79% { transform: translate(-4px, 1px) scaleY(1); box-shadow: 3px 0 rgba(255, 40, 80, 0.7), -3px 0 rgba(40, 220, 255, 0.7); filter: brightness(1.3) contrast(1.2); } 80% { transform: translate(3px, -1px) scaleY(0.85); box-shadow: none; filter: none; } 81% { transform: translate(-3px, 0) scaleY(1); box-shadow: -3px 0 rgba(255, 40, 80, 0.6), 3px 0 rgba(40, 220, 255, 0.6); filter: hue-rotate(40deg); } 82% { transform: translate(0, 0) scaleY(1); box-shadow: none; filter: none; } 84% { transform: translate(5px, 1px) scaleY(1); box-shadow: 2px 0 rgba(255, 40, 80, 0.5), -2px 0 rgba(40, 220, 255, 0.5); filter: none; } 85% { transform: translate(0, 0) scaleY(0.9); box-shadow: none; } 87% { transform: translate(-3px, 0) scaleY(1); box-shadow: -2px 0 rgba(255, 40, 80, 0.6), 2px 0 rgba(40, 220, 255, 0.6); filter: brightness(1.2); } 88%, 100% { transform: translate(0, 0) scaleY(1); box-shadow: none; filter: none; } } .idcard__slogo, .idcard__bar img, .idcard__wlogo, .idcard__sqr, .idcard__circ, .idcard__comcode img, .idcard__photo-frame img { animation: idcard-glitch 4.5s steps(1, end) infinite; } .idcard__slogo { animation-delay: -0.4s; } .idcard__bar img { animation-delay: -1.1s; } .idcard__wlogo { animation-delay: -1.9s; } .idcard__sqr { animation-delay: -2.6s; } .idcard__circ { animation-delay: -3.3s; } .idcard__comcode img { animation-delay: -0.8s; } .idcard__photo-frame img { animation-delay: -2.1s; } @media (prefers-reduced-motion: reduce) { .idcard__slogo, .idcard__bar img, .idcard__wlogo, .idcard__sqr, .idcard__circ, .idcard__comcode img, .idcard__photo-frame img, .hero__eyebrow .label, .hero__wordmark, .hero__tagline, .chip { animation: none; } } .idcard__coord { position: absolute; font-size: 0.95cqw; color: rgba(255, 255, 255, 0.55); } .idcard__coord--a { left: 6%; top: 66%; } .idcard__coord--b { left: 52%; top: 74%; } /* -- right meta column -- */ .idcard__meta { position: absolute; left: 72.4%; top: 25.2%; width: 25.2%; height: 49.5%; display: flex; flex-direction: column; } .idcard__meta-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 2.5cqw; line-height: 1.08; text-transform: uppercase; color: #CDCDCD; } .idcard__comcode { margin: 1cqw 0 1.4cqw; } .idcard__comcode img { width: 75%; height: auto; opacity: 0.9; } .idcard__field { display: flex; flex-direction: column; gap: 0.25cqw; padding-top: 0.9cqw; } .idcard__field-label { font-size: 1cqw; letter-spacing: 0.05em; text-transform: uppercase; color: var(--idc-muted); } .idcard__field-value { font-size: 1.4cqw; font-weight: 700; color: #CDCDCD; word-break: break-all; } /* -- bottom block -- */ .idcard__bottom { position: absolute; left: 4.67%; top: 76.66%; width: 92.9%; height: 22.17%; display: flex; flex-direction: column; gap: 0.6cqw; } .idcard__namerow { display: flex; align-items: baseline; gap: 1.5cqw; } .idcard__name { font-family: var(--display); font-weight: 700; font-size: 1.6cqw; line-height: 1.15; text-transform: uppercase; color: #CDCDCD; } .idcard__active { font-size: 1.1cqw; color: var(--idc-muted); } .idcard__row { display: flex; gap: 1.2cqw; align-items: baseline; padding-top: 0.6cqw; border-top: 1px solid var(--idc-line); } .idcard__row-label { font-size: 1.05cqw; color: var(--idc-muted); min-width: 9cqw; } .idcard__row-value { font-size: 1.25cqw; color: #CDCDCD; text-transform: uppercase; } .idcard__row--split { justify-content: flex-start; gap: 6cqw; } .idcard__barcode--bottom { padding-top: 0.8cqw; } .idcard__barcode--bottom .idcard__barcode-ticks { height: 0.9cqw; flex: none; background: repeating-linear-gradient( 90deg, var(--hazard) 0 2px, transparent 2px 3px, var(--hazard) 5px 6px, transparent 6px 9px, var(--hazard) 10px 11px, transparent 11px 12px ); } .idcard__footnote { margin: 0.3cqw 0 0; font-size: 0.85cqw; color: var(--idc-muted); } .idcard__footnote strong { color: #CDCDCD; font-weight: 700; } /* ---------- project index: small clickable tiles, one horizontal rail ---------- */ .projectnav { border-bottom: 1px solid var(--line); padding: 24px var(--gap); background: var(--bg-panel); } .projectnav__bar { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .projectnav__categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 900px) { .projectnav__categories { grid-template-columns: 1fr; gap: 28px; } } .projectnav__category-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line-strong); font-family: var(--mono); } .projectnav__category-name { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .projectnav__category-count { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .projectnav__track { display: flex; flex-wrap: wrap; gap: 12px; } .projectnav__item { position: relative; flex: 0 0 auto; scroll-snap-align: start; width: 168px; height: 128px; padding: 12px 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; overflow: hidden; border: 1px dashed var(--line-strong); background: var(--bg-panel-alt); color: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .projectnav__item:hover { border-color: var(--accent); border-style: solid; background: var(--accent-dim); transform: translateY(-3px); } /* -- cover media, grayscale so it reads as texture, not a full-color photo -- */ .projectnav__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: grayscale(1); } /* -- dark scrim top/bottom so the white number/title stay legible over any underlying image brightness -- */ .projectnav__item::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.14) 32%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0.68) 100% ); } .projectnav__item .corner { position: absolute; z-index: 2; width: 8px; height: 8px; background: var(--hazard); opacity: 0; transition: opacity 0.15s ease; } .projectnav__item:hover .corner { opacity: 1; } .projectnav__item .corner.tl { top: -1px; left: -1px; } .projectnav__item .corner.tr { top: -1px; right: -1px; } .projectnav__item .corner.bl { bottom: -1px; left: -1px; } .projectnav__item .corner.br { bottom: -1px; right: -1px; } .projectnav__num { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 38px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.65); transition: opacity 0.15s ease; } .projectnav__item:hover .projectnav__num { opacity: 0.75; } .projectnav__title { position: relative; z-index: 1; font-size: 11px; line-height: 1.4; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.65); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; /* always reserves 2 lines, so short titles don't shift the number down */ } /* ---------- biography ---------- */ .bio { border-bottom: 1px solid var(--line); padding: 32px var(--gap); background: var(--bg-panel); } .bio__head { display: flex; flex-wrap: wrap; gap: 10px; } /* -- disclosure button: a square arrow "chip" (same visual language as the header CTA) with the label sitting plainly beside it -- */ .bio__toggle { display: inline-flex; align-items: center; gap: 14px; border: none; background: none; padding: 0; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .bio__toggle-arrow-box { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--hazard); background-color: transparent; background-image: repeating-linear-gradient( 45deg, var(--hazard-dim), var(--hazard-dim) 6px, transparent 6px, transparent 12px ); color: var(--accent); transition: background-color 0.15s ease, color 0.15s ease; } .bio__toggle:hover .bio__toggle-arrow-box, .bio__toggle[aria-expanded="true"] .bio__toggle-arrow-box { background-color: var(--accent); background-image: none; color: var(--accent-fg); } .bio__toggle-arrow { display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; transition: transform 0.25s ease; } .bio__toggle[aria-expanded="true"] .bio__toggle-arrow { transform: rotate(90deg); } .bio__toggle-label { transition: color 0.15s ease; } .bio__toggle:hover .bio__toggle-label, .bio__toggle[aria-expanded="true"] .bio__toggle-label { color: var(--fg); } /* -- collapsible panels: height-animated via the fr-unit grid trick, no JS height measurement needed -- */ .bio__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .bio__panel.is-open { grid-template-rows: 1fr; } /* padding lives on the child, not this element — a collapsed grid row still forces its own padding to render (padding can't be clipped by overflow the way content can), which left a visible gap even when closed. Pushing it down a level lets overflow:hidden genuinely clip it to nothing. */ .bio__panel-inner { overflow: hidden; min-height: 0; } .bio__panel-inner > * { padding-top: 24px; } .bio__panel + .bio__panel.is-open > .bio__panel-inner > * { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; } .bio__body { max-width: none; } .bio__body p { margin: 0; color: var(--fg); font-size: 15px; line-height: 1.7; } .bio__timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); } .bio__role { display: flex; flex-direction: column; gap: 6px; } .bio__role-head { display: flex; flex-direction: column; gap: 2px; } .bio__role-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--fg); } .bio__role-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .bio__role-company { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .bio__role-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); } .bio__role-desc em { color: var(--fg); font-style: normal; } /* ---------- system status panel: one compact readout line ---------- */ .sysstatus { border-bottom: 1px solid var(--line); padding: 16px var(--gap); background: var(--bg-panel); } .sysstatus__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; } .sysstatus__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .sysstatus__sep { color: var(--line-strong); } /* ---------- project panels ---------- */ .project { position: relative; scroll-margin-top: 90px; /* clears the sticky header when jumped to via anchor */ border-bottom: 1px solid var(--line); padding: var(--gap); background: var(--bg); } /* alternating tone so each unit reads as its own card while scrolling — tied to .project--reverse (not nth-of-type) so it stays correct regardless of how many non-.project sections sit before the list */ .project--reverse { background: var(--bg-panel); } .project__bar { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .project__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: start; } @media (min-width: 900px) { .project__grid { grid-template-columns: 1.1fr 0.9fr; } .project--reverse .project__grid { grid-template-columns: 0.9fr 1.1fr; } .project--reverse .project__media { order: 2; } .project--reverse .project__body { order: 1; } } .project__media { position: relative; aspect-ratio: 16 / 9; border: 1px dashed var(--line-strong); background: var(--bg-panel-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; } .project__media img, .project__media video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter 0.35s ease; } .project__media:hover img, .project__media:hover video { filter: grayscale(0); } .project__slideshow { transition: opacity 0.35s ease, filter 0.35s ease; } .project__media .corner { position: absolute; width: 8px; height: 8px; background: var(--hazard); } .project__media .corner.tl { top: -1px; left: -1px; } .project__media .corner.tr { top: -1px; right: -1px; } .project__media .corner.bl { bottom: -1px; left: -1px; } .project__media .corner.br { bottom: -1px; right: -1px; } .project__placeholder { text-align: center; padding: 24px; color: var(--muted); } .project__placeholder .ph-title { font-family: var(--display); color: var(--line-strong); font-size: 15px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .project__placeholder code { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--accent); border: 1px solid var(--line); padding: 4px 8px; } .project__body { display: flex; flex-direction: column; gap: 14px; } .project__title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); text-transform: uppercase; line-height: 1; } .project__desc { color: var(--muted); max-width: 52ch; } .project__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; } .project__meta div .label { margin-bottom: 3px; } .project__meta div .val { font-size: 13px; color: var(--fg); } .project__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .project__links a { border: 1px solid var(--hazard); background-image: repeating-linear-gradient( 45deg, var(--hazard-dim), var(--hazard-dim) 6px, transparent 6px, transparent 12px ); padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .project__links a:hover { background: var(--accent); color: var(--accent-fg); } .project__links-label { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } /* ---------- git projects: quick links to live GitHub Pages prototypes ---------- */ .gitprojects { border-bottom: 1px solid var(--line); padding: var(--gap); background: var(--bg-panel); } .gitprojects__bar { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .gitprojects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .gitprojects__card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px dashed var(--line-strong); background: var(--bg-panel-alt); color: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .gitprojects__card:hover { border-color: var(--accent); border-style: solid; background: var(--accent-dim); transform: translateY(-3px); } .gitprojects__card .corner { position: absolute; width: 8px; height: 8px; background: var(--hazard); opacity: 0; transition: opacity 0.15s ease; } .gitprojects__card:hover .corner { opacity: 1; } .gitprojects__card .corner.tl { top: -1px; left: -1px; } .gitprojects__card .corner.tr { top: -1px; right: -1px; } .gitprojects__card .corner.bl { bottom: -1px; left: -1px; } .gitprojects__card .corner.br { bottom: -1px; right: -1px; } .gitprojects__title { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--fg); } .gitprojects__desc { font-size: 12px; line-height: 1.5; color: var(--muted); flex: 1; } .gitprojects__link { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .gitprojects__card:hover .gitprojects__link { color: var(--hazard); } /* ---------- footer ---------- */ footer.site { padding: 40px var(--gap) 28px; background: var(--bg-panel-alt); } .footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .footer__wordmark { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; } .footer__links { display: flex; gap: 20px; flex-wrap: wrap; } .footer__links a { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .footer__links a:hover { color: var(--accent); } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; } .footer__credits { margin-top: 8px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; } .footer__credits a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .footer__credits a:hover { color: var(--accent); } /* section reveal */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ---------- tactical cursor ---------- */ html.has-tactical-cursor, html.has-tactical-cursor a, html.has-tactical-cursor button, html.has-tactical-cursor .cta a { cursor: none; } .tc-shader { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9000; } @media (hover: none), (pointer: coarse) { .tc-shader { display: none; } } .tactical-cursor { position: fixed; top: 0; left: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; pointer-events: none; z-index: 9999; opacity: 0; transform: translate3d(-100px, -100px, 0) scale(0.9); transition: opacity 0.2s ease, transform 0.05s linear; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); } .tactical-cursor.is-active { opacity: 1; } .tactical-cursor.is-down { transform-origin: center; } .tactical-cursor.is-down svg { transform: scale(0.82); transition: transform 0.15s ease; } .tactical-cursor svg { transition: transform 0.2s ease; overflow: visible; } .tc-ring { fill: none; stroke: var(--accent); stroke-width: 1.3; opacity: 0.75; } .tc-ring-inner { fill: none; stroke: var(--accent); stroke-width: 0.8; stroke-dasharray: 2 3.4; opacity: 0.75; } .tc-edge { stroke: var(--accent); stroke-width: 1.1; opacity: 0.75; transform-box: fill-box; transform-origin: center; } .tc-edge--left { animation: tc-edge-left 2.2s ease-in-out infinite; } .tc-edge--right { animation: tc-edge-right 2.2s ease-in-out infinite; } .tc-edge-group { transform-box: fill-box; transform-origin: center; /* 4 breathing cycles (2.2s each = 8.8s) per 90deg step, full turn in 4 steps */ animation: tc-edge-group-spin 35.2s steps(4, end) infinite; } @keyframes tc-edge-group-spin { to { transform: rotate(360deg); } } @keyframes tc-edge-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } } @keyframes tc-edge-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .tc-edge--left, .tc-edge--right, .tc-edge-group { animation: none; } } .tc-tick { stroke: var(--accent); stroke-width: 1.3; opacity: 0.75; } .tc-dot { fill: var(--accent); opacity: 0.75; } @media (hover: none), (pointer: coarse) { .tactical-cursor { display: none; } }