:root{ –bg:#0a0908;–bg-2:#100e0c;–bg-3:#16130f; –ink:#f3ecdc;–ink-2:#cfc6b3;–muted:#7a7264; –line:rgba(201,169,97,.18); –gold:#c9a961;–gold-2:#e5c97a;–gold-deep:#8c6f3a; –display:”Italiana”,”Cormorant Garamond”,serif; –serif:”Cormorant Garamond”,serif; –sans:”Inter”,system-ui,sans-serif; –mono:”JetBrains Mono”,ui-monospace,monospace; –ease-out:cubic-bezier(0.23,1,0.32,1); –ease-io:cubic-bezier(0.77,0,0.175,1); } .kj-root *{box-sizing:border-box;margin:0;padding:0} .kj-root{background:var(–bg);color:var(–ink);font-family:var(–sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;position:relative} .kj-root img{max-width:100%;display:block} .kj-root a{color:inherit;text-decoration:none} .kj-root ::selection{background:var(–gold);color:#000} body{margin:0;background:var(–bg)} html{scroll-behavior:smooth} /* GRAIN + VIGNETTE */ .kj-grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay; background-image:url(“data:image/svg+xml;utf8,”)} .kj-vignette{position:fixed;inset:0;pointer-events:none;z-index:199;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55) 100%)} /* LOADER */ .kj-loader{position:fixed;inset:0;z-index:300;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px} .kj-loader__mark{width:48px;height:48px} .kj-loader__bar{width:140px;height:1px;background:rgba(201,169,97,.2);overflow:hidden;position:relative} .kj-loader__bar::after{content:””;position:absolute;inset:0;background:var(–gold);transform-origin:left;transform:scaleX(0);animation:kj-load 1.4s var(–ease-io) forwards} .kj-loader__text{font-family:var(–mono);font-size:9px;letter-spacing:.3em;color:var(–muted);text-transform:uppercase} @keyframes kj-load{to{transform:scaleX(1)}} .kj-loader.out{opacity:0;transition:opacity .8s var(–ease-out);pointer-events:none} /* NAV */ .kj-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 32px;display:flex;align-items:center;justify-content:space-between; transition:background .4s var(–ease-out),backdrop-filter .4s var(–ease-out),padding .4s var(–ease-out)} .kj-nav.scrolled{background:rgba(10,9,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 32px;border-bottom:1px solid var(–line)} .kj-nav__brand{display:flex;align-items:center;gap:10px} .kj-nav__logo{width:24px;height:24px} .kj-nav__name{font-family:var(–display);font-size:16px;letter-spacing:.06em;color:var(–ink)} .kj-nav__menu{display:flex;gap:28px} .kj-nav__menu a{font-family:var(–mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(–ink-2);position:relative;padding:6px 0;transition:color .25s var(–ease-out)} .kj-nav__menu a::after{content:””;position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(–gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(–ease-out)} .kj-nav__menu a:hover{color:var(–gold-2)} .kj-nav__menu a:hover::after{transform:scaleX(1);transform-origin:left} .kj-nav__cta{font-family:var(–mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(–bg);background:var(–gold);padding:9px 16px;border:1px solid var(–gold);transition:background .25s var(–ease-out),color .25s var(–ease-out)} .kj-nav__cta:hover{background:transparent;color:var(–gold-2)} @media (max-width:860px){.kj-nav{padding:14px 16px}.kj-nav__menu{display:none}} /* HERO */ .kj-hero{position:relative;height:100vh;min-height:600px;width:100%;overflow:hidden} #kj-hero-canvas{position:absolute;inset:0;width:100%;height:100%} .kj-hero__overlay{position:absolute;inset:0;background: radial-gradient(ellipse at 50% 60%,transparent 0%,rgba(10,9,8,.35) 70%,var(–bg) 100%), linear-gradient(180deg,rgba(10,9,8,.6) 0%,transparent 18%,transparent 72%,rgba(10,9,8,.95) 100%); pointer-events:none} .kj-hero__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:100px 32px 44px;pointer-events:none;max-width:1600px;margin:0 auto} .kj-hero__eyebrow{font-family:var(–mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(–gold);display:flex;align-items:center;gap:12px;opacity:0} .kj-hero__eyebrow::before{content:””;width:30px;height:1px;background:var(–gold)} .kj-hero__title{font-family:var(–display);font-weight:400;font-size:clamp(44px,7.5vw,108px);line-height:.92;letter-spacing:-.01em;color:var(–ink);max-width:1100px;margin-top:auto} .kj-hero__title em{font-family:var(–serif);font-style:italic;font-weight:300;color:var(–gold-2)} .kj-hero__title .line{display:block;overflow:hidden} .kj-hero__title .line span{display:block;transform:translateY(110%)} .kj-hero__meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;gap:32px;flex-wrap:wrap} .kj-hero__desc{font-family:var(–serif);font-size:15px;line-height:1.55;font-weight:300;color:var(–ink-2);max-width:340px;font-style:italic;opacity:0} .kj-hero__scroll{font-family:var(–mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(–muted);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0} .kj-hero__scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(–gold),transparent);position:relative;overflow:hidden} .kj-hero__scroll-line::after{content:””;position:absolute;top:-40px;left:0;width:100%;height:40px;background:var(–gold-2);animation:kj-scrollDot 2.2s var(–ease-io) infinite} @keyframes kj-scrollDot{to{top:100%}} @media (max-width:860px){.kj-hero{min-height:560px}.kj-hero__content{padding:90px 16px 32px}.kj-hero__meta{flex-direction:column;align-items:flex-start}} /* GENERIC */ .kj-root section{position:relative} .kj-label{font-family:var(–mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(–gold);display:flex;align-items:center;gap:12px} .kj-label::before{content:””;width:22px;height:1px;background:var(–gold)} .kj-h-display{font-family:var(–display);font-weight:400;font-size:clamp(30px,4vw,56px);line-height:1.02;letter-spacing:-.005em;color:var(–ink)} .kj-h-display em{font-family:var(–serif);font-style:italic;font-weight:300;color:var(–gold-2)} /* MARQUEE */ .kj-marquee{padding:26px 0;border-top:1px solid var(–line);border-bottom:1px solid var(–line);overflow:hidden;background:var(–bg-2)} .kj-marquee__track{display:flex;gap:60px;white-space:nowrap;animation:kj-marquee 38s linear infinite;width:max-content} .kj-marquee__item{font-family:var(–display);font-size:clamp(26px,3.4vw,46px);color:var(–ink);display:flex;align-items:center;gap:60px;font-weight:400} .kj-marquee__item::after{content:”✦”;color:var(–gold);font-size:.5em} .kj-marquee__item em{font-family:var(–serif);font-style:italic;color:var(–gold-2);font-weight:300} @keyframes kj-marquee{to{transform:translateX(-50%)}} /* INTRO */ .kj-intro{padding:100px 32px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1400px;margin:0 auto} .kj-intro__visual{position:relative;aspect-ratio:3/4;overflow:hidden} .kj-intro__visual img{width:100%;height:100%;object-fit:cover;will-change:transform} .kj-intro__visual::after{content:””;position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,9,8,.4));pointer-events:none} .kj-intro__copy{display:flex;flex-direction:column;gap:22px} .kj-intro__body{font-family:var(–serif);font-size:17px;line-height:1.6;color:var(–ink-2);font-weight:300;max-width:480px} .kj-intro__body strong{font-weight:500;color:var(–ink);font-style:normal} .kj-intro__stats{display:flex;gap:40px;margin-top:16px;border-top:1px solid var(–line);padding-top:24px} .kj-stat__num{font-family:var(–display);font-size:36px;color:var(–gold-2);line-height:1} .kj-stat__lbl{font-family:var(–mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(–muted);margin-top:6px} @media (max-width:980px){.kj-intro{grid-template-columns:1fr;gap:48px;padding:64px 16px}} /* HORIZONTAL SHOWCASE */ .kj-showcase{position:relative;background:var(–bg-2);overflow:hidden} .kj-showcase__head{padding:90px 32px 44px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;max-width:1500px;margin:0 auto} .kj-showcase__head-l{display:flex;flex-direction:column;gap:18px;max-width:560px} .kj-showcase__head-r{font-family:var(–serif);font-size:15px;line-height:1.55;color:var(–ink-2);font-style:italic;max-width:340px} .kj-h-pin{height:100vh;min-height:600px;overflow:hidden;position:relative} .kj-h-track{display:flex;height:100%;will-change:transform;padding:0 32px;gap:24px;align-items:center} .kj-h-card{flex:0 0 auto;width:min(340px,72vw);height:78%;position:relative;background:var(–bg-3)} .kj-h-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.08) contrast(1.05)} .kj-h-card__info{position:absolute;left:20px;right:20px;bottom:20px;color:var(–ink);text-shadow:0 2px 16px rgba(0,0,0,.5)} .kj-h-card__name{font-family:var(–display);font-size:24px;line-height:1} .kj-h-card__meta{font-family:var(–mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(–gold-2);margin-bottom:6px} .kj-h-card__num{position:absolute;top:16px;left:20px;font-family:var(–mono);font-size:9px;letter-spacing:.22em;color:var(–gold-2)} .kj-h-prog{position:absolute;bottom:32px;left:32px;right:32px;height:1px;background:rgba(201,169,97,.15);z-index:5} .kj-h-prog__bar{height:100%;background:var(–gold-2);width:0;transform-origin:left;transform:scaleX(0)} @media (max-width:860px){.kj-h-card{width:78vw}.kj-showcase__head{padding:60px 16px 32px}} /* ATELIER */ .kj-atelier{padding:110px 0;display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;overflow:hidden;background:var(–bg);max-width:1500px;margin:0 auto} .kj-atelier__col{padding:0 56px} .kj-atelier__col.right{padding-top:90px} .kj-atelier__img{aspect-ratio:4/5;overflow:hidden;position:relative} .kj-atelier__img img{width:100%;height:100%;object-fit:cover;will-change:transform} .kj-atelier__caption{font-family:var(–mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(–muted);margin-top:14px;display:flex;justify-content:space-between} .kj-atelier__caption span:last-child{color:var(–gold-2)} .kj-atelier__text{margin-top:48px;display:flex;flex-direction:column;gap:18px;max-width:440px} .kj-atelier__text p{font-family:var(–serif);font-size:17px;line-height:1.6;color:var(–ink-2);font-weight:300} @media (max-width:980px){.kj-atelier{grid-template-columns:1fr;padding:64px 16px;gap:48px}.kj-atelier__col{padding:0}.kj-atelier__col.right{padding-top:0}} /* QUOTE */ .kj-quote{padding:130px 32px;text-align:center;max-width:980px;margin:0 auto;position:relative} .kj-quote__mark{font-family:var(–display);font-size:110px;color:var(–gold);line-height:.5;opacity:.3;margin-bottom:-22px} .kj-quote__text{font-family:var(–display);font-weight:400;font-size:clamp(26px,3.5vw,44px);line-height:1.22;color:var(–ink);letter-spacing:-.005em} .kj-quote__text em{font-family:var(–serif);font-style:italic;font-weight:300;color:var(–gold-2)} .kj-quote__attr{font-family:var(–mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(–muted);margin-top:36px;display:flex;align-items:center;justify-content:center;gap:12px} .kj-quote__attr::before,.kj-quote__attr::after{content:””;width:30px;height:1px;background:var(–gold)} /* COLLECTIONS */ .kj-coll{padding:90px 32px 110px;max-width:1500px;margin:0 auto} .kj-coll__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;gap:32px;flex-wrap:wrap} .kj-coll__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .kj-coll__item{position:relative;overflow:hidden;background:var(–bg-3);cursor:pointer;display:block} .kj-coll__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(–ease-out);will-change:transform} .kj-coll__item:hover img{transform:scale(1.05)} .kj-coll__item::after{content:””;position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,9,8,.85));pointer-events:none} .kj-coll__caption{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end} .kj-coll__caption-l h3{font-family:var(–display);font-size:26px;line-height:1;color:var(–ink)} .kj-coll__caption-l p{font-family:var(–mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(–gold-2);margin-top:6px} .kj-coll__arrow{width:38px;height:38px;border:1px solid var(–gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(–gold-2);font-size:15px;transition:background .25s var(–ease-out),color .25s var(–ease-out)} .kj-coll__item:hover .kj-coll__arrow{background:var(–gold);color:var(–bg)} .kj-coll__item.a{grid-column:span 7;aspect-ratio:4/3} .kj-coll__item.b{grid-column:span 5;aspect-ratio:1/1} .kj-coll__item.c{grid-column:span 5;aspect-ratio:3/4} .kj-coll__item.d{grid-column:span 7;aspect-ratio:4/5} @media (max-width:860px){.kj-coll__item.a,.kj-coll__item.b,.kj-coll__item.c,.kj-coll__item.d{grid-column:span 12;aspect-ratio:4/5}.kj-coll{padding:48px 16px}} /* CTA */ .kj-cta{padding:120px 32px;text-align:center;background:linear-gradient(180deg,var(–bg) 0%,var(–bg-2) 100%);border-top:1px solid var(–line);position:relative;overflow:hidden} .kj-cta__glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,97,.12),transparent 60%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none} .kj-cta h2{font-family:var(–display);font-size:clamp(40px,5.5vw,76px);line-height:1.02;color:var(–ink);max-width:980px;margin:0 auto;position:relative} .kj-cta h2 em{font-family:var(–serif);font-style:italic;color:var(–gold-2);font-weight:300} .kj-cta p{font-family:var(–serif);font-size:17px;color:var(–ink-2);font-style:italic;margin-top:22px;font-weight:300;position:relative} .kj-cta__btns{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap;position:relative} .kj-btn{font-family:var(–mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;padding:15px 26px;border:1px solid var(–gold);transition:background .3s var(–ease-out),color .3s var(–ease-out);cursor:pointer;display:inline-block} .kj-btn-p{background:var(–gold);color:var(–bg)} .kj-btn-p:hover{background:var(–gold-2);border-color:var(–gold-2)} .kj-btn-s{background:transparent;color:var(–gold-2)} .kj-btn-s:hover{background:var(–gold);color:var(–bg)} /* FOOTER */ .kj-footer{padding:64px 32px 32px;border-top:1px solid var(–line);background:var(–bg)} .kj-ft{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px} .kj-ft__brand{display:flex;flex-direction:column;gap:16px;max-width:320px} .kj-ft__brand-row{display:flex;align-items:center;gap:12px} .kj-ft__brand-row svg{width:28px;height:28px} .kj-ft__brand-name{font-family:var(–display);font-size:20px;letter-spacing:.04em} .kj-ft__brand p{font-family:var(–serif);font-size:14px;color:var(–muted);line-height:1.6;font-style:italic} .kj-ft__col h4{font-family:var(–mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(–gold);margin-bottom:18px} .kj-ft__col a,.kj-ft__col p{display:block;font-family:var(–sans);font-size:13px;color:var(–ink-2);line-height:2;transition:color .2s var(–ease-out)} .kj-ft__col a:hover{color:var(–gold-2)} .kj-ft__base{max-width:1500px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(–line);display:flex;justify-content:space-between;font-family:var(–mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(–muted);flex-wrap:wrap;gap:16px} @media (max-width:860px){.kj-ft{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width:540px){.kj-ft{grid-template-columns:1fr}} /* REVEAL */ .kj-reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(–ease-out),transform .9s var(–ease-out)} .kj-reveal.in{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .kj-root *,.kj-root *::before,.kj-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }

Khawaja Jewellers

Est. Heirloom Atelier · Lahore

Heritage cast in gold.

Three generations of craftsmanship — every piece engraved with the silence of patience and the weight of legacy.

Scroll

22 K Gold Solitaire Diamonds Hand Engraved Aqeeq · Yemeni Filigree Bespoke 22 K Gold Solitaire Diamonds Hand Engraved Aqeeq · Yemeni Filigree Bespoke

A House of Heirlooms

Where every piece tells a story of luxury.

At Khawaja Jewellers, the bench has not changed for decades — only the hands at it. Each ring, each link, each setting is shaped slowly, by people who learned this work from the people who taught them.

We do not make jewellery for the season. We make it for the daughters of daughters.

1962

Established

3^rd

Generation

22^K

Purity

The Featured Pieces

Quiet luxury, carried close.

A curation from the season’s bench — each piece available to view privately by appointment at our Lahore atelier.

001 / 06

Solitaire · 18K

Iqra Ring

002 / 06

Filigree · 22K

Gulab Ring

003 / 06

Bracelet · 18K + Diamond

Patta Sehra

004 / 06

Bracelet · 22K

Zaitoon Chain

005 / 06

Heirloom · 22K

Mehr-e-Zar

006 / 06

Yemeni Aqeeq · 925 Silver

Yaali Ring

Plate 01Filigree Study

Bench Notes

Filigree is not a technique we use. It is a discipline we keep — pulled wire thinner than thread, set under loupe, soldered by breath.

Yemeni aqeeq ring with Arabic calligraphy

Plate 02Yemeni Aqeeq

Stones of Witness

Sourced from the hills of Sana’a and carved at our bench — the aqeeq is not ornament. It is inheritance, faith, and silence in stone.

“

A piece of gold is not jewellery until a story has lived in it. We do not sell ornaments — we begin them.

Khawaja · Atelier of Heritage

Explore the House

Collections, quietly assembled.

Four collections, each shaped around a single discipline — diamond, gold, heirloom, and stone.

Diamond

Solitaire · Engagement

→

Gold

22K · Filigree

→

Heirloom

Vintage · Restoration

→

Stones

Aqeeq · Yemeni · Silver

→

A piece chosen in person
is remembered for life.

Book a private viewing at our Lahore atelier — tea served, no obligation.

Book on WhatsApp @jewelsby_khawaja

(function(){ function init(){ if (!window.gsap || !window.ScrollTrigger || !window.THREE){ setTimeout(init, 80); return; } gsap.registerPlugin(ScrollTrigger); /* HERO 3D */ (function(){ const canvas = document.getElementById(‘kj-hero-canvas’); if (!canvas) return; const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x0a0908, 0.05); const camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 100); camera.position.set(0,0,7); const renderer = new THREE.WebGLRenderer({canvas, antialias:true, alpha:true}); renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.15; const group = new THREE.Group(); const crownGeo = new THREE.OctahedronGeometry(1.1, 0); const mat = new THREE.MeshPhysicalMaterial({color:0xfff4d6,metalness:.85,roughness:.08,clearcoat:1,clearcoatRoughness:.05,reflectivity:1,envMapIntensity:1.4,flatShading:true}); const pmrem = new THREE.PMREMGenerator(renderer); const envScene = new THREE.Scene(); const envGeo = new THREE.SphereGeometry(50,32,32); const envMat = new THREE.ShaderMaterial({ side: THREE.BackSide, vertexShader:’varying vec3 vPos; void main(){ vPos=position; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.); }’, fragmentShader:’varying vec3 vPos; void main(){ float h=normalize(vPos).y; vec3 top=vec3(.95,.78,.42); vec3 mid=vec3(.55,.40,.18); vec3 bot=vec3(.05,.04,.03); vec3 c=mix(bot,mid,smoothstep(-.3,.1,h)); c=mix(c,top,smoothstep(.1,.7,h)); gl_FragColor=vec4(c,1.); }’ }); envScene.add(new THREE.Mesh(envGeo, envMat)); const envMap = pmrem.fromScene(envScene).texture; mat.envMap = envMap; scene.environment = envMap; const crown = new THREE.Mesh(crownGeo, mat); group.add(crown); const pavGeo = new THREE.ConeGeometry(1.1,1.5,8,1); const pav = new THREE.Mesh(pavGeo, mat); pav.position.y = -1.4; pav.rotation.x = Math.PI; pav.rotation.y = Math.PI/8; group.add(pav); group.position.y = .5; group.scale.set(1.3,1.3,1.3); scene.add(group); // dust particles const pCount = 300; const pGeo = new THREE.BufferGeometry(); const pos = new Float32Array(pCount*3); for(let i=0;i{ mouse.tx=(e.clientX/window.innerWidth-.5)*.4; mouse.ty=(e.clientY/window.innerHeight-.5)*.4; }); let scrollY = 0; window.addEventListener(‘scroll’, ()=>{ scrollY=window.scrollY; }, {passive:true}); function animate(){ const t = performance.now()*.001; mouse.x += (mouse.tx-mouse.x)*.05; mouse.y += (mouse.ty-mouse.y)*.05; group.rotation.y = t*.35 + mouse.x; group.rotation.x = Math.sin(t*.4)*.1 + mouse.y; group.position.y = .5 + Math.sin(t*.8)*.08; const hh = window.innerHeight; const p = Math.min(scrollY/hh, 1); group.scale.setScalar(1.3 – p*.55); group.position.x = p*2; pMat.opacity = .7*(1-p); particles.rotation.y = t*.04; particles.rotation.x = t*.02; renderer.render(scene,camera); requestAnimationFrame(animate); } animate(); window.addEventListener(‘resize’, ()=>{ camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); })(); /* LOADER + HERO STAGGER */ window.addEventListener(‘load’, ()=>{ setTimeout(()=>{ const ld = document.getElementById(‘kj-loader’); if (ld){ ld.classList.add(‘out’); setTimeout(()=>ld.remove(),800); } gsap.to(‘.kj-hero__title .line span’,{y:0,duration:1.4,ease:’expo.out’,stagger:.12,delay:.1}); gsap.fromTo(‘#kj-eyebrow’,{opacity:0,x:-20},{opacity:1,x:0,duration:1.2,ease:’expo.out’,delay:.4}); gsap.fromTo(‘#kj-hero-desc, #kj-hero-scroll’,{opacity:0,y:20},{opacity:1,y:0,duration:1.2,ease:’expo.out’,delay:.8,stagger:.1}); }, 1400); }); // fallback in case load fired already if (document.readyState === ‘complete’){ setTimeout(()=>{ window.dispatchEvent(new Event(‘load’)); }, 50); } /* NAV SCROLLED */ ScrollTrigger.create({trigger:’body’,start:’top -60′,end:99999, onUpdate: self => document.getElementById(‘kj-nav’).classList.toggle(‘scrolled’, self.scroll()>60) }); /* REVEALS */ document.querySelectorAll(‘.kj-reveal’).forEach(el=>{ ScrollTrigger.create({trigger:el,start:’top 88%’,onEnter:()=>el.classList.add(‘in’)}); }); /* HORIZONTAL PIN */ (function(){ const pin = document.getElementById(‘kj-hPin’); const track = document.getElementById(‘kj-hTrack’); const bar = document.getElementById(‘kj-hBar’); if (!pin||!track) return; function setup(){ const amount = track.scrollWidth – window.innerWidth + 32; if (amount { bar.style.transform = ‘scaleX(‘+self.progress+’)’; }}}); } setup(); window.addEventListener(‘resize’, ()=>ScrollTrigger.refresh()); })(); /* PARALLAX */ [{id:’kj-intro-img’,a:50},{id:’kj-par1′,a:40},{id:’kj-par2′,a:60}].forEach(({id,a})=>{ const el = document.getElementById(id); if (!el) return; gsap.to(el,{y:a,ease:’none’,scrollTrigger:{trigger:el.parentElement.parentElement,start:’top bottom’,end:’bottom top’,scrub:true}}); }); /* COLL HOVER LIFT */ document.querySelectorAll(‘.kj-coll__item’).forEach(it=>{ it.addEventListener(‘mouseenter’,()=>gsap.to(it,{y:-5,duration:.4,ease:’power2.out’})); it.addEventListener(‘mouseleave’,()=>gsap.to(it,{y:0,duration:.4,ease:’power2.out’})); }); } init(); })(); Chat with us on WhatsApp