/* Larp Mod — site styles. Dark like a game client. Minecraft's own text colours as accents, Monocraft for anything "in game". No gradients on text, no glow blobs. Flat colours, real borders, pixel details. */ @font-face { font-family: "Monocraft"; src: url("fonts/Monocraft.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Monocraft"; src: url("fonts/Monocraft-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } :root { --bg: #0e0f11; --bg-2: #141518; --panel: #18191d; --panel-2: #1f2025; --line: #2a2c32; --line-2: #3a3c44; --fg: #ecedef; --muted: #9a9ca5; --dim: #6c6e77; /* Minecraft chat colours */ --green: #55ff55; --grass: #4fbf5e; --grass-dark: #2f8a3e; --gold: #ffaa00; --yellow: #ffff55; --aqua: #55ffff; --red: #ff5555; --mc: "Monocraft", ui-monospace, "Cascadia Code", Consolas, monospace; --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 1rem/1.6 var(--ui); -webkit-font-smoothing: antialiased; } a { color: var(--green); text-underline-offset: 3px; } a:hover { color: #8cff8c; } p { margin: 0; } h1, h2, h3 { margin: 0; font-family: var(--mc); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } img, svg { max-width: 100%; } code, kbd { font-family: var(--mc); font-size: 0.88em; } code { background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: var(--yellow); } kbd { background: #2b2c31; border: 1px solid #45474f; border-bottom: 3px solid #45474f; padding: 0 7px; border-radius: 4px; color: var(--fg); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .wrap { width: min(1140px, 100% - 40px); margin-inline: auto; } .mc { font-family: var(--mc); } .c-green { color: var(--green); } .c-gold { color: var(--gold); } .c-yellow { color: var(--yellow); } .c-aqua { color: var(--aqua); } .c-red { color: var(--red); } .c-muted { color: var(--muted); } /* ---------- Top bar ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(14, 15, 17, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; gap: 28px; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 700 1.15rem var(--mc); letter-spacing: 0.02em; } .brand:hover { color: var(--fg); } .brand img { width: 30px; height: 30px; image-rendering: pixelated; } .brand small { font: 400 0.7rem var(--mc); color: var(--dim); margin-left: 2px; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; padding: 7px 12px; border-radius: 6px; } .nav-links a:hover { color: var(--fg); background: var(--panel-2); } .nav-links a[aria-current="page"] { color: var(--fg); } .nav-links .btn { margin-left: 8px; color: #0b1a0d; } @media (max-width: 720px) { .nav-links a:not(.keep) { display: none; } .brand small { display: none; } } /* ---------- Buttons: flat, with a pressed-in bottom edge like a game button ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 6px; cursor: pointer; text-decoration: none; font: 700 0.98rem var(--mc); letter-spacing: 0.01em; background: var(--grass); color: #0b1a0d; border: 0; box-shadow: inset 0 -4px 0 var(--grass-dark); transition: transform 90ms ease-out, background-color 120ms ease, box-shadow 90ms ease-out; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn:hover { background: #5fd06e; color: #0b1a0d; } .btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--grass-dark); } .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; } .btn-ghost { background: var(--panel-2); color: var(--fg); box-shadow: inset 0 -4px 0 #101114, inset 0 0 0 1px var(--line-2); } .btn-ghost:hover { background: #26272d; color: var(--fg); } .btn-ghost:active { box-shadow: inset 0 -2px 0 #101114, inset 0 0 0 1px var(--line-2); } .btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.85rem; } .btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.05rem; } .btn .price { font-weight: 400; opacity: 0.8; } /* ---------- Sections ---------- */ section { padding-block: clamp(64px, 9vw, 112px); } .band { background: var(--bg-2); border-block: 1px solid var(--line); } .kicker { font: 700 0.8rem var(--mc); letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; display: block; } .h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; } .lede { color: var(--muted); font-size: 1.08rem; max-width: 36em; margin-top: 14px; } .lede b { color: var(--fg); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split.flip > :first-child { order: 2; } @media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } } /* ---------- Hero ---------- */ .hero { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--line); } .hero .split { grid-template-columns: 0.95fr 1.05fr; align-items: start; } @media (max-width: 960px) { .hero .split { grid-template-columns: 1fr; } } .hero-text { padding-top: clamp(8px, 4vw, 48px); } .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .badge { font: 400 0.78rem var(--mc); color: var(--muted); border: 1px solid var(--line-2); padding: 3px 9px; border-radius: 4px; background: var(--panel); } .badge b { color: var(--green); font-weight: 400; } h1.big { font-size: clamp(2.8rem, 6.6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; } h1.big .c-green { text-shadow: 4px 4px 0 #154f15; } .hero .lede { font-size: 1.15rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; } .small-print { margin-top: 18px; color: var(--dim); font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 4px 16px; } .small-print span::before { content: "■ "; color: var(--grass); font-size: 0.7em; vertical-align: 1px; } /* ---------- Live demo card ---------- */ .demo { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 400 0.8rem var(--mc); color: var(--muted); } .demo-bar .live { color: var(--green); } .demo-bar .live::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--green); margin-right: 7px; vertical-align: 1px; animation: blink 1.4s steps(1) infinite; } @keyframes blink { 50% { opacity: 0.2; } } .mc-view { position: relative; height: clamp(360px, 46vw, 470px); overflow: hidden; cursor: grab; touch-action: pan-y; background: #78a7ff linear-gradient(#6f9ef8, #a8c8ff 70%, #c4d9ff); perspective: 1300px; perspective-origin: 50% 36%; } .mc-view:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } .mc-stage.grab { cursor: grabbing; } .mc-sky { position: absolute; inset: 0; pointer-events: none; } .cloud { position: absolute; display: block; height: 18px; background: #fff; opacity: 0.9; animation: cloud 70s linear infinite; } .cloud.c1 { top: 10%; width: 150px; } .cloud.c2 { top: 22%; width: 96px; animation-duration: 95s; animation-delay: -40s; } .cloud.c3 { top: 6%; width: 200px; animation-duration: 110s; animation-delay: -75s; } @keyframes cloud { from { transform: translateX(-260px); } to { transform: translateX(900px); } } .drag-hint { position: absolute; z-index: 5; right: 10px; bottom: 10px; pointer-events: none; font: 400 0.75rem var(--mc); color: #fff; background: rgba(0,0,0,0.45); padding: 4px 8px; } .mc-stage { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; } .mc-spin { position: relative; width: 0; height: 0; transform-style: preserve-3d; top: 23%; } .cube, .pivot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; } .face { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mc-ground { position: absolute; transform-style: preserve-3d; image-rendering: pixelated; background-color: #5d9b3a; } .mc-tag { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; background: rgba(0,0,0,0.28); padding: 2px 7px 1px; font: 400 20px/1.25 var(--mc); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; backface-visibility: hidden; } .mc-tag.owner { color: var(--gold); text-shadow: 2px 2px 0 #3f2a00; } .demo-controls { padding: 16px; display: grid; gap: 14px; } .ctl-label { display: flex; justify-content: space-between; align-items: baseline; font: 700 0.8rem var(--mc); color: var(--muted); margin-bottom: 6px; } .ctl-label em { font-style: normal; font-weight: 400; color: var(--fg); } .name-row { display: flex; gap: 8px; } .mc-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font: 400 1.05rem var(--mc); color: #fff; background: #000; border: 2px solid #a0a0a0; border-radius: 0; caret-color: #fff; } .mc-input:focus { outline: none; border-color: #fff; } .status { font: 400 0.78rem var(--mc); color: var(--dim); min-height: 1.3em; margin-top: 6px; } .status.ok { color: var(--green); } .status.warn { color: var(--gold); } /* Minecraft inventory slots for the cape picker */ .slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; background: #c6c6c6; padding: 4px; border: 2px solid; border-color: #fff #555 #555 #fff; } @media (max-width: 460px) { .slots { grid-template-columns: repeat(6, 1fr); } } .slot { aspect-ratio: 1; border: 0; padding: 4px; cursor: pointer; background: #8b8b8b; margin: 2px; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; display: grid; place-items: center; } .slot:hover { background: #a5a5a5; } .slot[aria-pressed="true"] { background: #6fae5a; box-shadow: inset 2px 2px 0 #2a5a1f, inset -2px -2px 0 #b4f0a0; } .cape-thumb { width: 62%; aspect-ratio: 10 / 16; image-rendering: pixelated; background-size: 640% 200%; background-position: 1.85% 6.25%; background-repeat: no-repeat; } .cape-thumb.none { background: none; border: 2px dashed #555; } .skin-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font: 400 0.82rem var(--mc); color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2); padding: 6px 10px; border-radius: 4px; cursor: pointer; } .chip:hover { color: var(--fg); } .chip[aria-pressed="true"] { color: #0b1a0d; background: var(--grass); border-color: var(--grass); } /* ---------- Minecraft chat and Tab list mock-ups ---------- */ .chat { font: 400 1rem/1.5 var(--mc); background: #0b0c0e; border: 1px solid var(--line); border-radius: 10px; padding: 18px; overflow: hidden; } .chat .ln { background: rgba(0,0,0,0.45); padding: 2px 8px; margin: 3px 0; width: fit-content; max-width: 100%; text-shadow: 2px 2px 0 #222; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 400ms var(--ease); } .chat .ln.show { opacity: 1; transform: none; } .chat .typing { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--dim); } .tablist { font: 400 0.95rem var(--mc); background: rgba(0,0,0,0.6); border: 1px solid var(--line); padding: 8px; display: grid; gap: 2px; } .tablist .row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 8px; background: rgba(255,255,255,0.06); } .tablist .head { text-align: center; color: var(--yellow); padding-bottom: 6px; } .bars { letter-spacing: -2px; color: var(--green); } /* ---------- Feature rows ---------- */ .feature + .feature { margin-top: clamp(72px, 10vw, 120px); } .points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .points li { padding-left: 26px; position: relative; color: var(--muted); } .points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--grass); box-shadow: 2px 2px 0 var(--grass-dark); } .points b { color: var(--fg); font-weight: 600; } /* Mod-style panel (what the in-game menu looks like) */ .modpanel { background: #1b2433; border: 1px solid #2f3d55; border-radius: 8px; overflow: hidden; font-family: var(--mc); } .modpanel .tabs { display: flex; gap: 2px; background: #141b27; padding: 6px 6px 0; } .modpanel .tabs span { font-size: 0.8rem; padding: 6px 12px; color: #8ea2c4; background: #18202d; } .modpanel .tabs span.on { color: #fff; background: #1b2433; } .modpanel .body { padding: 18px; display: grid; gap: 12px; font-size: 0.9rem; } .modpanel .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #c9d4e6; } .toggle { width: 38px; height: 20px; background: #2f3d55; position: relative; flex: none; } .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #8ea2c4; transition: transform 200ms var(--ease); } .toggle.on { background: #2f7d3f; } .toggle.on::after { transform: translateX(18px); background: #fff; } .field-mock { background: #000; border: 2px solid #a0a0a0; padding: 6px 10px; color: #fff; } /* Cape painter */ .painter { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 22px; } .cape-grid { display: grid; grid-template-columns: repeat(10, 1fr); width: min(180px, 55vw); aspect-ratio: 10 / 16; touch-action: none; cursor: crosshair; border: 2px solid #000; box-shadow: 4px 4px 0 #000; } .cape-grid span { background: #0a84ff; } .palette { display: grid; gap: 10px; } #swatches { display: grid; grid-template-columns: repeat(4, 30px); gap: 6px; } .swatch { width: 30px; height: 30px; border: 2px solid #000; cursor: pointer; padding: 0; } .swatch[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 1px; } .mini-btn { font: 400 0.8rem var(--mc); color: #fff; background: #6b6b6b; border: 2px solid; border-color: #aaa #333 #333 #aaa; padding: 6px 10px; cursor: pointer; } .mini-btn:active { border-color: #333 #aaa #aaa #333; } /* Ghost move chips */ .moves { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; } .moves button { font: 400 0.8rem var(--mc); color: #c9d4e6; background: #18202d; border: 1px solid #2f3d55; padding: 6px 10px; cursor: pointer; } .moves button[aria-pressed="true"] { background: #2f7d3f; border-color: #3f9a50; color: #fff; } /* ---------- Comparison ---------- */ .compare { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 0.98rem; } .compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .compare th { font: 700 0.85rem var(--mc); color: var(--muted); } .compare td:first-child { color: var(--muted); } .compare .yes { color: var(--green); font-family: var(--mc); } .compare .no { color: var(--dim); font-family: var(--mc); } .compare thead th:last-child { color: var(--green); } @media (max-width: 640px) { .compare th, .compare td { padding: 10px 8px; font-size: 0.88rem; } } /* ---------- Specs / changelog ---------- */ .specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 36px; } .specs div { padding: 20px; border-right: 1px solid var(--line); background: var(--panel); } .specs div:last-child { border-right: 0; } .specs b { display: block; font: 700 1.5rem var(--mc); color: var(--fg); } .specs span { color: var(--muted); font-size: 0.9rem; } @media (max-width: 760px) { .specs { grid-template-columns: 1fr 1fr; } .specs div:nth-child(2) { border-right: 0; } .specs div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } .log { font-family: var(--mc); font-size: 0.9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; } .log h3 { font-size: 1rem; margin-bottom: 10px; } .log h3 span { color: var(--dim); font-weight: 400; } .log ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; color: #c8c9cd; } .log li::before { content: "+ "; color: var(--green); } /* ---------- Pricing ---------- */ .price-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 22px; } .price-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .price-big { font: 700 clamp(2.6rem, 6vw, 3.6rem) var(--mc); line-height: 1; } .price-big small { font: 400 0.95rem var(--ui); color: var(--muted); margin-left: 8px; } .incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .incl li { display: flex; gap: 10px; color: #d4d5d9; } .incl li::before { content: "✔"; color: var(--green); font-family: var(--mc); } .guarantee { display: flex; gap: 14px; align-items: center; border: 1px dashed var(--line-2); border-radius: 8px; padding: 14px 16px; color: var(--muted); font-size: 0.94rem; } .guarantee img, .guarantee svg { width: 34px; height: 34px; flex: none; image-rendering: pixelated; } .guarantee b { color: var(--fg); } .fine { color: var(--dim); font-size: 0.85rem; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 8px; margin-top: 32px; } .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 18px; } .faq summary { cursor: pointer; list-style: none; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font: 700 1.2rem var(--mc); color: var(--green); } .faq details[open] summary::after { content: "-"; } .faq details p { color: var(--muted); padding-bottom: 18px; } /* ---------- Final CTA + buy bar ---------- */ .final { text-align: center; } .final .h2 { margin-inline: auto; } .final .lede { margin-inline: auto; } .final .cta-row { justify-content: center; } .buybar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: rgba(20,21,24,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform 380ms var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); } .buybar.on { transform: none; } .buybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; } .buybar .t { font: 400 0.9rem var(--mc); color: var(--muted); } .buybar .t b { color: var(--fg); font-weight: 700; } @media (max-width: 520px) { .buybar .sub { display: none; } } /* Toast (easter eggs) */ .toast { position: fixed; z-index: 80; left: 50%; top: 80px; translate: -50% -20px; opacity: 0; pointer-events: none; font: 400 0.95rem var(--mc); color: #fff; background: #212121; border: 2px solid; border-color: #5a5a5a #141414 #141414 #5a5a5a; padding: 10px 16px; transition: opacity 250ms ease, translate 400ms var(--ease); } .toast.on { opacity: 1; translate: -50% 0; } .toast b { color: var(--gold); font-weight: 400; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--line); padding-block: 40px 56px; color: var(--dim); font-size: 0.86rem; background: var(--bg-2); } .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } @media (max-width: 760px) { .foot { grid-template-columns: 1fr; } } .foot h4 { margin: 0 0 10px; font: 700 0.8rem var(--mc); color: var(--muted); } .foot a { color: var(--muted); text-decoration: none; display: block; padding: 3px 0; } .foot a:hover { color: var(--fg); } .credit-name { color: var(--gold); font-family: var(--mc); cursor: pointer; } .disclaimer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.78rem; line-height: 1.6; } .foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; } /* ---------- Docs ---------- */ .docs { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-block: 40px 80px; } @media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: 24px; } } .toc { position: sticky; top: 86px; align-self: start; font-size: 0.92rem; } @media (max-width: 900px) { .toc { position: static; } } .toc h4 { margin: 18px 0 6px; font: 700 0.75rem var(--mc); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; } .toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 10px; border-left: 2px solid var(--line); } .toc a:hover { color: var(--fg); border-left-color: var(--grass); } .doc { max-width: 760px; min-width: 0; } .doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); } .doc h2 { font-size: 1.45rem; margin: 52px 0 14px; padding-top: 10px; border-top: 1px solid var(--line); } .doc h3 { font-size: 1.05rem; margin: 28px 0 10px; color: var(--yellow); } .doc p, .doc li { color: #c8c9cd; margin: 0 0 12px; } .doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 14px; } .doc table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 0.93rem; display: block; overflow-x: auto; } .doc th, .doc td { text-align: left; padding: 9px 12px; border: 1px solid var(--line); vertical-align: top; } .doc th { background: var(--panel-2); font: 700 0.8rem var(--mc); color: var(--muted); } .doc pre { background: #0b0c0e; border: 1px solid var(--line); border-radius: 8px; padding: 16px; overflow-x: auto; font: 400 0.88rem/1.55 var(--mc); color: #d6d7db; margin: 0 0 18px; } .doc pre code { background: none; border: 0; padding: 0; color: inherit; } .note { border-left: 3px solid var(--gold); background: var(--panel); padding: 12px 16px; margin: 0 0 18px; color: #d4d5d9; } .note.tip { border-left-color: var(--grass); } .doc .sig { font-family: var(--mc); color: var(--gold); margin-top: 48px; } /* ---------- Legal pages ---------- */ .legal { padding-block: 48px 80px; } .legal .wrap { max-width: 760px; } .legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); } .legal .updated { color: var(--dim); margin-top: 10px; font-family: var(--mc); font-size: 0.85rem; } .legal .summary { margin: 28px 0 8px; padding: 18px 20px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); } .legal .summary b { display: block; margin-bottom: 6px; } .legal .summary ul { margin: 0; padding-left: 1.1em; } .legal h2 { font-size: 1.15rem; margin: 40px 0 10px; } .legal p, .legal li { color: #c8c9cd; margin: 0 0 12px; } .legal ul { padding-left: 1.2em; margin: 0 0 12px; } .legal .caps { font-size: 0.92rem; } .legal .template-note { color: var(--dim); font-size: 0.8rem; margin-top: 48px; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 700ms var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { transform: none; transition: opacity 250ms ease; } .cloud, .demo-bar .live::before { animation: none; } .chat .ln { transition: none; opacity: 1; transform: none; } .buybar, .toast { transition-duration: 1ms; } } .credit-name.rainbow { animation: hue 1.2s linear infinite; } @keyframes hue { to { filter: hue-rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .credit-name.rainbow { animation: none; } } /* ===================================================================== Apple-design polish on top of the Minecraft look (instant press feedback, springs that settle without bounce, frosted chrome, soft depth, size-aware type, roomier spacing) ===================================================================== */ :root { --spring: cubic-bezier(0.22, 1, 0.36, 1); --r: 16px; } /* frosted, translucent top bar: content scrolls underneath it */ .nav { background: rgba(14, 15, 17, 0.62); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: rgba(255,255,255,0.07); } .buybar { background: rgba(20, 21, 24, 0.66); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } /* type: big headings tighter, body roomier */ h1.big { letter-spacing: -0.035em; } .h2 { letter-spacing: -0.03em; line-height: 1.08; } .lede { line-height: 1.55; } section { padding-block: clamp(80px, 11vw, 136px); } /* buttons: feedback the instant you press, a little rounder */ .btn { border-radius: 12px; transition: transform 100ms ease-out, background-color 150ms ease, box-shadow 100ms ease-out; } .btn:active { transform: scale(0.97) translateY(1px); } .btn-sm { border-radius: 10px; } .chip, .mini-btn, .moves button, .slot { transition: transform 100ms ease-out, background-color 150ms ease, color 150ms ease; } .chip:active, .mini-btn:active, .moves button:active, .slot:active { transform: scale(0.94); } /* cards: softer corners, layered depth, lift a touch under the pointer */ .demo, .modpanel, .price-card, .chat, .log, .tablist, .specs, .faq details { border-radius: var(--r); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -28px rgba(0,0,0,0.8); } .modpanel, .price-card, .log, .chat, .tablist { transition: transform 450ms var(--spring), box-shadow 450ms var(--spring); } @media (hover: hover) { .modpanel:hover, .price-card:hover, .log:hover, .chat:hover, .tablist:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 34px 60px -30px rgba(0,0,0,0.9); } } .tablist { overflow: hidden; } .demo { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 80px -40px rgba(0,0,0,0.9); } .faq details { transition: border-color 200ms ease, background-color 200ms ease; } .faq details[open] { background: var(--panel-2); } /* scroll reveal: a calm fade and rise that settles, never bounces */ .reveal { transform: translateY(24px) scale(0.985); transition: opacity 800ms ease, transform 900ms var(--spring); } .reveal.in { transform: none; } /* inputs focus like a system control */ .mc-input { border-radius: 8px; transition: border-color 150ms ease, box-shadow 150ms ease; } .mc-input:focus { box-shadow: 0 0 0 4px rgba(85, 255, 85, 0.18); } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; } .modpanel:hover, .price-card:hover, .log:hover, .chat:hover, .tablist:hover { transform: none; } } @media (prefers-reduced-transparency: reduce) { .nav, .buybar { background: #141518; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* the lift has to win over the scroll-reveal's resting state */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .modpanel.reveal.in:hover, .price-card.reveal.in:hover, .log.reveal.in:hover, .chat.reveal.in:hover { transform: translateY(-4px); } } /* grid children may shrink below their content's natural width (stops the demo card overflowing) */ .split > *, .demo, .demo-controls > * { min-width: 0; } .status { overflow-wrap: anywhere; } @media (max-width: 560px) { .slots { grid-template-columns: repeat(6, 1fr); } } /* ===================================================================== Apple-first pass: blue accent, system type for the page, pixel font only for things that live inside the game ===================================================================== */ :root { --accent: #0a84ff; --accent-hi: #2997ff; --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; } body { font-family: var(--sf); letter-spacing: -0.011em; } h1, h2, h3, .h2 { font-family: var(--sf); font-weight: 700; } h1.big { font-size: clamp(3rem, 7vw, 5.4rem); letter-spacing: -0.045em; line-height: 1.02; } h1.big .c-green { color: var(--accent-hi); text-shadow: none; } .h2 { letter-spacing: -0.035em; } .h2 .c-green { color: var(--accent-hi); } a { color: var(--accent-hi); } a:hover { color: #5ab0ff; } .brand { font: 600 1.12rem var(--sf); letter-spacing: -0.02em; } .brand img { width: 28px; height: 28px; image-rendering: auto; border-radius: 7px; } .brand small { font: 400 0.78rem var(--sf); } /* Apple pill buttons */ .btn { font: 600 1rem var(--sf); letter-spacing: -0.01em; border-radius: 980px; background: var(--accent); color: #fff; box-shadow: none; } .btn:hover { background: var(--accent-hi); color: #fff; } .btn:active { transform: scale(0.97); box-shadow: none; } .btn-ghost { background: rgba(255,255,255,0.08); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } .btn-ghost:hover { background: rgba(255,255,255,0.14); color: var(--fg); } .btn-ghost:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } .btn-sm { border-radius: 980px; font-size: 0.85rem; } .nav-links .btn { color: #fff; } /* blue instead of green for page-level accents */ .kicker { font: 600 0.95rem var(--sf); letter-spacing: 0; text-transform: none; color: var(--accent-hi); } .badge { font: 500 0.78rem var(--sf); border-radius: 980px; padding: 3px 11px; } .badge b { color: var(--accent-hi); font-weight: 600; } .small-print span::before { content: "• "; color: var(--accent-hi); font-size: 1em; vertical-align: 0; } .points li::before { width: 8px; height: 8px; top: 0.6em; border-radius: 50%; background: var(--accent-hi); box-shadow: none; } .incl li::before { content: "✓"; color: var(--accent-hi); font-family: var(--sf); font-weight: 700; } .compare th { font: 600 0.85rem var(--sf); } .compare .yes { color: var(--accent-hi); font-family: var(--sf); font-weight: 600; } .compare .no { font-family: var(--sf); } .compare thead th:last-child { color: var(--accent-hi); } .specs b { font-family: var(--sf); letter-spacing: -0.03em; } .log { font-family: var(--sf); } .log h3 { font-family: var(--sf); } .log li::before { color: var(--accent-hi); } .price-big { font-family: var(--sf); letter-spacing: -0.04em; } .faq summary::after { color: var(--accent-hi); font-family: var(--sf); font-weight: 400; } .foot h4 { font: 600 0.8rem var(--sf); } .toc h4 { font: 600 0.75rem var(--sf); } .toc a:hover { border-left-color: var(--accent-hi); } .doc h3 { color: var(--fg); } .doc th { font: 600 0.8rem var(--sf); } .note.tip { border-left-color: var(--accent-hi); } .doc .sig, .credit-name { font-family: var(--sf); font-weight: 600; } .demo-bar { font: 500 0.8rem var(--sf); } .demo-bar .live { color: var(--fg); } .ctl-label { font: 600 0.8rem var(--sf); } .status { font: 500 0.82rem var(--sf); } .status.ok { color: var(--accent-hi); } .mc-input:focus { box-shadow: 0 0 0 4px rgba(10,132,255,0.28); } .toast { font-family: var(--mc); } .buybar .t { font: 500 0.9rem var(--sf); } .legal .updated { font-family: var(--sf); } .slot[aria-pressed="true"] { background: #3d7fd6; box-shadow: inset 2px 2px 0 #1d4a8a, inset -2px -2px 0 #a8cdff; } .brand img { width: 38px; height: 38px; border-radius: 9px; image-rendering: pixelated; } /* ===================================================================== Floating player + centered Apple hero + About text ===================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero-c { text-align: center; border-bottom: 0; padding-bottom: 24px; } .hero-c .wrap { display: flex; flex-direction: column; align-items: center; } .eyebrow-c { font: 600 1.25rem var(--sf); color: var(--muted); letter-spacing: -0.01em; margin-bottom: 10px; } .hero-c h1.big { font-size: clamp(3.4rem, 10vw, 7rem); } .hero-c .lede { margin: 18px auto 0; max-width: 30em; font-size: clamp(1.1rem, 2vw, 1.35rem); } .hero-c .cta-row { justify-content: center; gap: 24px; } .more { font: 500 1.05rem var(--sf); text-decoration: none; } .more::after { content: " ›"; } /* no box, no sky, no ground: the player just floats on the page */ .float-stage { position: relative; margin-top: clamp(8px, 3vw, 28px); } .mc-view { background: none; height: clamp(420px, 56vw, 600px); max-width: 760px; margin: 0 auto; border-radius: 0; perspective-origin: 50% 40%; } .mc-view:focus-visible { outline: none; } .mc-view::after { /* soft shadow under his feet */ content: ""; position: absolute; left: 50%; bottom: 13%; width: 180px; height: 26px; translate: -50% 0; background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent); pointer-events: none; } .mc-ground { display: none; } .mc-spin { top: 26%; } .float-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px; margin-top: -8px; } .pill-input { width: min(320px, 100%); min-height: 46px; padding: 0 20px; text-align: center; border-radius: 980px; font: 500 1.05rem var(--mc); color: var(--fg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .pill-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10,132,255,0.25); background: rgba(255,255,255,0.09); } .float-controls .status { margin: 0; min-height: 1.2em; text-align: center; } .cape-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; } .cape-strip .slot { width: 40px; height: 52px; aspect-ratio: auto; margin: 0; padding: 4px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .cape-strip .slot:hover { background: rgba(255,255,255,0.12); } .cape-strip .slot[aria-pressed="true"] { background: rgba(10,132,255,0.22); box-shadow: inset 0 0 0 2px var(--accent); } .cape-strip .cape-thumb { width: 100%; border-radius: 2px; } .cape-strip .cape-thumb.none { border: 1px dashed rgba(255,255,255,0.3); } .cape-caption { color: var(--dim); font-size: 0.85rem; } /* About: a long read, set like an Apple story */ .about { max-width: 760px; text-align: center; } .about .h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 40px; } .about-text { text-align: left; display: grid; gap: 22px; } .about-text p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; } .about-text b { color: var(--fg); font-weight: 600; } /* calmer, roomier sections */ .band { background: #0b0c0e; } .credit-name { user-select: none; -webkit-user-select: none; } /* ---------- more life: light behind the player, the cape wall, buy links, feature colours ---------- */ .float-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(640px, 92vw); aspect-ratio: 1; translate: -50% 0; background: radial-gradient(closest-side, rgba(10,132,255,0.22), rgba(10,132,255,0.06) 55%, transparent 72%); pointer-events: none; } .float-stage { isolation: isolate; } .capewall { overflow: hidden; display: grid; gap: 26px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 18px; width: max-content; animation: wall 60s linear infinite; } .marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 70s; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes wall { to { transform: translateX(-50%); } } .wall-cape { display: grid; justify-items: center; gap: 10px; padding: 18px 18px 14px; border-radius: 18px; background: #16171a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); transition: transform 300ms var(--spring); } .wall-cape:hover { transform: translateY(-6px); } .wall-cape .cape-thumb { width: 64px; border-radius: 3px; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.8); } .wall-name { font: 500 0.8rem var(--sf); color: var(--muted); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } } .buy-link { display: inline-block; margin-top: 22px; font: 600 1rem var(--sf); text-decoration: none; } .kicker.k-blue { color: #2997ff; } .kicker.k-orange { color: #ff9f0a; } .kicker.k-green { color: #30d158; } .kicker.k-cyan { color: #64d2ff; } .k-blue ~ .buy-link, .kicker.k-blue ~ * .buy-link { color: #2997ff; } /* the price card stands out */ #buy .price-card { box-shadow: 0 0 0 1px rgba(10,132,255,0.45), 0 40px 90px -40px rgba(10,132,255,0.55); } /* fixes: cape thumbnails stay inside their boxes; dragging the player never selects text; centred buttons */ .cape-strip .slot { overflow: hidden; display: grid; place-items: center; } .cape-strip .cape-thumb { width: auto; height: 100%; aspect-ratio: 10 / 16; } .mc-view, .mc-view * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } .btn .price:empty { display: none; } .float-stage::before { transition: background 600ms ease; background: radial-gradient(closest-side, var(--glow, rgba(10,132,255,0.24)), transparent 72%); } /* ---------- Gallery of real screenshots ---------- */ .g-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; margin: 28px auto 26px; border-radius: 980px; background: rgba(255,255,255,0.06); } .g-tabs button { border: 0; background: none; color: var(--muted); font: 500 0.92rem var(--sf); padding: 8px 16px; border-radius: 980px; cursor: pointer; transition: background-color 250ms var(--spring), color 200ms ease, transform 100ms ease-out; } .g-tabs button:hover { color: var(--fg); } .g-tabs button:active { transform: scale(0.96); } .g-tabs button[aria-selected="true"] { background: #fff; color: #111; } .g-frame { margin: 0 auto 36px; max-width: 980px; } .g-stack { position: relative; aspect-ratio: 854 / 480; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 50px 100px -40px rgba(10,132,255,0.35), 0 30px 60px -30px rgba(0,0,0,0.9); } .g-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transform: scale(1.02); transition: opacity 600ms ease, transform 900ms var(--spring); } .g-stack img.on { opacity: 1; transform: none; } .g-frame figcaption { margin-top: 18px; color: var(--muted); font: 500 1.05rem var(--sf); min-height: 1.5em; } @media (prefers-reduced-motion: reduce) { .g-stack img { transition: opacity 200ms ease; transform: none; } } .g-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .g-tabs::-webkit-scrollbar { display: none; } .g-tabs button { flex: none; } /* ===================================================================== Ideas borrowed from game-client sites, in Larp Mod's own style ===================================================================== */ /* status pill above the headline */ .status-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px; border-radius: 980px; font: 500 0.85rem var(--sf); color: var(--muted); background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); } .status-pill .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.18); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 0 rgba(48,209,88,0.6); animation: pulse 2.2s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } } /* real menu screenshots tilted on either side of the floating player */ .side-shot { position: absolute; z-index: -1; top: 16%; width: min(400px, 30vw); border-radius: 14px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(0,0,0,0.9); opacity: 0.55; transition: opacity 400ms ease, transform 700ms var(--spring); pointer-events: none; } .side-shot.left { left: max(16px, calc(50% - 640px)); transform: perspective(1200px) rotateY(24deg) rotateZ(-2deg); } .side-shot.right { right: max(16px, calc(50% - 640px)); transform: perspective(1200px) rotateY(-24deg) rotateZ(2deg); } .float-stage:hover .side-shot { opacity: 0.75; } @media (max-width: 1080px) { .side-shot { display: none; } } /* trust strip */ .trust-strip { border-block: 1px solid var(--line); background: #0b0c0e; } .trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-block: 20px; } .t-item { display: flex; align-items: center; gap: 12px; } .t-item svg { width: 22px; height: 22px; color: var(--accent-hi); flex: none; } .t-item span { display: grid; font-size: 0.82rem; color: var(--dim); line-height: 1.3; } .t-item b { color: var(--fg); font-weight: 600; font-size: 0.92rem; } .t-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .t-label { font: 600 0.72rem var(--sf); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-right: 4px; } .pay { font: 600 0.75rem var(--sf); color: var(--muted); padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } @media (max-width: 700px) { .trust-row { justify-content: flex-start; } .t-item { width: calc(50% - 14px); } } /* Discord banner */ .community-wrap { padding-block: 0 clamp(40px, 6vw, 72px); } .community { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; background: #16171a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); } .community .dc { width: 46px; height: 46px; padding: 10px; border-radius: 12px; color: #fff; background: #5865f2; flex: none; } .community div { display: grid; gap: 2px; flex: 1; min-width: 0; } .community b { font-weight: 600; } .community span { color: var(--muted); font-size: 0.92rem; } .dc-btn { background: #5865f2; } .dc-btn:hover { background: #6c78f5; } @media (max-width: 560px) { .community { flex-wrap: wrap; } .dc-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ===================================================================== Shorter page: feature cards (ready for video clips), the version vote, and the buy card again at the bottom ===================================================================== */ section { padding-block: clamp(64px, 8vw, 104px); } .feat-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 820px) { .fgrid { grid-template-columns: 1fr; } } .fcard { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: 22px; background: #16171a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 30px 60px -40px rgba(0,0,0,0.9); } .fmedia { position: relative; display: grid; place-items: center; min-width: 0; height: 290px; padding: 22px; overflow: hidden; background: #0f1013; border-bottom: 1px solid rgba(255,255,255,0.06); } .fmedia > .modpanel, .fmedia > .tablist { width: min(420px, 100%); } .fmedia .painter { padding: 0; } .fmedia .cape-grid { width: min(140px, 40vw); } /* when the clips arrive: