/* ═══════════════════════════════════════════════════════════════════════════ CraftMod Hub — Shared Styles (common.css) Used by: index.html, structures.html, ores.html ═══════════════════════════════════════════════════════════════════════════ */ /* ── FONTS ─────────────────────────────────────────────────────────────────── */ /* Poppins — loaded via Google Fonts in HTML */ /* Monocraft — Minecraft-style pixel font */ @font-face{font-family:'Monocraft';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/monocraft@4.0/Monocraft.ttf') format('truetype'),url('https://cdn.jsdelivr.net/npm/monocraft@4.0/Monocraft.otf') format('opentype')} /* ── RESET & VARIABLES ────────────────────────────────────────────────────── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --purple-deep:#1a0a2e; --purple:#6c3fcf; --purple-bright:#8b5cf6; --purple-glow:#a78bfa; --purple-muted:#3b2768; --gold:#d4a017; --gold-bright:#f0c040; --gold-pale:#ffe4a0; --bg:#0e0a14; --bg-panel:#16111f; --bg-card:#1d1628; --text:#e8e0f0; --text-muted:#9b8fb8; --border:#2a2040; --radius:10px; --radius-lg:16px; --transition:all .25s ease } html{scroll-behavior:smooth} body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} /* ALL headings use Poppins only */ h1,h2,h3,.brand-text .name,.hero-badge,.stat-num,.step-num,.struct-chip{font-family:'Poppins',system-ui,-apple-system,sans-serif !important} .container{max-width:1200px;margin:0 auto;padding:0 24px} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--purple-muted);border-radius:3px} /* ── HEADER ───────────────────────────────────────────────────────────────── */ header{background:linear-gradient(135deg,var(--purple-deep) 0%,#2d1558 100%);border-bottom:1px solid var(--border);padding:12px 0;position:sticky;top:0;z-index:1000;box-shadow:0 4px 24px rgba(0,0,0,.4)} .header-flex{display:flex;justify-content:space-between;align-items:center;position:relative} .logo-area{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;z-index:1001} .logo-box{width:48px;height:48px;background:var(--bg-card);border-radius:var(--radius);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 16px rgba(212,160,23,.3);flex-shrink:0} .brand-text .name{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1.1} .brand-text .sub{font-size:10px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.8px;display:block} .nav-menu{display:flex;align-items:center;gap:0;margin-right:16px} .nav-item{position:relative} .nav-link{color:var(--text-muted);text-decoration:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:14px 18px;display:flex;align-items:center;gap:6px;transition:var(--transition)} .nav-link:hover,.nav-link.active{color:var(--gold-bright)} .nav-link .arrow{font-size:9px;transition:transform .3s} .dropdown{position:absolute;top:100%;left:0;background:var(--bg-panel);min-width:200px;border-radius:0 0 var(--radius) var(--radius);border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--transition);z-index:999} .nav-item:hover>.dropdown{opacity:1;visibility:visible;transform:translateY(0)} .dropdown .nav-link{padding:11px 18px;border-bottom:1px solid var(--border);font-size:12px} .dropdown .nav-link:hover{background:rgba(108,63,207,.15);color:var(--text)} .nav-cta{background:linear-gradient(135deg,var(--purple),var(--purple-bright));color:var(--gold-pale)!important;padding:10px 22px!important;border-radius:50px!important;margin-left:12px;box-shadow:0 4px 14px rgba(108,63,207,.4)} .nav-cta:hover{background:linear-gradient(135deg,var(--purple-bright),var(--gold))!important;color:#fff!important;transform:translateY(-1px)} .hamburger{display:none;font-size:28px;color:var(--gold-bright);cursor:pointer;z-index:1002;padding:6px;background:none;border:none;line-height:1;transition:transform .25s} .hamburger.active{transform:rotate(90deg);color:var(--purple-glow)} /* ── PAGE HERO (structures & ores pages) ──────────────────────────────────── */ .page-hero{padding:56px 0 40px;text-align:center} .page-hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;margin-bottom:12px;letter-spacing:-.5px} .page-hero h1 .hi{-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .page-hero p{font-size:16px;color:var(--text-muted);max-width:620px;margin:0 auto;line-height:1.7} /* ── FORM CONTROLS ────────────────────────────────────────────────────────── */ .ctrl{display:flex;flex-direction:column;gap:4px} .ctrl label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted)} .ctrl input,.ctrl select{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:14px;padding:10px 12px;outline:none;transition:border-color .2s} .ctrl input:focus,.ctrl select:focus{border-color:var(--purple-bright)} .ctrl select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b8fb8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center} /* ── AD SLOTS ─────────────────────────────────────────────────────────────── */ .ad-slot{overflow:hidden;text-align:center;margin:32px 0;min-height:90px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:var(--radius);border:1px dashed var(--border)} .ad-slot ins{display:block!important} /* ── BREADCRUMB (blog) ───────────────────────────────────────────────────── */ .breadcrumb{font-size:12px;color:var(--text-muted);margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px} .breadcrumb a{color:var(--text-muted);text-decoration:none;transition:var(--transition)} .breadcrumb a:hover{color:var(--gold-bright)} .breadcrumb span{color:var(--text-muted);opacity:.7} .breadcrumb .sep{opacity:.5;user-select:none} /* ── BACK TO HUB (blog) ───────────────────────────────────────────────────── */ .back-to-hub{display:inline-flex;align-items:center;gap:8px;color:var(--gold-bright);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:24px;transition:var(--transition)} .back-to-hub:hover{color:var(--gold-pale);transform:translateX(-4px)} /* ── RELATED POSTS (blog) ─────────────────────────────────────────────────── */ .related-posts{margin-top:48px;padding:24px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border)} .related-posts h3{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--gold);text-transform:uppercase;letter-spacing:.8px} .related-posts ul{list-style:none;padding:0;margin:0} .related-posts li{margin-bottom:10px} .related-posts a{color:var(--text-muted);text-decoration:none;font-size:14px;transition:var(--transition);display:block;padding:4px 0} .related-posts a:hover{color:var(--gold-bright);padding-left:12px} .related-posts .tool-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)} .related-posts .tool-cta a{color:var(--gold-bright);font-weight:600} /* ── HIGHLIGHTED PARA (blog) ───────────────────────────────────────────────── */ .para-highlight{background:linear-gradient(90deg,rgba(108,63,207,.15) 0%,transparent 100%);border-left:4px solid var(--gold);padding:12px 16px;margin:16px 0;border-radius:0 var(--radius) var(--radius) 0} /* ── MAP ──────────────────────────────────────────────────────────────────── */ .map-section{margin:24px 0} .map-wrap{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#1a1a24} .map-wrap canvas{display:block;width:100%;height:100%;touch-action:none} .coord-bar{position:absolute;bottom:0;left:0;right:0;display:flex;gap:24px;padding:8px 16px;background:rgba(14,10,20,.85);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted);backdrop-filter:blur(8px)} .coord-bar strong{color:var(--gold-bright);font-weight:500} .map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:14px;color:var(--text-muted);background:rgba(14,10,20,.9)} .map-loading .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--purple-bright);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:15px;color:#ff6b6b;background:rgba(14,10,20,.95);padding:24px;text-align:center} .map-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:15px;color:var(--text-muted);background:rgba(14,10,20,.85);text-align:center;padding:24px} .map-placeholder .icon{font-size:48px;opacity:.5} .map-placeholder p{max-width:320px;line-height:1.6} /* ── RESULTS (shared base) ────────────────────────────────────────────────── */ .results-wrap{margin-top:24px;min-height:60px} .results-header{display:flex;align-items:center;gap:12px;margin-bottom:12px} .results-header h3{font-size:16px;font-weight:700} .results-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:14px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border)} /* ── STATUS MESSAGES ──────────────────────────────────────────────────────── */ .status-msg{padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;margin-top:12px} .status-ok{background:rgba(46,213,115,.1);color:#2ed573;border:1px solid rgba(46,213,115,.3)} .status-err{background:rgba(255,71,87,.1);color:#ff4757;border:1px solid rgba(255,71,87,.3);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600} /* ── SEO CONTENT ──────────────────────────────────────────────────────────── */ .seo-section{padding:64px 0;background:var(--bg-panel)} .seo-section h2{font-size:24px;font-weight:800;margin-bottom:16px} .seo-section p{font-size:14px;color:var(--text-muted);line-height:1.8;margin-bottom:16px;max-width:800px} .seo-section h3{font-size:18px;font-weight:700;margin:28px 0 10px;color:var(--text)} .seo-section code{background:var(--bg-card);padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--purple-glow)} /* ── FOOTER ───────────────────────────────────────────────────────────────── */ footer{background:#070410;color:var(--text);padding:48px 0 20px;border-top:1px solid var(--border)} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .f-brand .name{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:10px} .f-brand p{font-size:12px;color:var(--text-muted);line-height:1.8} .f-head{color:var(--gold);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px} .f-links a{display:block;color:var(--text-muted);text-decoration:none;font-size:12px;margin-bottom:8px;transition:var(--transition)} .f-links a:hover{color:var(--text);padding-left:5px} .f-copy{text-align:center;border-top:1px solid var(--border);padding-top:20px;font-size:11px;color:var(--text-muted)} .f-copy a{color:var(--purple-glow);text-decoration:none} .f-copy a:hover{color:var(--gold-bright)} /* ── COOKIE CONSENT BANNER ───────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 500px; background: rgba(22, 17, 31, 0.9); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; z-index: 9999; box-shadow: 0 12px 48px rgba(0,0,0,0.6); animation: slideUp 0.4s ease-out; } .cookie-banner.hide { animation: slideDown 0.4s ease-in forwards; } @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { to { transform: translateY(100px); opacity: 0; } } .cookie-content { display: flex; flex-direction: column; gap: 16px; } .cookie-text { display: flex; gap: 12px; align-items: center; } .cookie-icon { font-size: 24px; } .cookie-text p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .cookie-text a { color: var(--purple-bright); text-decoration: underline; } .cookie-actions { display: flex; gap: 12px; } .cookie-btn { flex: 1; padding: 10px; border-radius: var(--radius); font-weight: 700; font-size: 13px; cursor: pointer; transition: var(--transition); border: none; } .cookie-btn.accept { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; } .cookie-btn.settings { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); } .cookie-btn:hover { transform: translateY(-2px); filter: brightness(1.1); } /* ── ICON ENHANCEMENTS ───────────────────────────────────────────────────── */ .struct-icon img { image-rendering: pixelated; width: 100%; height: 100%; object-fit: contain; transform: scale(1.1); } /* ── RESPONSIVE — shared breakpoints ──────────────────────────────────────── */ @media(max-width:960px){ .f-grid{grid-template-columns:1fr 1fr;gap:24px} } @media(max-width:768px){ .hamburger{display:block} .nav-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--bg-panel);flex-direction:column;border-top:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.5);padding:8px 0;max-height:80vh;overflow-y:auto} .nav-menu.active{display:flex} .nav-item{width:100%} .nav-link{padding:13px 20px;border-bottom:1px solid var(--border);width:100%;justify-content:space-between} .nav-cta{border-radius:0!important;margin:0} .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;background:rgba(0,0,0,.25);box-shadow:none;border-radius:0;border:none;border-top:1px solid var(--border);min-width:100%} .dropdown.mobile-open{display:block} .nav-item:hover>.dropdown{display:none} .nav-item.mobile-expanded>.dropdown{display:block} .dropdown .nav-link{padding-left:36px} .page-hero h1{font-size:26px} .f-grid{grid-template-columns:1fr;gap:20px} } /* ── Extreme Mobile (Fold & tiny phones) ── */ @media (max-width: 400px) { .logo-area { gap: 8px; } .logo-box { width: 36px; height: 36px; font-size: 18px; } .brand-text .name { font-size: 14px; } .brand-text .sub { font-size: 9px; } .container { padding: 0 16px; } .hamburger { font-size: 24px; } } /* merged from v2_layout.css */ /* ═══════════════════════════════════════════════════════════════════════════ CraftMod Hub — V2 High-Density Layout (v2_layout.css) ═══════════════════════════════════════════════════════════════════════════ */ :root { --v2-max-width: 1300px; --v2-sidebar-width: 280px; --v2-content-width: 850px; --v2-gap: 40px; } /* Base Body Update for V2 */ .v2-body { background: var(--bg); font-size: 17px; /* Increased for readability */ line-height: 1.7; font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; } .v2-body h1, .v2-body h2, .v2-body h3, .v2-body .brand-text .name { font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; } /* V2 Layout Grid */ .v2-wrapper { display: grid; grid-template-columns: var(--v2-sidebar-width) 1fr; gap: var(--v2-gap); max-width: var(--v2-max-width); margin: 0 auto; padding: 40px 24px; align-items: start; } /* Sidebar comes second in DOM but appears LEFT via order */ .v2-sidebar { order: 1; } .v2-content { order: 2; } /* Sidebar Styling */ .v2-sidebar { position: sticky; top: 100px; /* Below header */ display: flex; flex-direction: column; gap: 32px; height: auto; max-height: calc(100vh - 120px); } /* Table of Contents Header */ .v2-toc-container h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold); margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } /* TOC List */ #v2-toc { list-style: none; padding: 0; overflow-y: auto; } #v2-toc li { margin-bottom: 8px; } #v2-toc a { text-decoration: none; color: var(--text-muted); font-size: 13px; transition: var(--transition); display: block; line-height: 1.4; border-left: 2px solid transparent; padding-left: 12px; } #v2-toc a:hover, #v2-toc a.active { color: var(--purple-glow); border-left-color: var(--purple-bright); } #v2-toc .toc-h3 { padding-left: 24px; font-size: 12px; opacity: 0.8; } /* AdSense Unit in Sidebar */ .v2-sidebar-ad { width: 300px; height: 600px; background: var(--bg-panel); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; border-radius: var(--radius); text-transform: uppercase; letter-spacing: 1px; } /* AdSense Horizontal In-Article */ .ad-slot-horizontal { width: 100%; min-height: 250px; background: rgba(255,255,255,0.03); border: 1px dashed var(--border); border-radius: var(--radius); margin: 40px 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } /* Main Content Area */ .v2-content { background: rgba(22, 17, 31, 0.6); /* Translucent */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 48px; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── INTERNAL LINKING HUB (Below Breadcrumbs) ── */ .v2-hub, .v2-internal-hub { display: flex; gap: 8px; margin: 16px 0 24px 0; overflow-x: auto !important; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; } .v2-hub::-webkit-scrollbar, .v2-internal-hub::-webkit-scrollbar { display: none; } .v2-hub-link { flex-shrink: 0; background: rgba(108, 63, 207, 0.15); border: 1px solid rgba(108, 63, 207, 0.4); color: #e8e0f0; text-decoration: none; padding: 10px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: var(--transition); display: flex; align-items: center; gap: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .v2-hub-link:hover, .v2-hub-link.active { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; box-shadow: 0 4px 16px rgba(108, 63, 207, 0.5); transform: translateY(-2px); border-color: var(--purple-glow); } /* High-Density Typography */ .v2-content h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 24px; background: linear-gradient(135deg, #fff, var(--purple-glow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } .v2-content h2 { font-size: 28px; margin: 48px 0 24px; color: var(--gold-bright); scroll-margin-top: 100px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; } .v2-content h3 { font-size: 22px; margin: 32px 0 16px; color: var(--purple-bright); scroll-margin-top: 100px; } .v2-content p { margin-bottom: 1.6rem; font-size: 18px; color: #d1c8e1; } /* ── SIDEBAR WIDGETS (Related Guides) ── */ .v2-sidebar-widget { background: rgba(22, 17, 31, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius); padding: 20px; } .v2-sidebar-widget h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; } .v2-widget-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .v2-widget-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: var(--transition); } .v2-widget-links a::before { content: "›"; color: var(--purple-bright); font-weight: bold; font-size: 16px; } .v2-widget-links a:hover { color: #fff; transform: translateX(4px); } /* ── FAQ STYLING (Highlighted Points) ── */ .v2-faq-box { background: linear-gradient(145deg, rgba(108, 63, 207, 0.08) 0%, rgba(22, 17, 31, 0.6) 100%); border-left: 4px solid var(--purple-glow); border-radius: 0 var(--radius) var(--radius) 0; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .v2-faq-box h3 { font-size: 18px; color: #fff; margin: 0 0 16px 0; line-height: 1.4; } .v2-faq-points { list-style: none; padding: 0; margin: 0; } .v2-faq-points li { font-size: 16px; color: #d1c8e1; margin-bottom: 12px; padding-left: 24px; position: relative; } .v2-faq-points li::before { content: "■"; position: absolute; left: 0; top: 2px; color: var(--gold-bright); font-size: 12px; } .v2-faq-points li strong { color: #fff; background: rgba(108, 63, 207, 0.2); padding: 0 4px; border-radius: 4px; } /* ═══ RESPONSIVE — TABLETS & MOBILE ═══════════════════════════════════════ */ @media (max-width: 1100px) { .v2-wrapper { grid-template-columns: 1fr; padding: 0; gap: 0; } /* TOTALLY HIDE sidebar on mobile */ .v2-sidebar { display: none !important; } .v2-content { order: 1; padding: 20px 16px; border-radius: 0; border: none; box-shadow: none; backdrop-filter: none; background: transparent; } /* HIDE the Diamonds/Iron/Coal hub pills on mobile */ .v2-internal-hub { display: none !important; } /* PARAGRAPH SPACING on mobile */ .v2-content p { font-size: 16px; line-height: 1.8; margin-bottom: 1.4rem; } .v2-content h1 { font-size: 24px; line-height: 1.3; } .v2-content h2 { font-size: 22px; margin: 32px 0 16px; } /* IMAGES scale on mobile */ .v2-image-figure { margin: 24px 0; } .v2-image-figure img { min-height: 120px; border-radius: 8px; } /* LARGE ADS — guaranteed visible on mobile */ .ad-slot-horizontal { min-height: 250px; margin: 24px 0; background: #110A1A; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; } /* SMALL DISPLAY ADS — guaranteed visible on mobile */ .v2-display-ad-small { min-height: 100px; background: #110A1A; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; margin: 20px 0; } /* FAQ & info boxes fit mobile */ .v2-faq-box { padding: 16px; margin-bottom: 20px; } .v2-sidebar-widget { padding: 16px; } /* You May Also Like grid stacks on mobile */ .v2-you-may-also-like { padding: 20px !important; margin-top: 32px !important; } } /* ═══ RESPONSIVE — PHONES ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { .v2-content { padding: 16px 12px; } .v2-content p { font-size: 15px; } .v2-content h1 { font-size: 22px; } .v2-content h2 { font-size: 20px; } /* STICKY AD — shrink for phone screens */ .v2-sticky-ad { padding: 6px 0; } .v2-sticky-ins { width: 320px !important; height: 50px !important; } .v2-sticky-ad-close { top: -22px; right: 12px; padding: 2px 12px; font-size: 11px; } } /* ═══ RESPONSIVE — TINY PHONES (Fold, SE) ═══════════════════════════════════ */ @media (max-width: 400px) { .v2-content { padding: 12px 8px; } .v2-content p { font-size: 14px; } .v2-sticky-ins { width: 300px !important; height: 50px !important; } } /* ── STICKY BOTTOM AD ── */ .v2-sticky-ad { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(14, 10, 20, 0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--border); z-index: 9999; padding: 12px 0; display: flex; flex-direction: column; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.5); } .v2-sticky-ad-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .v2-sticky-ad-close { position: absolute; top: -30px; right: 20px; background: var(--purple-deep); border: 1px solid var(--border); color: var(--gold-bright); padding: 4px 16px; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 4px 4px 0 0; transition: var(--transition); } .v2-sticky-ad-close:hover { background: var(--purple-bright); color: #fff; } .v2-sticky-ins { display: inline-block; width: 728px; height: 90px; } /* ── V2 IMAGES & CAPTIONS ── */ .v2-image-figure { margin: 40px 0; text-align: center; } .v2-image-figure img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.4); background: var(--bg-card); min-height: 200px; } .v2-image-caption { margin-top: 12px; font-size: 14px; color: var(--text-muted); font-style: italic; display: block; } /* merged from styles.css */ /* ═══════════════════════════════════════════════════════════════════════════ CraftMod Hub — Purple & Gold Premium Theme ═══════════════════════════════════════════════════════════════════════════ */ /* ── Local Fonts ───────────────────────────────────────────────────────── */ @font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url('../../fonts/Poppins-Regular.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url('../../fonts/Poppins-Medium.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url('../../fonts/Poppins-SemiBold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url('../../fonts/Poppins-Bold.ttf') format('truetype')} @font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;src:url('../../fonts/JetBrainsMono-Regular.ttf') format('truetype')} @font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;src:url('../../fonts/JetBrainsMono-Medium.ttf') format('truetype')} :root { /* Core palette */ --bg-deep: #0e0a14; --bg-panel: #16111f; --bg-card: #1d1628; --bg-input: #130f1c; /* Purple spectrum */ --purple-dim: #2d1f4e; --purple: #6c3fcf; --purple-bright: #8b5cf6; --purple-glow: #a78bfa; --purple-muted: #3b2768; /* Gold spectrum */ --gold-dim: #5c4a1e; --gold: #d4a017; --gold-bright: #f0c040; --gold-glow: #ffd866; --gold-pale: #ffe4a0; /* Text */ --text-primary: #e8e0f0; --text-secondary:#9b8fb8; --text-muted: #6b5f82; /* Borders & accents */ --border: #2a2040; --border-hover: #4a3570; --glow-purple: rgba(139, 92, 246, 0.15); --glow-gold: rgba(212, 160, 23, 0.12); --radius: 8px; --radius-lg: 12px; --transition: all 0.2s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } /* -- Scrollbar ----------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--purple-dim); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--purple); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; background: var(--bg-deep); color: var(--text-primary); overflow-x: hidden; } /* ── Scrollbar ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--purple-dim); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--purple); } /* ══════════════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════════════ */ #sidebar { width: 300px; min-width: 300px; background: var(--bg-panel); border-right: 1px solid var(--border); padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; z-index: 10; overflow-y: auto; position: relative; } /* Subtle gradient accent line on the right edge */ #sidebar::after { content: ''; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: linear-gradient( to bottom, transparent 0%, var(--purple) 30%, var(--gold) 70%, transparent 100% ); opacity: 0.5; } /* ── Logo / Title ──────────────────────────────────────────────────────── */ #sidebar h2 { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--purple-bright), var(--gold-bright)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.5px; margin-bottom: 2px; } /* ── Control Groups ────────────────────────────────────────────────────── */ .control-group { display: flex; flex-direction: column; gap: 6px; } .control-group > label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-secondary); } /* ── Inputs & Selects ──────────────────────────────────────────────────── */ input, select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); padding: 9px 12px; border-radius: var(--radius); outline: none; font-size: 13px; font-family: 'JetBrains Mono', monospace; transition: var(--transition); } input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--glow-purple); } input::placeholder { color: var(--text-muted); } select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%239b8fb8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } select option { background: var(--bg-card); color: var(--text-primary); } /* ── Checkboxes (Structure Toggles) ────────────────────────────────────── */ .toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .toggle-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; cursor: pointer; padding: 5px 8px; border-radius: 6px; transition: var(--transition); color: var(--text-secondary); user-select: none; } .toggle-label:hover { background: var(--glow-purple); color: var(--text-primary); } .toggle-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--border-hover); border-radius: 4px; background: var(--bg-input); cursor: pointer; position: relative; transition: var(--transition); flex-shrink: 0; } .toggle-label input[type="checkbox"]:checked { background: var(--purple); border-color: var(--purple-bright); } .toggle-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--gold-bright); border-width: 0 2px 2px 0; transform: rotate(45deg); } .toggle-label input[type="checkbox"]:focus { box-shadow: 0 0 0 2px var(--glow-purple); } /* ── Advanced Section ──────────────────────────────────────────────────── */ .control-group[style] { all: unset; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } /* ── Find Button ───────────────────────────────────────────────────────── */ button, #btn-scan { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-bright) 100%); color: var(--gold-pale); border: none; padding: 12px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 700; font-family: 'Poppins', system-ui, sans-serif; cursor: pointer; letter-spacing: 0.5px; transition: var(--transition); position: relative; overflow: hidden; } button:hover, #btn-scan:hover { background: linear-gradient(135deg, var(--purple-bright) 0%, var(--gold) 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 20px var(--glow-purple), 0 2px 10px var(--glow-gold); } button:active, #btn-scan:active { transform: translateY(0); } button:disabled, #btn-scan:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ── Footer text ───────────────────────────────────────────────────────── */ #sidebar > p:last-of-type { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: auto; padding-top: 8px; } /* ══════════════════════════════════════════════════════════════════════════ MAIN CONTENT / MAP ══════════════════════════════════════════════════════════════════════════ */ #main-content { flex: 1; position: relative; display: flex; flex-direction: column; background: var(--bg-deep); } #map-container { flex: 1; overflow: hidden; position: relative; cursor: grab; } #map-container:active { cursor: grabbing; } canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; } /* ── Coordinate Overlay ────────────────────────────────────────────────── */ #overlay-ui { position: absolute; bottom: 16px; left: 16px; background: rgba(22, 17, 31, 0.92); padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); backdrop-filter: blur(8px); pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } #overlay-ui p { margin: 2px 0; font-size: 13px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); } .coord-val { color: var(--gold-bright); font-weight: 600; } /* ── Loading Overlay ───────────────────────────────────────────────────── */ #loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14, 10, 20, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 100; font-size: 16px; font-weight: 600; color: var(--purple-glow); letter-spacing: 1px; backdrop-filter: blur(4px); } .hidden { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body { flex-direction: column; } #sidebar-toggle { display: block; } #sidebar { position: fixed; top: 0; left: 0; width: 100%; min-width: unset; height: 85vh; max-height: 85vh; border-right: none; border-bottom: 1px solid var(--border); transform: translateY(-100%); transition: transform 0.3s ease; z-index: 500; } #sidebar.open { transform: translateY(0); } #sidebar::after { display: none; } #main-content { height: 100vh; } #overlay-ui { bottom: 8px; left: 8px; padding: 6px 10px; } #overlay-ui p { font-size: 11px; } } /* ══════════════════════════════════════════════════════════════════════════ TAB BAR ══════════════════════════════════════════════════════════════════════════ */ .tab-bar { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .tab-btn { flex: 1; padding: 9px 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 0 !important; background: var(--bg-input) !important; color: var(--text-muted) !important; border: none !important; transition: var(--transition); } .tab-btn:hover { background: var(--bg-card) !important; color: var(--text-secondary) !important; transform: none !important; box-shadow: none !important; } .tab-btn.active { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-bright) 100%) !important; color: var(--gold-pale) !important; } .tab-content { display: none; } .tab-content.active { display: flex; flex-direction: column; gap: 16px; } /* ══════════════════════════════════════════════════════════════════════════ ORE FINDER UI ══════════════════════════════════════════════════════════════════════════ */ .coord-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .coord-inputs input { text-align: center; padding: 8px 4px; font-size: 12px; } /* ── Ore Results ───────────────────────────────────────────────────────── */ .ore-results { margin-top: 8px; max-height: 40vh; overflow-y: auto; } .ore-header { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text-primary); } .ore-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .ore-table-wrap { overflow-x: auto; } .ore-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .ore-table thead th { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); } .ore-table tbody td { padding: 5px 6px; color: var(--text-secondary); border-bottom: 1px solid rgba(42, 32, 64, 0.4); } .ore-table tbody tr:hover td { background: var(--glow-purple); color: var(--text-primary); } .ore-loading, .ore-empty, .ore-error { padding: 16px; text-align: center; font-size: 12px; border-radius: var(--radius); } .ore-loading { color: var(--purple-glow); } .ore-empty { color: var(--text-muted); } .ore-error { color: #ff6b6b; background: rgba(255, 50, 50, 0.08); } /* ══════════════════════════════════════════════════════════════════════════ SIDEBAR TOGGLE (Mobile Hamburger) ══════════════════════════════════════════════════════════════════════════ */ #sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1000; width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 40px; text-align: center; background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } #sidebar-toggle:hover { background: var(--bg-card); border-color: var(--purple); transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } /* ══════════════════════════════════════════════════════════════════════════ LOADING SPINNER ══════════════════════════════════════════════════════════════════════════ */ .loading-spinner { width: 36px; height: 36px; border: 3px solid var(--purple-dim); border-top-color: var(--purple-glow); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════════════ WASM ERROR OVERLAY ══════════════════════════════════════════════════════════════════════════ */ #wasm-error { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14, 10, 20, 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 200; gap: 8px; padding: 24px; text-align: center; } #wasm-error p:first-child { font-size: 18px; font-weight: 700; color: #ff6b6b; } #wasm-error p:last-child { font-size: 13px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════════════════ STATUS BAR ══════════════════════════════════════════════════════════════════════════ */ .status-bar { padding: 6px 0; font-size: 12px; text-align: center; min-height: 24px; } .status-ok { color: #8ae88a; font-weight: 600; } .status-err { color: #ff6b6b; font-weight: 600; } /* ── Touch: prevent default browser gestures on canvas ─────────────────── */ #map-container canvas { touch-action: none; } /* merged from index-page.css */ /* ═══ Index / Landing Page — unique styles ═══ */ /* Bigger logo on landing */ .logo-box{width:52px;height:52px;font-size:28px} .brand-text .name{font-size:18px} /* Hero */ .hero{background:radial-gradient(ellipse at 20% 50%,rgba(108,63,207,.25) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(212,160,23,.12) 0%,transparent 50%),var(--bg);padding:100px 0 80px;text-align:center;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236c3fcf' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(108,63,207,.2);border:1px solid var(--purple-muted);color:var(--purple-glow);padding:6px 18px;border-radius:50px;font-size:13px;font-weight:600;margin-bottom:24px;letter-spacing:.3px} .hero h1{font-size:clamp(36px,6vw,64px);font-weight:900;line-height:1.1;margin-bottom:22px;letter-spacing:-1px} .hero h1 .highlight{background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero p{font-size:18px;color:var(--text-muted);max-width:580px;margin:0 auto 36px;font-weight:400;line-height:1.7} .hero .container{position:relative;z-index:1} .hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn-primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-bright) 100%);color:var(--gold-pale);padding:16px 36px;border-radius:50px;text-decoration:none;font-size:16px;font-weight:700;box-shadow:0 6px 28px rgba(108,63,207,.5);transition:var(--transition)} .btn-primary:hover{background:linear-gradient(135deg,var(--purple-bright) 0%,var(--gold) 100%);color:#fff;transform:translateY(-2px);box-shadow:0 10px 36px rgba(108,63,207,.6)} .btn-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--text-muted);padding:16px 36px;border-radius:50px;text-decoration:none;font-size:16px;font-weight:600;border:1px solid var(--border);transition:var(--transition)} .btn-secondary:hover{border-color:var(--purple);color:var(--text);background:rgba(108,63,207,.1)} .hero-stats{display:flex;justify-content:center;gap:48px;padding:36px 0 0;flex-wrap:wrap} .stat-item{text-align:center} .stat-num{font-size:28px;font-weight:800;color:var(--gold-bright);display:block;font-family:'JetBrains Mono',monospace} .stat-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.8px} /* Section Heads */ .section-head{text-align:center;margin-bottom:56px} .section-head .label{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-weight:700;display:block;margin-bottom:12px} .section-head h2{font-size:clamp(26px,4vw,38px);font-weight:800;margin-bottom:12px;letter-spacing:-.5px} .section-head p{font-size:16px;color:var(--text-muted);max-width:520px;margin:0 auto} /* How It Works */ .how-section{padding:80px 0;background:var(--bg-panel)} .steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px} .step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;text-align:center;position:relative;transition:var(--transition)} .step-card:hover{border-color:var(--purple);transform:translateY(-4px);box-shadow:0 12px 40px rgba(108,63,207,.2)} .step-num{width:44px;height:44px;background:linear-gradient(135deg,var(--purple),var(--purple-bright));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--gold-pale);margin:0 auto 18px} .step-icon{font-size:40px;margin-bottom:16px;display:block} .step-card h3{font-size:16px;font-weight:700;margin-bottom:10px} .step-card p{font-size:13px;color:var(--text-muted);line-height:1.7} /* Features */ .features-section{padding:80px 0;background:var(--bg)} .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px} .feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;display:flex;gap:20px;align-items:flex-start;transition:var(--transition)} .feature-card:hover{border-color:var(--purple-muted);box-shadow:0 8px 32px rgba(108,63,207,.15)} .feature-icon{font-size:36px;flex-shrink:0;width:56px;height:56px;background:rgba(108,63,207,.15);border-radius:var(--radius);display:flex;align-items:center;justify-content:center} .feature-body h3{font-size:16px;font-weight:700;margin-bottom:8px} .feature-body p{font-size:13px;color:var(--text-muted);line-height:1.7} .feature-tag{display:inline-block;margin-top:10px;background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.3);color:var(--gold);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:20px} /* Structures Showcase */ .structures-section{padding:80px 0;background:var(--bg-panel)} .structures-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:48px} .struct-chip{background:var(--bg-card);border:1px solid var(--border);border-radius:50px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:8px;transition:var(--transition);cursor:default} .struct-chip:hover{border-color:var(--purple);color:var(--text);background:rgba(108,63,207,.12)} .struct-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} /* FAQ */ .faq-section{padding:80px 0;background:var(--bg)} .faq-container{max-width:820px;margin:0 auto} .faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;transition:border-color .3s} .faq-item:hover{border-color:var(--purple-muted)} .faq-item.active{border-color:var(--purple)} .faq-question{padding:20px 24px;font-weight:600;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text);user-select:none;gap:16px} .faq-question::after{content:'+';font-size:22px;font-weight:700;color:var(--gold-bright);flex-shrink:0} .faq-item.active .faq-question::after{content:'−'} .faq-item.active .faq-question{color:var(--purple-glow)} .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease-out} .faq-answer p{padding:0 24px 20px;font-size:14px;color:var(--text-muted);line-height:1.8} /* CTA */ .cta-section{padding:80px 0;background:linear-gradient(135deg,#1a0a2e 0%,var(--purple-muted) 50%,#1a0a2e 100%);text-align:center;position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(212,160,23,.1) 0%,transparent 70%);pointer-events:none} .cta-section h2{font-size:clamp(28px,4vw,42px);font-weight:900;margin-bottom:16px} .cta-section p{font-size:16px;color:var(--text-muted);margin-bottom:36px;max-width:480px;margin-left:auto;margin-right:auto} .text-gold{color:var(--gold-bright)} /* Landing page footer gets more padding */ footer{padding:60px 0 24px} .f-grid{gap:48px;margin-bottom:48px} .f-brand p{font-size:13px} .f-head{font-size:12px;margin-bottom:18px} .f-links a{font-size:13px;margin-bottom:10px} .f-copy{padding-top:24px;font-size:12px} /* Responsive */ @media(max-width:768px){ .hero{padding:64px 0 56px} .hero-stats{gap:28px} .hero-btns{flex-direction:column;align-items:center} .btn-primary,.btn-secondary{width:100%;max-width:320px;justify-content:center} .features-grid{grid-template-columns:1fr} } @media(max-width:480px){ .hero h1{font-size:30px} .hero p{font-size:15px} .step-card{padding:24px 20px} .feature-card{flex-direction:column} } /* merged from ores-page.css */ /* ═══ Ores Page — unique styles ═══ */ /* Hero gradient (ores = teal accent) */ .page-hero{background:radial-gradient(ellipse at 70% 50%,rgba(74,240,240,.08) 0%,transparent 60%),radial-gradient(ellipse at 20% 30%,rgba(108,63,207,.18) 0%,transparent 50%),var(--bg)} .page-hero h1 .hi{background:linear-gradient(135deg,#4af0f0,var(--gold-bright))} /* Ore Selector Grid */ .ore-selector{margin-bottom:24px} .ore-selector h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:16px;text-align:center} .ore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px} .ore-card{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius);border:2px solid var(--border);background:var(--bg-card);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none} .ore-card:hover{border-color:var(--purple-muted);background:rgba(108,63,207,.06)} .ore-block{width:28px;height:28px;border-radius:6px;flex-shrink:0;position:relative;overflow:hidden} .ore-block::before{content:'';position:absolute;inset:2px;border-radius:3px;opacity:.5;background:rgba(255,255,255,.15)} .ore-card .ore-name{font-size:13px;font-weight:600;color:var(--text-muted);transition:color .2s} .ore-card.selected{border-color:var(--purple-bright);background:linear-gradient(135deg,rgba(108,63,207,.18),rgba(139,92,246,.08));box-shadow:0 0 20px rgba(108,63,207,.35),0 4px 16px rgba(0,0,0,.3)} .ore-card.selected .ore-name{color:var(--gold-bright)} .ore-card.selected .ore-block{box-shadow:0 0 12px var(--ore-glow,rgba(255,255,255,.4))} @keyframes oreSelect{0%{filter:brightness(1)}40%{filter:brightness(1.6)}100%{filter:brightness(1)}} .ore-card.pulse{animation:oreSelect .35s ease-out} /* Controls Panel */ .controls-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)} .ctrl-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .ctrl-group.full{grid-column:1/-1} .coord-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .coord-inputs input{text-align:center} .coord-label{display:flex;gap:4px;align-items:baseline} .coord-label small{color:var(--purple-glow);font-weight:600;font-size:11px} /* Find Button */ .btn-find{background:linear-gradient(135deg,#0d9488,#4af0f0);color:#0a1628;padding:12px 32px;border:none;border-radius:50px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgba(74,240,240,.3);transition:var(--transition);width:100%;margin-top:4px} .btn-find:hover:not(:disabled){background:linear-gradient(135deg,#4af0f0,var(--gold-bright));transform:translateY(-2px);box-shadow:0 8px 28px rgba(74,240,240,.4)} .btn-find:disabled{opacity:.6;cursor:not-allowed} /* Map — teal spinner */ .map-wrap{height:420px} .map-loading .spinner{border-top-color:#4af0f0} /* Results Table */ .results-header{margin-bottom:14px} .ore-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;border-radius:50px;font-size:12px;font-weight:700;color:#fff} .ore-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)} .ore-table{width:100%;border-collapse:collapse;font-size:13px} .ore-table thead{background:var(--bg-panel)} .ore-table th{padding:12px 16px;text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);border-bottom:1px solid var(--border)} .ore-table td{padding:10px 16px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:12px} .ore-table tr:hover{background:rgba(108,63,207,.06)} .ore-table .rank{color:var(--gold-bright);font-weight:700;width:40px} .ore-table .dist{color:var(--purple-glow)} .ore-row-clickable{cursor:pointer;transition:background .2s ease} .ore-row-clickable:hover{background:rgba(74,240,240,.1) !important} .results-more{text-align:center;padding:14px;color:var(--text-muted);font-size:13px;margin-top:8px;font-style:italic} /* Tick marks on nearest veins */ .ore-tick{color:#4ade80;font-weight:800;font-size:15px;display:inline-block;animation:tickPop .3s ease-out} .tick-cell{width:28px;text-align:center} @keyframes tickPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}} /* Distance bar — visual proximity indicator */ .dist{position:relative;padding-left:40px !important} .dist-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);width:30px;height:6px;border-radius:3px;background:var(--border);overflow:hidden} .dist-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:var(--pct,0%);background:linear-gradient(90deg,#4ade80,#ffd700);border-radius:3px} /* Axis search / filter controls */ .axis-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;padding:12px 14px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius)} .axis-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-right:4px} .axis-input{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;text-align:center} .axis-input:focus{border-color:var(--purple-bright);outline:none;box-shadow:0 0 0 2px rgba(108,63,207,.2)} .axis-btn{padding:6px 16px;border:none;border-radius:6px;background:var(--purple);color:var(--gold-pale);font-size:11px;font-weight:700;cursor:pointer;transition:var(--transition)} .axis-btn:hover{background:var(--purple-bright);transform:translateY(-1px)} /* Responsive */ @media(max-width:960px){ .controls-panel{grid-template-columns:1fr} } @media(max-width:768px){ .ore-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} .map-wrap{height:320px} } @media(max-width:480px){ .ore-grid{grid-template-columns:repeat(3,1fr)} .ore-card{padding:10px} .map-wrap{height:260px} } /* merged from structures-page.css */ /* ═══ Structures Page — unique styles ═══ */ /* Hero gradient (structures = purple) */ .page-hero{background:radial-gradient(ellipse at 30% 50%,rgba(108,63,207,.2) 0%,transparent 60%),var(--bg)} .page-hero h1 .hi{background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright))} /* Controls Row */ .controls-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:24px;padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)} .controls-row .ctrl{flex:1;min-width:140px} /* Scan Button */ .btn-scan{background:linear-gradient(135deg,var(--purple),var(--purple-bright));color:var(--gold-pale);padding:12px 32px;border:none;border-radius:50px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgba(108,63,207,.5);transition:var(--transition);min-width:180px;flex:0 0 auto;align-self:flex-end} .btn-scan:hover:not(:disabled){background:linear-gradient(135deg,var(--purple-bright),var(--gold));color:#fff;transform:translateY(-2px)} .btn-scan:disabled{opacity:.6;cursor:not-allowed} /* Structure Pills */ .struct-selector{margin-bottom:24px} .struct-selector h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:16px;text-align:center} .struct-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 8px 20px;perspective:600px} .struct-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:50px;border:2px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;user-select:none;transform:translateY(var(--arc-y,0px));transition:all .3s cubic-bezier(.4,0,.2,1),box-shadow .5s ease} .struct-pill .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;transition:box-shadow .3s} .struct-pill:hover{border-color:var(--purple-muted);color:var(--text);background:rgba(108,63,207,.08)} .struct-pill.selected{border-color:var(--purple-bright);background:linear-gradient(135deg,rgba(108,63,207,.22),rgba(139,92,246,.1));color:var(--gold-bright);box-shadow:0 0 20px rgba(108,63,207,.45),0 0 40px rgba(108,63,207,.12),0 4px 16px rgba(0,0,0,.3);transform:translateY(calc(var(--arc-y,0px) - 4px)) scale(1.06)} .struct-pill.selected .dot{box-shadow:0 0 12px currentColor,0 0 24px currentColor} .struct-pill.selected::after{content:'✓';margin-left:2px;font-size:12px;color:var(--gold);font-weight:800} @keyframes selectPulse{0%{filter:brightness(1)}40%{filter:brightness(1.6)}100%{filter:brightness(1)}} .struct-pill.pulse{animation:selectPulse .4s ease-out} /* Selected Bar */ .selected-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);min-height:48px} .selected-bar .bar-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-right:4px} .sel-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);background:rgba(108,63,207,.15);border:1px solid var(--purple-muted);color:var(--text)} .sel-chip:hover{background:rgba(255,50,50,.15);border-color:#ff5050;color:#ff8080} .sel-chip .x{font-weight:800;color:var(--text-muted);margin-left:2px} .sel-empty{font-size:13px;color:var(--text-muted);font-style:italic} /* Map height */ .map-wrap{height:480px} /* Results */ .results-badge{background:var(--purple);color:var(--gold-pale);padding:4px 14px;border-radius:50px;font-size:12px;font-weight:700} .results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px} .result-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);font-size:13px} .result-card:hover{border-color:var(--purple-muted)} .result-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor} .result-name{font-weight:600;color:var(--text);flex:1} .result-coords{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-bright)} .result-clickable{cursor:pointer;transition:all .2s ease} .result-clickable:hover{border-color:var(--gold);background:rgba(108,63,207,.12);transform:translateX(4px)} .result-rank{width:24px;height:24px;border-radius:50%;background:var(--purple);color:var(--gold-pale);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0} .result-dist{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);white-space:nowrap} .results-more{text-align:center;padding:14px;color:var(--text-muted);font-size:13px;margin-top:8px;font-style:italic} /* Responsive */ @media(max-width:768px){ .controls-row{flex-direction:column} .controls-row .ctrl{min-width:100%} .btn-scan{width:100%} .map-wrap{height:360px} .results-grid{grid-template-columns:1fr} } @media(max-width:480px){ .struct-pill{padding:8px 14px;font-size:12px} .map-wrap{height:280px} } /* merged from structures.css */ /* ═══ CraftMod Hub — Structures Page Styles ═══ */ /* Poppins & JetBrains Mono loaded locally from /fonts/ folder */ @font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/Poppins-Light.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Poppins-Regular.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Poppins-Medium.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Poppins-SemiBold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Poppins-Bold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Poppins-ExtraBold.ttf') format('truetype')} @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/Poppins-Black.ttf') format('truetype')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/JetBrainsMono-Regular.ttf') format('truetype')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/JetBrainsMono-Medium.ttf') format('truetype')} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{--purple-deep:#1a0a2e;--purple:#6c3fcf;--purple-bright:#8b5cf6;--purple-glow:#a78bfa;--purple-muted:#3b2768;--gold:#d4a017;--gold-bright:#f0c040;--gold-pale:#ffe4a0;--bg:#0e0a14;--bg-panel:#16111f;--bg-card:#1d1628;--text:#e8e0f0;--text-muted:#9b8fb8;--border:#2a2040;--radius:10px;--radius-lg:16px;--transition:all .25s ease} html{scroll-behavior:smooth} body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} .container{max-width:1200px;margin:0 auto;padding:0 24px} /* ── HEADER ─────────────────────────────────────────── */ header{background:linear-gradient(135deg,var(--purple-deep) 0%,#2d1558 100%);border-bottom:1px solid var(--border);padding:12px 0;position:sticky;top:0;z-index:1000;box-shadow:0 4px 24px rgba(0,0,0,.4)} .header-flex{display:flex;justify-content:space-between;align-items:center;position:relative} .logo-area{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;z-index:1001} .logo-box{width:48px;height:48px;background:var(--bg-card);border-radius:var(--radius);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 16px rgba(212,160,23,.3);flex-shrink:0} .brand-text .name{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1.1} .brand-text .sub{font-size:10px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.8px;display:block} .nav-menu{display:flex;align-items:center;gap:0;margin-right:16px} .nav-item{position:relative} .nav-link{color:var(--text-muted);text-decoration:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:14px 18px;display:flex;align-items:center;gap:5px;transition:var(--transition)} .nav-link:hover,.nav-link.active{color:var(--gold-bright)} .nav-link .arrow{font-size:9px;transition:transform .3s} .dropdown{position:absolute;top:100%;left:0;background:var(--bg-panel);min-width:200px;border-radius:0 0 var(--radius) var(--radius);border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--transition);z-index:999} .nav-item:hover>.dropdown{opacity:1;visibility:visible;transform:translateY(0)} .dropdown .nav-link{padding:11px 18px;border-bottom:1px solid var(--border);font-size:12px} .dropdown .nav-link:hover{background:rgba(108,63,207,.15);color:var(--text)} .nav-cta{background:linear-gradient(135deg,var(--purple),var(--purple-bright));color:var(--gold-pale)!important;padding:10px 22px!important;border-radius:50px!important;margin-left:12px;box-shadow:0 4px 14px rgba(108,63,207,.4)} .nav-cta:hover{background:linear-gradient(135deg,var(--purple-bright),var(--gold))!important;color:#fff!important;transform:translateY(-1px)} .hamburger{display:none;font-size:28px;color:var(--gold-bright);cursor:pointer;z-index:1002;padding:6px;background:none;border:none;line-height:1} /* ── PAGE HERO ──────────────────────────────────────── */ .page-hero{background:radial-gradient(ellipse at 30% 50%,rgba(108,63,207,.2) 0%,transparent 60%),var(--bg);padding:56px 0 40px;text-align:center} .page-hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;margin-bottom:12px;letter-spacing:-.5px} .page-hero h1 .hi{background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .page-hero p{font-size:16px;color:var(--text-muted);max-width:600px;margin:0 auto;line-height:1.7} /* ── CONTROLS ROW ──────────────────────────────────── */ .controls-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:24px;padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg)} .ctrl{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px} .ctrl label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted)} .ctrl input,.ctrl select{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:14px;padding:10px 12px;outline:none;transition:border-color .2s} .ctrl input:focus,.ctrl select:focus{border-color:var(--purple-bright)} .ctrl select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b8fb8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center} /* ── AD SLOTS ─────────────────────────────────────── */ .ad-slot{overflow:hidden;text-align:center} /* ── SCAN BUTTON ────────────────────────────────────── */ .btn-scan{background:linear-gradient(135deg,var(--purple),var(--purple-bright));color:var(--gold-pale);padding:12px 32px;border:none;border-radius:50px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgba(108,63,207,.5);transition:var(--transition);min-width:180px;flex:0 0 auto;align-self:flex-end} .btn-scan:hover:not(:disabled){background:linear-gradient(135deg,var(--purple-bright),var(--gold));color:#fff;transform:translateY(-2px)} .btn-scan:disabled{opacity:.6;cursor:not-allowed} /* ── STRUCTURE PILLS ───────────────────────────────── */ .struct-selector{margin-bottom:24px} .struct-selector h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:16px;text-align:center} .struct-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 8px 20px;perspective:600px} .struct-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:50px;border:2px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;user-select:none;transform:translateY(var(--arc-y,0px));transition:all .3s cubic-bezier(.4,0,.2,1),box-shadow .5s ease} .struct-pill .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;transition:box-shadow .3s} .struct-pill:hover{border-color:var(--purple-muted);color:var(--text);background:rgba(108,63,207,.08)} .struct-pill.selected{border-color:var(--purple-bright);background:linear-gradient(135deg,rgba(108,63,207,.22),rgba(139,92,246,.1));color:var(--gold-bright);box-shadow:0 0 20px rgba(108,63,207,.45),0 0 40px rgba(108,63,207,.12),0 4px 16px rgba(0,0,0,.3);transform:translateY(calc(var(--arc-y,0px) - 4px)) scale(1.06)} .struct-pill.selected .dot{box-shadow:0 0 12px currentColor,0 0 24px currentColor} .struct-pill.selected::after{content:'✓';margin-left:2px;font-size:12px;color:var(--gold);font-weight:800} @keyframes selectPulse{0%{filter:brightness(1)}40%{filter:brightness(1.6)}100%{filter:brightness(1)}} .struct-pill.pulse{animation:selectPulse .4s ease-out} /* ── SELECTED BAR ──────────────────────────────────── */ .selected-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);min-height:48px} .selected-bar .bar-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-right:4px} .sel-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);background:rgba(108,63,207,.15);border:1px solid var(--purple-muted);color:var(--text)} .sel-chip:hover{background:rgba(255,50,50,.15);border-color:#ff5050;color:#ff8080} .sel-chip .x{font-weight:800;color:var(--text-muted);margin-left:2px} .sel-empty{font-size:13px;color:var(--text-muted);font-style:italic} /* ── MAP CONTAINER ─────────────────────────────────── */ .map-section{margin:24px 0} .map-wrap{position:relative;width:100%;height:480px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:#1a1a24} .map-wrap canvas{display:block;width:100%;height:100%;touch-action:none} .coord-bar{position:absolute;bottom:0;left:0;right:0;display:flex;gap:24px;padding:8px 16px;background:rgba(14,10,20,.85);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted);backdrop-filter:blur(8px)} .coord-bar strong{color:var(--gold-bright);font-weight:500} .map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:14px;color:var(--text-muted);background:rgba(14,10,20,.9)} .map-loading .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--purple-bright);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:15px;color:#ff6b6b;background:rgba(14,10,20,.95);padding:24px;text-align:center} /* ── RESULTS ────────────────────────────────────────── */ .results-wrap{margin-top:24px;min-height:60px} .results-header{display:flex;align-items:center;gap:12px;margin-bottom:12px} .results-header h3{font-size:16px;font-weight:700} .results-badge{background:var(--purple);color:var(--gold-pale);padding:4px 14px;border-radius:50px;font-size:12px;font-weight:700} .results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px} .result-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);font-size:13px} .result-card:hover{border-color:var(--purple-muted)} .result-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor} .result-name{font-weight:600;color:var(--text);flex:1} .result-coords{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold-bright)} .results-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:14px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border)} .status-msg{padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;margin-top:12px} .status-ok{background:rgba(46,213,115,.1);color:#2ed573;border:1px solid rgba(46,213,115,.3)} .status-err{background:rgba(255,71,87,.1);color:#ff4757;border:1px solid rgba(255,71,87,.3)} /* ── SEO CONTENT ────────────────────────────────────── */ .seo-section{padding:64px 0;background:var(--bg-panel)} .seo-section h2{font-size:24px;font-weight:800;margin-bottom:16px} .seo-section p{font-size:14px;color:var(--text-muted);line-height:1.8;margin-bottom:16px;max-width:800px} .seo-section h3{font-size:18px;font-weight:700;margin:28px 0 10px;color:var(--text)} /* ── FOOTER ─────────────────────────────────────────── */ footer{background:#070410;color:var(--text);padding:48px 0 20px;border-top:1px solid var(--border)} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .f-brand .name{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--purple-bright),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:10px} .f-brand p{font-size:12px;color:var(--text-muted);line-height:1.8} .f-head{color:var(--gold);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px} .f-links a{display:block;color:var(--text-muted);text-decoration:none;font-size:12px;margin-bottom:8px;transition:var(--transition)} .f-links a:hover{color:var(--text);padding-left:5px} .f-copy{text-align:center;border-top:1px solid var(--border);padding-top:20px;font-size:11px;color:var(--text-muted)} .f-copy a{color:var(--purple-glow);text-decoration:none} /* ── RESPONSIVE ─────────────────────────────────────── */ @media(max-width:960px){.f-grid{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:768px){ .hamburger{display:block} .nav-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--bg-panel);flex-direction:column;border-top:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.5);padding:8px 0} .nav-menu.active{display:flex} .nav-item{width:100%}.nav-link{padding:13px 20px;border-bottom:1px solid var(--border);width:100%;justify-content:space-between} .nav-cta{border-radius:0!important;margin:0} .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;background:rgba(0,0,0,.25);box-shadow:none;border-radius:0;border:none;border-top:1px solid var(--border);min-width:100%} .nav-item:hover>.dropdown{display:none} .nav-item.mobile-expanded>.dropdown{display:block} .dropdown .nav-link{padding-left:36px} .controls-row{flex-direction:column}.ctrl{min-width:100%}.btn-scan{width:100%} .map-wrap{height:360px} .results-grid{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr;gap:20px} } @media(max-width:480px){.page-hero h1{font-size:26px}.struct-pill{padding:8px 14px;font-size:12px}.map-wrap{height:280px}}