/* ───────────────────────────────────────── BRAND TOKENS — pulled from Kemistry logo Ke dark teal #1a7a8a (darkest square) mid teal #2aa0b0 (centre square) pale cyan #7dd0dc (lightest square) circle fill #a8e4ec (circle interior) ───────────────────────────────────────── */ :root { --teal-dk: #1a7a8a; --teal-mid: #2aa0b0; --teal-lt: #7dd0dc; --teal-pale: #a8e4ec; --bg: #0d1a1c; --surface: #111f22; --surface2: #162428; --rule: #1e3338; --rule-lt: #264044; --text: #ddeef0; --text-mid: #7aacb2; --text-dim: #3d6870; --white: #f0fafc; --ease: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Josefin Sans', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; } /* ─── CURSOR ─── */ .cursor { position: fixed; width: 8px; height: 8px; background: var(--teal-lt); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .2s var(--ease), height .2s var(--ease); } .cursor-ring { position: fixed; width: 34px; height: 34px; border: 1px solid var(--teal-mid); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease); opacity: .45; } body.hov .cursor { width: 13px; height: 13px; } body.hov .cursor-ring { width: 54px; height: 54px; opacity: .75; } /* ─── GRAIN ─── */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .022; pointer-events: none; z-index: 8000; animation: grain 8s steps(10) infinite; } @keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(3%,-2%)} 40%{transform:translate(-2%,3%)} 60%{transform:translate(2%,2%)} 80%{transform:translate(-3%,-1%)} } /* ─── STING INTRO SCREEN ─── */ #sting-screen { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; align-items: center; justify-content: center; transition: opacity .8s ease; } #sting-screen.hidden { opacity: 0; pointer-events: none; } #sting-video { width: min(720px, 90vw); height: auto; display: block; } .sting-skip { position: absolute; bottom: 32px; right: 36px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.3); cursor: pointer; border: none; background: none; transition: color .2s; } .sting-skip:hover { color: rgba(255,255,255,.7); } /* ─── NAV ─── */ nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; z-index: 100; transition: background .4s, border-color .4s; } nav.scrolled { background: rgba(13,26,28,.92); border-bottom: 1px solid var(--rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-logo img { height: 38px; width: auto; display: block; filter: brightness(1.05); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 11px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; transition: color .2s; cursor: none; } .nav-links a:hover { color: var(--text); } .nav-cta { color: var(--bg) !important; background: var(--teal-mid) !important; padding: 8px 20px !important; border-radius: 1px; transition: background .2s !important; } .nav-cta:hover { background: var(--teal-dk) !important; color: var(--white) !important; } /* ─── HERO ─── */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 48px 80px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #060e10 0%, #0d1e22 45%, #122428 60%, #060e10 100%); } .hero-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 65% 35%, rgba(42,160,176,.14) 0%, transparent 65%), radial-gradient(ellipse 45% 40% at 20% 75%, rgba(26,122,138,.1) 0%, transparent 55%); animation: glow-drift 14s ease-in-out infinite alternate; } @keyframes glow-drift { 0% { transform: scale(1) translate(0,0); opacity: .8; } 100% { transform: scale(1.06) translate(-2%,1%); opacity: 1; } } .hero-scanlines { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px); pointer-events: none; } .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(6,14,16,.75) 100%), linear-gradient(to top, rgba(6,14,16,.96) 0%, transparent 55%); } .reel-ticker { position: absolute; top: var(--nav-h); left: 0; right: 0; height: 1px; background: var(--rule); overflow: hidden; } .reel-ticker-bar { height: 1px; background: linear-gradient(90deg, transparent, var(--teal-lt), transparent); width: 28%; animation: ticker 9s linear infinite; } @keyframes ticker { 0%{transform:translateX(-100%)} 100%{transform:translateX(500%)} } .hero-content { position: relative; z-index: 2; max-width: 780px; } .hero-eyebrow { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-lt); margin-bottom: 22px; opacity: 0; animation: fadeup .8s var(--ease) .3s forwards; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--teal-lt); } .hero-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 6.5vw, 5.6rem); font-weight: 300; line-height: 1.08; color: var(--white); letter-spacing: -.01em; opacity: 0; animation: fadeup .9s var(--ease) .5s forwards; } .hero-h1 em { font-style: italic; color: var(--teal-lt); } .hero-sub { margin-top: 22px; font-size: 14px; font-weight: 200; letter-spacing: .04em; color: var(--text-mid); max-width: 440px; line-height: 1.7; opacity: 0; animation: fadeup .9s var(--ease) .7s forwards; } .hero-actions { margin-top: 40px; display: flex; align-items: center; gap: 28px; opacity: 0; animation: fadeup .9s var(--ease) .9s forwards; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--teal-mid); color: var(--bg); font-family: 'Josefin Sans', sans-serif; font-size: 10.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; padding: 14px 28px; border-radius: 1px; text-decoration: none; transition: background .2s, transform .2s; cursor: none; } .btn-primary:hover { background: var(--teal-dk); transform: translateY(-1px); color: var(--white); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 200; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; transition: color .2s; cursor: none; } .btn-ghost:hover { color: var(--teal-lt); } .btn-ghost svg { transition: transform .2s; } .btn-ghost:hover svg { transform: translateX(4px); } /* Ke logo motif — decorative, echoes the sting */ .hero-motif { position: absolute; top: 50%; right: 80px; transform: translateY(-50%); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; width: 180px; opacity: 0; z-index: 2; animation: fadein 1.2s var(--ease) 1s forwards; } .motif-cell { aspect-ratio: 1; border-radius: 2px; transition: opacity .3s; } .mc-1 { background: var(--teal-dk); display: flex; align-items: center; justify-content: center; } .mc-2 { background: var(--teal-mid); } .mc-3 { background: var(--teal-lt); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px; } .mc-ke { font-family: 'Josefin Sans', sans-serif; font-size: 1.4rem; font-weight: 100; color: rgba(255,255,255,.9); letter-spacing: .05em; line-height: 1; } .mc-ke-sub { font-size: 7px; letter-spacing: .15em; text-transform: lowercase; color: rgba(255,255,255,.55); font-weight: 200; } .mc-circles { display: flex; flex-direction: column; align-items: center; gap: 4px; } .mc-circ { border-radius: 50%; background: var(--teal-pale); opacity: .75; } .mc-circ.lg { width: 22px; height: 22px; } .mc-circ.sm { width: 15px; height: 15px; } .scroll-hint { position: absolute; bottom: 28px; right: 48px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadein 1s var(--ease) 1.4s forwards; } .scroll-hint span { font-family: 'DM Mono', monospace; font-size: 7.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); writing-mode: vertical-rl; } .scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--teal-mid), transparent); animation: scroll-pulse 2.2s ease-in-out infinite; } @keyframes scroll-pulse { 0%,100%{opacity:.35} 50%{opacity:1} } /* Brand ticker */ .hero-brands { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; border-top: 1px solid var(--rule); display: flex; align-items: center; padding: 0 48px; gap: 40px; z-index: 2; backdrop-filter: blur(8px); background: rgba(6,14,16,.65); overflow: hidden; } .brands-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } .brands-divider { width: 1px; height: 22px; background: var(--rule); flex-shrink: 0; } .brands-track { display: flex; align-items: center; gap: 48px; animation: brands-scroll 22s linear infinite; white-space: nowrap; } .brands-track span { font-family: 'Josefin Sans', sans-serif; font-size: 11.5px; font-weight: 200; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); transition: color .3s; } .brands-track span:hover { color: var(--teal-lt); } @keyframes brands-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
top of page

AI INNOVATION

 

At Kemistry, storytelling isn’t just a process — it’s a pursuit. In the ever-evolving world of television
commercial production, we’re proud to be exploring the transformative potential of Artificial Intelligence to
elevate our creative possibilities.

AI is revolutionizing the way we imagine, visualize, and bring ideas to life. We use it selectively and
strategically, complementing our deep craft in bespoke production. It allows us to test visual
concepts faster, preview creative scenarios, and design elements that were previously unthinkable. 

While we embrace AI’s expanding role in concept development and visual enhancement, our productions are still led by hands-on direction, nuanced cultural storytelling, and a tailored approach for each client. The human touch remains essential. With partners we see AI not a shortcut but as a source of inpiration — a tool to amplify our vision, spark imagination and push the boundaries of commercial storytelling.

At Kemistry, creativity is our craft — and every frame tells a story. We’re proud to be exploring the immense potential of Artificial Intelligence as a tool to enhance, elevate, and inspire our work in television commercial production.

AI is rapidly reshaping the possibilities of visual storytelling. From conceptual imagery and previsualization to enhanced post-production techniques, we’re harnessing AI where it can sharpen our efficiency, expand our creative palette, and allow new perspectives to emerge.

Yet the heart of our work remains human — driven by bespoke ideas, client collaboration, and a deep understanding of cultural nuance. Because our content is highly specialized and tailored, we don’t rely on AI to fully automate production, but we do integrate it thoughtfully and strategically. Increasingly, you’ll see elements within our work — visuals, textures, transitions — that reflect AI’s growing role in our creative process. It’s not about replacing artistry; it’s about amplifying it.

AI design & visual effects

© 2014 by KEMISTRY created with Wix.com

bottom of page