1957 lines
70 KiB
HTML
1957 lines
70 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="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌍</text></svg>">
|
||
<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;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-links li {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
transition: color 0.3s;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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,
|
||
.highlight-text {
|
||
background: var(--gradient-1);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
color: transparent;
|
||
display: inline;
|
||
}
|
||
|
||
|
||
.subtitle {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: clamp(1.2rem, 3.5vw, 1.8rem);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 2rem;
|
||
font-style: italic;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.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-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: 20%;
|
||
right: 0;
|
||
animation: float 6s ease-in-out infinite 1s;
|
||
}
|
||
|
||
.floating-card:nth-child(3) {
|
||
bottom: 5%;
|
||
left: 10%;
|
||
animation: float 6s ease-in-out infinite 2s;
|
||
}
|
||
|
||
.floating-card:nth-child(4) {
|
||
top: 50%;
|
||
right: 0;
|
||
animation: float 6s ease-in-out infinite 3s;
|
||
}
|
||
|
||
.floating-card:nth-child(5) {
|
||
bottom: 5%;
|
||
right: 5%;
|
||
animation: float 6s ease-in-out infinite 4s;
|
||
}
|
||
|
||
@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;
|
||
}
|
||
|
||
.venue-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.location-map:hover .venue-image {
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
@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: flex;
|
||
flex-wrap: wrap;
|
||
gap: 2rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.community-grid .community-card {
|
||
flex: 0 1 calc(33.333% - 1.5rem);
|
||
min-width: 280px;
|
||
max-width: 380px;
|
||
}
|
||
|
||
.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;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a.example-tag {
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
a.example-tag:hover {
|
||
background: rgba(0, 217, 255, 0.2);
|
||
color: var(--accent-cyan);
|
||
transform: scale(1.05);
|
||
border-color: rgba(0, 217, 255, 0.3);
|
||
}
|
||
|
||
span.example-tag:hover {
|
||
background: rgba(157, 78, 221, 0.3);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
.newsletter-checkbox {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
background: transparent;
|
||
border: 1px dashed rgba(157, 78, 221, 0.3);
|
||
padding: 0.75rem 1rem;
|
||
}
|
||
|
||
.newsletter-checkbox:hover {
|
||
border-color: var(--accent-cyan);
|
||
background: rgba(0, 217, 255, 0.05);
|
||
}
|
||
|
||
.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">
|
||
<h1><span class="highlight">WORLD</span>PLAY</h1>
|
||
<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">About</span>
|
||
<h2 class="section-title">What is WORLDPLAY?</h2>
|
||
|
||
<p>WORLDPLAY is the opening move of a network of avant-garde revolutionaries LARPing as some kind of commons economics activists. It is also the main title of a new event series, conceived as a <strong>pop-up physical hub for prefiguring and prehearsing postcapitalist futures</strong> through fiction, performance and play.</p>
|
||
|
||
<p>The first edition of WORLDPLAY issues a beckoning call to budding sci-fi writers, game-makers, artivists, LARPers, weird economists and general eutopian dreamers to collectively scribble futures, materialise speculative artefacts from parallel presents, establish living archives for radical imagination, and devise ways of hijacking public spaces, cyberspace and eventually reality itself.</p>
|
||
|
||
<p>Part experimental/experiential playground, part aspiring peer-to-peer guerrilla futuring social network, WORLDPLAY channels international and intersectional postcapitalist desire through a seed offering of counter-hegemonic fiction engines and games as social organisations.</p>
|
||
</div>
|
||
|
||
<div class="about-visual">
|
||
<div class="floating-card">
|
||
<span class="emoji">🎭</span>
|
||
Reality-bending
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">✒️</span>
|
||
Economic<br>sci-fi
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">🎲</span>
|
||
Games as<br>organisations
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">🌐</span>
|
||
Parallel<br>worlding
|
||
</div>
|
||
<div class="floating-card">
|
||
<span class="emoji">🔮</span>
|
||
Guerrilla<br>futuring
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="community" class="community">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Built for a Peer Community</span>
|
||
<h2 class="section-title">Co-Created Programme</h2>
|
||
<p class="section-subtitle">The event will feature a programme that is partly curated and partly self-organised in unconference style, with a strong emphasis on establishing lasting peer support and collaboration networks.</p>
|
||
</div>
|
||
|
||
<div class="community-grid">
|
||
<div class="community-card">
|
||
<span class="icon">🎤</span>
|
||
<h3>Shape the Programme</h3>
|
||
<p>Participants can shape the programme in advance and on-site by pitching sessions and "mycollabs"</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">📚</span>
|
||
<h3>Digital Publishing</h3>
|
||
<p>Publishing short sci-fi stories, tabletop games, LARP toolkits and other formats as an open-access anthology with partners like Bread Coop and the Institute of Network Cultures (TBC)</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">🎮</span>
|
||
<h3>Game Prototyping</h3>
|
||
<p>Any collectively prototyped games will be resourced for production and shared as open designs</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">🔗</span>
|
||
<h3>Distributed Network</h3>
|
||
<p>Distributed nodes of practice stay connected after the event through shared project threads</p>
|
||
</div>
|
||
<div class="community-card">
|
||
<span class="icon">💰</span>
|
||
<h3>Sustainable Models</h3>
|
||
<p>Exploring alternative revenue and self-sustaining models to support the network—co-ops, art DAOs, fiction-fueled crowdfunds, and more</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="programme" class="programme">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-tag">Seed Programme Offerings</span>
|
||
<h2 class="section-title">Interwoven Threads</h2>
|
||
<p class="section-subtitle">Interwoven threads and daily themes will include—plus any other angles, reality-bending games, unfinished stories, interactive performances, LARPs, experimental films and music, or "fake it till you make it" theories of change you bring with you.</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">
|
||
<ul>
|
||
<li>Unshackled play with social conventions, aka "reality", aka "the world"</li>
|
||
<li>Treating culture as reprogrammable design spaces</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Examples</h4>
|
||
<a href="https://en.wikipedia.org/wiki/The_Yes_Men" target="_blank" rel="noopener" class="example-tag">The Yes Men</a>
|
||
<a href="https://www.bureauit.org/decade/" target="_blank" rel="noopener" class="example-tag">Bureau of Inverse Technology</a>
|
||
<a href="https://en.wikipedia.org/wiki/Billboard_Liberation_Front" target="_blank" rel="noopener" class="example-tag">Billboard Liberation Front</a>
|
||
<a href="https://politicalbeauty.com/" target="_blank" rel="noopener" class="example-tag">Center for Political Beauty</a>
|
||
<a href="https://www.lutherblissett.net/" target="_blank" rel="noopener" class="example-tag">Luther Blissett Project</a>
|
||
<a href="https://en.wikipedia.org/wiki/Situationist_International" target="_blank" rel="noopener" class="example-tag">Situationist International</a>
|
||
</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>Short-form, poetic, and hyperstitional fictions grounded in prefigurative politics and weird economies</li>
|
||
<li>Workshopping and peer-supporting speculative writing in small, care-based constellations</li>
|
||
<li>Co-authoring alternative worlds and futures through games and other experimental formats</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Examples</h4>
|
||
<a href="https://en.wikipedia.org/wiki/Walkaway_(Doctorow_novel)" target="_blank" rel="noopener" class="example-tag">Walkaway</a>
|
||
<a href="https://en.wikipedia.org/wiki/The_Ministry_for_the_Future" target="_blank" rel="noopener" class="example-tag">The Ministry for the Future</a>
|
||
<a href="https://www.world-weaver-press.com/store/p4/Multispecies_Cities.html" target="_blank" rel="noopener" class="example-tag">Multispecies Cities: Solarpunk Urban Futures</a>
|
||
<a href="https://www.commonnotions.org/everything-for-everyone" target="_blank" rel="noopener" class="example-tag">An Oral History of the New York Commune, 2052–2072</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🛠</span>
|
||
<h3 class="track-title">Parallel Economic Worlding & Guerrilla Futuring</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Creating physical and digital artefacts drawn from parallel or future (eutopian/dystopian) realities</li>
|
||
<li>Soft LARPs, improvisational roleplay and worldbuilding exercises like "Sell Me This Postcapitalist Pen"</li>
|
||
<li>Taking speculative artefacts into streets and social media feeds—guerrilla interventions, flashmobs, appropriations of social media, and aesthetic commonist propaganda/memes</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Examples</h4>
|
||
<a href="https://extrapolationfactory.com/Futurematic" target="_blank" rel="noopener" class="example-tag">Futurematic</a>
|
||
<a href="https://medium.com/@futuryst/tomorrows-energy-today-f9051ba4d139" target="_blank" rel="noopener" class="example-tag">Tomorrow's Energy Today</a>
|
||
<a href="https://rat.computer/orfelia" target="_blank" rel="noopener" class="example-tag">A Night at the Orfelia</a>
|
||
<a href="https://treaty.finsburypark.live/" target="_blank" rel="noopener" class="example-tag">The Treaty of Finsbury Park</a>
|
||
<a href="https://archive.madhousehelsinki.fi/events/Natalia%20Skoczylas%20&%20Vishnu%20Vardhani%20Queer%20Embassy%20of%20Possible%20Futures" target="_blank" rel="noopener" class="example-tag">Queer Embassy of Possible Futures</a>
|
||
<a href="https://www.berlinerfestspiele.de/en/programm/2024/radical-playgrounds/programm/nova-ein-feministisches-spekulatives-larp" target="_blank" rel="noopener" class="example-tag">NOVA: Future Thoughts on Surviving Together</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🎲</span>
|
||
<h3 class="track-title">Iterating Eutopia on the Tabletop & Game Commons</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Sharing, playing, deconstructing and appropriating radical analogue (and digital/hybrid) games</li>
|
||
<li>Prototyping a game commons: co-created game artefacts, mechanics, and tools that anyone can remix, contribute to, and play with, collectively owned and sustained as a cultural and design commons</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Examples</h4>
|
||
<a href="https://sadpress.itch.io/utopia-on-the-tabletop" target="_blank" rel="noopener" class="example-tag">Utopia on the Tabletop</a>
|
||
<a href="https://gamechangers.wiki/editions/panke-gallery/" target="_blank" rel="noopener" class="example-tag">Game-Changers: The Game</a>
|
||
<a href="https://mauvaiscontact.info/kop/gamecommons/index.html" target="_blank" rel="noopener" class="example-tag">Game Commons Online Platform</a>
|
||
<a href="https://play.half.earth/" target="_blank" rel="noopener" class="example-tag">Half-Earth Socialism</a>
|
||
<a href="http://postgrowth.art/pages/the-game.html" target="_blank" rel="noopener" class="example-tag">Post-Growth Toolkit – The Game</a>
|
||
<a href="https://redplentygames.com/social-strike/" target="_blank" rel="noopener" class="example-tag">The Social Strike Game</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="programme-track">
|
||
<div class="track-header">
|
||
<span class="track-emoji">🌱</span>
|
||
<h3 class="track-title">Infrastructures for Imagination & Peerticipation</h3>
|
||
</div>
|
||
<div class="track-content">
|
||
<div class="track-description">
|
||
<ul>
|
||
<li>Going beyond conventional models of co-design, co-authorship and participation/interaction</li>
|
||
<li>Prototyping open-source world-making platforms and online anticipatory fiction archives</li>
|
||
<li>Methods for establishing and connecting distributed nodes of reality-bending practice</li>
|
||
</ul>
|
||
</div>
|
||
<div class="track-examples">
|
||
<h4>Examples</h4>
|
||
<a href="https://edgeryders.eu/c/witness/witnesspedia/378" target="_blank" rel="noopener" class="example-tag">Witnesspedia</a>
|
||
<a href="https://www.medialab-matadero.es/en/projects/pocas-poca-organizacion-colaborativa-de-auto-servicio" target="_blank" rel="noopener" class="example-tag">POCAS</a>
|
||
<a href="https://www.nordiclarp.org/wiki/Main_Page" target="_blank" rel="noopener" class="example-tag">Nordic Larp Wiki</a>
|
||
<a href="https://greenmediography.nl/" target="_blank" rel="noopener" class="example-tag">Green Mediaography</a>
|
||
<a href="https://boardgamegeek.com/browse/boardgamemechanic" target="_blank" rel="noopener" class="example-tag">Board Game Mechanics Repository</a>
|
||
<a href="https://networkcultures.org/blog/publication/artists-activists-and-worldbuilders-on-decentralised-autonomous-organisations-conversations-about-funding-self-organisation-and-reclaiming-the-future/" target="_blank" rel="noopener" class="example-tag">Artists, Activists, and Worldbuilders on DAOs</a>
|
||
</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 peerticipatory worldplay</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>A co-working, co-living and event venue that harbours artists, digital movements and decentralized communities</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">🛠️</span>
|
||
<div>
|
||
<strong>Maker Spaces & Equipment</strong>
|
||
<span>Access to 3D printer, laser cutter, sewing station, farmbot, book binding station and various workshop rooms</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">💰</span>
|
||
<div>
|
||
<strong>Financial Transparency</strong>
|
||
<span>Food for the first 3 days will be catered, then self/community organised. Accommodation at the Hub with potential subsidies. <a href="/financial-transparency" style="color: var(--accent-cyan);">See full transparency details →</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="location-map">
|
||
<img src="https://zjddaiekqxxdejpcdbbp.supabase.co/storage/v1/object/public/website-images/1751219331648.jpg" alt="Commons Hub venue" class="venue-image">
|
||
</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">This is the first edition of WORLDPLAY and spaces are limited to 60 participants. Express your interest early to secure your place.</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 "mycollabs"</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 and cli-fi writers, pluriversal worldbuilders, game designers, storytellers, artists, performers, LARPers, commons and degrowth activists, weird economists, solarpunks, participatory futurists, speculative designers, researchers and academics, technologists, open-source developers, and any and all curious others.</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" id="role-select">
|
||
<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" id="other-role-group" style="display: none;">
|
||
<label>Please describe yourself</label>
|
||
<input type="text" name="otherRole" id="other-role-input" placeholder="How would you describe yourself?">
|
||
</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>✒️ Econ Sci-Fi</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>🎲 Eutopian Games</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? (select all that apply)</label>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="session">
|
||
<span>Propose a session (talk / discussion / panel / other)</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="workshop">
|
||
<span>Host a workshop (co-writing / game co-design / other)</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="game">
|
||
<span>Bring a game to play or playtest (tabletop / digital / hybrid)</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="larp">
|
||
<span>Run a LARP or other participatory format</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="project">
|
||
<span>Co-create a project or publication</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="other">
|
||
<span>Contribute in another way (please share below)</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="attend">
|
||
<span>Attend only</span>
|
||
</label>
|
||
<label class="checkbox-item">
|
||
<input type="checkbox" name="contribute" value="unsure">
|
||
<span>Not sure yet</span>
|
||
</label>
|
||
</div>
|
||
</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-group">
|
||
<label class="checkbox-item newsletter-checkbox">
|
||
<input type="checkbox" name="newsletter" value="yes">
|
||
<span>Subscribe to the WORLDPLAY newsletter for updates</span>
|
||
</label>
|
||
</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 class="highlight-text">Hijack Reality</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="#logistics">Location</a></li>
|
||
<li><a href="#programme">Programme</a></li>
|
||
<li><a href="#register">Register</a></li>
|
||
<li><a href="/financial-transparency">Financial Transparency</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="https://www.commons-hub.at" target="_blank" rel="noopener">Commons Hub</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p style="margin-bottom: 1rem;">The inaugural edition of WORLDPLAY is convened by <a href="https://futurescraft.eu" target="_blank" rel="noopener" style="color: var(--accent-cyan);">Rok Kranjc</a> (Futurescraft), <a href="https://economicspace.agency" target="_blank" rel="noopener" style="color: var(--accent-cyan);">Pekko Koskinen</a> (Economic Space Agency) and <a href="https://kumanoshindo.com" target="_blank" rel="noopener" style="color: var(--accent-cyan);">Carolina Carvalho</a> (Kumano Shindo, Greater Stellenbosch Trust).</p>
|
||
<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');
|
||
});
|
||
});
|
||
|
||
// Role "Other" dropdown functionality
|
||
const roleSelect = document.getElementById('role-select');
|
||
const otherRoleGroup = document.getElementById('other-role-group');
|
||
const otherRoleInput = document.getElementById('other-role-input');
|
||
|
||
if (roleSelect && otherRoleGroup) {
|
||
roleSelect.addEventListener('change', () => {
|
||
if (roleSelect.value === 'other') {
|
||
otherRoleGroup.style.display = 'block';
|
||
otherRoleInput.focus();
|
||
} else {
|
||
otherRoleGroup.style.display = 'none';
|
||
otherRoleInput.value = '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 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' || key === 'contribute') {
|
||
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>
|