1365 lines
56 KiB
HTML
1365 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cineasthesia — Story, Shelter, Healing</title>
|
|
<meta name="description" content="Cineasthesia — the creative practice of Elle Sam. Film, immersive art, neuroaesthetics, and climate-resilient housing across the Black diaspora.">
|
|
<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=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--earth: #3C2415;
|
|
--earth-light: #6B4226;
|
|
--sand: #F5EDE0;
|
|
--sand-dark: #E8DBC8;
|
|
--gold: #C68B3F;
|
|
--gold-light: #D4A55A;
|
|
--green: #4A6741;
|
|
--green-dark: #2D3E28;
|
|
--text-dark: #1a1a1a;
|
|
--text-body: #3d3630;
|
|
--text-muted: #7a6f64;
|
|
--midnight: #0a0a0f;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--sand);
|
|
color: var(--text-body);
|
|
overflow-x: hidden;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* NAV */
|
|
nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
padding: 1.2rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
nav.scrolled {
|
|
background: rgba(10, 10, 15, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
padding: 0.8rem 2rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--sand);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover { opacity: 1; }
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: var(--sand);
|
|
margin: 5px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem 2rem 8vh;
|
|
background: var(--midnight);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.7) 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 800px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(4rem, 12vw, 9rem);
|
|
letter-spacing: 0.25em;
|
|
color: var(--sand);
|
|
line-height: 0.9;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
|
font-style: italic;
|
|
color: rgba(245, 237, 224, 0.7);
|
|
margin-bottom: 2.5rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-nav-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-nav-links a {
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.7rem 2rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hero-nav-links a:hover {
|
|
background: rgba(198, 139, 63, 0.15);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
/* SECTIONS */
|
|
section { padding: 7rem 2rem; }
|
|
.inner { max-width: 1000px; margin: 0 auto; }
|
|
|
|
.section-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.divider {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
height: 1px;
|
|
background: rgba(60, 36, 21, 0.1);
|
|
}
|
|
|
|
/* LEAF BACKGROUNDS */
|
|
.leafy-bg {
|
|
position: relative;
|
|
}
|
|
|
|
.leafy-bg > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.leafy-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
opacity: 0.045;
|
|
pointer-events: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%233C2415' opacity='0.9'%3E%3C!-- monstera leaf --%3E%3Cpath d='M80 50 C95 30 120 25 130 45 C140 65 135 95 120 120 C110 140 95 155 75 150 C55 145 45 125 50 100 C52 85 60 65 80 50Z' stroke-width='1.2' fill='%233C2415' fill-opacity='0.3'/%3E%3Cpath d='M80 50 C85 75 88 100 82 135' stroke-width='0.8'/%3E%3Cpath d='M95 70 C105 65 112 70' stroke-width='0.5'/%3E%3Cpath d='M100 90 C112 85 118 92' stroke-width='0.5'/%3E%3Cpath d='M95 110 C108 108 115 115' stroke-width='0.5'/%3E%3Cpath d='M78 85 C65 80 58 85' stroke-width='0.5'/%3E%3Cpath d='M75 105 C62 102 55 108' stroke-width='0.5'/%3E%3C!-- fern frond --%3E%3Cpath d='M280 20 C282 50 278 90 270 140 C265 170 258 200 250 220' stroke-width='1'/%3E%3Cpath d='M280 40 C295 32 300 38 292 48' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M279 55 C294 47 300 53 291 63' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M277 70 C292 62 299 68 289 78' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M275 85 C290 77 297 83 287 93' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M273 100 C288 92 295 98 285 108' stroke-width='0.6' fill='%233C2415' fill-opacity='0.2'/%3E%3Cpath d='M270 115 C285 107 292 113 282 123' stroke-width='0.6' fill='%233C2415' fill-opacity='0.2'/%3E%3Cpath d='M267 130 C282 122 289 128 279 138' stroke-width='0.6' fill='%233C2415' fill-opacity='0.15'/%3E%3Cpath d='M279 55 C264 47 258 53 267 63' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M277 70 C262 62 256 68 265 78' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M275 85 C260 77 254 83 263 93' stroke-width='0.6' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M273 100 C258 92 252 98 261 108' stroke-width='0.6' fill='%233C2415' fill-opacity='0.2'/%3E%3C!-- trailing vine with small leaves --%3E%3Cpath d='M160 280 C175 270 190 285 200 300 C210 315 225 320 240 310 C255 300 260 315 270 330 C280 345 295 340 310 350' stroke-width='0.8'/%3E%3Cpath d='M178 278 C182 268 190 270 186 280' stroke-width='0.5' fill='%233C2415' fill-opacity='0.3'/%3E%3Cpath d='M208 308 C212 298 220 300 216 310' stroke-width='0.5' fill='%233C2415' fill-opacity='0.3'/%3E%3Cpath d='M248 308 C252 298 260 300 256 310' stroke-width='0.5' fill='%233C2415' fill-opacity='0.25'/%3E%3Cpath d='M278 340 C282 330 290 332 286 342' stroke-width='0.5' fill='%233C2415' fill-opacity='0.25'/%3E%3C!-- broad tropical leaf --%3E%3Cpath d='M50 300 C60 270 85 260 100 280 C115 300 105 340 85 355 C70 365 50 355 48 335 C46 320 48 310 50 300Z' stroke-width='1' fill='%233C2415' fill-opacity='0.2'/%3E%3Cpath d='M50 300 C65 310 78 325 82 350' stroke-width='0.6'/%3E%3Cpath d='M62 295 C72 290 80 296' stroke-width='0.4'/%3E%3Cpath d='M58 315 C68 310 78 316' stroke-width='0.4'/%3E%3Cpath d='M60 335 C70 332 76 340' stroke-width='0.4'/%3E%3C!-- scattered small leaves --%3E%3Cpath d='M340 80 C350 65 362 68 355 82 C348 96 335 92 340 80Z' stroke-width='0.6' fill='%233C2415' fill-opacity='0.2'/%3E%3Cpath d='M340 80 C348 85 352 90' stroke-width='0.4'/%3E%3Cpath d='M320 200 C330 185 342 188 335 202 C328 216 315 212 320 200Z' stroke-width='0.6' fill='%233C2415' fill-opacity='0.15'/%3E%3Cpath d='M320 200 C328 205 332 210' stroke-width='0.4'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-size: 400px 400px;
|
|
}
|
|
|
|
.leafy-bg-light::before {
|
|
opacity: 0.07;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%234A6741' opacity='0.9'%3E%3C!-- large palm frond --%3E%3Cpath d='M60 380 C70 340 85 300 110 260 C125 238 140 220 160 210' stroke-width='1.2'/%3E%3Cpath d='M75 350 C55 335 48 340 60 352' stroke-width='0.6' fill='%234A6741' fill-opacity='0.3'/%3E%3Cpath d='M85 325 C65 310 58 315 70 327' stroke-width='0.6' fill='%234A6741' fill-opacity='0.3'/%3E%3Cpath d='M95 300 C75 285 68 290 80 302' stroke-width='0.6' fill='%234A6741' fill-opacity='0.3'/%3E%3Cpath d='M108 275 C88 260 80 265 95 277' stroke-width='0.6' fill='%234A6741' fill-opacity='0.25'/%3E%3Cpath d='M122 252 C102 237 95 242 110 254' stroke-width='0.6' fill='%234A6741' fill-opacity='0.25'/%3E%3Cpath d='M85 325 C100 315 108 322 95 330' stroke-width='0.6' fill='%234A6741' fill-opacity='0.3'/%3E%3Cpath d='M95 300 C110 290 118 297 105 305' stroke-width='0.6' fill='%234A6741' fill-opacity='0.3'/%3E%3Cpath d='M108 275 C123 265 131 272 118 280' stroke-width='0.6' fill='%234A6741' fill-opacity='0.25'/%3E%3C!-- fiddle leaf --%3E%3Cpath d='M300 30 C320 20 340 30 345 55 C350 80 340 110 325 125 C310 140 290 135 285 115 C280 95 285 60 300 30Z' stroke-width='1' fill='%234A6741' fill-opacity='0.2'/%3E%3Cpath d='M300 30 C310 60 318 90 320 120' stroke-width='0.7'/%3E%3Cpath d='M310 50 C322 45 330 52' stroke-width='0.4'/%3E%3Cpath d='M314 70 C326 67 334 75' stroke-width='0.4'/%3E%3Cpath d='M316 90 C328 88 335 96' stroke-width='0.4'/%3E%3Cpath d='M310 50 C298 45 292 52' stroke-width='0.4'/%3E%3Cpath d='M314 70 C302 67 296 75' stroke-width='0.4'/%3E%3C!-- eucalyptus branch --%3E%3Cpath d='M200 50 C210 80 215 120 212 170 C210 200 205 230 198 260' stroke-width='0.8'/%3E%3Cellipse cx='195' cy='75' rx='8' ry='12' transform='rotate(-15 195 75)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.2'/%3E%3Cellipse cx='215' cy='100' rx='8' ry='12' transform='rotate(15 215 100)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.2'/%3E%3Cellipse cx='198' cy='130' rx='8' ry='12' transform='rotate(-10 198 130)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.18'/%3E%3Cellipse cx='218' cy='155' rx='8' ry='12' transform='rotate(12 218 155)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.18'/%3E%3Cellipse cx='205' cy='185' rx='8' ry='12' transform='rotate(-8 205 185)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.15'/%3E%3Cellipse cx='215' cy='215' rx='7' ry='11' transform='rotate(10 215 215)' stroke-width='0.5' fill='%234A6741' fill-opacity='0.15'/%3E%3C!-- small filler leaves --%3E%3Cpath d='M350 280 C365 260 380 265 370 285 C360 305 342 298 350 280Z' stroke-width='0.6' fill='%234A6741' fill-opacity='0.2'/%3E%3Cpath d='M350 280 C360 288 365 295' stroke-width='0.4'/%3E%3Cpath d='M30 180 C45 160 60 165 50 185 C40 205 22 198 30 180Z' stroke-width='0.6' fill='%234A6741' fill-opacity='0.18'/%3E%3Cpath d='M30 180 C40 188 45 195' stroke-width='0.4'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-size: 400px 400px;
|
|
}
|
|
|
|
.leafy-bg-dark::before {
|
|
opacity: 0.1;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cg fill='none' stroke='%23C68B3F' opacity='0.7'%3E%3C!-- broad leaf cluster --%3E%3Cpath d='M70 40 C90 25 115 30 120 55 C125 80 110 110 90 120 C70 130 55 115 55 95 C55 75 58 55 70 40Z' stroke-width='1' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M70 40 C80 65 85 90 88 115' stroke-width='0.6'/%3E%3Cpath d='M82 55 C92 50 98 56' stroke-width='0.4'/%3E%3Cpath d='M84 75 C94 72 100 78' stroke-width='0.4'/%3E%3Cpath d='M82 95 C92 92 98 98' stroke-width='0.4'/%3E%3C!-- fern spray --%3E%3Cpath d='M260 30 C265 60 260 100 250 150 C242 185 232 215 220 240' stroke-width='0.9'/%3E%3Cpath d='M262 50 C275 42 280 48 270 56' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M260 70 C273 62 278 68 268 76' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M257 90 C270 82 275 88 265 96' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.12'/%3E%3Cpath d='M254 110 C267 102 272 108 262 116' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.12'/%3E%3Cpath d='M260 70 C247 62 242 68 252 76' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M257 90 C244 82 239 88 249 96' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.12'/%3E%3Cpath d='M254 110 C241 102 236 108 246 116' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.12'/%3E%3C!-- trailing vine --%3E%3Cpath d='M120 250 C140 240 155 255 165 275 C175 295 190 298 205 290 C220 282 228 295 240 310' stroke-width='0.7'/%3E%3Cpath d='M140 248 C145 238 152 240 148 250' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M172 285 C177 275 184 277 180 287' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Cpath d='M210 288 C215 278 222 280 218 290' stroke-width='0.5' fill='%23C68B3F' fill-opacity='0.12'/%3E%3C!-- scattered seeds / berries --%3E%3Ccircle cx='330' cy='100' r='2.5' fill='%23C68B3F' fill-opacity='0.15'/%3E%3Ccircle cx='340' cy='108' r='2' fill='%23C68B3F' fill-opacity='0.12'/%3E%3Ccircle cx='335' cy='118' r='2.5' fill='%23C68B3F' fill-opacity='0.1'/%3E%3Ccircle cx='40' cy='300' r='2' fill='%23C68B3F' fill-opacity='0.12'/%3E%3Ccircle cx='48' cy='310' r='2.5' fill='%23C68B3F' fill-opacity='0.1'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-size: 380px 380px;
|
|
}
|
|
|
|
/* PROJECT CARDS */
|
|
.projects-section { background: var(--sand); }
|
|
|
|
.project-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.project-card:last-child { margin-bottom: 0; }
|
|
|
|
.project-card.reverse .project-image { order: 2; }
|
|
.project-card.reverse .project-info { order: 1; }
|
|
|
|
.project-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 4/3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.project-image .project-tag {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
background: rgba(10, 10, 15, 0.85);
|
|
color: var(--gold);
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.project-info h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-info p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.project-info .quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
color: var(--earth-light);
|
|
border-left: 2px solid var(--gold);
|
|
padding-left: 1.2rem;
|
|
margin: 1.5rem 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sensory-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.sensory-tag {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.35rem 0.8rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.4);
|
|
color: var(--gold);
|
|
}
|
|
|
|
.project-image-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-card.reverse .project-image-col { order: 2; }
|
|
|
|
.project-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
color: var(--earth-light);
|
|
border-left: 2px solid var(--gold);
|
|
padding-left: 1.2rem;
|
|
margin: 1.5rem 0 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* INSTALLATIONS */
|
|
.installations-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.installations-section .section-label { color: var(--gold-light); }
|
|
.installations-section .section-title { color: var(--sand); }
|
|
|
|
.installations-intro {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.installations-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.installation-item {
|
|
flex: 0 0 calc(33.333% - 1rem);
|
|
}
|
|
|
|
.installation-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.installation-item img,
|
|
.installation-item video {
|
|
width: 100%;
|
|
height: 350px;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.installation-item:hover img,
|
|
.installation-item:hover video {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.installation-caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1.5rem 1rem 1rem;
|
|
background: linear-gradient(transparent, rgba(10, 10, 15, 0.85));
|
|
}
|
|
|
|
.installation-caption h4 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.08em;
|
|
color: var(--sand);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.installation-caption p {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--gold-light);
|
|
}
|
|
|
|
/* ABOUT — dark section */
|
|
.about-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.about-section .section-label { color: var(--gold-light); }
|
|
.about-section .section-title { color: var(--sand); }
|
|
|
|
.about-grid {
|
|
display: flex;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: 0 0 280px;
|
|
height: 380px;
|
|
object-fit: cover;
|
|
filter: grayscale(0.15);
|
|
}
|
|
|
|
.about-info { flex: 1; }
|
|
|
|
.about-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--sand);
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.about-role {
|
|
font-size: 0.8rem;
|
|
color: var(--gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.about-bio {
|
|
font-size: 0.95rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* AWARDS */
|
|
.awards-section {
|
|
background: var(--midnight);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.awards-section .section-label { color: var(--gold-light); }
|
|
.awards-section .section-title { color: var(--sand); }
|
|
|
|
.awards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.award-card {
|
|
padding: 1.5rem;
|
|
border: 1px solid rgba(198, 139, 63, 0.2);
|
|
border-left: 3px solid var(--gold);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.award-card h4 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--gold);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.award-card .award-detail {
|
|
font-size: 0.85rem;
|
|
color: rgba(245, 237, 224, 0.7);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.award-card .award-project {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-style: italic;
|
|
font-size: 0.85rem;
|
|
color: var(--gold-light);
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.award-card .award-year {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: rgba(245, 237, 224, 0.4);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* DSS / DESIGN SCIENCE */
|
|
.dss-section {
|
|
background: var(--green-dark);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.dss-section .section-label { color: var(--gold-light); }
|
|
.dss-section .section-title { color: var(--sand); }
|
|
|
|
.dss-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.dss-text {
|
|
font-size: 0.95rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dss-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.dss-links a {
|
|
display: inline-block;
|
|
color: var(--gold-light);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 0.6rem 1.5rem;
|
|
border: 1px solid rgba(212, 165, 90, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.dss-links a:hover {
|
|
background: rgba(212, 165, 90, 0.15);
|
|
border-color: var(--gold-light);
|
|
}
|
|
|
|
.dss-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
|
|
font-style: italic;
|
|
color: var(--gold-light);
|
|
line-height: 1.5;
|
|
border-left: 2px solid var(--gold);
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* FILM & TV */
|
|
.filmtv-section {
|
|
background: var(--sand-dark);
|
|
}
|
|
|
|
.filmtv-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.filmtv-card {
|
|
background: white;
|
|
padding: 2rem 1.5rem;
|
|
border-bottom: 3px solid var(--gold);
|
|
}
|
|
|
|
.filmtv-card h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.4rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--earth);
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.filmtv-card .credit-meta {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--gold);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.filmtv-card p {
|
|
font-size: 0.9rem;
|
|
color: var(--text-body);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.filmtv-card .award {
|
|
display: inline-block;
|
|
margin-top: 0.8rem;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--earth-light);
|
|
padding: 0.3rem 0.7rem;
|
|
border: 1px solid rgba(60, 36, 21, 0.2);
|
|
}
|
|
|
|
/* OUT THE BOX */
|
|
.otb-section {
|
|
background: var(--earth);
|
|
color: var(--sand);
|
|
}
|
|
|
|
.otb-section .section-label { color: var(--gold-light); }
|
|
.otb-section .section-title { color: var(--sand); }
|
|
|
|
.otb-text {
|
|
font-size: 1rem;
|
|
color: rgba(245, 237, 224, 0.75);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.otb-quote {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
|
|
font-style: italic;
|
|
color: var(--gold-light);
|
|
max-width: 700px;
|
|
margin: 2.5rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* IG FEED */
|
|
.ig-feed {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.ig-strip {
|
|
display: flex;
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ig-strip a {
|
|
flex: 1;
|
|
position: relative;
|
|
display: block;
|
|
aspect-ratio: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ig-strip a img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease, filter 0.4s ease;
|
|
filter: brightness(0.85) saturate(0.9);
|
|
}
|
|
|
|
.ig-strip a:hover img {
|
|
transform: scale(1.08);
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
|
|
.ig-strip a::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(10, 10, 15, 0.2);
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.ig-strip a:hover::after {
|
|
background: transparent;
|
|
}
|
|
|
|
.ig-strip-cta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.8rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.ig-strip-cta svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: var(--gold-light);
|
|
}
|
|
|
|
.ig-strip-cta a {
|
|
color: var(--gold-light);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.ig-strip-cta a:hover {
|
|
color: var(--sand);
|
|
}
|
|
|
|
/* CONTACT */
|
|
.contact-section { background: var(--sand); }
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.contact-intro h3 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--earth);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-intro p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-body);
|
|
line-height: 1.8;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.contact-form label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.3rem;
|
|
display: block;
|
|
}
|
|
|
|
.contact-form input,
|
|
.contact-form textarea {
|
|
width: 100%;
|
|
padding: 0.8rem 1rem;
|
|
border: 1px solid rgba(60, 36, 21, 0.2);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.9rem;
|
|
color: var(--text-body);
|
|
transition: border-color 0.3s;
|
|
outline: none;
|
|
}
|
|
|
|
.contact-form input:focus,
|
|
.contact-form textarea:focus {
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.contact-form textarea {
|
|
min-height: 140px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.contact-form button {
|
|
align-self: flex-start;
|
|
background: var(--earth);
|
|
color: var(--gold);
|
|
border: 1px solid var(--gold);
|
|
padding: 0.8rem 2.5rem;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.contact-form button:hover {
|
|
background: var(--earth-light);
|
|
}
|
|
|
|
.form-status {
|
|
font-size: 0.85rem;
|
|
padding: 0.8rem 1rem;
|
|
display: none;
|
|
}
|
|
|
|
.form-status.success {
|
|
display: block;
|
|
background: rgba(74, 103, 65, 0.1);
|
|
color: var(--green);
|
|
border: 1px solid rgba(74, 103, 65, 0.3);
|
|
}
|
|
|
|
.form-status.error {
|
|
display: block;
|
|
background: rgba(180, 60, 60, 0.1);
|
|
color: #8B3A3A;
|
|
border: 1px solid rgba(180, 60, 60, 0.3);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
background: var(--midnight);
|
|
padding: 3rem 2rem 2rem;
|
|
text-align: center;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.25em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-style: italic;
|
|
font-size: 0.95rem;
|
|
color: rgba(245, 237, 224, 0.5);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.7rem;
|
|
color: rgba(245, 237, 224, 0.3);
|
|
}
|
|
|
|
/* SCROLL REVEAL */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.7s ease, transform 0.7s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* MOBILE */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 0; right: -100%;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: rgba(10, 10, 15, 0.98);
|
|
flex-direction: column;
|
|
padding: 5rem 2rem;
|
|
transition: right 0.4s;
|
|
}
|
|
|
|
.nav-links.active { right: 0; }
|
|
.nav-toggle { display: block; z-index: 101; }
|
|
|
|
.hero {
|
|
padding: 6rem 1.5rem;
|
|
min-height: 85vh;
|
|
}
|
|
|
|
.hero-title { font-size: clamp(3rem, 11vw, 5rem); }
|
|
.hero-subtitle { font-size: 1rem; }
|
|
|
|
.hero-nav-links {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.hero-nav-links a {
|
|
width: 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
section { padding: 3.5rem 1.2rem; }
|
|
|
|
.project-card {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.project-card.reverse .project-image,
|
|
.project-card.reverse .project-image-col,
|
|
.project-card.reverse .project-info {
|
|
order: unset;
|
|
}
|
|
|
|
.about-grid {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.about-photo {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 280px;
|
|
}
|
|
|
|
.filmtv-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.awards-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dss-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.installation-item {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
.installation-item img,
|
|
.installation-item video {
|
|
height: 280px;
|
|
}
|
|
|
|
.contact-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.ig-strip a {
|
|
aspect-ratio: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.hero { padding: 5rem 1rem; }
|
|
.hero-title { font-size: 2.8rem; }
|
|
section { padding: 3rem 1rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="nav-logo">CINEASTHESIA</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="#installations">Installations</a></li>
|
|
<li><a href="#filmtv">Film & TV</a></li>
|
|
<li><a href="#dss">Design Science</a></li>
|
|
<li><a href="#about">ELLE</a></li>
|
|
<li><a href="#otb">Out the Box Creative Group</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<video class="hero-video" autoplay muted loop playsinline>
|
|
<source src="img/hero-video.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">CINEASTHESIA</h1>
|
|
<p class="hero-subtitle">Storytelling across different mediums — Film, TV, immersive interactive art installations, and game design tied to neuroaesthetics — bridging indigenous healing modalities, psychology, and neuroscience with the tech of today.</p>
|
|
<div class="hero-nav-links">
|
|
<a href="#projects">Explore the Work</a>
|
|
<a href="#contact">Get in Touch</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROJECTS -->
|
|
<section class="projects-section leafy-bg leafy-bg-light" id="projects">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Projects</p>
|
|
<h2 class="section-title">The Work</h2>
|
|
</div>
|
|
|
|
<!-- THE LAST DRAW -->
|
|
<div class="project-card reveal">
|
|
<div class="project-image">
|
|
<img src="img/story-family.jpg" alt="The Last Draw — near-future narrative" loading="lazy">
|
|
<span class="project-tag">Film · Narrative</span>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>The Last Draw</h3>
|
|
<p><em>The Last Draw</em> is a grounded near-future narrative set in Mim, Ghana — following a family living under ecological pressure and lottery-based survival. The story gives the work its emotional life and human stakes, centering the act of dwelling as itself a narrative act.</p>
|
|
<p>Imagined through Black diasporic epistemology, the film explores what becomes visible when future habitation is grounded in land, culture, pressure, and daily life — red earth, water edges, agricultural rhythm, quarry conditions, and the settlement patterns that shape how people live, move, and remain in place.</p>
|
|
<div class="quote">“What would housing look like if it were designed to heal? And what stories do we need to tell to build that world?”</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HOME -->
|
|
<div class="project-card reverse reveal">
|
|
<div class="project-image-col">
|
|
<div class="project-image">
|
|
<img src="img/home-cover.jpg" alt="HOME — immersive art installation" loading="lazy">
|
|
<span class="project-tag">Immersive · Multisensory</span>
|
|
</div>
|
|
<div class="quote project-quote">“How can we create both an externalized nervous system through design technology and an internalized nervous regulator through story and somatic sensory experiencing — linking the knowledge and ancient tech that has always been there to the technology of today?”</div>
|
|
</div>
|
|
<div class="project-info">
|
|
<h3>HOME</h3>
|
|
<p><em>HOME</em> is a mobile immersive art installation and fire-proof housing prototype that uses neuroaesthetic research to activate specific neurological responses — lowering cortisol, stimulating oxytocin and dopamine pathways, inviting the body back into safety.</p>
|
|
<p>Drawing from Alice Walker’s radical tenderness and Audre Lorde’s framing of self-care as political resistance, HOME destigmatizes play, rest, and joy for people who may be in survival mode. The installation travels to working-class neighborhoods across the United States, the Black diaspora, and continental Africa.</p>
|
|
<p>Each sensory chamber engages visitors through interconnected modalities:</p>
|
|
<div class="sensory-tags">
|
|
<span class="sensory-tag">Film</span>
|
|
<span class="sensory-tag">Sound Frequency</span>
|
|
<span class="sensory-tag">Bass Vibrations</span>
|
|
<span class="sensory-tag">Volumetric Lasers</span>
|
|
<span class="sensory-tag">Oral Storytelling</span>
|
|
<span class="sensory-tag">Touch</span>
|
|
<span class="sensory-tag">Cinemagraphs</span>
|
|
<span class="sensory-tag">Scent</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTERACTIVE ART INSTALLATIONS -->
|
|
<section class="installations-section" id="installations">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Exhibits</p>
|
|
<h2 class="section-title">Interactive Art Installations</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="installations-intro">Elle’s immersive installations use volumetric light, sacred geometry, UV-reactive environments, and sound frequency to create spaces where visitors don’t just observe — they participate. Each installation is designed using neuroaesthetic principles to activate embodied memory, lower cortisol, and invite the body back into safety and play.</p>
|
|
</div>
|
|
<div class="installations-grid reveal">
|
|
<div class="installation-item">
|
|
<img src="img/chroma-1.jpg" alt="Chroma — sacred geometry light panel" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Sacred Geometry · Light</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/chroma-2.jpg" alt="Chroma — volumetric projection ceremony" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Volumetric Projection · Ceremony</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/chroma-3.jpg" alt="Chroma — blue laser light installation" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Chroma</h4>
|
|
<p>Laser · Immersion</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/sankofa-accra.jpg" alt="Sankofa — UV-reactive installation in Accra" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Sankofa</h4>
|
|
<p>Accra · UV-Reactive Environment</p>
|
|
</div>
|
|
</div>
|
|
<div class="installation-item">
|
|
<img src="img/prism-still.jpg" alt="Prism — light sculpture installation" loading="lazy">
|
|
<div class="installation-caption">
|
|
<h4>Prism</h4>
|
|
<p>Light Sculpture · Kinetic</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FILM & TV -->
|
|
<section class="filmtv-section leafy-bg" id="filmtv">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Screen Work</p>
|
|
<h2 class="section-title">Film & Television</h2>
|
|
<p class="section-text">Elle’s screen work spans award-winning shorts, studio series, and projects in development — each centering stories of neurodiversity, identity, diaspora, and resilience.</p>
|
|
</div>
|
|
<div class="filmtv-grid reveal">
|
|
<div class="filmtv-card">
|
|
<h3>Black Boy Joy</h3>
|
|
<p class="credit-meta">Writer · Short Film</p>
|
|
<p>A 12-minute introspective about two generations of Black men raising a young son with autism, navigating loss and adaptation with tenderness and humor.</p>
|
|
<span class="award">🏆 NAACP Image Award — Best Live Action Short</span>
|
|
</div>
|
|
<div class="filmtv-card">
|
|
<h3>As We See It</h3>
|
|
<p class="credit-meta">Writer · Amazon</p>
|
|
<p>Jason Katims’ series based on the Israeli show <em>On The Spectrum</em>, following young adults on the autism spectrum as they navigate the world, relationships, and independence.</p>
|
|
</div>
|
|
<div class="filmtv-card">
|
|
<h3>Missed Connections</h3>
|
|
<p class="credit-meta">Writer & Director · KweliTV / CFMDC</p>
|
|
<p>A short film developed in collaboration with the GLAAD Transgender Media Equality Program, exploring identity and connection across difference.</p>
|
|
<span class="award">🏆 Audience Award — TranScreen Amsterdam</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AWARDS & RECOGNITION -->
|
|
<section class="awards-section" id="awards">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Recognition</p>
|
|
<h2 class="section-title">Awards & Honors</h2>
|
|
</div>
|
|
<div class="awards-grid reveal">
|
|
<div class="award-card">
|
|
<h4>NAACP Image Award</h4>
|
|
<p class="award-detail">Best Live Action Short Film</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Best Writer</h4>
|
|
<p class="award-detail">Diversity in Cannes Award</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Film Independent Project Involve</h4>
|
|
<p class="award-year">2019</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Outfest Screenwriting Lab</h4>
|
|
<p class="award-year">2018</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>NYTVF Notable Writer</h4>
|
|
<p class="award-detail">New York Television Festival</p>
|
|
<p class="award-year">2018</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Best Trans US Short Film</h4>
|
|
<p class="award-detail">North Carolina Gay & Lesbian Film Festival</p>
|
|
<p class="award-project">Missed Connections</p>
|
|
<p class="award-year">2019</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Audience Award</h4>
|
|
<p class="award-detail">TranScreen Amsterdam Transgender Film Festival</p>
|
|
<p class="award-project">Missed Connections</p>
|
|
<p class="award-year">2019</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>Audience Award</h4>
|
|
<p class="award-detail">Outfest Los Angeles LGBTQ+ Film Festival</p>
|
|
<p class="award-project">Missed Connections</p>
|
|
<p class="award-year">2017</p>
|
|
</div>
|
|
<div class="award-card">
|
|
<h4>RAW: Natural Born Artists</h4>
|
|
<p class="award-detail">Recognized by Chicago and Madison chapters of the national arts organization</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DESIGN SCIENCE STUDIO -->
|
|
<section class="dss-section leafy-bg leafy-bg-dark" id="dss">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Design Science</p>
|
|
<h2 class="section-title">Design Science Studio</h2>
|
|
</div>
|
|
<div class="dss-grid reveal">
|
|
<div>
|
|
<p class="dss-text">Elle is a fellow of the <strong style="color: var(--sand);">Design Science Studio</strong>, a (r)evolutionary cultural and educational incubator created in partnership with the <strong style="color: var(--sand);">Buckminster Fuller Institute</strong>. The Studio supports creators worldwide to imagine and build regenerative futures that work for 100% of life.</p>
|
|
<p class="dss-text">Through the Studio’s curriculum of systemic thinking, world-building, and embodied praxis, Elle’s work on HOME and Cineasthesia connects directly to Fuller’s legacy of comprehensive anticipatory design science — applying whole-systems thinking to housing, healing, and storytelling across the Black diaspora.</p>
|
|
<div class="dss-links">
|
|
<a href="https://www.designscience.studio/" target="_blank">Design Science Studio</a>
|
|
<a href="https://www.bfi.org/" target="_blank">Buckminster Fuller Institute</a>
|
|
</div>
|
|
</div>
|
|
<div class="dss-quote">
|
|
“You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete.”<br>
|
|
<span style="font-style: normal; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 237, 224, 0.5); margin-top: 0.8rem; display: inline-block;">— R. Buckminster Fuller</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT ELLE SAM -->
|
|
<section class="about-section" id="about">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">The Creator</p>
|
|
<h2 class="section-title">Elle Sam</h2>
|
|
</div>
|
|
<div class="about-grid reveal">
|
|
<img src="img/elle-sam.jpg" alt="Elle Sam" class="about-photo" loading="lazy">
|
|
<div class="about-info">
|
|
<h3 class="about-name">Michelle “ELLE” Sam</h3>
|
|
<p class="about-role">Storyteller · Filmmaker · Medicinal Healer · Multimedia Artist</p>
|
|
<p class="about-bio">Elle is a world-travelling storyteller, working across multiple mediums and just as many cities — San Francisco, Berlin, Amsterdam, Oaxaca, Accra, and more. Spanning film, immersive art, interactive installation, writing, and oral tradition, her work moves wherever the story demands. An award-winning filmmaker, multimedia artist, and medicinal healer of Ghanaian descent within the Fante, Akwapim, and Bwiti traditions, she holds a B.A. from Rice University in Visual and Dramatic Arts, Sociology, and Neuroscience.</p>
|
|
<p class="about-bio">Elle works with various indigenous healing modalities, carrying a deep connection to land and lineage through her practice — a relationship that anchors her work across disciplines. From neuroaesthetic art installations that lower cortisol and activate joy, to ceremonial storytelling rooted in West African tradition, her work treats healing and creative expression as inseparable.</p>
|
|
<p class="about-bio">She was a speaker at TEDxAccra’s Chale Talks and has feature and series projects in development with several major studios. Her practice bridges indigenous healing traditions, neuroaesthetics, and multimedia narrative — the convergence at the heart of Cineasthesia.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OUT THE BOX CREATIVE -->
|
|
<section class="otb-section leafy-bg leafy-bg-dark" id="otb">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Artist Collective</p>
|
|
<h2 class="section-title">Out the Box Creative Group</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="otb-text">Started by Mike Abrantie Boakye and Michelle Sam, Out the Box Creative Group is a group of young creatives, diverse in backgrounds and disciplines, devoted to developing content that speaks for more than just the outright majority. They represent the idea of challenging what modern society deems to be the status quo.</p>
|
|
<p class="otb-text">The collective operates at the intersection of storytelling, community development, and cultural preservation — producing immersive experiences, film projects, and collaborative works that travel between continental Africa and the global diaspora.</p>
|
|
<p style="margin-top: 2rem;"><a href="https://outtheboxcg.com" target="_blank" style="display: inline-block; color: var(--gold-light); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.8rem 2.5rem; border: 1px solid rgba(212, 165, 90, 0.4); transition: all 0.3s;" onmouseover="this.style.background='rgba(212,165,90,0.15)';this.style.borderColor='#D4A55A'" onmouseout="this.style.background='transparent';this.style.borderColor='rgba(212,165,90,0.4)'">Check Out the Collective</a></p>
|
|
</div>
|
|
<div class="ig-feed reveal">
|
|
<div class="ig-strip">
|
|
<a href="https://www.instagram.com/p/DGlfLl3Apbb/" target="_blank" title="View on Instagram">
|
|
<img src="img/ig-1.jpg" alt="Out the Box Creative Group" loading="lazy">
|
|
</a>
|
|
<a href="https://www.instagram.com/p/DDh-wr3S_Ki/" target="_blank" title="View on Instagram">
|
|
<img src="img/ig-2.jpg" alt="Out the Box Creative Group" loading="lazy">
|
|
</a>
|
|
<a href="https://www.instagram.com/p/C9iWhhHPFGE/" target="_blank" title="View on Instagram">
|
|
<img src="img/ig-3.jpg" alt="Out the Box Creative Group" loading="lazy">
|
|
</a>
|
|
<a href="https://www.instagram.com/p/C9QF1_bvctr/" target="_blank" title="View on Instagram">
|
|
<img src="img/ig-4.jpg" alt="Out the Box Creative Group" loading="lazy">
|
|
</a>
|
|
<a href="https://www.instagram.com/p/C8Pnth0MDBM/" target="_blank" title="View on Instagram">
|
|
<img src="img/ig-5.jpg" alt="Out the Box Creative Group" loading="lazy">
|
|
</a>
|
|
</div>
|
|
<div class="ig-strip-cta">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
|
<a href="https://www.instagram.com/outtheboxcg" target="_blank">Follow @outtheboxcg</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT -->
|
|
<section class="contact-section leafy-bg leafy-bg-light" id="contact">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Get in Touch</p>
|
|
<h2 class="section-title">Contact</h2>
|
|
</div>
|
|
<div class="contact-grid reveal">
|
|
<div class="contact-intro">
|
|
<h3>Let’s Connect</h3>
|
|
<p>Interested in collaborations, screenings, installations, press inquiries, or community partnerships? We’d love to hear from you.</p>
|
|
<p>Whether you’re a fellow artist, curator, community organizer, funder, or just someone moved by the work — reach out.</p>
|
|
</div>
|
|
<form class="contact-form" id="contactForm">
|
|
<div>
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" required>
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div>
|
|
<label for="subject">Subject</label>
|
|
<input type="text" id="subject" name="subject">
|
|
</div>
|
|
<div>
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" required></textarea>
|
|
</div>
|
|
<button type="submit">Send Message</button>
|
|
<div class="form-status" id="formStatus"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="footer-logo">CINEASTHESIA</p>
|
|
<p class="footer-tagline">Story, shelter, healing — across the Black diaspora and continental Africa.</p>
|
|
<p class="footer-copy">© 2025 Elle Sam / Cineasthesia. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Nav scroll
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 80);
|
|
});
|
|
|
|
// Mobile nav
|
|
const toggle = document.getElementById('navToggle');
|
|
const links = document.getElementById('navLinks');
|
|
toggle.addEventListener('click', () => {
|
|
links.classList.toggle('active');
|
|
});
|
|
links.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => links.classList.remove('active'));
|
|
});
|
|
|
|
// 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.15, rootMargin: '0px 0px -60px 0px' });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
// Contact form
|
|
const form = document.getElementById('contactForm');
|
|
const status = document.getElementById('formStatus');
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = form.querySelector('button');
|
|
btn.textContent = 'Sending...';
|
|
btn.disabled = true;
|
|
|
|
const data = new FormData(form);
|
|
const payload = Object.fromEntries(data.entries());
|
|
|
|
try {
|
|
const res = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
status.className = 'form-status success';
|
|
status.textContent = 'Thank you! Your message has been sent.';
|
|
form.reset();
|
|
} else {
|
|
throw new Error('Server error');
|
|
}
|
|
} catch (err) {
|
|
status.className = 'form-status error';
|
|
status.textContent = 'Something went wrong. Please try again or email michelle.ann.sam@gmail.com directly.';
|
|
}
|
|
|
|
btn.textContent = 'Send Message';
|
|
btn.disabled = false;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|