/* ============================================================ QUAD-A GROUP — cinematic site v4 STRICT palette: black #050505 / white #ffffff / orange #ff8b00 (all accents are #ff8b00 at varying alpha — no gold, no third hue). Type: Zona Pro (display) · Gotham (UI) · Fira Sans (body). ============================================================ */ @font-face { font-family: 'Zona Pro'; src: url('../assets/fonts/ZonaPro-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Zona Pro'; src: url('../assets/fonts/ZonaPro-ExtraLight.otf') format('opentype'); font-weight: 200; font-display: swap; } @font-face { font-family: 'Zona Pro'; src: url('../assets/fonts/ZonaPro-Thin.otf') format('opentype'); font-weight: 100; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../assets/fonts/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../assets/fonts/GothamMedium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../assets/fonts/GothamBook.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../assets/fonts/GothamLight.ttf') format('truetype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('../assets/fonts/FiraSans-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('../assets/fonts/FiraSans-Light.otf') format('opentype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('../assets/fonts/FiraSans-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('../assets/fonts/FiraSans-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Fira Sans'; src: url('../assets/fonts/FiraSans-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } :root { --black: #050505; --panel: #0b0b0b; --white: #ffffff; --mist: rgba(255,255,255,0.72); --orange: #ff8b00; --display: 'Zona Pro', 'Gotham', sans-serif; --ui: 'Gotham', 'Fira Sans', sans-serif; --body: 'Fira Sans', 'Gotham', sans-serif; --intensity: 0.55; --kg: 0; /* dial gain: 0 at −∞ dB, 1 at the 0 dB XP-Africa launch */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } body { background: var(--black); color: var(--white); font-family: var(--body); font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--orange); color: #000; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } @media (pointer: fine) { body.home, body.home a, body.home button, body.home .knob { cursor: none; } } /* ---------- film grain ---------- */ .grain { position: fixed; inset: -60px; z-index: 60; pointer-events: none; opacity: calc(0.05 + var(--intensity) * 0.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E"); animation: grainJitter 0.6s steps(4) infinite; } @keyframes grainJitter { 0% { transform: translate(0,0); } 25% { transform: translate(-18px,12px); } 50% { transform: translate(14px,-20px); } 75% { transform: translate(-10px,-8px); } 100% { transform: translate(0,0); } } /* ---------- the wave-fall (page-wide, always behind the content) ---------- The canvas sits at z-0 and
stacks above it, so the fall glows through the see-through sections but never rides over text, cards or posters. Media-backed sections simply cover it. */ #spineWave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.05 + var(--intensity) * 0.08); } main { position: relative; z-index: 1; } /* ---------- cursor ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: none; } @media (pointer: fine) { .cursor-dot, .cursor-ring { display: flex; } } .cursor-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(255,139,0,0.8); transform: translate(-50%,-50%); } .cursor-ring { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,139,0,0.75); align-items: center; justify-content: center; gap: 3px; transform: translate(-50%,-50%); transition: width .28s cubic-bezier(.2,.9,.3,1.2), height .28s cubic-bezier(.2,.9,.3,1.2), border-color .28s, border-style .28s, background .28s; } .cursor-ring .cw { width: 3px; height: 4px; border-radius: 2px; background: var(--orange); opacity: 0; transition: opacity .2s; } .cursor-ring.wave { width: 56px; height: 56px; border-color: rgba(255,139,0,0.28); } .cursor-ring.wave .cw { opacity: 1; animation: eq .7s ease-in-out infinite alternate; } .cursor-ring.wave .cw:nth-child(2) { animation-delay: .12s; } .cursor-ring.wave .cw:nth-child(3) { animation-delay: .24s; } .cursor-ring.wave .cw:nth-child(4) { animation-delay: .36s; } .cursor-ring.wave .cw:nth-child(5) { animation-delay: .48s; } @keyframes eq { from { height: 5px; } to { height: 26px; } } .cursor-ring.knobmode { width: 64px; height: 64px; border-style: dashed; border-color: var(--orange); background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.10), rgba(0,0,0,0.55) 70%); animation: ringSpin 5s linear infinite; } @keyframes ringSpin { to { transform: translate(-50%,-50%) rotate(360deg); } } .cursor-ring.knobmode::after { content: ''; position: absolute; top: 5px; left: 50%; width: 4px; height: 12px; border-radius: 2px; margin-left: -2px; background: var(--orange); } .cursor-ring.link { width: 52px; height: 52px; border-color: var(--orange); } /* ---------- chrome ---------- */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 20px 34px; mix-blend-mode: difference; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 34px; height: 34px; object-fit: contain; } .brand-word { font-family: var(--ui); font-weight: 700; letter-spacing: .18em; font-size: 13px; color: var(--white); } .brand-word em { font-style: normal; color: var(--orange); } .topnav { display: flex; gap: 24px; align-items: center; } .topnav a { font-family: var(--ui); font-weight: 500; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--white); opacity: .75; transition: opacity .2s, color .2s; } .topnav a:hover { opacity: 1; color: var(--orange); } .topmail { border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; text-transform: none !important; letter-spacing: .08em !important; } .nav-login { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,139,0,.5); padding: 8px 14px; color: var(--orange) !important; opacity: 1 !important; transition: background .2s, color .2s; } .nav-login svg { display: block; } .nav-login:hover { background: var(--orange); color: #000 !important; } .burger { display: none; background: none; border: 0; width: 40px; height: 34px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; } .burger i { display: block; width: 26px; height: 2px; background: var(--white); transition: transform .3s, opacity .3s; } body.menu-open .burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.menu-open .burger i:nth-child(2) { opacity: 0; } body.menu-open .burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .sec-index { font-family: var(--display); font-weight: 100; font-size: clamp(40px, 5vw, 72px); color: var(--orange); display: block; line-height: 1; } .sec-title { font-family: var(--display); font-weight: 700; color: var(--white); font-size: clamp(42px, 7.2vw, 130px); line-height: .92; letter-spacing: .01em; text-transform: uppercase; margin-top: 12px; } .sec-note { max-width: 36ch; font-size: 16px; color: var(--mist); line-height: 1.6; } .emerge { opacity: 0; transform: scale(.55) translateY(30px); filter: blur(6px); } .emerge.in { opacity: 1; transform: none; filter: none; transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease; } .rev { opacity: 0; transform: translateY(46px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .rev.in { opacity: 1; transform: none; } /* ============ HERO ============ */ .hero-scrub { height: 500vh; position: relative; } /* the hero has NO bottom cutoff edge: in the last stretch (--hpD) the whole frame dissolves and the page waterfall behind simply continues */ .hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: rgb(0 0 0 / calc(1 - var(--hpD, 0))); } .hero-cam { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 46%; transform-style: preserve-3d; opacity: calc(1 - var(--hpD, 0)); } /* end of the dive fades to black — morphs into the REBRANDING section */ .hero-cam::after { content: ''; position: absolute; inset: 0; z-index: 6; background: #050505; pointer-events: none; opacity: var(--hpC, 0); } /* full-bleed always: plain scale dive, no z-translation gaps */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + var(--hpA, 0) * 0.42)); filter: brightness(calc(1 - var(--hpA, 0) * 0.2)); } .hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.6) 100%), linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.1) 42%, rgba(0,0,0,0.66)); } /* dark overlay + live waves; iris opens with scroll */ /* ~90% cover at rest: a whisper of the room shows behind the logo; the iris eases open only once scrolling + zooming begin */ .hero-overlay { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 46%, rgba(0,0,0,calc(0.9 - var(--hpA, 0) * 1.25)) calc(var(--hpA, 0) * 40%), rgba(0,0,0,0.9) calc(30% + var(--hpA, 0) * 70%)); opacity: calc(1 - var(--hpA, 0) * 1.05); pointer-events: none; } #heroWaves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .9; pointer-events: none; } /* one gold ring among the blooms — gold use 3 of 3 */ .speaker-rings { position: absolute; inset: 0; pointer-events: none; } .speaker-rings i { position: absolute; top: 46%; left: 50%; width: 12vmin; height: 12vmin; border-radius: 50%; border: 1px solid rgba(255,139,0,.5); transform: translate(-50%,-50%) scale(.4); opacity: 0; animation: bloom 3.2s cubic-bezier(.16,1,.3,1) infinite; } .speaker-rings i:nth-child(2) { border-color: rgba(255,139,0,.7); animation-delay: 1.06s; } .speaker-rings i:nth-child(3) { animation-delay: 2.12s; } @keyframes bloom { 0% { transform: translate(-50%,-50%) scale(.35); opacity: 0; } 12% { opacity: calc(.3 + var(--intensity) * .4); } 100% { transform: translate(-50%,-50%) scale(7); opacity: 0; } } .hero-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateZ(calc(var(--hpA, 0) * 560px)); opacity: calc(1 - var(--hpA, 0) * 1.35); transform-style: preserve-3d; } /* THE logo — big, breathing, the star of the frame */ .hero-logo-wrap { position: relative; margin-bottom: 2vh; transform: translateZ(40px); } .hero-logo { width: clamp(150px, 30vh, 320px); height: auto; animation: logoIn 1.5s cubic-bezier(.16,1,.3,1) both, logoBreath 4s ease-in-out 1.7s infinite; filter: drop-shadow(0 0 calc(20px + var(--intensity) * 30px) rgba(255,139,0,0.55)); } @keyframes logoIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.1) rotate(4deg); } to { transform: scale(1) rotate(0); opacity: 1; } } @keyframes logoBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .pulse-ring { position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1; border: 1px solid rgba(255,139,0,0.45); border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; animation: ripple 2.8s ease-out infinite; } .pulse-ring.r2 { animation-delay: 1.4s; } @keyframes ripple { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0; } 15% { opacity: calc(0.3 + var(--intensity) * 0.35); } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } } /* title: one line, deliberately smaller than the logo */ .hero-title { font-family: var(--display); font-weight: 700; color: var(--white); text-align: center; line-height: .9; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 10px 60px rgba(0,0,0,.75); } .hero-title .line { display: block; overflow: hidden; } .hero-title .w { display: inline-block; font-size: 60px; /* JS fits to ~46vw */ animation: titleUp 1.1s cubic-bezier(.16,1,.3,1) both .2s; } @keyframes titleUp { from { transform: translateY(112%); } to { transform: translateY(0); } } /* certifications — b&w at rest → colour + 3D zoom while scrolling into the studio */ .cert-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px); margin-top: 5vh; transform-style: preserve-3d; } /* start in colour, dissolve to b&w while zooming out toward the viewer */ .cert { height: clamp(34px, 6.2vh, 62px); width: auto; object-fit: contain; filter: grayscale(var(--certG, 0)) brightness(calc(1.02 + var(--certG, 0) * 0.5)) contrast(.96); transform: translateZ(calc(var(--hpA, 0) * 220px)) scale(calc(1 + var(--hpA, 0) * 0.22)); opacity: calc(1 - var(--hpA, 0) * .25); } .cert:nth-child(2) { transform: translateZ(calc(var(--hpA, 0) * 300px)) scale(calc(1 + var(--hpA, 0) * 0.3)); } .cert:nth-child(4) { transform: translateZ(calc(var(--hpA, 0) * 300px)) scale(calc(1 + var(--hpA, 0) * 0.3)); } .cert-inv { filter: invert(1) grayscale(var(--certG, 0)) brightness(1.15); } /* the Atmos + Dante seals carry heavy transparent padding inside their square canvases — lift their box so the visible mark matches the neighbours */ .cert-lg { height: clamp(48px, 8.7vh, 87px); } .cert-chip { height: auto; display: inline-flex; align-items: center; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .22em; line-height: 1.5; color: rgba(255,255,255,calc(.75 + var(--hpA, 0) * .25)); border: 1px solid rgba(255,255,255,.35); padding: 8px 12px; } /* z-7: the manifesto rides ABOVE the fade-to-black (hero-cam::after, z-6) so it stays clearly readable while the room darkens — then the scroll backspaces it away letter by letter (see js: the erase pass) while the waterfall wakes up behind it */ .hero-emerge { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; transform-origin: 50% 46%; transform: scale(calc(0.05 + var(--hpB, 0) * 0.95)); opacity: calc(var(--hpB, 0) * 2 - 0.15); filter: blur(calc((1 - var(--hpB, 0)) * 8px)); pointer-events: none; } /* the sub-line clears first, so the caret is left alone with the tagline */ .hero-emerge .hero-sub { opacity: calc(1 - var(--hpF, 0) * 3); } .hero-manifesto { font-family: var(--display); font-weight: 200; font-size: clamp(24px, 4.4vh, 52px); letter-spacing: .04em; color: var(--white); min-height: 1.4em; text-align: center; } .hero-manifesto .m-orange { color: var(--orange); } .hero-manifesto .m-bold { font-weight: 700; letter-spacing: .02em; } .hero-manifesto .m-orange { color: var(--orange); } .hero-manifesto .m-bold { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .hero-manifesto .caret { display: inline-block; width: 3px; height: 1.02em; background: var(--orange); vertical-align: -0.14em; margin-left: 6px; animation: blink .9s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-sub { font-family: var(--ui); font-weight: 500; font-size: clamp(9px, 1.25vh, 13px); letter-spacing: .4em; color: rgba(255,255,255,.6); text-align: center; padding: 0 20px; } .hero-hint { position: absolute; bottom: 2.2vh; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 500; font-size: 10px; letter-spacing: .42em; color: rgba(255,255,255,.55); opacity: calc(1 - var(--hpA, 0) * 3); } .hint-bar { width: 1px; height: 48px; background: linear-gradient(var(--orange), transparent); animation: hintDrop 1.6s ease-in-out infinite; transform-origin: top; } @keyframes hintDrop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } } /* ============ KINETIC ============ */ /* transparent: the wave-fall glows through from behind */ .kinetic { height: 520vh; position: relative; background: transparent; } .kinetic-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; perspective: 900px; } .kinetic-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; transform-style: preserve-3d; } /* Africa — faint true outline behind the word; sound ripples radiate outward from its boundaries and the whole map keeps enlarging with the scroll. */ .kinetic-africa { position: absolute; left: 50%; top: 50%; height: 78vh; width: auto; aspect-ratio: 140 / 144; transform: translate(-50%, -50%) scale(calc(.72 + var(--kp, 0) * 1.05)); opacity: 0; transition: opacity .7s ease; pointer-events: none; } .kinetic-africa.show { opacity: 1; } .ka-outline { fill: rgba(255,139,0,.03); stroke: rgba(255,139,0,.34); stroke-width: .8; stroke-linejoin: round; } .ka-echo { fill: none; stroke-linejoin: round; stroke: rgba(255,139,0,.3); stroke-width: .5; transform-box: fill-box; transform-origin: center; animation: kaEcho 3.6s cubic-bezier(.2,.6,.4,1) infinite; opacity: 0; } .ka-echo.e2 { animation-delay: 1.2s; stroke: rgba(255,255,255,.24); } .ka-echo.e3 { animation-delay: 2.4s; } @keyframes kaEcho { 0% { transform: scale(1); opacity: 0; } 10% { opacity: .8; } 100% { transform: scale(1.34); opacity: 0; } } .kinetic-word { font-family: var(--display); font-weight: 700; color: var(--white); text-transform: uppercase; font-size: 100px; line-height: 1; letter-spacing: .01em; white-space: nowrap; will-change: transform, opacity, filter; } .kinetic-word.accent { color: var(--orange); text-shadow: 0 0 calc(30px + var(--intensity) * 50px) rgba(255,139,0,.35); } .kinetic-word.slam { animation: slam .6s cubic-bezier(.16,1,.3,1) both; } @keyframes slam { 0% { transform: translateZ(760px) rotateX(18deg); opacity: 0; filter: blur(16px); } 55% { transform: translateZ(-30px) rotateX(-2deg); opacity: 1; filter: blur(0); } 74% { transform: translateZ(14px) rotateX(1deg); } 100% { transform: translateZ(0) rotateX(0); } } .kinetic-sticky.shake { animation: shake .42s linear both; } @keyframes shake { 0%,100% { transform: translate(0,0); } 18% { transform: translate(-15px,9px); } 38% { transform: translate(12px,-8px); } 58% { transform: translate(-8px,-5px); } 78% { transform: translate(6px,4px); } } .kinetic-echo { position: absolute; font-family: var(--display); font-weight: 700; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.13); font-size: 100px; line-height: 1; pointer-events: none; } .kinetic-echo.out { animation: echoOut 1s ease-out both; } @keyframes echoOut { from { transform: scale(1); opacity: 1; } to { transform: scale(1.55); opacity: 0; } } .kinetic-count, .kinetic-side { position: absolute; font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .4em; color: rgba(255,255,255,.4); } .kinetic-count { top: 11vh; left: 34px; } .kinetic-side { bottom: 11vh; right: 34px; } /* ============ THE GROUP — brand tiles ============ */ .brands { position: relative; overflow: hidden; padding-bottom: 14vh; } .brands-shade { position: absolute; inset: 0; background: linear-gradient(rgba(5,5,5,.92), rgba(5,5,5,.55) 40%, rgba(5,5,5,.95)); } .brands-inner { position: relative; z-index: 2; padding: 16vh 6vw 6vh; display: grid; grid-template-columns: auto 1fr auto; gap: 4vw; align-items: end; } .brand-tiles { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 2vh 6vw 4vh; perspective: 1600px; } .brand-tile { position: relative; display: flex; flex-direction: column; gap: 2.4vh; padding: clamp(28px, 4vw, 64px); background: linear-gradient(160deg, rgba(18,18,18,.92), rgba(8,8,8,.94)); border: 1px solid rgba(255,139,0,.28); transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, border-color .3s, box-shadow .3s; overflow: hidden; } .brand-tile:hover { border-color: var(--orange); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,139,0,.12); } .bt-glow { position: absolute; inset: -40%; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,139,0,.14), transparent 42%); pointer-events: none; transition: opacity .3s; opacity: 0; } .brand-tile:hover .bt-glow { opacity: 1; } .bt-logo { position: absolute; top: clamp(22px, 3vw, 48px); right: clamp(22px, 3vw, 48px); height: clamp(74px, 8.5vw, 150px); width: auto; transform: translateZ(70px); filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)); } .bt-kicker { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .4em; color: var(--orange); transform: translateZ(30px); } .bt-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 5.4vw, 96px); line-height: .92; color: var(--white); transform: translateZ(60px); } .bt-desc { font-size: 16px; line-height: 1.6; color: var(--mist); max-width: 40ch; transform: translateZ(35px); } .bt-cta { margin-top: auto; font-family: var(--ui); font-weight: 700; font-size: 11.5px; letter-spacing: .3em; color: var(--orange); transform: translateZ(45px); border-bottom: 1px solid rgba(255,139,0,.4); padding-bottom: 6px; width: fit-content; transition: letter-spacing .3s; } .brand-tile:hover .bt-cta { letter-spacing: .38em; } /* ============ SERVICES ============ */ .services { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6vw; padding: 16vh 6vw; background: rgba(11,11,11,.55); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); position: relative; z-index: 3; } .svc-stick { position: sticky; top: 14vh; } .svc-blurb { margin-top: 4vh; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; max-width: 42ch; color: var(--mist); } .svc-cert { display: inline-block; margin-top: 4vh; font-family: var(--ui); font-weight: 500; font-size: 10.5px; letter-spacing: .3em; color: rgba(255,255,255,.6); border: 1px solid rgba(255,139,0,.35); padding: 10px 14px; } .svc-item { display: grid; grid-template-columns: 70px 1fr 60px; gap: 2vw; align-items: center; padding: 4.6vh 0; border-top: 1px solid rgba(255,255,255,.14); } .svc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); } .svc-num { font-family: var(--display); font-weight: 100; font-size: 26px; color: var(--orange); } .svc-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.7vw, 46px); text-transform: uppercase; color: var(--white); letter-spacing: .01em; transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s; } .svc-body p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--mist); max-width: 58ch; } .svc-arrow { font-size: 32px; color: var(--orange); opacity: 0; transform: translateX(-14px); transition: all .35s cubic-bezier(.16,1,.3,1); } .svc-item:hover .svc-arrow { opacity: 1; transform: translateX(0); } .svc-item:hover h3 { transform: translateX(14px); color: var(--orange); } /* ============ WORK — dissolve gallery ============ */ .work { padding: 16vh 6vw 6vh; background: transparent; position: relative; z-index: 3; } .section-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4vw; align-items: end; } .workshow { height: 1180vh; position: relative; } .ws-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; } .ws-under { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; mix-blend-mode: screen; filter: saturate(.9); } .ws-stack { position: absolute; inset: 0; } .ws-item { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; } .ws-item.active { opacity: .92; } .ws-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .ws-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, rgba(0,0,0,.86)); } .ws-meta { position: absolute; left: 6vw; right: 6vw; bottom: 9vh; z-index: 3; } .ws-count { font-family: var(--ui); font-weight: 500; font-size: 12px; letter-spacing: .4em; color: var(--orange); } .ws-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(38px, 7vw, 120px); line-height: .94; color: var(--white); margin-top: 12px; text-shadow: 0 10px 50px rgba(0,0,0,.8); } .ws-sub { margin-top: 12px; font-family: var(--ui); font-weight: 500; font-size: clamp(10px, 1.2vw, 14px); letter-spacing: .3em; color: var(--mist); } .ws-play-hint { display: inline-block; margin-top: 2.4vh; font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .32em; color: var(--orange); border: 1px solid rgba(255,139,0,.4); padding: 9px 14px; animation: playHint 2.6s ease-in-out infinite; } @keyframes playHint { 0%,100% { box-shadow: 0 0 0 rgba(255,139,0,0); } 50% { box-shadow: 0 0 22px rgba(255,139,0,.35); } } /* the side tab into the full audio-post playlist */ .ws-side-btn { position: absolute; right: 0; top: 50%; z-index: 5; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; padding: 22px 12px; background: rgba(8,8,8,.86); border: 1px solid rgba(255,139,0,.45); border-right: 0; color: var(--white); font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .34em; backdrop-filter: blur(6px); transition: background .3s, padding .3s, border-color .3s, box-shadow .3s; } .ws-side-btn i { font-style: normal; color: var(--orange); font-size: 13px; } .ws-side-btn:hover { background: rgba(20,12,2,.95); border-color: var(--orange); padding-right: 20px; box-shadow: 0 0 34px rgba(255,139,0,.3); } /* the whole showcase is clickable */ .ws-sticky { cursor: pointer; } /* ============ PEOPLE + TEAM ============ */ .people { position: relative; overflow: hidden; padding-bottom: 14vh; filter: blur(calc(var(--morph, 0) * 6px)) brightness(calc(1 - var(--morph, 0) * .35)); } .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .people-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 55%, rgba(5,5,5,.3) 100%), linear-gradient(rgba(5,5,5,.6), rgba(5,5,5,.35) 30%, rgba(5,5,5,.92) 78%, #050505 100%); } .people-inner { position: relative; z-index: 2; padding: 16vh 6vw 6vh; max-width: 1000px; } .people-line { margin-top: 4vh; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.7; color: rgba(255,255,255,.9); max-width: 52ch; } .team-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; padding: 4vh 6vw 6vh; perspective: 1400px; } .tm-card { position: relative; background: rgba(10,10,10,.82); border: 1px solid rgba(255,255,255,.1); transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, border-color .3s; backdrop-filter: blur(4px); } .tm-card:hover { border-color: rgba(255,139,0,.6); } .tm-photo { aspect-ratio: 3 / 3.4; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #101010, #060606); } .tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.06) brightness(.86); transition: filter .45s ease, transform .6s cubic-bezier(.16,1,.3,1); } .tm-card:hover .tm-photo img { filter: none; transform: scale(1.045); } .tm-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,139,0,.16) 46%, transparent 62%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; } .tm-card:hover .tm-photo::after { transform: translateX(120%); } .tm-init { font-family: var(--display); font-weight: 100; font-size: 64px; color: rgba(255,139,0,.5); letter-spacing: .06em; } .tm-slot .tm-photo { background: repeating-linear-gradient(135deg, #0c0c0c 0 14px, #090909 14px 28px); } .tm-meta { padding: 16px 16px 18px; } .tm-meta h3 { font-family: var(--ui); font-weight: 700; font-size: 14.5px; letter-spacing: .1em; color: var(--white); } .tm-slot .tm-meta h3 { color: rgba(255,255,255,.55); } .tm-meta p { margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.55); letter-spacing: .04em; } .tm-idx { position: absolute; top: 10px; right: 12px; font-family: var(--display); font-weight: 100; font-size: 20px; color: rgba(255,139,0,.75); } .roles-marquee { position: relative; z-index: 2; overflow: hidden; margin-top: 3vh; } .roles-track { display: flex; white-space: nowrap; animation: marq 36s linear infinite; } .roles-track span { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.3vw, 36px); letter-spacing: .1em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.42); padding-right: 12px; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============ CLIENTS — premium wall, morphs in from the people ============ */ .clients { position: relative; overflow: hidden; background: #000; padding-bottom: 12vh; z-index: 3; } /* the rendered studio breathes behind the brand wall */ .clients-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; animation: clientsKen 26s ease-in-out infinite alternate; } @keyframes clientsKen { from { transform: scale(1); } to { transform: scale(1.12); } } .clients-veil { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.55) 40%, rgba(0,0,0,.92)); } .clients-inner { position: relative; z-index: 2; padding: 14vh 6vw 4vh; } /* moving logo gallery: two counter-drifting rows of dark plaques */ .client-wall { position: relative; z-index: 2; display: grid; gap: 2.6vh; padding: 4vh 0; overflow: hidden; transform: scale(calc(.94 + var(--morph, 0) * .06)); opacity: calc(.25 + var(--morph, 0) * .75); filter: blur(calc((1 - var(--morph, 0)) * 6px)); } /* the warm beam that walks the wall */ .beam { position: absolute; top: -10%; bottom: -10%; width: 26%; background: linear-gradient(100deg, rgba(255,139,0,0) 0%, rgba(255,139,0,.1) 50%, rgba(255,139,0,0) 100%); animation: beamWalk 9s ease-in-out infinite; pointer-events: none; z-index: 3; } @keyframes beamWalk { 0% { left: -30%; } 100% { left: 110%; } } .cl-track { display: flex; width: max-content; } .cl-row-a { animation: clDrift 46s linear infinite; } .cl-row-b { animation: clDriftR 52s linear infinite; } .cl-track:hover { animation-play-state: paused; } @keyframes clDrift { to { transform: translateX(-50%); } } @keyframes clDriftR { from { transform: translateX(-50%); } to { transform: translateX(0); } } .cl-set { display: flex; gap: 1.4vw; padding-right: 1.4vw; } .cl-card { position: relative; background: #0e0e0e; border-radius: 6px; width: clamp(150px, 15vw, 240px); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,.08); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s; } .cl-card img { max-width: 74%; max-height: 64%; object-fit: contain; /* pre-processed white marks on the dark plaque */ opacity: .88; transition: filter .35s ease, opacity .35s ease; } .cl-card:hover { transform: translateY(-8px) scale(1.06); background: #161616; border-color: var(--orange); box-shadow: 0 18px 44px rgba(0,0,0,.8), 0 0 34px rgba(255,139,0,.22); z-index: 4; } .cl-card:hover img { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,139,0,.55)); } .cl-card::after { /* orange edge that lights as the beam passes */ content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; border: 1.5px solid rgba(255,139,0,0); animation: edgeGlow 9s ease-in-out infinite; } .cl-card:nth-child(6n+2)::after { animation-delay: .55s; } .cl-card:nth-child(6n+3)::after { animation-delay: 1.5s; } .cl-card:nth-child(6n+4)::after { animation-delay: 2.9s; } .cl-card:nth-child(6n+5)::after { animation-delay: 4.3s; } .cl-card:nth-child(6n+6)::after { animation-delay: 5.7s; } .cl-card:nth-child(6n+7)::after { animation-delay: 7.1s; } @keyframes edgeGlow { 0%, 100% { border-color: rgba(255,139,0,0); box-shadow: 0 0 0 rgba(255,139,0,0); } 12% { border-color: rgba(255,139,0,.9); box-shadow: 0 0 26px rgba(255,139,0,.45), inset 0 0 18px rgba(255,139,0,.15); } 26% { border-color: rgba(255,139,0,0); box-shadow: 0 0 0 rgba(255,139,0,0); } } /* the names ride beneath the logos */ .cl-names { overflow: hidden; margin-top: 1.2vh; } .cl-names-track { display: flex; white-space: nowrap; animation: clDriftR 70s linear infinite; } .cl-names-track span { font-family: var(--display); font-weight: 700; font-size: clamp(15px, 1.6vw, 24px); letter-spacing: .18em; line-height: 1.4; color: transparent; -webkit-text-stroke: 1px rgba(255,139,0,.5); padding-right: 14px; } /* ============ AWARDS — laurels floating in 3D ============ */ .awards { position: relative; background: transparent; overflow: hidden; padding-bottom: 14vh; z-index: 3; border-top: 1px solid rgba(255,255,255,.07); } .awards-inner { position: relative; z-index: 2; padding: 14vh 6vw 5vh; display: grid; grid-template-columns: auto 1fr auto; gap: 4vw; align-items: end; } .awards-stage { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2vw; padding: 3vh 6vw 2vh; perspective: 1500px; } .aw-card { --awd: 0; /* scroll-driven depth 0..1, set by JS per card */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: clamp(26px, 3vw, 52px) clamp(20px, 2.4vw, 40px); background: linear-gradient(165deg, rgba(16,16,16,.9), rgba(7,7,7,.95)); border: 1px solid rgba(255,255,255,.09); transform-style: preserve-3d; transform: rotateX(calc((1 - var(--awd)) * 38deg)) translateZ(calc((1 - var(--awd)) * -260px)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); opacity: calc(.12 + var(--awd) * .88); transition: border-color .35s, box-shadow .35s; animation: awFloat 6s ease-in-out infinite; } .aw-card:nth-child(2) { animation-delay: -1s; } .aw-card:nth-child(3) { animation-delay: -2s; } .aw-card:nth-child(4) { animation-delay: -3s; } .aw-card:nth-child(5) { animation-delay: -4s; } .aw-card:nth-child(6) { animation-delay: -5s; } @keyframes awFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -10px; } } .aw-card:hover { border-color: var(--orange); box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 46px rgba(255,139,0,.18); } .aw-card img { width: min(78%, 300px); height: auto; transform: translateZ(60px); filter: drop-shadow(0 12px 26px rgba(0,0,0,.8)); transition: filter .4s ease, transform .4s cubic-bezier(.16,1,.3,1); } .aw-card:hover img { transform: translateZ(90px) scale(1.05); filter: drop-shadow(0 16px 30px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,139,0,.5)); } .aw-card figcaption { font-family: var(--ui); font-weight: 500; font-size: 10px; letter-spacing: .26em; line-height: 1.7; color: rgba(255,255,255,.55); text-align: center; max-width: 30ch; transform: translateZ(30px); transition: color .35s; } .aw-card:hover figcaption { color: var(--orange); } /* the beam of light that sweeps the laurels */ .awards-stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3; pointer-events: none; background: linear-gradient(100deg, rgba(255,139,0,0), rgba(255,139,0,.06) 50%, rgba(255,139,0,0)); animation: beamWalk 11s ease-in-out infinite; } /* ============ YOUTUBE PLAYLIST POPUP ============ */ .yt-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .yt-modal[hidden] { display: none; } .yt-backdrop { position: absolute; inset: 0; background: rgba(2,2,2,.88); backdrop-filter: blur(10px); animation: ytFade .3s ease both; } @keyframes ytFade { from { opacity: 0; } to { opacity: 1; } } .yt-shell { position: relative; width: min(1080px, 94vw); background: #070707; border: 1px solid rgba(255,139,0,.4); box-shadow: 0 50px 140px rgba(0,0,0,.9), 0 0 80px rgba(255,139,0,.12); animation: ytPop .45s cubic-bezier(.16,1,.3,1) both; } @keyframes ytPop { from { transform: translateY(46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } .yt-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 20px; padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1); } .yt-kicker { grid-column: 1; font-family: var(--ui); font-weight: 500; font-size: 9.5px; letter-spacing: .34em; color: var(--orange); } .yt-title { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.4vw, 30px); text-transform: uppercase; color: var(--white); line-height: 1; } .yt-close { grid-column: 2; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; background: none; border: 1px solid rgba(255,255,255,.3); color: var(--white); font-size: 15px; cursor: pointer; transition: border-color .25s, color .25s, transform .25s; } .yt-close:hover { border-color: var(--orange); color: var(--orange); transform: rotate(90deg); } .yt-frame { position: relative; aspect-ratio: 16 / 9; background: #000; } .yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .yt-fallback { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; background: rgba(4,4,4,.94); } .yt-fallback[hidden] { display: none; } .yt-fallback p { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .34em; color: rgba(255,255,255,.6); } .yt-fallback a { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: var(--orange); border: 1px solid rgba(255,139,0,.5); padding: 14px 22px; transition: background .25s, color .25s; } .yt-fallback a:hover { background: var(--orange); color: #000; } .yt-foot { padding: 14px 22px; display: flex; justify-content: flex-end; } .yt-foot a { font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.6); transition: color .25s; } .yt-foot a:hover { color: var(--orange); } body.yt-open { overflow: hidden; } /* ============ TEAM BIOS POPUP ============ */ .tm-card[data-bio] { cursor: pointer; } .tm-more { display: block; margin-top: 9px; font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .28em; color: rgba(255,139,0,0); transition: color .3s; } .tm-card[data-bio]:hover .tm-more, .tm-card[data-bio]:focus-visible .tm-more { color: var(--orange); } .bio-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .bio-modal[hidden] { display: none; } .bio-backdrop { position: absolute; inset: 0; background: rgba(2,2,2,.88); backdrop-filter: blur(10px); animation: ytFade .3s ease both; } .bio-shell { position: relative; width: min(980px, 94vw); max-height: 90vh; display: flex; flex-direction: column; background: #070707; border: 1px solid rgba(255,139,0,.4); box-shadow: 0 50px 140px rgba(0,0,0,.9), 0 0 80px rgba(255,139,0,.12); animation: ytPop .45s cubic-bezier(.16,1,.3,1) both; } .bio-head { flex: none; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 20px; padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1); } .bio-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,139,0,.5) #0a0a0a; } .bio-scroll::-webkit-scrollbar { width: 6px; } .bio-scroll::-webkit-scrollbar-track { background: #0a0a0a; } .bio-scroll::-webkit-scrollbar-thumb { background: rgba(255,139,0,.5); } .bio-person { display: grid; grid-template-columns: 240px 1fr; gap: 26px; padding: 30px 26px; border-bottom: 1px solid rgba(255,255,255,.08); } .bio-person:last-child { border-bottom: 0; } .bio-photo { align-self: start; position: sticky; top: 0; } .bio-photo img { width: 100%; aspect-ratio: 3 / 3.4; object-fit: cover; object-position: 50% 18%; border: 1px solid rgba(255,255,255,.12); filter: grayscale(.4) contrast(1.05); } .bio-body { position: relative; min-width: 0; } .bio-num { position: absolute; top: -6px; right: 0; font-family: var(--display); font-weight: 100; font-size: 34px; color: rgba(255,139,0,.55); } .bio-body h4 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .04em; color: var(--white); line-height: 1; } .bio-role { margin-top: 7px; font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .3em; color: var(--orange); } .bio-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 16px 0 4px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); } .bio-facts b { display: block; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--white); } .bio-facts span { display: block; margin-top: 3px; font-family: var(--ui); font-weight: 500; font-size: 8.5px; letter-spacing: .26em; color: rgba(255,255,255,.45); } .bio-body > p { margin-top: 13px; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.72); } .bio-body > p em { color: rgba(255,255,255,.9); font-style: italic; } .bio-skills { margin-top: 18px; display: grid; gap: 10px; } .bio-skill { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 14px; } .bio-skill > span { font-family: var(--ui); font-weight: 700; font-size: 9.5px; letter-spacing: .22em; color: rgba(255,255,255,.6); } .bio-skill > b { font-family: var(--display); font-weight: 200; font-size: 14px; color: var(--orange); } .bs-bar { height: 2px; background: rgba(255,255,255,.12); overflow: hidden; } .bs-bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, rgba(255,139,0,.35), var(--orange)); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.16,1,.3,1) .15s; } .bio-modal:not([hidden]) .bs-bar i { transform: scaleX(1); } .bio-block { margin-top: 16px; } .bio-block h5 { font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .3em; color: var(--orange); margin-bottom: 5px; } .bio-block p { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.62); letter-spacing: .02em; } .bio-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); } .bio-links a { font-family: var(--ui); font-weight: 700; font-size: 9.5px; letter-spacing: .22em; color: rgba(255,255,255,.55); transition: color .25s; } .bio-links a:hover { color: var(--orange); } .bio-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 22px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--ui); font-weight: 500; font-size: 9px; letter-spacing: .26em; color: rgba(255,255,255,.4); } .bio-foot a { font-weight: 700; color: rgba(255,255,255,.6); transition: color .25s; } .bio-foot a:hover { color: var(--orange); } body.bio-open { overflow: hidden; } /* ============ NEWS & UPDATES ============ */ .news { position: relative; z-index: 3; padding: 14vh 6vw 10vh; } .news-inner { max-width: 900px; } .news-groups { margin-top: 7vh; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6vh 5vw; } .ng-title { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .34em; color: var(--orange); padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,139,0,.3); } .news-item { display: grid; grid-template-columns: 74px 1fr auto; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: border-color .3s, transform .3s; } .news-item:hover { border-color: rgba(255,139,0,.5); transform: translateX(6px); } .ni-date { font-family: var(--ui); font-weight: 500; font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.4); } .ni-title { font-family: var(--ui); font-weight: 500; font-size: 13.5px; letter-spacing: .03em; color: rgba(255,255,255,.78); transition: color .3s; } .news-item:hover .ni-title { color: var(--white); } .news-item i { font-style: normal; font-size: 11px; color: rgba(255,139,0,0); transition: color .3s; } .news-item:hover i { color: var(--orange); } .news-all { display: inline-block; margin-top: 7vh; font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .3em; color: var(--orange); border: 1px solid rgba(255,139,0,.5); padding: 15px 24px; transition: background .25s, color .25s; } .news-all:hover { background: var(--orange); color: #000; } /* ============ FOOTER ============ */ .footer { position: relative; background: rgba(0,0,0,.3); padding: 16vh 6vw 6vh; overflow: hidden; z-index: 3; } .foot-kicker { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .42em; color: rgba(255,255,255,.5); margin-bottom: 5vh; } .foot-title { line-height: .95; } /* the headline burns: enters WHITE, warms through amber to ember as the footer scrolls in (JS drives background-position from scroll depth, plus a slow residual drift once in view) + per-letter cursor glow */ .foot-title a { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 6.4vw, 110px); letter-spacing: .005em; display: inline-block; background: linear-gradient(105deg, #ffffff 0%, #ffffff 24%, #ffc27a 46%, var(--orange) 64%, #b35f00 82%, #ffc27a 100%); background-size: 300% 100%; background-position: 0% 0; /* pure white until the scroll warms it */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .foot-title .accent-text { color: transparent; -webkit-text-fill-color: transparent; } /* the first line enters amber and QUICKLY whitens as the footer scrolls in (--ftw driven by scroll depth), then stays white */ .foot-title .ft-white { color: #fff; -webkit-text-fill-color: color-mix(in srgb, #ffc27a calc((1 - var(--ftw, 0)) * 100%), #ffffff calc(var(--ftw, 0) * 100%)); } .foot-title .fl { --g: 0; text-shadow: 0 0 calc(var(--g) * 30px) rgba(255,139,0, calc(var(--g) * 0.9)), 0 0 calc(var(--g) * 9px) rgba(255,205,130, calc(var(--g) * 0.6)); } @media (prefers-reduced-motion: reduce) { .foot-title a { animation: none; } } .accent-text { color: var(--orange); font-style: normal; } .reg { font-size: .32em; vertical-align: super; color: var(--orange); letter-spacing: 0; } .foot-cta-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6vw; margin: 7vh 0 10vh; padding-top: 5vh; border-top: 1px solid rgba(255,255,255,.14); } .foot-mails { display: flex; flex-direction: column; gap: 2.4vh; } .foot-mail { font-family: var(--display); font-weight: 200; font-size: clamp(20px, 2.8vw, 40px); color: var(--orange); border-bottom: 1px solid rgba(255,139,0,.4); padding-bottom: 6px; width: fit-content; transition: border-color .3s; } .foot-mail-b { font-size: clamp(17px, 2.1vw, 30px); color: var(--white); border-color: rgba(255,255,255,.3); } .foot-mail:hover { border-color: var(--orange); } /* --- the dial: starts at −∞ dB (dark, unlit); turning up glows orange and builds toward the 0 dB launch of XP Africa (--kg 0→1) --- */ /* knob on top, instructions BELOW; fixed width so changing readout text never shifts the button */ .knob-unit { position: relative; width: 240px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; perspective: 500px; text-align: center; } /* the energy bloom behind the dial, growing as it is turned up */ .knob-unit::before { content: ''; position: absolute; left: 50%; top: 55px; width: 320px; height: 320px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(255,139,0, calc(var(--kg) * .22)) 0%, rgba(255,139,0,0) 62%); opacity: calc(0.2 + var(--kg) * 0.8); } .knob { width: 110px; height: 110px; border-radius: 50%; position: relative; touch-action: none; /* the orange halo intensifies as you turn up */ box-shadow: 0 0 calc(var(--kg) * 66px) rgba(255,139,0, calc(var(--kg) * 0.5)); transition: box-shadow .15s ease; } .knob::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #2a2a2a 0deg 4deg, #0c0c0c 4deg 8deg); box-shadow: 0 18px 40px rgba(0,0,0,.9), inset 0 2px 3px rgba(255,255,255,.14), inset 0 -4px 8px rgba(0,0,0,.8); } .knob::after { content: ''; position: absolute; inset: -22px; border-radius: 50%; /* the swept arc starts dim and burns brighter orange as it climbs */ background: conic-gradient(from -120deg, rgba(255,139,0, calc(.32 + var(--kg) * .58)) 0deg, rgba(255,139,0, calc(.32 + var(--kg) * .58)) var(--sweep, 0deg), rgba(255,255,255,.12) var(--sweep, 0deg), rgba(255,255,255,.12) 240deg, transparent 240deg); filter: drop-shadow(0 0 calc(var(--kg) * 16px) rgba(255,139,0, calc(var(--kg) * .8))); -webkit-mask: radial-gradient(circle, transparent 67px, #000 68px, #000 71px, transparent 72px); mask: radial-gradient(circle, transparent 67px, #000 68px, #000 71px, transparent 72px); } .knob-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* darker at rest, warming with a faint orange core as it is turned up */ background: radial-gradient(circle at 50% 60%, rgba(255,139,0, calc(var(--kg) * .28)) 0%, rgba(255,139,0,0) 60%), radial-gradient(circle at 34% 28%, #262626 0%, #101010 42%, #030303 100%); box-shadow: inset 0 3px 5px rgba(255,255,255, calc(.16 + var(--kg) * .18)), inset 0 -6px 14px rgba(0,0,0,.9), inset 0 0 calc(var(--kg) * 26px) rgba(255,139,0, calc(var(--kg) * .3)), 0 10px 26px rgba(0,0,0,.85); transform: rotate(var(--rot, -130deg)) translateZ(0); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .knob-logo { width: 62%; height: auto; pointer-events: none; filter: drop-shadow(0 0 calc(6px + var(--kg) * 26px) rgba(255,139,0, calc(.3 + var(--kg) * .6))); transition: filter .18s ease; } .knob:hover .knob-face { transform: rotate(var(--rot, -20deg)) translateZ(30px) scale(1.05); } .knob.pop .knob-face { transform: rotate(var(--rot, -20deg)) translateZ(70px) scale(1.18); box-shadow: inset 0 3px 5px rgba(255,255,255,.3), 0 26px 60px rgba(0,0,0,.9), 0 0 60px rgba(255,139,0,.5); } .knob-read { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; } /* the readout wakes from dim grey to full white as you turn up */ .knob-read b { font-family: var(--display); font-weight: 200; font-size: 26px; color: rgba(255,255,255, calc(.5 + var(--kg) * .5)); letter-spacing: .06em; text-align: center; transition: color .18s ease; } .knob-read span { display: block; min-height: 1.3em; white-space: nowrap; font-family: var(--ui); font-weight: 500; font-size: 10px; letter-spacing: .34em; color: rgba(255,139,0, calc(.55 + var(--kg) * .45)); transition: color .18s ease; } .foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; padding: 6vh 0; border-top: 1px solid rgba(255,255,255,.14); } .foot-col h4 { font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .36em; color: rgba(255,255,255,.45); margin-bottom: 16px; } .foot-col p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.85); } .socials { display: flex; flex-direction: column; gap: 5px; } .socials a { width: fit-content; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .socials a:hover { color: var(--orange); border-color: var(--orange); } .foot-base { display: flex; justify-content: space-between; gap: 2vw; flex-wrap: wrap; padding-top: 3.5vh; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--ui); font-weight: 500; font-size: 9.5px; letter-spacing: .3em; color: rgba(255,255,255,.35); } /* ============ SUBPAGES ============ */ .page-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; padding: 18vh 6vw 6vh; overflow: hidden; } .page-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; } .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(5,5,5,.5), #050505); } .page-hero > div { position: relative; z-index: 2; } .page-body { padding: 8vh 6vw 12vh; max-width: 880px; } .artc-meta { margin-top: 14px; font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .3em; color: rgba(255,255,255,.55); } .page-body p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; color: var(--mist); margin-bottom: 3vh; } .page-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 34px); margin: 5vh 0 2vh; color: var(--white); text-transform: uppercase; } .page-body ul { list-style: none; margin-bottom: 3vh; } .page-body li { padding: 12px 0 12px 28px; position: relative; color: var(--mist); border-bottom: 1px solid rgba(255,255,255,.08); } .page-body li::before { content: '—'; position: absolute; left: 0; color: var(--orange); } /* profile page: right-side motion backdrop (Africa, day → golden hour). Borderless, full-bleed to the right edge, tucked UNDER the text column; fades in from the Vision section and keeps breathing with the scroll. */ .pf-rail { position: fixed; top: 0; right: 0; z-index: 0; width: 62vw; height: 100vh; height: 100svh; border: 0; overflow: hidden; background: #050505; opacity: 0; transition: opacity .5s linear; pointer-events: none; } .pf-rail::before { /* left edge dissolves into the text column: a few soft irregular blobs at different heights (not one ruled line down the screen), then blurred so the boundary itself is hazy rather than crisp */ content: ''; position: absolute; inset: -10% -20% -10% -4%; z-index: 1; background: radial-gradient(22% 44% at 6% 10%, #050505 58%, transparent 100%), radial-gradient(25% 48% at 4% 34%, #050505 60%, transparent 100%), radial-gradient(20% 42% at 7% 58%, #050505 56%, transparent 100%), radial-gradient(26% 50% at 5% 82%, #050505 61%, transparent 100%), linear-gradient(90deg, #050505 0%, rgba(5,5,5,.35) 5%, rgba(5,5,5,0) 13%); filter: blur(14px); } .pf-rail video, .pf-rail img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.15) saturate(.72) brightness(1.04); /* clearer, less orange */ } /* news pages: the rail's video is sometimes a live YouTube embed rather than a self-hosted clip. Oversize + centre it so the 16:9 player fills the tall rail without letterboxing (the rail's own overflow:hidden crops the excess). */ .pf-rail iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; width: 100vw; height: 56.25vw; /* 16:9 sized off width */ min-width: 177.78vh; min-height: 100vh; /* 16:9 sized off height, whichever covers more */ pointer-events: none; filter: contrast(1.15) saturate(.72) brightness(1.04); } .pf-rail-cap { position: absolute; right: 18px; bottom: 14px; z-index: 2; font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .3em; color: rgba(255,255,255,.75); text-shadow: 0 2px 10px rgba(0,0,0,.8); } .page-body { position: relative; z-index: 1; } @media (max-width: 1024px) { .pf-rail { display: none; } } /* news article pages: sticky bottom-right button(s) that pop the ambient rail video open into the full yt-modal player for a clear, controllable view. One button per distinct video; stacked with even spacing when there's more than one (e.g. a multi-day tutorial series). */ .artc-yt-stack { position: fixed; right: 22px; bottom: 96px; z-index: 90; /* lifted clear of the footer row */ display: flex; flex-direction: column-reverse; gap: 12px; align-items: flex-end; } .artc-yt-btn { display: flex; align-items: center; gap: 10px; background: rgba(5,5,5,.82); border: 1px solid rgba(255,139,0,.5); backdrop-filter: blur(6px); padding: 12px 18px 12px 14px; cursor: pointer; font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .26em; color: var(--white); transition: background .25s, border-color .25s, transform .25s; } .artc-yt-btn i { font-style: normal; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #000; font-size: 9px; flex: none; } .artc-yt-btn:hover { background: var(--orange); border-color: var(--orange); color: #000; transform: translateY(-2px); } .artc-yt-btn:hover i { background: #000; color: var(--orange); } @media (max-width: 620px) { .artc-yt-stack { right: 14px; bottom: 84px; gap: 8px; } .artc-yt-btn { padding: 10px 14px 10px 11px; font-size: 9px; } } /* profile page: statements, values, process, timeline */ .pf-statement { font-family: var(--display); font-weight: 200; font-size: clamp(20px, 2.4vw, 32px) !important; line-height: 1.4 !important; color: var(--white) !important; border-left: 3px solid var(--orange); padding-left: 22px; } .pf-values { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 3vh; } .pf-value { padding: 20px 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(16,16,16,.9), rgba(8,8,8,.95)); display: flex; flex-direction: column; gap: 8px; transition: border-color .3s; } .pf-value:hover { border-color: rgba(255,139,0,.6); } .pf-value b { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .3em; color: var(--orange); } .pf-value span { font-size: 14.5px; line-height: 1.55; color: var(--mist); } .pf-process { list-style: none; counter-reset: pf; margin-bottom: 3vh; } .pf-process li { counter-increment: pf; position: relative; padding: 16px 0 16px 64px; color: var(--mist); line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,.08); } .pf-process li::before { content: counter(pf, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--display); font-weight: 100; font-size: 30px; color: var(--orange); } .pf-process b { color: var(--white); font-family: var(--ui); font-weight: 700; letter-spacing: .12em; font-size: 13.5px; } .pf-timeline { list-style: none; margin-bottom: 3vh; border-left: 1px solid rgba(255,139,0,.35); } .pf-timeline li { position: relative; padding: 10px 0 10px 92px; color: var(--mist); line-height: 1.6; border-bottom: 0 !important; } .pf-timeline li::before { content: '' !important; position: absolute; left: -4px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); } .pf-timeline b { position: absolute; left: 18px; top: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--white); letter-spacing: .02em; white-space: nowrap; } @media (max-width: 620px) { .pf-values { grid-template-columns: 1fr; } .pf-timeline li { padding-left: 78px; } } .page-cta { display: inline-block; margin-top: 4vh; padding: 16px 28px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .3em; color: #000; background: var(--orange); transition: transform .25s, box-shadow .25s; } .page-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255,139,0,.3); } /* service pages: the playlist door near the footer — a