1272 lines
53 KiB
HTML
1272 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>The Last Draw — by Elle</title>
|
|
<meta name="description" content="What if the fate of humanity rested on a lottery? An Afrofuturistic grounded sci-fi series by Elle.">
|
|
<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 {
|
|
--ghana-red: #CE1126;
|
|
--ghana-gold: #FCD116;
|
|
--ghana-green: #006B3F;
|
|
--deep-red: #8B0000;
|
|
--earth-red: #A0522D;
|
|
--midnight: #0a0a0f;
|
|
--dark-bg: #0d0d14;
|
|
--card-bg: rgba(15, 15, 25, 0.9);
|
|
--text-primary: #f0ece4;
|
|
--text-secondary: rgba(240, 236, 228, 0.7);
|
|
--text-muted: rgba(240, 236, 228, 0.5);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--midnight);
|
|
color: var(--text-primary);
|
|
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;
|
|
background: linear-gradient(180deg, rgba(10,10,15,0.95) 0%, transparent 100%);
|
|
transition: background 0.4s;
|
|
}
|
|
|
|
nav.scrolled {
|
|
background: rgba(10, 10, 15, 0.97);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.3rem;
|
|
letter-spacing: 0.15em;
|
|
color: var(--ghana-gold);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--ghana-gold);
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--text-primary);
|
|
position: absolute;
|
|
left: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nav-toggle span:nth-child(1) { top: 0; }
|
|
.nav-toggle span:nth-child(2) { top: 9px; }
|
|
.nav-toggle span:nth-child(3) { top: 18px; }
|
|
|
|
/* ═══════ HERO ═══════ */
|
|
.hero {
|
|
position: relative;
|
|
height: 100vh;
|
|
min-height: 700px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.2) 40%, rgba(10,10,15,0.7) 100%),
|
|
url('img/hero.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
#hero-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
color: var(--ghana-gold);
|
|
margin-bottom: 2rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 0.5s forwards;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(4rem, 12vw, 10rem);
|
|
line-height: 0.9;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 0.8s forwards;
|
|
}
|
|
|
|
.hero-title .draw {
|
|
color: var(--ghana-red);
|
|
display: block;
|
|
}
|
|
|
|
.hero-byline {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.4rem;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.2em;
|
|
margin-bottom: 3rem;
|
|
opacity: 0;
|
|
animation: fadeUp 1s 1.1s forwards;
|
|
}
|
|
|
|
.hero-scroll {
|
|
opacity: 0;
|
|
animation: fadeUp 1s 1.5s forwards;
|
|
}
|
|
|
|
.hero-scroll a {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.scroll-line {
|
|
width: 1px;
|
|
height: 40px;
|
|
background: var(--ghana-gold);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.3; transform: scaleY(1); }
|
|
50% { opacity: 1; transform: scaleY(1.3); }
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ═══════ SECTIONS ═══════ */
|
|
section {
|
|
padding: 8rem 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.3em;
|
|
color: var(--ghana-gold);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* ═══════ CINEMATIC IMAGE BREAK ═══════ */
|
|
.img-break {
|
|
max-width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-break img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.img-break.parallax {
|
|
height: 60vh;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.img-break.parallax img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
height: 120%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* ═══════ QUESTION ═══════ */
|
|
.question-section {
|
|
position: relative;
|
|
padding: 10rem 2rem;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.3) 50%, rgba(10,10,15,0.6) 100%),
|
|
url('img/ivy-wall.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.question-section .question {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.8rem, 4vw, 3.2rem);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--ghana-gold);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ═══════ LOGLINE ═══════ */
|
|
.logline-section {
|
|
position: relative;
|
|
max-width: 100%;
|
|
padding: 6rem 2rem;
|
|
background:
|
|
linear-gradient(180deg, rgba(139,0,0,0.85) 0%, rgba(10,10,15,0.9) 100%),
|
|
url('img/chaos.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.logline-inner {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logline-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ═══════ SYNOPSIS ═══════ */
|
|
.synopsis-section {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.synopsis-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.synopsis-text strong {
|
|
color: var(--ghana-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════ DIVIDER ═══════ */
|
|
.divider {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(252, 209, 22, 0.3) 50%, transparent 100%);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ═══════ FULL-BLEED SECTIONS ═══════ */
|
|
.full-bleed {
|
|
max-width: 100%;
|
|
padding: 8rem 2rem;
|
|
}
|
|
|
|
.full-bleed .inner {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ═══════ INSPIRATION ═══════ */
|
|
.inspiration-section {
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.92) 0%, rgba(13,13,20,0.88) 50%, rgba(10,10,15,0.95) 100%),
|
|
url('img/corridor.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.inspiration-text {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.inspiration-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ═══════ THEMES ═══════ */
|
|
.themes-section {
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.82) 50%, rgba(10,10,15,0.92) 100%),
|
|
url('img/golden-silhouette.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.themes-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.theme-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.theme-tag {
|
|
padding: 0.5rem 1.2rem;
|
|
border: 1px solid rgba(252, 209, 22, 0.3);
|
|
color: var(--ghana-gold);
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ═══════ STORY WORLD ═══════ */
|
|
.world-section {
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.85) 0%, rgba(10,10,15,0.8) 50%, rgba(10,10,15,0.9) 100%),
|
|
url('img/space.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.world-images {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.world-images img {
|
|
width: 100%;
|
|
height: 280px;
|
|
object-fit: cover;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.world-images {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.world-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.world-text em {
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.palette-bar {
|
|
display: flex;
|
|
height: 6px;
|
|
margin-top: 3rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.palette-bar span {
|
|
flex: 1;
|
|
}
|
|
|
|
.palette-bar .p-red { background: var(--ghana-red); }
|
|
.palette-bar .p-green { background: var(--ghana-green); }
|
|
.palette-bar .p-gold { background: var(--ghana-gold); }
|
|
.palette-bar .p-earth { background: var(--earth-red); }
|
|
|
|
/* ═══════ TONE ═══════ */
|
|
.tone-section {
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.9) 0%, rgba(10,10,15,0.85) 50%, rgba(10,10,15,0.92) 100%),
|
|
url('img/tunnel.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.tone-text {
|
|
font-size: 1.05rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tone-text em {
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ═══════ COMPS ═══════ */
|
|
.comps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.comp-card {
|
|
text-align: center;
|
|
background: var(--card-bg);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
transition: border-color 0.3s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comp-card:hover {
|
|
border-color: rgba(252, 209, 22, 0.2);
|
|
}
|
|
|
|
.comp-card img {
|
|
width: 100%;
|
|
height: 320px;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
|
|
.comp-card-text {
|
|
padding: 1.2rem 1.5rem;
|
|
}
|
|
|
|
.comp-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.comp-detail {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ═══════ CHARACTERS ═══════ */
|
|
.characters-section {
|
|
background:
|
|
radial-gradient(ellipse at 50% 0%, rgba(206, 17, 38, 0.06) 0%, transparent 40%),
|
|
var(--midnight);
|
|
}
|
|
|
|
.character-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.character-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
padding: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s, transform 0.3s;
|
|
}
|
|
|
|
.character-card .character-name,
|
|
.character-card .character-age,
|
|
.character-card .character-desc {
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.character-card .character-desc {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.character-card:hover {
|
|
border-color: rgba(252, 209, 22, 0.2);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.character-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
}
|
|
|
|
.character-card.akua::before { background: var(--ghana-red); }
|
|
.character-card.eman::before { background: #4a6fa5; }
|
|
.character-card.sarah::before { background: var(--ghana-gold); }
|
|
.character-card.rebecca::before { background: #9b59b6; }
|
|
.character-card.grandma-bea::before { background: #f5f5dc; }
|
|
.character-card.joanna::before { background: var(--ghana-green); }
|
|
.character-card.missy::before { background: var(--ghana-red); }
|
|
|
|
.character-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.character-age {
|
|
font-size: 0.8rem;
|
|
color: var(--ghana-gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.character-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ═══════ CLOSING QUESTION ═══════ */
|
|
.closing-section {
|
|
max-width: 100%;
|
|
padding: 10rem 2rem;
|
|
text-align: center;
|
|
background:
|
|
linear-gradient(180deg, rgba(10,10,15,0.6) 0%, rgba(10,10,15,0.4) 50%, rgba(10,10,15,0.7) 100%),
|
|
url('img/purple-mood.jpg') center center / cover no-repeat;
|
|
}
|
|
|
|
.closing-question {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--text-primary);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.closing-question strong {
|
|
color: var(--ghana-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════ FOOTER ═══════ */
|
|
footer {
|
|
padding: 4rem 2rem 2rem;
|
|
text-align: center;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.footer-title {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footer-author {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-link {
|
|
display: inline-block;
|
|
color: var(--ghana-gold);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.7rem 2rem;
|
|
border: 1px solid rgba(252, 209, 22, 0.4);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
background: rgba(252, 209, 22, 0.1);
|
|
border-color: var(--ghana-gold);
|
|
}
|
|
|
|
.footer-copy {
|
|
margin-top: 3rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ═══════ CHARACTER PHOTOS ═══════ */
|
|
.character-photo {
|
|
width: 100%;
|
|
height: 260px;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* ═══════ CREATOR ═══════ */
|
|
.creator-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rem;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.creator-photo {
|
|
flex: 0 0 320px;
|
|
height: 420px;
|
|
object-fit: cover;
|
|
filter: grayscale(0.3);
|
|
}
|
|
|
|
.creator-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.creator-name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 2.4rem;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.creator-role {
|
|
font-size: 0.85rem;
|
|
color: var(--ghana-gold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.creator-bio {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.creator-section {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.creator-photo {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
/* ═══════ TEAM ═══════ */
|
|
.team-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.team-card {
|
|
text-align: center;
|
|
}
|
|
|
|
.team-card img {
|
|
width: 100%;
|
|
height: 280px;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.team-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ═══════ STRATEGY ═══════ */
|
|
.strategy-gallery {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.strategy-gallery img {
|
|
width: 100%;
|
|
height: auto;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* ═══════ SCROLL REVEAL ═══════ */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s 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;
|
|
}
|
|
|
|
section, .full-bleed {
|
|
padding: 5rem 1.5rem;
|
|
}
|
|
|
|
.question-section, .closing-section {
|
|
padding: 6rem 1.5rem;
|
|
}
|
|
|
|
.comps-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.character-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="nav-logo">THE LAST DRAW</div>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#logline">Logline</a></li>
|
|
<li><a href="#synopsis">Synopsis</a></li>
|
|
<li><a href="#inspiration">Inspiration</a></li>
|
|
<li><a href="#world">World</a></li>
|
|
<li><a href="#characters">Characters</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">
|
|
<div class="hero-bg"></div>
|
|
<canvas id="hero-canvas"></canvas>
|
|
<div class="hero-content">
|
|
<p class="hero-tagline">A Cineasthesia Production</p>
|
|
<h1 class="hero-title">THE LAST<span class="draw">DRAW</span></h1>
|
|
<p class="hero-byline">by Elle</p>
|
|
<div class="hero-scroll">
|
|
<a href="#question">
|
|
<span>Discover</span>
|
|
<span class="scroll-line"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FIELD IMAGE -->
|
|
<div class="img-break">
|
|
<img src="img/field.jpg" alt="Girl standing in a field of yellow flowers" loading="lazy">
|
|
</div>
|
|
|
|
<!-- QUESTION -->
|
|
<div class="question-section" id="question">
|
|
<p class="question reveal">What if the fate of humanity rested on a lottery?</p>
|
|
</div>
|
|
|
|
<!-- LOGLINE -->
|
|
<div class="logline-section" id="logline">
|
|
<div class="logline-inner reveal">
|
|
<p class="section-label">Logline</p>
|
|
<p class="logline-text">With seven days before an unstoppable environmental disaster, world leaders launch a global lottery to decide who escapes to Mars—but when the most unlikely members of society and the black sheep of a multigenerational Ghanaian family are selected, they must navigate family fractures, buried truths, and the deeper forces shaping who lives and who's left behind.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAMILY DINNER IMAGE -->
|
|
<div class="img-break">
|
|
<img src="img/family-dinner.jpg" alt="Family gathered around dinner table" loading="lazy">
|
|
</div>
|
|
|
|
<!-- SYNOPSIS -->
|
|
<section class="synopsis-section" id="synopsis">
|
|
<div class="reveal">
|
|
<p class="section-label">Synopsis</p>
|
|
<h2 class="section-title">The Story</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Earth is dying. Environmental collapse has reached the point of no return. Salvation comes in the form of <strong>The Draw</strong>, a mysterious algorithmic lottery that selects a tiny fraction of the global population to be relocated to rumored sanctuaries on Mars. It's humanity's last hope—or its final betrayal. There are only seven days left before the world as we know it ends. And the whole world knows it.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">As the first round of "winners" are announced, shock and chaos ripple across the globe. Lottery riots erupt in wealthy enclaves. Underground salvation scams boom. Religious factions splinter over whether The Draw is divine, demonic, or rigged. Meanwhile, in Accra, a middle-class Ghanaian family—the <strong>Amahs</strong>—receive no selection at all.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text"><strong>Akua</strong>, the matriarch and a data scientist who once worked on the project that birthed the algorithm, believed she had outsmarted fate. She thought she'd secured a slot for her family. Her husband, <strong>Eman</strong>, a failed revolutionary turned civil servant, tries to make sense of the betrayal. Their eldest daughter, <strong>Sarah</strong>, a rising executive in the global aid industrial complex, starts calling in favors. <strong>Joanna</strong>, their neurodivergent teenage daughter, silently starts working on a pattern, hoping to uncover the true logic behind The Draw. <strong>Grandma Bea</strong> is confident they'll be chosen eventually—her prayers are strong, her faith unshakeable. <strong>Rebecca</strong>, the middle daughter, turns to sage, chants, and spiritual rituals, trying to raise the vibration of the household to "ping" the universe.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">The family compound becomes a pressure cooker of secrets, blame, and fractured hope. A war room. A shrine. A confessional. Then chaos knocks on the door. <strong>Missy</strong>, Akua's estranged sister—a sharp-tongued, unstable artist dismissed as the family's black sheep—crashes at the compound after her artist squat is raided. She brings nothing but sarcasm and an uncomfortable truth: <em>"Maybe you were never meant to be saved."</em></p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">On Day Three, a second round of names drops—and <strong>Missy's is on the list</strong>. The family erupts. Akua demands answers. Sarah accuses Missy of cheating the system. Rebecca begins unraveling. Eman retreats into political rhetoric. Joanna watches—recording, mapping, decoding, feeling the air shift. Missy, meanwhile, doesn't want it.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">She didn't expect to be chosen. The family tries to manipulate her into giving her slot to one of them, because they "deserve" it more. Akua, heartbroken, tries to break into the system to "fix the error." Sarah begins courting journalists, trying to spin her own narrative. Rebecca becomes further obsessed with signs and synchronicities, shadowing Missy in hopes of absorbing her "spiritual essence" and aligning herself for the next draw. Eman sinks into conspiracy theories and nostalgia, pulls out his old manifestos as if they might save him.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">But Missy, to their frustration, refuses to play the part of the "chosen." And yet, we see why she was picked—she's the only one not lying to herself. And in the quiet moments, when no one is looking—she has integrity. It's shown in the chaos of the streets, in her interactions in the neighborhood, amidst protests and grace around the world.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Outside, the world grows increasingly surreal. Billboards glitch with lottery slogans. Rogue citizen groups begin kidnapping "winners" to demand answers. Religious and atheist influencers livestream apocalypse countdown vigils. Still, the algorithm says nothing—only issuing names, cold and irrefutable. Rebecca, volunteering at a lottery grief circle, meets Maya, a dying woman who's been selected. Rebecca begins fantasizing: What if I took her place? Is it really wrong if the universe led me here?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Joanna quietly hacks into fragments of the algorithm using Akua's old research files. What she uncovers is disturbing: The Draw isn't about merit, power, or perceived morality. It's picking people with certain characteristics, not credentials.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Outside, the world is unraveling. Suicide pacts, protests, and pop-up cults flood the headlines. Planes are grounded. Attempts by elites to flee are blocked—by angry citizens and the algorithm itself. A rumor of a final, third list spreads: a "last draw" selecting based on last-minute social and environmental variables, sparking both hope and fear.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Back at the compound, the Amahs descend into collective obsession. Someone else must be chosen. Akua goes manic, trying to rebuild the code. She sells out her former team. Eman calls in old favors and bribes. Grandma Bea hosts overnight prayer-thons. Sarah throws a "lottery gala" to raise awareness (and maybe raise her odds). Rebecca attempts identity theft. Missy disappears for a night—and they panic. Did she give up? Did one of them do something? Murder? They are all suspicious of one another. The house becomes a pressure chamber. Secrets leak. Accusations fly. Joanna, still recording, watches it all unfold.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">She pieces together the logic: the "last draw" is triggered not by class, power, or intellect—but by unseen value, emotional congruence, pattern recognition. It's looking for people who don't replicate the corruption of the old world. The final hours arrive. Global infrastructure buckles. Cities begin blackouts. The algorithm announces the last chosen will be selected—live—based on immediate, observable human actions.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">The Amahs gather, feral and fragmented, watching the livestream—a chaotic desperate ritual as the world outside howls. In a final, emotional confrontation, Joanna, the one no one really listened to, steps forward. She plays back everything—the breakdowns, confessions, betrayals. She offers it all back, not to shame them, but to show the truth of their humanity. Without performance. Without polish. She delivers what no one else has: the unvarnished truth. And then... <strong>Joanna's name appears. Joanna and Missy.</strong> The two least expected. The least respected. The least "worthy" by old-world standards. Not because they clawed for it, but because they held the family's emotional mirror. And tap into a soul "rememberance".</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="synopsis-text">Missy emerges from hiding. We see where she went—what she witnessed. We see her adventure over to the side of humanity worth saving. The hope. As the shuttle arrives amidst drones and mobs, Missy's armor finally cracks. She breaks down crying. Is it relief? Exhaustion? Grief? All of it. Joanna grips her sketchpad. The algorithm boots out those who tried to cheat, steal, manipulate their way aboard. The rest are left behind. To reckon. To remember. To wonder.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MOOD BOARD IMAGE -->
|
|
<div class="img-break">
|
|
<img src="img/mood-board.jpg" alt="Visual mood board — architecture and community in Ghana" loading="lazy">
|
|
</div>
|
|
|
|
<!-- INSPIRATION -->
|
|
<div class="full-bleed inspiration-section" id="inspiration">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">From the Creator</p>
|
|
<h2 class="section-title">Inspiration</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">The seeming randomness of life... The Last Draw is deeply rooted in a series of profound personal losses and upheavals that has occurred over a very short amount of time in my life over the past couple of years—the death and grief of my mother, the complexity of healing an overactive nervous system from trauma, the dissolution of unhealthy chosen family bonds, a long term romantic relationship ending, an unstable economy, and the loss of my home and neighborhood to the devastating fires.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">These experiences stripped away my Maslow hierarchy of needs, one layer at a time, back to back, until I was left asking: What shows up when everything familiar is gone? When no one is looking, who are the people that show up... or don't? What is the version of "you" that shows up for yourself or is revealed when everything is seemingly stripped away, and the roles we take on/masking that we sometimes do in life to survive becomes futile?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">In the silence of loss—when the noise of life fades away—I found myself confronting my own vulnerability and resilience. The ache of absence and instability became a mirror reflecting who I am beneath the roles I play, and what remains when the world strips away certainty. Living in that liminal grey space. The discomfort, heightened anxiety, and suppressed panic. The feeling of uncontrollable laughter to keep from crying. In the wake of losing what I once called home, I was compelled to reconsider what "home" truly means—is it a physical place, the people who surround us, or something deeper, residing within ourselves? This question echoes throughout the story: how do we find grounding and belonging when the foundations beneath us crumble?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="inspiration-text">I wanted to tell an Afrofuturistic satirical grounded sci-fi story that isn't set centuries from now, because Afrofuturism is already here. It may not look like Wakanda, but it's happening now through our innovation, resilience, and leadership in technology and culture... and it's time to showcase that vibrancy and complexity. The Last Draw invites us to rethink survival, belonging, and hope—not as distant fantasies, but as urgent realities shaping our present and near future.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- THEMES -->
|
|
<div class="full-bleed themes-section" id="themes">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Exploring</p>
|
|
<h2 class="section-title">Themes</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text">This question of identity amidst apparent randomness is at the heart of the story. Life often feels like a lottery—arbitrary, unfair, and chaotic. Yet, we hold onto the idea of free will, of agency, even when circumstances seem to suggest otherwise. How do we reconcile that tension? How do we preserve our integrity and humanity in a world that is rapidly shifting toward technocracy and commodification, where conspicuous consumption is worshiped and blatant corruption rewarded?</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text">As we stand at the crossroads of a global shift toward technocratic control and rampant commodification of the human experience, The Last Draw questions what it means to claim agency and authenticity. Decentralized frameworks emerge in the narrative not just as technological alternatives, but as vital models for preserving community and ethical integrity in an increasingly fractured world—the global lottery in the film is a reflection of this when it throws everything into chaos when it course corrects itself from being rigged—selecting the most unlikely people at first glance, who in reality possess internal qualities that would benefit a new reimagined society that doesn't rely on external shallow markers of worth.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="themes-text"><em>The Last Draw</em> is a story about the underdog—the people whose true gifts remain unseen, even to themselves, in a society that often values wealth and power over character. It explores the delicate balance between collectivist values and individual survival during times of extreme crisis. Central to this vision is the role of women as cultural bearers and architects of the future. As a woman of Ghanaian descent, I am intimately aware of the strength, resilience, and wisdom women hold in our culture during moments of rupture and renewal. In Ghanaian culture, women carry the stories of the past—our histories, our traumas, our triumphs—and through remembrance, they reconcile what has been with what can be. This act of remembering is a radical, life-affirming resistance, and it is through this that futures are imagined and remade. The women in The Last Draw embody this sacred responsibility, navigating grief and loss while cultivating hope and possibility in human and at times messy ways.</p>
|
|
</div>
|
|
<div class="theme-tags reveal">
|
|
<span class="theme-tag">Identity</span>
|
|
<span class="theme-tag">Agency</span>
|
|
<span class="theme-tag">Technocracy</span>
|
|
<span class="theme-tag">Commodification</span>
|
|
<span class="theme-tag">Underdogs</span>
|
|
<span class="theme-tag">Women as Cultural Bearers</span>
|
|
<span class="theme-tag">Collectivism vs. Survival</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- STORY WORLD -->
|
|
<div class="full-bleed world-section" id="world">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Setting</p>
|
|
<h2 class="section-title">Story World</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="world-text">In the near future, the world is in chaos, and everyone is living their final days on Earth as best they can. Earth is about to be on the brink of destruction due to a predicted catastrophic environmental disaster. With time running out, the world's governments have pooled their resources to build a massive colony on Mars, capable of accommodating a fraction of Earth's population. The only way to get there is by winning a "randomized" lottery, and the world waits with bated breath to see who will be chosen and survive The Last Draw.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="world-text">The setting in Accra, Ghana, operates as its own character. <em>The Last Draw</em> is a love letter to Ghana in all its complexity. We will emphasize a deep, rich, cinematic, saturated palette. The red of the soil in Ghana, the green of the land and vegetation, the gold of the sun, and the nuance of dark skin will all be a subtle nod to the Ghanaian flag, which stands in contrast to films set in the dystopian world genre.</p>
|
|
</div>
|
|
<div class="palette-bar reveal">
|
|
<span class="p-red"></span>
|
|
<span class="p-earth"></span>
|
|
<span class="p-green"></span>
|
|
<span class="p-gold"></span>
|
|
</div>
|
|
<div class="world-images reveal">
|
|
<img src="img/accra-motorcycle.jpg" alt="Woman on motorcycle riding through Accra" loading="lazy">
|
|
<img src="img/architecture-warm.jpg" alt="Warm architectural interior in Ghana" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- TONE & COMPS -->
|
|
<div class="full-bleed tone-section" id="tone">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Style</p>
|
|
<h2 class="section-title">Tone & Comparisons</h2>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="tone-text"><em>The Last Draw</em> is a genre-blending grounded sci-fi with the biting social satire and absurdity of <em>Parasite</em> and <em>The Menu</em>, the spiritual unease of <em>The Leftovers</em>, and the gritty immediacy of <em>Children of Men</em>. It moves between grounded family intimacy and expansive global stakes, anchored by dark humor and emotional poignancy.</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<p class="tone-text">While the film centers on a speculative event—a mysterious global lottery—it is not driven by spectacle, but by the quiet tensions, betrayals, and reckonings it triggers within a fractured family.</p>
|
|
</div>
|
|
<div class="comps-grid reveal">
|
|
<div class="comp-card">
|
|
<img src="img/comp-district9.jpg" alt="District 9 poster" loading="lazy">
|
|
<div class="comp-card-text">
|
|
<h3 class="comp-title">District 9</h3>
|
|
<p class="comp-detail">Social commentary through sci-fi allegory set in Africa</p>
|
|
</div>
|
|
</div>
|
|
<div class="comp-card">
|
|
<img src="img/comp-arrival.jpg" alt="Arrival poster" loading="lazy">
|
|
<div class="comp-card-text">
|
|
<h3 class="comp-title">Arrival</h3>
|
|
<p class="comp-detail">Cerebral sci-fi driven by emotional truth and communication</p>
|
|
</div>
|
|
</div>
|
|
<div class="comp-card">
|
|
<img src="img/comp-children-of-men.jpg" alt="Children of Men poster" loading="lazy">
|
|
<div class="comp-card-text">
|
|
<h3 class="comp-title">Children of Men</h3>
|
|
<p class="comp-detail">Gritty immediacy in a collapsing world, hope against despair</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- CHARACTERS -->
|
|
<div class="full-bleed characters-section" id="characters">
|
|
<div class="inner">
|
|
<div class="reveal">
|
|
<p class="section-label">Meet</p>
|
|
<h2 class="section-title">The Amah Family</h2>
|
|
</div>
|
|
<div class="character-grid">
|
|
<div class="character-card akua reveal">
|
|
<img src="img/char-akua.jpg" alt="Akua — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Akua</h3>
|
|
<p class="character-age">50s · The Matriarch</p>
|
|
<p class="character-desc">A scientist, mother, intelligent, obsessive, clings to routines. Denial as a shield. Overburdened optimist. She secretly worked on the algorithm and believed she had secured their family's safety, only to be wrong. Shattered when her belief in reason and meritocracy fails.</p>
|
|
</div>
|
|
<div class="character-card eman reveal">
|
|
<img src="img/char-eman.jpg" alt="Eman — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Eman</h3>
|
|
<p class="character-age">Late 50s · The Patriarch</p>
|
|
<p class="character-desc">Former revolutionary or intellectual who sold out for stability. Father, believes in meritocracy... barely. Charismatic and insecure about relevance. Tries to "logic" his way through the crisis. Represents broken systems—education, patriarchy, ideology—all cracking under pressure.</p>
|
|
</div>
|
|
<div class="character-card sarah reveal">
|
|
<img src="img/char-sarah.jpg" alt="Sarah — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Sarah</h3>
|
|
<p class="character-age">Late 30s · The Eldest</p>
|
|
<p class="character-desc">Eldest daughter, golden child, feels entitled to be chosen due to sacrifice and perfectionism, overachiever, emotionally detached, the one who "escaped", but is spiritually lost. Plans to "buy" survival. Represents the myth of success under late capitalism.</p>
|
|
</div>
|
|
<div class="character-card rebecca reveal">
|
|
<img src="img/char-rebecca.jpg" alt="Rebecca — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Rebecca</h3>
|
|
<p class="character-age">Mid 20s · The Middle Child</p>
|
|
<p class="character-desc">Still believes in love, justice, and signs from the universe. Wears her heart on her sleeve, believes the lottery is a test of the soul. Works in mutual aid, volunteers at anonymous lottery grief circles. Considers herself spiritual—but when she meets a terminally ill "chosen one," she secretly forms plans to convince the stranger to let her assume her identity.</p>
|
|
</div>
|
|
<div class="character-card grandma-bea reveal">
|
|
<img src="img/char-grandma-bea.jpg" alt="Grandma Bea — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Grandma Bea</h3>
|
|
<p class="character-age">70s · The Elder</p>
|
|
<p class="character-desc">Sharp-witted, her body is aging, but her spirit is still fiery. Deeply religious, hilarious without trying, emotionally sharp under her exterior. A self-declared "prayer warrior" who hosts late-night intercessions via WhatsApp. Struggles with the conflict between divine fate and algorithmic control.</p>
|
|
</div>
|
|
<div class="character-card joanna reveal">
|
|
<img src="img/char-joanna.jpg" alt="Joanna — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Joanna</h3>
|
|
<p class="character-age">15–17 · The Youngest</p>
|
|
<p class="character-desc">Youngest daughter, quiet, artistic, tech savvy, neurodivergent, and emotionally attuned. Not taken seriously, but sees everything. Speaks blunt truths that make everyone uncomfortable. She unfolds into quiet leadership. Cracks the "code" of the algorithm and its reasoning.</p>
|
|
</div>
|
|
<div class="character-card missy reveal">
|
|
<img src="img/char-missy.jpg" alt="Missy — reference photo" class="character-photo" loading="lazy">
|
|
<h3 class="character-name">Missy</h3>
|
|
<p class="character-age">30s · The Black Sheep</p>
|
|
<p class="character-desc">Younger aunt, slightly unhinged unrecognized artist, bitingly funny, seen as "wasting potential." Deeply intuitive, emotionally messy, but honest. She spits in the face of the lottery. She never asked to be saved. But her unwavering integrity, her refusal to "perform" worthiness—that's exactly what makes her worthy.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CLOSING -->
|
|
<div class="closing-section">
|
|
<p class="closing-question reveal"><strong>Who were we... when it mattered most?</strong><br><br>And if the old world is ending...<br>are we worthy of what comes next?</p>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- CREATOR -->
|
|
<section id="creator">
|
|
<div class="reveal">
|
|
<p class="section-label">About</p>
|
|
<h2 class="section-title">The Creator</h2>
|
|
</div>
|
|
<div class="creator-section reveal">
|
|
<img src="img/michelle-sam.jpg" alt="Elle — Writer and Creator" class="creator-photo" loading="lazy">
|
|
<div class="creator-info">
|
|
<h3 class="creator-name">Elle</h3>
|
|
<p class="creator-role">Writer · Creator · Visionary</p>
|
|
<p class="creator-bio">Elle is a storyteller, artist, and cultural architect working at the intersection of Afrofuturism, grounded sci-fi, and intimate family drama. Drawing from deep personal experience—loss, resilience, and the radical act of remembering—she crafts narratives that challenge who gets to be saved, and why. <em>The Last Draw</em> is her debut feature project, born from the belief that the future belongs to the unseen, the underestimated, and the unapologetically authentic.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- TEAM -->
|
|
<section id="team">
|
|
<div class="reveal">
|
|
<p class="section-label">Collaborators</p>
|
|
<h2 class="section-title">The Team</h2>
|
|
</div>
|
|
<div class="team-grid reveal">
|
|
<div class="team-card">
|
|
<img src="img/team-1.jpg" alt="Team member" loading="lazy">
|
|
</div>
|
|
<div class="team-card">
|
|
<img src="img/team-2.jpg" alt="Team member" loading="lazy">
|
|
</div>
|
|
<div class="team-card">
|
|
<img src="img/team-3.jpg" alt="Team member" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- STRATEGY -->
|
|
<section id="strategy">
|
|
<div class="reveal">
|
|
<p class="section-label">Vision</p>
|
|
<h2 class="section-title">Strategy & Distribution</h2>
|
|
</div>
|
|
<div class="strategy-gallery reveal">
|
|
<img src="img/strategy-1.jpg" alt="Marketing and distribution strategy" loading="lazy">
|
|
<img src="img/strategy-2.jpg" alt="Audience and market positioning" loading="lazy">
|
|
<img src="img/strategy-3.jpg" alt="Release and rollout plan" loading="lazy">
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer id="contact">
|
|
<p class="footer-title">The Last Draw</p>
|
|
<p class="footer-author">Written by Elle</p>
|
|
<a href="https://cinesthesia.art" class="footer-link" target="_blank">cinesthesia.art</a>
|
|
<p class="footer-copy">© 2025 Elle / 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));
|
|
|
|
// Particle canvas - lottery numbers / falling data
|
|
const canvas = document.getElementById('hero-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = canvas.offsetWidth;
|
|
canvas.height = canvas.offsetHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = -20;
|
|
this.speed = 0.3 + Math.random() * 1.5;
|
|
this.opacity = 0.1 + Math.random() * 0.4;
|
|
this.size = Math.random() < 0.3 ? 10 + Math.random() * 14 : 2 + Math.random() * 3;
|
|
this.isNumber = this.size > 8;
|
|
this.value = this.isNumber ? Math.floor(Math.random() * 10) : null;
|
|
this.drift = (Math.random() - 0.5) * 0.3;
|
|
}
|
|
update() {
|
|
this.y += this.speed;
|
|
this.x += this.drift;
|
|
if (this.y > canvas.height + 20) this.reset();
|
|
}
|
|
draw() {
|
|
ctx.globalAlpha = this.opacity;
|
|
if (this.isNumber) {
|
|
ctx.fillStyle = '#FCD116';
|
|
ctx.font = `${this.size}px 'Bebas Neue', monospace`;
|
|
ctx.fillText(this.value, this.x, this.y);
|
|
} else {
|
|
ctx.fillStyle = '#CE1126';
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
}
|
|
|
|
const particles = Array.from({ length: 60 }, () => {
|
|
const p = new Particle();
|
|
p.y = Math.random() * canvas.height;
|
|
return p;
|
|
});
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
ctx.globalAlpha = 1;
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|