:root { --bg: #0b0b0c; --bg-2: #111113; --cream: #f3efe6; --muted: #8c8c92; --acid: #d4ff3d; /* [EDIT] your accent color */ --blobA: #5b3df2; --line: rgba(243,239,230,0.10); --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* active theme is set via data-theme="ivory" on */ body[data-theme="ivory"]{ --bg:#efe9dd; --bg-2:#e7e0d1; --cream:#14110c; --muted:#6f675b; --acid:#2b3bff; --blobA:#e8c9a0; --line:rgba(20,17,12,0.12); } body[data-theme="ivory"] nav { mix-blend-mode: normal; } body[data-theme="ivory"] .hglow { mix-blend-mode: multiply; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--cream); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.loading { overflow: hidden; height: 100vh; } h1,h2,h3,.display { font-family: 'Syne', system-ui, sans-serif; letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } @media (max-width:600px){ .wrap{ padding:0 20px; } } ::selection { background: var(--acid); color: #000; } /* grain */ .grain { position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: 0.045; 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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 6s steps(6) infinite; } @keyframes grain { 0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-3%)}100%{transform:translate(0,0)} } /* custom cursor */ .cur, .cur-dot { position: fixed; top:0; left:0; z-index: 9999; pointer-events:none; border-radius:50%; mix-blend-mode: difference; } .cur { width: 38px; height: 38px; border:1px solid #fff; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s; display:flex; align-items:center; justify-content:center; } .cur-dot { width: 5px; height:5px; background:#fff; transform: translate(-50%,-50%); } .cur.grow { width: 78px; height: 78px; background:#fff; border-color:#fff; } .cur-label { font-family:'Syne'; font-weight:700; font-size:0.72rem; letter-spacing:0.03em; color:var(--bg); opacity:0; transform:scale(.5); transition:opacity .2s, transform .2s var(--ease); mix-blend-mode:normal; white-space:nowrap; } .cur.view { width:90px; height:90px; background:var(--acid); border-color:transparent; mix-blend-mode:normal; } .cur.view .cur-label { opacity:1; transform:scale(1); } @media (hover: none){ .cur,.cur-dot{ display:none; } } /* preloader */ .pre { position: fixed; inset:0; z-index: 10000; background: var(--bg); display:flex; align-items:flex-end; justify-content:space-between; padding: 48px; } .pre .word { font-family:'Syne'; font-weight:800; font-size: clamp(2.5rem,9vw,7rem); line-height:0.9; } .pre .count { font-family:'Syne'; font-weight:700; font-size: clamp(2.5rem,9vw,7rem); color: var(--acid); } .pre.done { transform: translateY(-100%); transition: transform 0.9s var(--ease); } /* nav */ nav { position: fixed; top:0; left:0; right:0; z-index: 90; mix-blend-mode: difference; } nav .wrap { display:flex; align-items:center; justify-content:space-between; height: 80px; } .brand { font-family:'Syne'; font-weight:800; font-size:1.3rem; } .brand i { color: var(--acid); font-style: normal; } .nav-links { display:flex; gap:34px; font-size:0.9rem; font-weight:500; } .nav-links a { position:relative; } .nav-links a::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background: currentColor; transition: width .3s var(--ease); } .nav-links a:hover::after { width:100%; } .nav-links a.active { color: var(--acid); } @media (max-width:680px){ .nav-links{ gap:20px; font-size:0.82rem; } } /* hero */ header { min-height: 90vh; display:flex; flex-direction:column; justify-content:center; position:relative; padding: 120px 0 40px; } .aurora { position:absolute; inset:0; overflow:hidden; z-index:0; } .blob { position:absolute; border-radius:50%; filter: blur(90px); opacity:0.5; } .blob.a { width:520px; height:520px; background:var(--blobA); top:-120px; right:-80px; animation: float1 14s ease-in-out infinite; } .hglow { position:absolute; width:480px; height:480px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s; mix-blend-mode:screen; background:radial-gradient(circle, var(--acid), transparent 60%); } .blob.b { width:440px; height:440px; background: var(--acid); bottom:-140px; left:-100px; opacity:0.22; animation: float2 18s ease-in-out infinite; } @keyframes float1 { 50%{ transform: translate(-60px,40px) scale(1.1);} } @keyframes float2 { 50%{ transform: translate(50px,-30px) scale(1.15);} } header .wrap { position:relative; z-index:2; } .tag { display:inline-flex; align-items:center; gap:9px; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:34px; } .tag .pulse { width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 0 rgba(212,255,61,0.6); animation: pulse 2s infinite; } @keyframes pulse { 70%{ box-shadow:0 0 0 10px rgba(212,255,61,0);} 100%{ box-shadow:0 0 0 0 rgba(212,255,61,0);} } .hero-h { font-weight:800; font-size: clamp(2.8rem, 9vw, 8rem); line-height:1.04; } .hero-h .ln { display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.1em; } .hero-h .ln > span { display:block; transform: translateY(120%); } .hero-h em { font-style:normal; color: var(--acid); } .hero-h .outline { color: transparent; -webkit-text-stroke: 1.5px var(--cream); } .hero-sub { margin-top: 36px; max-width: 540px; font-size: clamp(1rem,1.6vw,1.2rem); color: var(--muted); opacity:0; transform: translateY(20px); transition: all 0.8s var(--ease) 1.1s; } .hero-cta { margin-top: 40px; display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform: translateY(20px); transition: all 0.8s var(--ease) 1.25s; } body.ready .hero-sub, body.ready .hero-cta { opacity:1; transform:none; } body:not(.loading) .hero-sub, body:not(.loading) .hero-cta { opacity:1; transform:none; } .btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:100px; font-weight:600; font-size:0.95rem; transition: transform .25s var(--ease), background .25s, color .25s; cursor:pointer; } .btn.fill { background: var(--acid); color:var(--bg); } .btn.line { border:1px solid var(--line); } .btn.line:hover { background: var(--cream); color:var(--bg); } .scroll-ind { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; } .scroll-ind .bar { width:1px; height:46px; background:linear-gradient(var(--acid),transparent); } /* marquee */ .marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; white-space:nowrap; background:var(--bg-2); } .marquee .track { display:inline-flex; gap:48px; animation: scroll 22s linear infinite; } .marquee:hover .track { animation-play-state: paused; } .marquee span { font-family:'Syne'; font-weight:800; font-size: clamp(1.4rem,3vw,2.4rem); text-transform:uppercase; display:inline-flex; align-items:center; gap:48px; } .marquee span::after { content:'✦'; color:var(--acid); font-size:0.7em; } @keyframes scroll { to { transform: translateX(-50%);} } .marquee.alt { border-top:none; background:var(--bg); } .marquee.alt .track { animation-direction: reverse; animation-duration:28s; } .marquee.alt span { color:transparent; -webkit-text-stroke:1px var(--cream); } .marquee.alt span::after { -webkit-text-stroke:0; color:var(--acid); } /* spinning "open for work" badge */ .badge { position:absolute; right:5%; top:50%; transform:translateY(-50%); width:132px; height:132px; z-index:3; display:flex; align-items:center; justify-content:center; } .badge svg { position:absolute; inset:0; width:100%; height:100%; animation: spin 16s linear infinite; } .badge text { font-family:'Syne'; font-weight:700; font-size:8.6px; letter-spacing:0.06em; fill:var(--cream); text-transform:uppercase; } .badge-core { width:48px; height:48px; border-radius:50%; background:var(--acid); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.2rem; } @keyframes spin { to { transform: rotate(360deg);} } @media (max-width:1000px){ .badge{ display:none; } } /* featured work reel */ .reel { padding:32px 0; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .reel .rtrack { display:flex; gap:22px; width:max-content; animation: scroll 42s linear infinite; will-change:transform; } .reel:hover .rtrack { animation-play-state: paused; } .ritem { position:relative; flex:0 0 auto; width:360px; height:230px; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,0.14); background:var(--bg-2) center/cover no-repeat; display:block; } .ritem .rlive { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; } @media (max-width:600px){ .ritem{ width:270px; height:172px; } } /* sections */ section { padding: 130px 0; position:relative; } .first { padding-top: 150px; } .label { display:flex; align-items:center; gap:14px; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:18px; } .label::before { content:''; width:32px; height:1px; background:var(--acid); } .sec-title { font-weight:800; font-size: clamp(2rem,6vw,4rem); line-height:1.1; margin-bottom:60px; padding-bottom:0.06em; } /* work */ .project { display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; margin-bottom: 120px; } .project:last-child { margin-bottom:0; } .project:nth-child(even) .pj-frame { order:2; } @media (max-width:860px){ .project{ grid-template-columns:1fr; gap:28px;} .project:nth-child(even) .pj-frame{ order:0;} } .pj-frame { perspective: 1200px; } .browser { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; transform-style:preserve-3d; transition: transform .2s var(--ease), box-shadow .3s; box-shadow:0 30px 60px rgba(0,0,0,0.5); } .browser .bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); } .browser .bar i { width:11px; height:11px; border-radius:50%; background:#2c2c30; display:block; } .browser .bar .url { margin-left:12px; font-size:0.72rem; color:var(--muted); background:var(--bg); padding:4px 12px; border-radius:6px; flex:1; } .shot { aspect-ratio:16/10.5; background:var(--bg-2); position:relative; overflow:hidden; } .shot img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition: transform .6s var(--ease); } .browser:hover .shot img { transform: scale(1.06); } .shot .live { position:absolute; top:0; left:0; border:0; transform-origin:top left; pointer-events:none; background:var(--bg-2); } .shot .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Syne'; font-weight:800; font-size:1.3rem; color:var(--muted); opacity:0.5; gap:10px; } .shot .ph::before { content:''; width:14px; height:14px; border:2px solid var(--muted); border-top-color:transparent; border-radius:50%; animation:spin 0.8s linear infinite; } .pj-info .num { font-family:'Syne'; font-weight:800; font-size:1rem; color:var(--acid); margin-bottom:14px; } .pj-info .pill { display:inline-block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--acid); border:1px solid var(--line); padding:5px 12px; border-radius:100px; margin-bottom:18px; } .pj-info h3 { font-weight:800; font-size: clamp(1.6rem,3.5vw,2.6rem); line-height:1.05; margin-bottom:16px; } .pj-info p { color:var(--muted); font-size:1.02rem; max-width:440px; margin-bottom:24px; } .pj-link { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:0.95rem; padding-bottom:4px; border-bottom:1px solid var(--acid); } .pj-link .arrow { color:var(--acid); transition: transform .25s var(--ease); } .pj-link:hover .arrow { transform: translate(5px,-5px); } /* services */ .svc-list { border-top:1px solid var(--line); } .svc-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:36px 0; border-bottom:1px solid var(--line); cursor:pointer; transition: padding .35s var(--ease); } .svc-row:hover { padding-left:24px; } .svc-row .n { font-family:'Syne'; font-weight:700; font-size: clamp(1.5rem,4vw,2.6rem); transition: color .3s; } .svc-row:hover .n { color: var(--acid); } .svc-row .d { color:var(--muted); max-width:360px; font-size:0.95rem; text-align:right; } @media (max-width:680px){ .svc-row{ flex-direction:column; align-items:flex-start; gap:8px;} .svc-row .d{ text-align:left;} } /* about */ .about-statement { font-family:'Syne'; font-weight:700; font-size: clamp(1.6rem,4.5vw,3.2rem); line-height:1.15; max-width:920px; } .about-statement em { font-style:normal; color:var(--muted); } .about-statement b { color:var(--acid); font-weight:700; } .stats { display:flex; gap:60px; margin-top:70px; flex-wrap:wrap; } .stat .n { font-family:'Syne'; font-weight:800; font-size: clamp(2.4rem,6vw,4rem); color:var(--acid); line-height:1; } .stat .l { color:var(--muted); font-size:0.9rem; margin-top:8px; } .about-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:center; margin-top:14px; } .about-grid .about-statement { font-size:clamp(1.35rem,2.4vw,2rem); } @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:48px; } } .about-photo { position:relative; max-width:430px; margin:0 auto; } .about-photo .bigname { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; text-transform:uppercase; font-family:'Syne'; font-weight:800; font-size:clamp(2.4rem,6.5vw,4rem); line-height:0.82; letter-spacing:-0.03em; color:transparent; -webkit-text-stroke:1.5px var(--cream); opacity:0.55; pointer-events:none; } .about-photo img { position:relative; z-index:2; width:100%; display:block; animation: floaty 6s ease-in-out infinite; -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; } @keyframes floaty { 50%{ transform: translateY(-12px);} } .about-photo .photo-star { position:absolute; top:5%; right:0; z-index:3; color:var(--acid); font-size:2rem; animation: spin 18s linear infinite; } .about-photo .photo-tag { position:absolute; bottom:15%; left:-4%; z-index:3; background:var(--bg); border:1px solid var(--line); color:var(--cream); font-family:'Syne'; font-weight:600; font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; padding:8px 14px; border-radius:100px; } /* contact */ .contact { text-align:center; padding-bottom:60px; } .contact .big { font-family:'Syne'; font-weight:800; font-size: clamp(2.6rem,11vw,9rem); line-height:1.06; } .contact .big a { transition: color .3s; } .contact .big a:hover { color:var(--acid); } .contact .sub { color:var(--muted); margin:30px auto; max-width:440px; } .contact-form { max-width:560px; margin:10px auto 0; text-align:left; display:flex; flex-direction:column; gap:20px; } .contact-form .row { display:flex; gap:18px; } .contact-form .row .field { flex:1; } .contact-form .field { display:flex; flex-direction:column; gap:8px; } .contact-form label { font-family:'Syne'; font-weight:600; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); } .contact-form input, .contact-form textarea { font-family:'Inter',sans-serif; font-size:1rem; color:var(--cream); background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; outline:none; width:100%; resize:vertical; transition:border-color .25s var(--ease), box-shadow .25s; } .contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--muted); opacity:0.7; } .contact-form input:focus, .contact-form textarea:focus { border-color:var(--acid); box-shadow:0 0 0 3px rgba(43,59,255,0.16); } .contact-form button { align-self:flex-start; margin-top:6px; border:0; cursor:pointer; } .contact-or { color:var(--muted); font-size:0.92rem; margin-top:26px; } .contact-or a:hover { opacity:0.8; } .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } @media (max-width:520px){ .contact-form .row { flex-direction:column; gap:20px; } } .contact-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; text-align:left; align-items:start; max-width:980px; margin:50px auto 0; } .contact-grid .contact-form { max-width:none; margin:0; } @media (max-width:780px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } } .contact-info { display:flex; flex-direction:column; gap:24px; } .contact-info .tag { margin-bottom:0; } .contact-note { color:var(--muted); font-size:1rem; line-height:1.6; } .contact-meta { list-style:none; display:flex; flex-direction:column; gap:14px; } .contact-meta li { display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); padding-top:14px; } .contact-meta li > span { font-family:'Syne'; font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); } .contact-meta a, .contact-meta li > div { color:var(--cream); font-weight:500; font-size:0.95rem; word-break:break-word; } .contact-meta a:hover { color:var(--acid); } /* home: why-me + social proof */ .home-intro { padding:120px 0 90px; } .intro-statement { font-family:'Syne'; font-weight:700; font-size:clamp(1.55rem,4vw,2.7rem); line-height:1.28; max-width:900px; margin-top:8px; letter-spacing:-0.02em; } .intro-statement b { color:var(--acid); font-weight:700; } .built-for { margin-top:50px; color:var(--muted); font-size:0.82rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; border-top:1px solid var(--line); padding-top:24px; } .built-for b { color:var(--cream); font-weight:600; } /* home closing CTA */ .home-cta { text-align:center; padding:120px 0; } .home-cta h2 { font-weight:800; font-size: clamp(2rem,6vw,4rem); line-height:1.1; margin-bottom:30px; } .home-cta .cta-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } footer { border-top:1px solid var(--line); padding:36px 0; } footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:0.85rem; color:var(--muted); } footer a:hover { color:var(--cream); } /* reveal */ .reveal { opacity:0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition-duration:.01ms !important;} .hero-h .ln>span{ transform:none;} }