1869 lines
61 KiB
HTML
1869 lines
61 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WORLDPLAY: To be Defined | June 7–13, 2026</title>
|
||
<meta name="description" content="WORLDPLAY is a pop-up physical hub for prefiguring and prehearsing postcapitalist futures through fiction, performance and play. June 7–13, 2026 @ Commons Hub, Austria.">
|
||
<meta property="og:title" content="WORLDPLAY: To be Defined">
|
||
<meta property="og:description" content="A pop-up physical hub for prefiguring postcapitalist futures through fiction, performance and play.">
|
||
<meta property="og:type" content="website">
|
||
<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=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-dark: #0a0a0f;
|
||
--bg-card: #12121a;
|
||
--bg-input: #1a1a25;
|
||
--text-primary: #f0f0f5;
|
||
--text-secondary: #a0a0b0;
|
||
--accent-purple: #9d4edd;
|
||
--accent-cyan: #00d9ff;
|
||
--accent-magenta: #ff006e;
|
||
--accent-green: #00ff88;
|
||
--accent-orange: #ff9500;
|
||
--gradient-1: linear-gradient(135deg, #9d4edd 0%, #ff006e 100%);
|
||
--gradient-2: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
|
||
--gradient-3: linear-gradient(135deg, #ff006e 0%, #ff9500 100%);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
background-color: var(--bg-dark);
|
||
color: var(--text-primary);
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Particle Canvas */
|
||
#particles-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Animated background grid */
|
||
.bg-grid {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image:
|
||
linear-gradient(rgba(157, 78, 221, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(157, 78, 221, 0.03) 1px, transparent 1px);
|
||
background-size: 50px 50px;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Floating orbs */
|
||
.orb {
|
||
position: fixed;
|
||
border-radius: 50%;
|
||
filter: blur(80px);
|
||
opacity: 0.4;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
animation: orbFloat 20s ease-in-out infinite;
|
||
}
|
||
|
||
.orb-1 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: var(--accent-purple);
|
||
top: 10%;
|
||
left: -10%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.orb-2 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: var(--accent-cyan);
|
||
top: 60%;
|
||
right: -5%;
|
||
animation-delay: -7s;
|
||
}
|
||
|
||
.orb-3 {
|
||
width: 350px;
|
||
height: 350px;
|
||
background: var(--accent-magenta);
|
||
bottom: -10%;
|
||
left: 30%;
|
||
animation-delay: -14s;
|
||
}
|
||
|
||
@keyframes orbFloat {
|
||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||
25% { transform: translate(30px, -30px) scale(1.1); }
|
||
50% { transform: translate(-20px, 20px) scale(0.9); }
|
||
75% { transform: translate(10px, 40px) scale(1.05); }
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
padding: 1.5rem 2rem;
|
||
background: rgba(10, 10, 15, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
nav .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
background: var(--gradient-1);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
list-style: none;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.nav-toggle {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-primary);
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 8rem 2rem 4rem;
|
||
position: relative;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(circle, rgba(157, 78, 221, 0.15) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.glitch-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: clamp(3rem, 12vw, 8rem);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
margin-bottom: 0.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.hero h1 .highlight {
|
||
background: var(--gradient-1);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Glitch effect */
|
||
.glitch {
|
||
position: relative;
|
||
}
|
||
|
||
.glitch::before,
|
||
.glitch::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
}
|
||
|
||
.glitch:hover::before {
|
||
animation: glitch-1 0.3s linear infinite;
|
||
color: var(--accent-cyan);
|
||
opacity: 0.8;
|
||
z-index: -1;
|
||
}
|
||
|
||
.glitch:hover::after {
|
||
animation: glitch-2 0.3s linear infinite;
|
||
color: var(--accent-magenta);
|
||
opacity: 0.8;
|
||
z-index: -2;
|
||
}
|
||
|
||
@keyframes glitch-1 {
|
||
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -2px); }
|
||
20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 2px); }
|
||
40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
|
||
60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
|
||
80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
|
||
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
|
||
}
|
||
|
||
@keyframes glitch-2 {
|
||
0% { clip-path: inset(65% 0 25% 0); transform: translate(2px, 2px); }
|
||
20% { clip-path: inset(10% 0 85% 0); transform: translate(-2px, -2px); }
|
||
40% { clip-path: inset(75% 0 15% 0); transform: translate(2px, -2px); }
|
||
60% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
|
||
80% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 2px); }
|
||
100% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); }
|
||
}
|
||
|
||
.subtitle {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: clamp(1rem, 3vw, 1.5rem);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 2rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 2rem;
|
||
justify-content: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 1.1rem;
|
||
padding: 0.75rem 1.5rem;
|
||
background: rgba(157, 78, 221, 0.1);
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
border-radius: 50px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.meta-item:hover {
|
||
background: rgba(157, 78, 221, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.meta-item .icon {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.cta-group {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn {
|
||
padding: 1rem 2rem;
|
||
border-radius: 4px;
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
border: none;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--gradient-1);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--accent-purple);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(157, 78, 221, 0.1);
|
||
box-shadow: 0 0 20px rgba(157, 78, 221, 0.3);
|
||
}
|
||
|
||
.scroll-indicator {
|
||
position: absolute;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
.scroll-indicator span {
|
||
display: block;
|
||
width: 2px;
|
||
height: 40px;
|
||
background: linear-gradient(to bottom, var(--accent-purple), transparent);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
50% { transform: translateX(-50%) translateY(10px); }
|
||
}
|
||
|
||
/* Sections */
|
||
section {
|
||
padding: 6rem 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.section-tag {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.8rem;
|
||
color: var(--accent-cyan);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(2rem, 5vw, 3rem);
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-subtitle {
|
||
color: var(--text-secondary);
|
||
font-size: 1.1rem;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* About Section */
|
||
.about {
|
||
background: linear-gradient(180deg, transparent 0%, rgba(157, 78, 221, 0.05) 50%, transparent 100%);
|
||
}
|
||
|
||
.about-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.about-text p {
|
||
margin-bottom: 1.5rem;
|
||
color: var(--text-secondary);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.about-text p:first-of-type {
|
||
font-size: 1.2rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.about-text strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.about-visual {
|
||
position: relative;
|
||
height: 400px;
|
||
}
|
||
|
||
.floating-card {
|
||
position: absolute;
|
||
background: var(--bg-card);
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
border-radius: 8px;
|
||
padding: 1.5rem;
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.85rem;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.floating-card:hover {
|
||
border-color: var(--accent-cyan);
|
||
transform: scale(1.05) !important;
|
||
}
|
||
|
||
.floating-card:nth-child(1) {
|
||
top: 0;
|
||
left: 0;
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
.floating-card:nth-child(2) {
|
||
top: 30%;
|
||
right: 0;
|
||
animation: float 6s ease-in-out infinite 1s;
|
||
}
|
||
|
||
.floating-card:nth-child(3) {
|
||
bottom: 10%;
|
||
left: 15%;
|
||
animation: float 6s ease-in-out infinite 2s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-15px); }
|
||
}
|
||
|
||
.floating-card .emoji {
|
||
font-size: 2rem;
|
||
margin-bottom: 0.5rem;
|
||
display: block;
|
||
}
|
||
|
||
/* Location Section */
|
||
.location {
|
||
background: var(--bg-card);
|
||
border-top: 1px solid rgba(157, 78, 221, 0.2);
|
||
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.location-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
}
|
||
|
||
.location-info h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.location-info p {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.location-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
padding: 1rem;
|
||
background: rgba(157, 78, 221, 0.05);
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.detail-item:hover {
|
||
background: rgba(157, 78, 221, 0.1);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.detail-item .icon {
|
||
font-size: 1.5rem;
|
||
min-width: 40px;
|
||
}
|
||
|
||
.detail-item strong {
|
||
display: block;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.detail-item span {
|
||
color: var(--text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.location-map {
|
||
background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.location-map::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 80 L30 50 L40 60 L50 30 L60 55 L70 40 L80 70 L90 50' stroke='%239d4edd' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3Cpath d='M10 85 L25 60 L35 70 L50 40 L65 60 L75 45 L90 75' stroke='%2300d9ff' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E") center/cover;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.mountain-icon {
|
||
font-size: 8rem;
|
||
opacity: 0.5;
|
||
animation: mountainPulse 4s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes mountainPulse {
|
||
0%, 100% { transform: scale(1); opacity: 0.5; }
|
||
50% { transform: scale(1.05); opacity: 0.7; }
|
||
}
|
||
|
||
.location-badge {
|
||
position: absolute;
|
||
bottom: 1rem;
|
||
left: 1rem;
|
||
background: var(--bg-dark);
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 6px;
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.8rem;
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
}
|
||
|
||
/* Community Section */
|
||
.community-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.community-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.community-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: var(--gradient-1);
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.community-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.community-card:hover {
|
||
border-color: var(--accent-purple);
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.community-card .icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.community-card h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.community-card p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Programme Section */
|
||
.programme {
|
||
background: linear-gradient(180deg, transparent 0%, rgba(0, 217, 255, 0.03) 50%, transparent 100%);
|
||
}
|
||
|
||
.programme-track {
|
||
margin-bottom: 4rem;
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.programme-track.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.track-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.track-emoji {
|
||
font-size: 2.5rem;
|
||
animation: emojiPulse 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes emojiPulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
.track-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.track-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
}
|
||
|
||
.track-description p {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.track-description ul {
|
||
list-style: none;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.track-description li {
|
||
position: relative;
|
||
padding-left: 1.5rem;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.track-description li::before {
|
||
content: '>';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--accent-cyan);
|
||
font-family: 'Space Mono', monospace;
|
||
}
|
||
|
||
.track-examples {
|
||
background: var(--bg-card);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.track-examples h4 {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.8rem;
|
||
color: var(--accent-purple);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.example-tag {
|
||
display: inline-block;
|
||
background: rgba(157, 78, 221, 0.1);
|
||
color: var(--text-secondary);
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 20px;
|
||
font-size: 0.85rem;
|
||
margin: 0.25rem;
|
||
transition: all 0.3s;
|
||
cursor: default;
|
||
}
|
||
|
||
.example-tag:hover {
|
||
background: rgba(157, 78, 221, 0.3);
|
||
color: var(--text-primary);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Registration Form Section */
|
||
.register {
|
||
background: var(--bg-card);
|
||
border-top: 1px solid rgba(157, 78, 221, 0.2);
|
||
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.register-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.register-info h3 {
|
||
font-size: 1.3rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.register-info p {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.register-perks {
|
||
list-style: none;
|
||
}
|
||
|
||
.register-perks li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.register-perks .check {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: var(--gradient-2);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.register-form {
|
||
background: var(--bg-dark);
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
border-radius: 16px;
|
||
padding: 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.register-form::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--gradient-1);
|
||
}
|
||
|
||
.form-header {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.form-header h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.form-header p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-group label .required {
|
||
color: var(--accent-magenta);
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 1rem;
|
||
background: var(--bg-input);
|
||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||
border-radius: 8px;
|
||
color: var(--text-primary);
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 1rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent-purple);
|
||
box-shadow: 0 0 20px rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.form-group input::placeholder,
|
||
.form-group textarea::placeholder {
|
||
color: var(--text-secondary);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.form-group select {
|
||
cursor: pointer;
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239d4edd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 1rem center;
|
||
}
|
||
|
||
.form-group select option {
|
||
background: var(--bg-dark);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background: var(--bg-input);
|
||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.checkbox-item:hover {
|
||
border-color: var(--accent-purple);
|
||
}
|
||
|
||
.checkbox-item input {
|
||
width: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.checkbox-item input:checked + span {
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.checkbox-item span {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-submit {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.form-submit .btn {
|
||
width: 100%;
|
||
padding: 1.25rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.form-message {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin-top: 1rem;
|
||
display: none;
|
||
}
|
||
|
||
.form-message.success {
|
||
display: block;
|
||
background: rgba(0, 255, 136, 0.1);
|
||
border: 1px solid var(--accent-green);
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.form-message.error {
|
||
display: block;
|
||
background: rgba(255, 0, 110, 0.1);
|
||
border: 1px solid var(--accent-magenta);
|
||
color: var(--accent-magenta);
|
||
}
|
||
|
||
/* Call to Action */
|
||
.cta-section {
|
||
text-align: center;
|
||
padding: 8rem 0;
|
||
background: linear-gradient(180deg, transparent 0%, rgba(157, 78, 221, 0.1) 100%);
|
||
position: relative;
|
||
}
|
||
|
||
.cta-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 500px;
|
||
height: 500px;
|
||
background: radial-gradient(circle, rgba(157, 78, 221, 0.2) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.cta-section p {
|
||
color: var(--text-secondary);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 2rem;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: var(--bg-card);
|
||
border-top: 1px solid rgba(157, 78, 221, 0.2);
|
||
padding: 4rem 0 2rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr;
|
||
gap: 4rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.footer-brand .logo {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
display: inline-block;
|
||
}
|
||
|
||
.footer-brand p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.footer-links h4 {
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.footer-links ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.footer-bottom {
|
||
text-align: center;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid rgba(157, 78, 221, 0.1);
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Cursor trail effect */
|
||
.cursor-trail {
|
||
position: fixed;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--accent-purple);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 968px) {
|
||
.about-content,
|
||
.location-content,
|
||
.track-content,
|
||
.register-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.about-visual {
|
||
display: none;
|
||
}
|
||
|
||
.footer-content {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg-dark);
|
||
flex-direction: column;
|
||
padding: 2rem;
|
||
gap: 1rem;
|
||
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
|
||
.nav-links.active {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-toggle {
|
||
display: block;
|
||
}
|
||
|
||
.hero-meta {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
section {
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
.programme-track {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.orb {
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
|
||
/* Loading animation */
|
||
.page-loader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--bg-dark);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10000;
|
||
transition: opacity 0.5s, visibility 0.5s;
|
||
}
|
||
|
||
.page-loader.hidden {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.loader-text {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 2rem;
|
||
background: var(--gradient-1);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: loaderPulse 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes loaderPulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Page Loader -->
|
||
<div class="page-loader">
|
||
<span class="loader-text">WORLDPLAY</span>
|
||
</div>
|
||
|
||
<!-- Particle Canvas -->
|
||
<canvas id="particles-canvas"></canvas>
|
||
|
||
<!-- Background Elements -->
|
||
<div class="bg-grid"></div>
|
||
<div class="orb orb-1"></div>
|
||
<div class="orb orb-2"></div>
|
||
<div class="orb orb-3"></div>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<a href="#" class="logo">WORLDPLAY</a>
|
||
<button class="nav-toggle" aria-label="Toggle navigation">☰</button>
|
||
<ul class="nav-links">
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#programme">Programme</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#logistics">Logistics</a></li>
|
||
<li><a href="#register" class="btn btn-primary" style="padding: 0.5rem 1rem;">Register</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="glitch-wrapper">
|
||
<h1 class="glitch" data-text="WORLDPLAY"><span class="highlight">WORLD</span>PLAY</h1>
|
||
</div>
|
||
<p class="subtitle">: To be Defined</p>
|
||
|
||
<div class="cta-group">
|
||
<a href="#register" class="btn btn-primary">Register Interest</a>
|
||
<a href="#programme" class="btn btn-secondary">Explore Programme</a>
|
||
</div>
|
||
|
||
<div class="scroll-indicator">
|
||
<span></span>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<span class="section-tag">What is WORLDPLAY?</span>
|
||
<h2 class="section-title">Avant-garde revolutionaries LARPing as commons economists</h2>
|
||
|
||
<p>WORLDPLAY is a <strong>pop-up physical hub for prefiguring postcapitalist futures</strong> through fiction, performance and play—the opening move of a new event series and emerging network.</p>
|
||
|
||
<p>A beckoning call to sci-fi writers, game-makers, artivists, LARPers, weird economists and eutopian dreamers to collectively scribble futures, materialise speculative artefacts, and devise ways of hijacking public spaces, cyberspace and eventually reality itself.</p>
|
||
</div>
|
||
|
||
<div class="about-visual">
|
||
<div class="floating-card">
|
||
<span class="emoji">🎭</span>
|
||
Reality as<br>design space
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">✒️</span>
|
||
Speculative<br>fictions
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">🎲</span>
|
||
Games as<br>social orgs
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="community" class="community">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Built for Peers</span>
|
||
<h2 class="section-title">Co-Created Programme</h2>
|
||
<p class="section-subtitle">Partly curated, partly self-organised unconference style—emphasising lasting peer collaboration.</p>
|
||
</div>
|
||
|
||
<div class="community-grid">
|
||
<div class="community-card">
|
||
<span class="icon">🎤</span>
|
||
<h3>Shape the Programme</h3>
|
||
<p>Pitch sessions and co-labs in advance and on-site</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">📚</span>
|
||
<h3>Digital Publishing</h3>
|
||
<p>Partner with orgs like Institute of Network Cultures</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">🎮</span>
|
||
<h3>Game Prototyping</h3>
|
||
<p>Selected games resourced and shared as open designs</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">🔗</span>
|
||
<h3>Distributed Network</h3>
|
||
<p>Stay connected through shared project threads</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">💰</span>
|
||
<h3>Sustainable Models</h3>
|
||
<p>Co-ops, art DAOs, fiction-fueled crowdfunds</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">🌐</span>
|
||
<h3>Open Source Worlds</h3>
|
||
<p>Co-author worlds through games and experiments</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="programme" class="programme">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Seed Programme</span>
|
||
<h2 class="section-title">Interwoven Threads</h2>
|
||
<p class="section-subtitle">Plus reality-bending games, unfinished stories, LARPs, and experiments you bring.</p>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🎭</span>
|
||
<h3 class="track-title">Playing with Reality</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<p>Culture and social conventions as reprogrammable design spaces. Interventions and reality hacks blurring performance and politics.</p>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Inspirations</h4>
|
||
<span class="example-tag">The Yes Men</span>
|
||
<span class="example-tag">Bureau of Inverse Technology</span>
|
||
<span class="example-tag">Billboard Liberation Front</span>
|
||
<span class="example-tag">Center for Political Beauty</span>
|
||
<span class="example-tag">Situationist International</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">✒️</span>
|
||
<h3 class="track-title">Socio-Economic Science Fictions</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Hyperstitional fictions grounded in prefigurative politics</li>
|
||
<li>Peer-supported speculative writing workshops</li>
|
||
<li>Co-authoring worlds through experimental formats</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Inspirations</h4>
|
||
<span class="example-tag">Walkaway</span>
|
||
<span class="example-tag">Ministry for the Future</span>
|
||
<span class="example-tag">Multispecies Cities</span>
|
||
<span class="example-tag">Everything for Everyone</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🛠</span>
|
||
<h3 class="track-title">Guerrilla Futuring</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Artefacts from parallel/future realities</li>
|
||
<li>Soft LARPs and worldbuilding exercises</li>
|
||
<li>Street interventions and commonist propaganda</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Inspirations</h4>
|
||
<span class="example-tag">Futurematic</span>
|
||
<span class="example-tag">Treaty of Finsbury Park</span>
|
||
<span class="example-tag">Queer Embassy of Possible Futures</span>
|
||
<span class="example-tag">NOVA: Future Thoughts</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🎲</span>
|
||
<h3 class="track-title">Tabletop & Game Commons</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Radical analogue and digital/hybrid games</li>
|
||
<li>Prototyping collectively-owned game artefacts and mechanics</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Inspirations</h4>
|
||
<span class="example-tag">Half-Earth Socialism</span>
|
||
<span class="example-tag">Post-Growth Toolkit</span>
|
||
<span class="example-tag">Social Strike Game</span>
|
||
<span class="example-tag">The Transition Year</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🌱</span>
|
||
<h3 class="track-title">Infrastructures for Imagination</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Open-source world-making platforms</li>
|
||
<li>Anticipatory fiction archives</li>
|
||
<li>Connecting distributed nodes of practice</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Inspirations</h4>
|
||
<span class="example-tag">Witnesspedia</span>
|
||
<span class="example-tag">POCAS</span>
|
||
<span class="example-tag">Nordic Larp Wiki</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="logistics" class="location">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Logistics</span>
|
||
<h2 class="section-title">When & Where</h2>
|
||
</div>
|
||
|
||
<div class="location-content">
|
||
<div class="location-info">
|
||
<div class="location-details">
|
||
<div class="detail-item">
|
||
<span class="icon">📅</span>
|
||
<div>
|
||
<strong>June 7–13, 2026</strong>
|
||
<span>7 days of worldbuilding</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">📍</span>
|
||
<div>
|
||
<strong>Hirschwang an der Rax, Austria</strong>
|
||
<span>Austrian Alps, ~1.5 hours from Vienna by train</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">🏠</span>
|
||
<div>
|
||
<strong>Commons Hub</strong>
|
||
<span>Co-working/co-living venue for artists and decentralized communities</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="location-map">
|
||
<span class="mountain-icon">🏔️</span>
|
||
<div class="location-badge">
|
||
🇦🇹 Austria · Alps · Commons Hub
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="register" class="register">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Join Us</span>
|
||
<h2 class="section-title">Register Interest</h2>
|
||
<p class="section-subtitle">First edition. Limited spaces.</p>
|
||
</div>
|
||
|
||
<div class="register-content">
|
||
<div class="register-info">
|
||
<h3>Early registration gets you</h3>
|
||
|
||
<ul class="register-perks">
|
||
<li>
|
||
<span class="check">✓</span>
|
||
<span>Priority booking when tickets open</span>
|
||
</li>
|
||
<li>
|
||
<span class="check">✓</span>
|
||
<span>Pitch sessions and co-labs</span>
|
||
</li>
|
||
<li>
|
||
<span class="check">✓</span>
|
||
<span>Pre-event online gatherings</span>
|
||
</li>
|
||
<li>
|
||
<span class="check">✓</span>
|
||
<span>Programme development updates</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<h3 style="margin-top: 2rem;">Who should attend?</h3>
|
||
<p>Sci-fi writers, game-makers, artivists, LARPers, weird economists, futurists, performers, eutopian dreamers.</p>
|
||
</div>
|
||
|
||
<form class="register-form" id="registration-form">
|
||
<div class="form-header">
|
||
<h3>Express Interest</h3>
|
||
<p>We'll be in touch with next steps</p>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>First Name <span class="required">*</span></label>
|
||
<input type="text" name="firstName" required placeholder="Your first name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Last Name <span class="required">*</span></label>
|
||
<input type="text" name="lastName" required placeholder="Your last name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Email <span class="required">*</span></label>
|
||
<input type="email" name="email" required placeholder="your@email.com">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Location</label>
|
||
<input type="text" name="location" placeholder="City, Country">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>How would you describe yourself?</label>
|
||
<select name="role">
|
||
<option value="">Select one...</option>
|
||
<option value="writer">Sci-Fi Writer / Storyteller</option>
|
||
<option value="gamemaker">Game Designer / Maker</option>
|
||
<option value="artist">Artist / Performer</option>
|
||
<option value="larper">LARPer / Roleplayer</option>
|
||
<option value="economist">Weird Economist / Commons Activist</option>
|
||
<option value="futurist">Futurist / Speculative Designer</option>
|
||
<option value="academic">Academic / Researcher</option>
|
||
<option value="tech">Technologist / Developer</option>
|
||
<option value="curious">Curious Explorer</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Which threads interest you most?</label>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="interests" value="reality">
|
||
<span>🎭 Playing with Reality</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="interests" value="fiction">
|
||
<span>✒️ Science Fictions</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="interests" value="worlding">
|
||
<span>🛠 Guerrilla Futuring</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="interests" value="games">
|
||
<span>🎲 Game Commons</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="interests" value="infrastructure">
|
||
<span>🌱 Infrastructures</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Would you like to contribute to the programme?</label>
|
||
<select name="contribute">
|
||
<option value="">Select one...</option>
|
||
<option value="session">Yes - I'd like to pitch a session</option>
|
||
<option value="workshop">Yes - I'd like to run a workshop</option>
|
||
<option value="game">Yes - I'd like to share/playtest a game</option>
|
||
<option value="performance">Yes - I'd like to perform/facilitate</option>
|
||
<option value="collaborate">Yes - I'd like to collaborate on something</option>
|
||
<option value="participate">No - I'd like to participate</option>
|
||
<option value="unsure">Not sure yet</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Anything else you'd like to share?</label>
|
||
<textarea name="message" placeholder="Tell us about your work, what excites you about WORLDPLAY, or any questions you have..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-submit">
|
||
<button type="submit" class="btn btn-primary">Register Interest</button>
|
||
</div>
|
||
|
||
<div class="form-message" id="form-message"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>Ready to <span style="background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Play</span>?</h2>
|
||
<p>Join fellow dreamers, makers, and reality-benders in prefiguring postcapitalist futures.</p>
|
||
<div class="cta-group">
|
||
<a href="#register" class="btn btn-primary">Register Now</a>
|
||
<a href="mailto:hello@worldplay.earth" class="btn btn-secondary">Get in Touch</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-brand">
|
||
<span class="logo">WORLDPLAY</span>
|
||
<p>A pop-up physical hub for prefiguring and prehearsing postcapitalist futures through fiction, performance and play.</p>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>Event</h4>
|
||
<ul>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#location">Location</a></li>
|
||
<li><a href="#programme">Programme</a></li>
|
||
<li><a href="#register">Register</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-links">
|
||
<h4>Connect</h4>
|
||
<ul>
|
||
<li><a href="mailto:hello@worldplay.earth">Email</a></li>
|
||
<li><a href="#">Newsletter</a></li>
|
||
<li><a href="https://commonshub.net" target="_blank" rel="noopener">Commons Hub</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>WORLDPLAY 2026 · Built for the commons · <span style="color: var(--accent-purple);">Reality is a design space</span></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Page loader
|
||
window.addEventListener('load', () => {
|
||
setTimeout(() => {
|
||
document.querySelector('.page-loader').classList.add('hidden');
|
||
}, 800);
|
||
});
|
||
|
||
// Mobile navigation toggle
|
||
const navToggle = document.querySelector('.nav-toggle');
|
||
const navLinks = document.querySelector('.nav-links');
|
||
|
||
navToggle.addEventListener('click', () => {
|
||
navLinks.classList.toggle('active');
|
||
});
|
||
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
navLinks.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// Particle animation
|
||
const canvas = document.getElementById('particles-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
let particles = [];
|
||
let mouse = { x: null, y: null, radius: 150 };
|
||
|
||
function resizeCanvas() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
}
|
||
|
||
resizeCanvas();
|
||
window.addEventListener('resize', resizeCanvas);
|
||
|
||
window.addEventListener('mousemove', (e) => {
|
||
mouse.x = e.x;
|
||
mouse.y = e.y;
|
||
});
|
||
|
||
window.addEventListener('mouseout', () => {
|
||
mouse.x = null;
|
||
mouse.y = null;
|
||
});
|
||
|
||
class Particle {
|
||
constructor() {
|
||
this.x = Math.random() * canvas.width;
|
||
this.y = Math.random() * canvas.height;
|
||
this.size = Math.random() * 2 + 0.5;
|
||
this.baseX = this.x;
|
||
this.baseY = this.y;
|
||
this.density = (Math.random() * 30) + 1;
|
||
this.color = Math.random() > 0.5 ? 'rgba(157, 78, 221, 0.5)' : 'rgba(0, 217, 255, 0.5)';
|
||
}
|
||
|
||
draw() {
|
||
ctx.fillStyle = this.color;
|
||
ctx.beginPath();
|
||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
}
|
||
|
||
update() {
|
||
let dx = mouse.x - this.x;
|
||
let dy = mouse.y - this.y;
|
||
let distance = Math.sqrt(dx * dx + dy * dy);
|
||
let forceDirectionX = dx / distance;
|
||
let forceDirectionY = dy / distance;
|
||
let maxDistance = mouse.radius;
|
||
let force = (maxDistance - distance) / maxDistance;
|
||
let directionX = forceDirectionX * force * this.density;
|
||
let directionY = forceDirectionY * force * this.density;
|
||
|
||
if (distance < mouse.radius && mouse.x !== null) {
|
||
this.x -= directionX;
|
||
this.y -= directionY;
|
||
} else {
|
||
if (this.x !== this.baseX) {
|
||
let dx = this.x - this.baseX;
|
||
this.x -= dx / 10;
|
||
}
|
||
if (this.y !== this.baseY) {
|
||
let dy = this.y - this.baseY;
|
||
this.y -= dy / 10;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function initParticles() {
|
||
particles = [];
|
||
const numberOfParticles = Math.min((canvas.width * canvas.height) / 15000, 150);
|
||
for (let i = 0; i < numberOfParticles; i++) {
|
||
particles.push(new Particle());
|
||
}
|
||
}
|
||
|
||
function connectParticles() {
|
||
let opacityValue = 1;
|
||
for (let a = 0; a < particles.length; a++) {
|
||
for (let b = a; b < particles.length; b++) {
|
||
let distance = ((particles[a].x - particles[b].x) * (particles[a].x - particles[b].x))
|
||
+ ((particles[a].y - particles[b].y) * (particles[a].y - particles[b].y));
|
||
if (distance < 15000) {
|
||
opacityValue = 1 - (distance / 15000);
|
||
ctx.strokeStyle = `rgba(157, 78, 221, ${opacityValue * 0.2})`;
|
||
ctx.lineWidth = 0.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(particles[a].x, particles[a].y);
|
||
ctx.lineTo(particles[b].x, particles[b].y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function animateParticles() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
for (let i = 0; i < particles.length; i++) {
|
||
particles[i].draw();
|
||
particles[i].update();
|
||
}
|
||
connectParticles();
|
||
requestAnimationFrame(animateParticles);
|
||
}
|
||
|
||
initParticles();
|
||
animateParticles();
|
||
|
||
window.addEventListener('resize', () => {
|
||
resizeCanvas();
|
||
initParticles();
|
||
});
|
||
|
||
// Scroll reveal for programme tracks
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.programme-track, .community-card').forEach((el, index) => {
|
||
el.style.transitionDelay = `${index * 0.1}s`;
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Form submission
|
||
const form = document.getElementById('registration-form');
|
||
const formMessage = document.getElementById('form-message');
|
||
|
||
form.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(form);
|
||
const data = {};
|
||
|
||
formData.forEach((value, key) => {
|
||
if (key === 'interests') {
|
||
if (!data[key]) data[key] = [];
|
||
data[key].push(value);
|
||
} else {
|
||
data[key] = value;
|
||
}
|
||
});
|
||
|
||
try {
|
||
const response = await fetch('/api/register', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data),
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok) {
|
||
formMessage.textContent = '✓ Thank you! We\'ll be in touch soon with next steps.';
|
||
formMessage.className = 'form-message success';
|
||
form.reset();
|
||
} else {
|
||
throw new Error(result.error || 'Something went wrong');
|
||
}
|
||
} catch (error) {
|
||
formMessage.textContent = '✗ ' + error.message;
|
||
formMessage.className = 'form-message error';
|
||
}
|
||
});
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|