/* ============================================================ Economy SMP - Guide Library "Moonlit Sakura" Minecraft theme ============================================================ */ /* ---------- Fonts ---------- */ @font-face{ font-family:"Monocraft"; src:url("../fonts/Monocraft.ttf") format("truetype"); font-weight:normal; font-style:normal; font-display:swap; } @font-face{ font-family:"InterEco"; src:url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face{ font-family:"InterEco"; src:url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face{ font-family:"InterEco"; src:url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; } @font-face{ font-family:"InterEco"; src:url("../fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight:800; font-display:swap; } /* ---------- Design tokens ---------- */ :root{ --font-pixel:"Monocraft", ui-monospace, monospace; --font-body:"InterEco", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --night-0:#070812; --night-1:#0c0f22; --night-2:#141937; --night-3:#1b2147; --sakura:#ff8fc7; --sakura-deep:#e05fa0; --lantern:#ffc06a; --lantern-deep:#e0922f; --moon:#d7e4ff; --moon-glow:#8fb4ff; --leaf:#7bdc8a; --leaf-deep:#39a558; --text:#eef1fb; --text-dim:#aeb6da; --text-faint:#7f88b3; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); /* per-page accent (overridden on ) */ --accent:#ff8fc7; --accent-2:#e05fa0; --accent-ink:#2a0f1f; --accent-glow:rgba(255,143,199,.55); /* rarity */ --r-common:#b7c0d8; --r-uncommon:#6ddf8e; --r-rare:#5aa9ff; --r-epic:#c77bff; --r-legendary:#ffce54; --r-godly:#ff6b6b; --maxw:1180px; --radius:4px; } /* accent themes per page */ body[data-accent="green"]{ --accent:#7bdc8a; --accent-2:#39a558; --accent-ink:#06210f; --accent-glow:rgba(123,220,138,.5); } body[data-accent="red"]{ --accent:#ff7a6b; --accent-2:#d83a2c; --accent-ink:#2a0a06; --accent-glow:rgba(255,122,107,.5); } body[data-accent="purple"]{ --accent:#c77bff; --accent-2:#8f3fd6; --accent-ink:#1d0930; --accent-glow:rgba(199,123,255,.5); } body[data-accent="gold"]{ --accent:#ffc94d; --accent-2:#e0922f; --accent-ink:#2a1c04; --accent-glow:rgba(255,201,77,.5); } body[data-accent="cyan"]{ --accent:#5fe0d6; --accent-2:#2ba6b0; --accent-ink:#042422; --accent-glow:rgba(95,224,214,.5); } body[data-accent="blue"]{ --accent:#6aa6ff; --accent-2:#3a63d8; --accent-ink:#070f2a; --accent-glow:rgba(106,166,255,.5); } body[data-accent="amber"]{ --accent:#ffb347; --accent-2:#e0772f; --accent-ink:#2a1404; --accent-glow:rgba(255,179,71,.5); } body[data-accent="teal"]{ --accent:#54d6a0; --accent-2:#2ba074; --accent-ink:#04261a; --accent-glow:rgba(84,214,160,.5); } /* ---------- Reset / base ---------- */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); color:var(--text); background:var(--night-0); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } /* fixed sakura-night backdrop everywhere */ .bg-layer{ position:fixed; inset:-4vmax; z-index:-2; background:url("../img/night-bg.png") center/cover no-repeat; animation:bgDrift 46s ease-in-out infinite alternate; will-change:transform; } .bg-veil{ position:fixed; inset:0; z-index:-1; background: radial-gradient(120% 80% at 50% 0%, rgba(20,25,55,.10), rgba(7,8,18,.55) 55%, rgba(7,8,18,.86) 100%), linear-gradient(180deg, rgba(7,8,18,.35), rgba(7,8,18,.80)); } @keyframes bgDrift{ from{ transform:scale(1.06) translateY(0);} to{ transform:scale(1.16) translateY(-1.5%);} } /* falling-petal canvas */ #fx{ position:fixed; inset:0; z-index:0; pointer-events:none; } /* ---------- Layout helpers ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); position:relative; z-index:1; } section{ position:relative; z-index:1; padding-block:clamp(48px,7vw,96px); } .center{ text-align:center; } .muted{ color:var(--text-dim); } .faint{ color:var(--text-faint); } .lead{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--text-dim); max-width:62ch; } .center .lead{ margin-inline:auto; } .stack>*+*{ margin-top:1rem; } /* ---------- Typography ---------- */ .pixel{ font-family:var(--font-pixel); } h1,h2,h3,.hd{ font-family:var(--font-pixel); line-height:1.12; letter-spacing:.5px; text-shadow:3px 3px 0 rgba(0,0,0,.55); } h1{ font-size:clamp(2.1rem,6vw,4.2rem); } h2{ font-size:clamp(1.6rem,3.6vw,2.7rem); } h3{ font-size:clamp(1.1rem,2vw,1.45rem); } .eyebrow{ font-family:var(--font-pixel); font-size:.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--accent); text-shadow:2px 2px 0 rgba(0,0,0,.5); display:inline-flex; align-items:center; gap:.6em; } .accent-text{ color:var(--accent); } .glow{ text-shadow:3px 3px 0 rgba(0,0,0,.55), 0 0 22px var(--accent-glow); } p{ max-width:70ch; } .section-head{ margin-bottom:2.4rem; } .section-head h2{ margin-top:.55rem; } /* breathing room between a heading and its description */ h1+.lead, h2+.lead, h3+.lead, h2+.muted, h3+.muted{ margin-top:1rem; } /* guide-page hero heading always stays on one line, shrinking to fit small phones */ section.center>.wrap>h1{ white-space:nowrap; font-size:clamp(0.8rem,4.2vw,3.15rem); } /* ---------- Buttons (Minecraft style) ---------- */ .mc-btn{ --b:#11131f; font-family:var(--font-pixel); font-size:1rem; letter-spacing:.5px; position:relative; display:inline-flex; align-items:center; gap:.55em; justify-content:center; padding:14px 24px; color:#fff; cursor:pointer; user-select:none; background:linear-gradient(#737a8c,#565c70); border:3px solid var(--b); box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.45), 0 4px 0 var(--b), 0 7px 12px rgba(0,0,0,.5); text-shadow:2px 2px 0 rgba(0,0,0,.55); transition:transform .08s ease, filter .15s ease; overflow:hidden; image-rendering:pixelated; } .mc-btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:left .5s ease; } .mc-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); } .mc-btn:hover::after{ left:130%; } .mc-btn:active{ transform:translateY(3px); box-shadow:inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.5), 0 1px 0 var(--b); } .mc-btn.accent{ background:linear-gradient(var(--accent),var(--accent-2)); border-color:var(--accent-ink); color:#fff; } .mc-btn.gold{ background:linear-gradient(#ffd98a,#e0922f); border-color:#3a2406; color:#2c1a02; text-shadow:1px 1px 0 rgba(255,255,255,.35); } .mc-btn.green{ background:linear-gradient(#8be79a,#39a558); border-color:#0b2e19; } .mc-btn.ghost{ background:linear-gradient(rgba(40,46,80,.7),rgba(22,26,52,.7)); } .mc-btn.sm{ padding:9px 15px; font-size:.85rem; } .mc-btn .ico{ width:1.25em; height:1.25em; image-rendering:pixelated; } /* ---------- Top nav ---------- */ .nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(9px); background:linear-gradient(180deg, rgba(8,9,20,.9), rgba(8,9,20,.6)); border-bottom:3px solid #070912; box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.45); } .nav-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; height:66px; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(14px,4vw,28px); } .brand{ display:flex; align-items:center; gap:11px; grid-column:1; grid-row:1; justify-self:start; font-family:var(--font-pixel); font-size:1.05rem; text-shadow:2px 2px 0 rgba(0,0,0,.5); } .brand img{ width:38px; height:38px; image-rendering:auto; filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); transition:transform .3s ease; } .brand:hover img{ transform:rotate(-6deg) scale(1.08); } .brand b{ color:var(--leaf); } .nav-links{ display:flex; align-items:center; gap:4px; grid-column:1/-1; grid-row:1; justify-self:center; flex-wrap:wrap; } .nav-links a{ font-family:var(--font-pixel); font-size:.82rem; letter-spacing:.4px; padding:8px 11px; color:var(--text-dim); position:relative; border-radius:7px; transition:color .15s, background .15s; text-align:center; } .nav-links a::after{ content:""; position:absolute; left:50%; bottom:4px; width:calc(100% - 22px); height:2px; background:var(--accent); transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform .22s ease; box-shadow:0 0 8px var(--accent-glow); } .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.05); } .nav-links a:hover::after, .nav-links a.active::after{ transform:translateX(-50%) scaleX(1); } .nav-links a.active{ color:#fff; } .nav-cta{ margin-left:6px; } .nav-links a.nav-cta::after{ content:none !important; } .nav-links a.nav-cta:hover{ background:linear-gradient(var(--accent),var(--accent-2)); } .hamburger{ display:none; grid-column:3; grid-row:1; justify-self:end; width:46px; height:42px; background:linear-gradient(#737a8c,#565c70); border:3px solid #11131f; box-shadow:inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.4); cursor:pointer; } .hamburger span,.hamburger span::before,.hamburger span::after{ content:""; display:block; width:20px; height:2px; background:#fff; margin:0 auto; position:relative; } .hamburger span::before{ top:-6px; } .hamburger span::after{ top:4px; } /* ---------- Hero ---------- */ .hero{ min-height:clamp(560px,90vh,860px); display:flex; align-items:center; text-align:center; position:relative; overflow:hidden; } .hero .wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; padding-block:80px; } .hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line-strong); font-family:var(--font-pixel); font-size:.74rem; letter-spacing:1px; color:var(--text-dim); backdrop-filter:blur(4px); } .hero-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--leaf); box-shadow:0 0 10px var(--leaf); animation:pulse 2s infinite; } .hero h1{ max-width:16ch; } .hero h1 .accent-text{ color:var(--sakura); } .hero-sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--text-dim); max-width:54ch; } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; } .scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--font-pixel); font-size:.7rem; letter-spacing:2px; color:var(--text-faint); display:flex; flex-direction:column; align-items:center; gap:7px; } .scroll-cue .mouse{ width:22px; height:34px; border:2px solid var(--text-faint); border-radius:12px; position:relative; } .scroll-cue .mouse::before{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; background:var(--text-faint); transform:translateX(-50%); border-radius:2px; animation:wheel 1.6s infinite; } /* server ip chip */ .ip-chip{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-pixel); font-size:.92rem; background:rgba(8,10,22,.6); border:2px solid var(--line-strong); padding:10px 16px; border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s, transform .15s; } .ip-chip img{ width:18px; height:18px; image-rendering:pixelated; flex-shrink:0; } .ip-chip:hover{ border-color:var(--accent); background:rgba(8,10,22,.85); transform:translateY(-1px); } .ip-chip b{ color:var(--leaf); } .ip-chip .copy{ font-size:.7rem; color:var(--text-faint); } .link{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; transition:filter .15s; } .link:hover{ filter:brightness(1.2); } /* ---------- Panels & cards ---------- */ .panel{ background:linear-gradient(180deg, rgba(27,33,71,.85), rgba(12,15,34,.92)); border:2px solid #070912; border-radius:var(--radius); box-shadow:inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.5); backdrop-filter:blur(5px); } .panel.pad{ padding:clamp(20px,3vw,34px); } .grid{ display:grid; gap:20px; } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } .auto{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .auto-sm{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } /* topic / feature card */ .card{ position:relative; display:flex; flex-direction:column; gap:14px; padding:24px 22px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(27,33,71,.82), rgba(12,15,34,.92)); border:2px solid #070912; box-shadow:inset 2px 2px 0 rgba(255,255,255,.09), inset -2px -2px 0 rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.45); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden; } .card::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% -20%, var(--accent-glow), transparent 60%); opacity:0; transition:opacity .25s; pointer-events:none; } .card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.5), 0 18px 38px rgba(0,0,0,.55), 0 0 26px var(--accent-glow); } .card:hover::before{ opacity:.5; } .card h3{ text-shadow:2px 2px 0 rgba(0,0,0,.5); } .card p{ color:var(--text-dim); font-size:.96rem; } .card .more{ margin-top:auto; font-family:var(--font-pixel); font-size:.78rem; color:var(--accent); letter-spacing:.5px; display:inline-flex; align-items:center; gap:7px; } .card .more .arrow{ transition:transform .2s; } .card:hover .more .arrow{ transform:translateX(5px); } a.card{ color:inherit; } /* clickable topic card with big icon */ .topic-card .slot{ --s:88px; } .topic-card{ text-align:left; } /* ---------- Inventory slot / item frame ---------- */ .slot{ --s:96px; width:var(--s); height:var(--s); flex:0 0 auto; display:grid; place-items:center; border-radius:6px; background:#13162b; border:3px solid #070912; box-shadow:inset 3px 3px 0 rgba(0,0,0,.6), inset -3px -3px 0 rgba(255,255,255,.07); transition:box-shadow .2s, border-color .2s; } .slot img{ width:74%; height:74%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)); } .slot.float img{ animation:floatY 4.5s ease-in-out infinite; } .slot.render img{ image-rendering:auto; } .card:hover .slot, .item:hover .slot{ border-color:var(--accent); box-shadow:inset 3px 3px 0 rgba(0,0,0,.55), inset -3px -3px 0 rgba(255,255,255,.07), 0 0 20px var(--accent-glow); } /* item row: slot + body */ .item{ display:flex; gap:18px; align-items:flex-start; padding:20px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(27,33,71,.78), rgba(12,15,34,.9)); border:2px solid #070912; box-shadow:inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.45), 0 10px 22px rgba(0,0,0,.45); transition:transform .2s, border-color .2s, box-shadow .2s; } .item:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:inset 2px 2px 0 rgba(255,255,255,.1), inset -2px -2px 0 rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.5), 0 0 22px var(--accent-glow); } .item .body{ flex:1; min-width:0; } .item h3{ margin-bottom:6px; } .item .body p{ color:var(--text-dim); font-size:.95rem; } .item-name{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ---------- Pills / tags ---------- */ .pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-pixel); font-size:.78rem; letter-spacing:.3px; padding:6px 11px; border-radius:3px; color:var(--text); background:rgba(8,10,22,.6); border:2px solid #070912; box-shadow:inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.4); } .pill img{ width:16px; height:16px; image-rendering:pixelated; } .pill.cool{ color:#ffd9b0; } .pill.cool::before{ content:"\23F1"; } .pill.dmg{ color:#ff9c8f; } .pill.dmg::before{ content:"\2694"; } .pill.range{ color:#9fd0ff; } .pill.range::before{ content:"\21F2"; } .pill.price-gem{ color:#a9f0e6; } .pill.price-money{ color:#bdf0c4; } .pill.note{ color:var(--text-dim); } .tag{ display:inline-block; font-family:var(--font-pixel); font-size:.7rem; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:3px; border:2px solid currentColor; background:rgba(8,10,22,.4); box-shadow:inset 1px 1px 0 rgba(255,255,255,.06); } .tag.common{ color:var(--r-common); } .tag.uncommon{ color:var(--r-uncommon); } .tag.rare{ color:var(--r-rare); } .tag.epic{ color:var(--r-epic); } .tag.legendary{ color:var(--r-legendary); } .tag.godly{ color:var(--r-godly); } /* rarity left-edge accent on items */ .item.common{ border-left:4px solid var(--r-common); } .item.uncommon{ border-left:4px solid var(--r-uncommon); } .item.rare{ border-left:4px solid var(--r-rare); } .item.epic{ border-left:4px solid var(--r-epic); } .item.legendary{ border-left:4px solid var(--r-legendary); } .item.godly{ border-left:4px solid var(--r-godly); } /* ---------- Stat callouts (big numbers) ---------- */ .stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; } .stat{ text-align:center; padding:22px 16px; border-radius:var(--radius); background:linear-gradient(180deg, rgba(27,33,71,.7), rgba(12,15,34,.88)); border:2px solid var(--line); border-top-color:var(--line-strong); } .stat .num{ font-family:var(--font-pixel); font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--accent); text-shadow:2px 2px 0 rgba(0,0,0,.5); } .stat .lbl{ font-size:.82rem; color:var(--text-dim); letter-spacing:.5px; margin-top:4px; } /* ---------- Feature split rows ---------- */ .feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; } .feature.flip .media{ order:2; } .feature .media{ display:grid; place-items:center; } .showcase{ width:min(340px,80%); aspect-ratio:1; display:grid; place-items:center; border-radius:20px; position:relative; } .showcase::before{ content:""; position:absolute; inset:22%; border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle, var(--accent-glow), transparent 70%); opacity:.4; filter:blur(28px); } .showcase img{ position:relative; z-index:1; width:78%; image-rendering:pixelated; filter:drop-shadow(0 18px 24px rgba(0,0,0,.6)); animation:floatY 6s ease-in-out infinite; } .showcase.render img{ image-rendering:auto; } .showcase::after{ content:""; position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:55%; height:18px; background:rgba(0,0,0,.45); filter:blur(12px); border-radius:50%; } /* ---------- Tables ---------- */ .table-scroll{ overflow-x:auto; border-radius:10px; border:3px solid #070912; box-shadow:inset 0 0 0 2px rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.5); } table.mc{ width:100%; border-collapse:collapse; min-width:520px; background:linear-gradient(180deg, rgba(20,25,55,.94), rgba(9,11,26,.96)); } table.mc th{ font-family:var(--font-pixel); font-size:.8rem; letter-spacing:.6px; text-align:left; padding:15px 18px; background:linear-gradient(var(--accent),var(--accent-2)); color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.45); box-shadow:inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.4); position:sticky; top:0; z-index:1; } table.mc td{ padding:13px 18px; border-top:2px solid rgba(7,9,18,.55); color:var(--text-dim); font-size:.94rem; } table.mc tbody tr:nth-child(even) td{ background:rgba(255,255,255,.022); } table.mc tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:#fff; } table.mc td b, table.mc td .num{ color:var(--text); font-family:var(--font-pixel); text-shadow:1px 1px 0 rgba(0,0,0,.45); } /* keep an event name and its Leaderboard tag together on one line */ table.mc td:has(.tag){ white-space:nowrap; } /* ---------- Steps (how-to) ---------- */ .steps{ counter-reset:step; display:grid; gap:16px; } .step{ display:flex; gap:18px; align-items:flex-start; } .step .n{ counter-increment:step; flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; font-family:var(--font-pixel); font-size:1.2rem; color:var(--accent-ink); background:linear-gradient(var(--accent),var(--accent-2)); border:3px solid var(--accent-ink); border-radius:10px; box-shadow:inset 2px 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--accent-ink); } .step .n::before{ content:counter(step); } .step .body h3{ font-size:1.1rem; margin-bottom:3px; } .step .body p{ color:var(--text-dim); font-size:.95rem; } /* ---------- Arrow list (-> style, no bullets) ---------- */ .arrow-list{ display:grid; gap:9px; } .arrow-list li{ position:relative; padding-left:28px; color:var(--text-dim); } .arrow-list li::before{ content:"->"; position:absolute; left:0; top:0; font-family:var(--font-pixel); color:var(--accent); } .arrow-list li b{ color:var(--text); } /* divider */ .rule{ height:2px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); border:0; margin-block:8px; } /* note / callout - Minecraft tooltip panel */ .callout{ display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:8px; background:linear-gradient(180deg, rgba(27,33,71,.85), rgba(12,15,34,.92)); border:3px solid #070912; border-left:6px solid var(--accent); box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.45); } .callout .ic{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; font-size:1.25rem; background:#13162b; border:3px solid #070912; border-radius:6px; box-shadow:inset 2px 2px 0 rgba(0,0,0,.6), inset -2px -2px 0 rgba(255,255,255,.07); } .callout p{ color:var(--text-dim); font-size:.95rem; margin:0; } /* freshness footer note */ .freshness{ font-size:.86rem; color:var(--text-faint); border-top:1px dashed var(--line-strong); padding-top:18px; margin-top:8px; } /* ---------- Footer ---------- */ .foot{ position:relative; z-index:1; margin-top:40px; border-top:2px solid var(--line); background:linear-gradient(180deg, rgba(8,9,20,.4), rgba(7,8,18,.9)); } .foot-brand{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:38ch; margin-inline:auto; padding-block:clamp(40px,6vw,56px); text-align:center; } .foot-brand .brand{ display:inline-flex; font-size:1.1rem; margin:0; } .foot-tagline{ margin:0; color:var(--text-dim); font-size:.94rem; line-height:1.6; } .foot-legal{ margin:4px 0 0; padding-top:18px; border-top:1px solid var(--line); width:100%; font-size:.82rem; color:var(--text-faint); text-align:center; } /* ---------- Reveal animations ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*70ms); } .reveal.left{ transform:translateX(-32px); } .reveal.right{ transform:translateX(32px); } .reveal.scale{ transform:scale(.92); } .reveal.in{ opacity:1; transform:none; } /* ---------- Keyframes ---------- */ @keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.25);} } @keyframes wheel{ 0%{ opacity:1; top:6px;} 100%{ opacity:0; top:16px;} } @keyframes spinSlow{ to{ transform:rotate(360deg);} } /* ---------- Responsive ---------- */ @media (max-width:980px){ .feature{ grid-template-columns:1fr; } .feature.flip .media{ order:0; } .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:920px){ .nav-inner{ display:flex; align-items:center; gap:18px; } .brand, .nav-links, .hamburger{ grid-column:auto; grid-row:auto; justify-self:auto; } .nav-links{ position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:rgba(8,9,20,.97); border-bottom:2px solid var(--line); padding:10px; max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav-links.open{ max-height:85vh; overflow-y:auto; } .nav-links a{ padding:14px; font-size:.95rem; } .nav-links a::after{ display:none; } .nav-cta{ margin:8px; } .hamburger{ display:block; margin-left:auto; } } @media (max-width:760px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } .bg-layer{ transform:scale(1.06); } } /* ---------- Blocky Minecraft scrollbar ---------- */ *{ scrollbar-width:thin; scrollbar-color:var(--accent) rgba(8,10,22,.6); } ::-webkit-scrollbar{ width:14px; height:14px; } ::-webkit-scrollbar-track{ background:rgba(8,10,22,.6); border:2px solid #070912; } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent),var(--accent-2)); border:2px solid #070912; box-shadow:inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.4); } ::-webkit-scrollbar-thumb:hover{ filter:brightness(1.12); } ::-webkit-scrollbar-corner{ background:#070912; }