/* ════════════════════════════════════════════════
NEO CRYSTAL TOKYO — global.css
Shared styles across all pages.
Load this FIRST, then your page-specific CSS.
════════════════════════════════════════════════ */
/* ── GOOGLE FONTS ── */
/* Add this to every HTML instead of here:
*/
@font-face {
font-family: 'PressStart2P';
src: url("../fonts/PressStart2P.ttf");
}
/* ── RESET ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0; padding: 0;
cursor: none;
font-family: 'PressStart2P';
}
/* ── SHARED COLOR VARIABLES ── */
/* Each page also has its own :root block for page-specific colors.
These are the tokens shared across every page. */
:root {
--gold: #f5d87e;
--gold-dark: #c9a84c;
--white: #ffffff;
/* Landing page palette */
--pink: #f9c6d0;
--deep-pink: #e8829a;
--rose: #f3a0b5;
--cream: #fff8f9;
--text: #4a2040;
/* Shared UI */
--ok: #4caf82;
--warn: #f5a623;
--danger: #e53935;
}
/* ── BASE ── */
html, body {
min-height: 100vh;
/*font-family: 'Cormorant Garamond', Georgia, serif;*/
font-family: 'PressStart2P';
overflow-x: hidden;
}
/* ── GIF CURSOR OVERLAY ──
Used by stats page. Add to body
and set --cursor-gif in the page CSS. */
.cursor {
position: fixed;
z-index: 99999;
width: 35px;
height: 35px;
pointer-events: none;
background-image: url('https://neo-crystal-tokyo.net/static/images/cursors/Moon Stick Cursor.gif');
background-size: cover;
transform: translate(-50%, -50%);
}
/* ── STARS ── */
.stars {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.star {
position: absolute;
border-radius: 50%;
background: var(--gold);
opacity: 0;
animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 0.7; transform: scale(1.2); }
}
/* ── SPARKLE CURSOR TRAIL ── */
.sparkle {
position: fixed;
pointer-events: none;
z-index: 9999;
width: 7px; height: 7px;
border-radius: 50%;
animation: sparkle-fade 0.8s ease-out forwards;
}
@keyframes sparkle-fade {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(0) translateY(-20px); }
}
/* ── PAGE LAYOUT ── */
.page {
position: relative;
z-index: 3;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 1.5rem 4rem;
}
/* ── BACK LINK ── */
.back-link {
align-self: flex-start;
font-size: 1rem;
letter-spacing: 0.15em;
color: var(--gold);
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s ease;
margin-bottom: 2rem;
}
.back-link:hover { opacity: 1; }
/* ── SHARED HEADER ELEMENTS ── */
.title {
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.2;
}
.subtitle {
font-style: italic;
font-weight: 300;
letter-spacing: 0.12em;
}
.divider {
margin: 1rem auto 0;
height: 1px;
background: linear-gradient(180deg, transparent, var(--gold), var(--rose, #f3a0b5), var(--gold), transparent);
}
/* ── FOOTER ── */
footer {
margin-top: 3rem;
text-align: center;
font-size: 0.8rem;
font-style: italic;
letter-spacing: 0.08em;
opacity: 0.45;
animation: fadeUp 0.7s 1.0s ease both;
}
/* ── SHARED ANIMATIONS ── */
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* ── SENSHI SYMBOL ICONS ── */
/* Usage:
*/
.senshi-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
vertical-align: middle;
margin-left: 0.4rem;
transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.senshi-icon svg { width: 100%; height: 100%; }
/* Senshi colors */
.senshi-icon { color: var(--gold); }
.senshi-icon.moon { color: #f5d87e; }
.senshi-icon.dark-moon { color: #b0b0c0; }
.senshi-icon.dead-moon { color: #b0b0b0; }
.senshi-icon.chibi-moon { color: #ff8fab; }
.senshi-icon.earth { color: #4caf50; }
.senshi-icon.mercury { color: #5bc8f5; }
.senshi-icon.mars { color: #e53935; }
.senshi-icon.jupiter { color: #4caf50; }
.senshi-icon.venus { color: #f5a623; }
.senshi-icon.uranus { color: #4db6e4; }
.senshi-icon.neptune { color: #26c6da; }
.senshi-icon.saturn { color: #ba68c8; }
.senshi-icon.pluto { color: #8d6e63; }
.senshi-icon.star { color: #ffd600; }
//* {
//-webkit-text-stroke: 1px white;
//text-stroke: 1px white;
//}
.under-text {
-webkit-text-stroke: 0px;
text-stroke: 0px;
}