Add financial transparency page, fix gradient highlights
- Create dedicated financial-transparency.html page in worldplay theme - Add route for /financial-transparency in server.js - Fix gradient text highlight CSS (add color:transparent, display:inline) - Add .highlight-text utility class for CTA section - Update link to use local page instead of CCG25 external link Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
3457dc65eb
commit
bd90f0c647
|
|
@ -0,0 +1,477 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Financial Transparency | WORLDPLAY 2026</title>
|
||||
<meta name="description" content="Financial transparency for WORLDPLAY 2026 - breakdown of costs for accommodation, food, and participation.">
|
||||
<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%);
|
||||
}
|
||||
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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.3;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: var(--accent-purple);
|
||||
top: 10%;
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: var(--accent-cyan);
|
||||
bottom: 20%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
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.9);
|
||||
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;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
main {
|
||||
padding: 8rem 0 4rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.page-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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-cyan);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card h2 .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.highlight-box {
|
||||
background: rgba(157, 78, 221, 0.1);
|
||||
border: 1px solid rgba(157, 78, 221, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.highlight-box.green {
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-green);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.price-note {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Cost table */
|
||||
.cost-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.cost-table th,
|
||||
.cost-table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
.cost-table th {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.cost-table td {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cost-table td:last-child {
|
||||
text-align: right;
|
||||
font-family: 'Space Mono', monospace;
|
||||
}
|
||||
|
||||
.cost-table tr.total {
|
||||
border-top: 2px solid var(--accent-purple);
|
||||
}
|
||||
|
||||
.cost-table tr.total td {
|
||||
font-weight: 700;
|
||||
color: var(--accent-green);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Food breakdown */
|
||||
.food-breakdown {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.food-item {
|
||||
background: rgba(157, 78, 221, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.food-item strong {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.food-item span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-card {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
|
||||
border-color: rgba(157, 78, 221, 0.3);
|
||||
}
|
||||
|
||||
.cta-card h2 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
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;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--accent-cyan);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.food-breakdown {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cost-table th,
|
||||
.cost-table td {
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-grid"></div>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/" class="logo">WORLDPLAY</a>
|
||||
<a href="/" class="back-link">← Back to main site</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<header class="page-header">
|
||||
<span class="page-tag">Transparency</span>
|
||||
<h1 class="page-title">Financial Transparency</h1>
|
||||
<p class="page-subtitle">We believe in radical transparency. Here's a full breakdown of costs for WORLDPLAY 2026.</p>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="icon">🎫</span> Participation Fee</h2>
|
||||
<div class="highlight-box green">
|
||||
<span class="price-tag">€200</span>
|
||||
<span class="price-note">Standard participation fee</span>
|
||||
</div>
|
||||
<p>No one from the organizing team is being paid from participation fees, and all organizers are covering their own travel, food and accommodation. All fees go directly toward venue costs, shared resources, and programme materials.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="icon">🏠</span> Accommodation</h2>
|
||||
<div class="highlight-box">
|
||||
<span class="price-tag">€37.90/night</span>
|
||||
<span class="price-note">Shared dormitory-style rooms at Commons Hub</span>
|
||||
</div>
|
||||
<p>Accommodation includes shared dormitory-style rooms with basic amenities. Bedding and towels are provided. The Commons Hub offers a co-living environment that fosters community and collaboration.</p>
|
||||
<p>We're working on potential subsidies to reduce accommodation costs—stay tuned for updates.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="icon">🍽️</span> Food</h2>
|
||||
<div class="highlight-box">
|
||||
<span class="price-tag">~€22.50/day average</span>
|
||||
<span class="price-note">Mix of catered and self-organized meals</span>
|
||||
</div>
|
||||
|
||||
<div class="food-breakdown">
|
||||
<div class="food-item">
|
||||
<strong>Days 1-3: Fully Catered</strong>
|
||||
<span>€35/day — Breakfast, lunch, and dinner with vegetarian/vegan options</span>
|
||||
</div>
|
||||
<div class="food-item">
|
||||
<strong>Days 4-7: Self-Organized</strong>
|
||||
<span>~€10/day — Communal cooking with shared groceries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The self-organized days are part of the WORLDPLAY ethos—cooking together builds community and allows for creative collaboration outside of sessions.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="icon">📊</span> 7-Day Cost Estimate</h2>
|
||||
<p>WORLDPLAY runs June 7–13, 2026 (7 days, 7 nights)</p>
|
||||
|
||||
<table class="cost-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Cost</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Participation Fee</td>
|
||||
<td>€200.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Accommodation (7 nights × €37.90)</td>
|
||||
<td>€265.30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Food (3 days catered + 4 days self-org)</td>
|
||||
<td>€145.00</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<td>Estimated Total</td>
|
||||
<td>€610.30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p style="font-size: 0.9rem;"><em>This is an estimate. Final costs may vary slightly based on actual meal arrangements and any accommodation subsidies we secure.</em></p>
|
||||
</div>
|
||||
|
||||
<div class="card cta-card">
|
||||
<h2><span class="icon">💜</span> Need Financial Support?</h2>
|
||||
<p>We believe that financial constraints should not prevent anyone from participating in prefiguring postcapitalist futures. If you need support, please reach out—we'll do our best to help.</p>
|
||||
<div style="margin-top: 1.5rem;">
|
||||
<a href="mailto:hello@worldplay.earth" class="btn btn-primary">Contact Us</a>
|
||||
<a href="/#register" class="btn btn-secondary">Register Interest</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>WORLDPLAY 2026 · <a href="/">Back to main site</a> · <span style="color: var(--accent-purple);">Reality is a design space</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -220,11 +220,14 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.hero h1 .highlight {
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Glitch effect */
|
||||
|
|
@ -1542,7 +1545,7 @@
|
|||
<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="https://ccg2025.vercel.app/financial-transparency" target="_blank" rel="noopener" style="color: var(--accent-cyan);">See full transparency details →</a></span>
|
||||
<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>
|
||||
|
|
@ -1727,7 +1730,7 @@
|
|||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<h2>Ready to <span style="background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hijack Reality</span>?</h2>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -367,6 +367,11 @@ app.get('/api/registrations/export', async (req, res) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Financial transparency page
|
||||
app.get('/financial-transparency', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'financial-transparency.html'));
|
||||
});
|
||||
|
||||
// Health check
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||
|
|
|
|||
Loading…
Reference in New Issue