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;
|
||
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 ul {
|
||
margin-bottom: 1.5rem;
|
||
padding-left: 1.5rem;
|
||
color: var(--text-secondary);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.about-text ul li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.about-text strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.footer-logos {
|
||
text-align: center;
|
||
padding-top: 2rem;
|
||
margin-top: 2rem;
|
||
border-top: 1px solid rgba(157, 78, 221, 0.1);
|
||
}
|
||
|
||
.footer-logos h4 {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.footer-logos-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.footer-logos-row img {
|
||
max-height: 48px;
|
||
opacity: 0.8;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.footer-logos-row img:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.footer-logos-row span {
|
||
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>
|
||
|
||
|
||
<div class="hero-meta">
|
||
<div class="meta-item">📅 June 7–13, 2026</div>
|
||
<div class="meta-item">📍 Commons Hub, Austria</div>
|
||
</div>
|
||
|
||
<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 an opening move for a network that explores the revolutionary potential of play: What changes when we treat games as ways of organising, not just expressing? How do those changes expand from one gathering to many, carried by people, through their practice?</p>
|
||
|
||
<p>It's also the title of a new event series, conceived as a <strong>pop-up hub for prefiguring radical futures</strong> – economic, social and cultural – through fiction, design, performance and play. The first edition of WORLDPLAY issues a call to game designers and players, artivists, weird economists and utopian dreamers. Together, we will:</p>
|
||
|
||
<ul>
|
||
<li>Design and play upon the canvas of the world</li>
|
||
<li>Scribble futures and materialise speculative artifacts from parallel presents</li>
|
||
<li>Compose living archives of/for radical imagination</li>
|
||
<li>Devise ways to hijack public spaces, cyberspace and realities themselves.</li>
|
||
</ul>
|
||
|
||
<p>Part experimental playground, part aspiring peer-to-peer guerrilla futuring network, WORLDPLAY channels underground postcapitalist desire by sowing counter-hegemonic fiction engines as seeds and games as social organisations.</p>
|
||
</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 partner organisations</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.art" 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.art">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;">WORLDPLAY is convened by Rok Kranjc (Futurescraft), Pekko Koskinen (Economic Space Agency) and Carolina Carvalho (Global Regeneration CoLab; Regeneration Pollination) under the banner of the Crypto Commons Association, realised in collaboration with Commons Hub.</p>
|
||
<p>WORLDPLAY 2026 · Built for the commons</p>
|
||
<p style="margin-top: 0.5rem; font-size: 0.75rem; opacity: 0.6;"><a href="https://mycostack.xyz" target="_blank" rel="noopener" style="color: var(--text-secondary); text-decoration: none;">Powered by the Mycostack in the spirit of P4P</a></p>
|
||
</div>
|
||
|
||
<div class="footer-logos">
|
||
<h4>Convened under</h4>
|
||
<div class="footer-logos-row">
|
||
<img src="/images/cca-logo.png" alt="Crypto Commons Association" title="Crypto Commons Association">
|
||
<img src="/images/commons-hub-logo.svg" alt="Commons Hub" title="Commons Hub" style="filter: invert(1);">
|
||
</div>
|
||
|
||
<h4>Sponsors</h4>
|
||
<div class="footer-logos-row">
|
||
<span>Orion Reed</span>
|
||
<span style="opacity: 0.5;">More TBC</span>
|
||
</div>
|
||
|
||
<h4>Promotional Partners</h4>
|
||
<div class="footer-logos-row">
|
||
<img src="/images/class-wargames-logo.jpg" alt="Class Wargames" title="Class Wargames">
|
||
<img src="/images/indep-logo.png" alt="INDEP" title="INDEP">
|
||
<span style="opacity: 0.5;">More TBC</span>
|
||
</div>
|
||
</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>
|