:root { --bg: #141414; --surface: #141414; --panel: #141414; --card: #141414; --border: #1a1a1a; --text: #EEF0F2; --muted: #c9c9c9; --primary: #EEF0F2; --dot-grid-size: 160px; --dot-grid-opacity: 0.08; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: Sora, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: 0.1px; cursor: none; } /* Opt-in dot grid: add `class="dot-grid"` to the on pages that should show the grid */ body.dot-grid { /* more visible dot grid overlay */ background-image: radial-gradient(rgba(255,255,255,var(--dot-grid-opacity)) 2px, transparent 2px); background-size: var(--dot-grid-size) var(--dot-grid-size); background-attachment: fixed; background-repeat: repeat; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; } input, select { font: inherit; } .container { max-width: 1120px; margin: 0 auto; padding: 28px 22px; } /* Site alert */ .site-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(238,240,242,0.06), rgba(238,240,242,0.04)); border: 1px solid rgba(238,240,242,0.08); color: var(--text); margin-bottom: 14px; } .site-alert .alert-icon { font-size: 18px; } .site-alert .alert-text { font-size: 14px; color: var(--text); } .site-alert .alert-close { margin-left: auto; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 6px 8px; border-radius: 8px; cursor: pointer; } .site-alert .alert-close:hover { color: var(--text); } /* Sale banner (appears under the navbar) */ .sale-banner { margin: 12px auto; max-width: 1120px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(238,240,242,0.04), rgba(238,240,242,0.02)); border: 1px solid rgba(238,240,242,0.04); color: var(--text); display: flex; align-items: center; gap: 12px; font-weight: 700; } .sale-banner .sb-kicker { background: rgba(238,240,242,0.06); color: var(--text); padding: 6px 10px; border-radius: 8px; font-weight: 900; } .sale-banner .sb-text { color: var(--text); font-weight: 700; } .sale-banner.hidden { display: none; } /* Join server pop-out (small cookie-style card) */ .join-popout { position: fixed; right: 18px; bottom: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; max-width: 340px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 520; transform: translateY(16px); opacity: 0; transition: transform .24s ease, opacity .24s ease; } .join-popout.show { transform: translateY(0); opacity: 1; } .join-popout .jp-content { flex: 1; } .join-popout .jp-title { margin: 0 0 6px; font-weight: 800; font-size: 15px; } .join-popout .jp-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.3; } .join-popout .jp-actions { display: flex; gap: 8px; align-items: center; } .join-popout .jp-join { background: var(--primary); color: #000; padding: 8px 12px; border-radius: 10px; font-weight: 800; text-decoration: none; border: 1px solid var(--primary); } .join-popout .jp-close { background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; } .join-popout .jp-close:hover { color: var(--text); } @media (max-width: 480px) { .join-popout { left: 12px; right: 12px; max-width: none; } } /* Header */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-weight: 700; font-size: 20px; letter-spacing: .2px; } .nav { display: flex; gap: 10px; } .nav-link { color: var(--muted); padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; } .nav-link:hover, .nav-link.active { color: var(--text); background: var(--panel); border-color: var(--border); } .nav-actions { display: flex; align-items: center; gap: 10px; } .nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.06); font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease, transform .08s ease; } .nav-btn:hover { background: rgba(255,255,255,0.03); transform: translateY(-1px); } /* Auth avatar in header (copied from index.html) */ .nav-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 8px; } .nav-user { display: inline-flex; align-items: center; gap:8px; color: var(--text); } .nav-btn.avatar { padding: 6px 8px; border-radius: 10px; } /* Distinct primary action style for buy/contact buttons */ .nav-btn.primary { background: var(--primary); color: #000; border-color: var(--primary); } .nav-btn.primary:hover { opacity: .95; transform: translateY(-1px); } /* Intro */ .intro { padding: 30px 0 8px; } .title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; margin: 0 0 8px; letter-spacing: .2px; } .subtitle { margin: 0; color: var(--muted); max-width: 70ch; } /* Banner */ .banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 18px; margin: 12px 0 16px; border: 1px solid var(--primary); border-radius: 14px; background: var(--primary); color: #000; } .banner-text { display: flex; flex-direction: column; gap: 6px; } .banner-title { font-weight: 900; font-size: 18px; color: #000; } .banner-sub { font-size: 15px; color: #000; } /* Featured plot */ .featured { padding: 2px 0 14px; } .featured-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .featured-label { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; } .featured-title { margin: 0; font-size: 20px; font-weight: 800; } .featured-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; } .featured-media { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); aspect-ratio: 16/9; min-height: 220px; } .featured-media .featured-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0a0a0a; transform: scale(1); transition: transform .6s cubic-bezier(.2,.9,.2,1); } .featured-media:hover .featured-img { transform: scale(1.06); } /* Ensure the featured card fills the media area */ .featured-media .community-card { position: absolute; inset: 0; display: block; } .featured-media .community-card .featured-info-card { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; } /* Borderless info card placed under featured image */ .featured-info-card { padding: 12px 14px; margin-top: 12px; border-radius: 10px; background: transparent; border: none; color: var(--text); display: flex; flex-direction: column; gap: 8px; } .featured-info-card .featured-meta { display: flex; gap: 8px; align-items: center; } .featured-info-card .badge { border: none; color: var(--muted); background: transparent; padding: 0; } .slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--primary); background: transparent; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; } .slide-arrow.left { left: 12px; } .slide-arrow.right { right: 12px; } .slide-arrow:hover { opacity: .92; } .featured-thumbs { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; justify-content: center; width: calc(100% - 48px); padding: 6px 12px; z-index: 3; pointer-events: auto; } .featured-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); } .featured-thumbs img.thumb-active { border-color: var(--primary); } .featured-panel { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 12px; } .featured-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Primary button (filled) */ .button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; font-weight: 800; color: var(--text); background: #000; border: 1px solid #000; text-decoration: none; } .button-primary:hover { opacity: .92; } /* Toolbar */ .toolbar { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; align-items: center; padding: 10px 0 8px; width: 100%; } .field { display: flex; align-items: center; gap: 8px; } .search-field { position: relative; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); } .input, .select { background: rgba(238,240,242,0.03); color: var(--text); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; width: 100%; } .search-field .input { padding-left: 40px; } .input::placeholder { color: var(--muted); } .input:focus, .select:focus { outline: none; border-color: rgba(238,240,242,0.12); } .results { color: var(--muted); justify-self: end; } /* Catalog grid */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 12px 0 28px; } /* Community featured builds grid (replaces partners) */ .community-builds { padding: 16px 0 24px; } .community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 12px 0 18px; } .community-grid .card { min-height: 220px; } .community-grid .card .card-body { padding: 14px; } .community-grid .badge { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.06); color: var(--muted); padding: 4px 8px; border-radius: 999px; } @media (max-width: 1100px) { .community-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .community-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .community-grid { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .partners-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .partners-grid { grid-template-columns: 1fr; } } .card { position: relative; display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #0a0a0a; display: block; } /* Sold overlay */ .card.sold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.7)); z-index: 3; } .card.sold .card-body { z-index: 4; } .card.sold .sold-badge { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,0.7); color: var(--text); padding: 6px 10px; border-radius: 8px; font-weight: 900; z-index: 5; } /* Overlay fade + info on image */ .card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 55%); color: var(--text); z-index: 2; } .card:hover .card-img { transform: scale(1.03); transition: transform .45s ease; } .card-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: .2px; } .card-row { display: flex; align-items: center; gap: 8px; } /* Hide tertiary 'View details' buttons on catalog cards, allow partner/action buttons */ .card:not(.partner-card) .button { display: none; } .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); font-size: 12px; } /* Rating badges (F -> S) */ .rating-badge { font-weight: 900; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; background: #000; border: 1px solid rgba(0,0,0,0.6); } .rating-badge { /* match sold-badge style: semi-transparent dark background with white text */ background: rgba(0,0,0,0.7); color: var(--text); border: 1px solid rgba(255,255,255,0.04); box-shadow: none; } /* Positioning inside card, same as sold badge */ .card .rating-badge { position: absolute; right: 12px; top: 12px; z-index: 5; } .spacer { flex: 1; } /* Buy 1 Get 1 badges */ /* Inline badge used next to price/meta; subtle black/white theme matching site */ /* Buy1 badges removed: buy1 offers are now shown by replacing the rating badge text */ /* Helpers */ .hidden { display: none !important; } /* Price styles */ .price { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13px; } /* Card price as button */ .price-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(238,240,242,0.04); border: 1px solid transparent; color: var(--text); font-weight: 700; font-size: 13px; } /* Sale price UI */ .price-old { text-decoration: line-through; opacity: .7; } .price-new { font-weight: 900; } .price-pill .price-old { font-size: 12px; } .price-pill .price-new { font-size: 14px; } /* Flat action button for catalog (secondary) */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-weight: 700; color: var(--text); background: transparent; border: 1px solid var(--primary); } .button:hover { opacity: .92; } /* Footer */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { display: flex; justify-content: center; padding: 18px; } .muted { color: var(--muted); } /* Breadcrumb */ .breadcrumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); } .breadcrumb:hover { color: var(--text); } /* Product page */ .product-header { display: flex; align-items: center; gap: 14px; margin: 20px 0 10px; } .product-title { font-size: clamp(24px, 3vw, 34px); margin: 0; letter-spacing: .2px; } .price { margin-left: 2px; } .product-grid { display: grid; align-items: start; gap: 28px; margin-top: 16px; grid-template-columns: 1.05fr .95fr; } .hero-media { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .hero-media img { width: 100%; height: auto; object-fit: cover; } .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } .thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: #0a0a0a; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .panel-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: .2px; } .panel h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: .2px; } .panel p { margin: 0 0 12px; color: var(--muted); line-height: 1.7; font-size: 15px; } .specs { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; } .specs li { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: transparent; border: 1px solid var(--border); border-radius: 12px; } .specs .label { color: var(--muted); } .specs .value { color: var(--text); font-weight: 600; } /* Primary buy button (flat) */ .buy-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; border-radius: 12px; font-weight: 800; color: #000; background: var(--primary); border: 1px solid var(--primary); cursor: pointer; } .buy-button:hover { opacity: .92; } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 1000; } .lightbox.open { display: flex; } .lightbox-dialog { position: relative; max-width: 96vw; max-height: 90vh; } .lightbox-img { max-width: 96vw; max-height: 86vh; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #000; } .lightbox-close, .lightbox-arrow { position: fixed; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; } .lightbox-close { top: 18px; right: 18px; } .lightbox-arrow.left { left: 18px; top: 50%; transform: translateY(-50%); } .lightbox-arrow.right { right: 18px; top: 50%; transform: translateY(-50%); } .lightbox-close:hover, .lightbox-arrow:hover { opacity: .92; } /* Testimonials */ .testimonials { padding: 16px 0 28px; } .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; grid-auto-rows: auto; } .t-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel); color: var(--text); display: flex; flex-direction: row; align-items: baseline; gap: 8px; height: auto; text-align: left; } .t-name { font-weight: 900; font-size: 14px; color: var(--text); } .t-name::after { content: " - "; opacity: .9; } .t-quote { color: var(--text); line-height: 1.6; font-size: 14px; display: inline; overflow: visible; } /* Testimonials container to match changelog */ .tlog { display: contents; } .tlog-header { display: block; margin-bottom: 0; } .tlog-title-wrap { display: block; gap: 0; } .tlog-title { margin: 0; font-size: 16px; font-weight: 900; } .tlog-sub { margin: 0 0 12px 0; color: var(--muted); font-size: 13px; } /* Updates */ .updates { padding: 16px 0 28px; } .updates-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .u-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--panel); color: var(--text); display: flex; flex-direction: column; gap: 6px; } .u-title { margin: 0; font-weight: 900; font-size: 16px; color: var(--text); } .u-meta { margin: 0; color: var(--muted); font-size: 12px; } .u-body { margin: 0; color: var(--text); font-size: 14px; line-height: 1.7; white-space: pre-wrap; } /* Updates (Changelog) */ .updates { padding: 16px 0 28px; } .changelog { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px; } .cl-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cl-left { display: flex; align-items: center; gap: 12px; } .cl-icon { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--text); } .cl-title-wrap { display: flex; flex-direction: column; gap: 4px; } .cl-title { margin: 0; font-size: 16px; font-weight: 900; } .cl-sub { margin: 0; color: var(--muted); font-size: 13px; } .cl-list { display: grid; grid-template-columns: 1fr; gap: 6px; } .cl-entry { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; } .cl-entry-head { padding: 10px 12px; border-bottom: 1px solid var(--border); } .cl-entry-title { margin: 0; font-size: 16px; font-weight: 800; } .cl-entry-small { margin: 0; color: var(--muted); font-size: 13px; margin-top: 4px; } .cl-entry-body { padding: 10px 12px; color: var(--text); line-height: 1.6; font-size: 14px; white-space: pre-wrap; } .cl-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; } .u-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--primary); color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } /* Tweak list styles inside changelog-style entries */ .cl-entry-body ul, .cl-entry-body ol { margin: 0; padding-left: 14px; } .cl-entry-body li { margin: 4px 0; } .cl-entry-body ul li { line-height: 1.35; } /* Powered By */ .powered { padding: 16px 0 28px; } .pv-card { position: relative; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--panel); min-height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; } .pv-bg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .18; filter: grayscale(15%); } .pv-overlay { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 50%, rgba(20,20,20,0.06), rgba(20,20,20,0.18)); } .pv-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; } .pv-kicker { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--primary); color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: transparent; } .pv-title { margin: 0; color: var(--text); font-weight: 900; font-size: clamp(18px, 3.2vw, 28px); } /* Header stats */ .stats { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--primary); border-radius: 12px; padding: 10px 14px; background: transparent; } .stat-num { color: var(--text); font-weight: 900; font-size: clamp(18px, 3.2vw, 26px); } .stat-label { color: var(--text); opacity: .85; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; } /* Media card (looping gif) */ .media-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--panel); aspect-ratio: 16/9; display: block; } .media-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Footer links */ .footer-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px; } .footer-links { display: flex; gap: 12px; } .footer-link { color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px; } .footer-link:hover { color: var(--text); border-color: #2a2a2a; } /* Responsive */ @media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } .product-grid { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 680px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .container { padding: 24px 18px; } .intro { padding: 24px 0 6px; } .card-body { padding: 14px; gap: 10px; } .thumbs { grid-template-columns: repeat(3, 1fr); gap: 10px; } .lightbox-img { max-width: 94vw; max-height: 78vh; } } @media (max-width: 480px) { .grid { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 980px) { .featured-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } .updates-grid, .cl-list { grid-template-columns: 1fr; } } @media (max-width: 560px) { .testimonials-grid { grid-template-columns: 1fr; } .updates-grid { grid-template-columns: 1fr; } } /* Section header (for catalog title) */ .section-head { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 10px; } .section-title { margin: 0; font-size: clamp(22px, 3.2vw, 32px); font-weight: 900; letter-spacing: .2px; } .section-sub { margin: 0; color: var(--muted); max-width: 70ch; } /* Loading overlay */ .loading-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; /* use theme background + dot grid */ background-color: var(--bg); background-image: radial-gradient(rgba(255,255,255,var(--dot-grid-opacity)) 2px, transparent 2px); background-size: var(--dot-grid-size) var(--dot-grid-size); background-attachment: fixed; background-repeat: repeat; z-index: 9999; } .loading-card { width: 420px; max-width: calc(100% - 48px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; color: var(--text); } .loading-logo { font-weight: 900; font-size: 18px; text-align: center; color: var(--text); } .loading-text { color: var(--muted); text-align: center; font-size: 14px; } .loading-bar { height: 12px; border-radius: 8px; background: rgba(255,255,255,0.03); overflow: hidden; border: 1px solid rgba(255,255,255,0.04); } .loading-progress { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); transition: width 220ms ease; } .loading-meta { text-align: center; color: var(--muted); font-size: 13px; } @media (max-width: 480px) { .loading-card { width: calc(100% - 32px); padding: 14px; } } /* Keep text inputs/selects using native text cursor */ input, textarea, select, .input { cursor: text !important; } /* Click-to-spray salt removed */ /* Dangly custom cursor */ #dangly-cursor { position: fixed; left: 0; top: 0; width: 32px; height: 32px; pointer-events: none; transform-origin: 50% 50%; display: block; z-index: 99999; } #dangly-cursor img { width: 32px; height: 32px; display: block; } /* Force native cursors off for interactive elements so our custom cursor is always used */ a, button, .nav-btn, .nav-link, .footer-link, .buy-button, .button, .slide-arrow, .lightbox-close, .lightbox-arrow, .card, .card * { cursor: none !important; } /* Orders chart styles */ .orders-chart-panel { padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); min-height: 140px; } /* Let Chart.js size the canvas responsively; avoid forcing CSS height on the canvas */ #ordersChart { width: 100%; max-width: 100%; display: block; }