/* ============================================================ ULICRAFT — "Carved from stone" Design system: dark overworld, MC-GUI bevels, pixel type ============================================================ */ /* ---- Mood palettes (data-mood on ) ---- */ :root, :root[data-mood="grass"] { --bg: oklch(0.165 0.014 150); --bg-2: oklch(0.205 0.016 150); --surface: oklch(0.235 0.017 150); --surface-2: oklch(0.285 0.018 150); --slot: oklch(0.185 0.014 150); --bevel-hi: oklch(0.40 0.018 150); --bevel-lo: oklch(0.115 0.012 150); --line: oklch(0.33 0.016 150); --accent: oklch(0.72 0.16 145); /* grass */ --accent-hi: oklch(0.80 0.15 145); --accent-lo: oklch(0.55 0.15 145); --accent-ink: oklch(0.17 0.05 150); /* text on accent */ --gold: oklch(0.82 0.135 85); --glow: oklch(0.72 0.16 145 / 0.30); --text: oklch(0.95 0.008 110); --muted: oklch(0.72 0.012 145); --dim: oklch(0.55 0.012 145); } :root[data-mood="nether"] { --bg: oklch(0.165 0.018 35); --bg-2: oklch(0.205 0.022 32); --surface: oklch(0.235 0.026 32); --surface-2: oklch(0.285 0.030 32); --slot: oklch(0.185 0.020 32); --bevel-hi: oklch(0.42 0.040 35); --bevel-lo: oklch(0.115 0.016 32); --line: oklch(0.34 0.030 32); --accent: oklch(0.64 0.19 32); /* nether red */ --accent-hi: oklch(0.72 0.18 38); --accent-lo: oklch(0.50 0.17 30); --accent-ink: oklch(0.16 0.04 32); --gold: oklch(0.83 0.14 75); --glow: oklch(0.64 0.19 32 / 0.34); --text: oklch(0.95 0.010 60); --muted: oklch(0.74 0.020 45); --dim: oklch(0.56 0.020 40); } :root[data-mood="end"] { --bg: oklch(0.155 0.018 305); --bg-2: oklch(0.195 0.022 305); --surface: oklch(0.225 0.026 305); --surface-2: oklch(0.275 0.030 305); --slot: oklch(0.175 0.020 305); --bevel-hi: oklch(0.42 0.040 305); --bevel-lo: oklch(0.110 0.016 305); --line: oklch(0.34 0.030 305); --accent: oklch(0.74 0.135 175); /* end teal */ --accent-hi: oklch(0.82 0.13 175); --accent-lo: oklch(0.58 0.13 178); --accent-ink: oklch(0.16 0.04 200); --gold: oklch(0.84 0.13 95); --glow: oklch(0.70 0.16 300 / 0.34); --text: oklch(0.96 0.010 300); --muted: oklch(0.76 0.020 300); --dim: oklch(0.58 0.020 300); } /* ---- Fonts (switchable head face via --font-head) ---- */ :root { --font-head: 'Pixelify Sans', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-pixel: 'Press Start 2P', monospace; /* tiny eyebrow labels */ --font-mono: 'VT323', monospace; /* IP / terminal */ --maxw: 1160px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* faint pixel-grid stone texture over everything */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(0deg, oklch(1 0 0 / 0.018) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, oklch(0 0 0 / 0.06) 0 1px, transparent 1px 4px); background-size: 4px 4px, 4px 4px; mix-blend-mode: overlay; opacity: 0.5; } img { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---- Typography helpers ---- */ .eyebrow { font-family: var(--font-pixel); font-size: clamp(9px, 1.1vw, 11px); letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; line-height: 1.8; } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.02; letter-spacing: 0.01em; margin: 0; } .section-title { font-size: clamp(34px, 5vw, 58px); } .lead { color: var(--muted); } .mono { font-family: var(--font-mono); } /* ---- Layout ---- */ .wrap { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; } section { position: relative; z-index: 1; } .pad { padding-block: clamp(64px, 9vw, 130px); } .sec-head { max-width: 640px; margin-bottom: 48px; } .sec-head .eyebrow { display: block; margin-bottom: 14px; } .sec-head p { margin: 16px 0 0; font-size: 18px; } /* ============================================================ MINECRAFT-STYLE BUTTON ============================================================ */ .mc-btn { --b: var(--surface-2); position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); background: var(--b); border: 0; padding: 15px 24px 17px; cursor: pointer; text-decoration: none; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 4px 0 oklch(0 0 0 / 0.5), 0 8px 18px oklch(0 0 0 / 0.4); transition: transform .08s ease, filter .12s ease; image-rendering: pixelated; text-shadow: 0 2px 0 oklch(0 0 0 / 0.35); white-space: nowrap; } .mc-btn:hover { filter: brightness(1.12); } .mc-btn:active { transform: translateY(4px); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.4); } .mc-btn.primary { --b: var(--accent); --bevel-hi: var(--accent-hi); --bevel-lo: var(--accent-lo); color: var(--accent-ink); text-shadow: 0 2px 0 oklch(1 0 0 / 0.22); } .mc-btn.gold { --b: var(--gold); --bevel-hi: oklch(0.90 0.10 90); --bevel-lo: oklch(0.66 0.13 75); color: oklch(0.20 0.05 80); text-shadow: 0 2px 0 oklch(1 0 0 / 0.25); } .mc-btn.sm { font-size: 14px; padding: 10px 16px 12px; } /* ---- Copy-IP chip ---- */ .ip-chip { display: inline-flex; align-items: stretch; background: var(--slot); box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi); overflow: hidden; } .ip-chip .ip-val { display: flex; align-items: center; gap: 10px; padding: 0 18px; font-family: var(--font-mono); font-size: 28px; line-height: 1; color: var(--gold); letter-spacing: 0.02em; } .ip-chip .ip-val .pin { color: var(--dim); font-size: 22px; } .ip-chip button { border: 0; cursor: pointer; padding: 14px 18px; font-family: var(--font-head); font-weight: 600; font-size: 15px; background: var(--accent); color: var(--accent-ink); box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo); transition: filter .12s ease; white-space: nowrap; } .ip-chip button:hover { filter: brightness(1.1); } .ip-chip button.copied { background: var(--gold); color: oklch(0.20 0.05 80); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: oklch(0.165 0.014 150 / 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); } .brand .name { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; } .nav-links { display: flex; gap: 6px; margin-left: 12px; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; transition: color .12s ease, background .12s ease; } .nav-links a:hover { color: var(--text); background: var(--surface); } .nav-spacer { flex: 1; } /* ---- Creeper pixel mark ---- */ .creeper { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 34px; height: 34px; background: var(--accent); box-shadow: inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo); image-rendering: pixelated; } .creeper i { background: transparent; } .creeper i.f { background: oklch(0.16 0.03 150); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; } .hero::before { /* spotlight glow behind logo */ content: ""; position: absolute; top: -10%; left: 50%; width: 1100px; height: 760px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); pointer-events: none; filter: blur(8px); } .hero-grid { position: relative; display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; } /* layout: centered (default) */ :root[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } :root[data-hero="centered"] .hero-cta { justify-content: center; } :root[data-hero="centered"] .hero-meta { justify-content: center; } :root[data-hero="centered"] .hero-copy { max-width: 720px; } :root[data-hero="centered"] .hero-status { display: none; } /* layout: split (copy left, live panel right) */ :root[data-hero="split"] .hero-grid { grid-template-columns: 1.1fr 0.9fr; } :root[data-hero="split"] .hero-logo { max-width: 560px; } :root[data-hero="split"] .hero-logo img { margin-inline: 0; } /* layout: spotlight (giant logo, minimal text, centered) */ :root[data-hero="spotlight"] .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } :root[data-hero="spotlight"] .hero-cta { justify-content: center; } :root[data-hero="spotlight"] .hero-meta { justify-content: center; } :root[data-hero="spotlight"] .hero-logo { max-width: 900px; } :root[data-hero="spotlight"] .hero-tagline { font-size: clamp(20px, 2.4vw, 28px); } :root[data-hero="spotlight"] .hero-status { display: none; } :root[data-hero="spotlight"] .hero-features-note { display: none; } .hero-logo { width: 100%; max-width: 760px; } .hero-logo img { width: 100%; image-rendering: pixelated; filter: drop-shadow(0 8px 0 oklch(0 0 0 / 0.45)) drop-shadow(0 18px 30px oklch(0 0 0 / 0.55)); margin-inline: auto; } .hero-copy { display: flex; flex-direction: column; gap: 22px; } .hero-tagline { font-family: var(--font-head); font-weight: 600; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; letter-spacing: 0.01em; text-wrap: balance; } .hero-tagline .hl { color: var(--accent); } .hero-sub { color: var(--muted); font-size: 18px; max-width: 52ch; margin: 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--dim); font-size: 14.5px; } .hero-meta .dot { width: 6px; height: 6px; background: var(--dim); } .hero-ip-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* status pill */ .live-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; background: var(--slot); box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi); font-size: 14px; color: var(--muted); font-weight: 500; } .live-dot { width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 0 3px var(--glow); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } @media (prefers-reduced-motion: reduce){ .live-dot{ animation:none } } .live-pill b { color: var(--text); font-variant-numeric: tabular-nums; } /* ============================================================ SERVER-LIST STATUS PANEL ============================================================ */ .serverlist { display: flex; gap: 18px; align-items: center; background: var(--slot); padding: 16px; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 8px 24px oklch(0 0 0 / 0.4); } .serverlist .icon { width: 72px; height: 72px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-2); box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi); } .serverlist .icon .creeper { width: 48px; height: 48px; } .serverlist .meta { flex: 1; min-width: 0; } .serverlist .row1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; } .serverlist .title { font-family: var(--font-head); font-weight: 600; font-size: 22px; white-space: nowrap; } .serverlist .ver { color: var(--dim); font-family: var(--font-mono); font-size: 17px; white-space: nowrap; } .serverlist .motd { margin: 6px 0 0; color: var(--muted); font-size: 15px; } .serverlist .motd .g { color: var(--gold); } .serverlist .motd .a { color: var(--accent); } .serverlist .stat { text-align: right; flex-shrink: 0; } .serverlist .players { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--muted); display:flex; align-items:center; gap:8px; justify-content:flex-end; } .serverlist .players b { color: var(--text); } /* signal bars */ .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .bars i { width: 4px; background: var(--accent); image-rendering: pixelated; } .bars i:nth-child(1){height:25%} .bars i:nth-child(2){height:45%} .bars i:nth-child(3){height:65%} .bars i:nth-child(4){height:85%} .bars i:nth-child(5){height:100%} /* stat tiles */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; } .tile { background: var(--surface); padding: 22px; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); } .tile .k { font-family: var(--font-head); font-weight: 600; font-size: 38px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; } .tile .k .u { color: var(--accent); font-size: 22px; } .tile .l { margin-top: 8px; color: var(--dim); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-pixel); font-size: 9px; line-height: 1.8; } /* ============================================================ FEATURES ============================================================ */ .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .feat { display: flex; gap: 18px; background: var(--surface); padding: 26px; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); transition: transform .14s ease, filter .14s ease; } .feat:hover { transform: translateY(-3px); filter: brightness(1.06); } .feat h3 { font-size: 21px; margin-bottom: 8px; } .feat p { margin: 0; color: var(--muted); font-size: 16px; } /* pixel icon */ .picon { width: 52px; height: 52px; flex-shrink: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); background: var(--slot); padding: 4px; box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi); image-rendering: pixelated; } .picon i { background: transparent; } .picon i.on { background: var(--accent); } .picon i.go { background: var(--gold); } /* ============================================================ HOW TO JOIN — steps ============================================================ */ .steps { display: flex; flex-direction: column; gap: 20px; } .step { display: grid; grid-template-columns: 92px 1fr; gap: 28px; background: var(--surface); padding: 30px; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); } .step .num { width: 92px; height: 92px; display: grid; place-items: center; background: var(--slot); font-family: var(--font-head); font-weight: 600; font-size: 46px; color: var(--accent); box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi); } .step .body { padding-top: 2px; } .step .kicker { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; } .step h3 { font-size: 26px; margin: 10px 0 12px; } .step p { margin: 0 0 16px; color: var(--muted); font-size: 16.5px; max-width: 64ch; } .step .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .step ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .step ul li { display: flex; gap: 12px; color: var(--muted); font-size: 16px; } .step ul li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; flex-shrink: 0; background: var(--accent); } .step .hint { color: var(--dim); font-size: 14px; } .step kbd { font-family: var(--font-mono); font-size: 18px; line-height: 1; background: var(--bg-2); color: var(--text); padding: 4px 8px; box-shadow: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); background: var(--bg-2); } .footer-in { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding-block: 40px; } .footer .brand .name { font-size: 20px; } .footer-links { display: flex; gap: 8px; flex-wrap: wrap; } .footer .disc { color: var(--dim); font-size: 13px; max-width: 46ch; } /* ---- floating dust ---- */ .dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } @keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh) translateX(24px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dust { display: none; } } .hero-grid { z-index: 1; } /* ---- head-font: Press Start 2P is wide/tall — scale down ---- */ :root[data-head="8bit"] .section-title { font-size: clamp(20px, 3vw, 38px); line-height: 1.25; } :root[data-head="8bit"] .hero-tagline { font-size: clamp(15px, 2vw, 26px); line-height: 1.4; } :root[data-head="8bit"] .brand .name { font-size: 15px; } :root[data-head="8bit"] .mc-btn { font-size: 12px; } :root[data-head="8bit"] .mc-btn.sm { font-size: 11px; } :root[data-head="8bit"] .step h3 { font-size: 17px; line-height: 1.35; } :root[data-head="8bit"] .step .num { font-size: 30px; } :root[data-head="8bit"] .feat h3 { font-size: 15px; line-height: 1.4; } :root[data-head="8bit"] .serverlist .title { font-size: 16px; } :root[data-head="8bit"] .tile .k { font-size: 26px; } :root[data-head="8bit"] .ip-chip button { font-size: 12px; } :root[data-head="8bit"] .live-pill { font-size: 12px; } /* ---- head-font: Silkscreen is small-cap-ish — nudge ---- */ :root[data-head="silkscreen"] .section-title { letter-spacing: 0; } /* ============================================================ SCROLL REVEAL (fail-safe: visible at rest; animates only when JS adds .anim) ============================================================ */ .reveal { will-change: opacity, transform; } @keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .reveal.anim { animation: reveal-in .6s cubic-bezier(.2,.7,.3,1) both; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 880px) { :root[data-hero="split"] .hero-grid { grid-template-columns: 1fr; } :root[data-hero="split"] .hero-status { display: block; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .feat-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .serverlist { flex-wrap: wrap; } .serverlist .stat { text-align: left; } } @media (max-width: 560px) { .step { grid-template-columns: 1fr; gap: 18px; } .step .num { width: 64px; height: 64px; font-size: 32px; } .ip-chip .ip-val { font-size: 22px; } .stat-grid { grid-template-columns: 1fr 1fr; } }