/* Google Fonts loaded via in each page — not here */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #1a1a1a; --bg2: #222222; --border: #2a2a2a; --text: #ffffff; --text-body: rgba(255, 255, 255, 0.85); /* body / paragraph copy */ --muted: rgba(255, 255, 255, 0.68); /* metadata, labels, secondary */ --accent: #007AFF; --font: 'Roboto', sans-serif; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 300; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ── PAGE CONTAINER ── */ .container { max-width: 1440px; margin: 0 auto; padding-left: 80px; padding-right: 80px; } /* ── NAV ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; background: var(--bg); } .nav-logo { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--text); line-height: 1; transition: opacity 0.2s; } .nav-logo:hover { opacity: 0.75; } .nav nav { display: flex; align-items: center; gap: 32px; } .nav nav a { display: inline-flex; align-items: center; line-height: 1; font-size: 14px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); transition: color 0.2s; } .nav nav a:hover { color: var(--text); } /* ── HERO ── */ .hero { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 5% 100%, rgba(123, 47, 190, 0.26) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 95% 0%, rgba(0, 122, 255, 0.20) 0%, transparent 60%); filter: url(#grain) contrast(1.1); pointer-events: none; z-index: 0; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 70%, transparent 100%); z-index: 2; } /* ── HERO INNER GRID (container acts as the 2-col grid) ── */ .hero > .container { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 72px; padding-top: 88px; /* clear fixed nav */ align-items: stretch; position: relative; z-index: 1; } /* Left: all text content, vertically centered */ .hero-text { display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; } .hero-name { font-size: clamp(48px, 6.2vw, 84px); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 14px; } .hero-role { font-size: 13px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 32px; } /* Primary statement — strongest body text in the hero */ .hero-bio { font-size: clamp(16px, 1.5vw, 19px); color: var(--text-body); line-height: 1.65; font-weight: 300; margin-bottom: 14px; max-width: 520px; text-wrap: pretty; } /* Supporting context — lighter and smaller */ .hero-bio-sub { font-size: clamp(15px, 1.35vw, 17px); color: var(--muted); line-height: 1.75; font-weight: 300; margin-bottom: 16px; max-width: 480px; text-wrap: pretty; } .hero-bio-sub strong { color: var(--text-body); font-weight: 400; } .hero-traits { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 32px; } /* ── HERO ACTION BUTTONS ── */ .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .hero-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.68) !important; font-size: 13px; font-weight: 400; letter-spacing: 0.03em; line-height: 1; transition: border-color 0.2s, color 0.2s, background 0.2s; white-space: nowrap; } .hero-action-btn svg { width: 11px; height: 11px; display: block; flex-shrink: 0; opacity: 0.7; } .hero-action-btn:hover { border-color: rgba(255, 255, 255, 0.24); color: #ffffff !important; background: rgba(255, 255, 255, 0.04); } .hero-action-btn:hover svg { opacity: 1; } /* Group gap — Email starts the second group */ .hero-action-btn[data-type="email"] { margin-left: 10px; } /* Email + CV: quiet blue hover */ .hero-action-btn[data-type="email"]:hover, .hero-action-btn[data-type="cv"]:hover { border-color: var(--accent); background: rgba(0, 122, 255, 0.10); } /* LinkedIn + WhatsApp: paper-slide fill on hover via ::before */ .hero-action-btn[data-type="linkedin"], .hero-action-btn[data-type="whatsapp"] { position: relative; overflow: hidden; isolation: isolate; /* new stacking context so ::before stays behind text */ transition: border-color 0.24s ease-out, color 0.2s ease-out; } .hero-action-btn[data-type="linkedin"] { --slide-color: #0A66C2; } .hero-action-btn[data-type="whatsapp"] { --slide-color: #25D366; } /* Fill layer — starts fully off-screen to the left */ .hero-action-btn[data-type="linkedin"]::before, .hero-action-btn[data-type="whatsapp"]::before { content: ''; position: absolute; inset: 0; background: var(--slide-color); border-radius: inherit; transform: translateX(-100%); transition: transform 0.26s ease-out; z-index: -1; /* behind text/icon within the isolated stacking context */ } /* On hover: slide fill in, swap border + text colour */ .hero-action-btn[data-type="linkedin"]:hover, .hero-action-btn[data-type="whatsapp"]:hover { border-color: var(--slide-color); color: #ffffff !important; background: transparent; } .hero-action-btn[data-type="linkedin"]:hover::before, .hero-action-btn[data-type="whatsapp"]:hover::before { transform: translateX(0); } /* Right: portrait column — grounded to hero floor */ .hero-photo { align-self: end; } .hero-photo img { width: 100%; display: block; } /* ── HERO SHAPES ── */ .shape { position: absolute; pointer-events: none; z-index: 0; } /* large faint ring — ambient background texture */ .shape-ring-1 { width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.05); top: -80px; right: -80px; } /* smaller ring — bottom right ambient */ .shape-ring-2 { width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(0, 122, 255, 0.08); bottom: 32px; right: 60px; } /* dot grid — top right corner, very subtle */ .shape-dot-grid { width: 100px; height: 100px; top: 100px; right: 100px; background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 14px 14px; opacity: 0.4; } @media (max-width: 900px) { .hero { min-height: 100vh; min-height: 100svh; } .hero > .container { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding-top: 96px; padding-bottom: 0; gap: 0; } .hero-text { flex-shrink: 0; justify-content: flex-start; padding-bottom: 24px; } .hero-photo { display: flex; align-items: flex-end; justify-content: flex-end; align-self: stretch; flex: 1; min-height: 200px; overflow: hidden; padding-bottom: 20px; } .hero-photo img { width: min(55%, 270px); margin-right: 16px; height: auto; display: block; } .hero-actions { flex-direction: row; flex-wrap: wrap; } } /* Mobile portrait: smaller, flush to hero bottom divider */ @media (max-width: 600px) { .hero-photo { justify-content: flex-end; padding-bottom: 0; } .hero-photo img { width: 50%; margin-right: 4px; } } /* ── Ultra-wide breakpoints: restore balance between text + portrait ── width: 100% is required on .hero > .container because margin: 0 auto on a flex child disables cross-axis stretch, so max-width alone won't expand the grid — the container must be told to fill the flex parent first. */ @media (min-width: 1800px) { .container { max-width: 1680px; } .hero > .container { width: 100%; grid-template-columns: 1fr 360px; gap: 96px; } } @media (min-width: 1920px) { .container { max-width: 1760px; } .hero > .container { width: 100%; grid-template-columns: 1fr 420px; gap: 108px; } .hero-name { font-size: 96px; } } @media (min-width: 2560px) { .container { max-width: 2100px; } .hero > .container { width: 100%; grid-template-columns: 1fr 480px; gap: 120px; } } @media (min-width: 3200px) { .container { max-width: 2600px; } .hero > .container { width: 100%; grid-template-columns: 1fr 580px; gap: 140px; } } /* ── WORK INDEX ── */ .work-index { padding: 0; } /* ┌───────────────────────────────────────────────────────────────── │ ROLLBACK: previous homepage Work section (3-col card grid) │ Uncomment this block + the matching HTML in index.html to restore. └───────────────────────────────────────────────────────────────── .work-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 20px; padding: 28px 80px 80px; } .project-card { display: block; cursor: pointer; border: 1px solid rgba(255,255,255,0.025); border-radius: 16px; padding: 10px 10px 14px; background: transparent; transition: border-color 220ms ease; } .project-card:hover { border-color: rgba(255,255,255,0.07); } .project-thumb { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; position: relative; } .project-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; vertical-align: bottom; filter: brightness(0.85) saturate(0.92); transition: filter 220ms ease; } .project-card:hover .project-thumb img { filter: brightness(1) saturate(1); } .project-meta { padding: 14px 2px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .project-name { font-size: 15px; font-weight: 400; } .project-tag { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } */ /* ── WORK SECTION (editorial zigzag) ── */ .work-section { padding-bottom: 120px; } .work-section-header { padding: 72px 0 56px; } .work-section-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* Project row — default: text left (0.85fr), mockup right (1.15fr) */ .work-item { display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "text mockup"; gap: 80px; align-items: center; padding: 64px 0; position: relative; /* anchor for the stretched ::after block-link */ cursor: pointer; } /* Reverse row: mockup left (1.15fr), text right (0.85fr) */ .work-item--reverse { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "mockup text"; } .work-item-text { grid-area: text; position: relative; z-index: 3; } .work-item-mockup { grid-area: mockup; } /* Metadata + numbering */ .work-item-meta { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } /* Title */ .work-item-title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); margin-bottom: 16px; transition: color 0.2s; } /* Description */ .work-item-desc { font-size: 16px; line-height: 1.7; color: var(--text-body); font-weight: 300; max-width: 460px; margin-bottom: 28px; text-wrap: pretty; } /* Full-row cover link — sits behind text column (z: 3), above the mockup. z-index: 2 ensures it's above the JS-animated mockup which may form a stacking context. Handles clicks on the image area and row background. aria-hidden/tabindex=-1 in HTML. */ .work-item-cover-link { position: absolute; inset: 0; z-index: 2; } /* View project link */ .work-item-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); transition: color 0.2s; /* Stretch to cover the entire .work-item row — block-link pattern */ position: static; /* do not position this element itself */ } /* Invisible overlay that makes the whole row clickable */ .work-item-link::after { content: ''; position: absolute; inset: 0; } .work-item-link svg { width: 11px; height: 11px; display: block; flex-shrink: 0; opacity: 0.85; transition: opacity 0.2s, transform 0.2s; position: relative; /* sit above the ::after overlay */ } /* Focus ring on the overlay (keyboard navigation) */ .work-item-link:focus { outline: none; } .work-item-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 2px; } /* Row-level hover — all elements respond together */ .work-item:hover .work-item-title { color: rgba(255, 255, 255, 0.95); } .work-item:hover .work-item-link { color: #3d9bff; /* slightly brighter than --accent */ } .work-item:hover .work-item-link svg { opacity: 1; transform: translateX(2px); } .work-item:hover .work-item-mockup img { filter: drop-shadow(0 20px 52px rgba(0, 0, 0, 0.45)) brightness(1.06); } /* Mockup: PNG floats freely — scroll-linked animation driven entirely by JS */ .work-item-mockup { display: flex; align-items: center; will-change: opacity, transform; /* No CSS transition here — JS rAF loop handles all animation */ } .work-item-mockup img { width: 100%; display: block; filter: drop-shadow(0 20px 52px rgba(0, 0, 0, 0.45)); transition: filter 0.3s ease; } /* prefers-reduced-motion: JS also bails early, but belt-and-suspenders */ @media (prefers-reduced-motion: reduce) { .work-item-mockup { opacity: 1 !important; transform: none !important; } } /* Mobile: stack vertically, mockup on top, no scroll animation */ @media (max-width: 900px) { .work-item, .work-item--reverse { grid-template-columns: 1fr; grid-template-areas: "mockup" "text"; /* image always above text on mobile */ gap: 20px; padding: 48px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .work-item:last-child { border-bottom: none; } .work-item-mockup { opacity: 1 !important; transform: none !important; } .work-item-desc { max-width: 100%; } } @media (max-width: 768px) { .work-section { padding-bottom: 60px; } .work-section-header { padding: 48px 0 32px; } .work-item, .work-item--reverse { padding: 36px 0; gap: 16px; } /* Match work section container padding to hero mobile padding */ .work-section .container { padding-left: 24px; padding-right: 24px; } } /* ── PROJECT PAGE ── */ .project-page { max-width: 1280px; margin: 0 auto; padding: 140px 60px 120px; } /* keep prose readable at any width */ .project-header, .project-header .brief, .content-section { max-width: 760px; } .back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 80px; transition: color 0.2s; } .back-link:hover { color: var(--text); } .back-link::before { content: '←'; font-size: 14px; } .project-header { margin-bottom: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--border); } .project-header h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 36px; } .project-attrs { display: flex; gap: 56px; flex-wrap: wrap; margin-bottom: 36px; list-style: none; } .project-attr dt { display: block; font-size: 14px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .project-attr dd { font-size: 14px; font-weight: 400; } .brief { font-size: 18px; line-height: 1.75; color: var(--text-body); font-weight: 300; max-width: 720px; text-wrap: pretty; } /* ── CONTENT SECTIONS ── */ .content-section { margin-bottom: 72px; } .section-label { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } /* Standalone section headings (The Approach, The Split, Outcome, Why Async…) Only applies when there is no h2 in the section — eyebrow labels above h2 stay blue */ .content-section:not(:has(h2)) .section-label { color: rgba(255, 255, 255, 0.90); font-weight: 500; } .content-section h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.3; } .content-section p { font-size: 16px; line-height: 1.85; color: var(--text-body); max-width: 680px; text-wrap: pretty; } .content-section p + p { margin-top: 14px; } .feature-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 9px; } .feature-list li { font-size: 16px; color: var(--text-body); padding-left: 22px; position: relative; line-height: 1.7; } .feature-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); } hr.divider { border: none; border-top: 1px solid var(--border); margin: 56px 0; } /* ── SCREEN MOCKUP ── */ .screen-showcase { position: relative; } .screen-showcase::after { content: ''; position: absolute; bottom: -24px; left: 10%; right: 10%; height: 48px; background: rgba(255, 255, 255, 0.04); filter: blur(24px); border-radius: 50%; pointer-events: none; z-index: 0; } .screen-mockup { border-radius: 10px; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35), 0 32px 64px rgba(0, 0, 0, 0.2); } .screen-mockup img { width: 100%; display: block; } /* ── CASE STUDY SPLIT LAYOUT ── */ .case-split { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(48px, 5vw, 96px); align-items: center; margin-bottom: 80px; } .case-split.reverse { direction: rtl; } .case-split.reverse > * { direction: ltr; } .case-split__text .section-label { margin-bottom: 12px; } .case-split__text h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.3; } .case-split__text p { font-size: 16px; line-height: 1.85; color: var(--text-body); text-wrap: pretty; } .case-split__text p + p { margin-top: 12px; } .case-split__text .feature-list { margin-top: 16px; } @media (max-width: 900px) { .case-split { grid-template-columns: 1fr; gap: 36px; } .case-split.reverse { direction: ltr; } } /* ── PROJECT NAVIGATION ── */ .project-nav { display: flex; align-items: flex-start; justify-content: space-between; padding: 40px 0; border-top: 1px solid var(--border); margin-top: 80px; gap: 24px; } .project-nav__item { display: flex; align-items: center; gap: 18px; transition: opacity 0.2s; max-width: 46%; color: var(--text); } .project-nav__item:hover { opacity: 0.5; } .project-nav__item--next { margin-left: auto; text-align: right; } .project-nav .np-label { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; } .project-nav .np-title { font-size: 20px; font-weight: 300; letter-spacing: -0.01em; } .project-nav .np-arrow { flex-shrink: 0; color: var(--muted); display: flex; align-items: center; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .nav { height: 56px; padding: 0 24px; } .nav nav { gap: 18px; } .work-index { padding: 0; } /* .work-grid { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 16px; padding: 24px 24px 60px; } — rollback */ .hero > .container { padding-left: 24px; padding-right: 24px; } /* Nav links: expand tap area to 44px without changing visual appearance */ .nav nav a { padding: 15px 0; } /* Hero CTA buttons: 44px tap target; 2×2 grid applied via narrower breakpoint below */ .hero-actions { gap: 8px; } .hero-action-btn { height: 44px; } .hero-action-btn[data-type="email"] { margin-left: 0; } /* .project-meta { padding: 12px 0 20px; } — rollback */ .project-page { padding: 100px 24px 80px; max-width: 100%; } .project-header h1 { font-size: 32px; } .project-attrs { gap: 28px; } .brief { font-size: 16px; } .work-item-meta { display: none; } .project-nav { flex-direction: column; gap: 0; margin-top: 60px; } .project-nav__item { max-width: 100%; width: 100%; padding: 20px 0; } .project-nav__item + .project-nav__item { border-top: 1px solid var(--border); } .project-nav__item--next { margin-left: 0; justify-content: flex-end; } .project-nav .np-title { font-size: 18px; } } /* ── LIGHTBOX ── */ .lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.88); align-items: center; justify-content: center; cursor: zoom-out; } .lightbox-overlay.is-open { display: flex; } .lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; object-fit: contain; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6); cursor: default; user-select: none; } .lightbox-close { position: fixed; top: 24px; right: 28px; width: 36px; height: 36px; border: none; background: rgba(255, 255, 255, 0.10); border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.18); } [data-lightbox] { cursor: zoom-in; } /* ── ABOUT CTA ── */ .about-cta { padding: 80px; text-align: center; border-top: 1px solid var(--border); } .about-cta-heading { font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; letter-spacing: -0.02em; color: var(--text); margin-bottom: 28px; } @media (max-width: 600px) { .about-cta { padding: 48px 24px; } } /* ── SITE FOOTER ── */ .site-footer { padding: 28px 80px; border-top: 1px solid var(--border); text-align: center; } .site-footer p { font-size: 15px; color: rgba(255, 255, 255, 0.70); letter-spacing: 0.04em; line-height: 1.6; } .footer-accent { color: #C97A52; } @media (max-width: 768px) { .site-footer { padding: 24px; } } /* Small mobile: 2×2 grid for hero CTA buttons — prevents CV stranding on its own row */ @media (max-width: 480px) { .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } } /* ── ACCESSIBILITY UTILITIES ── */ .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; }