1848 lines
53 KiB
HTML
1848 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Elle Sam | Cineasthesia & Out The Box Creative</title>
|
|
<meta name="description" content="Award-winning storyteller, filmmaker, and immersive art installation artist working at the nexus of neuroaesthetics, narrative, and human potential.">
|
|
<meta property="og:title" content="Elle Sam | Where Story Meets the Brain">
|
|
<meta property="og:description" content="Immersive narratives across film, TV, AR/VR, and interactive art installations. Integrating neuroscience, somatic practices, and West African ancestral knowledge.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://elle-o-elle.lol">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ============================================
|
|
ELLE SAM - elle-o-elle.lol
|
|
Immersive & Artistic Design
|
|
============================================ */
|
|
|
|
:root {
|
|
--deep-purple: #1a0a2e;
|
|
--rich-indigo: #2d1b4e;
|
|
--warm-gold: #d4a853;
|
|
--burnt-gold: #b8860b;
|
|
--terracotta: #c84b31;
|
|
--warm-coral: #e07a5f;
|
|
--soft-cream: #f5f0e8;
|
|
--light-lavender: #e8dff5;
|
|
--midnight: #0d0617;
|
|
--muted-sage: #8fbc8f;
|
|
--kente-red: #c41e3a;
|
|
--kente-green: #2d6a4f;
|
|
--adinkra-gold: #daa520;
|
|
|
|
--font-display: 'Cormorant Garamond', Georgia, serif;
|
|
--font-body: 'Inter', -apple-system, sans-serif;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--midnight);
|
|
color: var(--soft-cream);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--warm-gold);
|
|
color: var(--deep-purple);
|
|
}
|
|
|
|
/* ---- Navigation ---- */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: 1.5rem 3rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.4s ease;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
nav.scrolled {
|
|
mix-blend-mode: normal;
|
|
background: rgba(13, 6, 23, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
padding: 1rem 3rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.15em;
|
|
color: var(--soft-cream);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--soft-cream);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
position: relative;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.nav-links a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: var(--warm-gold);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
width: 28px;
|
|
height: 1.5px;
|
|
background: var(--soft-cream);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ---- Hero Section ---- */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-bg .gradient-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.6;
|
|
animation: float 12s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-bg .orb-1 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--rich-indigo), transparent 70%);
|
|
top: -10%;
|
|
right: -10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.hero-bg .orb-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: radial-gradient(circle, var(--terracotta), transparent 70%);
|
|
bottom: -15%;
|
|
left: -5%;
|
|
animation-delay: -4s;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.hero-bg .orb-3 {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, var(--warm-gold), transparent 70%);
|
|
top: 40%;
|
|
left: 30%;
|
|
animation-delay: -8s;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -30px) scale(1.05); }
|
|
66% { transform: translate(-20px, 20px) scale(0.95); }
|
|
}
|
|
|
|
/* Neural network canvas overlay */
|
|
.neural-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.hero-eyebrow {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.35em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 2rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards 0.3s;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(3rem, 8vw, 6.5rem);
|
|
font-weight: 300;
|
|
line-height: 1.05;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards 0.6s;
|
|
}
|
|
|
|
.hero-title em {
|
|
font-style: italic;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.1rem, 2vw, 1.5rem);
|
|
font-weight: 300;
|
|
line-height: 1.7;
|
|
color: rgba(245, 240, 232, 0.7);
|
|
max-width: 650px;
|
|
margin: 0 auto 3rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards 0.9s;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 2.5rem;
|
|
border: 1px solid rgba(212, 168, 83, 0.4);
|
|
color: var(--warm-gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
transition: all 0.4s ease;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards 1.2s;
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
background: var(--warm-gold);
|
|
color: var(--deep-purple);
|
|
border-color: var(--warm-gold);
|
|
}
|
|
|
|
.hero-cta svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hero-cta:hover svg {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
opacity: 0;
|
|
animation: fadeUp 1s ease forwards 1.5s;
|
|
}
|
|
|
|
.scroll-indicator .line {
|
|
width: 1px;
|
|
height: 60px;
|
|
background: linear-gradient(to bottom, var(--warm-gold), transparent);
|
|
margin: 0 auto;
|
|
animation: scrollPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes scrollPulse {
|
|
0%, 100% { opacity: 1; transform: scaleY(1); }
|
|
50% { opacity: 0.3; transform: scaleY(0.6); }
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ---- Section Commons ---- */
|
|
section {
|
|
position: relative;
|
|
padding: 8rem 3rem;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.35em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.2rem, 5vw, 4rem);
|
|
font-weight: 300;
|
|
line-height: 1.15;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-title em {
|
|
font-style: italic;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
/* ---- About / Philosophy ---- */
|
|
.about {
|
|
background: linear-gradient(180deg, var(--midnight), var(--deep-purple));
|
|
}
|
|
|
|
.about-grid {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-visual {
|
|
position: relative;
|
|
aspect-ratio: 3/4;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.about-visual .placeholder-art {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg,
|
|
var(--rich-indigo) 0%,
|
|
var(--terracotta) 30%,
|
|
var(--warm-gold) 60%,
|
|
var(--kente-green) 100%
|
|
);
|
|
opacity: 0.7;
|
|
position: relative;
|
|
}
|
|
|
|
.about-visual .placeholder-art::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
60deg,
|
|
transparent,
|
|
transparent 30px,
|
|
rgba(212, 168, 83, 0.08) 30px,
|
|
rgba(212, 168, 83, 0.08) 32px
|
|
),
|
|
repeating-linear-gradient(
|
|
-60deg,
|
|
transparent,
|
|
transparent 30px,
|
|
rgba(196, 30, 58, 0.06) 30px,
|
|
rgba(196, 30, 58, 0.06) 32px
|
|
);
|
|
}
|
|
|
|
.about-visual .photo-label {
|
|
position: absolute;
|
|
bottom: 1.5rem;
|
|
left: 1.5rem;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: rgba(245, 240, 232, 0.6);
|
|
}
|
|
|
|
.about-text p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.9;
|
|
color: rgba(245, 240, 232, 0.75);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.about-text p:first-of-type {
|
|
font-family: var(--font-display);
|
|
font-size: 1.4rem;
|
|
line-height: 1.7;
|
|
color: var(--soft-cream);
|
|
}
|
|
|
|
.about-disciplines {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.discipline-tag {
|
|
padding: 0.5rem 1.25rem;
|
|
border: 1px solid rgba(212, 168, 83, 0.25);
|
|
border-radius: 100px;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.1em;
|
|
color: rgba(245, 240, 232, 0.6);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.discipline-tag:hover {
|
|
border-color: var(--warm-gold);
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
/* ---- What We Do ---- */
|
|
.services {
|
|
background: var(--deep-purple);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.services-header {
|
|
max-width: 700px;
|
|
margin: 0 auto 5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.services-header p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.65);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.service-cards {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
}
|
|
|
|
.service-card {
|
|
position: relative;
|
|
padding: 3rem 2.5rem;
|
|
background: rgba(245, 240, 232, 0.03);
|
|
border: 1px solid rgba(245, 240, 232, 0.06);
|
|
border-radius: 4px;
|
|
transition: all 0.5s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--warm-gold), var(--terracotta));
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.service-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.service-card:hover {
|
|
background: rgba(245, 240, 232, 0.06);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.service-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 2rem;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
.service-card h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.service-card p {
|
|
font-size: 0.9rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.6);
|
|
}
|
|
|
|
/* ---- Approach / Process ---- */
|
|
.approach {
|
|
background: linear-gradient(180deg, var(--deep-purple), var(--midnight));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.approach-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.approach-header {
|
|
max-width: 600px;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.approach-header p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.65);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.approach-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.approach-steps::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 5%;
|
|
right: 5%;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(212, 168, 83, 0.3),
|
|
rgba(212, 168, 83, 0.3),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.approach-step {
|
|
text-align: center;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.step-number {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(212, 168, 83, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 2rem;
|
|
font-family: var(--font-display);
|
|
font-size: 1.2rem;
|
|
color: var(--warm-gold);
|
|
background: var(--deep-purple);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.approach-step h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.3rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.approach-step p {
|
|
font-size: 0.85rem;
|
|
line-height: 1.7;
|
|
color: rgba(245, 240, 232, 0.55);
|
|
}
|
|
|
|
/* ---- Entities / Cineasthesia + Out The Box ---- */
|
|
.entities {
|
|
background: var(--midnight);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.entities-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.entity-block {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5rem;
|
|
align-items: center;
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.entity-block:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.entity-block.reversed .entity-text {
|
|
order: -1;
|
|
}
|
|
|
|
.entity-visual {
|
|
position: relative;
|
|
aspect-ratio: 16/10;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.entity-visual .visual-fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cineasthesia-fill {
|
|
background: linear-gradient(135deg,
|
|
var(--midnight) 0%,
|
|
var(--rich-indigo) 40%,
|
|
var(--terracotta) 70%,
|
|
var(--warm-gold) 100%
|
|
);
|
|
position: relative;
|
|
}
|
|
|
|
.cineasthesia-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 30% 50%, rgba(212, 168, 83, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 30%, rgba(200, 75, 49, 0.2) 0%, transparent 40%);
|
|
}
|
|
|
|
.otb-fill {
|
|
background: linear-gradient(135deg,
|
|
var(--kente-green) 0%,
|
|
var(--midnight) 40%,
|
|
var(--warm-gold) 80%,
|
|
var(--kente-red) 100%
|
|
);
|
|
position: relative;
|
|
}
|
|
|
|
.otb-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(218, 165, 32, 0.05) 20px,
|
|
rgba(218, 165, 32, 0.05) 22px
|
|
);
|
|
}
|
|
|
|
.entity-text .entity-name {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
font-weight: 300;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.entity-text .entity-role {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.entity-text p {
|
|
font-size: 1rem;
|
|
line-height: 1.85;
|
|
color: rgba(245, 240, 232, 0.7);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.entity-year {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
color: rgba(245, 240, 232, 0.4);
|
|
}
|
|
|
|
/* ---- Manifesto / Pull Quote ---- */
|
|
.manifesto {
|
|
background: linear-gradient(180deg, var(--midnight), var(--deep-purple));
|
|
padding: 10rem 3rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.manifesto::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 600px;
|
|
height: 600px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(212, 168, 83, 0.06), transparent 70%);
|
|
}
|
|
|
|
.manifesto-quote {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.8rem, 4vw, 3.2rem);
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
max-width: 850px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
font-style: italic;
|
|
}
|
|
|
|
.manifesto-quote em {
|
|
color: var(--warm-gold);
|
|
font-style: normal;
|
|
}
|
|
|
|
.manifesto-attribution {
|
|
margin-top: 2.5rem;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: rgba(245, 240, 232, 0.4);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ---- Connect / Contact ---- */
|
|
.connect {
|
|
background: var(--deep-purple);
|
|
text-align: center;
|
|
padding: 8rem 3rem 6rem;
|
|
}
|
|
|
|
.connect-container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.connect p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.65);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.connect-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.connect-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 2rem;
|
|
border: 1px solid rgba(212, 168, 83, 0.3);
|
|
color: var(--soft-cream);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
transition: all 0.4s ease;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.connect-link:hover {
|
|
background: var(--warm-gold);
|
|
color: var(--deep-purple);
|
|
border-color: var(--warm-gold);
|
|
}
|
|
|
|
.connect-link.primary {
|
|
background: var(--warm-gold);
|
|
color: var(--deep-purple);
|
|
border-color: var(--warm-gold);
|
|
}
|
|
|
|
.connect-link.primary:hover {
|
|
background: transparent;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
/* ---- Footer ---- */
|
|
footer {
|
|
background: var(--midnight);
|
|
padding: 3rem;
|
|
text-align: center;
|
|
border-top: 1px solid rgba(245, 240, 232, 0.05);
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 0.75rem;
|
|
color: rgba(245, 240, 232, 0.3);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-size: 0.85rem;
|
|
color: rgba(212, 168, 83, 0.4);
|
|
}
|
|
|
|
/* ---- Roots / Education ---- */
|
|
.roots {
|
|
background: linear-gradient(180deg, var(--deep-purple), var(--midnight));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.roots-container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.roots-header {
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: 0 auto 5rem;
|
|
}
|
|
|
|
.roots-header p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.65);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.roots-timeline {
|
|
position: relative;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.roots-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 12px;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom, var(--warm-gold), rgba(212, 168, 83, 0.1));
|
|
}
|
|
|
|
.roots-item {
|
|
position: relative;
|
|
margin-bottom: 3.5rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.roots-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.roots-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -2.65rem;
|
|
top: 0.5rem;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--warm-gold);
|
|
background: var(--midnight);
|
|
}
|
|
|
|
.roots-item .roots-period {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.roots-item h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.roots-item .roots-institution {
|
|
font-size: 0.85rem;
|
|
color: rgba(245, 240, 232, 0.5);
|
|
margin-bottom: 0.75rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.roots-item p {
|
|
font-size: 0.9rem;
|
|
line-height: 1.75;
|
|
color: rgba(245, 240, 232, 0.6);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.roots-degrees {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.roots-degree {
|
|
padding: 0.35rem 0.9rem;
|
|
background: rgba(212, 168, 83, 0.08);
|
|
border: 1px solid rgba(212, 168, 83, 0.15);
|
|
border-radius: 100px;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
/* ---- Speaking & Workshops ---- */
|
|
.speaking {
|
|
background: var(--deep-purple);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.speaking-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.speaking-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5rem;
|
|
align-items: start;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.speaking-text p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.85;
|
|
color: rgba(245, 240, 232, 0.7);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.speaking-topics {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.speaking-topics h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
margin-bottom: 1.25rem;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
.topic-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 1.25rem;
|
|
border-bottom: 1px solid rgba(245, 240, 232, 0.05);
|
|
}
|
|
|
|
.topic-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.topic-icon {
|
|
width: 6px;
|
|
height: 6px;
|
|
min-width: 6px;
|
|
border-radius: 50%;
|
|
background: var(--warm-gold);
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.topic-item h4 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.1rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.topic-item p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.6;
|
|
color: rgba(245, 240, 232, 0.5);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.speaking-formats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.format-card {
|
|
padding: 2rem;
|
|
background: rgba(245, 240, 232, 0.03);
|
|
border: 1px solid rgba(245, 240, 232, 0.06);
|
|
border-radius: 4px;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.format-card:hover {
|
|
background: rgba(245, 240, 232, 0.06);
|
|
border-color: rgba(212, 168, 83, 0.2);
|
|
}
|
|
|
|
.format-card h4 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.format-card p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.6;
|
|
color: rgba(245, 240, 232, 0.5);
|
|
}
|
|
|
|
.format-card .format-duration {
|
|
display: inline-block;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ---- Selected Work ---- */
|
|
.selected-work {
|
|
background: linear-gradient(180deg, var(--deep-purple), var(--midnight));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.selected-work-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.selected-work-header {
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: 0 auto 4rem;
|
|
}
|
|
|
|
.selected-work-header p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
color: rgba(245, 240, 232, 0.65);
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.work-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.work-card {
|
|
background: rgba(245, 240, 232, 0.02);
|
|
border: 1px solid rgba(245, 240, 232, 0.06);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.work-card:hover {
|
|
background: rgba(245, 240, 232, 0.05);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.work-card a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
.work-visual {
|
|
height: 200px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.work-visual-1 {
|
|
background: linear-gradient(135deg, var(--rich-indigo), var(--terracotta) 60%, var(--warm-gold));
|
|
}
|
|
|
|
.work-visual-2 {
|
|
background: linear-gradient(135deg, var(--kente-green), var(--midnight) 50%, var(--warm-coral));
|
|
}
|
|
|
|
.work-visual-3 {
|
|
background: linear-gradient(135deg, var(--warm-gold) 0%, var(--deep-purple) 50%, var(--kente-red));
|
|
}
|
|
|
|
.work-visual::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 50% 80%, rgba(0,0,0,0.3), transparent 70%);
|
|
}
|
|
|
|
.work-body {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.work-meta {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--warm-gold);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.work-card h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 1.35;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.work-card .work-description {
|
|
font-size: 0.85rem;
|
|
line-height: 1.7;
|
|
color: rgba(245, 240, 232, 0.55);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.work-awards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.work-award {
|
|
padding: 0.3rem 0.7rem;
|
|
background: rgba(212, 168, 83, 0.08);
|
|
border: 1px solid rgba(212, 168, 83, 0.15);
|
|
border-radius: 100px;
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--warm-gold);
|
|
}
|
|
|
|
.recognition-bar {
|
|
max-width: 1200px;
|
|
margin: 4rem auto 0;
|
|
padding-top: 3rem;
|
|
border-top: 1px solid rgba(245, 240, 232, 0.06);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem 3rem;
|
|
}
|
|
|
|
.recognition-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.recognition-item .rec-label {
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: rgba(245, 240, 232, 0.35);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.recognition-item .rec-name {
|
|
font-family: var(--font-display);
|
|
font-size: 1rem;
|
|
color: rgba(245, 240, 232, 0.7);
|
|
}
|
|
|
|
/* ---- Scroll Reveal ---- */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.reveal-delay-1 { transition-delay: 0.15s; }
|
|
.reveal-delay-2 { transition-delay: 0.3s; }
|
|
.reveal-delay-3 { transition-delay: 0.45s; }
|
|
|
|
/* ---- Responsive ---- */
|
|
@media (max-width: 968px) {
|
|
section { padding: 5rem 2rem; }
|
|
|
|
.about-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.about-visual { max-width: 400px; }
|
|
|
|
.service-cards {
|
|
grid-template-columns: 1fr;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.approach-steps {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.approach-steps::before { display: none; }
|
|
|
|
.entity-block {
|
|
grid-template-columns: 1fr;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.entity-block.reversed .entity-text { order: 0; }
|
|
|
|
.speaking-grid { grid-template-columns: 1fr; gap: 3rem; }
|
|
.speaking-formats { grid-template-columns: 1fr; }
|
|
|
|
.work-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.recognition-bar {
|
|
gap: 1.5rem 2rem;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
nav { padding: 1.25rem 1.5rem; }
|
|
nav.scrolled { padding: 0.75rem 1.5rem; }
|
|
|
|
.nav-links { display: none; }
|
|
.nav-links.open {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(13, 6, 23, 0.98);
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
z-index: 999;
|
|
}
|
|
|
|
.nav-links.open a {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.nav-toggle { display: flex; }
|
|
|
|
section { padding: 4rem 1.5rem; }
|
|
|
|
.approach-steps { grid-template-columns: 1fr; }
|
|
|
|
.connect-links { flex-direction: column; align-items: center; }
|
|
|
|
.manifesto { padding: 6rem 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav id="navbar">
|
|
<a href="#" class="nav-logo">Elle Sam</a>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#services">What We Do</a></li>
|
|
<li><a href="#work">Work</a></li>
|
|
<li><a href="#speaking">Speaking</a></li>
|
|
<li><a href="#insights">Selected Work</a></li>
|
|
<li><a href="#connect">Connect</a></li>
|
|
</ul>
|
|
<div class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-bg">
|
|
<div class="gradient-orb orb-1"></div>
|
|
<div class="gradient-orb orb-2"></div>
|
|
<div class="gradient-orb orb-3"></div>
|
|
</div>
|
|
<canvas class="neural-canvas" id="neuralCanvas"></canvas>
|
|
<div class="hero-content">
|
|
<p class="hero-eyebrow">Storytelling · Neuroaesthetics · Human Potential</p>
|
|
<h1 class="hero-title">Where <em>Story</em><br>Meets the Brain</h1>
|
|
<p class="hero-subtitle">
|
|
Award-winning storyteller, filmmaker, and immersive artist crafting narratives that awaken the senses and unlock human potential.
|
|
</p>
|
|
<a href="#services" class="hero-cta">
|
|
Explore the Work
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="scroll-indicator">
|
|
<div class="line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section class="about" id="about">
|
|
<div class="about-grid">
|
|
<div class="about-visual reveal">
|
|
<div class="placeholder-art"></div>
|
|
<span class="photo-label">Elle Sam — San Francisco</span>
|
|
</div>
|
|
<div class="about-text">
|
|
<span class="section-label reveal">About Elle</span>
|
|
<h2 class="section-title reveal reveal-delay-1">The <em>Nexus</em> of<br>Art & Science</h2>
|
|
<p class="reveal reveal-delay-2">
|
|
Elle Sam is an award-winning writer, director, artist, storyteller, and healer with over a decade of experience crafting immersive narratives across film, television, AR/VR, interactive art installations, and digital media.
|
|
</p>
|
|
<p class="reveal reveal-delay-2">
|
|
Holding triple degrees from Rice University in Neuroscience, Sociology, and Visual & Dramatic Arts—with further training at Dublin's Gaiety School of Acting—Elle brings a rare synthesis of scientific understanding and artistic expression to every project.
|
|
</p>
|
|
<p class="reveal reveal-delay-2">
|
|
Her practice integrates psychology, somatic therapeutic modalities, neuroscience, sensory wellness practices, and West & Central African ancestral knowledge to support seekers navigating the complex human condition.
|
|
</p>
|
|
<div class="about-disciplines reveal reveal-delay-3">
|
|
<span class="discipline-tag">Neuroscience</span>
|
|
<span class="discipline-tag">Film & TV</span>
|
|
<span class="discipline-tag">AR / VR</span>
|
|
<span class="discipline-tag">Somatic Healing</span>
|
|
<span class="discipline-tag">Sociology</span>
|
|
<span class="discipline-tag">Immersive Art</span>
|
|
<span class="discipline-tag">Ancestral Knowledge</span>
|
|
<span class="discipline-tag">Digital Media</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What We Do -->
|
|
<section class="services" id="services">
|
|
<div class="services-header">
|
|
<span class="section-label reveal">What We Do</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Immersive Narratives<br>That <em>Transform</em></h2>
|
|
<p class="reveal reveal-delay-2">
|
|
At the intersection of storytelling and neuroscience, we create experiences that don't just entertain—they rewire how people feel, see, and understand themselves.
|
|
</p>
|
|
</div>
|
|
<div class="service-cards">
|
|
<div class="service-card reveal">
|
|
<svg class="service-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="4" y="8" width="40" height="28" rx="2"/>
|
|
<path d="M20 18l8 6-8 6V18z" fill="currentColor" stroke="none"/>
|
|
<path d="M4 40h40"/>
|
|
</svg>
|
|
<h3>Film & Television</h3>
|
|
<p>Writing and directing narrative works that weave neuroscientific insight into compelling stories—creating cinema that resonates at the deepest levels of human experience.</p>
|
|
</div>
|
|
<div class="service-card reveal reveal-delay-1">
|
|
<svg class="service-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<circle cx="24" cy="24" r="18"/>
|
|
<circle cx="24" cy="24" r="8"/>
|
|
<path d="M24 6v4M24 38v4M6 24h4M38 24h4"/>
|
|
<circle cx="24" cy="24" r="2" fill="currentColor"/>
|
|
</svg>
|
|
<h3>Immersive Installations</h3>
|
|
<p>Multi-sensory art experiences that engage the body and brain—AR, VR, and physical installations designed using principles of neuroaesthetics to catalyze transformation.</p>
|
|
</div>
|
|
<div class="service-card reveal reveal-delay-2">
|
|
<svg class="service-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M24 4c-6 8-16 14-16 26a16 16 0 0032 0C40 18 30 12 24 4z"/>
|
|
<path d="M18 30c0 4 3 6 6 6s6-2 6-6"/>
|
|
</svg>
|
|
<h3>Somatic Storytelling</h3>
|
|
<p>Narrative healing practices that merge storytelling with somatic therapy and ancestral wisdom—guiding seekers through embodied experiences of self-discovery and renewal.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Approach -->
|
|
<section class="approach" id="approach">
|
|
<div class="approach-container">
|
|
<div class="approach-header">
|
|
<span class="section-label reveal">Our Approach</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Science-Informed <em>Creativity</em></h2>
|
|
<p class="reveal reveal-delay-2">
|
|
Every project begins with understanding—how the brain processes beauty, narrative, and sensation—then translates that knowledge into art that moves people.
|
|
</p>
|
|
</div>
|
|
<div class="approach-steps">
|
|
<div class="approach-step reveal">
|
|
<div class="step-number">01</div>
|
|
<h3>Listen</h3>
|
|
<p>Deep inquiry into the story's emotional and neurological terrain. What does the audience need to feel?</p>
|
|
</div>
|
|
<div class="approach-step reveal reveal-delay-1">
|
|
<div class="step-number">02</div>
|
|
<h3>Map</h3>
|
|
<p>Charting the neuroaesthetic pathways—how sensory elements, narrative arcs, and somatic cues interweave.</p>
|
|
</div>
|
|
<div class="approach-step reveal reveal-delay-2">
|
|
<div class="step-number">03</div>
|
|
<h3>Create</h3>
|
|
<p>Crafting immersive narratives across mediums—film, installation, digital, or embodied experience.</p>
|
|
</div>
|
|
<div class="approach-step reveal reveal-delay-3">
|
|
<div class="step-number">04</div>
|
|
<h3>Activate</h3>
|
|
<p>Delivering experiences that don't just reach the mind but transform the whole person.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Roots / Education -->
|
|
<section class="roots" id="roots">
|
|
<div class="roots-container">
|
|
<div class="roots-header">
|
|
<span class="section-label reveal">Roots</span>
|
|
<h2 class="section-title reveal reveal-delay-1">A Rare <em>Convergence</em></h2>
|
|
<p class="reveal reveal-delay-2">
|
|
Most people choose between art and science. Elle chose both—and found that the space between them is where the deepest human truths live.
|
|
</p>
|
|
</div>
|
|
<div class="roots-timeline">
|
|
<div class="roots-item reveal">
|
|
<div class="roots-period">2007 – 2011</div>
|
|
<h3>Rice University</h3>
|
|
<div class="roots-institution">Houston, Texas</div>
|
|
<p>A triple degree that mapped the territory Elle would spend the next decade exploring: the brain, the society it inhabits, and the art that transforms both.</p>
|
|
<div class="roots-degrees">
|
|
<span class="roots-degree">B.S. Neuroscience</span>
|
|
<span class="roots-degree">B.A. Sociology</span>
|
|
<span class="roots-degree">B.A. Visual & Dramatic Arts</span>
|
|
</div>
|
|
</div>
|
|
<div class="roots-item reveal">
|
|
<div class="roots-period">Acting & Performance</div>
|
|
<h3>Gaiety School of Acting</h3>
|
|
<div class="roots-institution">Dublin, Ireland</div>
|
|
<p>Training in one of Europe’s most storied acting traditions—learning to inhabit character, embody emotion, and understand the performer’s nervous system as an instrument of storytelling.</p>
|
|
</div>
|
|
<div class="roots-item reveal">
|
|
<div class="roots-period">Ongoing Practice</div>
|
|
<h3>Somatic & Ancestral Studies</h3>
|
|
<div class="roots-institution">West & Central Africa, Global</div>
|
|
<p>Deep study in somatic therapeutic practices, sensory wellness modalities, and the ancestral knowledge systems of West and Central Africa—traditions that understand healing and story as inseparable.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Entities: Cineasthesia + Out The Box -->
|
|
<section class="entities" id="work">
|
|
<div class="entities-container">
|
|
<span class="section-label reveal">The Work</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Two Vessels,<br>One <em>Vision</em></h2>
|
|
|
|
<div class="entity-block" style="margin-top: 4rem;">
|
|
<div class="entity-visual reveal">
|
|
<div class="visual-fill cineasthesia-fill"></div>
|
|
</div>
|
|
<div class="entity-text">
|
|
<h3 class="entity-name reveal">Cineasthesia</h3>
|
|
<p class="entity-role reveal reveal-delay-1">Immersive Narrative Studio</p>
|
|
<p class="reveal reveal-delay-2">
|
|
A creative practice rooted in the belief that cinema and art can be medicine. Cineasthesia—a fusion of <em>cinema</em> and <em>synesthesia</em>—creates work that blurs the boundaries between senses, mediums, and states of consciousness.
|
|
</p>
|
|
<p class="reveal reveal-delay-2">
|
|
Through film, AR/VR, and interactive installations, Cineasthesia produces narratives that engage the nervous system as much as the imagination—stories designed to heal, awaken, and expand.
|
|
</p>
|
|
<span class="entity-year reveal reveal-delay-3">Est. 2014 — San Francisco Bay Area</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="entity-block reversed">
|
|
<div class="entity-visual reveal">
|
|
<div class="visual-fill otb-fill"></div>
|
|
</div>
|
|
<div class="entity-text">
|
|
<h3 class="entity-name reveal">Out The Box Creative Group</h3>
|
|
<p class="entity-role reveal reveal-delay-1">Art Collective & Media Group</p>
|
|
<p class="reveal reveal-delay-2">
|
|
Co-founded with Mike Boakye in Accra, Ghana, Out The Box Creative bridges the African diaspora through collaborative art-making and storytelling. The collective centers West and Central African ancestral knowledge as a living creative force.
|
|
</p>
|
|
<p class="reveal reveal-delay-2">
|
|
From Ghana to the Bay Area and beyond, Out The Box produces media, installations, and community experiences that honor heritage while pushing creative boundaries into uncharted territory.
|
|
</p>
|
|
<span class="entity-year reveal reveal-delay-3">Est. 2019 — Accra, Ghana & San Francisco</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Speaking & Workshops -->
|
|
<section class="speaking" id="speaking">
|
|
<div class="speaking-container">
|
|
<span class="section-label reveal">Speaking & Workshops</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Igniting <em>Rooms</em><br>& Rewiring Minds</h2>
|
|
<div class="speaking-grid">
|
|
<div class="speaking-text">
|
|
<p class="reveal">
|
|
Elle brings over a decade of multidisciplinary practice to the stage—weaving neuroscience research, cinematic storytelling techniques, and embodied wisdom into talks and workshops that leave audiences fundamentally changed.
|
|
</p>
|
|
<p class="reveal">
|
|
Whether addressing a conference of neuroscientists, a film festival audience, or a room of corporate leaders seeking deeper creative practices, Elle meets every audience exactly where they are and takes them somewhere new.
|
|
</p>
|
|
<div class="speaking-topics reveal">
|
|
<h3>Signature Topics</h3>
|
|
<div class="topic-item">
|
|
<div class="topic-icon"></div>
|
|
<div>
|
|
<h4>The Neuroscience of Story</h4>
|
|
<p>How narrative physically reshapes neural pathways—and why the stories we tell ourselves matter more than we think.</p>
|
|
</div>
|
|
</div>
|
|
<div class="topic-item">
|
|
<div class="topic-icon"></div>
|
|
<div>
|
|
<h4>Cineasthesia: When Senses Cross</h4>
|
|
<p>Designing multi-sensory experiences that bypass the rational mind and speak directly to the body’s intelligence.</p>
|
|
</div>
|
|
</div>
|
|
<div class="topic-item">
|
|
<div class="topic-icon"></div>
|
|
<div>
|
|
<h4>Ancestral Futures</h4>
|
|
<p>How West African storytelling traditions offer a blueprint for immersive art, communal healing, and regenerative culture.</p>
|
|
</div>
|
|
</div>
|
|
<div class="topic-item">
|
|
<div class="topic-icon"></div>
|
|
<div>
|
|
<h4>Art as Medicine</h4>
|
|
<p>The emerging science behind art-based healing—and practical frameworks for integrating creativity into wellness practices.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="speaking-formats">
|
|
<div class="format-card reveal">
|
|
<h4>Keynote</h4>
|
|
<p>High-impact talks that weave research, personal narrative, and live demonstration into an unforgettable experience.</p>
|
|
<span class="format-duration">30–60 minutes</span>
|
|
</div>
|
|
<div class="format-card reveal reveal-delay-1">
|
|
<h4>Workshop</h4>
|
|
<p>Hands-on sessions where participants experience neuroaesthetic principles through guided creative exercises.</p>
|
|
<span class="format-duration">Half or full day</span>
|
|
</div>
|
|
<div class="format-card reveal reveal-delay-2">
|
|
<h4>Panel & Moderation</h4>
|
|
<p>Bridging conversations between art, science, technology, and healing communities with depth and nuance.</p>
|
|
<span class="format-duration">60–90 minutes</span>
|
|
</div>
|
|
<div class="format-card reveal reveal-delay-3">
|
|
<h4>Residency</h4>
|
|
<p>Extended immersive engagements with institutions, festivals, or communities exploring the intersection of narrative and neuroscience.</p>
|
|
<span class="format-duration">1–4 weeks</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Selected Work -->
|
|
<section class="selected-work" id="insights">
|
|
<div class="selected-work-container">
|
|
<div class="selected-work-header">
|
|
<span class="section-label reveal">Selected Work</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Stories That<br><em>Move</em> People</h2>
|
|
<p class="reveal reveal-delay-2">
|
|
Award-winning narratives across film, digital media, and immersive experience—each crafted at the intersection of art, science, and the human condition.
|
|
</p>
|
|
</div>
|
|
<div class="work-grid">
|
|
<div class="work-card reveal">
|
|
<a href="https://www.imdb.com/title/tt10832628/" target="_blank" rel="noopener">
|
|
<div class="work-visual work-visual-1" style="background:url('img/black-boy-joy.jpg') center/cover no-repeat;"></div>
|
|
<div class="work-body">
|
|
<p class="work-meta">Short Film · Writer · 2019</p>
|
|
<h3>Black Boy Joy</h3>
|
|
<p class="work-description">Three generations of Black men navigate the demands and tenderness of raising an autistic son. Directed by Martina Lee.</p>
|
|
<div class="work-awards">
|
|
<span class="work-award">NAACP Image Award</span>
|
|
<span class="work-award">HBO Short Award</span>
|
|
<span class="work-award">BlackStar/STARZ Award</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="work-card reveal reveal-delay-1">
|
|
<a href="https://www.imdb.com/title/tt7085066/" target="_blank" rel="noopener">
|
|
<div class="work-visual work-visual-2"></div>
|
|
<div class="work-body">
|
|
<p class="work-meta">Short Film · Writer / Director · 2017</p>
|
|
<h3>Missed Connections</h3>
|
|
<p class="work-description">Narrative directorial debut starring Angelica Ross. Selected for Outfest LA and screened at 20+ festivals worldwide.</p>
|
|
<div class="work-awards">
|
|
<span class="work-award">Outfest LA Selection</span>
|
|
<span class="work-award">Best Short — NC G&L Film Fest</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="recognition-bar reveal">
|
|
<div class="recognition-item">
|
|
<p class="rec-label">Award</p>
|
|
<p class="rec-name">NAACP Image Award Winner</p>
|
|
</div>
|
|
<div class="recognition-item">
|
|
<p class="rec-label">Fellowship</p>
|
|
<p class="rec-name">Outfest Screenwriting Lab</p>
|
|
</div>
|
|
<div class="recognition-item">
|
|
<p class="rec-label">Recognition</p>
|
|
<p class="rec-name">Notable Writer — NY Television Festival</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Manifesto Quote -->
|
|
<section class="manifesto">
|
|
<blockquote class="manifesto-quote reveal">
|
|
“The brain doesn’t separate beauty from meaning, sensation from story, healing from art. <em>Neither do I.</em>”
|
|
</blockquote>
|
|
<p class="manifesto-attribution reveal reveal-delay-1">— Elle Sam</p>
|
|
</section>
|
|
|
|
<!-- Connect -->
|
|
<section class="connect" id="connect">
|
|
<div class="connect-container">
|
|
<span class="section-label reveal">Connect</span>
|
|
<h2 class="section-title reveal reveal-delay-1">Let’s Create<br><em>Together</em></h2>
|
|
<p class="reveal reveal-delay-2">
|
|
Whether you’re seeking a collaborator for an immersive project, a speaker on neuroaesthetics and storytelling, or a guide through somatic narrative practices—reach out.
|
|
</p>
|
|
<div class="connect-links reveal reveal-delay-3">
|
|
<a href="mailto:hello@elle-o-elle.lol" class="connect-link primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
|
<path d="M22 4L12 13 2 4"/>
|
|
</svg>
|
|
Email
|
|
</a>
|
|
<a href="https://www.linkedin.com/in/elle-sam-0bb5333b2/" target="_blank" rel="noopener" class="connect-link">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z"/>
|
|
<rect x="2" y="9" width="4" height="12"/>
|
|
<circle cx="4" cy="4" r="2"/>
|
|
</svg>
|
|
LinkedIn
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p>© 2026 Elle Sam. All rights reserved.</p>
|
|
<span class="footer-tagline">Story is medicine.</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
/* ---- Neural Network Background ---- */
|
|
(function() {
|
|
const canvas = document.getElementById('neuralCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
let animationId;
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
function createParticles() {
|
|
particles = [];
|
|
const count = Math.min(80, Math.floor(window.innerWidth / 15));
|
|
for (let i = 0; i < count; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.3,
|
|
vy: (Math.random() - 0.5) * 0.3,
|
|
r: Math.random() * 2 + 0.5
|
|
});
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
for (let i = 0; i < particles.length; i++) {
|
|
const p = particles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
|
|
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
|
|
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'rgba(212, 168, 83, 0.6)';
|
|
ctx.fill();
|
|
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const q = particles[j];
|
|
const dx = p.x - q.x;
|
|
const dy = p.y - q.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 150) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.x, p.y);
|
|
ctx.lineTo(q.x, q.y);
|
|
ctx.strokeStyle = `rgba(212, 168, 83, ${0.15 * (1 - dist / 150)})`;
|
|
ctx.lineWidth = 0.5;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
animationId = requestAnimationFrame(draw);
|
|
}
|
|
|
|
resize();
|
|
createParticles();
|
|
draw();
|
|
|
|
window.addEventListener('resize', () => {
|
|
resize();
|
|
createParticles();
|
|
});
|
|
})();
|
|
|
|
/* ---- Navbar Scroll ---- */
|
|
const navbar = document.getElementById('navbar');
|
|
window.addEventListener('scroll', () => {
|
|
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
|
});
|
|
|
|
/* ---- Mobile Nav Toggle ---- */
|
|
const navToggle = document.getElementById('navToggle');
|
|
const navLinks = document.getElementById('navLinks');
|
|
|
|
navToggle.addEventListener('click', () => {
|
|
navLinks.classList.toggle('open');
|
|
});
|
|
|
|
navLinks.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
navLinks.classList.remove('open');
|
|
});
|
|
});
|
|
|
|
/* ---- Scroll Reveal ---- */
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
/* ---- Smooth Scroll for anchor links ---- */
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|