/* ====================================================== Chris Cotton UX — Portfolio (Figma-matched rebuild) ====================================================== */ /* ===== Custom Properties ===== */ :root { /* Palette — warm cream */ --bg: #F4F3EE; --bg-2: #EDE8DE; --surface: #E8E2D8; --border: rgba(0,0,0,0.10); --text: #1A1A18; --text-2: #5A5650; --text-3: #9A9590; /* Card outer colours (text on pill) */ --apps-out: #0d0d0d; --web-out: #0d0d0d; --brand-out: #0d0d0d; --ai-out: #ffffff; /* Card inner colours (pill background = exact card colour) */ --apps-in: #3676FF; --web-in: #FFD146; --brand-in: #ffffff; --ai-in: #0E4C4B; /* Nav */ --pill-bg: #111; --r-card: clamp(14px, 2.8vw, 32px); /* scales with viewport so corners stay proportional as cards shrink */ --r-frame: 4px; --nav-h: 56px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Belt-and-braces horizontal-scroll fix for iOS Safari, which historically ignored `overflow-x: clip` on body. `hidden` on doesn't break position:fixed (that's a body-level pitfall), and clamps the document width to the viewport. */ overflow-x: hidden; width: 100%; } body { background-color: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; transition: background-color 0.15s ease; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip (not hidden) — prevents horizontal bleed without making body a scroll container, which would break position:fixed children */ width: 100%; max-width: 100vw; padding-bottom: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: rgba(245,196,64,0.35); } :focus-visible { outline: 2px solid #3676FF; outline-offset: 3px; border-radius: 3px; } /* ====================================================== LOGO ====================================================== */ .logo { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; color: var(--text-2); display: block; position: fixed; top: 40px; left: var(--logo-left, 28px); z-index: 9100; margin-bottom: 0; transform-origin: top left; transition: transform 0.35s var(--ease-out); } .logo--scrolled { transform: scale(0.6); } /* Mobile: shrink by 30% on scroll (less aggressive than the desktop 0.6). Keeps the wordmark legible in the corner while still settling out of the way as the user scrolls. */ @media (max-width: 699px) { .logo--scrolled { transform: scale(0.7); } } /* Canvas open — logo is moved into the overlay by JS so it renders above canvas art. */ body[data-card] .logo { z-index: 9100; } /* ====================================================== HERO ====================================================== */ .hero { /* Fill the viewport so the content block sits vertically centred */ height: 100dvh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; /* Top padding clears the fixed logo; bottom gives breathing room */ padding: 96px 28px 80px; } .hero-text { margin-bottom: 36px; } /* Hero scroll-in entrance */ .hero-word { display: inline-block; opacity: 0; transform: translateY(40px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .hero-word.is-in { opacity: 1; transform: translateY(0); } h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; } /* Magnetic text — perspective so rotationY looks 3-D */ .magnetic-text { perspective: 700px; transform-style: preserve-3d; } .magnetic-text .char { display: inline-block; will-change: transform; cursor: default; } .hero-sub { font-size: 1.32rem; color: var(--text-2); font-weight: 400; line-height: 1.65; max-width: 75%; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .hero-sub.is-in { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .hero-sub { font-size: 0.99rem; } } /* ===== Generic scroll-reveal for section headings ===== JS splits text into .sr-word spans, groups by line, and wobbles each line in. CSS just provides the initial hidden state; transitions are handled by WAAPI. */ .scroll-reveal { opacity: 0; } /* Word spans inserted by scroll-reveal JS */ .sr-word { display: inline-block; white-space: nowrap; } /* ===== Cards Frame ===== */ .cards-frame { position: relative; border: 1px solid rgba(0,0,0,0.15); border-radius: var(--r-frame); padding: 20px 16px 16px; transition: border-color 0.25s var(--ease-out); } /* Hide frame border when hovering or a card is active */ .cards-frame:has(.card:hover), .cards-frame:has(.card.active) { border-color: transparent; } /* Corner handles — shared styles */ .handle { position: absolute; width: 9px; height: 9px; background: #B8B2A8; border-radius: 1px; opacity: 0; transition: opacity 0.25s var(--ease-out); pointer-events: none; z-index: 6; } .h-tl { top: -5px; left: -5px; } .h-tr { top: -5px; right: -5px; } .h-bl { bottom: -5px; left: -5px; } .h-br { bottom: -5px; right: -5px; } /* Frame handles: visible by default, interactive for column-drag */ .cards-frame > .handle { opacity: 1; pointer-events: all; cursor: ew-resize; } /* Expanded invisible hit area so they're easy to grab */ .cards-frame > .handle::before { content: ''; position: absolute; inset: -10px; } .cards-frame:has(.card:hover) > .handle, .cards-frame:has(.card.active) > .handle { opacity: 0; } /* Card handles: show on hover or active */ .card:hover .handle, .card.active .handle { opacity: 1; } /* Card selection border: show only on active (selected) */ .card.active::before { content: ''; position: absolute; inset: -1px; border: 1px solid rgba(0,0,0,0.22); border-radius: calc(var(--r-card) + 1px); pointer-events: none; z-index: 5; } /* ===== Cards Row ===== */ .cards-row { display: flex; gap: 10px; justify-content: stretch; } /* Single card */ .card { flex: 1; min-width: 126px; /* cards don't shrink below their natural desktop width */ border-radius: var(--r-card); display: flex; flex-direction: column; cursor: pointer; position: relative; container-type: inline-size; /* enables cqi units → label font scales with card width */ transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); user-select: none; } .card:nth-child(1) { transform: rotate(-6deg) translateY(4px); animation: card-in-1 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.05s; } .card:nth-child(2) { transform: rotate(5deg) translateY(-6px); animation: card-in-2 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.15s; } .card:nth-child(3) { transform: rotate(-4deg) translateY(4px); animation: card-in-3 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.25s; } .card:nth-child(4) { transform: rotate(6deg) translateY(-2px); animation: card-in-4 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.35s; } @keyframes card-in-1 { from { transform: rotate(-6deg) translateY(140px); opacity: 0; } to { transform: rotate(-6deg) translateY(4px); opacity: 1; } } @keyframes card-in-2 { from { transform: rotate(5deg) translateY(140px); opacity: 0; } to { transform: rotate(5deg) translateY(-6px); opacity: 1; } } @keyframes card-in-3 { from { transform: rotate(-4deg) translateY(140px); opacity: 0; } to { transform: rotate(-4deg) translateY(4px); opacity: 1; } } @keyframes card-in-4 { from { transform: rotate(6deg) translateY(140px); opacity: 0; } to { transform: rotate(6deg) translateY(-2px); opacity: 1; } } /* Hero-mode hover only — body:not([data-card]) ensures JS fan transforms are never overridden by !important when a canvas is open */ body:not([data-card]) .card:hover { transform: rotate(0deg) translateY(-6px) scale(1.02) !important; z-index: 5; } .card.active { transform: rotate(0deg) translateY(-4px) !important; z-index: 4; } /* Card inner area — aspect-ratio keeps cards proportional at any width */ .card-inner { border-radius: calc(var(--r-card) - 10px); margin: 20px; aspect-ratio: 4/3; overflow: hidden; } /* Card image — fills inner stage */ .card-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lottie inner — keeps card's background tint, centres the player */ .card-inner--lottie { display: flex; align-items: center; justify-content: center; } .card-inner--lottie dotlottie-player { width: 100%; height: 100%; } /* Video inner — img visible by default, video fades in on card hover */ .card-inner--video { position: relative; padding: 0; } .card-inner--video .card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.35s ease; } /* Hide the poster image while the card is hovered so any video letter- boxing or alpha edge can't reveal the still beneath it. */ .card:hover .card-inner--video .card-img { opacity: 0; } .card-video { position: absolute; /* Slight overflow + scale so the video fully covers the rounded card stage edge — kills the thin background-coloured hairline that can appear at the inner corners on certain aspect mismatches. */ inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; display: block; opacity: 0; transform: scale(1.02); transform-origin: center; transition: opacity 0.35s ease; } .card:hover .card-video { opacity: 1; } /* Card label — font scales with card width so all 4 labels stay on one line together */ .card-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: min(13cqi, 2.565rem); /* 13% of card width; equal-width cards = all same size */ font-weight: 400; letter-spacing: 0.01em; padding: 4px 20% 16px 20px; /* 20% right keeps longest label clear of edge */ display: block; } /* Bottom-right arrow badge — same style as canvas thumb hover hint */ .card-hint { position: absolute; bottom: 14px; right: 14px; width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.18s var(--ease-out), transform 0.22s var(--ease-spring); pointer-events: none; color: var(--text); z-index: 5; } .card--brand .card-hint { background: #e8e8e8; } .card:hover .card-hint { opacity: 1; transform: scale(1); } /* Card colour overrides */ .card--apps { background: #3676FF; } .card--apps .card-inner { background: #3676FF; } .card--apps .card-label { color: #fff; } .card--websites { background: #FFD146; } .card--websites .card-inner { background: #FFD146; } .card--websites .card-label { color: #000; } .card--brand { background: #fff; } .card--brand .card-inner { background: #fff; } .card--brand .card-label { color: #000; } .card--ai { background: #0E4C4B; } .card--ai .card-inner { background: #0E4C4B; } .card--ai .card-label { color: #fff; } /* ====================================================== WORK PANEL — sticky title left, scrolling grid right ====================================================== */ .work-panel { display: flex; align-items: flex-start; padding: 80px 28px 120px; gap: 60px; transition: gap 0.4s var(--ease-out); } /* Tile mode: header stacks above full-width grid */ .work-panel--tiles { flex-direction: column; gap: 32px; } /* Left column: sticky title — pins to vertical centre of viewport */ .work-panel__left { position: sticky; top: 50vh; transform: translateY(-50%); flex: 0 0 auto; width: clamp(220px, 26vw, 320px); transition: width 0.4s var(--ease-out), max-width 0.4s var(--ease-out); } .work-panel__left .about-title { margin-bottom: 24px; } /* Tile mode: left col becomes full-width header strip */ .work-panel--tiles .work-panel__left { position: static; transform: none; top: auto; width: 100%; } .work-panel--tiles .about-title { max-width: 800px; margin-bottom: 28px; } /* Controls wrapper: holds filters + view toggle */ .work-panel__controls { display: flex; flex-direction: column; gap: 0; } /* Tile mode: filters + toggle collapse into one row */ .work-panel--tiles .work-panel__controls { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 8px; } .work-panel--tiles .work-view-toggle { margin-top: 0; } /* Filter buttons */ .work-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .work-panel--tiles .work-filters { flex-wrap: nowrap; margin-top: 0; } /* Hollow active filter in tile mode */ .work-panel--tiles .work-filter--active { background: transparent; border-color: var(--text-1); color: var(--text-1); font-weight: 400; } .work-filter { background: transparent; border: 1.5px solid rgba(26,26,24,0.3); border-radius: 999px; color: var(--text-1); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 18px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .work-filter:hover { border-color: rgba(26,26,24,0.7); } .work-filter--active { background: var(--text-1); border-color: var(--text-1); color: var(--bg-page); } /* ===== Work view toggle (rows / tiles) ===== */ .work-view-toggle { display: flex; gap: 6px; margin-top: 16px; } .work-view-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid rgba(26,26,24,0.18); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(26,26,24,0.4); transition: background 0.15s, color 0.15s, border-color 0.15s; } .work-view-btn:hover { border-color: rgba(26,26,24,0.5); color: rgba(26,26,24,0.8); } .work-view-btn--active { background: rgba(26,26,24,0.08); border-color: rgba(26,26,24,0.3); color: rgba(26,26,24,0.85); } /* Hidden filtered thumbnails */ .work-thumb.work-thumb--hidden { display: none; } /* Right column: single-column grid */ .work-panel__right { flex: 1 1 auto; min-width: 0; } .work-panel__grid { display: grid; grid-template-columns: min(700px, 100%); gap: 40px; transition: gap 0.4s var(--ease-out); } /* ===== Tile view override ===== */ .work-panel--tiles .work-panel__right { width: 100%; } .work-panel__grid--tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; width: 100%; } .work-panel__grid--tiles .work-thumb { border-radius: 10px; } .work-panel__grid--tiles .work-thumb--tall { grid-row: span 2; } .work-panel__grid--tiles .work-thumb--tall img { height: 100%; object-fit: cover; } /* Desktop-only tall variant — applies the same span-2 treatment but only above the mobile breakpoint, so a portrait-cropped tile (e.g. Supapix) stays a normal single-row tile on small screens. */ @media (min-width: 700px) { .work-panel__grid--tiles .work-thumb--tall-desktop { grid-row: span 2; } .work-panel__grid--tiles .work-thumb--tall-desktop img { height: 100%; object-fit: cover; } .work-panel__grid--tiles .work-thumb--tall-desktop video.work-thumb__video { height: 100%; object-fit: cover; } } /* Tile-in animation */ @keyframes tile-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } } .work-panel__grid--tiles .work-thumb:not(.work-thumb--hidden) { animation: tile-in 0.35s var(--ease-out) both; } .work-panel__grid--tiles .work-thumb:nth-child(2) { animation-delay: 35ms; } .work-panel__grid--tiles .work-thumb:nth-child(3) { animation-delay: 70ms; } .work-panel__grid--tiles .work-thumb:nth-child(4) { animation-delay: 105ms; } .work-panel__grid--tiles .work-thumb:nth-child(5) { animation-delay: 140ms; } .work-panel__grid--tiles .work-thumb:nth-child(6) { animation-delay: 175ms; } .work-panel__grid--tiles .work-thumb:nth-child(7) { animation-delay: 210ms; } .work-panel__grid--tiles .work-thumb:nth-child(8) { animation-delay: 245ms; } .work-panel__grid--tiles .work-thumb:nth-child(9) { animation-delay: 280ms; } .work-panel__grid--tiles .work-thumb:nth-child(10) { animation-delay: 315ms; } .work-panel__grid--tiles .work-thumb:nth-child(11) { animation-delay: 350ms; } .work-panel__grid--tiles .work-thumb:nth-child(12) { animation-delay: 385ms; } .work-panel__grid--tiles .work-thumb:nth-child(13) { animation-delay: 420ms; } /* Individual thumbnails */ .work-thumb { display: block; position: relative; border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--surface); transition: transform 0.25s var(--ease-out); /* iOS Safari: stop the browser hesitating between "is this a tap?" and "is this a scroll?" — `manipulation` removes the 300ms double-tap-zoom delay AND keeps native vertical scrolling responsive when a touch starts on a thumb. Fixes the "scroll gets stuck over the folio" bug. */ touch-action: manipulation; } .work-thumb:hover { transform: translateY(-4px); } /* Top-right arrow badge — appears on hover (matches homepage cards) */ .work-thumb::after { content: ''; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: #fff url("data:image/svg+xml;utf8,") no-repeat center center; border-radius: 50%; opacity: 0; transform: scale(0.5); transition: opacity 0.18s var(--ease-out), transform 0.22s var(--ease-spring); pointer-events: none; z-index: 5; } .work-thumb:hover::after { opacity: 1; transform: scale(1); } .work-thumb img { display: block; width: 100%; aspect-ratio: 900 / 630; object-fit: contain; } .work-thumb__cat { display: none; } .work-thumb__label { position: absolute; bottom: 12px; left: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 20px; pointer-events: none; z-index: 4; /* above video(1), reveal canvas(2) */ } /* Autoplay video overlay — sits above static img, below label */ .work-thumb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 0.4s ease; } .work-thumb__video.is-playing { opacity: 1; } /* Pixel-reveal canvas overlay on each folio card */ .work-thumb__reveal { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.28s ease; } /* Mobile: stack vertically */ @media (max-width: 699px) { .work-panel { flex-direction: column; gap: 32px; padding: 80px 20px 80px; /* match other section top padding */ } .work-panel__left { position: static; width: 100%; } } /* ====================================================== WORK SECTION ====================================================== */ .work { padding: 240px 28px 4vh; } .work.revealed { animation: work-reveal 0.6s var(--ease-out) both; } @keyframes work-reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } /* Connector from hero → work intro */ .connector-wrap--intro { position: relative; display: flex; align-items: flex-start; gap: 0; margin-bottom: 20px; } .connector-svg { width: 200px; height: 120px; flex-shrink: 0; overflow: visible; } .work-intro { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 400; line-height: 1.3; color: var(--text-2); max-width: 380px; padding-top: 60px; align-self: center; } /* Work list */ .work-list { display: flex; flex-direction: column; gap: 0; } /* Between-project curves */ .between-curve { width: 100%; height: 100px; overflow: visible; } .between-curve svg { width: 100%; height: 100%; overflow: visible; } /* Project item */ .project { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; gap: 8px; padding: 12px 0; } .project--alt .project-info { order: 1; } .project--alt .project-connector { order: 2; } .project--alt .project-visual { order: 3; } /* On mobile, stack vertically */ @media (max-width: 640px) { .project { grid-template-columns: 1fr; } .project-connector { display: none; } .project--alt .project-info { order: 1; } .project--alt .project-visual { order: 2; } } /* Project connector (vertical line) */ .project-connector { display: flex; justify-content: center; height: 100%; min-height: 200px; } .project-connector svg { width: 48px; height: 100%; overflow: visible; } /* Project visual frame */ .mockup-frame { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; min-height: 240px; display: flex; align-items: center; justify-content: center; } /* ── Phone duo mockup ── */ .phones-duo { position: relative; width: 180px; height: 180px; } .phone { position: absolute; width: 80px; height: 148px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 14px; overflow: hidden; background: #1a2340; } .phone--back { top: 20px; left: 4px; transform: rotate(-7deg); z-index: 1; } .phone--front { top: 8px; right: 4px; transform: rotate(5deg); z-index: 2; } .phone-screen { width: 100%; height: 100%; padding: 8px 6px; } .ps-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.2); margin-bottom: 5px; } .ps-bar--short { width: 55%; } .ps-gap { height: 10px; } .ps-card { border-radius: 6px; background: rgba(255,255,255,0.08); height: 48px; margin-bottom: 6px; } .ps-card--sm { height: 28px; } /* ── Desktop mockup ── */ .desktop-mock { width: 240px; } .desktop-screen { width: 100%; height: 148px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; } .ds-nav { height: 16px; background: rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.05); } .ds-hero { margin: 8px 10px 6px; height: 44px; border-radius: 5px; background: rgba(255,255,255,0.08); } .ds-grid { display: flex; gap: 5px; padding: 0 10px; } .ds-item { flex: 1; height: 48px; border-radius: 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05); } /* ── Brand mockup ── */ .brand-mock { width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .bm-mark { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg, #2B6FD4, #F5C440); margin-bottom: 16px; } .bm-palette { display: flex; gap: 7px; margin-bottom: 14px; } .bm-palette span { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); display: block; } .bm-lines { display: flex; flex-direction: column; gap: 6px; } .bm-line { height: 5px; border-radius: 3px; background: rgba(0,0,0,0.10); width: 80%; } .bm-line--h { height: 8px; background: rgba(0,0,0,0.14); width: 100%; } .bm-line--sm { width: 50%; } /* Project info */ .project-info { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; } .project-desc { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 400; line-height: 1.45; color: var(--text-2); max-width: 340px; } /* ====================================================== ABOUT BLOCK — scrollable bio / history section ====================================================== */ .about-block { max-width: 660px; margin: 0 auto; padding: 72px 0 24px; position: relative; /* anchor for the curve SVG */ overflow: visible; } /* ── "For the love of design" curved text ── */ .about-curve-svg { position: fixed; /* pinned to viewport — guarantees path entry is always at screen bottom */ bottom: 0; left: 0; width: 100%; height: 700px; overflow: visible; pointer-events: none; z-index: 6; opacity: 0; /* JS controls visibility */ } .about-curve-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 155px; font-weight: 400; fill: var(--text); letter-spacing: -3px; } .about-chip { display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; padding: 5px 16px; border-radius: 20px; background: var(--surface); color: var(--text-2); margin-bottom: 32px; /* The .about-block is a flex column, which would otherwise stretch the chip to full width. Pin it to its natural content width and left-align. */ align-self: flex-start; width: fit-content; } .about-title { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin-bottom: 36px; } .about-meta { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border); } .about-meta-item { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; color: var(--text-2); line-height: 1.5; } .about-meta-item strong { display: block; font-weight: 500; color: var(--text); margin-bottom: 3px; } .about-body { margin-bottom: 48px; } .about-body p { font-family: 'Inter', sans-serif; font-size: 1.12rem; line-height: 1.78; color: var(--text-2); margin-bottom: 20px; } /* ===== SCATTER TEXT WRAP ===== */ .about-scatter-wrap { position: relative; margin-bottom: 48px; } #about-scatter-canvas, #canvas-intro-scatter-canvas { display: block; pointer-events: none; transition: opacity 0.4s ease; } /* Real text sits absolutely on top — hidden while canvas animates */ .about-scatter-wrap .about-body { position: absolute; top: 0; left: 0; right: 0; margin-bottom: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } /* Fully assembled: swap to real DOM text */ .about-scatter-wrap .about-body.is-assembled { opacity: 1; pointer-events: auto; } #about-scatter-canvas.is-assembled, #canvas-intro-scatter-canvas.is-assembled { opacity: 0; } .about-clients { padding-top: 32px; } .about-clients-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 14px; } /* Logo grid — 4 col, white cells, 1px cream gaps */ /* ===== LOGO MARQUEE ===== */ .logo-marquee { /* Break out of parent padding to fill full viewport width */ width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 24px 0 48px; } .logo-marquee__row { overflow: hidden; } .logo-marquee__track { display: flex; gap: 12px; will-change: transform; /* Row 2 starts offset so it appears to come from the right */ } .logo-marquee__track[data-dir="1"] { transform: translateX(-25%); } .logo-pill { flex-shrink: 0; border-radius: 16px; background: #fff; padding: 18px 28px; display: flex; align-items: center; justify-content: center; min-width: 140px; height: 80px; } .logo-pill img { max-width: 110px; max-height: 38px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: opacity 0.2s ease, filter 0.2s ease; } .logo-pill img[alt="KFC"] { max-height: 30px; } .logo-pill:hover img { opacity: 1; filter: grayscale(0); } /* ====================================================== TRUSTED BY ====================================================== */ /* Accessibility utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .trusted-section { /* overflow: hidden removed — body overflow-x:clip handles horizontal bleed; pills need to be able to fall below this section's boundary during scatter */ overflow: visible; padding: 16px 0 90px; /* Bleed past parent section's horizontal padding so the marquee runs the full viewport width */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } /* ─── Heading — SVG textPath curve ───────────────────── */ .trusted-hed { margin-bottom: 44px; pointer-events: none; /* overflow intentionally visible — text allowed to bleed off sides; body overflow-x:clip handles viewport clipping */ } .trusted-hed-svg { display: block; width: 100%; height: auto; overflow: visible; /* let text render beyond SVG bounds */ } .tb-path-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 155px; /* SVG units — sized so full phrase fits in viewport when centred */ font-weight: 400; letter-spacing: -2px; fill: var(--text); } /* ─── Three-row marquee (row 0 forward, row 1 reverse, row 2 forward) ─── */ .tb-rows { display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity 0.6s ease 0.25s; overflow-x: clip; /* clips marquee at viewport edges */ overflow-y: visible; /* lets scattered pills fall into the testimonials below */ } /* Rows visible once text has landed */ .trusted-section.is-landed .tb-rows { opacity: 1; } .trusted-section.is-split .tb-rows { opacity: 1; } .tb-row { display: flex; align-items: center; gap: 14px; width: max-content; will-change: transform; /* position driven by JS marquee engine — no CSS animation */ } /* ─── Logo pill tooltip ───────────────────────────────── */ #tb-tooltip { position: fixed; z-index: 9999; pointer-events: none; max-width: 260px; background: var(--text); color: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5; padding: 10px 14px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; white-space: normal; } #tb-tooltip.is-visible { opacity: 1; transform: translateY(0); } #tb-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--text); } @keyframes tb-drift-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tb-drift-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ─── Fixed-size pills ────────────────────────────────── */ .tb-pill { flex-shrink: 0; width: 140px; height: 78px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 12px; box-sizing: border-box; } .tb-pill img { display: block; width: auto; height: auto; max-width: 100px; max-height: 50px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.35s ease, opacity 0.35s ease; } /* Logos that read too large in the white pill — scale the cap by 15% so they sit at the same visual weight as the rest of the row. Match by src so both the original and the marquee duplicates inherit the smaller size. */ .tb-pill img[src*="KFC"], .tb-pill img[src*="UncleTobys"], .tb-pill img[src*="PayID"], .tb-pill img[src*="IBM"] { max-width: 85px; max-height: 42.5px; } .tb-pill:hover img { filter: grayscale(0); opacity: 1; } /* Mobile-only rows hidden on desktop */ .tb-row--mob { display: none; } @media (max-width: 767px) { .trusted-section { padding: 60px 0 70px; } .tb-rows { opacity: 1; } .tb-row { animation-play-state: running; } /* The SVG viewBox is 2700 units wide — on mobile it crushes down to ~37px tall. Scale the element up so the heading reads at a proper size. */ .trusted-hed { overflow: visible; margin-bottom: 113px; } .trusted-hed-svg { transform: scale(3.5); transform-origin: center top; } } @media (max-width: 600px) { /* Show extra rows */ .tb-row--mob { display: flex; } /* Scale the whole ticker — 25% larger than baseline */ .tb-rows { gap: 10px; } .tb-row { gap: 10px; } .tb-pill { width: 110px; height: 63px; border-radius: 10px; } .tb-pill img { max-width: 73px; max-height: 38px; } } /* Arrow button */ .arrow-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); color: var(--text); transition: background 0.2s, border-color 0.2s, transform 0.25s var(--ease-out); flex-shrink: 0; } .arrow-btn:hover { background: var(--surface); border-color: rgba(0,0,0,0.2); transform: translateX(4px); } /* ====================================================== SCROLL HINT ====================================================== */ #scroll-hint { position: fixed; bottom: max(92px, calc(80px + env(safe-area-inset-bottom))); /* clears toolbar + iOS safe area */ left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 9000; white-space: nowrap; /* Reset button defaults so the element looks identical to the previous div */ background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } #scroll-hint.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #scroll-hint:hover .scroll-hint-chevron { animation-play-state: paused; transform: translateY(2px); } .scroll-hint-chevron { color: var(--text-2); animation: sh-bounce 1.5s ease-in-out infinite; } @keyframes sh-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } .scroll-hint-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-2); margin: 0; text-transform: lowercase; } .sh-o { display: inline-block; animation: sh-o-out 2s ease-in-out infinite; } .sh-o:nth-child(1) { animation-delay: 0s; } .sh-o:nth-child(2) { animation-delay: 0.22s; } .sh-o:nth-child(3) { animation-delay: 0.44s; } .sh-o:nth-child(4) { animation-delay: 0.66s; } @keyframes sh-o-out { 0%, 35%, 100% { transform: scaleX(1) translateY(0); opacity: 1; } 60% { transform: scaleX(0.05) translateY(1px); opacity: 0; } 80% { transform: scaleX(1.15) translateY(-1px); opacity: 1; } } /* ====================================================== BOTTOM NAV PILL ====================================================== */ .bottom-nav { position: fixed; bottom: max(28px, calc(16px + env(safe-area-inset-bottom))); left: 50%; transform: translateX(-50%); background: var(--pill-bg); border-radius: 100px; padding: 12px 28px; display: flex; align-items: center; gap: 24px; z-index: 9900; box-shadow: 0 8px 32px rgba(0,0,0,0.18); transition: transform 0.4s var(--ease-out), opacity 0.4s ease; } .bottom-nav--hidden { transform: translateX(-50%) translateY(80px); opacity: 0; pointer-events: none; } /* On mobile, wide marquee rows inflate the layout width so left:50% overshoots. Switch to margin:auto centering which always uses the visual viewport. */ @media (max-width: 767px) { .bottom-nav { left: 0; right: 0; width: max-content; margin: 0 auto; transform: none; } .bottom-nav--hidden { transform: translateY(80px); } } .nav-icon { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: rgba(255,255,255,0.45); transition: color 0.2s; position: relative; } .nav-icon:hover, .nav-icon.active { color: #ffffff; } /* ── Nav tooltips ── */ .nav-tooltip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(10px) scale(0.86); transform-origin: center bottom; background: #1a1a18; color: #ffffff; padding: 7px 14px; border-radius: 100px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; user-select: none; opacity: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.16); transition: opacity 0.14s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 9200; } /* Tiny caret pointing down toward the toolbar */ .nav-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a18; } .nav-icon:hover .nav-tooltip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); transition: opacity 0.12s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Dismiss instantly on mouseout */ .nav-icon:not(:hover) .nav-tooltip { transition: opacity 0.12s ease, transform 0.2s ease; } /* ====================================================== BURGER MENU PANEL ====================================================== */ .nav-menu-panel { position: fixed; background: #1a1a18; border-radius: 12px; padding: 4px 0; min-width: 160px; opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: bottom center; pointer-events: none; transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); z-index: 9850; box-shadow: 0 8px 40px rgba(0,0,0,0.28); } .nav-menu-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .nav-menu-item { display: block; padding: 7px 18px; color: rgba(232, 230, 220, 0.8); font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .nav-menu-item:hover { color: #fff; background: rgba(255,255,255,0.07); } .nav-menu-item + .nav-menu-item { border-top: 1px solid rgba(255,255,255,0.06); } .nav-burger[aria-expanded="true"] { color: #fff; } /* Burger → X animation */ .nav-burger svg line { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; transform-box: fill-box; transform-origin: center; } .nav-burger[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-burger[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ====================================================== ANALYTICS PANEL ====================================================== */ /* The dashboard .dash is exactly 800 × 600px. The dashboard body has 24px padding all round, so the full iframe document is 848 × 648px. We size the panel to 800 × 600 and offset the iframe by -24px to clip that padding, showing the .dash flush. */ .analytics-panel { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(max(28px, 16px + env(safe-area-inset-bottom)) + 56px + 14px); width: min(calc(100vw - 32px), 800px); height: 600px; background: #000; border-radius: 14px; overflow: hidden; z-index: 9850; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -4px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset; } .analytics-panel.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Iframe: 48px larger on each axis, pulled back 24px to clip body padding */ .analytics-panel__iframe { position: absolute; top: -24px; left: -24px; width: calc(100% + 48px); height: calc(100% + 48px); border: none; display: block; } /* Close X — floats top-right over the iframe */ .analytics-panel__close { all: unset; position: absolute; top: 10px; right: 10px; z-index: 10; cursor: pointer; color: rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); transition: color 0.15s, background 0.15s; } .analytics-panel__close:hover { color: #fff; background: rgba(255,255,255,0.12); } /* Analytics btn — active state */ .nav-analytics-btn[aria-expanded="true"] { color: #fff; } /* Mobile: clamp height so it fits */ @media (max-width: 599px) { .analytics-panel { width: calc(100vw - 16px); height: 80vh; } } /* ====================================================== CONTACT PANEL ====================================================== */ .contact-panel { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(max(28px, 16px + env(safe-area-inset-bottom)) + 56px + 14px); width: min(calc(100vw - 32px), 480px); background: #1a1a18; border-radius: 14px; overflow: hidden; z-index: 9850; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -4px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset; } .contact-panel.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .contact-panel__inner { padding: 28px 28px 24px; } .contact-panel__heading { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin: 0 0 20px; } /* Close X — floats top-right */ .contact-panel__close { all: unset; position: absolute; top: 10px; right: 10px; z-index: 10; cursor: pointer; color: rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.06); transition: color 0.15s, background 0.15s; } .contact-panel__close:hover { color: #fff; background: rgba(255,255,255,0.14); } /* Dark-theme overrides for form elements inside the panel */ .contact-panel .contact-card { background: transparent; box-shadow: none; padding: 0; border-radius: 0; } .contact-panel .form-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); } .contact-panel .form-input:focus { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); } .contact-panel .form-input::placeholder { color: rgba(255,255,255,0.3); } .contact-panel .form-robot-check { color: rgba(255,255,255,0.45); } .contact-panel .form-robot-check input[type="checkbox"] { border-color: rgba(255,255,255,0.25); background: transparent; } .contact-panel .form-robot-check input[type="checkbox"]:checked { background: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.85); } .contact-panel .form-robot-check input[type="checkbox"]:checked::after { border-color: #1a1a18; } .contact-panel .form-submit { background: #fff; color: #1a1a18; padding-top: 18px; padding-bottom: 18px; } .contact-panel .form-submit:hover { background: rgba(255,255,255,0.88); } .contact-panel .form-success-msg { color: rgba(255,255,255,0.9); } .contact-panel .form-success-sub, .contact-panel .form-success-sub a { color: rgba(255,255,255,0.45); } .contact-panel .form-success-sub a:hover { color: rgba(255,255,255,0.75); } .contact-panel .form-sending-overlay { background: rgba(26,26,24,0.7); } @media (max-width: 599px) { .contact-panel { width: calc(100vw - 16px); } .contact-panel__inner { padding: 24px 20px 20px; } } /* ====================================================== SOCIAL (fixed bottom-right) ====================================================== */ .social-fixed { position: fixed; bottom: 28px; right: 28px; display: flex; gap: 8px; /* Above #intro-pills (z-index: 500) so the X / LinkedIn icons stay interactive even when pills cluster bottom-right. */ z-index: 600; } .social-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; transition: opacity 0.2s, transform 0.2s var(--ease-out); } .social-btn:hover { opacity: 0.82; transform: translateY(-2px); } .social-btn--x { background: #1A1A18; color: #fff; } .social-btn--li { background: #0A66C2; color: #fff; } .social-fixed { transition: opacity 0.4s ease, transform 0.4s var(--ease-out); } .social-fixed--hidden { opacity: 0; pointer-events: none; transform: translateY(12px); } @media (max-width: 768px) { .social-fixed { flex-direction: column; bottom: 124px; } } /* ====================================================== ASK AI — its own pill, sits next to the bottom-nav (same height as .bottom-nav so they read as a row). ====================================================== */ .ask-ai-btn { position: fixed; /* Sit at the same vertical line as .bottom-nav and immediately to its right. The bottom-nav is centred via translateX(-50%); this pill anchors at viewport-centre + half the nav's measured width + a gap. JS keeps the left offset in sync via the --nav-half-width variable so the pill always hugs the nav regardless of width. */ left: calc(50% + var(--nav-half-width, 200px) + 14px); bottom: max(28px, calc(16px + env(safe-area-inset-bottom))); /* Match the bottom-nav's measured height (set by JS to --nav-height). */ width: var(--nav-height, 44px); height: var(--nav-height, 44px); background: var(--pill-bg); color: #fff; border: none; border-radius: 999px; /* pill once expanded; circle while square */ display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; cursor: pointer; z-index: 9900; overflow: hidden; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.18); transition: width 0.32s var(--ease-out), padding 0.32s var(--ease-out), transform 0.25s var(--ease-out), opacity 0.3s ease, background 0.2s ease; } .ask-ai-btn__icon { display: block; pointer-events: none; flex-shrink: 0; margin-left: calc((var(--nav-height, 44px) - 18px) / 2); } /* Label uses IBM Plex Mono and animates letter-by-letter on hover. The button width transitions (set on .ask-ai-btn above), so the pill visually grows alongside the typed-out text. */ .ask-ai-btn__label { display: inline-flex; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #fff; pointer-events: none; white-space: pre; /* keep spaces in split chars */ } .ask-ai-btn__char { display: inline-block; opacity: 0; transform: translateY(4px); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); transition-delay: calc(var(--i, 0) * 18ms); } .ask-ai-btn:hover { width: auto; padding-right: 18px; transform: translateY(-2px); } .ask-ai-btn:hover .ask-ai-btn__char { opacity: 1; transform: translateY(0); /* On enter, stagger forward; reverse the delay so the first char wins out fastest and the last char trails. */ transition-delay: calc(var(--i, 0) * 24ms + 60ms); } .ask-ai-btn .nav-tooltip { /* reuse the same hover tooltip style as the bottom-nav icons */ bottom: calc(100% + 8px); } .ask-ai-btn.is-open { background: #fff; color: var(--text); } /* Hide while the bottom-nav itself is hidden (mirrors .bottom-nav--hidden) */ .bottom-nav--hidden ~ .ask-ai-btn { opacity: 0; pointer-events: none; transform: translateY(80px); } .ai-chat { position: fixed; right: 28px; bottom: 100px; /* sits above bottom-nav */ width: 380px; max-width: calc(100vw - 56px); height: min(560px, calc(100vh - 200px)); background: var(--pill-bg); color: #fff; border-radius: 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.32); z-index: 9850; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out); } .ai-chat.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .ai-chat__inner { display: flex; flex-direction: column; height: 100%; padding: 20px 20px 18px; box-sizing: border-box; } .ai-chat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-shrink: 0; } .ai-chat__title { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; } .ai-chat__close { background: none; border: none; color: #fff; cursor: pointer; padding: 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease; } .ai-chat__close:hover { opacity: 1; background: rgba(255,255,255,0.08); } .ai-chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; margin-bottom: 12px; } .ai-chat__msg { max-width: 88%; font-family: 'Inter', sans-serif; font-size: 0.92rem; line-height: 1.55; padding: 10px 14px; border-radius: 14px; word-wrap: break-word; } .ai-chat__msg--bot { background: rgba(255,255,255,0.085); align-self: flex-start; border-bottom-left-radius: 6px; } .ai-chat__msg--user { background: #fff; color: var(--text); align-self: flex-end; border-bottom-right-radius: 6px; } /* Inline navigation pills the bot can offer at the end of a reply. The bot emits [Label](#anchor) or [Label](/path); the client converts them into clickable pills that scroll/navigate when tapped. */ .ai-chat__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ai-chat__action { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 12px 6px 12px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.005em; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; } .ai-chat__action:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); } .ai-chat__action::after { content: '↗'; font-size: 11px; opacity: 0.7; } .ai-chat__form { display: flex; gap: 8px; align-items: stretch; flex-shrink: 0; } .ai-chat__input { flex: 1; background: rgba(255,255,255,0.085); /* same vibe as .form-input on light bg */ border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 0.92rem; color: #fff; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .ai-chat__input::placeholder { color: rgba(255,255,255,0.45); } .ai-chat__input:focus { border-color: rgba(255,255,255,0.25); } .ai-chat__send { background: #fff; color: var(--text); border: none; border-radius: 100px; width: 48px; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s ease, transform 0.2s var(--ease-out); } .ai-chat__send:hover { opacity: 0.88; transform: translateY(-1px); } /* Mobile: chat panel centred (per user spec). Pill stays adjacent to the nav-row (left offset still set by JS via --nav-half-width). */ @media (max-width: 768px) { .ai-chat { right: 16px; left: 16px; width: auto; max-width: none; bottom: 100px; height: min(70vh, 520px); } } /* ====================================================== FAQ ====================================================== */ .faq-section { padding: 80px 28px 100px; max-width: 760px; margin: 0 auto; } .faq-title { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; color: var(--text); margin-bottom: 56px; } /* Toggle full vs short FAQ title by viewport */ .faq-title--mobile { display: none; } @media (max-width: 768px) { .faq-title--desktop { display: none; } .faq-title--mobile { display: block; } } .faq-list { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .faq-item { width: var(--faq-item-w, 82%); background: #fff; border-radius: 41px; overflow: hidden; transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item:last-child { /* no border in pill mode */ } .faq-item:hover, .faq-item:has(.faq-q[aria-expanded="true"]) { width: 100%; } /* Hidden items (show more) */ .faq-item--more { display: none; } .faq-item--more.is-visible { display: block; } .faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 28px 32px; background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1.575rem; font-weight: 500; color: var(--text); text-align: left; gap: 16px; transition: color 0.2s ease; white-space: nowrap; } .faq-q__text { overflow: hidden; min-width: 0; flex: 1; } .faq-q:hover { color: var(--accent, #3a3a2e); } /* Mobile — smaller question font, allow wrap to multiple lines, indent matches answer */ @media (max-width: 768px) { .faq-q { font-size: 0.95rem !important; white-space: normal; align-items: flex-start; padding: 20px 32px; } .faq-q__text { overflow: visible; white-space: normal; overflow-wrap: break-word; line-height: 1.35; } } /* Arrow icon — uses pb-bar__btn for base styles; only FAQ-specific overrides here */ /* Match the pricing bar's font stack so ↗ falls back to the same system font */ .faq-icon { font-family: Inter, -apple-system, "system-ui", sans-serif; color: #000; } .faq-q .faq-icon { background: #FFD600; } .faq-item:hover .faq-icon { background: #f0c800; } .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); background: #FF5733; color: #fff; } /* Answer — max-height transition matches the pricing bar body approach */ .faq-a { max-height: 0; overflow: hidden; padding: 0 32px; transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.5s ease; } .faq-q[aria-expanded="true"] + .faq-a { max-height: 480px; padding-bottom: 25px; } .faq-a p { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.75; color: var(--text-2); padding-bottom: 16px; margin: 0; } .faq-a ul { list-style: none; padding: 0; margin: 0 0 16px; } .faq-a ul li { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; color: var(--text-2); padding: 4px 0 4px 18px; position: relative; } .faq-a ul li::before { content: '—'; position: absolute; left: 0; color: var(--text-3); font-size: 0.85rem; } /* Show more button */ .faq-more-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--border); border-radius: 100px; padding: 10px 22px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .faq-more-btn:hover { border-color: var(--text); color: var(--text); } .faq-more-icon { transition: transform 0.3s ease; } .faq-more-btn[aria-expanded="true"] .faq-more-icon { transform: rotate(180deg); } .faq-more-btn[aria-expanded="true"] { display: none; /* hide once expanded */ } /* ====================================================== CONTACT ====================================================== */ .contact { padding: 60px 28px 80px; display: flex; flex-direction: column; align-items: flex-start; max-width: 660px; margin: 0 auto; box-sizing: border-box; width: 100%; /* Always visible — email button scrolls directly here */ } .contact-heading { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 36px; color: var(--text); text-align: left; } .contact-card { background: #fff; border-radius: var(--r-card); padding: 28px; width: 100%; max-width: 540px; box-sizing: border-box; } .contact-form { display: flex; flex-direction: column; gap: 12px; width: 100%; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } .form-input { width: 100%; background: rgba(0,0,0,0.055); border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; color: var(--text); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .form-input:focus { border-color: rgba(0,0,0,0.18); } .form-input::placeholder { color: var(--text-3); } .form-textarea { resize: none; height: 140px; } .form-submit { display: inline-flex; align-items: center; gap: 6px; background: var(--text); color: #fff; border: none; border-radius: 100px; padding: 18px 28px; font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; cursor: pointer; transition: opacity 0.2s, transform 0.25s var(--ease-out); align-self: flex-start; } .form-submit:hover { opacity: 0.85; } .form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Textarea wrapper — needed for the sending overlay */ .form-textarea-wrap { position: relative; } /* Loading overlay that appears over the textarea while sending */ .form-sending-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.85); border-radius: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .form-textarea-wrap.form-is-sending .form-sending-overlay { opacity: 1; pointer-events: all; } /* Spinner */ @keyframes form-spin { to { transform: rotate(360deg); } } .form-spinner { width: 22px; height: 22px; border: 2.5px solid rgba(0,0,0,0.12); border-top-color: var(--text); border-radius: 50%; animation: form-spin 0.7s linear infinite; } /* Checkbox + submit row */ .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* "I promise I am not an agent" checkbox */ .form-robot-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--text-2); user-select: none; white-space: nowrap; } @media (max-width: 768px) { .form-robot-check { font-size: 0.7rem; } } .form-robot-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid rgba(0,0,0,0.25); border-radius: 4px; background: transparent; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; position: relative; } .form-robot-check input[type="checkbox"]:checked { background: var(--text); border-color: var(--text); } .form-robot-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } @keyframes robot-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .form-robot-check--shake { animation: robot-shake 0.4s ease; } /* Success state — shown after send */ .form-success { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; } .form-success[aria-hidden="true"] { display: none; } .form-success-msg { font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; font-weight: 400; color: var(--text); margin: 0; } .form-success-sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; color: var(--text-2); margin: 0; } .form-success-sub a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .form-success-sub a:hover { opacity: 0.7; } /* ====================================================== SOCIAL PROFILE CARDS (LinkedIn + X) ====================================================== */ .social-profiles { max-width: 660px; margin: 0 auto; padding: 120px 28px 160px; width: 100%; box-sizing: border-box; } .social-profiles-label { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin-bottom: 36px; } .social-profiles .social-cards-row { max-width: 540px; } .social-cards-row { display: flex; gap: 10px; } /* Base card — mirrors .card without triggering JS canvas listeners */ .social-card { flex: 1; border-radius: var(--r-card); display: flex; flex-direction: column; text-decoration: none; cursor: pointer; position: relative; container-type: inline-size; transition: transform 0.35s var(--ease-out); user-select: none; } .social-card:hover { transform: translateY(-6px) scale(1.02); } /* Top row — avatar left, logo right */ .social-card-top { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 24px 24px 16px; } .social-logo-large { width: 26px; height: 26px; flex-shrink: 0; opacity: 0.92; } .social-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 12%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.28); } /* Footer — name only */ .social-card-footer { display: flex; align-items: center; padding: 16px 24px 20px; } .social-card-name { font-family: 'IBM Plex Mono', monospace; font-size: min(7cqi, 1.3rem); font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* LinkedIn */ .social-card--linkedin { background: #0A66C2; } .social-card--linkedin .social-logo-large { color: #fff; } .social-card--linkedin .social-card-footer { color: #fff; } /* X */ .social-card--x { background: #1A1A18; } .social-card--x .social-logo-large { color: rgba(255,255,255,0.88); } .social-card--x .social-card-footer { color: rgba(255,255,255,0.90); } /* Stack on mobile — X on top, LinkedIn below; extra room above nav toolbar */ @media (max-width: 767px) { .social-profiles { padding-bottom: 220px; } .social-profiles .social-cards-row { flex-direction: column; max-width: 100%; } .social-card--x { order: -1; } .social-card--linkedin { order: 1; } } /* ====================================================== STICKY NOTES ====================================================== */ .sticky-note { position: absolute; width: 164px; background: #FFF9B1; padding: 8px; border-radius: 2px; box-shadow: 2px 4px 14px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.08); z-index: 9700; cursor: grab; } .sticky-note:active { cursor: grabbing; } /* Textarea — margin-top leaves room for the delete × button */ .sticky-note textarea { width: 100%; height: 80px; border: none; background: transparent; resize: none; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.8rem; line-height: 1.55; color: #3a3000; outline: none; cursor: text; display: block; margin-top: 14px; } /* ── Delete × button (top-right, appears on hover) ── */ .sticky-delete { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,0.10); color: #3a3000; font-size: 0.78rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s; padding: 0; } .sticky-note:hover .sticky-delete { opacity: 1; } .sticky-delete:hover { background: rgba(0,0,0,0.22); } /* ── From email row ── */ .sticky-from-row { display: flex; align-items: center; gap: 5px; border-top: 1px solid rgba(58,48,0,0.12); padding-top: 6px; margin-top: 4px; } .sticky-from-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: rgba(58,48,0,0.45); letter-spacing: 0.04em; flex-shrink: 0; user-select: none; } .sticky-from-input { flex: 1; min-width: 0; border: none; background: transparent; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; color: #3a3000; outline: none; cursor: text; padding: 0; line-height: 1.4; } .sticky-from-input::placeholder { color: rgba(58,48,0,0.30); } /* ── Send button (paper airplane, bottom-left) ── */ .sticky-send { display: flex; align-items: center; gap: 5px; border: none; background: none; color: rgba(58,48,0,0.30); cursor: pointer; padding: 5px 0 2px 0; transition: color 0.15s; overflow: hidden; max-width: 100%; } .sticky-send:hover { color: rgba(58,48,0,0.72); } .sticky-send svg { flex-shrink: 0; } /* Label slides in on hover */ .sticky-send-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.25s var(--ease-out), opacity 0.2s; } .sticky-send:hover .sticky-send-label { max-width: 120px; opacity: 1; } /* Sending / sent states — label always visible, no hover needed */ .sticky-send[data-state] { color: rgba(58,48,0,0.72); cursor: default; } .sticky-send[data-state] .sticky-send-label { max-width: 120px; opacity: 1; } .sticky-send[data-state="sent"] { color: rgba(30,120,60,0.80); } /* Spinner */ .sticky-spinner { flex-shrink: 0; width: 10px; height: 10px; border: 1.5px solid rgba(58,48,0,0.18); border-top-color: rgba(58,48,0,0.65); border-radius: 50%; animation: sticky-spin 0.7s linear infinite; } @keyframes sticky-spin { to { transform: rotate(360deg); } } /* Home-context notes are hidden when canvas is open */ body[data-card] .sticky-note[data-page="home"] { display: none; } /* ====================================================== CLEAR ALL BUTTON ====================================================== */ .clear-all-btn { position: fixed; bottom: max(28px, calc(16px + env(safe-area-inset-bottom))); /* left is set dynamically by JS to hug the right of the toolbar */ left: 0; z-index: 9750; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; font-weight: 400; color: rgba(255,255,255,0.9); background: rgba(17,17,17,0.92); border: none; border-radius: 100px; padding: 12px 18px; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); transform: translateY(8px); letter-spacing: 0.02em; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .clear-all-btn.visible { opacity: 1; pointer-events: all; transform: translateY(0); } .clear-all-btn:hover { background: rgba(26,26,24,0.98); } /* Mobile — pin to top-right corner and shorten label to just "Clear" */ @media (max-width: 768px) { .clear-all-btn { bottom: auto !important; top: 16px; right: 16px; left: auto !important; } .clear-all-btn__rest { display: none; } } /* ====================================================== DRAW CANVAS ====================================================== */ .draw-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9700; } /* ====================================================== TOOL CURSOR STATES ====================================================== */ body[data-tool="pen"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z' fill='white' stroke='%231A1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 2 22, crosshair; overflow: hidden; /* lock page scroll while drawing */ } /* Lock html scroll container too (body alone isn't always enough) */ html:has(body[data-tool="pen"]) { overflow: hidden; } /* Lock canvas overlay scroll while drawing */ body[data-tool="pen"] .canvas-overlay { overflow: hidden; } body[data-tool="sticky"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 012 2v10l-7 7H5a2 2 0 01-2-2V5a2 2 0 012-2z' fill='%23FFF9B1' stroke='%231A1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 21v-7h7' fill='none' stroke='%231A1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0, crosshair; } /* Always restore correct cursors on interactive elements regardless of active tool */ a, button, .nav-icon, .social-btn, .arrow-btn, .form-submit, label { cursor: pointer; } input, textarea, select { cursor: text; } /* ====================================================== THOUGHTS STRIP ====================================================== */ .thoughts-section { padding: 80px 0 80px; /* no horizontal padding — heading handles its own indent */ display: none; /* hidden for now */ } .thoughts-eyebrow { /* Matches .faq-section: max-width 760px centred, 28px inner padding */ max-width: 760px; margin: 0 auto 80px; padding: 0 28px; font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); text-align: left; } /* ── Mobile + tablet: 2-col horizontal card grid ── */ .thoughts-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 28px; } /* Defeat any JS-set inline left/top/height on tablet + mobile */ @media (max-width: 899px) { .thoughts-strip { height: auto !important; } .thought-card { left: auto !important; top: auto !important; position: relative !important; } } @media (max-width: 699px) { .thoughts-strip { grid-template-columns: 1fr; padding: 0 20px; } } /* Horizontal card — illustration left, text right (mobile/tablet) */ .thought-card { position: relative; display: flex; flex-direction: row; width: 100%; min-height: 130px; border-radius: 20px; background: var(--bg); color: var(--txt); text-decoration: none; overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .thoughts-strip.is-visible .thought-card { opacity: 1; transform: translateY(0); } .thought-card:hover { transform: translateY(-5px) scale(1.02) !important; transition: transform 0.25s var(--ease-out) !important; } .thought-card:active { transform: translateY(-2px) scale(1.01) !important; transition: transform 0.1s ease !important; } /* Illustration — left column */ .thought-pattern { flex-shrink: 0; width: 120px; align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,0.08); } .thought-pattern svg { width: 85%; height: 85%; color: var(--txt); opacity: 0.38; } /* Text — right column */ .thought-body { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; flex: 1; gap: 8px; } .thought-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.9rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; } .thought-tag { display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.55; } /* ── Desktop: original overlapping stacked fan grid ── */ @media (min-width: 900px) { .thoughts-strip { display: block; /* JS controls layout via position:absolute */ position: relative; height: 560px; /* JS overrides on resize */ padding: 0; } .thought-card { position: absolute; width: 240px; height: 240px; flex-direction: column; border-radius: 24px; min-height: unset; opacity: 0; transform: translateY(70px); } /* Per-card fan rotations — initial dropped state */ .thought-card:nth-child(1) { transform: rotate(-5deg) translateY(70px); z-index:1; } .thought-card:nth-child(2) { transform: rotate(4deg) translateY(70px); z-index:2; } .thought-card:nth-child(3) { transform: rotate(-2deg) translateY(70px); z-index:3; } .thought-card:nth-child(4) { transform: rotate(7deg) translateY(70px); z-index:4; } .thought-card:nth-child(5) { transform: rotate(3deg) translateY(70px); z-index:5; } .thought-card:nth-child(6) { transform: rotate(-7deg) translateY(70px); z-index:6; } .thought-card:nth-child(7) { transform: rotate(5deg) translateY(70px); z-index:7; } .thought-card:nth-child(8) { transform: rotate(-3deg) translateY(70px); z-index:8; } /* Settled fan */ .thoughts-strip.is-visible .thought-card:nth-child(1) { opacity:1; transform: rotate(-5deg); } .thoughts-strip.is-visible .thought-card:nth-child(2) { opacity:1; transform: rotate(4deg); } .thoughts-strip.is-visible .thought-card:nth-child(3) { opacity:1; transform: rotate(-2deg); } .thoughts-strip.is-visible .thought-card:nth-child(4) { opacity:1; transform: rotate(7deg); } .thoughts-strip.is-visible .thought-card:nth-child(5) { opacity:1; transform: rotate(3deg); } .thoughts-strip.is-visible .thought-card:nth-child(6) { opacity:1; transform: rotate(-7deg); } .thoughts-strip.is-visible .thought-card:nth-child(7) { opacity:1; transform: rotate(5deg); } .thoughts-strip.is-visible .thought-card:nth-child(8) { opacity:1; transform: rotate(-3deg); } /* Hover lifts card */ .thoughts-strip.is-visible .thought-card:hover { transform: rotate(0deg) translateY(-10px) scale(1.04) !important; z-index: 20 !important; transition: transform 0.25s var(--ease-out) !important; } /* Active */ .thoughts-strip.is-visible .thought-card:active { transform: rotate(0deg) translateY(-6px) scale(1.01) !important; transition: transform 0.1s ease !important; } /* Illustration — top portion, full width */ .thought-pattern { width: 100%; height: 130px; align-self: auto; } .thought-pattern svg { width: 100%; height: 100%; } /* Text — below illustration */ .thought-body { padding: 10px 16px 14px; justify-content: space-between; gap: 0; } } /* Actions row: Show more + See all — aligned with eyebrow */ .thoughts-actions { display: flex; align-items: center; gap: 12px; margin: 28px 0 0 max(28px, calc((100% - 760px) / 2 + 28px)); } @media (max-width: 699px) { .thoughts-actions { margin-left: 20px; } } /* Cards inside more-strip must stay in grid flow, not the fan/scatter layout */ .thoughts-more-strip .thought-card { position: relative !important; width: auto !important; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; } .thoughts-more-strip .thought-card:hover { transform: translateY(-5px) scale(1.02) !important; } /* More cards grid — same style as the mobile/tablet grid */ .thoughts-more-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 28px 0; max-width: calc(760px + 56px); } @media (min-width: 900px) { .thoughts-more-strip { grid-template-columns: repeat(4, 1fr); padding: 28px max(28px, calc((100% - 760px) / 2 + 28px)) 0; max-width: 100%; } } @media (max-width: 699px) { .thoughts-more-strip { grid-template-columns: 1fr; padding: 14px 20px 0; } } /* Shared pill style for both buttons */ .thoughts-show-more-btn, .thoughts-see-all-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--border); border-radius: 100px; padding: 10px 22px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .thoughts-show-more-btn:hover, .thoughts-see-all-btn:hover { border-color: var(--text); color: var(--text); } .thoughts-show-more-btn:disabled { opacity: 0.35; cursor: default; } /* About → Experience Timeline + More buttons — same pill base, with a filled circular arrow badge after the label (matches the work-thumb hover badge). */ .about-actions { margin-top: 32px; display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; } .about-experience-btn .btn-arrow-circle, .about-more-btn .btn-arrow-circle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; /* Match the Experience card on the hero (.card--ai background #0E4C4B) */ background: #0E4C4B; color: #fff; margin-left: 6px; flex-shrink: 0; transition: transform 0.22s var(--ease-out), background 0.2s ease; } .about-experience-btn:hover .btn-arrow-circle { transform: translate(2px, -2px); } .about-more-btn:hover .btn-arrow-circle { transform: translateY(2px); } /* Rotate the down-chevron 180° when the section is expanded so it reads as a "less / collapse" affordance. */ .about-more-btn[aria-expanded="true"] .btn-arrow-circle--down { transform: rotate(180deg); } .about-more-btn[aria-expanded="true"]:hover .btn-arrow-circle--down { transform: rotate(180deg) translateY(2px); } /* Collapsible "more about" paragraphs. Renamed to .about-more-body so the scatter-text effect (which targets `.about-body`) leaves it alone — we want the collapse to actually clip via max-height, not be absolutely positioned by the scatter wrapper. */ .about-more-body { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.5s var(--ease-out), opacity 0.4s ease, margin-top 0.4s var(--ease-out), margin-bottom 0.4s var(--ease-out); } .about-more-body.is-expanded { max-height: 1200px; opacity: 1; margin-top: 0; margin-bottom: 28px; } /* Paragraphs inside the more-body inherit the same body type as .about-body p */ .about-more-body p { font-family: 'Inter', sans-serif; font-size: 1.12rem; line-height: 1.78; color: var(--text-2); margin-bottom: 20px; } /* Scatter overlay — canvas absolutely positioned over the paragraphs, real text hidden until the assemble animation finishes. */ .about-more-scatter-wrap { position: relative; } .about-more-scatter-canvas { position: absolute; top: 0; left: 0; pointer-events: none; opacity: 1; transition: opacity 0.35s ease; z-index: 2; } .about-more-scatter-canvas.is-assembled { opacity: 0; } .about-more-body p { opacity: 0; transition: opacity 0.35s ease; } .about-more-body.is-assembled p { opacity: 1; } /* DOM order is buttons → body, but visually we want body ABOVE the buttons when expanded. Make the about-block a flex column and use `order` so the body drops in above the actions on expand, pushing them down. */ .about-block { display: flex; flex-direction: column; } .about-block > .about-title, .about-block > .about-chip, .about-block > .about-meta { order: 1; } .about-more-body, .about-more-scatter-wrap { order: 2; } /* sits above the actions when expanded */ .about-actions { order: 3; } .about-block > svg.about-curve-svg, .about-block > .about-scatter-wrap { order: 4; } /* ====================================================== PRICING ====================================================== */ .pricing-section { padding: 100px 28px 120px; max-width: 660px; margin: 0 auto; } /* Heading — matches .faq-title / .thoughts-eyebrow style */ .pricing-title { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; color: var(--text); margin-bottom: 16px; } .pricing-sub { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.65; color: var(--text-2); max-width: 480px; margin-bottom: 40px; } /* Filters */ .pricing-filters { display: flex; gap: 8px; margin-bottom: 32px; } .pricing-filter { background: transparent; border: 1.5px solid rgba(26,26,24,0.25); border-radius: 999px; color: var(--text-2); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 20px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .pricing-filter:hover { border-color: rgba(26,26,24,0.6); color: var(--text); } .pricing-filter--active { border-color: var(--text); color: var(--text); font-weight: 400; } /* Card pair */ .pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pricing-cards--hidden { display: none; } /* ── Fold-out entrance ── */ /* Each card starts folded back (hinge at top), folds down flat */ .pricing-card { transform: perspective(900px) rotateY(-88deg); transform-origin: left center; opacity: 0; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; will-change: transform, opacity; } /* Staggered unfold left → right — triggered by .cards-visible on the parent grid */ .pricing-cards.cards-visible .pricing-card:nth-child(1) { transform: perspective(900px) rotateY(0deg); opacity: 1; transition-delay: 0s; } .pricing-cards.cards-visible .pricing-card:nth-child(2) { transform: perspective(900px) rotateY(0deg); opacity: 1; transition-delay: 0.13s; } .pricing-cards.cards-visible .pricing-card:nth-child(3) { transform: perspective(900px) rotateY(0deg); opacity: 1; transition-delay: 0.26s; } /* Card base */ .pricing-card { border-radius: 20px; padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 20px; position: relative; } /* 3-column card grid */ .pricing-cards--3col { grid-template-columns: repeat(3, 1fr); } /* Light card: white background */ .pricing-card--light { background: #fff; color: var(--text); } /* Featured card: plan colour — matches the hero cards */ .pricing-card--featured { color: #fff; } .pricing-cards[data-plan="app"] .pricing-card--featured { background: #3676FF; } .pricing-cards[data-plan="web"] .pricing-card--featured { background: #FFD146; color: var(--text); } .pricing-cards[data-plan="brand"] .pricing-card--featured { background: #1A1A18; } .pricing-cards[data-plan="strategy"] .pricing-card--featured { background: #0E4C4B; } /* Card type label */ .pricing-card-type { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } .pricing-card--light .pricing-card-type { color: var(--text-3); } .pricing-card--featured .pricing-card-type { color: rgba(255,255,255,0.6); } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-card-type { color: rgba(0,0,0,0.45); } /* Card name */ .pricing-card-name { font-family: 'Inter', sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .pricing-card--light .pricing-card-name { color: var(--text); } .pricing-card--featured .pricing-card-name { color: #fff; } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-card-name { color: var(--text); } /* Tagline */ .pricing-tagline { font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.4; margin: -10px 0 0; } .pricing-card--light .pricing-tagline { color: var(--text-2); } .pricing-card--featured .pricing-tagline { color: rgba(255,255,255,0.72); } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-tagline { color: rgba(0,0,0,0.58); } /* Feature list */ .pricing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; } .pricing-list li { font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.45; padding-left: 24px; position: relative; } .pricing-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background-size: 9px 9px; background-position: center; background-repeat: no-repeat; } .pricing-card--light .pricing-list li { color: var(--text-2); } .pricing-card--light .pricing-list li::before { background-color: rgba(0,0,0,0.10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4,7 8,3' fill='none' stroke='%231A1A18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pricing-card--featured .pricing-list li { color: rgba(255,255,255,0.85); } .pricing-card--featured .pricing-list li::before { background-color: rgba(255,255,255,0.25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4,7 8,3' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Web featured: dark text on yellow */ .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-list li { color: rgba(0,0,0,0.72); } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-list li::before { background-color: rgba(0,0,0,0.13); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4,7 8,3' fill='none' stroke='%231A1A18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Options list: dash bullets instead of checkmarks */ .pricing-list--options li { padding-left: 16px; } .pricing-card--light .pricing-list--options li::before, .pricing-card--featured .pricing-list--options li::before { content: '–'; background: none !important; width: auto; height: auto; border-radius: 0; top: 0; font-size: 0.85rem; line-height: 1.45; } .pricing-card--light .pricing-list--options li::before { color: var(--text-3); } .pricing-card--featured .pricing-list--options li::before { color: rgba(255,255,255,0.45); } /* "Priced by scope" label */ .pricing-scope { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-3); } /* Footer */ .pricing-footer { margin-top: 8px; } .pricing-price-block { display: flex; flex-direction: column; gap: 2px; } .pricing-starting { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; } .pricing-card--light .pricing-starting { color: var(--text-2); } .pricing-card--featured .pricing-starting { color: rgba(255,255,255,0.6); } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-starting { color: rgba(0,0,0,0.48); } .pricing-price { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .pricing-card--light .pricing-price { color: var(--text); } .pricing-card--featured .pricing-price { color: #fff; } .pricing-cards[data-plan="web"] .pricing-card--featured .pricing-price { color: var(--text); } .pricing-per { font-size: 1rem; font-weight: 400; letter-spacing: 0; } /* ── Pricing controls: filters + tier slider on one row ── */ .pricing-controls { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .pricing-filters { margin-bottom: 0; /* override previous bottom margin — row handles it */ } /* Tier row */ .pricing-tier-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; max-width: 380px; } .pricing-tier-icon { width: 36px; height: 20px; flex-shrink: 0; color: var(--text-3); transition: color 0.25s; } .pricing-tier-icon--f1 { width: 48px; height: 20px; } /* Slider wrapper — stacks track + label */ .pricing-slider-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; position: relative; /* for the mobile $ bubble */ } /* Custom $ bubble that sits on top of the slider thumb on mobile. Position is JS-driven via the slider's --pct CSS variable so it tracks the thumb position. Desktop hides the bubble — the small native thumb is enough there. */ .pricing-slider__bubble { position: absolute; top: 7px; /* approx slider-thumb centre */ left: var(--pct, 0%); transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 500; line-height: 1; display: none; /* mobile-only — see media query */ align-items: center; justify-content: center; pointer-events: none; } /* Range input — custom track + thumb */ .pricing-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: transparent; outline: none; cursor: pointer; position: relative; } /* Track */ .pricing-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient( to right, var(--text) 0%, var(--text) calc(var(--pct, 0%) ), rgba(26,26,24,0.15) calc(var(--pct, 0%)), rgba(26,26,24,0.15) 100% ); } .pricing-slider::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(26,26,24,0.15); } .pricing-slider::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--text); } /* Thumb */ .pricing-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text); margin-top: -6px; transition: transform 0.15s; } .pricing-slider::-webkit-slider-thumb:hover { transform: scale(1.25); } .pricing-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--text); cursor: pointer; } /* Tier label */ .pricing-tier-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; transition: color 0.2s; min-width: 80px; text-align: center; } /* F1 tier — highlight */ .pricing-tier-row.is-f1 .pricing-tier-label { color: var(--text); font-weight: 600; } .pricing-tier-row.is-f1 .pricing-tier-icon--f1 { color: var(--text); } /* Currency dropdown — sits at the right end of the tier row */ .pricing-currency { position: relative; margin-left: 12px; flex-shrink: 0; font-size: 13px; } .pricing-currency__btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--border, rgba(0,0,0,0.15)); border-radius: 999px; padding: 6px 10px 6px 12px; color: var(--text); font: inherit; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.18s, border-color 0.18s; } .pricing-currency__btn:hover { background: rgba(0,0,0,0.04); } .pricing-currency__caret { transition: transform 0.18s ease; opacity: 0.7; } .pricing-currency--open .pricing-currency__caret { transform: rotate(180deg); } .pricing-currency__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 110px; margin: 0; padding: 6px; list-style: none; background: var(--surface, #fff); border: 1px solid var(--border, rgba(0,0,0,0.12)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.16s ease; z-index: 50; } .pricing-currency--open .pricing-currency__menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .pricing-currency__menu li { display: block; } .pricing-currency__menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 7px 10px; border-radius: 6px; font: inherit; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; } .pricing-currency__menu button:hover { background: rgba(0,0,0,0.05); } .pricing-currency__sym { opacity: 0.55; margin-left: 12px; } /* Animating price — subtle pulse scale */ .pricing-price.is-counting { display: inline-block; animation: priceCount 0.08s ease; } @keyframes priceCount { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } /* Tablet: 2 cols */ @media (max-width: 899px) { .pricing-cards--3col { grid-template-columns: repeat(2, 1fr); } } /* Mobile: single col */ @media (max-width: 599px) { .pricing-section { padding: 80px 20px 80px; } .pricing-sub { max-width: 100%; } .pricing-controls { gap: 31px; } /* +15px breathing room above the slider */ .pricing-tier-row { max-width: 100%; } /* Keep the native thumb at full bubble-sized hit area for touch, but make it visually transparent — the styled .pricing-slider__bubble overlays it. (Shrinking the thumb to ~1px would kill the drag target on touch devices.) */ .pricing-slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13px; /* re-centre on the 2px track */ background: transparent; border: none; box-shadow: none; } .pricing-slider::-moz-range-thumb { width: 28px; height: 28px; background: transparent; border: none; box-shadow: none; } .pricing-slider__bubble { display: inline-flex; } .pricing-cards, .pricing-cards--3col { grid-template-columns: 1fr; } .pricing-card { padding: 28px 24px 24px; } } /* ====================================================== TESTIMONIALS ====================================================== */ .testimonials { padding: 80px 0 120px; } .testimonials-header { padding: 0 28px 60px; max-width: 660px; margin: 0 auto; width: 100%; box-sizing: border-box; flex-shrink: 0; } .testimonials-heading { font-family: 'Inter', sans-serif; font-size: clamp(2.5rem, 6.25vw, 4.75rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); } .testimonials-sticky { display: flex; flex-direction: column; overflow: visible; box-sizing: border-box; } .testimonials-track { display: flex; gap: 0; padding: 40px max(28px, 6vw) 60px; will-change: transform; justify-content: center; align-items: center; } .testimonial-card { flex-shrink: 0; width: 260px; min-height: 320px; border-radius: 20px; padding: 28px 28px 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; /* Start invisible — JS triggers reveal on scroll */ opacity: 0; margin-left: -55px; transition: transform 0.25s var(--ease-out), opacity 0.6s var(--ease-out), z-index 0s; user-select: none; cursor: default; } .testimonial-card:first-child { margin-left: 0; } /* Large opening quote mark */ .testimonial-card::before { content: '\201C'; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; display: block; margin-bottom: 8px; opacity: 0.55; } /* Per-card pastel colour + fan rotation (start dropped 70px) */ .testimonial-card:nth-child(1) { background: #2A6042; color: #C8F0D8; z-index:1; transform: rotate(-4deg) translateY(70px); } .testimonial-card:nth-child(2) { background: #F5C340; color: #2A1A00; z-index:2; transform: rotate(-1.5deg) translateY(70px); } .testimonial-card:nth-child(3) { background: #2D1B56; color: #E0D0F8; z-index:3; transform: rotate(0.5deg) translateY(70px); } .testimonial-card:nth-child(4) { background: #FF7A00; color: #1A1A18; z-index:4; transform: rotate(2.5deg) translateY(70px); } /* Bugcrowd orange */ .testimonial-card:nth-child(5) { background: #FFFFFF; color: #1A1A18; z-index:5; transform: rotate(4.5deg) translateY(70px); } /* Johnson Bikes — white */ .testimonial-card:nth-child(6) { background: #3676FF; color: #FFFFFF; z-index:6; transform: rotate(6.5deg) translateY(70px); } /* Apps blue for 3 Bees */ /* Settled (fan) state */ .testimonials-track.is-visible .testimonial-card { opacity: 1; } .testimonials-track.is-visible .testimonial-card:nth-child(1) { transform: rotate(-4deg); } .testimonials-track.is-visible .testimonial-card:nth-child(2) { transform: rotate(-1.5deg); } .testimonials-track.is-visible .testimonial-card:nth-child(3) { transform: rotate(0.5deg); } .testimonials-track.is-visible .testimonial-card:nth-child(4) { transform: rotate(2.5deg); } .testimonials-track.is-visible .testimonial-card:nth-child(5) { transform: rotate(4.5deg); } .testimonials-track.is-visible .testimonial-card:nth-child(6) { transform: rotate(6.5deg); } .testimonial-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.04) !important; z-index: 10; } /* Mobile — vertical sticky stack. Each card anchors at a slightly lower "top" than the one before, so they pile on top each other near the top of the viewport as the user scrolls. The first card (green) needs an explicit sticky stop now that the heading is gone, otherwise it flies past. */ @media (max-width: 768px) { .testimonials-track { flex-direction: column; align-items: stretch; padding: 40px 20px 60px; gap: 24px; } .testimonial-card { width: 100%; margin-left: 0; position: sticky; transform: none !important; } /* Anchor the first card at top-quarter of the viewport, then stack each subsequent card 14px lower so they fan out as the user scrolls past. */ .testimonial-card:nth-child(1) { top: 14vh; } .testimonial-card:nth-child(2) { top: calc(14vh + 14px); } .testimonial-card:nth-child(3) { top: calc(14vh + 28px); } .testimonial-card:nth-child(4) { top: calc(14vh + 42px); } .testimonial-card:nth-child(5) { top: calc(14vh + 56px); } } .testimonial-quote { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.08rem; font-weight: 400; line-height: 1.6; color: inherit; flex: 1; margin: 0 0 24px; } .testimonial-author { display: flex; align-items: center; gap: 10px; } .testimonial-author-info { display: flex; flex-direction: column; } .testimonial-name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.82rem; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.04em; } .testimonial-role { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.72rem; color: inherit; opacity: 0.55; margin-top: 2px; } /* Custom drag cursor (follows mouse, fixed position) */ .drag-cursor { position: fixed; top: 0; left: 0; width: 88px; height: 88px; border-radius: 50%; background: #1A1714; color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 0.2s ease, transform 0.2s ease; font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .drag-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Mobile: stack cards vertically, fade in on scroll */ @media (max-width: 699px) { .testimonials-sticky { overflow: visible; } .testimonials-track { flex-direction: column; padding: 0 20px; gap: 16px; transform: none !important; } .testimonial-card { width: 100%; margin-left: 0; opacity: 0; transform: translateY(28px) rotate(0deg) !important; transition: opacity 0.5s ease, transform 0.5s ease; } .testimonial-card.is-visible { opacity: 1; transform: translateY(0) rotate(0deg) !important; } } /* ====================================================== RESPONSIVE ====================================================== */ /* On mobile, pin logo to top-left — JS alignment with "Build anything." only applies at wider widths */ @media (max-width: 699px) { .logo { left: 20px !important; top: 28px; } /* ── Equal section top spacing ───────────────────────────────────────── Every section heading gets the same breathing room above it on mobile. Target: 80px before each heading. */ .hero { padding-top: 80px; } .about-block { padding-top: 80px; } .testimonials { padding-top: 80px; } .thoughts-section { padding-top: 80px; } .faq-section { padding-top: 80px; } .contact { padding-top: 80px; } } @media (min-width: 900px) { /* Logo left is set dynamically by JS to align with the B of "Build anything." */ .logo { top: 48px; } .hero { padding: 104px 17.5vw 104px; } .work { padding: 240px 28px 18vh; } /* Work panel title left-aligns with hero H1 */ .work-panel { padding-left: 17.5vw; } } /* ====================================================== FOOTER PILLS ====================================================== */ /* Intro pills — fixed overlay on the hero screen */ #intro-pills { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; } #intro-pills.is-visible { opacity: 1; } #intro-pills .footer-pill, #footer-pills .footer-pill, #canvas-footer-pills .footer-pill { pointer-events: auto; } /* Sticky-note + pen tools active: disable pill interactions so the user can work over the hero header without dismissing pills. The body-level click handler creates the note (sticky) or the canvas catches the stroke (pen); pills become a non-interactive backdrop. */ body[data-tool="sticky"] #intro-pills, body[data-tool="sticky"] #intro-pills .footer-pill, body[data-tool="sticky"] #footer-pills .footer-pill, body[data-tool="sticky"] #canvas-footer-pills .footer-pill, body[data-tool="pen"] #intro-pills, body[data-tool="pen"] #intro-pills .footer-pill, body[data-tool="pen"] #footer-pills .footer-pill, body[data-tool="pen"] #canvas-footer-pills .footer-pill { pointer-events: none; } /* Footer pills — absolute inside .site-footer so they scroll with the page. Since .site-footer is 100svh tall the coordinate space is identical to fixed. */ #footer-pills { position: absolute; inset: 0; pointer-events: none; z-index: 10; /* Clip so the off-screen "waiting to drop" pills (parked at negative top values) don't leak into the previous section on phones where the body doesn't clip them automatically. */ overflow: hidden; opacity: 0; transition: opacity 0.6s ease; } /* Once pills have spawned, stays visible regardless of scroll position */ #footer-pills.is-visible, #footer-pills.has-spawned { opacity: 1; } /* Canvas footer pills — fixed overlay used only when the canvas panel is open */ #canvas-footer-pills { position: fixed; inset: 0; pointer-events: none; z-index: 9200; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; } #canvas-footer-pills.is-visible { opacity: 1; } .footer-pill { position: absolute; height: clamp(30px, 3vw, 48px); padding: 0 clamp(11px, 1.2vw, 20px); border-radius: clamp(15px, 1.5vw, 24px); display: inline-flex; align-items: center; font-family: 'Inter', -apple-system, sans-serif; font-size: clamp(0.7rem, 1.05vw, 1rem); font-weight: 500; white-space: nowrap; letter-spacing: -0.01em; will-change: top, transform; } @keyframes pill-squish { 0% { transform: var(--pill-rot) scaleX(1) scaleY(1); } 35% { transform: var(--pill-rot) scaleX(1.12) scaleY(0.78); } 65% { transform: var(--pill-rot) scaleX(0.96) scaleY(1.08); } 100% { transform: var(--pill-rot) scaleX(1) scaleY(1); } } .footer-pill.squish { animation: pill-squish 0.28s ease forwards; } /* ====================================================== INTRO STAGE — "Build anything." full-screen opener ====================================================== */ .intro-stage { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; } .intro-canvas { position: absolute; inset: 0; pointer-events: none; /* opacity toggled by JS */ } .intro-giant { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(3rem, 13.5vw, 18rem); font-weight: 400; letter-spacing: -0.03em; color: var(--text); line-height: 1; text-align: center; white-space: nowrap; user-select: none; cursor: default; /* opacity toggled by JS — hidden when canvas is active */ } /* Mobile — pull "Build anything." 10% higher in the intro stage */ @media (max-width: 699px) { .intro-stage { align-items: flex-start; padding-top: 40vh; } } /* Only during the sun (radial) phase: lift the headline so right-side rays render behind it. Left-side rays escape via #intro-pills-front (z-index 800). */ body.is-sun-phase .intro-giant { position: relative; z-index: 700; } /* ── Intro quote — flashes on "Play again" before re-animation ── */ .intro-quote { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1.1rem, 2.8vw, 3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); pointer-events: none; opacity: 0; z-index: 3; transition: opacity 0.5s ease; } .intro-quote.is-visible { opacity: 1; } .intro-quote em { font-style: italic; } .intro-quote__attr { display: block; margin-top: 0.6em; font-size: 0.65em; color: var(--text-2); letter-spacing: 0; } /* ── Intro stopwatch — fixed to viewport so intro-stage overflow:hidden can't clip the bounce ── */ .intro-stopwatch { position: fixed; /* Centre horizontally, sit just above "Build anything." (at ~50vh) */ top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; /* Anchor the bottom of the assembly to just above the text */ justify-content: flex-end; /* Push bottom of assembly (= bottom of circle) just above "Build anything." at 50vh */ padding-bottom: calc(50vh + clamp(1.5rem, 6.75vw, 9rem) + 1rem); pointer-events: none; z-index: 5; /* hidden until game starts — controlled by is-active class */ visibility: hidden; } .intro-stopwatch.is-active { visibility: visible; } /* The physical assembly that GSAP animates */ .sw-assembly { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; overflow: visible; } /* Two button shapes either side of circle top — positioned inside .sw-circle */ .sw-crowns { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 130px; display: flex; justify-content: space-between; pointer-events: none; } .sw-crown { width: 28px; height: 16px; border: 1.5px solid var(--text); border-radius: 6px; background: var(--bg); opacity: 0.7; } .sw-crown:first-child { transform: rotate(-38deg); } .sw-crown:last-child { transform: rotate(38deg); } /* Curvy strings SVG — absolute, anchored to circle bottom, paths go upward off-screen */ .sw-strings { position: absolute; /* bottom of SVG aligns with bottom of circle (180px tall) */ bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 180px; overflow: visible; pointer-events: none; opacity: 0.28; color: var(--text); z-index: -1; /* sit behind the circle */ } /* Circle wrapping the pill */ .sw-circle { position: relative; width: 180px; height: 180px; border: 1.5px solid var(--text); border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: visible; } /* Pill containing the clock */ .sw-pill { border: 1.5px solid var(--text); border-radius: 100px; padding: 0.4em 1em; background: var(--bg); display: flex; align-items: center; justify-content: center; } /* Time display inside the pill */ .intro-stopwatch__time { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1.1rem, 2.8vw, 2.2rem); font-weight: 400; letter-spacing: -0.05em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; } /* Wrapper that stacks the playing/stopped messages in the same layout slot so toggling between them never causes a layout shift. */ .sw-messages { display: grid; grid-template-columns: 1fr; margin-top: 1rem; width: 90vw; max-width: 680px; flex-shrink: 0; } .sw-messages > * { grid-column: 1; grid-row: 1; } /* Result label shown after game ends */ .intro-stopwatch__label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 400; letter-spacing: -0.01em; color: var(--text-2); line-height: 1.5; text-align: center; text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 0.7s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s; } .intro-stopwatch.is-stopped .intro-stopwatch__label { opacity: 1; transform: translateY(0); pointer-events: auto; } .intro-stopwatch__replay { color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; pointer-events: auto; } .sw-record { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 400; letter-spacing: -0.01em; color: var(--text-2); line-height: 1.5; opacity: 0; text-align: center; transition: opacity 0.5s ease 0.2s; } .intro-stopwatch.is-active .sw-record { opacity: 1; } /* On stop, the record line shares its grid cell with the result comment (which is now showing). Hide it cleanly so the two don't overlap; the user's final time gets appended to the comment text instead. */ .intro-stopwatch.is-stopped .sw-record { opacity: 0; pointer-events: none; } .sw-record__user { display: none; } @media (max-width: 768px) { .sw-record__line { display: block; } } /* Letter-by-letter entrance animation */ .intro-char { display: inline-block; opacity: 0; transform: translateX(-70px); transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .intro-char.is-in { opacity: 1; transform: translateX(0); } .intro-char--space { display: inline; } /* ====================================================== SITE FOOTER ====================================================== */ .site-footer { position: relative; /* anchor for #footer-pills absolute positioning */ color: var(--text); min-height: 100svh; height: 100svh; display: flex; flex-direction: column; padding: 48px 28px; overflow: visible; /* allows scatter chars to fly freely */ } .footer-inner { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: visible; } /* Canvas — inserted by JS, absolute so it doesn't affect flex layout */ .footer-scatter-canvas { display: block; position: absolute; pointer-events: none; } .footer-giant { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 0.22em; line-height: 1; margin: 0 -28px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10.5vw; font-weight: 400; cursor: default; user-select: none; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; /* JS controls opacity for assembled swap */ } .footer-word-wrap { display: inline-block; overflow: hidden; line-height: 1.1; } .footer-word { display: inline-block; transform: translateY(110%); transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .footer-word-wrap:nth-child(1) .footer-word { transition-delay: 0s; } .footer-word-wrap:nth-child(2) .footer-word { transition-delay: 0.12s; } .footer-word-wrap:nth-child(3) .footer-word { transition-delay: 0.24s; } .site-footer.is-visible .footer-word { transform: translateY(0); } .footer-bottom { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap; } .footer-nav { display: flex; gap: 24px; flex-wrap: nowrap; flex-direction: row; align-items: center; } .footer-link { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-2); text-decoration: none; letter-spacing: 0.01em; opacity: 0; transform: translateY(-14px); transition: color 0.2s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .footer-link:hover { color: var(--text); } .site-footer.is-visible .footer-link { opacity: 1; transform: translateY(0); } .site-footer.is-visible .footer-nav .footer-link:nth-child(1) { transition-delay: 0s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(2) { transition-delay: 0.07s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(3) { transition-delay: 0.14s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(4) { transition-delay: 0.21s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(5) { transition-delay: 0.28s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(6) { transition-delay: 0.35s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(7) { transition-delay: 0.42s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(8) { transition-delay: 0.49s; } .site-footer.is-visible .footer-nav .footer-link:nth-child(9) { transition-delay: 0.56s; } .footer-legal { position: fixed; bottom: 28px; left: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-3); line-height: 1; white-space: nowrap; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .footer-legal--visible { opacity: 1; } .footer-legal a, .footer-legal__link { color: inherit; text-decoration: none; pointer-events: auto; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .footer-legal a:hover, .footer-legal__link:hover { color: var(--text); border-bottom-color: currentColor; } @media (max-width: 699px) { .site-footer { padding: 40px 20px; } .footer-giant { flex-direction: column !important; align-items: center; justify-content: center; white-space: nowrap; margin-left: -20px; margin-right: -20px; font-size: 18vw; } .footer-nav { display: none; } .footer-legal { display: none; } .footer-bottom { flex-direction: column; gap: 24px; align-items: center; } } @media (min-width: 900px) { .site-footer { padding: 48px 17.5vw; } .footer-giant { margin-left: -17.5vw; margin-right: -17.5vw; } /* escape side padding → full viewport width */ } /* ====================================================== SCROLLBAR ====================================================== */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; } /* ====================================================== TRANSFORM TOOL — RESIZE HANDLE & GRID MODE ====================================================== */ /* The right-edge drag handle */ .frame-resize-handle { position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 12px; height: 52px; background: #1A1A18; border-radius: 6px; cursor: ew-resize; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: opacity 0.25s var(--ease-out); z-index: 20; } /* Grip dots */ .frame-resize-handle span { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.5); flex-shrink: 0; } /* Col count label below the handle */ .frame-resize-handle::after { content: attr(data-cols) ' col'; position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-3); pointer-events: none; } /* Expanded pointer / cursor target around the handle (invisible padding) */ .frame-resize-handle::before { content: ''; position: absolute; inset: -14px -16px; cursor: ew-resize; } /* Show handle only in transform mode */ body[data-tool="transform"] .frame-resize-handle { opacity: 1; pointer-events: all; cursor: ew-resize; } /* Frame gets a blue tint border in transform mode */ body[data-tool="transform"] .cards-frame { border-color: rgba(43, 111, 212, 0.35); } /* Highlight corner handles blue in transform mode */ body[data-tool="transform"] .cards-frame > .handle { background: #2B6FD4; opacity: 1 !important; } /* Grid mode: flex-wrap so cards flow at natural width */ .cards-frame.grid-mode .cards-row { display: flex; flex-wrap: wrap; gap: var(--ccux-gap, 10px); align-content: flex-start; } /* Cards hold their natural measured width — set via JS as --ccux-card-w */ .cards-frame.grid-mode .card { flex: 0 0 var(--ccux-card-w, auto); } /* Flatten card rotations in grid mode */ .cards-frame.grid-mode .card:nth-child(1), .cards-frame.grid-mode .card:nth-child(2), .cards-frame.grid-mode .card:nth-child(3), .cards-frame.grid-mode .card:nth-child(4) { transform: none !important; animation: none !important; } /* Restore hover in grid mode — must come AFTER nth-child rules */ .cards-frame.grid-mode .card:hover { transform: translateY(-6px) scale(1.02) !important; z-index: 5; } .cards-frame.grid-mode .card.active { transform: translateY(-4px) !important; z-index: 4; } /* ====================================================== RESPONSIVE — auto 2-col / 1-col on narrow viewports Driven by body[data-responsive-cols] set via JS on resize ====================================================== */ /* Allow frame to fill available width (overrides JS maxWidth if transform active) */ body[data-responsive-cols] .cards-frame { max-width: 100%; } /* Enable wrapping */ body[data-responsive-cols] .cards-row { flex-wrap: wrap; } /* Flatten rotations — same treatment as grid-mode */ body[data-responsive-cols] .cards-row .card:nth-child(1), body[data-responsive-cols] .cards-row .card:nth-child(2), body[data-responsive-cols] .cards-row .card:nth-child(3), body[data-responsive-cols] .cards-row .card:nth-child(4) { transform: none !important; animation: none !important; } /* Restore hover lift */ body[data-responsive-cols] .cards-row .card:hover { transform: translateY(-6px) scale(1.02) !important; } /* 2-col: each card fills half the row minus the gap */ body[data-responsive-cols="2"] .cards-row .card { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); } /* 1-col: single full-width card */ body[data-responsive-cols="1"] .cards-row .card { flex: 1 1 100%; max-width: 100%; } /* Mobile 2×2 grid */ @media (max-width: 600px) { .cards-frame { padding: 12px 10px 10px; } .cards-row { flex-wrap: wrap; gap: 8px; } .cards-row .card { flex: 1 1 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; min-width: 0 !important; } /* Larger media tile — less margin, keep landscape ratio */ .cards-row .card .card-inner { margin: 10px 10px 6px; aspect-ratio: 4/3; } /* Label smaller to save space */ .cards-row .card .card-label { font-size: min(11cqi, 1.8rem); padding: 4px 10px 12px 10px; } /* Flatten rotations on mobile */ .cards-row .card:nth-child(1), .cards-row .card:nth-child(2), .cards-row .card:nth-child(3), .cards-row .card:nth-child(4) { transform: none !important; animation: none !important; } } /* ====================================================== CANVAS VIEW (card-click full-screen, free-form spatial) ====================================================== */ /* Hero text exits left when canvas opens */ .hero-text { transition: transform 0.45s var(--ease-out), opacity 0.4s var(--ease-out); } body[data-card] .hero-text { transform: translateX(-52px); opacity: 0; pointer-events: none; } /* Cards frame: disable pointer events when canvas is open */ .cards-frame { transition: border-color 0.25s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.45s var(--ease-out); } body[data-card] .cards-frame { width: max-content; z-index: 100; /* below canvas overlay (z:150) — hidden behind it */ pointer-events: none; opacity: 0; } /* Mini thumbnail strip — text only (hide Lottie image area) */ body[data-card] .cards-frame .card .card-inner { display: none; } /* Push label text toward the top; double the font so it reads at mini scale */ body[data-card] .cards-frame .card .card-label { padding: 18px 16px 14px; font-size: clamp(3.0rem, 4.2vw, 4.0rem); } /* Smooth spring transition for individual cards (fan + hover scale via JS) */ body[data-card] .cards-frame .card { width: 380px; min-width: 380px; flex-shrink: 0; padding-bottom: 150px; animation: none; transition: transform 0.38s var(--ease-spring); } /* Suppress box-shadow on fanned cards — JS controls transform entirely */ body[data-card] .cards-frame .card:hover { box-shadow: none; } /* Hide the currently-open card from the mini thumbnail strip */ body[data-card="apps"] .cards-frame .card--apps, body[data-card="websites"] .cards-frame .card--websites, body[data-card="brand"] .cards-frame .card--brand, body[data-card="ai"] .cards-frame .card--ai { display: none; } /* Back button: hidden on home, visible when canvas is open */ .nav-back { display: none; } body[data-card] .nav-back { display: flex; } /* Transform button: hidden everywhere (removed from the canvas toolbar). */ .nav-transform { display: none !important; } @media (max-width: 699px) { /* Sticky-note tool removed on mobile — too fiddly for touch. */ .bottom-nav .nav-icon[data-tool="sticky"] { display: none; } } /* ===== Canvas overlay ===== */ @keyframes canvas-expand { from { clip-path: inset(15% round 20px); opacity: 0.4; } to { clip-path: inset(0% round 0px); opacity: 1; } } .canvas-overlay { position: fixed; inset: 0; z-index: 150; /* Per-card colour set below; dot grid via background-image */ background-color: var(--bg); /* Layer 1: very faint dot grid — matches home page pattern */ background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; overflow: auto; opacity: 0; pointer-events: none; } body[data-card] .canvas-overlay { opacity: 1; pointer-events: all; overscroll-behavior: contain; /* stops scroll bleeding through to page body */ } .canvas-overlay.is-entering { animation: canvas-expand 0.52s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Full-page cover for cross-page navigation (Experience card) */ .canvas-nav-cover { position: fixed; inset: 0; z-index: 9999; background-color: var(--bg); clip-path: inset(15% round 20px); opacity: 0.4; pointer-events: none; transition: clip-path 0.52s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1); } .canvas-nav-cover.is-active { clip-path: inset(0% round 0px); opacity: 1; pointer-events: all; } /* Per-card background tint removed — all pages match home screen background */ /* ===== Close button — fixed top-right, OUTSIDE overlay element ===== */ .canvas-back { position: fixed; top: 24px; right: 28px; z-index: 160; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; color: var(--text); opacity: 0; pointer-events: none; transition: background 0.2s, border-color 0.2s, transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } body[data-card] .canvas-back { opacity: 1; pointer-events: all; } .canvas-back:hover { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.25); transform: rotate(90deg); } body[data-view="deck"] .canvas-back:hover { transform: translateY(-3px); } /* ===== Spatial canvas container ===== --ca-anchor lets each tile express its position relative to canvas-space's centre instead of its top-left corner — so the cluster stays centred as the canvas resizes. (We deliberately avoid container-type here because it would create a containing block for fixed descendants like .canvas-cluster and break their viewport-fixed positioning.) */ .canvas-space { position: relative; min-height: max(100vh, 900px); min-width: max(120vw, 1200px); padding: 0 40px 80px; margin-top: 5vh; --ca-anchor: calc(50% - 960px); /* 960 = half the design reference width */ } /* Per-canvas min-height so absolute .ca tiles placed deep in the layout actually push the canvas-page-intro section below them instead of being covered by it (absolute children don't grow their parent's height by default). Bump these whenever a tile's `top` value approaches the limit. */ body[data-card="apps"] .canvas-space { min-height: 3850px; } body[data-card="websites"] .canvas-space { min-height: 2000px; } body[data-card="brand"] .canvas-space { min-height: 2200px; } /* ===== Identity chip — top-left — hidden ===== */ .canvas-identity { display: none; } .canvas-chip { display: inline-flex; align-items: center; padding: 5px 16px; border-radius: 100px; font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; } body[data-card="apps"] .canvas-chip { background: var(--apps-in); color: #ffffff; } body[data-card="websites"] .canvas-chip { background: var(--web-in); color: #0d0d0d; } body[data-card="brand"] .canvas-chip { background: var(--brand-in); color: #0d0d0d; } body[data-card="ai"] .canvas-chip { background: var(--ai-in); color: #ffffff; } /* ===== pretext flowing text — Layer 1 (below .ca thumbs) ===== */ /* Rendered by renderCanvasTextFlow() using @chenglou/pretext. Lines are absolutely-positioned
s inside canvas-space. opacity transitions in when a canvas opens. */ .canvas-text-flow { position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; z-index: 100; /* must exceed canvas-page-intro sticky stacking */ opacity: 0; transition: opacity 0.5s var(--ease-out) 0.2s; } body[data-card] .canvas-text-flow { opacity: 1; } /* ===== Floating decorative artefacts — Layer 2 ===== */ .ca { position: absolute; border-radius: 14px; overflow: hidden; /* clips image to container — enables corner-crop sizing */ pointer-events: all; cursor: grab; z-index: 12; /* above canvas-page-intro (z-index: 10) so thumbs aren't clipped by its background */ user-select: none; } .ca:active { cursor: grabbing; } .ca img, .ca video { width: 375px; /* fixed full-phone width — container crops it */ height: auto; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* ── Hover badge — title + arrow in a single pill at top-right of the tile, matching the homepage zoom-canvas (.wz-tile) style. The badge uses the parent .ca's data-title attribute for the label. The legacy .ca-hint and .ca-title elements are hidden so they don't compete. ── */ .ca-hint, .ca-title { display: none !important; } .ca::after { content: attr(data-title); position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; height: 28px; padding: 0 32px 0 12px; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center; border-radius: 100px; font-family: 'Inter', -apple-system, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #111; white-space: nowrap; opacity: 0; transform: translateY(-4px); transform-origin: top right; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,0.16); z-index: 5; } .ca:hover::after { opacity: 1; transform: translateY(0); } /* Only show artefacts for the active canvas */ .ca--apps, .ca--websites, .ca--brand { display: none; } body[data-card="apps"] .ca--apps { display: block; } body[data-card="websites"] .ca--websites { display: block; } body[data-card="brand"] .ca--brand { display: block; } /* All canvas artefacts — 375px base width (some are cropped narrower below) */ .ca-1,.ca-2,.ca-3,.ca-4,.ca-5,.ca-6,.ca-7,.ca-8,.ca-9,.ca-10,.ca-16, .ca-11,.ca-12,.ca-13,.ca-14,.ca-15,.ca-17, .ca-21,.ca-22,.ca-23,.ca-24,.ca-25 { width: 375px; } /* ── Corner-crop size variation (0–40% narrower than 375px) ────────────── Image is fixed at 375px inside — container masks from one side. Default: shows left portion of image (right side cropped off). "img { margin-left:auto }" flips to show right portion (left side cropped). */ /* Apps */ .ca-2 { width: 280px; } /* 75% — crop from right */ .ca-3 { width: 310px; } /* 83% — crop from right */ .ca-4 { width: 345px; } /* 92% — subtle crop */ .ca-5 { width: 230px; } /* 61% — crop from left (shows right side of screen) */ .ca-6 { width: 295px; } /* 79% — crop from right */ .ca-7 { width: 260px; } /* 69% — crop from left (shows right side of screen) */ /* Websites */ .ca-12 { width: 285px; } /* 76% — crop from left (shows right side) */ .ca-13 { width: 320px; } /* 85% — crop from right */ /* Brand */ .ca-21 { width: 320px; } /* 85% — crop from right */ .ca-23 { width: 250px; } /* 67% — crop from left (shows right side) */ /* Right-aligned images — shows right portion of the phone screen */ .ca-5 img, .ca-7 img, .ca-12 img, .ca-23 img { margin-left: auto; } /* ── Canvas thumbnail positions — desktop layout (baked from user drag session) ── */ /* ── Apps canvas — left uses calc(var(--ca-anchor) + Xpx) so the cluster stays centred as the canvas-space width changes. ── */ .ca-1 { left: calc(var(--ca-anchor) + 1194px); top: 13px; width: 240px; } /* Tab App */ .ca-1 video { width: 240px; height: 336px; object-fit: cover; } .ca-2 { left: calc(var(--ca-anchor) + 267px); top: 563px; } /* Unscripted — left 5% */ .ca-3 { left: calc(var(--ca-anchor) + 241px); top: 1404px; } /* Daikin — 50vh below Properti */ .ca-4 { left: calc(var(--ca-anchor) + 1419px); top: 439px; } /* Corin — left 10% */ .ca-5 { left: calc(var(--ca-anchor) + 241px); top: 954px; } /* Properti — left 10% */ .ca-6 { left: calc(var(--ca-anchor) + 483px); top: 51px; } /* RFS */ .ca-7 { left: calc(var(--ca-anchor) + 32px); top: 3103px; } /* Woolworths — left 24% */ .ca-8 { left: calc(var(--ca-anchor) + 51px); top: 2053px; } /* Hummingbot — left 10% more */ .ca-9 { left: calc(var(--ca-anchor) + 1400px); top: 1230px; } /* Auspost */ .ca-10 { left: calc(var(--ca-anchor) + 1562px); top: 1830px; width: 300px; } /* CBRE */ .ca-16 { left: calc(var(--ca-anchor) + 1500px); top: 2490px; } /* Wilsons */ /* ── Websites canvas ── */ .ca-11 { left: calc(var(--ca-anchor) + 1420px); top: 218px; width: 226px; height: 140px; } /* Uncle Tobys — cropped to landscape rectangle */ .ca-11 video { width: 226px; height: 140px; object-fit: cover; } .ca-12 { left: calc(var(--ca-anchor) + 1347px); top: 723px; } /* Jimmy Cricket — right 10% more */ .ca-13 { left: calc(var(--ca-anchor) + 249px); top: 270px; } /* Zhik */ .ca-14 { left: calc(var(--ca-anchor) + 137px); top: 1093px; } /* Magic Bra — left 8% */ .ca-15 { left: calc(var(--ca-anchor) + 1536px); top: 1280px; } /* CoreLogic — swapped with Ezidebit */ .ca-17 { left: calc(var(--ca-anchor) + 718px); top: 22px; } /* Ezidebit — swapped with CoreLogic */ /* ── Brand canvas ── */ .ca-21 { left: calc(var(--ca-anchor) + 660px); top: 0px; } /* Johnson Brand — up 15% (clamped to 0) */ .ca-22 { left: calc(var(--ca-anchor) + 1375px); top: 465px; } /* Supapix — down 5% */ .ca-23 { left: calc(var(--ca-anchor) + 255px); top: 760px; } /* Kenko */ .ca-24 { left: calc(var(--ca-anchor) + 1375px); top: 1080px; } /* Sony Music — left 15% */ .ca-25 { left: calc(var(--ca-anchor) + 30px); top: 1455px; } /* 3 Bees Honey */ /* ===== View toggle buttons ===== */ .canvas-view-toggle { display: none; gap: 6px; align-items: center; } body[data-card] .canvas-view-toggle { display: flex; } .view-btn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(0,0,0,0.4); transition: background 0.15s, color 0.15s, border-color 0.15s; } .view-btn.active { background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.75); border-color: rgba(0,0,0,0.35); border-width: 2px; } body[data-card="apps"] .view-btn.active { background: rgba(255,255,255,0.9); color: var(--apps-in); border-color: var(--apps-in); border-width: 2px; } body[data-card="websites"] .view-btn.active { background: rgba(255,255,255,0.9); color: var(--web-in); border-color: var(--web-in); border-width: 2px; } body[data-card="brand"] .view-btn.active { background: rgba(255,255,255,0.9); color: #0d0d0d; border-color: rgba(0,0,0,0.35); border-width: 2px; } body[data-card="ai"] .view-btn.active { background: rgba(255,255,255,0.9); color: var(--ai-in); border-color: var(--ai-in); border-width: 2px; } /* ===== Deck view container — absolute inside canvas-space, scrolls with content ===== */ .canvas-deck { position: absolute; /* top set dynamically by JS (cluster bottom + gap in canvas coords) */ left: 50%; transform: translateX(-50%); z-index: 200; perspective: 420px; perspective-origin: 50% -20%; display: none; width: 520px; height: 360px; } body[data-view="deck"] .canvas-deck { display: block; } /* Hide scatter artefacts in deck mode */ body[data-view="deck"] .ca--apps, body[data-view="deck"] .ca--websites, body[data-view="deck"] .ca--brand { display: none !important; } /* Clamp canvas-space so extra absolute content can't extend the scroll area */ body[data-view="deck"] .canvas-space { overflow: hidden; } /* ===== Canvas bottom: contact form + footer ===== */ /* ===== Canvas page intro — apps text + accordion ===== */ /* Breaks out of the wide canvas-space just like canvas-bottom */ .canvas-page-intro { position: sticky; left: 0; z-index: 10; width: 100vw; display: flex; flex-direction: column; align-items: center; background: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; padding: 60px 0 60px; /* Default — overridden per canvas below so the FAQ/contact/footer section starts ~120px below the visible top section (cluster + first about-block at top:50vh of canvas-space). */ margin-top: 0; } /* Pull canvas-page-intro up so it sits 120px below the about-block instead of starting at canvas-space's bottom edge. Math: target_top = canvas-space.top (5vh) + 50vh (cluster) + 230px + ~200px (about-block height) + 120px (gap) = 55vh + 550px margin-top = target_top − (canvas-space.top + canvas-space.min-height) = (55vh + 550) − (5vh + min-height) = 50vh + 550 − min-height */ body[data-card="apps"] .canvas-page-intro { margin-top: calc(50vh + 550px - 3850px); } /* min-height 3850 */ body[data-card="websites"] .canvas-page-intro { margin-top: calc(50vh + 550px - 2000px); } /* min-height 2000 */ body[data-card="brand"] .canvas-page-intro { margin-top: calc(50vh + 550px - 2200px); } /* min-height 2200 */ /* First about-block: position absolutely inside canvas-space so it sits ~150px below the cluster, in the same scroll context — both scroll with the page. The actual element lives in canvas-page-intro for SEO/HTML flow; openCanvas() relocates it into canvas-space when the canvas opens and restores it on close. */ .about-block--canvas-anchor { position: absolute !important; top: calc(50vh + 230px) !important; /* cluster at 50vh — clear it + 150px gap */ left: 50% !important; right: auto !important; transform: translateX(-50%); margin: 0 !important; padding: 0 !important; z-index: 11; width: min(640px, 90vw); max-width: none; box-sizing: border-box; text-align: left; /* keep body copy left-aligned, not centred */ } .about-block--canvas-anchor > .about-body { text-align: left; } /* Hidden unless the matching canvas is open */ .canvas-page-intro--apps { display: none; } .canvas-page-intro--websites { display: none; } .canvas-page-intro--brand { display: none; } body[data-card="apps"] .canvas-page-intro--apps { display: block; } body[data-card="websites"] .canvas-page-intro--websites { display: block; } body[data-card="brand"] .canvas-page-intro--brand { display: block; } /* Match the 540px contact card width */ .canvas-page-intro .about-block { width: 100%; max-width: 540px; padding-top: 40px; padding-left: 28px; padding-right: 28px; box-sizing: border-box; } .canvas-page-intro .about-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 20px; } .canvas-page-intro .faq-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 28px; } .canvas-page-intro .faq-section { width: 100%; max-width: 540px; padding: 40px 28px 60px; box-sizing: border-box; } /* Canvas FAQ pills — full width, smaller text, wrapping */ .canvas-page-intro .faq-item { width: 100%; } .canvas-page-intro .faq-item:hover, .canvas-page-intro .faq-item:has(.faq-q[aria-expanded="true"]) { width: 100%; } .canvas-page-intro .faq-q { font-size: 1.18rem; white-space: normal; align-items: flex-start; } .canvas-page-intro .faq-q__text { white-space: normal; } /* The body paragraphs are now rendered by pretext as absolutely-positioned lines overlaid on the about-block. Keep visibility:hidden so the block retains its space for layout (letting us measure its position), while the original static

text stays invisible — only the pretext text is shown. */ .canvas-page-intro .about-block { visibility: hidden; } /* Sticky left:0 ensures it's always flush with the viewport left edge regardless of the 2400px horizontal canvas scroll above it */ .canvas-bottom { position: sticky; left: 0; width: 100vw; display: flex; flex-direction: column; align-items: center; background: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; padding-top: 100px; } .canvas-bottom .contact { width: 100%; max-width: 540px; padding: 0; } /* Canvas footer occupies full width — matches main footer layout */ .canvas-site-footer { width: 100%; } /* canvas footer inherits footer-bottom position:absolute from .site-footer — no overrides needed; nav floats above "Create the future." just like homepage */ /* footer-giant inherits the same negative side margins as the main footer so the text escapes the padding and spans the full viewport width. */ /* ===== Deck cards ===== */ .deck-card { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; cursor: pointer; transform-origin: center bottom; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; will-change: transform; } .deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } .deck-card[data-deck-pos="0"] { transform: translateZ(0px) translateY(0px); z-index: 5; } .deck-card[data-deck-pos="1"] { transform: translateZ(-70px) translateY(-20px); z-index: 4; opacity: 0.90; } .deck-card[data-deck-pos="2"] { transform: translateZ(-140px) translateY(-36px); z-index: 3; opacity: 0.78; } .deck-card[data-deck-pos="3"] { transform: translateZ(-210px) translateY(-50px); z-index: 2; opacity: 0.62; } .deck-card[data-deck-pos="4"] { transform: translateZ(-280px) translateY(-60px); z-index: 1; opacity: 0.44; } .deck-card[data-deck-pos="5"], .deck-card[data-deck-pos="6"], .deck-card[data-deck-pos="7"], .deck-card[data-deck-pos="8"] { opacity: 0; pointer-events: none; transform: translateZ(-300px) translateY(-65px); z-index: 0; } .deck-card[data-deck-pos="0"]:hover { transform: translateZ(0px) translateY(-18px); } /* Hover arrow — top-right of front card */ .deck-card::after { content: '↗'; position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; line-height: 32px; text-align: center; background: rgba(255,255,255,0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 8px; font-size: 15px; color: rgba(0,0,0,0.72); opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .deck-card[data-deck-pos="0"]:hover::after { opacity: 1; transform: translateY(0); } .deck-card--exit { transform-origin: top center !important; transform: rotateX(80deg) translateZ(160px) !important; opacity: 0 !important; pointer-events: none; transition: transform 0.5s cubic-bezier(0.55, 0.06, 0.68, 0.19), opacity 0.38s ease 0.08s !important; } /* ===== Central content cluster — Layer 3 (fully opaque, highest contrast) ===== */ .canvas-cluster { position: absolute; top: 50vh; /* viewport-height aware so it appears in the visible centre at scrollTop:0 */ left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } /* When a canvas is open: keep the cluster centred in the viewable area at scrollTop:0 but let it scroll up with the content as the user pans. */ body[data-card] .canvas-cluster { position: absolute; top: 50vh; left: 50%; transform: translate(-50%, -50%); z-index: 200; pointer-events: all; } /* Horizontal cluster row: [card-col] [description] [device] */ .canvas-cluster-row { display: flex; align-items: center; gap: 36px; } /* Hidden — card kept in DOM for JS compatibility only */ .canvas-card-col { display: none; } /* "Chris Cotton UX" — hidden: the fixed .logo element handles identity on all screens */ .canvas-cluster-label { display: none; } /* ── Canvas card — identical to the home-screen card ── */ .canvas-card.card { /* width/min-width set dynamically by JS to match home card's actual layout width */ flex-shrink: 0; transform: none; /* Cancel nth-child rotations — specificity wins by position */ animation: none; /* Cancel card-in-N entrance animation */ pointer-events: none; /* display only — not clickable inside the canvas overlay */ cursor: default; } .canvas-card.card .card-inner { margin: 20px; } .canvas-card.card .card-label { padding: 4px 20% 16px 20px; } /* Simple hover — no rotation, just lift */ /* ── Description text — large, centred, section-coloured ── */ .canvas-desc { width: clamp(320px, 52vw, 620px); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.4; text-align: center; color: rgba(0,0,0,0.65); } /* Word wrappers — keep whole words together while chars animate freely */ .canvas-desc .word { display: inline-block; white-space: nowrap; } body[data-card="apps"] .canvas-desc { color: var(--apps-out); } body[data-card="websites"] .canvas-desc { color: var(--web-out); } body[data-card="brand"] .canvas-desc { color: var(--brand-out); } body[data-card="ai"] .canvas-desc { color: var(--ai-out); } /* ── Phone / device placeholder ── */ .canvas-device-ph { width: 110px; height: 220px; border-radius: 24px; background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 15px 40px rgba(0,0,0,0.12); flex-shrink: 0; } /* ====================================================== BLOG LISTING PAGE ====================================================== */ .blog-page { min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.13) 1px, transparent 1px); background-size: 28px 28px; } .blog-nav { display: flex; align-items: center; justify-content: space-between; padding: 32px 40px; } .blog-back { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); opacity: 0.45; text-decoration: none; transition: opacity 0.2s; } .blog-back:hover { opacity: 1; } .blog-header { max-width: 820px; margin: 0 auto; padding: 200px 40px 56px; } .blog-heading { font-family: 'Inter', sans-serif; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.04; margin-bottom: 14px; } .blog-sub { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 300; color: var(--text-2); line-height: 1.6; } /* 3-column card grid */ .blog-grid { max-width: 820px; margin: 0 auto; padding: 0 40px 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .blog-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--txt); background: var(--card-bg); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); } .blog-card:hover { transform: translateY(-8px) scale(1.04) rotate(0deg); } .blog-card-pattern { position: relative; height: 130px; overflow: hidden; background: rgba(0,0,0,0.08); flex-shrink: 0; } .blog-card-pattern::after { display: none; } .blog-card-pattern svg { width: 100%; height: 100%; color: var(--txt); opacity: 0.36; } .blog-card-body { padding: 12px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .blog-card-tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; } .blog-card-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.88rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; flex: 1; } .blog-card-read { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.06em; opacity: 0.4; margin-top: 8px; transition: opacity 0.2s; } .blog-card:hover .blog-card-read { opacity: 0.9; } /* Mobile: hide tile/list toggle + curve text */ @media (max-width: 600px) { .work-view-toggle { display: none; } } /* Mobile (< 700px): kill the heavy scroll-driven SVG curves and swap the curved "Trusted by" heading for a plain

. The horizontal marquee still runs — only the falling/scattering scroll effects are removed to keep mobile scrolling smooth. */ @media (max-width: 699px) { .about-curve-svg { display: none; } .trusted-hed { display: none; } .trusted-section h2.sr-only { /* un-hide the existing accessibility heading and style it plainly */ position: static; width: auto; height: auto; margin: 0 0 32px; padding: 0 24px; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-family: 'Inter', -apple-system, sans-serif; font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); text-align: center; } } /* Mobile: folio grid → single column */ @media (max-width: 600px) { .work-panel__grid--tiles { grid-template-columns: 1fr; gap: 12px; } /* Tall thumb loses span — flows naturally in single col */ .work-panel__grid--tiles .work-thumb--tall { grid-row: span 1; } .work-panel__grid--tiles .work-thumb--tall img { height: auto; object-fit: cover; } } /* Mobile: single-column, 20px side margins to match testimonials + work tiles */ @media (max-width: 699px) { .blog-grid { grid-template-columns: 1fr; padding: 0 20px 80px; } } /* ====================================================== ARTICLE / POST PAGE ====================================================== */ .post-page { min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.13) 1px, transparent 1px); background-size: 28px 28px; } .post-nav { display: flex; align-items: center; justify-content: flex-end; padding: 32px 40px; } .post-back { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); opacity: 0.45; text-decoration: none; transition: opacity 0.2s; } .post-back:hover { opacity: 1; } .post-hero { max-width: 680px; margin: 0 auto; padding: 48px 40px 0; } .post-tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45; margin-bottom: 18px; } .post-title { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.07; color: var(--text); margin-bottom: 20px; } .post-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--text-3); } /* Pattern hero card */ .post-pattern-wrap { max-width: 680px; margin: 48px auto 0; padding: 0 40px; } .post-pattern-inner { position: relative; height: 220px; border-radius: 24px; overflow: hidden; background: var(--card-bg); } .post-pattern-inner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events: none; } .post-pattern-inner svg { width: 100%; height: 100%; color: var(--card-txt); opacity: 0.36; } /* Article body */ .post-body { max-width: 680px; margin: 0 auto; padding: 52px 40px 60px; } .post-body p { font-family: 'Inter', sans-serif; font-size: 1.08rem; line-height: 1.78; font-weight: 300; color: var(--text); opacity: 0.85; margin-bottom: 28px; } .post-body p strong { font-weight: 500; opacity: 1; } /* More thoughts footer */ .post-more { max-width: 680px; margin: 0 auto; padding: 40px 40px 100px; border-top: 1px solid var(--border); } .post-more-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; } .post-more-link { display: block; font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 400; letter-spacing: -0.02em; color: var(--text); text-decoration: none; opacity: 0.55; line-height: 1.4; padding: 10px 0; border-bottom: 1px solid var(--border); transition: opacity 0.2s, padding-left 0.2s; } .post-more-link:hover { opacity: 1; padding-left: 8px; } /* ===== SCREENSAVER ===== */ #screensaver { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } #screensaver.ss-active { opacity: 1; } #ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #ss-cursor { position: absolute; width: 24px; height: 24px; pointer-events: none; transform: translate(-4px, -20px); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); opacity: 0; transition: opacity 0.3s; } #screensaver.ss-active #ss-cursor { opacity: 1; } .ss-sticky { position: fixed; width: 164px; min-height: 164px; background: #FFF9B1; border-radius: 2px; padding: 8px; box-shadow: 2px 4px 14px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.08); pointer-events: none; opacity: 0; transform: translateY(10px) rotate(var(--ss-rot, -3deg)); transition: opacity 0.35s ease, transform 0.35s ease; } .ss-sticky-text { display: block; padding: 6px 2px 2px; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.8rem; line-height: 1.55; color: #3a3000; white-space: pre-line; } .ss-sticky.ss-sticky--visible { opacity: 1; transform: translateY(0) rotate(var(--ss-rot, -3deg)); } /* ====================================================== FOLIO LIGHTBOX ====================================================== */ .folio-lb { position: fixed; inset: 0; z-index: 9500; pointer-events: none; visibility: hidden; /* JS sets style.visibility directly for timing control */ } /* Full-screen background — contains the pixel-dissolve canvas injected by JS */ .folio-lb__bg { position: absolute; inset: 0; opacity: 0.99; cursor: default; pointer-events: auto; overflow: hidden; } /* Logo — mirrors the scrolled main logo: same position, same scale, white */ .folio-lb__logo { position: fixed; top: 40px; left: var(--logo-left, 28px); z-index: 2; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; color: #fff; text-decoration: none; opacity: 0; transform: scale(0.6) translateY(10px); transform-origin: top left; transition: opacity 0.24s ease 0.3s, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, color 0.15s ease; pointer-events: auto; } .folio-lb.is-open .folio-lb__logo { opacity: 1; transform: scale(0.6) translateY(0); } .folio-lb__logo:hover { color: #fff; } @media (max-width: 699px) { .folio-lb__logo { left: 20px !important; top: 28px; } } @media (min-width: 900px) { .folio-lb__logo { top: 48px; } } /* Title — glass pill, centred at top, matches work-thumb label style */ /* Top bar — holds category filter pill + project title pill */ .folio-lb__top-bar { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease 0.34s; } .folio-lb.is-open .folio-lb__top-bar { opacity: 1; pointer-events: auto; } @media (min-width: 900px) { .folio-lb__top-bar { top: 48px; } } @media (max-width: 699px) { .folio-lb__top-bar { top: 64px; left: 20px; transform: none; justify-content: flex-start; } } /* Pill wrapper */ .folio-lb__pill-wrap { position: relative; } /* Title / filter button — glass pill */ .folio-lb__title { display: flex; align-items: center; gap: 7px; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 20px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; white-space: nowrap; transition: background 0.15s ease; } .folio-lb__title:hover { background: rgba(0, 0, 0, 0.62); } .folio-lb__title-caret { color: rgba(255,255,255,0.55); transition: transform 0.22s ease, color 0.15s ease; } .folio-lb__title[aria-expanded="true"] .folio-lb__title-caret { transform: rotate(180deg); color: rgba(255,255,255,0.9); } /* Dropdown menu */ .folio-lb__menu { position: absolute; top: calc(100% + 6px); left: 0; margin: 0; padding: 6px; background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; min-width: 150px; /* Cap to viewport so it never spills off-screen, but no scroll bar. Items flow into multiple columns when the list is taller than the cap. */ max-height: calc(100vh - 120px); overflow: hidden; list-style: none; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); /* Project dropdown only — the title menu has many items. Use CSS multi-column so items break into columns when there are too many to fit in a single column at the current viewport height. */ display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; column-gap: 6px; } /* Filter menu (small list of 4) stays single-column */ #folio-lb-filter-menu { flex-wrap: nowrap; max-height: none; } .folio-lb__pill-wrap.menu-open .folio-lb__menu { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Menu items */ .folio-lb__menu-item { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; list-style: none; transition: background 0.12s ease, color 0.12s ease; } .folio-lb__menu-item:hover { background: rgba(255,255,255,0.1); color: #fff; } .folio-lb__menu-item--active { background: rgba(255,255,255,0.14); color: #fff; } /* Description */ .folio-lb__desc { position: fixed; top: 88px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.65); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.01em; line-height: 1.5; text-align: center; max-width: min(560px, calc(100vw - 120px)); opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0.2s; } .folio-lb.is-open .folio-lb__desc { opacity: 1; } @media (max-width: 699px) { .folio-lb__desc { top: 72px; font-size: 0.68rem; } } @media (max-width: 899px) { .folio-lb__desc { display: none; } } /* Close button — top right */ .folio-lb__close { position: absolute; top: 18px; right: 22px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.75); transition: opacity 0.2s ease 0.32s, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s, background 0.15s ease; } .folio-lb.is-open .folio-lb__close { opacity: 1; transform: scale(1); } .folio-lb__close:hover { background: rgba(0, 0, 0, 0.62); } /* Horizontal image carousel */ .folio-lb__carousel { position: absolute; top: 68px; bottom: 72px; left: 0; right: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 4px; padding-left: 80px; padding-right: 80px; /* opacity driven by JS for FLIP reveal */ } .folio-lb__carousel::-webkit-scrollbar { display: none; } .folio-lb__slide { flex: 0 0 auto; min-width: min(255px, 85vw); /* prevents 0-width before image loads */ height: min(425px, 59.5vh); border-radius: 14px; overflow: hidden; transform-origin: center center; will-change: transform, opacity; cursor: grab; } .folio-lb__carousel.is-dragging .folio-lb__slide { cursor: grabbing; } .folio-lb__carousel.is-dragging { cursor: grabbing; } .folio-lb__slide img, .folio-lb__slide video { display: block; height: 100%; width: auto; max-width: 85vw; border-radius: inherit; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ── Project title slides ─────────────────────────────────────────────── */ .folio-lb__slide--title { background: var(--flb-color); width: min(380px, 85vw); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 175px 28px 28px; box-sizing: border-box; flex-shrink: 0; overflow: hidden; gap: 10px; } @media (min-width: 900px) { .folio-lb__slide--title { width: min(520px, 85vw); } } .lb-title-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; color: rgba(255, 255, 255, 0.85); overflow: hidden; word-break: break-word; } .lb-title-char { display: inline-block; opacity: 0; } /* Mobile: skip the WAAPI per-char reveal — IntersectionObserver inside the vertically-scrolling carousel doesn't always fire reliably on the first slide, so we just keep titles visible. */ @media (max-width: 899px) { .lb-title-char { opacity: 1; } } .lb-title-tagline { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.5; color: rgba(255, 255, 255, 0.5); /* Sits 50px below the title — was 100px, felt detached on both desktop and mobile */ margin-top: 50px; opacity: 0; transition: opacity 0.4s ease 0.5s; } .folio-lb.is-open .lb-title-tagline { opacity: 1; } /* Description — desktop hides this (uses external panel); mobile shows on the title slide. Re-ordered with flex `order` so the company description appears directly UNDER the title, with the short tagline pushed below. */ .lb-title-desc { display: none; } @media (max-width: 899px) { .lb-title-desc { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.5; color: rgba(255, 255, 255, 0.5); margin-top: 50px; /* sit right under the title */ opacity: 0; transition: opacity 0.4s ease 0.5s; order: 1; } .lb-title-tagline { margin-top: 6px; /* now sits under the desc instead */ transition: opacity 0.4s ease 0.55s; order: 2; } .folio-lb.is-open .lb-title-desc { opacity: 1; } } /* Prev / Next project nav — sides */ .folio-lb__nav { position: fixed; bottom: 20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease 0.36s, background 0.15s ease; } .folio-lb.is-open .folio-lb__nav { opacity: 1; } .folio-lb__nav:hover { background: rgba(255, 255, 255, 0.18); } .folio-lb__nav--prev { right: 70px; } .folio-lb__nav--next { right: 20px; } /* Mobile: stack prev/next vertically on the right edge, mid-screen, and rotate the chevrons 90° so they point up/down. Pause is hidden. */ @media (max-width: 899px) { .folio-lb__nav--prev { right: 16px; bottom: auto; top: calc(50% - 52px); } .folio-lb__nav--next { right: 16px; bottom: auto; top: calc(50% + 10px); } .folio-lb__nav--prev svg, .folio-lb__nav--next svg { transform: rotate(90deg); } .folio-lb__nav--pause { display: none !important; } } @media (min-width: 900px) { .folio-lb__hint { display: none !important; } .folio-lb__nav { bottom: 140px; right: auto; } .folio-lb__nav--prev { left: calc(50% - 92px); } .folio-lb__nav--pause { left: calc(50% - 21px); } .folio-lb__nav--next { left: calc(50% + 50px); } } /* Scroll hint at bottom — matches homepage #scroll-hint layout, white on dark */ .folio-lb__hint { position: absolute; bottom: max(92px, calc(80px + env(safe-area-inset-bottom))); left: 50%; transform: translateX(-50%) translateY(10px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.55s ease 0.5s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; } .folio-lb.is-open .folio-lb__hint { opacity: 1; transform: translateX(-50%) translateY(0); } .folio-lb__hint-chevron { color: rgba(255, 255, 255, 0.55); animation: sh-bounce 1.5s ease-in-out infinite; } .folio-lb__hint-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin: 0; text-transform: lowercase; } /* Slide swipe-reveal — left-to-right clip wipe on carousel open */ @keyframes folio-slide-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } } .folio-slide-reveal { animation: folio-slide-reveal 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } /* FLIP clone — created by JS, sits above lightbox during animation */ .folio-flip-clone { position: fixed; pointer-events: none; z-index: 9600; will-change: transform; transform-origin: top left; overflow: hidden; border-radius: 14px; } .folio-flip-clone img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ══════════════════════════════════════════════════════ PRICING BARS ══════════════════════════════════════════════════════ */ .pb-section { padding: 100px 28px 120px; max-width: 1000px; margin: 0 auto; } @media (min-width: 900px) { .pb-section { padding: 100px 40px 120px; max-width: 1000px; margin: 0 auto; } } @media (max-width: 768px) { .pb-section { padding: 64px 20px 80px; } } .pb-title { /* Match the .about-title block — Inter, same clamp; block is ~10% wider than the about-title (660 → 726) per latest brief. */ font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); max-width: 726px; margin: 0 auto 44px; } .pb-sub { font-size: 1rem; color: rgba(0,0,0,0.42); margin: 0 0 44px; max-width: 50ch; line-height: 1.6; } .pb-controls { display: flex; align-items: center; gap: 20px; margin: 0 auto 36px; /* Constrain to the same width as .pb-title so the filter pills + slider left-align with the headline rather than spanning the full pb-section. */ max-width: 726px; flex-wrap: wrap; } .pb-filters { display: flex; gap: 6px; flex-wrap: wrap; } .pb-filter { padding: 7px 16px; border: 1.5px solid rgba(0,0,0,0.13); border-radius: 100px; background: transparent; font-size: 0.875rem; font-family: inherit; cursor: pointer; color: inherit; transition: background 0.18s, border-color 0.18s, color 0.18s; } .pb-filter:hover { border-color: rgba(0,0,0,0.3); } .pb-filter--active { background: #111; border-color: #111; color: #fff; } /* Mobile — shrink pills slightly so all four (App / Brand / Strategy / Web) sit on one line */ @media (max-width: 768px) { .pb-filters { flex-wrap: nowrap; gap: 5px; margin-bottom: 28px; } .pb-filter { font-size: 0.78rem; padding: 6px 11px; white-space: nowrap; } } .pb-tier-row { margin-left: 16px; } /* ── Groups ── */ .pb-group { display: none; } .pb-group--active { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* Desktop: centre-align the bars within the group so the variable-width pills sit balanced rather than anchored to the left edge. Mobile keeps flex-start since bars are forced to width:100% and centring is moot. */ @media (min-width: 769px) { .pb-group--active { align-items: center; } } /* ── Individual bar — the bar IS the coloured card ── */ .pb-bar { width: var(--bar-w); min-width: 220px; border-radius: 140px; overflow: hidden; cursor: pointer; --bar-w: 48%; transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .pb-bar--design { background: #FFFFFF; color: #111; } .pb-bar--build { background: #F5C842; color: #111; } .pb-bar--combo { background: #3B5BFF; color: #fff; } /* Combo (blue) bar: bump up the secondary text opacities so the small labels don't read as washed-out grey against the saturated blue. */ .pb-bar--combo .pb-bar__name, .pb-bar--combo .pb-bar__tier, .pb-bar--combo .pb-bar__disclaimer { color: #fff; opacity: 1; } .pb-bar--combo .pb-bar__price, .pb-bar--combo .pb-bar__price::after { color: #fff; opacity: 1; } .pb-bar:hover, .pb-bar.is-open { width: 100%; border-radius: 41px; } /* Mobile — always full width regardless of slider value */ @media (max-width: 768px) { .pb-bar { width: 100% !important; position: relative; } /* Horizontal: name | price | btn — all on one line. */ .pb-bar__head { flex-direction: row; align-items: center; gap: 10px; padding: 22px 18px; } .pb-bar__info { flex: 1 1 auto; min-width: 0; } .pb-bar__name { font-size: 1.1rem; } .pb-bar__price { align-self: center; flex: 0 0 auto; font-size: clamp(1.5rem, 8.5vw, 2rem); text-align: right; } .pb-bar__price::after { font-size: 0.55rem; margin-top: 6px; } /* Expand button sits inline, immediately to the right of the price. */ .pb-bar > .pb-bar__head > .pb-bar__btn, .pb-bar > .pb-bar__btn { position: static; flex: 0 0 auto; margin-left: 4px; } /* On mobile, rotate the ↗ arrow so it points DOWN by default and flips UP when the bar is open (standard accordion affordance). */ .pb-bar .pb-bar__btn { transform: rotate(135deg); } .pb-bar:hover .pb-bar__btn { transform: rotate(135deg); } .pb-bar.is-open .pb-bar__btn { transform: rotate(315deg); } } /* ── Header row ── */ .pb-bar__head { display: flex; align-items: center; gap: 16px; padding: 44px 28px; color: inherit; user-select: none; } .pb-bar__info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pb-bar__name { /* +20% over the previous 1.31rem */ font-size: 1.572rem; font-weight: 500; letter-spacing: -0.01em; white-space: normal; overflow-wrap: break-word; } /* Tier row: tier label + "STARTING" + disclaimer on one line */ .pb-bar__tier-row { display: flex; align-items: center; gap: 7px; overflow: hidden; } .pb-bar__tier { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.45; flex-shrink: 0; } /* "Starting" label moved under the price (see .pb-bar__price::after). The original inline element in the tier-row stays in markup for accessibility but is hidden visually. */ .pb-bar__starting { display: none; } .pb-bar__disclaimer { font-size: 0.62rem; font-weight: 400; text-transform: none; letter-spacing: 0.02em; opacity: 0; max-width: 0; white-space: nowrap; overflow: hidden; flex-shrink: 0; transition: opacity 0.35s ease, max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .pb-bar__disclaimer::before { content: '·'; margin-right: 7px; } .pb-bar:hover .pb-bar__disclaimer, .pb-bar.is-open .pb-bar__disclaimer { opacity: 0.4; max-width: 260px; } /* Price */ .pb-bar__price { font-size: clamp(2.4rem, 4.5vw, 3rem); font-weight: 400; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; line-height: 1; text-align: right; } /* "Starting" sublabel sits directly under the price */ .pb-bar__price::after { content: 'Starting'; display: block; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.45; } /* Expand button */ .pb-bar__btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: background 0.2s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .pb-bar:hover .pb-bar__btn { background: rgba(0,0,0,0.13); transform: rotate(180deg); } .pb-bar.is-open .pb-bar__btn { transform: rotate(45deg); background: rgba(0,0,0,0.13); } /* Open state should always win over hover so the arrow visibly toggles */ .pb-bar.is-open:hover .pb-bar__btn { transform: rotate(45deg); } .pb-bar--combo .pb-bar__btn { background: rgba(0,0,0,0.18); } .pb-bar--combo:hover .pb-bar__btn, .pb-bar--combo.is-open .pb-bar__btn { background: rgba(0,0,0,0.28); } /* ── Expanded body ── */ .pb-bar__body { max-height: 0; overflow: hidden; padding: 0 28px; transition: max-height 0.52s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.4s ease; } .pb-bar:hover .pb-bar__body, .pb-bar.is-open .pb-bar__body { max-height: 560px; padding-bottom: 86px; } .pb-bar__body::before { content: ''; display: block; height: 1px; background: rgba(0,0,0,0.10); margin-bottom: 18px; } .pb-bar--combo .pb-bar__body::before { background: rgba(255,255,255,0.18); } .pb-bar__desc { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.68; opacity: 0.62; max-width: 72ch; } .pb-bar__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 36px; } @media (max-width: 560px) { .pb-bar__list { grid-template-columns: 1fr; } } .pb-bar__list li { font-size: 0.875rem; opacity: 0.7; display: flex; align-items: baseline; gap: 7px; } .pb-bar__list li::before { content: '↗'; font-size: 0.68rem; opacity: 0.5; flex-shrink: 0; } /* ── "More about X process" footer ── */ /* Left-aligned with the body text and pushed down with extra top space so it reads as a clear footer call-to-action rather than tucked next to the price. */ .pb-bar__footer { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 40px; margin-top: auto; } .pb-bar__more-text { font-size: 0.78rem; opacity: 0.45; white-space: nowrap; color: inherit; } .pb-bar__more-btn { display: inline-flex; align-items: center; background: #111; color: #fff !important; border: none; border-radius: 20px; padding: 7px 18px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease; } .pb-bar__more-btn:hover { background: #333; } /* ── Static bars — no width transition ── */ .pb-bar--static { transition: none; } /* ── Scroll lock — suppress hover interactions for 1s after scroll ── */ .pb-section.is-scroll-locked .pb-bar { pointer-events: none; } /* ── Vertical carousel for tablet portrait + mobile ─────────────────── */ @media (max-width: 899px) { .folio-lb__carousel { top: 0; bottom: 0; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; padding: 110px 16px calc(100dvh - 160px) 16px; gap: 8px; } .folio-lb__slide { width: 100%; min-width: unset; height: auto; } .folio-lb__slide img, .folio-lb__slide video { width: 100%; height: auto; max-width: unset; max-height: 70vh; } .folio-lb__slide--title { width: 100%; min-width: unset; height: auto; min-height: 280px; padding: 175px 28px 28px; } /* Stack words on separate lines so multi-word titles never wrap mid-word */ .folio-lb__slide--title .lb-title-word { display: block; } .folio-lb__slide--title .lb-title-space { display: none; } } /* ============================================================ WORK ZOOM — scroll-pinned zoom-out parallax (desktop default) ============================================================ */ /* Section provides the scroll runway. Sticky child pins the viewport. No background — the body's scroll-driven cream→yellow gradient shows through, so there's no sharp colour boundary when sticky releases. */ .work-zoom { position: relative; height: 480vh; /* runway = ~3.8 viewports of scroll — long, slow zoom */ margin-top: -120px; /* tuck under previous section so it reads as one flow */ z-index: 1; } .work-zoom__sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; /* Caption + controls vertically centred in the sticky viewport so the title stops at mid-screen as the user scrolls through the runway. Parallax stage is absolute-positioned behind. */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .work-zoom__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Stage no longer scales — each tile animates its own entry offset via --ox / --oy (set by JS per scroll frame). */ } /* The virtual world canvas. Sized to fill the viewport exactly at scale 1 (the FINAL state). At scale 2.5 only the centre ~40% of the canvas is visible — everything else is off-screen until the camera zooms out. Using vw/vh keeps tile positions (% based) at true viewport positions when the camera reaches scale 1. */ .work-zoom__canvas { position: relative; width: 100vw; height: 100vh; flex-shrink: 0; } /* Each tile's inline left/top is its FINAL CENTRE on the canvas. JS drives a "camera pulling back" entry: at enter-start the tile is OFF-SCREEN (offset by data-from-x/y in vw/vh) and LARGE (scale ~1.8) — feels close to the camera. By enter-end the tile has slid to its final position and shrunk to its final scale (1). */ .wz-tile { position: absolute; border-radius: 12px; /* overflow:visible so the hover badge can spill past the tile's edge — the image/video below clips itself via its own border-radius so the rounded corners still show. */ overflow: visible; background: var(--surface); text-decoration: none; cursor: pointer; transform: translate(-50%, -50%) translate(var(--ox, 0vw), var(--oy, 0vh)) scale(var(--sc, 1.8)); transform-origin: center center; /* Hidden before its entry window starts so the page doesn't open with all 22 tiles visible at large scale. JS sets --op = 1 once the tile reaches its entry-start. */ opacity: var(--op, 0); } .wz-tile:hover { transform: translate(-50%, -50%) translate(var(--ox, 0vw), var(--oy, 0vh)) scale(var(--sc, 1.8)) translateY(-4px); transition: transform 0.25s var(--ease-out); } /* Hover badge — pill in the tile's top-right with project name + ↗ arrow. The label comes from the tile's data-label (set in JS from the slug). The badge counter-scales the tile's perspective transform so it always renders at the SAME viewport-pixel size regardless of how big or small the tile is in the camera move. transform-origin top-right anchors it to the tile's corner. */ .wz-tile::after { content: attr(data-label); position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; height: 28px; padding: 0 32px 0 12px; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center; border-radius: 100px; font-family: 'Inter', -apple-system, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #111; white-space: nowrap; opacity: 0; transform: scale(calc(1 / var(--sc, 1))); transform-origin: top right; transition: opacity 0.2s var(--ease-out); pointer-events: none; } .wz-tile:hover::after { opacity: 1; } .wz-tile img, .wz-tile video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; /* Now that .wz-tile is overflow:visible, the rounded corners need to live on the media itself. */ border-radius: 12px; } /* Caption + controls are flex children of the sticky column, so they stay 24px apart regardless of which view is active. */ .work-zoom__caption { position: relative; font-family: 'Inter', sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); text-align: center; z-index: 10; pointer-events: none; max-width: min(820px, 80vw); margin: 0; padding: 0; } /* Word-by-word entrance — same gentle ease as the hero

("App, web, brand and build expert"). No bounce; pure ease-out. */ .wz-caption-word { display: inline-block; opacity: 0; transform: translateY(40px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .wz-caption-word.is-in { opacity: 1; transform: translateY(0); } /* Unified controls below the caption. - In canvas/zoom view: only the toggle is in flow → bar collapses to the toggle's width → translateX(-50%) lands the toggle dead-centre. - In tiles/rows view: filters expand from max-width 0 to natural width (with 16px left margin). The bar grows; translateX(-50%) keeps it centred so the toggle smoothly shifts left to make space, and the filters fade-in-up beside it. */ .work-zoom__controls { position: relative; z-index: 10; display: flex; align-items: center; pointer-events: auto; opacity: 0; /* Fade in early so the controls begin appearing while the caption is still finishing its word-stagger. */ transition: opacity 0.5s ease; } .work-zoom__sticky.controls-ready .work-zoom__controls { opacity: 1; } /* Reset the legacy margin-top that .work-view-toggle (16px) and .work-filters (4px) carry from the work-panel layout — inside work-zoom__controls we want both children flush so flex align-items:center keeps them on the same baseline. */ .work-zoom__controls .work-view-toggle, .work-zoom__controls .work-filters { margin-top: 0; } /* Filters hidden by default — collapsed to width 0 with no left margin so they take no space (toggle is alone, centred). flex-wrap:nowrap keeps the buttons on a single row even when max-width:0 clips them horizontally, so the wrapper's height stays 32px rather than ballooning to 4×stacked-button-heights. */ .work-zoom__controls .work-filters[data-target="zoom"] { max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; white-space: nowrap; flex-wrap: nowrap; transition: max-width 0.5s ease, margin-left 0.5s ease, opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; } .work-zoom[data-view="tiles"] .work-zoom__controls .work-filters[data-target="zoom"], .work-zoom[data-view="rows"] .work-zoom__controls .work-filters[data-target="zoom"] { max-width: 500px; margin-left: 16px; opacity: 1; transform: translateY(0); pointer-events: auto; } /* In list/tile mode caption + controls scroll WITH the rest of the page — no sticky pinning, no 480vh runway. Title sits above the filter bar, filter bar above the grid, all in normal document flow. */ .work-zoom[data-view="rows"], .work-zoom[data-view="tiles"] { height: auto; } .work-zoom[data-view="rows"] .work-zoom__sticky, .work-zoom[data-view="tiles"] .work-zoom__sticky { position: relative; height: auto; /* In list/tile mode the section becomes flow content. Top padding of ~50vh keeps the title at roughly the same mid-screen position the user sees in canvas view (where sticky pins it at viewport centre). */ padding: 50vh 28px 28px; flex-direction: column; justify-content: flex-start; gap: 24px; } .work-zoom[data-view="rows"] .work-zoom__caption, .work-zoom[data-view="tiles"] .work-zoom__caption { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; display: block; } .work-zoom[data-view="rows"] .work-zoom__controls, .work-zoom[data-view="tiles"] .work-zoom__controls { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; } /* Hide the parallax stage in list/tile modes — its place is taken by the grid hosted directly below. */ .work-zoom[data-view="rows"] .work-zoom__stage, .work-zoom[data-view="tiles"] .work-zoom__stage { display: none; } /* Grid host — sits below the (non-sticky) caption+controls block in the page DOM and scrolls together with them. Centred horizontally so the grid block lines up under the centred caption + filters. 100px of breathing room above the grid so the tiles/rows don't sit tight against the toggle controls. */ .work-zoom__grid-host { position: relative; z-index: 1; padding: 100px 28px 80px; max-width: 1280px; margin: 0 auto; } .work-zoom__grid-host .work-panel__grid { margin-left: auto; margin-right: auto; } /* In rows view the grid declares one 700px-wide column inside a wide grid container — that lines the rows up to the LEFT of the host. Centre the column track horizontally so rows sit in the middle. */ .work-zoom__grid-host .work-panel__grid:not(.work-panel__grid--tiles) { justify-content: center; } .work-zoom[data-view="zoom"] .work-zoom__grid-host { display: none; } .work-panel:not(.has-grid) { display: none; } /* Mobile: hide the parallax/zoom section entirely. The .work-panel below already has its own heading, filters and tile grid — showing both creates a duplicate "Helping businesses…" heading. */ @media (max-width: 899px) { .work-zoom { display: none; } /* Force the standard panel grid visible. (On desktop the JS toggles `.has-grid` to flip this; on mobile that JS early-returns.) */ .work-panel { display: block !important; } /* Push the first tile down so it isn't crammed against the toggle row */ .work-panel__grid { padding-top: 28px; } } /* Desktop: zoom view sits ABOVE the standard tile/list grid; users can continue scrolling past the zoom and see the same projects in the classic grid (with category filters + view-mode toggle). */