1459 lines
28 KiB
CSS
1459 lines
28 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #090a0f;
|
|
--foreground: #f8fbff;
|
|
--muted: #b4c0d5;
|
|
--surface: #141832;
|
|
--surface-strong: #1f2244;
|
|
--cyan: #00e7ff;
|
|
--violet: #8b4dff;
|
|
--pink: #ff4dd2;
|
|
--green: #33e879;
|
|
--gold: #ffd54a;
|
|
--stone: #252932;
|
|
--stone-light: #343a45;
|
|
--dirt: #5a3b22;
|
|
--paper: #f2efe3;
|
|
--shadow-hard: 6px 6px 0 rgb(0 0 0 / 55%);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--cyan);
|
|
color: #06111a;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: 3px solid var(--gold);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.stellar-page {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(ellipse at bottom, #1b2735 0%, #0d1021 48%, #05060c 100%);
|
|
}
|
|
|
|
.stellar-page::before,
|
|
.stellar-page::after {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stellar-page::before {
|
|
--star-opacity-high: 1;
|
|
--star-opacity-low: 0.68;
|
|
--star-opacity-mid: 0.78;
|
|
|
|
inset: -260px -160px;
|
|
background-image:
|
|
radial-gradient(circle, rgb(255 255 255 / 90%) 1px, transparent 1.5px),
|
|
radial-gradient(circle, rgb(0 231 255 / 65%) 1px, transparent 1.5px),
|
|
radial-gradient(circle, rgb(255 255 255 / 55%) 1.5px, transparent 2px);
|
|
background-position:
|
|
0 0,
|
|
34px 74px,
|
|
88px 12px;
|
|
background-size:
|
|
86px 86px,
|
|
142px 142px,
|
|
230px 230px;
|
|
opacity: 0.82;
|
|
animation:
|
|
star-drift 105s linear infinite,
|
|
star-twinkle 5.6s ease-in-out infinite alternate;
|
|
will-change: transform, opacity, filter;
|
|
}
|
|
|
|
.stellar-page::after {
|
|
background:
|
|
radial-gradient(circle, rgb(255 255 255 / 70%) 1px, transparent 1.6px) 12px 22px / 166px 166px,
|
|
radial-gradient(circle, rgb(255 213 74 / 38%) 1px, transparent 1.8px) 72px 108px / 270px 270px,
|
|
linear-gradient(180deg, transparent 0%, rgb(0 231 255 / 6%) 58%, rgb(51 232 121 / 10%) 100%),
|
|
radial-gradient(ellipse at 30% 80%, rgb(139 77 255 / 18%), transparent 38%),
|
|
radial-gradient(ellipse at 80% 70%, rgb(0 231 255 / 13%), transparent 32%);
|
|
animation: star-glow 12s ease-in-out infinite alternate;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.home-shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: min(1120px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 32px 0 22px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.home-nav {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.brand-lockup,
|
|
.minecraft-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.brand-lockup {
|
|
color: #a8f5ff;
|
|
font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
|
|
font-size: 1.2rem;
|
|
text-shadow: 0 0 18px rgb(0 231 255 / 45%);
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
width: 54px;
|
|
height: 54px;
|
|
place-items: center;
|
|
border: 2px solid rgb(168 245 255 / 85%);
|
|
border-radius: 8px;
|
|
background: rgb(7 20 36 / 72%);
|
|
box-shadow: 0 0 22px rgb(0 231 255 / 35%), inset 0 0 14px rgb(0 231 255 / 20%);
|
|
color: #a8f5ff;
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.home-hero {
|
|
max-width: 920px;
|
|
margin-top: 54px;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-hero h1 {
|
|
margin: 0;
|
|
font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
|
|
font-size: 4.8rem;
|
|
font-weight: 700;
|
|
line-height: 0.98;
|
|
text-shadow: 0 10px 0 rgb(0 0 0 / 32%), 0 0 26px rgb(255 255 255 / 20%);
|
|
}
|
|
|
|
.home-hero p {
|
|
max-width: 720px;
|
|
margin: 22px auto 0;
|
|
color: #c7d0e6;
|
|
font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
|
|
font-size: 1.45rem;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.service-grid {
|
|
display: grid;
|
|
width: min(1120px, 100%);
|
|
margin-top: 48px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 32px;
|
|
}
|
|
|
|
.service-card {
|
|
--service-accent: var(--cyan);
|
|
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 314px;
|
|
padding: 32px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border: 3px solid var(--cyan);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(180deg, rgb(20 24 50 / 88%), rgb(8 10 22 / 92%)),
|
|
radial-gradient(circle at 50% 20%, rgb(255 255 255 / 10%), transparent 34%);
|
|
box-shadow: var(--shadow-hard), inset 0 0 0 1px rgb(255 255 255 / 9%);
|
|
color: var(--foreground);
|
|
text-align: center;
|
|
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
|
|
.service-card::before {
|
|
position: absolute;
|
|
inset: 20px;
|
|
content: "";
|
|
background-image:
|
|
radial-gradient(circle, currentColor 1.5px, transparent 2px),
|
|
radial-gradient(circle, currentColor 1px, transparent 1.5px);
|
|
background-position:
|
|
0 0,
|
|
26px 34px;
|
|
background-size:
|
|
52px 52px,
|
|
74px 74px;
|
|
opacity: 0.18;
|
|
z-index: 0;
|
|
}
|
|
|
|
.service-card > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.service-card--jellyfin {
|
|
--service-accent: var(--violet);
|
|
|
|
border-color: var(--violet);
|
|
box-shadow: var(--shadow-hard), 0 0 28px rgb(139 77 255 / 34%), inset 0 0 0 1px rgb(255 255 255 / 9%);
|
|
color: #ae77ff;
|
|
}
|
|
|
|
.service-card--minecraft {
|
|
--service-accent: var(--green);
|
|
|
|
border-color: var(--green);
|
|
box-shadow: var(--shadow-hard), 0 0 28px rgb(51 232 121 / 28%), inset 0 0 0 1px rgb(255 255 255 / 9%);
|
|
color: #46ee89;
|
|
}
|
|
|
|
.service-card--seerr {
|
|
--service-accent: #ff6b8a;
|
|
|
|
border-color: #ff6b8a;
|
|
box-shadow: var(--shadow-hard), 0 0 28px rgb(255 107 138 / 30%), inset 0 0 0 1px rgb(255 255 255 / 9%);
|
|
color: #ff9aaa;
|
|
}
|
|
|
|
.service-card--astroneer {
|
|
--service-accent: #ffb347;
|
|
|
|
border-color: #ffb347;
|
|
box-shadow: var(--shadow-hard), 0 0 28px rgb(255 179 71 / 30%), inset 0 0 0 1px rgb(255 255 255 / 9%);
|
|
color: #ffd66b;
|
|
}
|
|
|
|
.service-status {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 3px solid rgb(3 17 18 / 72%);
|
|
border-radius: 999px;
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 4px rgb(51 232 121 / 18%), 0 0 18px rgb(51 232 121 / 80%);
|
|
}
|
|
|
|
.service-icon-shell {
|
|
position: relative;
|
|
display: grid;
|
|
width: 116px;
|
|
height: 116px;
|
|
place-items: center;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.service-icon-shell svg {
|
|
width: 94px;
|
|
height: 94px;
|
|
filter: drop-shadow(0 8px 14px rgb(0 0 0 / 40%));
|
|
}
|
|
|
|
.service-copy {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding-top: 22px;
|
|
}
|
|
|
|
.service-copy::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 18%;
|
|
right: 18%;
|
|
height: 3px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 12px currentColor;
|
|
content: "";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.service-copy strong {
|
|
color: #fff;
|
|
font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
|
|
font-size: 2.05rem;
|
|
line-height: 1;
|
|
text-shadow: 0 4px 0 rgb(0 0 0 / 40%);
|
|
}
|
|
|
|
.service-copy span {
|
|
min-height: 48px;
|
|
color: #bdc8dd;
|
|
font-size: 1rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.service-action {
|
|
display: inline-flex;
|
|
min-height: 56px;
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
padding: 0 14px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
border: 2px solid rgb(255 255 255 / 20%);
|
|
border-radius: 8px;
|
|
background: var(--service-accent);
|
|
color: #06111a;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
|
|
.service-action-label {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.service-card--jellyfin .service-action {
|
|
background: linear-gradient(180deg, #a95cff, #7d3cff);
|
|
color: #fff;
|
|
text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
|
|
}
|
|
|
|
.service-card--seerr .service-action {
|
|
background: linear-gradient(180deg, #ffd166, #ff6b8a);
|
|
color: #170b14;
|
|
}
|
|
|
|
.service-card--minecraft .service-action {
|
|
background: linear-gradient(180deg, #35f48a, #13ca69);
|
|
color: #041411;
|
|
}
|
|
|
|
.service-card--astroneer .service-action {
|
|
background: linear-gradient(180deg, #ffd66b, #ff9f43);
|
|
color: #1a1025;
|
|
}
|
|
|
|
.service-action svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.home-footer-hint {
|
|
display: flex;
|
|
width: min(560px, 100%);
|
|
margin-top: auto;
|
|
padding-top: 42px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
color: #a6b1cc;
|
|
font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.home-footer-hint span {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 14px var(--cyan);
|
|
}
|
|
|
|
.home-footer-hint span:first-child {
|
|
background: var(--violet);
|
|
box-shadow: 0 0 14px var(--violet);
|
|
}
|
|
|
|
.minecraft-page {
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background:
|
|
linear-gradient(180deg, #0c1220 0%, #11161d 42%, #1e140e 100%);
|
|
color: var(--paper);
|
|
font-family: var(--font-retro), var(--font-geist-mono), monospace;
|
|
font-size: 1.35rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.astroneer-page {
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background:
|
|
radial-gradient(circle at 72% 18%, rgb(109 244 255 / 22%), transparent 24%),
|
|
linear-gradient(180deg, #11102a 0%, #151a30 46%, #24170f 100%);
|
|
color: var(--paper);
|
|
font-family: var(--font-retro), var(--font-geist-mono), monospace;
|
|
font-size: 1.35rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.minecraft-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
width: min(1120px, calc(100% - 24px));
|
|
margin: 12px auto 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
border: 4px solid #030303;
|
|
background:
|
|
linear-gradient(135deg, rgb(255 255 255 / 5%) 25%, transparent 25%) 0 0 / 22px 22px,
|
|
linear-gradient(315deg, rgb(0 0 0 / 22%) 25%, transparent 25%) 0 0 / 22px 22px,
|
|
rgb(37 41 50 / 95%);
|
|
box-shadow: var(--shadow-hard);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.minecraft-brand {
|
|
padding: 14px 18px;
|
|
color: var(--paper);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.minecraft-brand svg,
|
|
.minecraft-nav-links svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
.minecraft-nav-links {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.minecraft-nav-links a {
|
|
display: flex;
|
|
min-height: 56px;
|
|
padding: 0 18px;
|
|
align-items: center;
|
|
border-left: 2px solid rgb(0 0 0 / 48%);
|
|
color: #f5f1e8;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.66rem;
|
|
transition: background 160ms ease, color 160ms ease;
|
|
}
|
|
|
|
.minecraft-nav-links a:hover {
|
|
background: rgb(255 213 74 / 12%);
|
|
color: var(--gold);
|
|
}
|
|
|
|
.minecraft-hero {
|
|
position: relative;
|
|
display: grid;
|
|
min-height: 680px;
|
|
margin-top: -72px;
|
|
padding: 148px 24px 86px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.minecraft-hero::after {
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
height: 210px;
|
|
background: linear-gradient(180deg, transparent, rgb(12 18 32 / 80%) 62%, #11161d 100%);
|
|
content: "";
|
|
}
|
|
|
|
.minecraft-hero-image {
|
|
z-index: 0;
|
|
object-fit: cover;
|
|
filter: saturate(1.05) contrast(1.04);
|
|
}
|
|
|
|
.astroneer-hero {
|
|
position: relative;
|
|
display: grid;
|
|
min-height: 680px;
|
|
margin-top: -72px;
|
|
padding: 148px 24px 86px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.astroneer-hero::before {
|
|
--star-opacity-high: 0.66;
|
|
--star-opacity-low: 0.42;
|
|
--star-opacity-mid: 0.5;
|
|
|
|
position: absolute;
|
|
inset: -180px;
|
|
background:
|
|
radial-gradient(circle, rgb(255 255 255 / 80%) 1px, transparent 1.5px) 0 0 / 96px 96px,
|
|
radial-gradient(circle, rgb(109 244 255 / 65%) 1px, transparent 1.5px) 44px 18px / 148px 148px;
|
|
content: "";
|
|
opacity: 0.55;
|
|
animation:
|
|
astroneer-star-drift 92s linear infinite,
|
|
star-twinkle 6.5s ease-in-out infinite alternate;
|
|
will-change: transform, opacity, filter;
|
|
}
|
|
|
|
.astroneer-hero::after {
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
height: 230px;
|
|
background: linear-gradient(180deg, transparent, rgb(17 16 42 / 80%) 58%, #151a30 100%);
|
|
content: "";
|
|
}
|
|
|
|
.astroneer-orbit {
|
|
position: absolute;
|
|
top: 64%;
|
|
left: 50%;
|
|
z-index: 1;
|
|
width: min(760px, 84vw);
|
|
aspect-ratio: 1;
|
|
border: 3px solid rgb(255 213 74 / 36%);
|
|
border-radius: 50%;
|
|
opacity: 0.72;
|
|
transform: translate(-50%, -50%) rotate(-16deg);
|
|
}
|
|
|
|
.astroneer-planet {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: min(320px, 48vw);
|
|
aspect-ratio: 1;
|
|
border: 6px solid #030303;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 28%, #6df4ff 0 7%, transparent 8%),
|
|
radial-gradient(circle at 67% 62%, #ffb347 0 10%, transparent 11%),
|
|
linear-gradient(135deg, #27315f 0 42%, #ff7a3d 42% 58%, #172341 58% 100%);
|
|
box-shadow: 14px 14px 0 rgb(0 0 0 / 42%), 0 0 60px rgb(109 244 255 / 24%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.astroneer-moon {
|
|
position: absolute;
|
|
top: 9%;
|
|
right: 18%;
|
|
width: 62px;
|
|
aspect-ratio: 1;
|
|
border: 5px solid #030303;
|
|
border-radius: 50%;
|
|
background: #ffd66b;
|
|
box-shadow: 8px 8px 0 rgb(0 0 0 / 36%);
|
|
}
|
|
|
|
.astroneer-rover {
|
|
position: absolute;
|
|
bottom: 14%;
|
|
left: 18%;
|
|
width: 86px;
|
|
height: 28px;
|
|
border: 5px solid #030303;
|
|
background: #6df4ff;
|
|
box-shadow: 8px 8px 0 rgb(0 0 0 / 36%);
|
|
}
|
|
|
|
.astroneer-rover::before,
|
|
.astroneer-rover::after {
|
|
position: absolute;
|
|
bottom: -18px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 4px solid #030303;
|
|
border-radius: 50%;
|
|
background: #ff9f43;
|
|
content: "";
|
|
}
|
|
|
|
.astroneer-rover::before {
|
|
left: 8px;
|
|
}
|
|
|
|
.astroneer-rover::after {
|
|
right: 8px;
|
|
}
|
|
|
|
.astroneer-hero-content {
|
|
text-shadow: 4px 4px 0 #030303;
|
|
}
|
|
|
|
.minecraft-hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
width: min(860px, 100%);
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
text-shadow: 4px 4px 0 #030303;
|
|
}
|
|
|
|
.minecraft-hero-content h1 {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 4rem;
|
|
line-height: 1.18;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.minecraft-hero-content p {
|
|
max-width: 660px;
|
|
margin: 22px 0 26px;
|
|
color: #f4f1e8;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.block-panel {
|
|
border: 4px solid #030303;
|
|
background:
|
|
linear-gradient(135deg, rgb(255 255 255 / 5%) 25%, transparent 25%) 0 0 / 24px 24px,
|
|
linear-gradient(315deg, rgb(0 0 0 / 20%) 25%, transparent 25%) 0 0 / 24px 24px,
|
|
var(--stone);
|
|
box-shadow:
|
|
inset -4px -4px 0 rgb(0 0 0 / 45%),
|
|
inset 4px 4px 0 rgb(255 255 255 / 8%),
|
|
var(--shadow-hard);
|
|
}
|
|
|
|
.server-address {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
padding: 18px 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
color: var(--cyan);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 1.35rem;
|
|
overflow-wrap: anywhere;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.server-address svg {
|
|
width: 34px;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
fill: #56e1ef;
|
|
stroke: #041314;
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.minecraft-actions {
|
|
display: flex;
|
|
max-width: 100%;
|
|
margin-top: 22px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.copy-address-button,
|
|
.map-button,
|
|
.large-map-link,
|
|
.back-home-link {
|
|
display: inline-flex;
|
|
min-height: 58px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
border: 4px solid #030303;
|
|
box-shadow:
|
|
inset -3px -3px 0 rgb(0 0 0 / 32%),
|
|
inset 3px 3px 0 rgb(255 255 255 / 22%),
|
|
5px 5px 0 rgb(0 0 0 / 48%);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.82rem;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: transform 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
|
|
.copy-address-button span,
|
|
.map-button span,
|
|
.large-map-link span,
|
|
.back-home-link span,
|
|
.minecraft-brand span,
|
|
.minecraft-nav-links a,
|
|
.service-copy,
|
|
.service-action-label {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.copy-address-button:hover,
|
|
.map-button:hover,
|
|
.large-map-link:hover,
|
|
.back-home-link:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow:
|
|
inset -3px -3px 0 rgb(0 0 0 / 32%),
|
|
inset 3px 3px 0 rgb(255 255 255 / 22%),
|
|
8px 8px 0 rgb(0 0 0 / 56%);
|
|
}
|
|
|
|
.copy-address-button,
|
|
.map-button {
|
|
padding: 0 24px;
|
|
background: var(--gold);
|
|
color: #16120a;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy-address-button.is-copied {
|
|
background: var(--green);
|
|
}
|
|
|
|
.large-map-link {
|
|
padding: 0 24px;
|
|
background: #12c8c7;
|
|
color: #061115;
|
|
}
|
|
|
|
.copy-address-button svg,
|
|
.map-button svg,
|
|
.large-map-link svg,
|
|
.back-home-link svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
.minecraft-content {
|
|
position: relative;
|
|
z-index: 3;
|
|
width: min(1120px, calc(100% - 32px));
|
|
margin: -48px auto 0;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
.minecraft-section {
|
|
scroll-margin-top: 100px;
|
|
margin-top: 56px;
|
|
}
|
|
|
|
.section-heading {
|
|
margin-bottom: 22px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pixel-heading h2,
|
|
h2.pixel-heading {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 1.45rem;
|
|
line-height: 1.35;
|
|
text-shadow: 3px 3px 0 #030303;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-heading p,
|
|
.map-copy p {
|
|
margin: 8px 0 0;
|
|
color: #b8c2cf;
|
|
font-size: 1.45rem;
|
|
}
|
|
|
|
.status-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
padding: 22px;
|
|
}
|
|
|
|
.status-item {
|
|
display: grid;
|
|
min-height: 92px;
|
|
padding: 12px 20px;
|
|
place-items: center;
|
|
border-right: 2px solid rgb(255 255 255 / 12%);
|
|
text-align: center;
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.status-label {
|
|
color: #c7cbd1;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.68rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-value {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
color: #fff;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.88rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.astroneer-info-panel .status-value {
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.status-value--online {
|
|
color: #7aff5f;
|
|
}
|
|
|
|
.status-value--offline {
|
|
color: #ff5c5c;
|
|
}
|
|
|
|
.status-light {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: currentColor;
|
|
box-shadow: 0 0 14px currentColor;
|
|
}
|
|
|
|
.status-note {
|
|
margin: 18px 0 0;
|
|
color: #ffce86;
|
|
text-align: center;
|
|
}
|
|
|
|
.whitelist-form {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 20px;
|
|
padding: 26px;
|
|
}
|
|
|
|
.form-field {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-field--full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.form-field label {
|
|
color: var(--gold);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.68rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.form-field input,
|
|
.form-field textarea {
|
|
width: 100%;
|
|
border: 4px solid #030303;
|
|
background: rgb(8 10 15 / 90%);
|
|
box-shadow:
|
|
inset -3px -3px 0 rgb(0 0 0 / 32%),
|
|
inset 3px 3px 0 rgb(255 255 255 / 8%);
|
|
color: var(--paper);
|
|
font-family: var(--font-geist-mono), monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.form-field input {
|
|
min-height: 56px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.form-field textarea {
|
|
min-height: 148px;
|
|
padding: 16px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-field input::placeholder,
|
|
.form-field textarea::placeholder {
|
|
color: rgb(242 239 227 / 48%);
|
|
}
|
|
|
|
.whitelist-submit {
|
|
display: inline-flex;
|
|
min-height: 58px;
|
|
padding: 0 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 4px solid #030303;
|
|
background: var(--green);
|
|
box-shadow:
|
|
inset -3px -3px 0 rgb(0 0 0 / 32%),
|
|
inset 3px 3px 0 rgb(255 255 255 / 22%),
|
|
5px 5px 0 rgb(0 0 0 / 48%);
|
|
color: #041411;
|
|
cursor: pointer;
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.78rem;
|
|
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
|
|
}
|
|
|
|
.whitelist-submit:hover:not(:disabled) {
|
|
transform: translateY(-4px);
|
|
box-shadow:
|
|
inset -3px -3px 0 rgb(0 0 0 / 32%),
|
|
inset 3px 3px 0 rgb(255 255 255 / 22%),
|
|
8px 8px 0 rgb(0 0 0 / 56%);
|
|
}
|
|
|
|
.whitelist-submit:disabled {
|
|
cursor: wait;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.whitelist-message {
|
|
display: flex;
|
|
min-height: 58px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 12px 16px;
|
|
align-items: center;
|
|
border: 4px solid #030303;
|
|
background: rgb(8 10 15 / 82%);
|
|
color: var(--paper);
|
|
font-family: var(--font-geist-mono), monospace;
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.whitelist-message--success {
|
|
color: #7aff5f;
|
|
}
|
|
|
|
.whitelist-message--error {
|
|
color: #ffce86;
|
|
}
|
|
|
|
.steps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 22px;
|
|
}
|
|
|
|
.step-card {
|
|
position: relative;
|
|
min-height: 230px;
|
|
padding: 58px 22px 24px;
|
|
}
|
|
|
|
.step-number {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
display: grid;
|
|
width: 38px;
|
|
height: 38px;
|
|
place-items: center;
|
|
border: 3px solid #030303;
|
|
background: #080a0f;
|
|
color: var(--gold);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.step-card h3 {
|
|
margin: 0 0 12px;
|
|
color: var(--gold);
|
|
font-family: var(--font-pixel), var(--font-geist-mono), monospace;
|
|
font-size: 0.78rem;
|
|
line-height: 1.45;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.step-card p {
|
|
margin: 0;
|
|
color: #d6d1c4;
|
|
font-size: 1.32rem;
|
|
}
|
|
|
|
.map-section {
|
|
display: grid;
|
|
grid-template-columns: 0.85fr 1fr;
|
|
gap: 28px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.map-preview {
|
|
min-height: 250px;
|
|
padding: 18px;
|
|
background:
|
|
linear-gradient(135deg, rgb(255 255 255 / 9%) 25%, transparent 25%) 0 0 / 20px 20px,
|
|
#24180f;
|
|
}
|
|
|
|
.map-island {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 214px;
|
|
border: 4px solid #120b06;
|
|
background:
|
|
linear-gradient(45deg, transparent 46%, rgb(0 0 0 / 18%) 48%, rgb(0 0 0 / 18%) 52%, transparent 54%) 0 0 / 34px 34px,
|
|
radial-gradient(circle at 24% 42%, #7fbf4d 0 9%, transparent 10%),
|
|
radial-gradient(circle at 52% 35%, #8bc95a 0 12%, transparent 13%),
|
|
radial-gradient(circle at 71% 58%, #6ead43 0 10%, transparent 11%),
|
|
linear-gradient(135deg, #2d8ac7 0 36%, #75b756 36% 64%, #2d8ac7 64% 100%);
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.map-pin {
|
|
position: absolute;
|
|
top: 22%;
|
|
right: 18%;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 4px solid #160302;
|
|
border-radius: 50% 50% 50% 0;
|
|
background: #ff493f;
|
|
transform: rotate(-45deg);
|
|
box-shadow: 4px 4px 0 rgb(0 0 0 / 38%);
|
|
}
|
|
|
|
.map-copy {
|
|
display: flex;
|
|
padding: 34px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border: 4px solid #030303;
|
|
background: rgb(37 41 50 / 92%);
|
|
box-shadow: var(--shadow-hard);
|
|
}
|
|
|
|
.large-map-link {
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
justify-content: space-between;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.minecraft-back {
|
|
display: flex;
|
|
margin-top: 42px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-home-link {
|
|
padding: 0 24px;
|
|
background: var(--stone-light);
|
|
color: var(--paper);
|
|
}
|
|
|
|
@keyframes star-drift {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(-120px, -220px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes astroneer-star-drift {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(-90px, -180px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes star-twinkle {
|
|
0%,
|
|
100% {
|
|
filter: brightness(0.92);
|
|
opacity: var(--star-opacity-low, 0.68);
|
|
}
|
|
|
|
45% {
|
|
filter: brightness(1.28);
|
|
opacity: var(--star-opacity-high, 1);
|
|
}
|
|
|
|
72% {
|
|
filter: brightness(1.05);
|
|
opacity: var(--star-opacity-mid, 0.78);
|
|
}
|
|
}
|
|
|
|
@keyframes star-glow {
|
|
from {
|
|
opacity: 0.78;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.home-hero h1 {
|
|
font-size: 3.6rem;
|
|
}
|
|
|
|
.service-grid {
|
|
gap: 22px;
|
|
}
|
|
|
|
.minecraft-nav {
|
|
position: relative;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.minecraft-brand {
|
|
justify-content: center;
|
|
}
|
|
|
|
.minecraft-nav-links {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.minecraft-nav-links a {
|
|
min-height: 48px;
|
|
justify-content: center;
|
|
border-top: 2px solid rgb(0 0 0 / 48%);
|
|
border-left: 0;
|
|
}
|
|
|
|
.minecraft-hero {
|
|
margin-top: -118px;
|
|
padding-top: 214px;
|
|
}
|
|
|
|
.astroneer-hero {
|
|
margin-top: -118px;
|
|
padding-top: 214px;
|
|
}
|
|
|
|
.service-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.status-panel,
|
|
.steps-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.status-item:nth-child(2) {
|
|
border-right: 0;
|
|
}
|
|
|
|
.status-item:nth-child(-n + 2) {
|
|
border-bottom: 2px solid rgb(255 255 255 / 12%);
|
|
}
|
|
|
|
.map-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.minecraft-page,
|
|
.astroneer-page {
|
|
--shadow-hard: 4px 4px 0 rgb(0 0 0 / 55%);
|
|
}
|
|
|
|
.home-shell {
|
|
width: min(100% - 24px, 520px);
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.brand-lockup {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 46px;
|
|
height: 46px;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.home-hero {
|
|
margin-top: 42px;
|
|
}
|
|
|
|
.home-hero h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.home-hero p {
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
.service-grid {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.service-card {
|
|
min-height: 276px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.home-footer-hint {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.minecraft-page {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.astroneer-page {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.minecraft-nav {
|
|
width: min(100% - 20px, 520px);
|
|
gap: 0;
|
|
}
|
|
|
|
.minecraft-brand {
|
|
padding: 12px 14px;
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.minecraft-nav-links {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.minecraft-nav-links a {
|
|
min-height: 44px;
|
|
padding: 0 10px;
|
|
font-size: 0.52rem;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
}
|
|
|
|
.minecraft-hero {
|
|
min-height: 720px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.astroneer-hero {
|
|
min-height: 720px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.minecraft-hero-content h1 {
|
|
max-width: 100%;
|
|
font-size: 1.95rem;
|
|
line-height: 1.22;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.minecraft-hero-content p {
|
|
font-size: 1.12rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.server-address {
|
|
width: 100%;
|
|
padding: 14px 12px;
|
|
gap: 10px;
|
|
font-size: 0.68rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.server-address svg {
|
|
width: 26px;
|
|
min-width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.astroneer-orbit {
|
|
width: min(420px, 118vw);
|
|
}
|
|
|
|
.astroneer-planet {
|
|
width: 190px;
|
|
}
|
|
|
|
.minecraft-actions,
|
|
.copy-address-button,
|
|
.map-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.status-panel,
|
|
.steps-grid,
|
|
.whitelist-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.whitelist-submit,
|
|
.whitelist-message {
|
|
width: 100%;
|
|
}
|
|
|
|
.copy-address-button,
|
|
.map-button,
|
|
.large-map-link,
|
|
.back-home-link,
|
|
.whitelist-submit {
|
|
min-height: 52px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
font-size: 0.64rem;
|
|
}
|
|
|
|
.whitelist-form,
|
|
.status-panel,
|
|
.map-copy {
|
|
padding: 18px;
|
|
}
|
|
|
|
.form-field input {
|
|
min-height: 52px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.form-field textarea {
|
|
padding: 12px;
|
|
}
|
|
|
|
.status-item,
|
|
.status-item:nth-child(2),
|
|
.status-item:nth-child(-n + 2) {
|
|
border-right: 0;
|
|
border-bottom: 2px solid rgb(255 255 255 / 12%);
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.pixel-heading h2,
|
|
h2.pixel-heading {
|
|
font-size: 0.9rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.section-heading p,
|
|
.map-copy p {
|
|
font-size: 1.02rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.large-map-link {
|
|
gap: 10px;
|
|
font-size: 0.62rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
.home-hero h1 {
|
|
font-size: 2.35rem;
|
|
}
|
|
|
|
.minecraft-hero-content h1 {
|
|
font-size: 1.62rem;
|
|
}
|
|
|
|
.minecraft-hero-content p,
|
|
.section-heading p,
|
|
.map-copy p {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.minecraft-nav-links a {
|
|
font-size: 0.48rem;
|
|
}
|
|
|
|
.server-address,
|
|
.copy-address-button,
|
|
.map-button,
|
|
.large-map-link,
|
|
.back-home-link,
|
|
.whitelist-submit {
|
|
font-size: 0.56rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|