/* ───────────────────────────────────────── 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%); } }
Ke
kemistry
SKIP ↓
Ke
kemistry
SKIP ↓
top of page
Home
Recent
About
Contact
History
2024
2023
2022
2021
2020
2019
2018
2017
AI Innovation
Production Service
More
Use tab to navigate through the menu items.
Hair & Beauty
Automotive
Food & Beverage
Baby & Kids
Corporate
AI Design & VFX
History reels
2024
2023
2022
2021
2020
2019
2018
2017
Home
Recent
About
Contact
History
2024
2023
2022
2021
2020
2019
2018
2017
AI Innovation
Production Service
More
Use tab to navigate through the menu items.
Kemistry History reels- use the pulldown menu above to select
bottom of page
