1247 lines
46 KiB
HTML
1247 lines
46 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::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.04;
|
|
pointer-events: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cpath d='M40 10 Q60 40 50 80 Q45 100 30 90 Q15 80 25 50 Q30 30 40 10Z' fill='%233C2415'/%3E%3Cpath d='M40 10 Q40 50 38 80' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3Cpath d='M130 60 Q150 90 140 130 Q135 150 120 140 Q105 130 115 100 Q120 80 130 60Z' fill='%233C2415'/%3E%3Cpath d='M130 60 Q130 100 128 130' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3Cpath d='M80 120 Q100 150 90 190 Q85 210 70 200 Q55 190 65 160 Q70 140 80 120Z' fill='%233C2415'/%3E%3Cpath d='M80 120 Q80 160 78 190' stroke='%233C2415' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
|
|
background-size: 180px 200px;
|
|
}
|
|
|
|
.leafy-bg-light::before {
|
|
opacity: 0.06;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='220' viewBox='0 0 200 220'%3E%3Cpath d='M50 15 Q75 50 62 100 Q56 125 38 112 Q20 100 32 62 Q38 38 50 15Z' fill='%234A6741'/%3E%3Cpath d='M50 15 Q50 60 47 100' stroke='%234A6741' stroke-width='0.6' fill='none'/%3E%3Cpath d='M150 70 Q175 105 162 155 Q156 180 138 167 Q120 155 132 117 Q138 93 150 70Z' fill='%234A6741'/%3E%3Cpath d='M150 70 Q150 115 147 155' stroke='%234A6741' stroke-width='0.6' fill='none'/%3E%3Cpath d='M95 140 Q120 175 107 210 Q104 218 92 212 Q78 205 85 175 Q90 155 95 140Z' fill='%234A6741'/%3E%3C/svg%3E");
|
|
background-size: 200px 220px;
|
|
}
|
|
|
|
.leafy-bg-dark::before {
|
|
opacity: 0.08;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='210' viewBox='0 0 190 210'%3E%3Cpath d='M45 10 Q70 45 57 95 Q51 120 33 107 Q15 95 27 57 Q33 33 45 10Z' fill='%23C68B3F'/%3E%3Cpath d='M45 10 Q45 55 42 95' stroke='%23C68B3F' stroke-width='0.5' fill='none'/%3E%3Cpath d='M140 65 Q165 100 152 150 Q146 175 128 162 Q110 150 122 112 Q128 88 140 65Z' fill='%23C68B3F'/%3E%3Cpath d='M140 65 Q140 110 137 150' stroke='%23C68B3F' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
|
|
background-size: 190px 210px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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>
|
|
|
|
<!-- 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>
|