2532 lines
93 KiB
HTML
2532 lines
93 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);
|
||
}
|
||
|
||
/* Step indicator */
|
||
.step-indicator {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.step-indicator .step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1.25rem;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
opacity: 0.5;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.step-indicator .step.active {
|
||
opacity: 1;
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.step-indicator .step.completed {
|
||
opacity: 0.8;
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.step-indicator .step-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
border: 2px solid currentColor;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.step-indicator .step.completed .step-number {
|
||
background: var(--accent-green);
|
||
border-color: var(--accent-green);
|
||
color: #0a0a0f;
|
||
}
|
||
|
||
.step-indicator .step-divider {
|
||
width: 40px;
|
||
height: 2px;
|
||
background: rgba(157, 78, 221, 0.3);
|
||
align-self: center;
|
||
}
|
||
|
||
/* Form step visibility */
|
||
.form-step { display: none; }
|
||
.form-step.active { display: block; }
|
||
|
||
/* Accommodation toggle */
|
||
.accom-toggle {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.accom-toggle-btn {
|
||
flex: 1;
|
||
padding: 1rem;
|
||
background: var(--bg-input);
|
||
border: 2px solid rgba(157, 78, 221, 0.2);
|
||
border-radius: 10px;
|
||
color: var(--text-secondary);
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 0.95rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
}
|
||
|
||
.accom-toggle-btn:hover {
|
||
border-color: var(--accent-purple);
|
||
}
|
||
|
||
.accom-toggle-btn.selected {
|
||
border-color: var(--accent-cyan);
|
||
background: rgba(0, 217, 255, 0.08);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Accommodation cards */
|
||
.accom-cards {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.accom-cards.visible { display: flex; }
|
||
|
||
.accom-venue-label {
|
||
font-size: 0.8rem;
|
||
color: var(--accent-purple);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-top: 0.75rem;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.accom-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 1.25rem;
|
||
background: var(--bg-input);
|
||
border: 2px solid rgba(157, 78, 221, 0.15);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.accom-card:hover {
|
||
border-color: var(--accent-purple);
|
||
background: rgba(157, 78, 221, 0.08);
|
||
}
|
||
|
||
.accom-card.selected {
|
||
border-color: var(--accent-cyan);
|
||
background: rgba(0, 217, 255, 0.08);
|
||
}
|
||
|
||
.accom-card .accom-name {
|
||
font-size: 0.95rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.accom-card .accom-price {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 0.9rem;
|
||
color: var(--accent-cyan);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.accom-card .accom-note {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Price summary box */
|
||
.price-summary {
|
||
background: rgba(157, 78, 221, 0.08);
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.price-summary h4 {
|
||
font-size: 0.85rem;
|
||
color: var(--accent-purple);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.price-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.4rem 0;
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.price-line.total {
|
||
border-top: 1px solid rgba(157, 78, 221, 0.3);
|
||
margin-top: 0.5rem;
|
||
padding-top: 0.75rem;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.price-line.total .price-amount {
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.price-amount {
|
||
font-family: 'Space Mono', monospace;
|
||
}
|
||
|
||
/* Food disclaimer info box */
|
||
.info-box {
|
||
background: rgba(255, 149, 0, 0.08);
|
||
border: 1px solid rgba(255, 149, 0, 0.3);
|
||
border-radius: 10px;
|
||
padding: 1rem 1.25rem;
|
||
margin-bottom: 1.5rem;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.info-box strong {
|
||
color: var(--accent-orange);
|
||
}
|
||
|
||
/* Back button */
|
||
.btn-back {
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||
margin-bottom: 1rem;
|
||
font-size: 0.85rem;
|
||
padding: 0.6rem 1.25rem;
|
||
}
|
||
|
||
.btn-back:hover {
|
||
color: var(--text-primary);
|
||
border-color: var(--accent-purple);
|
||
}
|
||
|
||
/* Spots counter */
|
||
.spots-counter {
|
||
background: rgba(255, 0, 110, 0.08);
|
||
border: 1px solid rgba(255, 0, 110, 0.3);
|
||
border-radius: 12px;
|
||
padding: 1.25rem 1.5rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.spots-number {
|
||
font-family: 'Space Mono', monospace;
|
||
font-size: 1.1rem;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.spots-number span:first-child {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--accent-magenta);
|
||
}
|
||
|
||
.spots-label {
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.spots-bar {
|
||
height: 6px;
|
||
background: rgba(255, 0, 110, 0.15);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.spots-bar-fill {
|
||
height: 100%;
|
||
background: var(--gradient-3);
|
||
border-radius: 3px;
|
||
transition: width 1s ease;
|
||
width: 0%;
|
||
}
|
||
|
||
.spots-note {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 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 & Pay</h2>
|
||
<p class="section-subtitle">WORLDPLAY spaces are limited to 60 participants. Complete registration and payment to secure your place.</p>
|
||
</div>
|
||
|
||
<div class="register-content">
|
||
<div class="register-info">
|
||
<div class="spots-counter" id="spots-counter">
|
||
<div class="spots-number"><span id="spots-remaining">--</span> <span class="spots-label">of 60 spots remaining</span></div>
|
||
<div class="spots-bar"><div class="spots-bar-fill" id="spots-bar-fill"></div></div>
|
||
<p class="spots-note">Rooms are assigned first-come, first-served. Popular options fill up fast.</p>
|
||
</div>
|
||
|
||
<h3>What you get</h3>
|
||
|
||
<ul class="register-perks">
|
||
<li>
|
||
<span class="check">✓</span>
|
||
<span>7 days of sessions, workshops, games and LARPs</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="step-indicator">
|
||
<div class="step active" id="step-ind-1">
|
||
<span class="step-number">1</span>
|
||
<span>Your Info</span>
|
||
</div>
|
||
<div class="step-divider"></div>
|
||
<div class="step" id="step-ind-2">
|
||
<span class="step-number">2</span>
|
||
<span>Accommodation & Payment</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 1: Registration Info -->
|
||
<div class="form-step active" id="step-1">
|
||
<div class="form-header">
|
||
<h3>Your Details</h3>
|
||
<p>Tell us about yourself</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="button" class="btn btn-primary" id="btn-to-step-2">Continue to Accommodation & Payment</button>
|
||
</div>
|
||
|
||
<div class="form-message" id="form-message-step1"></div>
|
||
</div>
|
||
|
||
<!-- STEP 2: Accommodation & Payment -->
|
||
<div class="form-step" id="step-2">
|
||
<div class="form-header">
|
||
<h3>Accommodation & Payment</h3>
|
||
<p>Choose your accommodation and complete payment</p>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-back" id="btn-back-step1">← Back to details</button>
|
||
|
||
<div class="form-group">
|
||
<label>Do you need on-site accommodation? (7 nights, June 7–13)</label>
|
||
<div class="accom-toggle">
|
||
<button type="button" class="accom-toggle-btn selected" data-accom="no">No, I'll arrange my own</button>
|
||
<button type="button" class="accom-toggle-btn" data-accom="yes">Yes, book a room</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accom-cards" id="accom-cards">
|
||
<div class="accom-venue-label">Commons Hub</div>
|
||
<div class="accom-card" data-type="ch-shared" data-price="275">
|
||
<div>
|
||
<div class="accom-name">Shared Room</div>
|
||
<div class="accom-note">Bunk beds / shared room</div>
|
||
</div>
|
||
<div class="accom-price">€275</div>
|
||
</div>
|
||
<div class="accom-card" data-type="ch-double" data-price="350">
|
||
<div>
|
||
<div class="accom-name">Double Room</div>
|
||
<div class="accom-note">Double bed, private or shared</div>
|
||
</div>
|
||
<div class="accom-price">€350</div>
|
||
</div>
|
||
|
||
<div class="accom-venue-label">Herrnhof Villa</div>
|
||
<div class="accom-card" data-type="hh-living" data-price="315">
|
||
<div>
|
||
<div class="accom-name">Living Room</div>
|
||
<div class="accom-note">Sofa bed / daybed in shared living area</div>
|
||
</div>
|
||
<div class="accom-price">€315</div>
|
||
</div>
|
||
<div class="accom-card" data-type="hh-triple" data-price="350">
|
||
<div>
|
||
<div class="accom-name">Triple Room</div>
|
||
<div class="accom-note">Shared with two others</div>
|
||
</div>
|
||
<div class="accom-price">€350</div>
|
||
</div>
|
||
<div class="accom-card" data-type="hh-twin" data-price="420">
|
||
<div>
|
||
<div class="accom-name">Twin Room</div>
|
||
<div class="accom-note">Two separate beds, shared with one other</div>
|
||
</div>
|
||
<div class="accom-price">€420</div>
|
||
</div>
|
||
<div class="accom-card" data-type="hh-single" data-price="665">
|
||
<div>
|
||
<div class="accom-name">Single Room</div>
|
||
<div class="accom-note">Private room for one</div>
|
||
</div>
|
||
<div class="accom-price">€665</div>
|
||
</div>
|
||
<div class="accom-card" data-type="hh-couple" data-price="700">
|
||
<div>
|
||
<div class="accom-name">Couple Room</div>
|
||
<div class="accom-note">Double bed, private room for two</div>
|
||
</div>
|
||
<div class="accom-price">€700</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="price-summary" id="price-summary">
|
||
<h4>Price Summary</h4>
|
||
<div class="price-line">
|
||
<span>Participation fee</span>
|
||
<span class="price-amount">€50.00</span>
|
||
</div>
|
||
<div class="price-line" id="price-accom-line" style="display: none;">
|
||
<span id="price-accom-label">Accommodation</span>
|
||
<span class="price-amount" id="price-accom-amount">€0.00</span>
|
||
</div>
|
||
<div class="price-line">
|
||
<span>Processing fee (2%)</span>
|
||
<span class="price-amount" id="price-processing">€1.00</span>
|
||
</div>
|
||
<div class="price-line total">
|
||
<span>Total</span>
|
||
<span class="price-amount" id="price-total">€51.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>About food:</strong> Food is not included in this payment. Expect approximately €15–20 per person per day. We'll be in touch about food choices and dietary preferences before the event.
|
||
</div>
|
||
|
||
<div class="info-box" style="background: rgba(157, 78, 221, 0.08); border-color: rgba(157, 78, 221, 0.3);">
|
||
<strong style="color: var(--accent-purple);">Deposit & cancellation:</strong> This is a full payment. If you cancel more than 1 month before the event, you'll receive a 70% refund. If you cancel between 1 month and 1 week before, you'll receive a 30% refund. No refunds within 1 week of the event.
|
||
</div>
|
||
|
||
<div class="form-submit">
|
||
<button type="button" class="btn btn-primary" id="btn-pay">Pay via Mollie</button>
|
||
</div>
|
||
|
||
<div class="form-message" id="form-message-step2"></div>
|
||
</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 & Pay</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">
|
||
<a href="https://www.regenerationpollination.earth/" target="_blank"><img src="/images/regeneration-pollination-logo.png" alt="Regeneration Pollination" title="Regeneration Pollination"></a>
|
||
<a href="https://www.gamescenes.org/event-wordplay-7-13-june-2026-austria" target="_blank"><img src="/images/gamescenes-logo.png" alt="GameScenes" title="GameScenes" style="filter: invert(1);"></a>
|
||
<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);
|
||
});
|
||
|
||
// Spots counter — fetch registration count
|
||
const MAX_SPOTS = 60;
|
||
(async function loadSpots() {
|
||
try {
|
||
const res = await fetch('/api/stats');
|
||
if (!res.ok) return;
|
||
const stats = await res.json();
|
||
const taken = stats.totalRegistrations || 0;
|
||
const remaining = Math.max(0, MAX_SPOTS - taken);
|
||
document.getElementById('spots-remaining').textContent = remaining;
|
||
const pct = Math.min(100, Math.round((taken / MAX_SPOTS) * 100));
|
||
document.getElementById('spots-bar-fill').style.width = pct + '%';
|
||
} catch(e) { /* silently fail */ }
|
||
})();
|
||
|
||
// 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);
|
||
});
|
||
|
||
// ===== Two-step registration + payment flow =====
|
||
const form = document.getElementById('registration-form');
|
||
const step1 = document.getElementById('step-1');
|
||
const step2 = document.getElementById('step-2');
|
||
const stepInd1 = document.getElementById('step-ind-1');
|
||
const stepInd2 = document.getElementById('step-ind-2');
|
||
const msgStep1 = document.getElementById('form-message-step1');
|
||
const msgStep2 = document.getElementById('form-message-step2');
|
||
const btnToStep2 = document.getElementById('btn-to-step-2');
|
||
const btnBack = document.getElementById('btn-back-step1');
|
||
const btnPay = document.getElementById('btn-pay');
|
||
|
||
let registrationId = null;
|
||
let selectedAccom = null; // null = no accommodation
|
||
|
||
function showMsg(el, text, type) {
|
||
el.textContent = text;
|
||
el.className = 'form-message ' + type;
|
||
}
|
||
|
||
function clearMsg(el) {
|
||
el.textContent = '';
|
||
el.className = 'form-message';
|
||
}
|
||
|
||
// Step 1 → Step 2 transition
|
||
btnToStep2.addEventListener('click', async () => {
|
||
clearMsg(msgStep1);
|
||
|
||
// Validate required fields
|
||
const firstName = form.querySelector('[name="firstName"]').value.trim();
|
||
const lastName = form.querySelector('[name="lastName"]').value.trim();
|
||
const email = form.querySelector('[name="email"]').value.trim();
|
||
|
||
if (!firstName || !lastName || !email) {
|
||
showMsg(msgStep1, 'Please fill in all required fields.', 'error');
|
||
return;
|
||
}
|
||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||
showMsg(msgStep1, 'Please enter a valid email address.', 'error');
|
||
return;
|
||
}
|
||
|
||
// Collect form data
|
||
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;
|
||
}
|
||
});
|
||
|
||
btnToStep2.disabled = true;
|
||
btnToStep2.textContent = 'Saving...';
|
||
|
||
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) {
|
||
throw new Error(result.error || 'Registration failed');
|
||
}
|
||
|
||
registrationId = result.id;
|
||
|
||
// Transition to step 2
|
||
step1.classList.remove('active');
|
||
step2.classList.add('active');
|
||
stepInd1.classList.remove('active');
|
||
stepInd1.classList.add('completed');
|
||
stepInd2.classList.add('active');
|
||
|
||
// Scroll to form top
|
||
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
|
||
} catch (error) {
|
||
showMsg(msgStep1, error.message, 'error');
|
||
} finally {
|
||
btnToStep2.disabled = false;
|
||
btnToStep2.textContent = 'Continue to Accommodation & Payment';
|
||
}
|
||
});
|
||
|
||
// Back button
|
||
btnBack.addEventListener('click', () => {
|
||
step2.classList.remove('active');
|
||
step1.classList.add('active');
|
||
stepInd2.classList.remove('active');
|
||
stepInd1.classList.remove('completed');
|
||
stepInd1.classList.add('active');
|
||
});
|
||
|
||
// Accommodation toggle (yes/no)
|
||
const accomCards = document.getElementById('accom-cards');
|
||
document.querySelectorAll('.accom-toggle-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.accom-toggle-btn').forEach(b => b.classList.remove('selected'));
|
||
btn.classList.add('selected');
|
||
|
||
if (btn.dataset.accom === 'yes') {
|
||
accomCards.classList.add('visible');
|
||
} else {
|
||
accomCards.classList.remove('visible');
|
||
selectedAccom = null;
|
||
document.querySelectorAll('.accom-card').forEach(c => c.classList.remove('selected'));
|
||
updatePriceSummary();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Accommodation card selection
|
||
document.querySelectorAll('.accom-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
document.querySelectorAll('.accom-card').forEach(c => c.classList.remove('selected'));
|
||
card.classList.add('selected');
|
||
selectedAccom = card.dataset.type;
|
||
updatePriceSummary();
|
||
});
|
||
});
|
||
|
||
// Live price calculator
|
||
function updatePriceSummary() {
|
||
const participation = 50;
|
||
const accomLine = document.getElementById('price-accom-line');
|
||
const accomLabel = document.getElementById('price-accom-label');
|
||
const accomAmount = document.getElementById('price-accom-amount');
|
||
const processingEl = document.getElementById('price-processing');
|
||
const totalEl = document.getElementById('price-total');
|
||
|
||
let accomPrice = 0;
|
||
if (selectedAccom) {
|
||
const card = document.querySelector(`.accom-card[data-type="${selectedAccom}"]`);
|
||
accomPrice = parseInt(card.dataset.price);
|
||
accomLabel.textContent = card.querySelector('.accom-name').textContent + ' (7 nights)';
|
||
accomAmount.textContent = '\u20AC' + accomPrice.toFixed(2);
|
||
accomLine.style.display = 'flex';
|
||
} else {
|
||
accomLine.style.display = 'none';
|
||
}
|
||
|
||
const subtotal = participation + accomPrice;
|
||
const processing = Math.round(subtotal * 0.02 * 100) / 100;
|
||
const total = subtotal + processing;
|
||
|
||
processingEl.textContent = '\u20AC' + processing.toFixed(2);
|
||
totalEl.textContent = '\u20AC' + total.toFixed(2);
|
||
}
|
||
|
||
// Pay button — create Mollie checkout
|
||
btnPay.addEventListener('click', async () => {
|
||
clearMsg(msgStep2);
|
||
|
||
// If accommodation is toggled to "yes" but no card selected
|
||
const accomToggled = document.querySelector('.accom-toggle-btn[data-accom="yes"]').classList.contains('selected');
|
||
if (accomToggled && !selectedAccom) {
|
||
showMsg(msgStep2, 'Please select an accommodation option.', 'error');
|
||
return;
|
||
}
|
||
|
||
btnPay.disabled = true;
|
||
btnPay.textContent = 'Creating payment...';
|
||
|
||
try {
|
||
const response = await fetch('/api/create-checkout-session', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
registrationId,
|
||
accommodationType: selectedAccom || null,
|
||
}),
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (!response.ok) {
|
||
throw new Error(result.error || 'Failed to create payment');
|
||
}
|
||
|
||
// Redirect to Mollie checkout
|
||
window.location.href = result.checkoutUrl;
|
||
|
||
} catch (error) {
|
||
showMsg(msgStep2, error.message, 'error');
|
||
btnPay.disabled = false;
|
||
btnPay.textContent = 'Pay via Mollie';
|
||
}
|
||
});
|
||
|
||
// Prevent default form submit (we handle it via buttons)
|
||
form.addEventListener('submit', (e) => e.preventDefault());
|
||
|
||
// 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>
|