:root {
font-size: 62.5%;
--background: #000000;
--bg-opaque: hsla(0, 0%, 7%, 0.25);
--background-light: #232323;
--background-dark: #080808;
--text: #ffffff;
--brand: #9d34da;
--text-xs: 1.6rem;
--text-sm: 1.8rem;
--text-md: 2.2rem;
--text-lg: 3.6rem;
--text-xl: 5.6rem;
--text-2xl: 9.6rem;
/* Enhanced typography scale with modular ratio 1.2 */
--text-3xs: 1.4rem;
--text-2xs: 1.5rem;
--text-base: 1.8rem;
--text-lead: 2.0rem;
--text-h5: 2.4rem;
--text-h4: 3.0rem;
--text-h3: 3.6rem;
--text-h2: 4.4rem;
--text-h1: 5.6rem;
--text-display: 9.6rem;
/* Line height variables for better vertical rhythm */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
--leading-loose: 2.0;
/* Letter spacing variables */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* Spacing system for consistent vertical rhythm */
--spacing-unit: 0.4rem;
--spacing-2xs: calc(var(--spacing-unit) * 0.5);
--spacing-xs: calc(var(--spacing-unit) * 1);
--spacing-sm: calc(var(--spacing-unit) * 2);
--spacing-md: calc(var(--spacing-unit) * 4);
--spacing-lg: calc(var(--spacing-unit) * 6);
--spacing-xl: calc(var(--spacing-unit) * 8);
--spacing-2xl: calc(var(--spacing-unit) * 12);
--spacing-3xl: calc(var(--spacing-unit) * 16);
--spacing-4xl: calc(var(--spacing-unit) * 20);
/* Enhanced gradient system */
--gradient-primary: linear-gradient(135deg, #9d34da 0%, #6a11cb 100%);
--gradient-secondary: linear-gradient(135deg, rgba(157, 52, 218, 0.2) 0%, rgba(106, 17, 203, 0.1) 100%);
--gradient-dark: linear-gradient(180deg, #080808 0%, #000000 100%);
--gradient-light: linear-gradient(180deg, #232323 0%, #141414 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
--gradient-radial: radial-gradient(circle at 50% 50%, rgba(157, 52, 218, 0.15) 0%, transparent 70%);
/* Glassmorphism effects */
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
--glass-blur: blur(12px);
/* Enhanced contrast colors */
--text-highlight: #ffffff;
--text-muted: rgba(255, 255, 255, 0.7);
--text-dim: rgba(255, 255, 255, 0.5);
/* Spacing for gradients */
--gradient-spacing-lg: 4.8rem;
--gradient-spacing-md: 2.4rem;
--gradient-spacing-sm: 1.2rem;
/* Animation transition variables */
--transition-fast: 0.15s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
/* Transform values for sidebar */
--sidebar-translate-x: -70px;
--sidebar-translate-x-active: 0px;
/* ===================== operator-console tokens =====================
Shared vocabulary so every section can cite the Experience section
without forking values. Change these in one place, propagate
everywhere (kickers, brackets, dashed rules, dossier panels). */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, monospace;
--op-label: rgba(192, 132, 252, 0.88);
--op-meta: rgba(255, 255, 255, 0.55);
--op-rule-dashed: 1px dashed rgba(157, 52, 218, 0.28);
--op-bracket: rgba(157, 52, 218, 0.55);
--op-bracket-hot: rgba(157, 52, 218, 0.95);
--op-panel-bg: linear-gradient(
180deg,
rgba(22, 14, 34, 0.85) 0%,
rgba(12, 8, 20, 0.92) 100%
);
--op-panel-border: rgba(157, 52, 218, 0.2);
}
/* ===================== operator-console primitives =====================
Reusable building blocks. Any section can opt in by adding these
classes — the Experience section's .exp-* rules alias these below
so nothing it does breaks. */
/* .op-kicker — uppercase mono "// xxxx" label, sits above a title. */
.op-kicker {
display: inline-block;
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--op-label);
margin-bottom: 0.8rem;
}
/* .op-rule — dashed 1px brand separator. */
.op-rule {
border: 0;
height: 0;
border-top: var(--op-rule-dashed);
margin: 0;
}
/* .op-chip — rectangular monospace chip (dossier tech-tag style).
Distinct from the global pill .chip so both can coexist. */
.op-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-mono);
font-size: 1.05rem;
letter-spacing: 0.04em;
background: rgba(157, 52, 218, 0.1);
color: rgba(235, 220, 255, 0.88);
border: 1px solid rgba(157, 52, 218, 0.24);
border-radius: 0.4rem;
padding: 0.3rem 0.9rem;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.op-chip:hover {
background: rgba(157, 52, 218, 0.2);
border-color: rgba(157, 52, 218, 0.55);
color: #fff;
}
/* .op-bracket — L-shaped corner bracket. Place four variants in a
position:relative parent for the canonical dossier frame. */
.op-bracket {
position: absolute;
width: 1.4rem;
height: 1.4rem;
border-color: var(--op-bracket);
border-style: solid;
border-width: 0;
pointer-events: none;
transition: border-color 0.35s ease;
}
.op-bracket--tl {
top: 0.7rem;
left: 0.7rem;
border-top-width: 1.5px;
border-left-width: 1.5px;
}
.op-bracket--tr {
top: 0.7rem;
right: 0.7rem;
border-top-width: 1.5px;
border-right-width: 1.5px;
}
.op-bracket--bl {
bottom: 0.7rem;
left: 0.7rem;
border-bottom-width: 1.5px;
border-left-width: 1.5px;
}
.op-bracket--br {
bottom: 0.7rem;
right: 0.7rem;
border-bottom-width: 1.5px;
border-right-width: 1.5px;
}
/* .op-panel — dossier-grade surface. Gradient bg, brand border,
subtle scanlines. Opt-in via adding the class. */
.op-panel {
position: relative;
background: var(--op-panel-bg);
border: 1px solid var(--op-panel-border);
border-radius: 0.6rem;
overflow: hidden;
}
.op-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
opacity: 0.6;
border-radius: inherit;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* ===================== Gradient Utility Classes ===================== */
.gradient-primary {
background: var(--gradient-primary);
}
.gradient-secondary {
background: var(--gradient-secondary);
}
.gradient-dark {
background: var(--gradient-dark);
}
.gradient-light {
background: var(--gradient-light);
}
.gradient-glass {
background: var(--gradient-glass);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.gradient-radial {
background: var(--gradient-radial);
}
.glass-effect {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.text-highlight {
color: var(--text-highlight);
}
.text-muted {
color: var(--text-muted);
}
.text-dim {
color: var(--text-dim);
}
/* Gradient spacing utilities */
.p-gradient-lg {
padding: var(--gradient-spacing-lg);
}
.p-gradient-md {
padding: var(--gradient-spacing-md);
}
.p-gradient-sm {
padding: var(--gradient-spacing-sm);
}
/* Transition utility classes */
.transition-fast {
transition: var(--transition-fast);
}
.transition-medium {
transition: var(--transition-medium);
}
.transition-slow {
transition: var(--transition-slow);
}
.transition-bounce {
transition: var(--transition-bounce);
}
.transition-all {
transition: all var(--transition-medium);
}
.transition-transform {
transition: transform var(--transition-medium);
}
.transition-opacity {
transition: opacity var(--transition-fast);
}
.transition-colors {
transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
/* Typography utility classes */
.text-3xs {
font-size: var(--text-3xs);
}
.text-2xs {
font-size: var(--text-2xs);
}
.text-xs {
font-size: var(--text-xs);
}
.text-sm {
font-size: var(--text-sm);
}
.text-base {
font-size: var(--text-base);
}
.text-md {
font-size: var(--text-md);
}
.text-lead {
font-size: var(--text-lead);
}
.text-lg {
font-size: var(--text-lg);
}
.text-xl {
font-size: var(--text-xl);
}
.text-2xl {
font-size: var(--text-2xl);
}
.text-h5 {
font-size: var(--text-h5);
}
.text-h4 {
font-size: var(--text-h4);
}
.text-h3 {
font-size: var(--text-h3);
}
.text-h2 {
font-size: var(--text-h2);
}
.text-h1 {
font-size: var(--text-h1);
}
.text-display {
font-size: var(--text-display);
}
/* Leading (line height) utilities */
.leading-tight {
line-height: var(--leading-tight);
}
.leading-snug {
line-height: var(--leading-snug);
}
.leading-normal {
line-height: var(--leading-normal);
}
.leading-relaxed {
line-height: var(--leading-relaxed);
}
.leading-loose {
line-height: var(--leading-loose);
}
/* Letter spacing utilities */
.tracking-tighter {
letter-spacing: var(--tracking-tighter);
}
.tracking-tight {
letter-spacing: var(--tracking-tight);
}
.tracking-normal {
letter-spacing: var(--tracking-normal);
}
.tracking-wide {
letter-spacing: var(--tracking-wide);
}
.tracking-wider {
letter-spacing: var(--tracking-wider);
}
.tracking-widest {
letter-spacing: var(--tracking-widest);
}
/* Spacing utilities */
.space-xs {
margin-bottom: var(--spacing-xs);
}
.space-sm {
margin-bottom: var(--spacing-sm);
}
.space-md {
margin-bottom: var(--spacing-md);
}
.space-lg {
margin-bottom: var(--spacing-lg);
}
.space-xl {
margin-bottom: var(--spacing-xl);
}
.space-2xl {
margin-bottom: var(--spacing-2xl);
}
::selection {
background: var(--brand);
color: var(--background);
}
/* ===================== global accessibility ===================== */
.skip-link {
position: fixed;
top: -4rem;
left: 1.2rem;
z-index: 2000;
padding: 0.9rem 1.4rem;
background: var(--brand);
color: var(--background);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 0.6rem;
text-decoration: none;
transition: top 0.18s ease;
box-shadow: 0 10px 30px -12px rgba(157, 52, 218, 0.6);
}
.skip-link:focus,
.skip-link:focus-visible {
top: 1.2rem;
outline: none;
}
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 0.4rem;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Belt-and-braces reduced-motion: flatten Framer Motion reveal wrappers
that ship inline opacity:0 / translateY on the server-rendered HTML.
JS also flattens these on boot, but this stops any flash if JS is slow. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
scroll-behavior: auto !important;
}
[style*="translateY"] {
transform: none !important;
}
[style*="opacity: 0"] {
opacity: 1 !important;
}
}
body,
html {
max-width: 100vw;
scroll-behavior: smooth;
font-size: var(--text-sm);
}
body {
color: var(--text);
background: var(--background);
}
a {
color: inherit;
text-decoration: none;
}
.section-wrapper {
position: relative;
z-index: 10;
max-width: 1150px;
margin: auto;
padding: 9.6rem;
overflow: hidden;
}
@media (max-width: 768px) {
.section-wrapper {
padding: 7.2rem 2.4rem;
}
}
.chip {
font-size: var(--text-xs);
background: var(--background-light);
padding: 0.2rem 0.8rem;
border-radius: 999px;
}
.stats_grid {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.skill-groups {
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
}
.skill-group-label {
font-size: var(--text-xs);
font-weight: 700;
color: var(--brand);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.skill-group-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.featured-project {
position: relative;
display: flex;
flex-direction: column;
gap: 2.4rem;
background: linear-gradient(180deg, var(--background-light), var(--background-dark));
border: 1px solid rgba(157, 52, 218, 0.25);
border-radius: 1.2rem;
padding: 2.4rem;
overflow: hidden;
width: 100%;
max-width: 100%;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
--tilt-x: 0deg;
--tilt-y: 0deg;
--sheen-x: 50%;
--sheen-y: 50%;
}
.featured-project.has-tilt {
transform-style: preserve-3d;
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.25s ease, box-shadow 0.25s ease;
will-change: transform;
}
.featured-project.has-tilt::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
600px circle at var(--sheen-x) var(--sheen-y),
rgba(157, 52, 218, 0.18),
transparent 45%
);
opacity: 0;
transition: opacity 0.25s ease;
z-index: 1;
}
.featured-project.has-tilt::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 35%,
rgba(255, 255, 255, 0.08) 48%,
rgba(255, 255, 255, 0.14) 50%,
rgba(255, 255, 255, 0.08) 52%,
transparent 65%
);
background-size: 300% 100%;
background-position: calc(var(--sheen-x) * 3 - 150%) 0;
opacity: 0;
mix-blend-mode: overlay;
transition: opacity 0.25s ease, background-position 0.15s linear;
z-index: 2;
}
.featured-project.has-tilt:hover {
border-color: rgba(157, 52, 218, 0.55);
box-shadow: 0 30px 60px -28px rgba(157, 52, 218, 0.7),
inset 0 0 0 1px rgba(157, 52, 218, 0.18);
animation: card-pulse 2s infinite;
}
@keyframes card-pulse {
0%, 100% {
box-shadow: 0 30px 60px -28px rgba(157, 52, 218, 0.7),
inset 0 0 0 1px rgba(157, 52, 218, 0.18);
}
50% {
box-shadow: 0 30px 60px -28px rgba(157, 52, 218, 0.9),
inset 0 0 0 1px rgba(157, 52, 218, 0.3);
}
}
.featured-project.has-tilt:hover::before,
.featured-project.has-tilt:hover::after {
opacity: 1;
}
.featured-project.has-tilt > * {
position: relative;
z-index: 3;
}
.featured-project.has-tilt .featured-image {
overflow: hidden;
}
.featured-project.has-tilt .featured-image img {
transform: scale(1);
transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
.featured-project.has-tilt:hover .featured-image img {
transform: scale(1.05);
}
/* compact variant: no image, tighter stat grid, used for secondary
projects and open-source contributions */
.featured-project.compact {
gap: 1.2rem;
padding: 2rem 2.2rem;
border: 1px solid rgba(157, 52, 218, 0.18);
}
.featured-project.compact .featured-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.featured-project.compact .featured-stat {
padding: 0.8rem 1rem;
}
.featured-project.compact h4 {
font-size: var(--text-md);
margin-bottom: 0.8rem;
}
/* subheader between projects and contributions */
.projects-subhead {
margin-top: 3.2rem;
margin-bottom: 1.6rem;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand);
}
.featured-project .featured-image {
position: relative;
border-radius: 0.8rem;
overflow: hidden;
background: var(--background);
width: 100%;
min-width: 0;
line-height: 0;
}
.featured-project .featured-image img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.featured-project .featured-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.6rem;
min-width: 0;
}
.featured-project h4 {
font-size: var(--text-lg);
line-height: 1;
font-weight: 700;
margin-bottom: 1.2rem;
}
.featured-project .featured-tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.2rem;
}
.featured-project .featured-description {
font-size: var(--text-xs);
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 1.6rem;
}
.featured-project .featured-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1.2rem;
margin-bottom: 1.6rem;
}
.featured-project .featured-stat {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 1rem 1.2rem;
background: var(--background);
border-radius: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.featured-project .featured-stat-value {
font-size: var(--text-md);
font-weight: 700;
color: var(--brand);
line-height: 1;
}
.featured-project .featured-stat-label {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
}
.featured-project .featured-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.featured-project .btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--text-xs);
font-weight: 500;
padding: 0.8rem 1.4rem;
border-radius: 0.8rem;
background: var(--background);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.15s;
}
.featured-project .btn-ghost:hover {
border-color: var(--brand);
background: rgba(157, 52, 218, 0.12);
}
.featured-project .btn-ghost.btn-ghost-container {
border-color: rgba(59, 185, 255, 0.35);
color: #bfe3ff;
}
.featured-project .btn-ghost.btn-ghost-container:hover {
border-color: #3bb9ff;
background: rgba(59, 185, 255, 0.12);
color: #ffffff;
}
.featured-project .btn-ghost.btn-ghost-container svg {
display: inline-block;
flex-shrink: 0;
}
@media (max-width: 768px) {
.featured-project {
padding: 1.6rem;
gap: 1.6rem;
}
.featured-project .featured-stats {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.6rem;
}
.featured-project .featured-stat {
padding: 0.8rem;
}
}
/* ===================== hero: high-impact redesign ===================== */
.hero_hero__HQvTb {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: min(90vh, 82rem);
/* Two-column flex — copy on left, inline .hero-stage canvas on right.
Previously the 3D scene was a body-level absolute overlay; now it
participates in document flow so the page structure reads correctly
at every width. Column order preserved from source DOM. */
display: flex;
flex-direction: row;
align-items: center;
gap: 4rem;
padding-top: 6rem;
padding-bottom: 4rem;
}
/* Hero gets a slightly wider wrapper than the default .section-wrapper so
the two-column layout has breathing room on desktop. Still centred. */
.hero_hero__HQvTb.section-wrapper {
max-width: 1320px;
}
/* Inline 3D stage — an explicitly-sized square flex child anchored to the
right column of the hero. Uses `clamp()` for width/height rather than
`flex: 1 1 0 + aspect-ratio` because the latter combo collapses to 0
in some flex-sizing edge cases (especially when the canvas is the
stage's only content and the cross axis is bounded). A concrete width
and height side-step the problem entirely. */
.hero-stage {
position: relative;
flex: 0 0 auto;
width: clamp(24rem, 34vw, 48rem);
height: clamp(24rem, 34vw, 48rem);
align-self: center;
/* Nudge the stage toward the right edge of the hero so the globe
visually anchors into the copy's whitespace instead of hugging the
column gap. `margin-left: auto` takes any surplus room in the flex
row (the copy column is flex: 1 1 auto with a max-width cap, so the
spare space it doesn't use becomes auto margin here), and the small
translate gives an extra 1.5rem offset that reads as intentional
composition rather than a layout accident. Only applies on the
two-column desktop layout — the stacked narrow-viewport rule below
resets it to dead-centre. */
margin-left: auto;
transform: translateX(1.5rem);
/* No background — the canvas paints the whole visual. The stage
element is just a sized container. A square background gradient
would reveal the canvas rectangle against the hero's black bg. */
background: transparent;
}
.hero-stage::before {
/* Soft circular halo behind the canvas. `inset: -20%` gives the
gradient room to fade past the square's edge so the halo reads as
a round glow, not a framed rectangle. The `filter: blur(...)` +
radial gradient with a wide soft tail prevents any visible corner
falloff even though the element itself is square. */
content: "";
position: absolute;
inset: -20%;
z-index: 0;
pointer-events: none;
background: radial-gradient(
50% 50% at 50% 50%,
rgba(157, 52, 218, 0.22) 0%,
rgba(157, 52, 218, 0.09) 30%,
rgba(124, 58, 237, 0.04) 55%,
transparent 72%
);
filter: blur(22px);
}
/* Scanline overlay — painted ABOVE the canvas for the "corrupted
monitor" read. MASKED to a circle so the square canvas rectangle
isn't visible as a crisp edge against the hero background. Colour
is low-opacity brand-purple (not white) so it sits in the palette
rather than blowing out to a cyan/gray tone under `overlay`. */
.hero-stage::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.55;
background:
repeating-linear-gradient(
to bottom,
rgba(157, 52, 218, 0.09) 0px,
rgba(157, 52, 218, 0.09) 1px,
transparent 1px,
transparent 3px
);
-webkit-mask: radial-gradient(
circle at 50% 50%,
#000 0%,
#000 48%,
rgba(0, 0, 0, 0.65) 58%,
transparent 72%
);
mask: radial-gradient(
circle at 50% 50%,
#000 0%,
#000 48%,
rgba(0, 0, 0, 0.65) 58%,
transparent 72%
);
animation: heroStageFlicker 4.2s steps(12, end) infinite;
}
@keyframes heroStageFlicker {
0%, 94%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0); }
95% { opacity: 0.90; transform: translate3d(1.5px, 0, 0); }
96% { opacity: 0.30; transform: translate3d(-2px, 0, 0); }
97% { opacity: 0.70; transform: translate3d(0.5px, 0, 0); }
98% { opacity: 0.55; transform: translate3d(0, 0, 0); }
}
/* Click-surge: enhance.js briefly sets [data-glitch="1"] on the stage. */
.hero-stage[data-glitch="1"]::after {
animation: heroStageBurst 0.4s steps(6, end) 1;
}
@keyframes heroStageBurst {
0% { transform: translate3d(0, 0, 0); opacity: 0.55; }
20% { transform: translate3d(4px, 0, 0); opacity: 0.95; }
40% { transform: translate3d(-5px, -1px, 0); opacity: 0.30; }
60% { transform: translate3d(2px, 1px, 0); opacity: 0.85; }
80% { transform: translate3d(-1px, 0, 0); opacity: 0.45; }
100% { transform: translate3d(0, 0, 0); opacity: 0.55; }
}
#hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: auto;
display: block;
}
/* The canvas is a11y-focusable (tabIndex=0) so keyboard users can nudge
the globe with arrows / Space. Default user-agent focus styling paints
a hard rectangular outline around the canvas which makes the scene
look like it's sitting inside a square debug frame. Suppress it — the
stage's own halo (see `.hero-stage.stage-focused::before`) provides a
round, on-brand focus affordance instead. */
#hero-canvas:focus,
#hero-canvas:focus-visible {
outline: none;
box-shadow: none;
}
.hero-stage:has(#hero-canvas:focus-visible)::before {
background: radial-gradient(
50% 50% at 50% 50%,
rgba(201, 135, 255, 0.36) 0%,
rgba(157, 52, 218, 0.16) 30%,
rgba(124, 58, 237, 0.06) 55%,
transparent 72%
);
}
@media (prefers-reduced-motion: reduce) {
.hero-stage::after { animation: none; opacity: 0.30; }
}
/* Tablet / docked-devtools range: stack the hero so the copy column goes
full-width and the stage sits below it at a comfortable square size.
We KEEP the globe rendered here — only hiding it is a last-resort on
true phones. This is what lets the scene appear on ~900px viewports
(devtools opened on the side of a 1440px screen → ~900–1100px). */
@media (max-width: 959px) {
.hero_hero__HQvTb {
flex-direction: column;
gap: 2rem;
align-items: stretch;
transition: gap var(--transition-medium), flex-direction var(--transition-slow);
}
.hero-stage {
align-self: center;
width: clamp(20rem, 60vw, 32rem);
height: clamp(20rem, 60vw, 32rem);
margin-left: auto;
margin-right: auto;
transform: none;
transition: width var(--transition-medium), height var(--transition-medium), transform var(--transition-medium);
}
}
/* Mobile adaptive hero system */
@media (max-width: 559px) {
.hero-stage { display: none !important; }
.hero_hero__HQvTb {
gap: 0;
position: relative;
}
/* Add mobile-only visual element to maintain visual interest */
.hero_hero__HQvTb::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(80vw, 300px);
height: min(80vw, 300px);
background: var(--gradient-radial);
opacity: 0.3;
z-index: 0;
border-radius: 50%;
filter: blur(20px);
}
/* Enhance mobile copy visibility */
.hero_copyWrapper__CwXi2 {
position: relative;
z-index: 10;
}
}
/* kill the legacy dot-grid backdrop — we've replaced it with the 3D hero */
.hero_hero__HQvTb .dotgrid_dotGrid__fIloK { display: none !important; }
/* Faint ambient wash under the left copy column + floor vignette spanning
the whole hero. Purely decorative — the inline .hero-stage on the right
carries its own halo (see .hero-stage::before). */
.hero_hero__HQvTb::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(45% 65% at 20% 55%, rgba(157, 52, 218, 0.06) 0%, transparent 70%),
radial-gradient(120% 80% at 50% 110%, rgba(0, 0, 0, 0.45) 35%, transparent 80%);
pointer-events: none;
}
/* True-mobile override: globe is hidden (<560px), so darken the bottom
more to sell the single-column hero. Matches .hero-stage hide gate. */
@media (max-width: 559px) {
.hero_hero__HQvTb::before {
background: radial-gradient(120% 110% at 50% 110%, rgba(0, 0, 0, 0.6) 40%, transparent 78%);
}
}
/* fine film grain overlay — sells the "designed" feel */
.hero-grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.22;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.hero_hero__HQvTb .hero_copyWrapper__CwXi2 {
position: relative;
z-index: 3;
/* Flex child alongside .hero-stage — `min-width: 0` lets long tokens
(title words, links) shrink instead of forcing a horizontal blow-out,
and `flex: 1 1 auto` keeps the copy column taking the remaining
space while the stage is capped at 48rem. */
flex: 1 1 auto;
min-width: 0;
max-width: 68rem;
}
@media (min-width: 1100px) {
.hero_hero__HQvTb .hero_copyWrapper__CwXi2 {
max-width: 58rem;
}
}
/* status pill with pulsing live-dot */
.hero-pill {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.55rem 1.1rem 0.55rem 0.9rem;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(157, 52, 218, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.88);
margin-bottom: 2rem;
box-shadow: 0 0 0 1px rgba(157, 52, 218, 0.08), 0 10px 30px -12px rgba(157, 52, 218, 0.45);
}
.hero-pill-dot {
width: 0.85rem;
height: 0.85rem;
border-radius: 999px;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65);
animation: heroPulse 2.1s ease-out infinite;
}
@keyframes heroPulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/* tighter, slightly bigger hero title — anchors the gradient name */
.hero_hero__HQvTb .hero_title__Qj25Y {
letter-spacing: -0.02em;
line-height: 1.18;
}
.hero_hero__HQvTb .hero_subTitle__gHa6t {
color: rgba(255, 255, 255, 0.78);
letter-spacing: -0.005em;
/* The subtitle sits inside a text-reveal wrapper (unnamed Next.js div)
with overflow:hidden whose height auto-fits the h2. At line-height 1.1
(which was computed as 39.6px / 36px), the em-square only leaves ~1.8px
below the baseline — not enough for the 'g' descender in Engineer, so
it was being clipped by the reveal wrapper. Bumping line-height grows
the h2 AND the auto-sized wrapper together, giving the descender room. */
line-height: 1.35;
padding-bottom: 0.25rem;
}
/* animated iridescent gradient on "Aidan" — the visual anchor.
No drop-shadow: the parent reveal wrapper uses overflow:hidden which
clips any shadow into a hard rectangle ("boxy glow"). The shimmer is
expressive enough on its own. */
.hero-name-accent {
background: linear-gradient(
96deg,
#f06eff 0%,
#9d34da 14%,
#3bb9ff 28%,
#f06eff 42%,
#c987ff 56%,
#3bb9ff 70%,
#f06eff 84%,
#9d34da 100%
);
background-size: 180% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: heroShimmer 10s linear infinite;
}
@keyframes heroShimmer {
from { background-position: 0% 50%; }
to { background-position: 180% 50%; }
}
/* meta strip under the subtitle: now · loc · live UTC clock */
.hero-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.9rem 1.1rem;
margin-top: 1.6rem;
margin-bottom: 4rem;
padding: 0.75rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.8rem;
background: rgba(8, 8, 12, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.78);
letter-spacing: 0.02em;
}
.hero-meta-item { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.hero-meta-key {
font-size: 1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand);
font-weight: 600;
}
.hero-meta-sep {
color: rgba(255, 255, 255, 0.22);
font-weight: 300;
}
.hero-clock { color: #fff; font-variant-numeric: tabular-nums; }
/* scroll cue — vertical line + label at the bottom of the hero */
.hero-scroll-cue {
position: absolute;
bottom: 1.6rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
padding: 0.6rem;
font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
font-size: 1rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 0.2s ease;
}
.hero-scroll-cue:hover { color: #fff; }
.hero-scroll-line {
position: relative;
display: block;
width: 1px;
height: 6rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
overflow: hidden;
}
.hero-scroll-line::after {
content: "";
position: absolute;
top: -30%;
left: -1px;
width: 3px;
height: 30%;
background: linear-gradient(180deg, transparent, var(--brand));
animation: heroScrollSweep 2.4s ease-in-out infinite;
filter: blur(0.5px);
}
@keyframes heroScrollSweep {
0% { top: -40%; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
.type-cursor {
display: inline-block;
margin-left: 0.2rem;
color: var(--brand);
animation: typeBlink 1s steps(1) infinite;
font-weight: 400;
}
@keyframes typeBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@media (max-width: 768px) {
.hero_hero__HQvTb { min-height: 78vh; padding-top: 4rem; }
.hero-pill { font-size: 1.15rem; margin-bottom: 1.4rem; }
.hero-meta { font-size: 1.1rem; padding: 0.6rem 0.9rem; gap: 0.6rem 0.8rem; }
.hero-meta-key { font-size: 0.95rem; letter-spacing: 0.14em; }
.hero-scroll-cue { bottom: 1.4rem; font-size: 0.95rem; }
.hero-scroll-line { height: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
.hero-pill-dot,
.hero-name-accent,
.hero-scroll-line::after {
animation: none !important;
}
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.4rem;
width: 100%;
max-width: 60rem;
margin: 0.8rem auto 0;
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
}
.contact-form label {
display: flex;
flex-direction: column;
gap: 0.6rem;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.contact-form input,
.contact-form textarea {
width: 100%;
font: inherit;
font-size: var(--text-xs);
color: var(--text);
background: var(--background-light);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.8rem;
padding: 1.1rem 1.3rem;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
outline: none;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.contact-form textarea {
min-height: 14rem;
resize: vertical;
line-height: 1.5;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--brand);
background: var(--background-dark);
box-shadow: 0 0 0 3px rgba(157, 52, 218, 0.2);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.contact-form .form-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 1.6rem;
flex-wrap: wrap;
margin-top: 0.4rem;
}
.contact-form .submit-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font: inherit;
font-size: var(--text-xs);
font-weight: 600;
padding: 1.2rem 2rem;
border-radius: 0.8rem;
color: var(--background);
background: var(--brand);
border: 1px solid var(--brand);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.contact-form .submit-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(157, 52, 218, 0.35);
}
/* Loading animation for submit button */
.contact-form .submit-btn.loading {
position: relative;
color: transparent;
}
.contact-form .submit-btn.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--text);
border-radius: 50%;
animation: button-spin 0.8s linear infinite;
}
@keyframes button-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.contact-form .submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.contact-form .form-status {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.65);
}
.contact-form .form-status.success {
color: #6ee7b7;
}
.contact-form .form-status.error {
color: #fca5a5;
}
@media (max-width: 640px) {
.contact-form .form-row {
grid-template-columns: 1fr;
}
}
/* Inline per-field errors, char counter, honeypot, success card */
.contact-form .label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem;
}
.contact-form .char-counter {
font-size: 1.05rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.35);
font-weight: 500;
text-transform: none;
}
.contact-form .char-counter.near-limit {
color: #fcd34d;
}
.contact-form .field-error {
min-height: 1.6rem;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: #fca5a5;
}
.contact-form .field-error:empty {
min-height: 0;
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
border-color: #fca5a5;
background: rgba(252, 165, 165, 0.05);
}
.contact-form input[aria-invalid="true"]:focus,
.contact-form textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.2);
}
.contact-form .honeypot {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.contact-form .form-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 3.2rem 2.4rem;
border: 1px solid rgba(110, 231, 183, 0.3);
border-radius: 1.2rem;
background: linear-gradient(180deg, rgba(110, 231, 183, 0.08), rgba(110, 231, 183, 0.02));
color: #d1fae5;
text-align: center;
}
.contact-form .form-success svg {
color: #6ee7b7;
}
.contact-form .form-success h4 {
font-size: var(--text-md);
font-weight: 700;
color: #fff;
}
.contact-form .form-success p {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.7);
}
.contact-form .form-success .btn-ghost {
display: inline-flex;
align-items: center;
margin-top: 0.8rem;
font-size: var(--text-xs);
font-weight: 500;
padding: 0.8rem 1.6rem;
border-radius: 0.8rem;
background: var(--background);
border: 1px solid rgba(110, 231, 183, 0.4);
color: #d1fae5;
cursor: pointer;
transition: all 0.15s;
}
.contact-form .form-success .btn-ghost:hover {
background: rgba(110, 231, 183, 0.12);
color: #fff;
border-color: #6ee7b7;
}
.contact-form.is-sent .form-row,
.contact-form.is-sent > label:not(.honeypot),
.contact-form.is-sent .form-actions {
display: none;
}
/* ===================== scroll progress rail + aurora ===================== */
.scroll-rail {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 999;
pointer-events: none;
background: rgba(255, 255, 255, 0.04);
}
.scroll-rail-bar {
display: block;
height: 100%;
width: 100%;
transform-origin: 0 50%;
transform: scaleX(0);
background: linear-gradient(
90deg,
#9d34da 0%,
#c987ff 35%,
#3bb9ff 70%,
#9d34da 100%
);
box-shadow: 0 0 12px rgba(157, 52, 218, 0.5);
will-change: transform;
transition: transform var(--transition-medium);
}
/* Enhanced scroll rail hover effect */
.scroll-rail:hover {
height: 4px;
transition: height var(--transition-fast);
}
.scroll-rail:hover .scroll-rail-bar {
box-shadow: 0 0 20px rgba(157, 52, 218, 0.7);
}
/* Section-level ambient aurora blobs — pure CSS, masked to fade at edges
so they never produce the hard brightness discontinuity the hero used
to have. Each tinted by section-id via enhance.js. */
.section-wrapper.aurora {
position: relative;
isolation: isolate;
/* The aurora glow below is absolutely positioned with a negative inset
so it bleeds into the neighboring section's area. The parent
`.section-wrapper` rule sets `overflow: hidden`, which would clip
that bleed and produce a visible hard seam where one aurora ends and
the next begins. Re-enabling overflow here lets the glow spill out
and overlap with the adjacent aurora for a continuous page-long
ambient wash. Section-wrapper children that still need clipping
(featured-project images, etc.) opt in via their own `overflow:
hidden` on the clipping element. */
overflow: visible;
}
.section-wrapper.aurora::before {
content: "";
position: absolute;
/* Vertical bleed large enough to overlap with the adjacent section's
aurora in the gap between them, so the glow reads as a single
continuous wash instead of a banded per-section effect. The mask
below fades the bleed to transparent at the extremes so it still
feels bounded. */
inset: -30% -8% -30% -8%;
z-index: -1;
pointer-events: none;
opacity: 0.55;
filter: blur(40px);
animation: auroraDrift 28s ease-in-out infinite alternate;
/* Mask: aurora is 160% of section height. Opaque band runs from 18%
(≈ -1% of section height) to 82% (≈ 101% of section height), so the
aurora is fully opaque across the entire section and fades smoothly
out into both neighbors — where it meets the next section's aurora
bleeding back at 70% opacity of its peak. No more black seam. */
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* On screens wider than the wrapper's 1150px max-width, stretch the
aurora to fill the entire viewport width so the glow doesn't get
abruptly clipped by the centred wrapper's left/right edges. */
@media (min-width: 1151px) {
.section-wrapper.aurora::before {
left: calc(50% - 50vw);
right: calc(50% - 50vw);
}
}
.section-wrapper.aurora-purple::before {
background: radial-gradient(
45% 35% at 18% 25%,
rgba(157, 52, 218, 0.35),
transparent 65%
),
radial-gradient(
35% 30% at 85% 72%,
rgba(201, 135, 255, 0.22),
transparent 70%
);
}
.section-wrapper.aurora-cyan::before {
background: radial-gradient(
42% 32% at 80% 20%,
rgba(59, 185, 255, 0.3),
transparent 65%
),
radial-gradient(
38% 30% at 15% 75%,
rgba(157, 52, 218, 0.2),
transparent 70%
);
}
.section-wrapper.aurora-magenta::before {
background: radial-gradient(
40% 32% at 50% 20%,
rgba(240, 110, 255, 0.24),
transparent 65%
),
radial-gradient(
35% 30% at 20% 78%,
rgba(157, 52, 218, 0.24),
transparent 70%
);
}
/* The hero already has its own orb + ambient glow — don't stack aurora on
top of it or it looks muddy. */
.hero_hero__HQvTb.aurora::before {
display: none;
}
@keyframes auroraDrift {
0% { transform: translate3d(-2%, 0, 0) scale(1); }
50% { transform: translate3d(2%, 1%, 0) scale(1.04); }
100% { transform: translate3d(-1%, -1%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.section-wrapper.aurora::before {
animation: none;
}
}
/* ===================== experience · case-file dossiers ===================== */
/* Experience section is re-skinned by enhance.js into a two-pane
"operator's console":
- sticky numbered rail on the left (desktop) / horizontal chip
scroller on top (mobile)
- stack of case-file dossier cards on the right, each with a
monospace case header, translucent watermark number, and corner
brackets in brand purple.
The HTML is left untouched; JS adds .exp-chrome to each item and
wraps the rest in .exp-stack, with .exp-rail inserted as a sibling. */
/* --------- section layout --------- */
/* #experience already contains a full-width .header_sectionHeader__aMRKR
title block. Without the explicit col-span override below it'd auto-place
into the grid alongside the rail/stack and starve the dossier column
of horizontal room. */
.exp-timeline {
position: relative;
display: grid;
grid-template-columns: 1fr;
column-gap: 4rem;
row-gap: 2.4rem;
}
.exp-timeline > .header_sectionHeader__aMRKR {
grid-column: 1 / -1;
}
@media (min-width: 960px) {
.exp-timeline {
grid-template-columns: 20rem minmax(0, 1fr);
align-items: start;
}
/* Dossier column gets its own breathing room — cards should clearly
dominate the rail, not live next to it at equal weight. */
.exp-stack {
padding-left: 0.4rem;
}
}
@media (min-width: 1280px) {
.exp-timeline {
grid-template-columns: 22rem minmax(0, 1fr);
column-gap: 5rem;
}
}
/* --------- operator's rail --------- */
.exp-rail {
position: relative;
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, monospace);
color: rgba(255, 255, 255, 0.78);
}
.exp-rail-head {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.2rem 0 1.2rem;
border-bottom: 1px dashed rgba(157, 52, 218, 0.28);
margin-bottom: 1.2rem;
}
.exp-rail-kicker {
font-size: 1.05rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(192, 132, 252, 0.75);
}
.exp-rail-title {
font-family: inherit;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
}
.exp-rail-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.exp-rail-item {
display: grid;
grid-template-columns: 3ch 1fr auto;
align-items: center;
gap: 1.1rem;
padding: 1rem 1.2rem;
border-left: 2px solid transparent;
border-radius: 0.4rem;
text-decoration: none;
color: inherit;
transition: background 0.2s ease, border-color 0.2s ease,
color 0.2s ease, transform 0.2s ease;
}
.exp-rail-item:hover {
background: rgba(157, 52, 218, 0.08);
border-left-color: rgba(157, 52, 218, 0.5);
color: #fff;
}
.exp-rail-item[aria-current="true"] {
background: linear-gradient(
90deg,
rgba(157, 52, 218, 0.18),
rgba(157, 52, 218, 0.02) 80%
);
border-left-color: var(--brand);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(157, 52, 218, 0.25);
}
.exp-rail-index {
font-size: 1.1rem;
letter-spacing: 0.08em;
color: rgba(192, 132, 252, 0.8);
font-variant-numeric: tabular-nums;
}
.exp-rail-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.exp-rail-company {
font-family: inherit;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0;
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.exp-rail-years {
font-size: 1.05rem;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
font-variant-numeric: tabular-nums;
}
.exp-rail-item[aria-current="true"] .exp-rail-years {
color: rgba(255, 255, 255, 0.82);
}
.exp-rail-dot {
width: 0.7rem;
height: 0.7rem;
border-radius: 999px;
background: var(--brand);
box-shadow: 0 0 0 3px rgba(157, 52, 218, 0.22),
0 0 12px 1px rgba(157, 52, 218, 0.55);
animation: exp-rail-dot-pulse 2s ease-in-out infinite;
}
@keyframes exp-rail-dot-pulse {
0%,
100% {
box-shadow: 0 0 0 3px rgba(157, 52, 218, 0.22),
0 0 12px 1px rgba(157, 52, 218, 0.55);
}
50% {
box-shadow: 0 0 0 4px rgba(157, 52, 218, 0.35),
0 0 18px 3px rgba(157, 52, 218, 0.75);
}
}
@media (min-width: 960px) {
.exp-rail {
position: sticky;
top: 10rem;
max-height: calc(100vh - 12rem);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.exp-rail::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 959px) {
.exp-rail-head {
padding-bottom: 0.8rem;
}
.exp-rail-list {
flex-direction: row;
gap: 0.6rem;
overflow-x: auto;
padding: 0.2rem 0 1rem;
margin: 0 -0.8rem;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
.exp-rail-list::-webkit-scrollbar {
display: none;
}
.exp-rail-list > li {
scroll-snap-align: start;
flex: 0 0 auto;
}
.exp-rail-item {
grid-template-columns: auto auto auto;
gap: 0.8rem;
padding: 0.8rem 1.1rem;
border-left: none;
border: 1px solid rgba(157, 52, 218, 0.22);
border-radius: 999px;
background: rgba(12, 8, 20, 0.6);
}
.exp-rail-item[aria-current="true"] {
border-color: var(--brand);
background: rgba(157, 52, 218, 0.16);
box-shadow: 0 0 0 1px rgba(157, 52, 218, 0.4),
0 0 16px rgba(157, 52, 218, 0.25);
}
.exp-rail-company {
font-size: 1.2rem;
}
.exp-rail-body {
flex-direction: row;
gap: 0.8rem;
align-items: baseline;
}
.exp-rail-years {
font-size: 0.95rem;
}
}
/* --------- dossier stack --------- */
.exp-stack {
display: flex;
flex-direction: column;
gap: 2.4rem;
min-width: 0;
}
/* --------- case-file card --------- */
/* Double-class selector so we outscore the original
`.experience_experience__USIwr { padding: 0 1.2rem 2.4rem }` rule
shipped in eusvFygUQC0L.css. Without the bump, padding-top=0 wins
and the case-header crashes into the title. */
.exp-item.experience_experience__USIwr {
position: relative;
padding: 4.4rem 3.2rem 2.8rem;
margin-bottom: 0;
background: linear-gradient(
180deg,
rgba(22, 14, 34, 0.85) 0%,
rgba(12, 8, 20, 0.92) 100%
);
border: 1px solid rgba(157, 52, 218, 0.2);
border-bottom: 1px solid rgba(157, 52, 218, 0.2);
border-radius: 0.6rem;
overflow: hidden;
scroll-margin-top: 10rem;
transition: border-color 0.35s ease, box-shadow 0.35s ease,
transform 0.35s ease;
}
.exp-item::before {
/* subtle scanline texture, constrained to inside the card */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
opacity: 0.6;
border-radius: inherit;
}
.exp-item:hover {
border-color: rgba(157, 52, 218, 0.45);
box-shadow: 0 0 0 1px rgba(157, 52, 218, 0.15),
0 18px 40px -24px rgba(157, 52, 218, 0.55);
transform: translateY(-2px);
}
/* reveal-on-scroll: card fades + rises in when IntersectionObserver
hits 12% visibility. Desktop only to avoid mobile scroll jank. */
.exp-item {
opacity: 1;
}
@media (min-width: 720px) {
.exp-item {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s ease, box-shadow 0.35s ease;
}
.exp-item.exp-in-view {
opacity: 1;
transform: translateY(0);
}
}
/* --------- chrome injected by enhance.js --------- */
.exp-chrome {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.exp-case-header {
position: absolute;
top: 1.4rem;
left: 1.8rem;
right: 1.8rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, monospace);
font-size: 1.05rem;
letter-spacing: 0.1em;
text-transform: uppercase;
z-index: 3;
}
.exp-case-id {
color: rgba(192, 132, 252, 0.88);
white-space: nowrap;
}
.exp-case-dates {
flex: 1 1 auto;
text-align: center;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.14em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.exp-case-status {
padding: 0.2rem 0.8rem;
border-radius: 0.2rem;
border: 1px solid currentColor;
letter-spacing: 0.12em;
font-size: 0.95rem;
white-space: nowrap;
}
/* Drop the case-dates line on very narrow cards — the rail still shows
the year range, and the status chip + case id take priority. */
@media (max-width: 520px) {
.exp-case-dates {
display: none;
}
}
.exp-case-status--active {
color: #86efac;
background: rgba(134, 239, 172, 0.08);
box-shadow: 0 0 12px -2px rgba(134, 239, 172, 0.35);
}
.exp-case-status--archived {
color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.02);
}
.exp-watermark {
position: absolute;
bottom: 0.4rem;
right: 1.6rem;
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, monospace);
font-size: 7rem;
line-height: 0.85;
font-weight: 800;
color: rgba(157, 52, 218, 0.07);
letter-spacing: -0.05em;
pointer-events: none;
user-select: none;
z-index: 0;
}
/* L-shaped corner brackets, brand purple — aliases of the shared
.op-bracket primitive defined at the top of this file. Kept as
separate rules so legacy markup that ships .exp-bracket still
renders; values reference the same tokens. */
.exp-bracket {
position: absolute;
width: 1.4rem;
height: 1.4rem;
border-color: var(--op-bracket);
border-style: solid;
border-width: 0;
pointer-events: none;
transition: border-color 0.35s ease;
}
.exp-item:hover .exp-bracket {
border-color: var(--op-bracket-hot);
}
.exp-bracket--tl {
top: 0.7rem;
left: 0.7rem;
border-top-width: 1.5px;
border-left-width: 1.5px;
}
.exp-bracket--tr {
top: 0.7rem;
right: 0.7rem;
border-top-width: 1.5px;
border-right-width: 1.5px;
}
.exp-bracket--bl {
bottom: 0.7rem;
left: 0.7rem;
border-bottom-width: 1.5px;
border-left-width: 1.5px;
}
.exp-bracket--br {
bottom: 0.7rem;
right: 0.7rem;
border-bottom-width: 1.5px;
border-right-width: 1.5px;
}
/* --------- dossier body (existing markup re-styled) --------- */
.exp-item .experience_heading__LeH28 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem;
margin-bottom: 0.6rem;
position: relative;
z-index: 2;
}
.exp-item .experience_heading__LeH28:first-of-type {
margin-top: 0.4rem;
}
.exp-item .experience_heading__LeH28 + .experience_heading__LeH28 {
margin-bottom: 1.6rem;
padding-bottom: 1.4rem;
border-bottom: 1px dashed rgba(157, 52, 218, 0.18);
}
.exp-item .experience_title__hai7S {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.exp-item .experience_position__E06bW {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--brand);
}
.exp-item .experience_heading__LeH28 span:not(.experience_title__hai7S):not(.experience_position__E06bW):not(.chip) {
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, monospace);
font-size: 1.05rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.exp-item .experience_description__iz3mi {
font-size: 1.45rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 1.6rem;
max-width: 72ch;
position: relative;
z-index: 2;
}
/* existing "Current" chip is superseded by the new status badge —
hide it so we don't show both */
.exp-item .experience_heading__LeH28 .chip[style*="--brand"],
.exp-item .experience_heading__LeH28 .chip:first-child[style] {
display: none;
}
/* The first heading row's right-side wrapper holds duplicate "2024 – Present"
dates that we've promoted into .exp-case-header. Hide it so the top of the
card stays clean. `:first-of-type` won't work here because `.exp-chrome` is
also a div and precedes the headings — so we use the adjacent-sibling
combinator off the chrome to reliably pick the FIRST heading.
The second heading's right side (Remote / Stevenage · Hybrid) remains —
that's useful location info not shown elsewhere. */
.exp-item .exp-chrome + .experience_heading__LeH28 > div:last-child {
display: none;
}
/* The remaining title wrapper no longer needs space-between sharing — let
it take the full row so long company names don't clip awkwardly. */
.exp-item .exp-chrome + .experience_heading__LeH28 > div:first-child {
max-width: 100%;
}
.exp-item .experience_tech__jTuus {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.4rem;
position: relative;
z-index: 2;
}
.exp-item .experience_tech__jTuus .chip {
font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, monospace);
font-size: 1.05rem;
letter-spacing: 0.04em;
background: rgba(157, 52, 218, 0.1);
color: rgba(235, 220, 255, 0.88);
border: 1px solid rgba(157, 52, 218, 0.24);
padding: 0.3rem 0.9rem;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.exp-item .experience_tech__jTuus .chip:hover {
background: rgba(157, 52, 218, 0.2);
border-color: rgba(157, 52, 218, 0.55);
color: #fff;
}
/* Kill the reveal scrim divs the SSR template adds on top of each
text node (the purple sliding bars) — the case-file reveal replaces
that motif. */
.exp-item > div[style*="position: relative"][style*="overflow: hidden"]
> div[style*="position: absolute"][style*="background: var(--brand)"],
.exp-item .experience_heading__LeH28
> div[style*="position: relative"][style*="overflow: hidden"]
> div[style*="position: absolute"][style*="background: var(--brand)"] {
display: none;
}
.exp-item div[style*="opacity: 0"][style*="translateY(75px)"] {
opacity: 1 !important;
transform: none !important;
}
/* --------- responsive tightening --------- */
@media (max-width: 959px) {
.exp-item {
padding: 3.4rem 2rem 2.2rem;
}
.exp-watermark {
font-size: 7rem;
transform: translateY(1.5rem);
}
.exp-item .experience_title__hai7S {
font-size: 1.8rem;
}
.exp-item .experience_description__iz3mi {
font-size: 1.35rem;
}
.exp-case-header {
top: 1rem;
left: 1.3rem;
right: 1.3rem;
}
}
@media (prefers-reduced-motion: reduce) {
.exp-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.exp-rail-dot {
animation: none;
}
}
/* ===================== project modal ===================== */
/* Clicking a .featured-project card opens a full-screen modal with the
project's long-form detail. The card itself still exposes its GitHub /
GHCR buttons inline; the modal is the "expanded" view. */
.featured-project:not(.has-tilt):hover {
border-color: rgba(157, 52, 218, 0.5);
box-shadow: 0 12px 30px -18px rgba(157, 52, 218, 0.6);
}
.featured-project:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
body.project-modal-open {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
.project-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 2.4rem;
isolation: isolate;
}
.project-modal.is-open {
display: flex;
}
.project-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: projectModalFade 0.22s ease-out;
}
.project-modal-panel {
position: relative;
width: min(96rem, 100%);
max-height: calc(100vh - 4.8rem);
overflow-y: auto;
background: linear-gradient(180deg, var(--background-light), var(--background-dark));
border: 1px solid rgba(157, 52, 218, 0.3);
border-radius: 1.6rem;
padding: 3.2rem;
box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(157, 52, 218, 0.08);
animation: projectModalRise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.project-modal-close {
position: absolute;
top: 1.6rem;
right: 1.6rem;
width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
z-index: 2;
}
.project-modal-close:hover {
color: #fff;
background: rgba(157, 52, 218, 0.22);
border-color: var(--brand);
transform: scale(1.05);
}
.project-modal-media {
border-radius: 1rem;
overflow: hidden;
margin-bottom: 2rem;
background: var(--background);
border: 1px solid rgba(255, 255, 255, 0.06);
line-height: 0;
}
.project-modal-media img {
display: block;
width: 100%;
height: auto;
}
.project-modal-kicker {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 0.8rem;
}
.project-modal-title {
font-size: var(--text-lg);
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.2rem;
}
.project-modal-tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.8rem;
}
.project-modal-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1.2rem;
margin-bottom: 2rem;
}
.project-modal-stat {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 1rem 1.2rem;
background: var(--background);
border-radius: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.project-modal-stat-value {
font-size: var(--text-md);
font-weight: 700;
color: var(--brand);
line-height: 1;
}
.project-modal-stat-label {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
}
.project-modal-description {
font-size: var(--text-xs);
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 2.4rem;
}
.project-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.project-modal-actions .btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--text-xs);
font-weight: 500;
padding: 1rem 1.6rem;
border-radius: 0.8rem;
background: var(--background);
border: 1px solid rgba(255, 255, 255, 0.12);
color: inherit;
transition: all 0.15s;
}
.project-modal-actions .btn-ghost:hover {
border-color: var(--brand);
background: rgba(157, 52, 218, 0.12);
}
.project-modal-actions .btn-ghost.btn-ghost-container {
border-color: rgba(59, 185, 255, 0.35);
color: #bfe3ff;
}
.project-modal-actions .btn-ghost.btn-ghost-container:hover {
border-color: #3bb9ff;
background: rgba(59, 185, 255, 0.12);
color: #ffffff;
}
@keyframes projectModalFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes projectModalRise {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
.project-modal { padding: 1.2rem; }
.project-modal-panel { padding: 2rem 1.6rem; border-radius: 1.2rem; }
.project-modal-close { top: 1rem; right: 1rem; width: 3.6rem; height: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.project-modal-backdrop,
.project-modal-panel {
animation: none;
}
.featured-project {
transition: none;
}
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(../fonts/GUx9osHAcGCs.woff2) format("woff2");
unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc,
U+a830-a839, U+a8e0-a8ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(../fonts/RdTJRcgbXu8D.woff2) format("woff2");
unicode-range: U+0100-02af, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113,
U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(../fonts/yNDuVx9Naz3v.woff2) format("woff2");
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
U+feff, U+fffd;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/LPsacvFhcpKe.woff2) format("woff2");
unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc,
U+a830-a839, U+a8e0-a8ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/4sMw3J5RoAUH.woff2) format("woff2");
unicode-range: U+0100-02af, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113,
U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/rGjUQfAtuPzb.woff2) format("woff2");
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
U+feff, U+fffd;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/IUnRklGGkTB9.woff2) format("woff2");
unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc,
U+a830-a839, U+a8e0-a8ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/M3L6LCbFP8Cs.woff2) format("woff2");
unicode-range: U+0100-02af, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113,
U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/uTOMQIuPOStq.woff2) format("woff2");
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
U+feff, U+fffd;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/l258fhTTl3Iu.woff2) format("woff2");
unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc,
U+a830-a839, U+a8e0-a8ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/bWj307Xxj4nS.woff2) format("woff2");
unicode-range: U+0100-02af, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113,
U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/HvLOPIh3Oyyp.woff2) format("woff2");
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
U+feff, U+fffd;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(../fonts/L1decRVsCvGo.woff2) format("woff2");
unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc,
U+a830-a839, U+a8e0-a8ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(../fonts/AzFA12C0YHW6.woff2) format("woff2");
unicode-range: U+0100-02af, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113,
U+2c60-2c7f, U+a720-a7ff;
}
@font-face {
font-family: __Poppins_d4b8fc;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(../fonts/iQONYc1YjyBu.woff2) format("woff2");
unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215,
U+feff, U+fffd;
}
@font-face {
font-family: __Poppins_Fallback_d4b8fc;
src: local("Arial");
ascent-override: 92.83%;
descent-override: 30.94%;
line-gap-override: 8.84%;
size-adjust: 113.11%;
}
.__className_d4b8fc {
font-family: __Poppins_d4b8fc, __Poppins_Fallback_d4b8fc;
font-style: normal;
}
/* --- Skill matrix (domain row + hover/focus or touch toggle) --- */
.skill-matrix-wrap {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 100%;
max-width: 100%;
}
.skill-matrix {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.35rem 0.5rem;
position: relative;
width: 100%;
}
.skill-matrix__sep {
color: var(--text);
opacity: 0.35;
user-select: none;
line-height: 1.6;
padding: 0 0.1rem;
}
.skill-domain {
position: relative;
}
.skill-domain__trigger {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: rgba(157, 52, 218, 0.45);
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.skill-domain__trigger:hover,
.skill-domain__trigger:focus-visible {
color: var(--text);
text-decoration-color: var(--brand);
outline: none;
}
.skill-domain__panel {
position: absolute;
left: 0;
top: calc(100% + 0.5rem);
z-index: 30;
min-width: 14rem;
max-width: min(20rem, calc(100vw - 3rem));
padding: 0.85rem 1rem;
background: var(--background-light);
border: 1px solid rgba(157, 52, 218, 0.28);
border-radius: 0.5rem;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, visibility 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
.skill-domain__panel {
transition: none;
}
}
.skill-domain__list {
margin: 0;
padding-left: 1.1rem;
font-size: var(--text-xs);
font-weight: 400;
line-height: 1.55;
color: var(--text);
}
.skill-domain__list li {
margin-bottom: 0.25rem;
}
.skill-domain__list li:last-child {
margin-bottom: 0;
}
/* Fine pointer: reveal on hover or keyboard focus inside domain */
@media (hover: hover) and (pointer: fine) {
.skill-matrix[data-touch-mode="0"] .skill-domain:hover .skill-domain__panel,
.skill-matrix[data-touch-mode="0"] .skill-domain:focus-within .skill-domain__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Touch / coarse: only .is-open (JS) reveals */
.skill-matrix[data-touch-mode="1"] .skill-domain__panel {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.skill-matrix[data-touch-mode="1"] .skill-domain.is-open .skill-domain__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (max-width: 520px) {
.skill-matrix {
flex-direction: column;
gap: 0.25rem;
}
.skill-matrix__sep {
display: none;
}
.skill-domain__panel {
position: relative;
top: auto;
left: auto;
margin-top: 0.35rem;
margin-bottom: 0.5rem;
max-width: 100%;
}
}
/* --- Site footer --- */
.site-footer {
max-width: 100%;
padding: 2.4rem 3.6rem 1.6rem;
margin: 0 auto;
border-top: 1px solid rgba(157, 52, 218, 0.12);
}
@media (max-width: 768px) {
.site-footer {
padding: 2.4rem 2.4rem 1.2rem;
}
}
.site-footer__build {
font-size: var(--text-xs);
font-weight: 400;
line-height: 1.6;
color: var(--text);
opacity: 0.72;
margin: 0 0 0.75rem;
max-width: 42rem;
}
.site-footer__vibe {
font-size: var(--text-xs);
line-height: 1.55;
color: var(--text);
opacity: 0.55;
margin: 0;
max-width: 42rem;
}
.site-footer__vibe dfn {
font-style: normal;
font-weight: 600;
color: var(--brand);
opacity: 0.95;
cursor: help;
}
/* =======================================================================
OPERATOR-CONSOLE CONSISTENCY PASS — extensions
-----------------------------------------------------------------------
These rules spread the Experience section's operator/case-file
vocabulary to the rest of the page. Loaded at the end of
c4i7TDweBoBj.css so ids (#about, #projects, #contact, #experience)
can be used to raise specificity above upstream `.header_*`, `.chip`,
`.contact-form`, and `.skill-*` rules in eusvFygUQC0L.css (which
loads AFTER us — hence the need for id-scoped selectors).
======================================================================= */
/* --------- 1. Section-header kicker + dashed rule --------- */
/* Kicker sits above the existing .header_sectionHeader__aMRKR row. The
header row stays a flex line with the original line + title. We tweak
the line's visual to match the rail-head dashed rule so all sections
introduce themselves the same way. */
.section-wrapper > .op-kicker--section {
display: block;
margin: 0 0 0.6rem;
font-size: 1.15rem;
}
/* Upstream .header_line__AkXvu is a 1px white line at 30% opacity.
Swap for dashed brand rule. Two-class bump beats upstream (0,1,0). */
.section-wrapper .header_line__AkXvu {
height: 0;
background: transparent;
opacity: 1;
border-top: var(--op-rule-dashed);
}
/* Contact's title is a non-standard with contact_contactTitle;
kicker goes directly above it, same visual as section kickers. */
#contact > .op-kicker--section {
display: block;
text-align: center;
margin: 0 auto 0.6rem;
font-size: 1.15rem;
}
/* --------- 2. Project card chrome --------- */
/* Reserve top space for the injected case-header strip and make room
for brackets. Padding bumped via two-class tie-breaker. */
.featured-project.featured-project {
padding-top: 3.6rem;
scroll-margin-top: 10rem;
}
.featured-project.compact.compact {
padding-top: 3.2rem;
}
/* The .op-chrome wrapper mirrors .exp-chrome: inset, pointer-events off,
carries the case-header strip + corner brackets. */
.featured-project .op-chrome {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.featured-project .op-case-header {
position: absolute;
top: 1.2rem;
left: 1.6rem;
right: 1.6rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-mono);
font-size: 1.05rem;
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: none;
}
.featured-project .op-case-id {
color: var(--op-label);
white-space: nowrap;
}
.featured-project .op-case-status {
padding: 0.2rem 0.8rem;
border: 1px solid currentColor;
border-radius: 0.2rem;
letter-spacing: 0.12em;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
background: rgba(255, 255, 255, 0.02);
}
.featured-project:hover .op-bracket {
border-color: var(--op-bracket-hot);
}
/* Project card tags — upstream `.featured-project .chip` inherits the
pill shape from global `.chip`. Scope by section id so only project
cards get the rect mono treatment; experience keeps its own block;
other parts of the site keep pills. Three-class specificity wins. */
#projects .featured-project .chip {
font-family: var(--font-mono);
font-size: 1.05rem;
letter-spacing: 0.04em;
background: rgba(157, 52, 218, 0.1);
color: rgba(235, 220, 255, 0.88);
border: 1px solid rgba(157, 52, 218, 0.24);
border-radius: 0.4rem;
padding: 0.3rem 0.9rem;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#projects .featured-project .chip:hover {
background: rgba(157, 52, 218, 0.2);
border-color: rgba(157, 52, 218, 0.55);
color: #fff;
}
/* Subhead styled as a mono kicker (enhance.js already swaps the text
to "// contributions"). */
#projects .projects-subhead {
font-family: var(--font-mono);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--op-label);
margin-top: 4rem;
margin-bottom: 1.6rem;
}
/* --------- 3. Project modal alignment --------- */
.project-modal-kicker.project-modal-kicker {
font-family: var(--font-mono);
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.14em;
color: var(--op-label);
}
.project-modal .chip {
font-family: var(--font-mono);
letter-spacing: 0.04em;
background: rgba(157, 52, 218, 0.1);
color: rgba(235, 220, 255, 0.88);
border: 1px solid rgba(157, 52, 218, 0.24);
border-radius: 0.4rem;
}
/* --------- 4. Contact form polish --------- */
/* Labels: already uppercase — switch to mono + lavender meta color and
give the char-counter the same mono voice. Id-scoped to beat upstream
(0,2,0) rules that load after us. */
#contact .contact-form label {
font-family: var(--font-mono);
font-size: 1.1rem;
letter-spacing: 0.1em;
color: var(--op-label);
font-weight: 500;
}
#contact .contact-form .char-counter,
#contact .contact-form .field-error {
font-family: var(--font-mono);
letter-spacing: 0.05em;
}
#contact .contact-form input,
#contact .contact-form textarea {
border-radius: 0.4rem;
border-color: rgba(157, 52, 218, 0.18);
background: rgba(12, 8, 20, 0.65);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
#contact .contact-form input:focus,
#contact .contact-form textarea:focus {
border-color: var(--brand);
background: rgba(22, 14, 34, 0.85);
box-shadow: 0 0 0 3px rgba(157, 52, 218, 0.2);
}
#contact .contact-form .submit-btn {
font-family: var(--font-mono);
font-size: 1.3rem;
letter-spacing: 0.06em;
border-radius: 0.4rem;
padding: 1.1rem 1.8rem;
text-transform: none;
}
#contact .contact-form .form-success {
border-radius: 0.6rem;
background: var(--op-panel-bg);
border-color: rgba(110, 231, 183, 0.3);
}
#contact .contact-form .form-success h4 {
font-family: var(--font-mono);
font-size: 1.3rem;
letter-spacing: 0.14em;
color: #86efac;
}
#contact .contact-form .form-success p {
font-family: var(--font-mono);
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
}
/* --------- 5. About: skill-matrix panels + separators --------- */
#about .skill-domain__panel {
background: var(--op-panel-bg);
border: 1px solid var(--op-panel-border);
border-radius: 0.6rem;
overflow: hidden;
}
#about .skill-domain__panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
opacity: 0.6;
border-radius: inherit;
}
#about .skill-domain__trigger {
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
#about .skill-matrix__sep {
font-family: var(--font-mono);
font-size: 1.1rem;
opacity: 0.45;
color: var(--op-label);
}
/* Swap the middot text content to // via CSS, leaving HTML intact. */
#about .skill-matrix__sep {
font-size: 0;
}
#about .skill-matrix__sep::before {
content: "//";
font-size: 1.1rem;
letter-spacing: 0.1em;
}
/* --------- 6. Sidebar active-state echo --------- */
/* Upstream selector .sidebar_sideBar__UiTy0 .sidebar_selected__nGDNt
is (0,2,0). Bump via adding `a` for (0,2,1). Two pieces:
(a) 2px purple left accent, (b) a // prefix rendered via ::before. */
.sidebar_sideBar__UiTy0 a.sidebar_selected__nGDNt {
border-right: 2px solid var(--brand);
background: var(--background);
position: relative;
opacity: 1;
}
.sidebar_sideBar__UiTy0 a.sidebar_selected__nGDNt::before {
content: "//";
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%) rotate(0deg);
font-family: var(--font-mono);
font-size: 0.95rem;
letter-spacing: 0.12em;
color: var(--op-label);
writing-mode: horizontal-tb;
pointer-events: none;
}
/* --------- 7. Hero: kicker + rect pill + dashed scroll cue --------- */
.hero_hero__HQvTb .op-kicker--hero {
display: inline-block;
margin-bottom: 0.8rem;
font-size: 1.05rem;
opacity: 0.9;
}
.hero-pill.hero-pill {
border-radius: 0.3rem;
font-family: var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Scroll cue is a vertical 1px bar — convert it to a dashed purple line
so it visually matches the Experience rail / op-rule treatment. We
keep the animated sweep (.hero-scroll-line::after) untouched. */
.hero-scroll-cue .hero-scroll-line {
width: 0;
background: transparent;
border-left: 1px dashed rgba(157, 52, 218, 0.35);
}
/* Hero meta keys pick up the mono label color for cross-page harmony. */
.hero-meta-key {
color: var(--op-label);
}
/* --------- 8. Footer: mono build stamp + vibe line --------- */
.site-footer__build {
font-family: var(--font-mono);
font-size: 1.1rem;
letter-spacing: 0.06em;
color: var(--op-meta);
opacity: 0.85;
}
.site-footer__vibe {
font-family: var(--font-mono);
font-size: 1.1rem;
letter-spacing: 0.04em;
opacity: 0.55;
}
.site-footer__vibe dfn {
color: var(--brand);
font-weight: 700;
}
/* --------- 9. Reduced motion guard --------- */
@media (prefers-reduced-motion: reduce) {
.op-bracket,
.op-kicker,
.op-chip {
transition: none !important;
}
}
/* --------- 10. Small-screen tightening for new chrome --------- */
@media (max-width: 720px) {
.featured-project.featured-project {
padding-top: 3.2rem;
}
.featured-project .op-case-header {
top: 1rem;
left: 1.2rem;
right: 1.2rem;
font-size: 0.95rem;
}
#projects .projects-subhead {
margin-top: 2.4rem;
}
.section-wrapper > .op-kicker--section {
font-size: 1.05rem;
}
}
/* --------- 11. Mobile: burger (header top-right) + drawer; rail hidden --------- */
.mobile-nav {
display: none;
}
.mobile-nav__toggle {
display: none;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
margin: 0;
padding: 0;
border: none;
border-radius: 0.8rem;
background: transparent;
color: var(--text);
cursor: pointer;
flex-shrink: 0;
touch-action: manipulation;
}
.mobile-nav__toggle:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mobile-nav__burger {
position: relative;
width: 2.2rem;
height: 2px;
background: currentColor;
border-radius: 1px;
}
.mobile-nav__burger::before,
.mobile-nav__burger::after {
content: "";
position: absolute;
left: 0;
width: 2.2rem;
height: 2px;
background: currentColor;
border-radius: 1px;
}
.mobile-nav__burger::before {
top: -7px;
}
.mobile-nav__burger::after {
top: 7px;
}
.mobile-nav__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.25s ease;
cursor: pointer;
}
.mobile-nav.is-open .mobile-nav__backdrop {
opacity: 1;
}
.mobile-nav__panel {
position: absolute;
top: 0;
right: 0;
width: min(20rem, 88vw);
height: 100%;
max-height: 100dvh;
background: linear-gradient(180deg, #14101c 0%, #0a0810 100%);
border-left: 1px solid rgba(157, 52, 218, 0.35);
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
z-index: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open .mobile-nav__panel {
transform: translateX(0);
}
.mobile-nav__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem 1.4rem 1.2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav__title {
font-family: var(--font-mono);
font-size: 1.05rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--op-label);
font-weight: 600;
}
.mobile-nav__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin: 0;
padding: 0;
border: none;
border-radius: 0.8rem;
background: transparent;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
touch-action: manipulation;
}
.mobile-nav__close:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.mobile-nav__links {
display: flex;
flex-direction: column;
padding: 1.2rem 0.8rem 2rem;
gap: 0.4rem;
}
.mobile-nav__link {
display: block;
padding: 1.4rem 1.6rem;
font-size: var(--text-md);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
border-radius: 0.8rem;
border: 1px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
color: #fff;
background: rgba(157, 52, 218, 0.12);
border-color: rgba(157, 52, 218, 0.25);
outline: none;
}
.mobile-nav__link.sidebar_selected__nGDNt,
.mobile-nav__link.sidebar_selected__nGDNt:hover {
color: #fff;
background: rgba(157, 52, 218, 0.2);
border-color: rgba(157, 52, 218, 0.45);
}
@media (max-width: 768px) {
.mobile-nav {
display: block;
position: fixed;
inset: 0;
z-index: 10050;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.mobile-nav__toggle {
display: inline-flex;
}
.heading_heading__HzVG7 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.home_home__XM4a6 {
grid-template-columns: 1fr;
}
.sidebar_sideBar__UiTy0 {
display: none !important;
}
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.mobile-nav__panel,
.mobile-nav__backdrop {
transition: none !important;
}
.mobile-nav {
transition: none !important;
}
}