/* ======================================== FONTS ======================================== */ /* Source Sans 3 + Xanh Mono loaded via @import in */ /* ======================================== KEYFRAMES ======================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpSlow { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes stagger { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ======================================== SCROLL REVEAL ======================================== */ .scroll-reveal { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } .scroll-reveal.scroll-reveal-up { transform: translateY(36px); } .scroll-reveal.scroll-reveal-left { transform: translateX(-44px); } .scroll-reveal.scroll-reveal-right { transform: translateX(44px); } .scroll-reveal.revealed { opacity: 1; transform: translate(0, 0); } /* ======================================== RESET & BASE ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Source Sans 3", sans-serif; background-color: #ECEAE2; color: #3E2723; line-height: 1.5; } img { display: block; border-radius: 8px; } a { color: inherit; text-decoration: none; } p { margin: 0; } ul { list-style: none; padding: 0; margin: 0; } main { margin-top: 72px; } /* ======================================== NAVIGATION — Brand centered absolutely, links RIGHT, hamburger LEFT — Matches Jordan Berke's navbar pattern ======================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #3E2723; padding: 1rem 2rem; height: 72px; display: flex; align-items: center; justify-content: space-between; } /* Brand — top LEFT */ .navbar-brand { font-family: "Xanh Mono", monospace; font-size: clamp(20px, 2.5vw, 28px); color: #eccaca; text-decoration: none; white-space: nowrap; transition: color 0.3s ease; /* No absolute positioning — sits naturally on the left */ } .navbar-brand:hover { color: #ECEAE2; } /* Links — right side, margin-left: auto creates the gap from brand */ .nav-menu { display: flex; gap: 2.5rem; align-items: center; margin-left: auto; } .nav-menu a { font-family: "Source Sans 3", sans-serif; font-size: 16px; color: #eccaca; text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.25s ease; } .nav-menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #eccaca; transform: scaleX(0); transition: transform 280ms ease; } .nav-menu a:hover { color: #ECEAE2; } .nav-menu a:hover::after { transform: scaleX(1); } /* Hamburger — hidden on desktop, shown on mobile */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: #eccaca; transition: all 0.3s ease; border-radius: 2px; } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ======================================== HERO ======================================== */ .hero { display: flex; flex-direction: row; min-height: calc(100vh - 72px); max-width: 1600px; margin: 0 auto; background-color: #ECEAE2; } .hero-image { width: 44%; overflow: hidden; display: flex; align-items: flex-end; } .hero-image img { width: 80%; margin: 0 auto; height: auto; object-fit: cover; border-radius: 8px; } .hero-content { width: 56%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 3rem; gap: 1.25rem; } .greeting { font-size: clamp(16px, 2.5vw, 44px); font-weight: 500; color: #3E2723; text-align: center; animation: fadeInUp 0.8s ease-out 0.3s both; } .hero-name { font-family: 'Xanh Mono', monospace; font-style: italic; font-size: clamp(26px, 5.5vw, 96px); color: #e6a8c8; text-align: center; line-height: 1.1; animation: slideUpSlow 1.1s ease-out 0.6s both; } .roles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.75rem, 2vw, 2rem); margin-top: 0.5rem; } .role-item { font-size: clamp(13px, 1.8vw, 30px); color: #3E2723; white-space: nowrap; animation: stagger 0.6s ease-out both; transition: transform 0.3s ease; } .role-item:nth-child(1) { animation-delay: 0.9s; } .role-item:nth-child(2) { animation-delay: 1.1s; } .role-item:nth-child(3) { animation-delay: 1.3s; } .role-item:hover { transform: translateY(-3px) scale(1.07); } /* ======================================== ABOUT ======================================== */ .about { display: flex; align-items: flex-start; gap: 5vw; padding: 10vh 8vw; background-color: #ECEAE2; } .headshot-title-wrapper { flex-shrink: 0; } .headshot { width: 300px; height: auto; border-radius: 8px; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .headshot.revealed { opacity: 1; transform: translateY(0); } .about section { flex: 1; min-width: 0; } .about section header { font-family: "Xanh Mono", monospace; font-size: clamp(22px, 3vw, 34px); margin-bottom: 1rem; line-height: 1.2; } .about section p { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.75; color: #5a3d38; text-align: justify; } /* ======================================== TESTIMONIALS — Fixed-height sliding card carousel. — Wrapper height is hardcoded. Cards are absolutely stacked. — Only transform + opacity animate → ZERO layout shift. ======================================== */ .testimonials-section { background-color: #7f1d1d; padding: 56px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* This wrapper's height is fixed. It never grows or shrinks. Cards live inside it with position:absolute — only they move. */ .testimonials-track-wrapper { width: 100%; max-width: 760px; height: 200px; /* locked — tall enough for longest quote at desktop */ position: relative; overflow: hidden; } .testimonial-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 1rem; /* All cards start off-screen right */ transform: translateX(100%); opacity: 0; } /* Only .active is on-screen */ .testimonial-card.active { transform: translateX(0); opacity: 1; } .t-stars { display: flex; gap: 5px; } .t-stars svg { width: 26px; height: 26px; flex-shrink: 0; } .testimonial-card blockquote { font-family: "Source Sans 3", sans-serif; font-size: clamp(16px, 2.5vw, 22px); font-weight: 500; color: #eccaca; text-align: center; line-height: 1.5; font-style: normal; max-width: 640px; } .testimonial-card cite { font-family: "Source Sans 3", sans-serif; font-size: clamp(12px, 1.2vw, 15px); color: rgba(236, 202, 202, 0.65); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; } /* Controls row */ .testimonials-controls { display: flex; align-items: center; gap: 18px; } .t-btn { background: transparent; border: none; cursor: pointer; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease, transform 0.2s ease; padding: 0; } .t-btn svg { width: 24px; height: 24px; } .t-btn:hover { background: rgba(236,202,202,0.15); transform: scale(1.1); } .t-btn:active { transform: scale(0.92); } .t-dots { display: flex; gap: 7px; align-items: center; } .t-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(236,202,202,0.3); cursor: pointer; padding: 0; transition: background 0.3s ease, transform 0.3s ease; } .t-dot.active { background: #eccaca; transform: scale(1.35); } /* ======================================== MY WORK — SCROLLING GALLERY Exact same class names as Jordan Berke's site ======================================== */ .divider { padding: 40px 20px; background-color: #eccaca; /* Chloe's pink instead of Jordan's mauve */ } .my-work-title { font-family: "Xanh Mono", monospace; font-size: clamp(28px, 4vw, 42px); color: #3E2723; margin-bottom: 30px; } .gallery-wrapper { position: relative; margin: 20px 0 0; } .scroll-container { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 20px 0; scrollbar-width: thin; scrollbar-color: #3E2723 #e0bfbf; -webkit-overflow-scrolling: touch; } .scroll-container::-webkit-scrollbar { height: 6px; } .scroll-container::-webkit-scrollbar-track { background: #e0bfbf; } .scroll-container::-webkit-scrollbar-thumb { background: #3E2723; border-radius: 4px; } .image-card { flex: 0 0 auto; width: 400px; height: 300px; border-radius: 12px; overflow: hidden; background-color: #d4b5b5; box-shadow: 0 4px 12px rgba(62, 39, 35, 0.12); position: relative; } .image-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform 0.3s ease; } .image-card:hover img { transform: scale(1.04); } .image-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border: 3px solid #eceae2; border-top-color: #7f1d1d; border-radius: 50%; animation: spin 0.9s linear infinite; pointer-events: none; } .lazy-image.loaded ~ .image-loader { display: none; } .scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: #3E2723; color: #eccaca; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .scroll-btn:hover { background-color: #7f1d1d; transform: translateY(-50%) scale(1.1); } .scroll-btn.hidden { opacity: 0; pointer-events: none; } .scroll-btn-left { left: 0; } .scroll-btn-right { right: 0; } /* ======================================== PROJECTS — Same two-card grid as Jordan Berke — Clean cards with border-left accent, no images (gallery handles visuals) ======================================== */ .projects { max-width: 1200px; margin: 60px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .recently, .whats-next { background-color: rgba(198, 48, 44, 0.04); padding: 40px; border-radius: 12px; border-left: 4px solid #7f1d1d; } .recently header, .whats-next header { font-family: "Xanh Mono", monospace; font-size: clamp(20px, 2.5vw, 28px); color: #3E2723; margin-bottom: 12px; } .recently p, .whats-next p { font-size: clamp(14px, 1.4vw, 16px); color: #5a3d38; line-height: 1.7; margin-bottom: 20px; } /* ======================================== BUTTONS ======================================== */ .btn-primary { display: inline-block; padding: 11px 26px; background-color: #3E2723; color: #eccaca; border: 2px solid #3E2723; border-radius: 4px; font-family: "Source Sans 3", sans-serif; font-size: 15px; text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .btn-primary:hover { background-color: #eccaca; color: #3E2723; border-color: #3E2723; } .btn-primary:active { background-color: #d4b5b5 !important; border-color: #3E2723 !important; color: #3E2723; } .dir-buttons{ padding-top: 1rem; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; width: 65%; } .dir-buttons a { width: 100%; margin: auto; border: 2px solid #3E2723; border-radius: 4px; font-family: "Source Sans 3", sans-serif; font-size: 16px; padding: 11px 26px; background-color: #3E2723; color: #eccaca; animation: fadeInUp 0.8s cubic-bezier(0, 0, 0, 0.78) .9s both; } #showcase-link{ border: 3px solid #eccaca !important; } .dir-buttons a:hover { background-color: #eccaca; color: #3E2723; border-color: #3E2723; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ======================================== LEARN MORE ======================================== */ .learn-more-section { padding: 8vh 8vw; background-color: #ECEAE2; } .learn-more-title { font-family: "Xanh Mono", monospace; font-size: clamp(26px, 4vw, 52px); color: #3E2723; margin-bottom: 2.5rem; } .learn-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .learn-card { padding: 2rem; border: 2px solid rgba(62,39,35,0.14); border-radius: 8px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .learn-card:hover { border-color: #3E2723; box-shadow: 0 4px 16px rgba(62,39,35,0.08); } /* Heart icon at top of each learn card */ .learn-heart { width: 32px; height: 32px; margin-bottom: 0.75rem; display: block; transition: transform 0.3s ease; } .learn-card:hover .learn-heart { transform: scale(1.15); } .learn-card h5 { font-family: "Xanh Mono", monospace; font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 0.5rem; } .learn-card h5 a { color: #3E2723; text-decoration: none; position: relative; } .learn-card h5 a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #3E2723; transform: scaleX(0); transition: transform 280ms ease; } .learn-card h5 a:hover { color: #8b1a16; } .learn-card h5 a:hover::after { transform: scaleX(1); } .learn-card p { font-size: 15px; color: #5a3d38; line-height: 1.6; } /* ======================================== FOOTER (matches Jordan Berke's footer wrapper pattern) ======================================== */ footer { background-color: #3E2723; padding: 40px 20px 24px; color: #eceae2; text-align: center; } .footer-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; } #socials-links { display: flex; justify-content: center; gap: 40px; padding: 10px 0; } #socials-links li a { color: #eceae2; font-size: 17px; text-decoration: none; position: relative; transition: color 0.25s ease; } #socials-links li a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: #eceae2; transform: scaleX(0); transition: transform 280ms ease; } #socials-links li a:hover::after { transform: scaleX(1); } #footer-message { font-family: "Xanh Mono", monospace; font-size: clamp(36px, 7vw, 88px); line-height: 1; color: #eceae2; } .footer-copy { font-size: 13px; color: rgba(236,234,226,0.45); margin: 0; } /* ======================================== RESPONSIVE — TABLET (769–1024px) ======================================== */ @media (max-width: 1024px) { .projects { gap: 24px; } .learn-more-grid { grid-template-columns: repeat(2, 1fr); } .image-card { width: 300px; height: 225px; } } /* ======================================== RESPONSIVE — MOBILE (≤ 768px) ======================================== */ @media (max-width: 768px) { /* Nav */ .navbar { padding: 1rem; } .nav-toggle { display: flex; } .nav-menu { position: fixed; top: 72px; left: -100%; width: 70%; max-width: 280px; height: 100vh; background-color: #3E2723; flex-direction: column; align-items: flex-start; padding: 2rem; gap: 2rem; transition: left 0.3s ease; z-index: 1000; box-shadow: 4px 0 16px rgba(0,0,0,0.25); margin-left: 0; } .nav-menu.active { left: 0; } .nav-menu a { font-size: 18px; } /* Hero — stacked, image full-width and tall enough to look great */ .hero { flex-direction: column; min-height: auto; } .hero-image { width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 2rem 2rem 0; } .hero-image img { width: 72%; height: auto; max-height: 55vh; object-fit: cover; object-position: center top; margin: 0 auto; border-radius: 8px; } .hero-content { width: 100%; padding: 1.5rem 1.5rem 2.5rem; gap: 0.75rem; align-items: center; } .greeting { font-size: clamp(14px, 4vw, 20px); } .hero-name { font-size: clamp(28px, 8vw, 48px); } .role-item { font-size: clamp(13px, 3.5vw, 18px); } .roles { gap: 0.75rem; } /* About — stacked, headshot centred and full natural height */ .about { flex-direction: column; padding: 5vh 5vw; gap: 2.5vh; align-items: center; } .headshot-title-wrapper { width: 100%; display: flex; justify-content: center; } .headshot { width: 65%; height: auto; max-height: none; object-fit: cover; object-position: center top; margin: 0; border-radius: 8px; opacity: 1 !important; transform: none !important; transition: none !important; } .about section { width: 100%; text-align: left; } .about section header { font-size: clamp(18px, 5vw, 24px); } .about section p { font-size: clamp(14px, 3.5vw, 16px); } /* Testimonials — taller wrapper so text can wrap on small screens */ .testimonials-track-wrapper { height: 260px; } .testimonial-card blockquote { font-size: clamp(14px, 4vw, 18px); } /* Gallery */ .divider { padding: 30px 15px; } .image-card { width: 260px; height: 195px; } .scroll-btn-left { left: 8px; } .scroll-btn-right { right: 8px; } /* Projects */ .projects { grid-template-columns: 1fr; gap: 24px; margin: 40px auto; } .recently, .whats-next { padding: 28px; } /* Learn More */ .learn-more-section { padding: 6vh 5vw; } .learn-more-grid { grid-template-columns: 1fr; gap: 1rem; } #footer-message { font-size: 40px !important; } #socials-links { gap: 20px; } } @media (max-width: 480px) { .image-card { width: 220px; height: 165px; } }