/* Base Reset & Variables */ :root { --color-dark: #121212; --color-light: #f5f5f5; --color-accent: #D5FF40; --color-secondary: #b3b3b3; --color-tertiary: #5e5e5e; --font-heading: 'Syne', sans-serif; --font-body: 'Space Grotesk', sans-serif; --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); --grid-gap: clamp(1rem, 5vw, 3rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-size: 16px; background-color: var(--color-dark); color: var(--color-light); font-family: var(--font-body); line-height: 1.5; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Global scrollbar (Firefox) */ html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; } /* Prevent flash of unanimated hero text while loading */ /* During the loading state we keep the hero content hidden/offset but avoid skew so it doesn't appear tilted if JS/animations haven't run yet. */ body.loading .hero-word, body.loading .hero-quote { opacity: 0; /* only translate on load; remove skew which can leave a tilted layout on devices where animations don't run or when the loading class lingers */ transform: translateY(40px); filter: blur(6px); } .container { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem); } a { text-decoration: none; color: inherit; } ul, li { list-style-type: none; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; } img { max-width: 100%; height: auto; } button, input, textarea, select { font-family: var(--font-body); font-size: 1rem; border: none; outline: none; background: none; } /* When the site uses the custom cursor (added by JS) hide the native cursor globally */ /* Native cursor restored globally; custom cursor removed */ /* Custom cursor: small dot and follower ring (no trail) */ .cursor { position: fixed; width: 8px; height: 8px; background-color: var(--color-accent); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease, background 0.15s ease; } .cursor-follower { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(213,255,64,0.15); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: transform 0.18s ease, opacity 0.18s ease; opacity: 0.75; } /* Hide native cursor when we're intentionally using the custom cursor */ body.use-custom-cursor, body.use-custom-cursor a, body.use-custom-cursor button, body.use-custom-cursor input, body.use-custom-cursor textarea, body.use-custom-cursor select { cursor: none; } /* Hide custom cursor elements by default (mobile). They are only shown when JS adds the `use-custom-cursor` class on (desktop-sized viewports) */ .cursor, .cursor-follower { display: none; } body.use-custom-cursor .cursor, body.use-custom-cursor .cursor-follower { display: block; } section { padding: clamp(4rem, 10vw, 2rem) 0; } /* Preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--color-dark); z-index: 10000; display: flex; align-items: center; justify-content: center; } .loader { width: 80%; max-width: 600px; } .loader-text { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--color-light); margin-bottom: 1rem; letter-spacing: 0.2em; } .loader-bar { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2); position: relative; } .loader-bar::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--color-accent); animation: loading 2s ease-in-out forwards; } @keyframes loading { to { width: 100%; } } /* Navigation */ .nav-toggle { position: fixed; top: 2rem; right: 2rem; width: 50px; height: 50px; background-color: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3001; /* above .navigation (2000) so it remains clickable to close */ cursor: pointer; } .nav-toggle-bar { width: 20px; height: 2px; background-color: var(--color-dark); position: relative; transition: var(--transition-fast); } .nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--color-dark); transition: var(--transition-fast); } .nav-toggle-bar::before { transform: translateY(-6px); } .nav-toggle-bar::after { transform: translateY(6px); } .nav-toggle.active .nav-toggle-bar { background-color: transparent; } .nav-toggle.active .nav-toggle-bar::before { transform: translateY(0) rotate(45deg); } .nav-toggle.active .nav-toggle-bar::after { transform: translateY(0) rotate(-45deg); } .navigation { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 2000; /* above page and modals */ opacity: 0; visibility: hidden; background-color: var(--color-dark); /* solid backdrop to prevent bleed-through */ transition: var(--transition-smooth); } .navigation.active { opacity: 1; visibility: visible; pointer-events: auto; /* allow clicks when nav is open */ } /* Lock page scroll when nav is open */ body.nav-open { overflow: hidden; height: 100vh; } .nav-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-dark); transform: translateY(-100%); transition: var(--transition-smooth); z-index: 1; /* place background below content */ } .navigation.active .nav-bg { transform: translateY(0); } .nav-content { position: relative; width: 100%; height: 100%; padding: 2rem; display: flex; flex-direction: column; overflow: hidden; /* no scrolling as requested */ opacity: 0; transform: translateY(50px); transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0.2s; z-index: 2; /* ensure links are above background */ } .navigation.active .nav-content { opacity: 1; transform: translateY(0); } .nav-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 0; } .logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-light); } .nav-close { font-size: 1.5rem; cursor: pointer; color: var(--color-accent); } .nav-links { margin-top: 4rem; flex-grow: 1; } .nav-link { display: block; font-family: var(--font-heading); font-size: clamp(1.8rem, 5.5vw, 4rem); font-weight: 800; color: var(--color-light); line-height: 1.08; position: relative; transition: var(--transition-fast); transform-origin: left; } /* When vertical space is limited, scale down nav to fit without scrolling */ @media (max-height: 900px) { .nav-link { font-size: clamp(1.6rem, 5vw, 3.4rem); } .nav-links { margin-top: 2rem; } } @media (max-height: 760px) { .nav-link { font-size: clamp(1.4rem, 4.5vw, 2.8rem); } .nav-links { margin-top: 1.25rem; } .nav-info { font-size: 0.95rem; } .nav-info-block h4 { font-size: 0.7rem; } } @media (max-height: 640px) { .nav-link { font-size: clamp(1.2rem, 4vw, 2.3rem); } .nav-links { margin-top: 1rem; } .nav-info { display: none; } /* hide extra info to keep all links visible */ } .nav-link:hover { color: var(--color-accent); transform: scale(1.05); } .nav-link::before { content: attr(data-text); position: absolute; top: 0; left: 0; color: var(--color-accent); width: 0; overflow: hidden; white-space: nowrap; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover::before { width: 100%; } .nav-info { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; } .nav-info-block { margin-right: 3rem; margin-bottom: 2rem; } .nav-info-block h4 { font-size: 0.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-secondary); margin-bottom: 1rem; } .nav-info-block a, .nav-info-block p { display: block; margin-bottom: 0.5rem; transition: var(--transition-fast); } .nav-info-block a:hover { color: var(--color-accent); } .nav-social { display: flex; gap: 1rem; } /* Add breathing room below social buttons so they don't sit flush against the divider */ .nav-social { margin-bottom: 1rem; } @media (max-width: 640px) { .nav-social { margin-bottom: 0.6rem; } } .social-link { display: inline-block; padding: 0.5rem; transition: var(--transition-fast); } .social-link:hover { color: var(--color-accent); transform: translateY(-5px); } /* Hero Section */ .hero { position: relative; /* Use small/large/dynamic viewport units to avoid mobile address bar cutoffs */ height: 100vh; height: 100svh; height: 100dvh; width: 100%; display: flex; align-items: center; overflow: hidden; /* keep the hero content inset from the viewport edges */ padding-left: clamp(1.5rem, 5vw, 5rem); padding-right: clamp(1.5rem, 5vw, 5rem); } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-dark); /* removed placeholder background text */ } .hero-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 18, 18, 0.7); mix-blend-mode: multiply; } .hero-content { position: relative; z-index: 1; width: 100%; padding: 0 clamp(1.5rem, 5vw, 5rem); } .hero-title { font-size: clamp(2.2rem, 9.5vw, 6rem); font-weight: 800; line-height: 1.2; margin-bottom: 2rem; text-transform: uppercase; } /* Inline accent for highlighted words inside hero titles/quotes */ .hero-title .accent { color: var(--color-accent); } /* Simple quote wrapper inside the hero */ .hero-quote { display: block; } /* Mobile-friendly adjustments for hero quote */ @media (max-width: 768px) { .hero-title { font-size: clamp(1.6rem, 9vw, 3.2rem); /* keep readable but smaller */ line-height: 1.18; margin-bottom: 1rem; white-space: normal; /* allow wrapping between words */ } .hero { padding-left: 1.25rem; padding-right: 1.25rem; } /* move scroll/footer slightly up so text and footer don't overlap */ .hero-scroll { bottom: 1.25rem; left: 1.25rem; } .hero-footer { bottom: 1.25rem; right: 1.25rem; } } /* Extra small screens: ensure the quote stays visible and not too tall */ @media (max-width: 420px) { .hero-title { font-size: clamp(1.25rem, 9.5vw, 2.6rem); } } .hero-word { display: block; overflow: visible; /* allow glyphs or masks to render without being clipped */ transform-origin: left; } /* Sweep mask for hero reveal */ .hero-word { position: relative; } .hero-word .reveal-mask { position: absolute; top: 0; left: 0; bottom: 0; width: 120%; background: linear-gradient(90deg, rgba(213,255,64,0.0) 0%, rgba(213,255,64,0.5) 20%, rgba(213,255,64,0.0) 60%); pointer-events: none; mix-blend-mode: screen; } /* Per-letter hero animation support */ /* No per-letter splitting needed now */ .hero-word.accent { color: var(--color-accent); } /* Keep individual words intact and prevent mid-word breaks; allow wrapping only between words */ .hero-quote .hero-word { display: inline-block; white-space: nowrap; margin-right: 0.35rem; /* Align the top edge of each inline-block word so different font sizes stack vertically without creating a slanted staircase effect. */ vertical-align: top; overflow: visible; /* ensure inline-block words don't clip large glyphs */ } .hero-quote .accent { color: var(--color-accent); } /* Vary the sizes of individual words for a more dynamic hero layout. Use clamp so sizes stay responsive; tweak nth-child indices to change emphasis. */ .hero-quote .hero-word { font-family: var(--font-heading); font-weight: 800; } .hero-quote .hero-word:nth-child(1) { /* Architecture */ font-size: clamp(1.8rem, 9vw, 5.2rem); } .hero-quote .hero-word:nth-child(2) { /* is */ font-size: clamp(1.1rem, 4.5vw, 2.6rem); } .hero-quote .hero-word:nth-child(3) { /* the */ font-size: clamp(1.1rem, 4.5vw, 2.6rem); } .hero-quote .hero-word:nth-child(4) { /* thoughtful */ font-size: clamp(1.25rem, 5.5vw, 3.6rem); } .hero-quote .hero-word:nth-child(5) { /* making */ font-size: clamp(1.1rem, 4.5vw, 2.8rem); } .hero-quote .hero-word:nth-child(6) { /* of */ font-size: clamp(1rem, 3.8vw, 2.4rem); } .hero-quote .hero-word:nth-child(7) { /* places (accented) */ font-size: clamp(1.4rem, 7.2vw, 4rem); } /* Mobile overrides: reduce extremes so the quote fits well */ @media (max-width: 768px) { .hero-quote .hero-word:nth-child(1) { font-size: clamp(1.4rem, 7.5vw, 3rem); } .hero-quote .hero-word:nth-child(4) { font-size: clamp(1.1rem, 6.2vw, 2.4rem); } .hero-quote .hero-word:nth-child(7) { font-size: clamp(1.2rem, 8vw, 2.8rem); } .hero-quote .hero-word:nth-child(2), .hero-quote .hero-word:nth-child(3), .hero-quote .hero-word:nth-child(5), .hero-quote .hero-word:nth-child(6) { font-size: clamp(0.95rem, 4.5vw, 1.6rem); } } @media (max-width: 420px) { .hero-quote .hero-word:nth-child(1) { font-size: clamp(1.25rem, 9.5vw, 2.2rem); } .hero-quote .hero-word:nth-child(7) { font-size: clamp(1.1rem, 8.5vw, 2.4rem); } } .hero-scroll { position: absolute; bottom: 2rem; left: clamp(1.5rem, 5vw, 5rem); display: flex; align-items: center; gap: 1rem; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; } .scroll-line { width: 30px; height: 1px; background-color: var(--color-light); animation: scrollLine 1.5s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0.5); transform-origin: right; } 50.1% { transform: scaleX(0.5); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } .hero-footer { position: absolute; bottom: 2rem; right: clamp(1.5rem, 5vw, 5rem); display: flex; align-items: center; gap: 2rem; font-size: 0.8rem; font-weight: 500; color: var(--color-secondary); } /* Scroll-to-top button */ .scroll-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); color: #0b0b0b; display: grid; place-items: center; z-index: 9000; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); transform: translateY(12px) scale(0.98); opacity: 0; pointer-events: none; transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; } .scroll-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } @media (max-width: 640px) { .scroll-top { right: 0.8rem; bottom: 0.8rem; width: 40px; height: 40px; } } /* Arrow bobbing animation */ @keyframes arrow-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.01); } } .scroll-top.visible { animation: arrow-bob 2.6s ease-in-out infinite; } .scroll-top:hover { transform: translateY(0) scale(1.06); } .scroll-top:focus { outline: none; box-shadow: 0 0 0 4px rgba(213,255,64,0.12); } /* Global cursor hover 'negative' effect: when the custom cursor is active, hovering anywhere in the document makes the inner dot larger and hides the follower ring. */ /* Keep the cursor visuals simple — hover sizing controlled by JS hover handlers */ /* Keep touch devices unaffected since the class isn't applied there; also ensure interactive controls still show the same effect. */ /* About Section */ .section-number { font-family: var(--font-heading); font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 500; color: var(--color-accent); margin-right: 1rem; } .section-title { font-size: clamp(2.5rem, 10vw, 5rem); font-weight: 800; margin-bottom: 4rem; text-transform: uppercase; } /* Safer wrappers for split-text animation so words don't get visually clipped */ .section-title .split-word { display: inline-block; overflow: hidden; } .section-title .split-word-inner { display: inline-block; } .about-header, .services-header, .gallery-header, .projects-header, .awards-header, .experience-header, .contact-header { display: flex; align-items: center; margin-bottom: 3rem; } /* Let header rows wrap on smaller screens so long titles don't get cut */ @media (max-width: 768px) { .about-header, .services-header, .gallery-header, .projects-header, .awards-header, .experience-header, .contact-header { flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; } /* Allow the title to take a full row if needed and be slightly smaller */ .section-title { flex: 1 1 100%; margin-bottom: 1.5rem; font-size: clamp(1.75rem, 8.5vw, 3rem); line-height: 1.05; /* Avoid breaking single long words like EDUCATION into two lines */ overflow-wrap: normal; white-space: nowrap; } .section-number { margin-right: 0.5rem; } /* Projects header also contains filters; align them below on mobile */ .projects-header { align-items: flex-start; } } /* Ensure titles in header rows keep to a single line by default; JS will auto-fit size */ .about-header .section-title, .services-header .section-title, .gallery-header .section-title, .projects-header .section-title, .awards-header .section-title, .experience-header .section-title, .contact-header .section-title, .education-header .section-title { white-space: nowrap; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-bottom: 4rem; } /* Testimonials carousel styles */ .testimonials-container { margin-top: 2.5rem; padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); } .testimonials-title { font-family: var(--font-heading); font-size: clamp(1.05rem, 2.2vw, 1.35rem); margin-bottom: 1rem; color: var(--color-light); } .testimonials-carousel { overflow: hidden; position: relative; padding: 0; } /* Testimonial layout sizing: show 3 cards on large screens, 2 on medium, 1 on small */ :root { --test-gap: 1rem; } .testimonials-track { display: flex; gap: var(--test-gap); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); align-items: stretch; will-change: transform; backface-visibility: hidden; } .testimonials-carousel, .testimonials-track { touch-action: pan-y; -ms-touch-action: pan-y; } .testimonials-track { cursor: grab; } .testimonials-track:active { cursor: grabbing; } .testimonial { width: calc((100% - (var(--test-gap) * 2)) / 3); flex: 0 0 auto; background: #0f0f0f; border: 1px solid rgba(213,255,64,0.12); padding: 1.1rem; border-radius: 10px; box-sizing: border-box; } .testimonial p, .testimonial .testimonial-text { margin: 0 0 .6rem 0; color: var(--color-light); line-height: 1.45; } .testimonial .testimonial-header { display:flex; gap:0.75rem; align-items:center; margin-bottom:.6rem; } .testimonial-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(213,255,64,0.16); } /* Prevent avatars from being draggable or selectable which can interfere with pointer drag on touch devices */ .testimonial-avatar, .testimonials-track img { -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .testimonial-header-text { display:flex; flex-direction:column; } .testimonial-author { font-weight:800; color:var(--color-light); } .testimonial-role { color: var(--color-secondary); font-size:0.9rem; } /* Small screens: make cards narrower and stack to single column on very small widths */ /* Two-per-row for medium screens */ @media (max-width: 1199px) and (min-width: 640px) { .testimonial { width: calc((100% - var(--test-gap)) / 2); } } /* Single card on smaller devices */ @media (max-width: 639px) { /* On small screens show a single full-width card and remove internal gaps so no partial cards peek */ .testimonials-track { gap: 0; } .testimonial { width: 100%; } } .about-image { position: relative; height: 100%; min-height: 500px; } .image-wrapper { width: 100%; height: 100%; position: relative; } .placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-tertiary); position: relative; overflow: visible; /* allow large hero words to render without being clipped */ } .architect-placeholder { background: linear-gradient(135deg, #1a1a1a, #333333); border: 1px solid rgba(255, 255, 255, 0.05); } /* Cursor-only x-ray / negative effect: when `body.cursor-xray` is present apply inversion / mix-blend to the cursor dot and follower ring. This keeps the rest of the page untouched and localizes the effect inside the ring. */ .cursor-follower { opacity: 0.75; } .cursor { mix-blend-mode: normal; z-index: 9999; } /* When JS adds `body.cursor-xray` we invert the view inside both the follower ring and the small inner dot. Use stronger fallbacks (filter + !important) since some browsers / stacking contexts can prevent mix-blend-mode from producing the expected visual on tiny solid elements. */ body.cursor-xray .cursor, body.cursor-xray .cursor-follower { mix-blend-mode: difference !important; background: rgba(255,255,255,0.06) !important; backdrop-filter: invert(1) saturate(0.6) contrast(1.02) !important; -webkit-backdrop-filter: invert(1) saturate(0.6) contrast(1.02) !important; border: 1px solid rgba(255,255,255,0.06) !important; opacity: 0.95 !important; /* Fallback: force an inversion on the element itself so small solid dots still appear inverted even when blend modes don't hit. */ filter: invert(1) saturate(0.6) contrast(1.02) !important; } /* If you want the inner dot to KEEP the accent color while only the follower ring shows the x-ray effect, replace the selector above with these two rules instead (uncomment and remove the combined selector): /* body.cursor-xray .cursor { mix-blend-mode: normal; background: var(--color-accent) !important; filter: none !important; } */ /* body.cursor-xray .cursor-follower { mix-blend-mode: difference !important; backdrop-filter: invert(1) !important; filter: none !important; } */ .placeholder-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--color-light); text-align: center; z-index: 2; position: relative; } .person-icon { font-size: 5rem; opacity: 0.5; } .large-text { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 500; margin-bottom: 2rem; line-height: 1.3; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; } .stat-item { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .stat-number { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; color: var(--color-accent); margin-bottom: 0.5rem; } .stat-label { font-size: 0.9rem; color: var(--color-secondary); } /* Education (timeline) */ .education { margin-top: 3rem; } .education-header { display: flex; align-items: center; margin-bottom: 2rem; } .education-timeline { position: relative; } .education-timeline::before { content: ''; position: absolute; left: 180px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.1); } .edu-item { display: grid; grid-template-columns: 180px 1fr; gap: var(--grid-gap); padding: 1.5rem 0; } .edu-left { text-align: left; } .edu-year { font-family: var(--font-heading); color: var(--color-accent); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 0.25rem; } .edu-school { font-weight: 700; } .edu-location { color: var(--color-secondary); font-size: 0.95rem; } .edu-right { display: flex; flex-direction: column; gap: 0.25rem; } .edu-degree { display: inline-block; width: fit-content; padding: 0.35rem 0.6rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; font-size: 0.9rem; } .edu-notes { color: var(--color-secondary); max-width: 70ch; } @media (max-width: 768px) { .education-timeline::before { left: 0; } .edu-item { grid-template-columns: 1fr; } } /* Skills Section */ .skills { background-color: var(--color-dark); color: var(--color-light); } .skills-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .skills-description { max-width: 70ch; margin-bottom: 4rem; font-size: 1.1rem; color: var(--color-secondary); } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 4rem; } .skill-item { position: relative; } .skill-name { margin-bottom: 0.5rem; font-weight: 500; } .skill-bar { width: 100%; height: 8px; background-color: var(--color-tertiary); border-radius: 4px; overflow: hidden; } .skill-progress { width: 0; /* Initial width */ height: 100%; background-color: var(--color-accent); border-radius: 4px; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Services Section */ .services { background-color: var(--color-dark); } .services-header { gap: 1.5rem; } .services-intro { color: var(--color-secondary); max-width: 75ch; margin-bottom: 2.5rem; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); counter-reset: svc-counter; } .service-card { position: relative; display: flex; flex-direction: column; gap: .75rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1.25rem 1.25rem 1.1rem; overflow: hidden; /* layered background: top accent bar, subtle grid, radial glow following cursor */ background: linear-gradient(90deg, rgba(213,255,64,0.45), rgba(213,255,64,0)) top/100% 2px no-repeat, radial-gradient(60% 120% at var(--mx,50%) var(--my,50%), rgba(213,255,64,0.09), transparent 60%) center/cover no-repeat, repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px), #0f0f0f; box-shadow: 0 8px 22px rgba(0,0,0,0.35); transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease, background .3s ease; will-change: transform; transform-style: preserve-3d; --rx: 0deg; --ry: 0deg; --tz: 0px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)); counter-increment: svc-counter; } .service-card::before { /* big index number */ content: counter(svc-counter, decimal-leading-zero); position: absolute; top: 10px; right: 12px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1; color: rgba(255,255,255,0.05); pointer-events: none; user-select: none; } .service-card::after { /* sheen sweep */ content: ''; position: absolute; inset: -40% auto -40% -20%; width: 60%; background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 100%); transform: translateX(-140%) rotate(18deg); opacity: 0; transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease; pointer-events: none; mix-blend-mode: screen; } .service-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 16px 36px rgba(0,0,0,0.5); --tz: 6px; } .service-card:hover::after { transform: translateX(180%) rotate(18deg); opacity: 1; } .service-badge { font-size: .72rem; letter-spacing: .1em; color: var(--color-secondary); text-transform: uppercase; } .service-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: .01em; text-transform: none; } .service-title { text-shadow: 0 0 0 rgba(0,0,0,0); } .service-description { color: var(--color-secondary); line-height: 1.6; margin-bottom: .5rem; } .service-cta { align-self: flex-start; padding: .55rem 1rem; border-radius: 10px; font-weight: 700; } @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } } /* Projects Section */ .projects { background-color: var(--color-dark); } .filter-categories { display: flex; gap: 2rem; margin-left: auto; } .filter-btn { font-size: 0.9rem; font-weight: 500; color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.1em; transition: var(--transition-fast); position: relative; } .filter-btn::after { content: ''; position: absolute; bottom: -0.5rem; left: 0; width: 100%; height: 2px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .filter-btn:hover, .filter-btn.active { color: var(--color-light); } .filter-btn.active::after { transform: scaleX(1); transform-origin: left; } /* Horizontal accordion of project cards */ .projects-grid { display: flex; gap: clamp(0.75rem, 2vw, 1rem); margin-top: 40px; height: clamp(360px, 55vh, 560px); overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; } .projects-grid::-webkit-scrollbar { height: 8px; } .projects-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; } .projects-grid { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .project-item { position: relative; flex: 1 1 0; min-width: 200px; border-radius: 12px; overflow: hidden; background: #0f0f0f; transition: flex 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease; cursor: pointer; } .projects-grid:hover .project-item { flex: 0.8 1 0; } .projects-grid .project-item:hover, .projects-grid .project-item:focus-visible { flex: 3 1 0; box-shadow: 0 20px 50px rgba(0,0,0,0.35); } /* Vertical side title (left-anchored, bold, green) */ .project-side-title { position: absolute; top: 14px; bottom: 14px; left: 18px; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 6vh, 5rem); /* JS will fine-tune per word length */ letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; pointer-events: none; z-index: 2; /* above project image */ opacity: 0.98; text-shadow: 0 0 12px rgba(213,255,64,0.25), 0 6px 22px rgba(0,0,0,0.6), 0 1px 0 rgba(0,0,0,0.35); transition: opacity .35s ease, transform .35s ease, filter .35s ease; max-height: calc(100% - 28px); /* respect top/bottom padding */ } .project-item:hover .project-side-title, .project-item:focus-visible .project-side-title { opacity: 0; transform: rotate(180deg) translateY(8px); filter: blur(1px); } .project-image { position: absolute; inset: 0; } .project-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transform: scale(1.02); transition: transform .8s ease, filter .6s ease; } .project-item:hover .project-image img, .project-item:focus-visible .project-image img { transform: scale(1.08); filter: grayscale(0%); } .project-info { position: absolute; inset: auto 0 0 0; padding: 1.25rem 1.25rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%); color: var(--color-light); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; z-index: 3; } .project-item:hover .project-info, .project-item:focus-visible .project-info { opacity: 1; transform: translateY(0); } .project-info h3 { margin-bottom: .25rem; } .project-meta { display: flex; gap: .75rem; color: var(--color-secondary); font-size: .9rem; } /* Mobile/compact behavior: stack cards and show info */ @media (max-width: 768px) { .projects-grid { flex-direction: column; height: auto; overflow: visible; } .project-item { flex: none; min-width: 100%; height: 260px; } .projects-grid:hover .project-item { flex: none; } .project-item:hover, .project-item:focus-visible { flex: none; } .project-info { opacity: 1; transform: none; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); } .project-side-title { display: none; } } /* Gallery Section */ .gallery { background-color: var(--color-dark); } .gallery-header { gap: 1.5rem; align-items: center; } .gallery-filters { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; } .gallery-filter-btn { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); position: relative; transition: color .25s ease; } .gallery-filter-btn::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-filter-btn:hover, .gallery-filter-btn.active { color: var(--color-light); } .gallery-filter-btn.active::after { transform: scaleX(1); transform-origin: left; } .gallery-grid { column-count: 4; column-gap: var(--grid-gap); margin-top: 2rem; } .gallery-item { display: inline-block; width: 100%; margin: 0 0 var(--grid-gap); position: relative; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: #0f0f0f; break-inside: avoid; } .gallery-item.large img { height: 520px; } .gallery-item.medium img { height: 360px; } .gallery-item img { width: 100%; height: auto; display: block; object-fit: cover; filter: grayscale(100%); transition: transform .7s ease, filter .5s ease; } .gallery-item:hover img { transform: scale(1.06); filter: grayscale(0%); } .gallery-item .badge { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); color: var(--color-light); font-size: .75rem; letter-spacing: .08em; padding: .25rem .5rem; border-radius: 999px; } .gallery-actions { display: flex; justify-content: center; margin-top: 1rem; } @media (max-width: 1200px) { .gallery-grid { column-count: 3; } } @media (max-width: 768px) { .gallery-grid { column-count: 2; } } @media (max-width: 520px) { .gallery-grid { column-count: 1; } } /* Contact Form Styling */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: start; } .contact-form { display: none; /* form removed in favor of simple email contact */ } .input-group { position: relative; } .input-group.full { grid-column: span 2; } .input-group.error input, .input-group.error textarea, .input-group.error select { border-color: #ff4d4d; } input.error, textarea.error, select.error { border-color: #ff4d4d !important; background-color: rgba(255, 77, 77, 0.05); } /* Awards Section */ .awards { background-color: var(--color-dark); position: relative; } .awards::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--color-tertiary), transparent); } .awards-list { position: relative; max-width: 900px; } .awards-item { display: grid; grid-template-columns: 100px 1fr; gap: var(--grid-gap); padding: 3rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .awards-item:last-child { border-bottom: none; } .award-year { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-accent); } .award-title { font-size: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; } .award-description { color: var(--color-secondary); max-width: 600px; } /* Experience Section */ .experience { background-color: var(--color-dark); position: relative; } .timeline { position: relative; max-width: 900px; } .timeline::before { content: ''; position: absolute; top: 0; left: 100px; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.1); } .timeline-item { display: grid; grid-template-columns: 100px 1fr; gap: var(--grid-gap); padding: 2rem 0; } .timeline-year { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 500; color: var(--color-accent); } .timeline-content h3 { font-size: clamp(1.2rem, 3vw, 2rem); margin-bottom: 0.5rem; } .timeline-company { font-size: 1rem; color: var(--color-secondary); margin-bottom: 1.5rem; } .timeline-description { color: var(--color-secondary); line-height: 1.6; margin-bottom: 0.75rem; max-width: 75ch; } .timeline-achievements { color: var(--color-light); margin-top: 1rem; } .timeline-achievements li { position: relative; padding-left: 1.5rem; margin-bottom: 0.8rem; } .timeline-achievements li::before { content: '—'; position: absolute; left: 0; color: var(--color-accent); } /* Contact Section */ .contact { position: relative; overflow: hidden; padding-bottom: 0; } /* Contact redesign */ .contact-info { display: flex; flex-direction: column; gap: 1.2rem; } .contact-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; } .contact-text { color: var(--color-secondary); max-width: 60ch; } .contact-quick-actions { display: flex; gap: 0.8rem; margin: 0.5rem 0 0.75rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; transition: transform .2s ease, background-color .3s ease, color .3s ease; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--color-accent); color: var(--color-dark); font-weight: 700; } .btn-accent:hover { filter: brightness(0.95); } .btn-ghost { border: 1px solid rgba(255,255,255,0.15); color: var(--color-light); } .btn-ghost:hover { background: rgba(255,255,255,0.06); } .contact-details { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 1rem; margin: 0.5rem 0 0.5rem; } .contact-method { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); padding: 1rem; border-radius: 8px; } .contact-method h4 { font-size: 0.9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; color: var(--color-light); } .contact-method a, .contact-method address { color: var(--color-secondary); font-style: normal; } .social-links { display: flex; gap: 0.6rem 0.8rem; flex-wrap: wrap; margin-top: 0.5rem; margin-bottom: 1rem; } .social-link { display: inline-flex; align-items: center; padding: 0.45rem 0.75rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; color: var(--color-light); transition: background-color .25s ease, transform .2s ease; } .social-link:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); } /* Contact CTA Card removed */ @media (max-width: 992px) { .contact-details { grid-template-columns: 1fr; } } /* Footer */ .footer { background-color: var(--color-dark); padding: 4rem 0; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--color-tertiary), transparent); } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: center; } .footer-logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; } .footer-nav { display: flex; gap: 2rem; justify-content: center; } .footer-nav a { font-size: 0.9rem; transition: var(--transition-fast); } .footer-nav a:hover { color: var(--color-accent); } .footer-copy { text-align: right; font-size: 0.9rem; color: var(--color-secondary); } /* Project Modal */ .project-modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 1500; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .project-modal.active { opacity: 1; visibility: visible; pointer-events: auto; } .project-modal .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); /* solid dark overlay, no blur */ } .project-modal .modal-container { position: relative; width: min(1400px, 96vw); max-height: 90vh; background: var(--color-dark); /* solid black container */ border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; transform: translateY(20px); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .project-modal.active .modal-container { transform: translateY(0); } .project-modal .modal-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #0e0e0e; /* solid dark */ border: 1px solid rgba(255,255,255,0.12); color: var(--color-light); cursor: pointer; z-index: 2; transition: background-color .25s ease, transform .2s ease; } .project-modal .modal-close:hover { background: #1a1a1a; transform: translateY(-1px); } .project-modal .modal-content { display: grid; /* Details first (left), gallery larger (right) */ grid-template-columns: 1fr 2fr; gap: 1.5rem; padding: 2rem; /* Fill available height; only gallery will scroll */ flex: 1 1 auto; overflow: hidden; align-items: stretch; } .project-modal .modal-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-content: start; overflow: auto; padding-right: 4px; /* avoid scrollbar overlaying content */ } .project-modal .modal-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; } .project-modal .modal-info { overflow: hidden; } /* Single-image projects: image spans full gallery width */ .project-modal .modal-gallery.single { grid-template-columns: 1fr; } .project-modal .modal-gallery.single img { width: 100%; } .project-modal .modal-info { display: flex; flex-direction: column; gap: 1rem; } .project-modal .modal-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.25rem, 3vw, 2rem); } .project-modal .modal-meta { display: flex; gap: 1rem; color: var(--color-secondary); } .project-modal .modal-description { color: var(--color-secondary); line-height: 1.6; } .project-modal .modal-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .project-modal .modal-detail { background: #0e0e0e; border: 1px solid rgba(255,255,255,0.06); padding: 1rem; border-radius: 8px; } .project-modal .modal-detail h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-secondary); margin-bottom: .25rem; } .project-modal .modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); background: #0e0e0e; /* solid dark */ } .project-modal .modal-prev, .project-modal .modal-next { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); color: var(--color-light); background: transparent; cursor: pointer; transition: background-color .25s ease, transform .2s ease; } .project-modal .modal-prev:hover, .project-modal .modal-next:hover { background: #1a1a1a; transform: translateY(-1px); } @media (max-width: 992px) { .project-modal .modal-details { grid-template-columns: 1fr; } .project-modal .modal-content { grid-template-columns: 1fr; display: block; } /* On mobile, allow the whole content (including details) to scroll together */ .project-modal .modal-content { overflow: auto; } .project-modal .modal-gallery { grid-template-columns: 1fr; overflow: visible; } .project-modal .modal-gallery img { max-height: 60vh; } .project-modal .modal-content > * + * { margin-top: 1rem; } } /* WebKit scrollbar styling for modal panes */ .project-modal .modal-gallery::-webkit-scrollbar, .project-modal .modal-content::-webkit-scrollbar { width: 10px; height: 10px; } .project-modal .modal-gallery::-webkit-scrollbar-track, .project-modal .modal-content::-webkit-scrollbar-track { background: transparent; } .project-modal .modal-gallery::-webkit-scrollbar-thumb, .project-modal .modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; border: 2px solid rgba(0,0,0,0.2); } .project-modal .modal-gallery::-webkit-scrollbar-thumb:hover, .project-modal .modal-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(213,255,64,0.6), rgba(213,255,64,0.35)); } /* Lightbox for modal images */ .project-modal .modal-image-zoom { position: absolute; inset: 0; background: rgba(0,0,0,0.92); display: none; place-items: center; z-index: 5; padding: 2rem; } .project-modal .modal-image-zoom.active { display: grid; } .project-modal .modal-image-zoom img { max-width: 100%; max-height: 86vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); } /* Media Queries - Consolidated */ @media screen and (max-width: 1200px) { .projects-grid { grid-template-columns: repeat(6, 1fr); } .project-item { grid-column: span 3; } .project-item.large { grid-column: span 6; } .modal-content { grid-template-columns: 1fr; } } @media screen and (max-width: 992px) { .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; } .awards-item, .timeline-item { grid-template-columns: 80px 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .footer-nav { justify-content: center; } .footer-copy { text-align: center; } .projects-grid { grid-template-columns: repeat(6, 1fr); } .project-item:nth-child(n) { grid-column: span 3; height: 350px; } .project-item:nth-child(1) { grid-column: span 6; grid-row: span 1; height: 450px; } } @media screen and (max-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } .project-item:nth-child(n) { grid-column: span 2; height: 300px; } .filter-categories { margin-left: 0; margin-top: 1rem; flex-wrap: wrap; } .modal-nav { padding: 1rem; } .modal-content { padding: 2rem; max-height: calc(90vh - 60px); } .modal-close { top: 1rem; right: 1rem; } .contact-form { grid-template-columns: 1fr; padding: 1.5rem; } .input-group.full { grid-column: span 1; } .submit-btn { grid-column: span 1; } body, a, button, input, textarea, select, .nav-toggle { cursor: auto; } } @media screen and (max-width: 576px) { .nav-info { flex-direction: column; } .nav-info-block { margin-right: 0; } .projects-grid { grid-template-columns: 1fr; } .project-item:nth-child(n) { grid-column: span 1; height: 250px; } .project-item.large { grid-column: span 1; height: 350px; } .modal-content { padding: 2rem; max-height: calc(90vh - 60px); } .modal-close { top: 1rem; right: 1rem; } } /* Profile Image */ .profile-image { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .image-wrapper:hover .profile-image { transform: scale(1.03); } /* Fallback scroll animations (when GSAP is unavailable) */ body.no-gsap .project-item, body.no-gsap .service-card, body.no-gsap .awards-item, body.no-gsap .timeline-item, body.no-gsap .input-group, body.no-gsap .submit-btn, body.no-gsap [data-scroll] { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease, transform 700ms ease; } body.no-gsap .section-title .split-word-inner { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } body.no-gsap .in-view { opacity: 1 !important; transform: none !important; }