/* ============================================================ Maeven Design — style.css ============================================================ */ :root { /* primaries */ --blue: #0052FF; --teal: #00C8A3; --gradient: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); /* backgrounds */ --bg: #F8FAFB; --bg-warm: #F1F5F4; --bg-navy: #333A4E; --bg-gray: #EAECF1; --surface: #0D1B2A; /* text */ --ink: #0D1B2A; --ink-soft: #5A6B7A; --muted: #8B99A8; /* borders */ --line: rgba(13, 27, 42, 0.10); --line-strong: rgba(13, 27, 42, 0.20); /* functional */ --accent:#0D1B2A; --accent-glow: rgba(0, 82, 255, 0.08); --teal-soft: rgba(0, 200, 163, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background: var(--bg); color: var(--ink); scroll-behavior: smooth; font-family: 'Fraunces', Georgia, serif; -webkit-font-smoothing: antialiased; } #work{ scroll-margin-top: 100px; } /* ============================================================ NEW (1/2) — TOP SCROLL-PROGRESS BAR Fixed hairline across the top; script.js scales it on scroll. ============================================================ */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 999; background: var(--ink); /*transform: scaleX(0);*/ /*transform-origin: 0 50%;*/ } /* ── NAV ── Replace the existing nav block in style.css with this. Font: Inter (add to : Inter:wght@300;400;500;600) Collapse: .collapsed hides .nav-links via max-width + opacity. ────────────────────────────────────────────────────────────── */ nav { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 2rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem; background: rgba(248, 250, 251, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /*border: 0.5px solid rgba(13, 27, 42, 0.08);*/ border-radius: 999px; width: fit-content; transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Collapsed state — links slide out, gap closes ── */ nav.collapsed { gap: 0.5rem; } /* ── Logo ── */ .nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; flex-shrink: 0; overflow: visible; } .nav-logo img { height: 14px; width: auto; display: block; } .nav-logo-text { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 500; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 0; } nav.collapsed .nav-logo-text { max-width: 120px; opacity: 1; margin-left: 7px; } /* ── Nav links — collapse via max-width for smooth squeeze ── */ .nav-links { display: flex; align-items: center; gap: 0.15rem; list-style: none; overflow: hidden; max-width: 260px; min-width: 0; opacity: 1; transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } nav.collapsed .nav-links { max-width: 0; opacity: 0; transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.2s ease; } .nav-links a { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 400; color: var(--muted); text-decoration: none; padding: 0.35rem 0.7rem; position: relative; white-space: nowrap; transition: color 0.25s ease; } /* Gradient underline — slides in on hover / active */ .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: 25%; width: 50%; height: 1.5px; background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 1px; transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: var(--ink); font-weight: 500; } .nav-links a.active::after { transform: scaleX(1); } /* ── Resume button — animated gradient, pauses on hover ── */ .nav-resume-wrap { flex-shrink: 0; border-radius: 999px; padding: 1.5px; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; animation: gradient-shift 10s linear infinite; transition: transform 0.2s ease; } .nav-resume-wrap:hover { animation-play-state: paused; transform: translateY(-1px); } .nav-resume { display: block; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.4rem 1.05rem; border-radius: 999px; background: var(--bg); color: var(--ink); transition: background 0.3s ease, color 0.3s ease; } .nav-resume-wrap:hover .nav-resume { background: #0D1B2A; color: #fff; } /* ── CANVASES ── Both share the same pixel space, stacked behind content. #three (WebGL dots) sits UNDER #particles (2D vector layer: lines / hi-fi). */ #three, #particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* ── HERO ── */ .hero { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 4rem; } .hero-top { display: flex; justify-content: space-between; align-items: baseline; } .brand { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 1.1rem; color: var(--ink); } .nav-hint { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .hero-main { display: flex; flex-direction: column; gap: 1.75rem; align-items: center; text-align: center; } .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 1rem; } .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--ink); flex-shrink: 0; } .hero-title { font-size: clamp(2rem, 7vw, 6.5rem); line-height: 0.93; font-weight: 300; letter-spacing: -0.03em; max-width: 1000px; } .hero-title em { display: inline-block; font-style: italic; font-weight: 600; letter-spacing: -0.01em; padding-right: 0.12em; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: -200% 50%; } } .hero-subtitle { font-size: clamp(1rem, 4vw, 4rem); line-height: 0.93; font-weight: 100; letter-spacing: -0.03em; max-width: 1000px; } .hero-bottom { display: flex; justify-content: center; gap: 2rem; } .lede { max-width: 400px; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); } .scroll-cue { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); transform: rotate(0deg); animation: bob 2.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: rotate(0deg) translateY(0); opacity: 0.55; } 50% { transform: rotate(0deg) translateY(-20px); opacity: 1; } } .scroll-cue-projects { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); position: absolute; left: 44%; top:48rem; transform: rotate(0deg); animation: bob 2.5s ease-in-out infinite; } /* ── STEP PROGRESS RAIL ── Four segments that fill as you scroll the Discover → Launch sequence. Vertical, in the left margin beside the copy, on desktop; the max-width: 768px block flips it horizontal above the stacked copy. The fill axis is set here rather than in script.js, which only reports progress as --fill. */ .step-rail { position: fixed; left: 2rem; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 8px; opacity: 0; pointer-events: none; will-change: opacity; } .step-rail-seg { width: 2px; height: 56px; border-radius: 1px; background: var(--line); overflow: hidden; } .step-rail-seg i { display: block; width: 100%; height: 100%; border-radius: inherit; /*background: linear-gradient(180deg, var(--blue), var(--teal));*/ background: var(--bg-navy); transform: scaleY(var(--fill, 0)); transform-origin: top center; will-change: transform; } /* ── PROCESS SECTIONS ── */ .discover { position: relative; z-index: 1; } .discover-track { height: 100vh; } .design { position: relative; z-index: 1; } .design-track { height: 100vh; } .design-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 4rem; gap: 4rem; } .step-text { display: flex; flex-direction: column; gap: 1.5rem; max-width: 500px; } .step-number { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.85rem; } .step-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .step-title { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.025em; max-width: 700px; } .step-title em { font-style: italic; font-weight: 600; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; } .step-body { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); } .discover-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 4rem; gap: 4rem; } .step-meta { display: flex; gap: 2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding-top: 1rem; border-top: 1px solid rgba(26, 25, 22, 0.15); margin-top: 0.5rem; } .step-meta span strong { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0.12em; margin-top: 0.35rem; } .build { position: relative; z-index: 1; } .build-track { height: 100vh; } .build-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 4rem; gap: 4rem; } .launch { position: relative; z-index: 1; } .launch-track { height: 100vh; } .launch-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 4rem; gap: 4rem; } /* ── WORK / PROJECTS ── */ .work { position: relative; z-index: 1; } .work-track { height: 500vh; } .work-cue { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 15vh; text-align: center; opacity: 0; pointer-events: none; z-index: 0; transition: opacity 0.3s ease; } .work-cue-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .work-cue-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); } .work-cue-title em { font-style: italic; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; } /* ── PROJECTS STRIP ── */ .projects-strip { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; pointer-events: none; opacity: 0; z-index: 5; will-change: transform; } .projects-strip.visible { opacity: 1; pointer-events: auto; } .proj-card { flex: 0 0 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; } .proj-inner { position: absolute; background: var(--card-bg); border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 4rem; overflow: hidden; } .proj-left { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; } .proj-num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--card-sub); } .proj-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--card-fg); } .proj-title em { font-style: italic; color: var(--card-accent); } .proj-body { font-size: clamp(0.85rem, 1.2vw, 1rem); line-height: 1.6; color: var(--card-sub); margin: 0; max-width: 380px; } .proj-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .proj-tags span { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-sub); padding: 0.4rem 0.8rem; border: 1px solid color-mix(in srgb, var(--card-sub) 40%, transparent); border-radius: 999px; } .proj-cta { align-self: flex-start; margin-top: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-bg); background: var(--card-accent); padding: 0.8rem 1.3rem; text-decoration: none; border-radius: 4px; transition: opacity 0.2s ease; } .proj-cta:hover { opacity: 0.85; } .proj-right { display: flex; align-items: center; justify-content: center; } .proj-img { width: 100%; height: 90%; display: block; border-radius: 8px; } .proj-img img { width: 100%; height: 100%; /*aspect-ratio: 16 / 9;*/ object-fit: cover; object-position: center center; display: block; border-radius: 8px; } .proj-left, .proj-right { opacity: 0; transition: opacity 0.15s ease; } /* ── GALLERY / MY OTHER DESIGN SYSTEM ── */ .gallery-track { height: 200vh; } .gallery { position: relative; z-index: 6; padding: 6vh 4rem 8vh; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: #EAECF1; position: sticky; top: 0; height: 100vh; overflow: hidden; /*background: var(--gradient);*/ } .gallery-header { text-align: center; margin-bottom: 4vh; } .gallery-title { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6rem; } .gallery-title em { font-style: italic; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; } .gallery-sub { font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); max-width: 380px; margin: 0 auto; } /* NEW (2/2) — `perspective` here makes the polaroids' rotateX/rotateY (added in script.js on hover) read as real 3D depth instead of a flat skew. */ .polaroids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 0 1rem; perspective: 1200px; } .polaroid { background: #FFFFFF; padding: 8px 8px 34px; border-radius: 8px; box-shadow: 0 2px 8px rgba(26, 25, 22, 0.08), 0 6px 20px rgba(26, 25, 22, 0.06); transform: rotate(var(--rot, 0deg)); transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.4s ease, z-index 0s; cursor: pointer; position: relative; z-index: 1; will-change: transform; /* NEW — smoother tilt */ } /* Pop-up on hover (the JS tilt extends this with rotateX/rotateY). .is-active is the tap equivalent for touch, which never fires :hover — toggled in script.js. It skips the scale/z-index pop-up (the tight 4-row mobile grid has no room to spare) and only swaps colour + label. */ .polaroid:hover { transform: rotate(0deg) scale(1.12); box-shadow: 0 8px 28px rgba(26, 25, 22, 0.16), 0 2px 8px rgba(26, 25, 22, 0.08); z-index: 10; } /* Grayscale → colour on hover */ .polaroid-img { width: 100%; display: block; border-radius: 6px; filter: grayscale(100%) contrast(1.05); transition: filter 0.5s ease; object-fit: cover; aspect-ratio: 4 / 4; height: auto; } .polaroid:hover .polaroid-img, .polaroid.is-active .polaroid-img { filter: grayscale(0%) contrast(1); } .polaroid-label { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 0.7rem; color: var(--ink-soft); opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .polaroid:hover .polaroid-label, .polaroid.is-active .polaroid-label { opacity: 1; transform: translateY(0); } /* Overlap: row 2 pulls up into row 1 */ .polaroid:nth-child(1) { margin-top: 1rem; } .polaroid:nth-child(2) { margin-top: 1rem; } .polaroid:nth-child(3) { margin-top: 1rem; } .polaroid:nth-child(4) { margin-top: 1rem; } .polaroid:nth-child(5) { margin-top: -2rem; z-index: 3; } .polaroid:nth-child(6) { margin-top: -2rem; z-index: 2; } .polaroid:nth-child(7) { margin-top: -2rem; z-index: 4; } .polaroid:nth-child(8) { margin-top: -2rem; z-index: 1; } @media (max-width: 900px) { .gallery { padding: 4vh 2rem 6vh; } /* Two columns means eight polaroids make four rows, not two. Rather than sizing them off the width and hoping the result clears 100vh — the gallery is a pinned, overflow-hidden screen, so anything that doesn't fit is simply cut off — the grid takes whatever height is left over and splits it four ways. Fits any phone without per-device tuning. */ .polaroids { grid-template-columns: repeat(2, 1fr); /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), whose auto floor keeps each row at least as tall as the image's natural height, so the rows overflow instead of sharing the space. */ grid-template-rows: repeat(4, minmax(0, 1fr)); flex: 1; min-height: 0; gap: 10px; } /* The staggered offsets above are keyed to the four-column rows; at two columns they land on the wrong children and open a gap between rows one and two. The rotation already supplies the scattered look. */ .polaroids .polaroid { margin-top: 0; display: flex; flex-direction: column; min-height: 0; /* Bottom chin roomy enough for a two-line caption to sit on the white frame instead of directly over the image — the image (flex: 1) gives up whatever this takes. */ padding: 6px 6px 32px; } /* Fills whatever the row leaves after the frame's padding and crops to it, rather than dictating the row's height from its own proportions. */ .polaroids .polaroid-img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; object-fit: cover; } /* Absolutely positioned over the image, so keeping it doesn't cost the tight 4-row grid any space — it now reveals on tap via .is-active. */ .polaroid-label { font-size: 0.6rem; white-space: normal; line-height: 1.2; } } /* ── ABOUT ── */ .about { position: sticky; z-index: 6; margin-top: -100vh; min-height: 100vh; border-radius: 58px; background: var(--bg); padding: 12vh 4rem; overflow: hidden; color: var(--ink); } .about-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 90px; align-items: center; } /* Photo — single clean tilt-on-hover, no extra ornament */ .about-image { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(13, 27, 42, 0.14); transition: transform 0.2s ease-out; will-change: transform; } .about-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; } /* Labels */ .about-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.65rem; } .about-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .about-content { display: flex; flex-direction: column; } .about-heading { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.6rem); line-height: 1.35; color: var(--ink); padding: 1rem 0 1.5rem; max-width: 30ch; } .about-heading em { font-style: italic; font-weight: 500; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; display: inline-block; padding-right: 0.08em; margin-right: -0.08em; } /* Inspiration line — moved up under the heading */ .inspiration-text { max-width: 50ch; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } .inspiration-text .hl { color: var(--ink); font-weight: 500; font-style: normal; background: linear-gradient(to top, rgba(0, 200, 163, 0.28) 40%, transparent 40%); padding: 0 0.1em; } .inspiration-text em { font-style: italic; font-weight: 500; background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; display: inline-block; padding-right: 0.08em; margin-right: -0.08em; } /* Skills + Tools — one shared row instead of two stacked blocks */ .meta-row { display: flex; gap: 3rem; flex-wrap: wrap; padding-top: 2rem; margin-top: 1.5rem; border-top: 1px solid var(--line); } .meta-col { display: flex; flex-direction: column; gap: 0.9rem; } .meta-col--skills { flex: 1 1 420px; } .skills-list { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 0 1.75rem; max-width: 420px; list-style: none; } .skills-list li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); cursor: default; } .skills-num { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--muted); transition: background 0.2s ease, -webkit-text-fill-color 0.2s ease; } .skills-name { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--ink-soft); transition: color 0.2s ease, transform 0.2s ease; } .skills-list li:hover { border-bottom-color: var(--line-strong); } .skills-list li:hover .skills-name { color: var(--ink); transform: translateX(3px); } .skills-list li:hover .skills-num { background: linear-gradient(90deg, var(--blue), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tools-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tools-inline span { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; transition: color 0.2s ease, border-color 0.2s ease; } /*.tools-inline span:hover { color: var(--ink); border-color: var(--blue); }*/ /* ===== Responsive ===== */ @media (max-width: 992px) { .about { padding: 8vh 2rem; } .about-container { grid-template-columns: 1fr; gap: 48px; } .about-image img { min-height: 420px; } .meta-row { flex-direction: column; gap: 2rem; } } @media (max-width: 576px) { .about { padding: 6vh 1.25rem; } .about-heading { font-size: 1.4rem; } .inspiration-text { font-size: 1rem; max-width: 100%; } } /* ── FOOTER ── */ .footer { position: relative; z-index: 6; background: #EAECF1; padding: 10vh 10vh 0 10vh; overflow: hidden; } .footer-top { max-width: 1200px; margin: 0 auto 8vh; display: flex; justify-content: space-between; align-items: center; } .footer-hook { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 300; line-height: 1.2; color: var(--ink); margin: 0 0 2rem; } .footer-hook em { background: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 10s linear infinite; } .footer-actions { width: 50%; display: flex; align-items: end; flex-direction: column; gap: 1rem; } .footer-navigation, .footer-contact { width: 45%; /* ← was missing, rows had no shared width */ display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* ← consistent gap between items in both rows */ transition: background 0.2s ease; } .footer-navigation a { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.2s; } .footer-navigation a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.25s ease; } .footer-navigation a:hover, .footer-navigation a.active { color: var(--ink); } .footer-navigation a:hover::after, .footer-navigation a.active::after { width: 100%; } .footer-social { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .footer-social:hover { background: var(--accent); } .footer-cta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg); background: var(--ink); padding: 0.9rem 1.6rem; text-decoration: none; border-radius: 999px; transition: background 0.2s ease; } .footer-cta:hover { background: var(--accent); } .footer-brand { max-width: 1200px; margin: 0 auto; overflow: hidden; } .footer-maeven { width: 100%; height: auto; display: block; transform: scaleY(1.4); transform-origin: top; user-select: none; margin-bottom: 11.5vh; } .footer-bottom { max-width: 1200px; margin: 3vh auto 0; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(26, 25, 22, 0.12); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } @media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: 3rem; } .about { padding: 8vh 2rem; } .footer { padding: 8vh 2rem 3vh; } .carousel-track img { width: 140px; height: 140px; } } /* ══════════════════════════════════════════════ NEXT PROJECT — shared component, injected by /assets/next-project.js into
══════════════════════════════════════════════ */ .next-project { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34vh 0; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; } .next-project-glow { position: absolute; width: 640px; height: 640px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(51, 58, 78, 0.10) 0%, rgba(51, 58, 78, 0.04) 45%, transparent 70%); filter: blur(10px); pointer-events: none; z-index: 0; } .next-project-eyebrow { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6E6E6E; margin-bottom: 1.5rem; padding-bottom: 0.4rem; } .next-project-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #6E6E6E; flex-shrink: 0; transition: background 0.3s ease, transform 0.3s ease; } /* Gradient underline reveal — same idiom as .nav-links a::after / .footer-navigation a::after */ .next-project-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #0052FF, #00C8A3); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .next-project:hover .next-project-eyebrow::after { transform: scaleX(1); } .next-project:hover .next-project-eyebrow-dot { background: #00C8A3; transform: scale(1.4); } .next-project-title-wrap { position: relative; z-index: 2; width: 100%; padding: 0 6vw; } .next-project-title { --mx: 50%; --my: 50%; position: relative; z-index: 2; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.15; letter-spacing: -0.02em; text-align: center; max-width: 100%; overflow-wrap: break-word; margin: 0; will-change: transform; background-image: linear-gradient(90deg, #0052FF, #00C8A3, #0052FF, #00C8A3, #0052FF); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: next-project-gradient-shift 10s linear infinite; transition: background-image 0.15s ease; } /* On hover, freeze the ambient sweep and let the gradient bloom from the cursor instead — a spotlight that tracks --mx/--my (set from JS), fading to ink at the edges. NOTE: use background-image (not the `background` shorthand) — the shorthand resets background-clip to border-box, which paints a solid box instead of clipping to the glyphs. */ .next-project:hover .next-project-title { animation-play-state: paused; background-image: radial-gradient(circle 320px at var(--mx) var(--my), #00C8A3, #0052FF 45%, var(--ink) 75%); background-size: 100% 100%; } @keyframes next-project-gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: -200% 50%; } } /* Cursor-follow "View" badge — the magnetic project-link pattern */ .next-project-badge { position: absolute; top: 0; left: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 96px; height: 96px; border-radius: 50%; background: rgba(248, 250, 251, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line-strong); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translate(-50%, -50%) scale(0.5); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; will-change: transform; } .next-project-badge-arrow { background: linear-gradient(90deg, #0052FF, #00C8A3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .next-project.is-hovering .next-project-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); } .next-project.is-hovering .next-project-badge-arrow { transform: translateX(3px); } @media (max-width: 768px), (hover: none) { .next-project { padding: 12vh 0 6vh; cursor: pointer; } .next-project-badge { display: none; } } /* ── MOBILE: no cursor, so the magnetic badge and the wide ambient glow both fall apart. At phone width the 640px glow fills the whole block and reads as a hard-edged grey slab instead of a halo. Rebuild the block as a self-contained card with a real tap target. ── */ @media (max-width: 768px) { .next-project { padding: 3rem 1.5rem 3.25rem; margin-top: 2.5rem; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, var(--bg) 0%, #ffffff 70%); } .next-project-glow { width: 280px; height: 280px; top: 42%; filter: blur(34px); opacity: 0.7; } .next-project-eyebrow { margin-bottom: 1.1rem; } .next-project-title-wrap { padding: 0; } .next-project-title { font-size: clamp(2.1rem, 11vw, 3.2rem); line-height: 1.08; } /* the cursor-follow badge becomes a static pill under the title — on touch it was the only affordance and it was hidden outright */ .next-project-badge { display: inline-flex; position: static; z-index: 2; width: auto; height: auto; margin-top: 2rem; padding: 0.7rem 1.4rem; border-radius: 999px; background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; transition: none; will-change: auto; } } @media (prefers-reduced-motion: reduce) { .next-project-title { animation: none; } .next-project:hover .next-project-title { background-image: linear-gradient(90deg, #0052FF, #00C8A3); } .next-project-badge { transition: opacity 0.2s ease; } } /* ══════════════════════════════════════════════ MOBILE / SMALL SCREEN — LANDING PAGE ══════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Hero ── */ .hero { padding: 1.25rem 1.25rem 2rem; } .hero-top { margin-top: 3.75rem; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; } .hero-main { gap: 1.1rem; } .hero-title { font-size: clamp(2.1rem, 10vw, 3rem); } .hero-subtitle { font-size: clamp(1.2rem, 6vw, 2rem); } /* ── Process steps (Discover / Design / Build / Launch) ── Single column, text anchored to the top of the sticky viewport so it doesn't collide with the wireframe illustration, which script.js now docks lower on mobile (boxY). The tracks are taller than their sticky child so the sticky actually has somewhere to travel — at the default 100vh/100vh it never pins at all, and the copy just scrolls away from the viewport-fixed canvas, leaving the screen half empty. The extra 60vh gives each step a beat where the copy holds at the top with its finished wireframe below, before the next step animates in. (The triggers span 'top bottom' → 'top top' = 100vh either way, so the animations themselves are unchanged.) */ .discover-track, .design-track, .build-track, .launch-track { height: 160vh; } .discover-sticky, .design-sticky, .build-sticky, .launch-sticky { grid-template-columns: 1fr; align-items: start; padding: 6.5rem 1.5rem 0; gap: 0; } .step-text { max-width: 100%; gap: 0.85rem; } .step-title { font-size: clamp(1.7rem, 8vw, 2.4rem); } .step-body { font-size: 0.88rem; line-height: 1.5; } /* ── Work / Projects cards ── */ .work-cue { padding-top: 12vh; } .work-cue-title { padding: 0 0.5rem; } .scroll-cue-projects { left: 50%; transform: translateX(-50%); top: auto; bottom: 6vh; } .proj-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 1.75rem; gap: 1.25rem; } .proj-left { gap: 0.75rem; } .proj-title { font-size: clamp(1.4rem, 7vw, 2rem); } .proj-body { font-size: 0.85rem; max-width: 100%; } .proj-right { min-height: 0; } /* ── Footer ── */ .footer { padding: 8vh 1.5rem 0; } .footer-top { flex-direction: column; align-items: flex-start; gap: 2.5rem; margin-bottom: 6vh; } .footer-hook { width: 100% !important; font-size: clamp(1.4rem, 7vw, 2rem); } .footer-actions { width: 100%; align-items: flex-start; } .footer-navigation, .footer-contact { width: 100%; flex-wrap: wrap; } .footer-maeven { margin-bottom: 5vh; } .footer-bottom { flex-direction: column; gap: 0.75rem; align-items: flex-start; } } @media (max-width: 480px) { .polaroids { grid-template-columns: repeat(2, 1fr); gap: 12px; } .about-heading { max-width: 100%; } } @media (max-width: 900px) { .gallery { justify-content: flex-start; padding-top: 13vh; } } @media (max-width: 768px) { /* The desktop "about slides up over the gallery" pin effect assumes a two-column layout short enough to fit one screen. Stacked single-column content (photo + full text) is taller than 100vh, so on mobile it drops the pin/overflow-clip and flows normally instead of getting cropped. */ .about { position: static; margin-top: 0; min-height: auto; overflow: visible; padding: 8vh 1.5rem 6vh; } .about-image img { min-height: 320px; height: 320px; } .skills-list { grid-template-columns: 1fr; max-width: 100%; gap: 0; } /* The copy lane. All four steps' copy is lifted out of flow into one fixed lane at the top of the screen, and swapped in place by syncStepText(). Previously each block scrolled through the viewport with its section, which is what opened the empty gap between steps — and what the illustration was then moving to cover. With the copy parked, the gap never opens and the illustration can hold still. */ /* Rail and copy sit lower than the nav would require, so the pair reads as one group with the illustration below it rather than being stranded at the top of the screen. */ .step-text { position: fixed; top: 10rem; /* clears the rail above it */ left: 1.5rem; right: 1.5rem; z-index: 2; opacity: 0; will-change: opacity, transform; } /* The rail is the lane's constant: it stays put while the copy swaps beneath it, so the top of the screen is never empty — including the beat between two steps. Horizontal here, vertical on desktop. */ .step-rail { top: 8.5rem; left: 1.5rem; right: 1.5rem; transform: none; flex-direction: row; gap: 6px; } .step-rail-seg { flex: 1; width: auto; height: 2px; } .step-rail-seg i { background: var(--bg-navy); transform: scaleX(var(--fill, 0)); transform-origin: left center; } .hero-bottom { transition: opacity 0.45s ease; } .hero-bottom.out-of-view { opacity: 0; } }