@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap"); /* ========================================================= THEME TOKENS Channels are space-separated "R G B" so Tailwind's color/ opacity modifiers keep working. Default (no class on ) = light. .dark overrides. ========================================================= */ :root { --color-ink: 246 241 231; /* warm cream surface */ --color-charcoal: 237 228 210; /* secondary surface */ --color-charcoal2: 227 216 192; /* tertiary surface */ --color-bone: 34 29 22; /* primary text (dark ink) */ --color-bonedim: 107 98 82; /* muted text */ --color-brass: 138 106 52; /* accent, darkened for contrast on light bg */ --color-brasslight: 176 141 87; --color-brassdark: 92 70 32; --color-line: 20 16 10; /* hairlines: dark, low alpha on light bg */ } html.dark { --color-ink: 13 12 10; --color-charcoal: 23 20 15; --color-charcoal2: 31 27 20; --color-bone: 237 231 218; --color-bonedim: 167 158 137; --color-brass: 176 141 87; --color-brasslight: 217 189 134; --color-brassdark: 124 94 52; --color-line: 255 255 255; /* hairlines: white, low alpha on dark bg */ } * { scroll-behavior: smooth; } html, body { background-color: rgb(var(--color-ink)); color: rgb(var(--color-bone)); overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } ::selection { background: rgb(var(--color-brass)); color: rgb(var(--color-ink)); } /* Thin brass scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgb(var(--color-ink)); } ::-webkit-scrollbar-thumb { background: rgb(var(--color-brassdark)); border-radius: 4px; } /* ---------- Focus visibility ---------- */ /* ==================== CERTIFICATE MODAL — SMOOTH ==================== */ #certModal { transition: visibility 0s linear 0.35s; visibility: hidden; } #certModal.is-open { visibility: visible; transition-delay: 0s; } /* Backdrop fade */ #certModalBackdrop { opacity: 0; transition: opacity 0.35s ease; } #certModal.is-open #certModalBackdrop { opacity: 1; } /* Content: fade + scale + rise */ #certModalContent { opacity: 0; transform: translateY(16px) scale(0.96); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } #certModal.is-open #certModalContent { opacity: 1; transform: translateY(0) scale(1); } /* Image cross-fade when switching prev/next */ #certModalImg { opacity: 1; transition: opacity 0.22s ease; } #certModalImg.is-fading { opacity: 0; } /* Nav arrows: subtle pop on hover */ #certModalPrev, #certModalNext { transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } #certModalPrev:hover, #certModalNext:hover { transform: translateY(-50%) scale(1.08); } #certModalPrev:active, #certModalNext:active { transform: translateY(-50%) scale(0.95); } /* Close button pop */ #certModalClose { transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } #certModalClose:hover { transform: rotate(90deg); } /* Card entrance: slight lift on hover for affordance it's clickable */ .cert-card { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease; } .cert-card:hover { transform: translateY(-4px); } body.modal-open { overflow: hidden; } /* ---------- Grain / atmosphere overlay ---------- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Hero sheen text ---------- */ .sheen-text { background: linear-gradient( 100deg, rgb(var(--color-bone)) 30%, rgb(var(--color-brasslight)) 45%, rgb(var(--color-brass)) 50%, rgb(var(--color-brasslight)) 55%, rgb(var(--color-bone)) 70% ); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite; } @keyframes sheen { 0% { background-position: 0% center; } 100% { background-position: -250% center; } } /* ---------- Hero entrance ---------- */ .hero-in { opacity: 0; transform: translateY(28px); animation: heroIn 1.1s cubic-bezier(0.16, 0.9, 0.28, 1) forwards; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } /* ---------- Floating brass particles in hero ---------- */ .particle { position: absolute; border-radius: 9999px; background: radial-gradient( circle at 30% 30%, rgb(var(--color-brasslight)), rgb(var(--color-brassdark)) 70% ); opacity: 0.4; animation: floaty 14s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(14px, -22px) scale(1.08); } 66% { transform: translate(-10px, 14px) scale(0.92); } } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(0.16, 0.9, 0.28, 1), transform 0.9s cubic-bezier(0.16, 0.9, 0.28, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } /* ---------- Brass thread (desktop scroll signature) ---------- */ .brass-thread-track { position: fixed; top: 0; bottom: 0; left: 2.25rem; width: 1px; background: rgb(var(--color-brass) / 0.22); z-index: 40; } .brass-thread-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient( 180deg, rgb(var(--color-brasslight)), rgb(var(--color-brass)) 60%, rgb(var(--color-brassdark)) ); box-shadow: 0 0 8px rgb(var(--color-brasslight) / 0.5); transition: height 0.1s linear; } .thread-node { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 9999px; background: rgb(var(--color-charcoal2)); border: 1px solid rgb(var(--color-brass) / 0.55); transform: translate(-50%, -50%); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .thread-node.active { background: rgb(var(--color-brasslight)); border-color: rgb(var(--color-brasslight)); box-shadow: 0 0 10px rgb(var(--color-brasslight) / 0.75); } /* ---------- Wax seal monogram ---------- */ .wax-seal { width: 46px; height: 46px; border-radius: 9999px; background: radial-gradient( circle at 35% 30%, #d9bd86, #b08d57 55%, #7c5e34 100% ); display: flex; align-items: center; justify-content: center; font-family: "Fraunces", serif; font-size: 15px; color: #17140f; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.15); transform: scale(0) rotate(-25deg); transition: transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); flex-shrink: 0; animation: sealGlow 3.2s ease-in-out infinite; } @keyframes sealGlow { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } 50% { box-shadow: 0 4px 22px rgb(var(--color-brasslight) / 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.2); } } .group:hover .wax-seal, .project-card:focus-within .wax-seal { transform: scale(1) rotate(0deg); } /* ---------- Project card texture placeholders ---------- */ .tex-marble { background: radial-gradient( circle at 20% 30%, rgba(237, 231, 218, 0.1), transparent 45% ), radial-gradient( circle at 70% 60%, rgba(176, 141, 87, 0.16), transparent 50% ), linear-gradient(135deg, #201c16, #14120e 60%, #1c1812); } .tex-brass { background: repeating-linear-gradient( 115deg, rgba(217, 189, 134, 0.1) 0px, rgba(217, 189, 134, 0.1) 2px, transparent 2px, transparent 10px ), linear-gradient(150deg, #2a2213, #17140f 65%); } .tex-leather { background: radial-gradient( circle at 60% 20%, rgba(124, 94, 52, 0.22), transparent 55% ), linear-gradient(160deg, #1c1712, #100e0b 70%); } .tex-wood { background: repeating-linear-gradient( 90deg, rgba(176, 141, 87, 0.06) 0px, rgba(176, 141, 87, 0.06) 3px, transparent 3px, transparent 22px ), linear-gradient(180deg, #221c14, #14110c); } /* ---------- Card slide-up detail panel ---------- */ .card-detail { transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 0.9, 0.28, 1); } .project-card:hover .card-detail, .project-card:focus-within .card-detail { transform: translateY(0%); } /* ---------- Underline link ---------- */ .link-underline { position: relative; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: #b08d57; transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.16, 0.9, 0.28, 1); } .link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* ---------- Mobile sidebar ---------- */ #sidebar { transform: translateX(100%); transition: transform 0.55s cubic-bezier(0.16, 0.9, 0.28, 1); } #sidebar.open { transform: translateX(0%); } #overlay { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(3px); } #overlay.open { opacity: 1; pointer-events: auto; } .burger-line { transition: transform 0.35s ease, opacity 0.35s ease; } #burger.open .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } #burger.open .burger-line:nth-child(2) { opacity: 0; } #burger.open .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Testimonial fade ---------- */ .testimonial-slide { display: none; animation: fadeIn 0.7s ease forwards; } .testimonial-slide.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dot { width: 7px; height: 7px; border-radius: 9999px; background: rgba(160, 142, 110, 0.35); transition: background 0.3s ease, transform 0.3s ease; } .dot.active { background: #d9bd86; transform: scale(1.3); } /* ========================================================= CUSTOM CURSOR ========================================================= */ @media (pointer: fine) { html, body, a, button, input, textarea { cursor: none; } } .cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; border-radius: 9999px; pointer-events: none; z-index: 100; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: rgb(var(--color-brasslight)); box-shadow: 0 0 6px rgb(var(--color-brasslight) / 0.8); transition: opacity 0.3s ease, background 0.3s ease; } .cursor-outline { width: 34px; height: 34px; border: 1px solid rgb(var(--color-brass) / 0.55); background: rgb(var(--color-brass) / 0.04); transition: width 0.28s cubic-bezier(0.16, 0.9, 0.28, 1), height 0.28s cubic-bezier(0.16, 0.9, 0.28, 1), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease; } .cursor-outline.hover { width: 62px; height: 62px; border-color: rgb(var(--color-brasslight) / 0.9); background: rgb(var(--color-brass) / 0.1); } .cursor-outline.press { width: 26px; height: 26px; } .cursor-dot.hidden-cursor, .cursor-outline.hidden-cursor { opacity: 0; } @media (pointer: coarse) { .cursor-dot, .cursor-outline { display: none; } html, body, a, button, input, textarea { cursor: auto; } } /* ========================================================= NAVBAR — ACTIVE STATE (scrollspy) ========================================================= */ .nav-link { position: relative; } .nav-link.active { color: rgb(var(--color-brasslight)); } .nav-link.active::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: rgb(var(--color-brasslight)); } .sidebar-link.active { color: rgb(var(--color-brasslight)); padding-left: 8px; border-left: 2px solid rgb(var(--color-brasslight)); } /* ========================================================= MARQUEE — scrolling language / tools strip ========================================================= */ .marquee-wrap { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent ); } .marquee-track { display: flex; width: max-content; animation: marquee-left 34s linear infinite; } .marquee-track.reverse { animation: marquee-right 30s linear infinite; } .marquee-wrap:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .marquee-item { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0 2rem; white-space: nowrap; font-family: "Space Mono", monospace; font-size: 0.9rem; letter-spacing: 0.08em; color: rgb(var(--color-bonedim)); transition: color 0.3s ease; } .marquee-item .dot-sep { color: rgb(var(--color-brass) / 0.6); } .marquee-track:hover .marquee-item { color: rgb(var(--color-bonedim) / 0.4); } .marquee-item:hover { color: rgb(var(--color-brasslight)) !important; } /* ========================================================= ENHANCED / EXTRA ANIMATIONS ========================================================= */ /* Magnetic buttons: subtle lift + glow on hover */ .magnetic-btn { position: relative; transition: transform 0.35s cubic-bezier(0.16, 0.9, 0.28, 1), box-shadow 0.35s ease; } .magnetic-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgb(var(--color-brass) / 0.28); } .magnetic-btn:active { transform: translateY(-1px); } /* Project card image zoom on hover for a more premium feel */ .project-card { overflow: hidden; } .project-card.tex-marble, .project-card.tex-brass, .project-card.tex-leather, .project-card.tex-wood { transition: transform 0.7s cubic-bezier(0.16, 0.9, 0.28, 1); } .project-card:hover.tex-marble, .project-card:hover.tex-brass, .project-card:hover.tex-leather, .project-card:hover.tex-wood { transform: scale(1.035); } /* Nav underline items get a tiny stagger-in on load */ @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } #desktopNav .nav-link { animation: navIn 0.6s cubic-bezier(0.16, 0.9, 0.28, 1) both; } #desktopNav .nav-link:nth-child(1) { animation-delay: 0.05s; } #desktopNav .nav-link:nth-child(2) { animation-delay: 0.1s; } #desktopNav .nav-link:nth-child(3) { animation-delay: 0.15s; } #desktopNav .nav-link:nth-child(4) { animation-delay: 0.2s; } #desktopNav .nav-link:nth-child(5) { animation-delay: 0.25s; } #desktopNav .nav-link:nth-child(6) { animation-delay: 0.3s; } /* Smoother, richer card hover lift for expertise tiles */ #expertise .reveal { transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 0.9, 0.28, 1); } #expertise .reveal:hover { transform: translateY(-4px); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .sheen-text, .particle, .hero-in, .marquee-track, #desktopNav .nav-link { animation: none !important; } .reveal { transition: none !important; opacity: 1 !important; transform: none !important; } .cursor-dot, .cursor-outline { display: none; } html, body, a, button, input, textarea { cursor: auto !important; } } @media (max-width: 767px) { .brass-thread-track { display: none; } }