432 lines
No EOL
8.4 KiB
Vue
432 lines
No EOL
8.4 KiB
Vue
<template>
|
|
<div class="min-h-screen">
|
|
<!-- Noise overlay and effects -->
|
|
<div class="noise" />
|
|
|
|
<div class="container">
|
|
<section class="coming-soon">
|
|
<header>
|
|
<div class="glitch-container">
|
|
<div class="logo">coop.love</div>
|
|
</div>
|
|
</header>
|
|
<p>
|
|
A new space to celebrate values-driven cooperative game development
|
|
around the world.
|
|
</p>
|
|
<p class="mt-2">
|
|
Join our list to be first to know when we launch!
|
|
</p>
|
|
|
|
<form
|
|
action="https://buttondown.com/api/emails/embed-subscribe/coop.love"
|
|
method="post"
|
|
target="popupwindow"
|
|
onsubmit="window.open('https://buttondown.com/coop.love', 'popupwindow')"
|
|
class="embeddable-buttondown-form">
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="bd-email"
|
|
placeholder="your@email.com" />
|
|
|
|
<input type="submit" value="Subscribe" />
|
|
</form>
|
|
|
|
<div class="powered-by">
|
|
<p>A collaborative initiative powered by:</p>
|
|
<p class="org-names">
|
|
<a href="https://babyghosts.fund">Baby Ghosts</a> +
|
|
<a href="https://gammaspace.ca">Gamma Space</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tools access -->
|
|
<div class="tools-access">
|
|
<NuxtLink to="/tools" class="tools-link">
|
|
Access Urgent Tools →
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
useHead({
|
|
title: 'coop.love ❤️ Cooperative Game Development',
|
|
meta: [
|
|
{ name: 'description', content: 'A new space to celebrate values-driven cooperative game development around the world.' }
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Import Google Fonts for Courier Prime */
|
|
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
|
|
|
|
:root {
|
|
--accent-1: #333333;
|
|
--accent-2: #555555;
|
|
--accent-3: #777777;
|
|
--light: #f5f5f5;
|
|
--lighter: #ffffff;
|
|
--text: #0a0a0a;
|
|
--scanline: rgba(0, 0, 0, 0.05);
|
|
--font-stack: "Courier Prime", "Consolas", "Menlo", "Monaco",
|
|
"Courier New", monospace;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.min-h-screen {
|
|
background-color: var(--lighter);
|
|
background-image: radial-gradient(
|
|
circle at 50% 50%,
|
|
rgba(245, 245, 245, 0.6) 0%,
|
|
rgba(250, 250, 250, 0.8) 70%,
|
|
var(--lighter) 100%
|
|
);
|
|
color: var(--text);
|
|
font-family: var(--font-stack);
|
|
line-height: 1.6;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.min-h-screen::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
rgba(0, 0, 0, 0) 50%,
|
|
rgba(0, 0, 0, 0.08) 50%
|
|
),
|
|
linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.03),
|
|
rgba(0, 0, 0, 0.05),
|
|
rgba(0, 0, 0, 0.03)
|
|
);
|
|
background-size: 100% 3px, 3px 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
.noise {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
opacity: 0.08;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
header {
|
|
padding: 2rem 1rem;
|
|
position: relative;
|
|
border-bottom: 1px solid var(--accent-3);
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.glitch-container {
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-family: var(--font-stack);
|
|
font-size: clamp(3rem, 10vw, 7rem);
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
text-shadow: 0 0 5px rgba(214, 138, 229, 0.7),
|
|
0 0 10px rgba(84, 194, 243, 0.7);
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
animation: flicker 4s infinite alternate;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo::before,
|
|
.logo::after {
|
|
content: "coop.love";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo::before {
|
|
color: var(--accent-2);
|
|
opacity: 0.5;
|
|
animation: glitch-1 2s infinite alternate-reverse;
|
|
}
|
|
|
|
.logo::after {
|
|
color: var(--accent-3);
|
|
opacity: 0.5;
|
|
animation: glitch-2 3.5s infinite alternate-reverse;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0%,
|
|
19.999%,
|
|
22%,
|
|
62.999%,
|
|
64%,
|
|
64.999%,
|
|
70%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
20%,
|
|
21.999%,
|
|
63%,
|
|
63.999%,
|
|
65%,
|
|
69.999% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-1 {
|
|
0%,
|
|
100% {
|
|
transform: translate(0);
|
|
}
|
|
20% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
40% {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
60% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
80% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-2 {
|
|
0%,
|
|
100% {
|
|
transform: translate(0);
|
|
}
|
|
25% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
50% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
75% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
}
|
|
|
|
.coming-soon {
|
|
text-align: center;
|
|
margin: 4rem 0;
|
|
padding: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.embeddable-buttondown-form {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.embeddable-buttondown-form label {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.1rem;
|
|
color: var(--accent-1);
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="email"] {
|
|
background: var(--lighter);
|
|
border: 1px solid var(--accent-2);
|
|
padding: 0.8rem;
|
|
width: 100%;
|
|
font-family: var(--font-stack);
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="email"]:focus {
|
|
border-color: var(--accent-1);
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(51, 51, 51, 0.3);
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="submit"] {
|
|
background: var(--lighter);
|
|
color: var(--accent-1);
|
|
border: 1px solid var(--accent-1);
|
|
padding: 0.8rem 2rem;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: var(--font-stack);
|
|
width: 100%;
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="submit"]:hover {
|
|
background: var(--accent-1);
|
|
color: var(--lighter);
|
|
text-shadow: none;
|
|
box-shadow: 0 0 10px rgba(51, 51, 51, 0.3);
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="submit"]:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.7s ease;
|
|
}
|
|
|
|
.embeddable-buttondown-form input[type="submit"]:hover:before {
|
|
left: 100%;
|
|
}
|
|
|
|
.powered-by {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 2rem;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.powered-by p {
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.org-names {
|
|
color: var(--accent-1);
|
|
}
|
|
|
|
.org-names a {
|
|
color: #8a34d6;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.org-names a:hover {
|
|
color: #d68ae5;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tools-access {
|
|
margin-top: 3rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--accent-3);
|
|
}
|
|
|
|
.tools-link {
|
|
background: var(--lighter);
|
|
color: var(--accent-1);
|
|
border: 1px solid var(--accent-1);
|
|
padding: 0.8rem 2rem;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: var(--font-stack);
|
|
}
|
|
|
|
.tools-link:hover {
|
|
background: var(--accent-1);
|
|
color: var(--lighter);
|
|
text-shadow: none;
|
|
box-shadow: 0 0 10px rgba(51, 51, 51, 0.3);
|
|
}
|
|
|
|
.tools-link:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.7s ease;
|
|
}
|
|
|
|
.tools-link:hover:before {
|
|
left: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.logo {
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
padding: 1rem 0.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.coming-soon {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
}
|
|
</style> |