/* ════════════════════════════════════════════════════════════════════════ Aurigrade — DESIGN TOKENS (single source of truth / style guide) ──────────────────────────────────────────────────────────────────────── This :root is THE canonical palette. lite.css loads on every page (incl. the viewer, via base.html), so viewer.css references these instead of redefining them — change a value HERE and it updates everywhere. Visual hierarchy rule: • --accent (bright gold) = INTERACTIVE ONLY. Buttons, active states, the mine dropdown, map toggles — anything you click. It's tuned to DOMINATE the eye. To retune the whole app's interactive colour, change --accent on THIS line. • Content/data never uses --accent. Grade uses grade_colors.js; commodity uses --commodity; everything else is the neutral text/greys below. ════════════════════════════════════════════════════════════════════════ */ :root { --bg: #0a0a0a; --bg-panel: #0b0b0b; --bg-bar: #0c0c0c; --bg-card: #0d0d0d; --bg-input: #141414; --bg-raised: #161616; --hair: #161616; --hair-bar: #1c1c1c; --border: #2a2a2a; --text: #ece8e1; --text-val: #cfc9bf; --text-muted: #8a847a; --text-mono-mut: #6f6a61; --text-dim: #5c5851; --accent: #fbc23a; /* ★ INTERACTIVE gold — bright, dominates the eye. Change here to retune. */ --accent-soft: rgba(251, 194, 58, 0.14); /* tinted fill for interactive-at-rest (dropdowns, chips) */ --accent-dim: #b0821f; /* pressed / secondary-hover gold */ --accent-quiet: rgba(251, 194, 58, 0.42); /* damp gold — quiet accents on CONTENT (e.g. Key Findings) */ --commodity: #f5c518; --pos: #8bc34a; --error: #e05c4a; --success: #8bc34a; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'IBM Plex Sans', system-ui, sans-serif; --bg-hover: #1e1e1e; --border-2: #242424; --border-3: #333333; --text-dim2: #4f4b44; --text-strong: #ffffff; } /* ════════════════════════════════════════════════════════════════════════ LIGHT THEME — the global light-mode style area ──────────────────────────────────────────────────────────────────────── Everything that makes the app look different in light mode lives HERE, under . Dark is the default (:root above); light overrides only the tokens below, so every surface re-themes from one place (the 3D/map scene is the sole exception — it stays dark, hardcoded in viewer.css/JS). Two deliberate identity choices (chef, 2026-07-27): • The page is PURE WHITE, not cream — surfaces are white, lines are neutral cool-greys (not warm), so nothing reads as beige. • The interactive accent is the LOGO BLUE (#3f68ac, the logo's sky-blue bar), NOT gold. Gold stays the dark-mode accent; blue is light mode's. #3f68ac is ~5.5:1 on white, so links/buttons stay legible. ════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* surfaces — white page + white chrome; separation comes from the lines below */ --bg: #ffffff; --bg-panel: #ffffff; --bg-bar: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --bg-raised: #f1f3f7; --bg-hover: #e8ecf3; /* lines — neutral, faintly cool greys (no cream) */ --hair: #eef0f3; --hair-bar: #e4e7ec; --border: #d6dae1; --border-2: #e7eaef; --border-3: #c7ccd6; /* text — near-black, neutral */ --text: #1a1c22; --text-val: #363a44; --text-muted: #626873; --text-mono-mut: #767c88; --text-dim: #8b919d; --text-dim2: #a6acb7; --text-strong: #0f1117; /* ★ interactive = LOGO BLUE (light mode's answer to dark-mode gold) */ --accent: #3f68ac; --accent-soft: rgba(63,104,172,0.12); --accent-dim: #2f4f86; --accent-quiet: rgba(63,104,172,0.55); /* commodity stays a metal-gold (it names the metal, not an action → not the accent) */ --commodity: #a9781a; --pos: #2e7d32; --error: #c0392b; --success: #2e7d32; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } .mono { font-family: var(--mono); } /* ── Nav (matches the viewer's topnav) ───────────────────────── */ .nav-bar { display: flex; align-items: center; gap: 22px; height: 50px; padding: 0 18px; background: var(--bg-bar); border-bottom: 1px solid var(--hair-bar); } .nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); } .nav-brand .diamond { color: var(--accent); font-size: 15px; } .nav-brand .name { font-weight: 600; letter-spacing: 0.16em; font-size: 13px; } /* Aurigrade mark in the nav — the stacked-bars logo. Fixed gold/blue (reads on both themes); the wordmark next to it inherits --text so it flips with the theme. */ .brand-mark { height: 28px; width: auto; display: block; flex: none; } .nav-links { display: flex; gap: 22px; } .nav-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; padding: 15px 0 13px; border-bottom: 2px solid transparent; } .nav-links a:hover { color: var(--text-strong); } .nav-links a.active { color: var(--text-strong); border-bottom-color: var(--accent); } .nav-bar .spacer { flex: 1; } .nav-auth { display: flex; align-items: center; gap: 14px; } .nav-user { font-size: 12px; color: var(--text-val); font-weight: 500; } .nav-auth-link { font-size: 12px; color: var(--text-muted); text-decoration: none; } .nav-auth-link:hover { color: var(--accent); } /* ── Container / footer ──────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem 18px; flex: 1; } .site-footer { border-top: 1px solid var(--hair-bar); padding: 14px 18px; font-size: 11px; color: var(--text-dim); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; } .site-footer .f-brand { color: var(--text-muted); letter-spacing: 0.1em; font-weight: 600; } /* ── Flash messages ──────────────────────────────────────────── */ .flash { padding: 0.7rem 1rem; border-radius: 7px; margin-bottom: 1rem; font-size: 0.85rem; border: 1px solid var(--border); background: var(--bg-card); } .flash-error { border-color: #4a2620; color: var(--error); } .flash-success { border-color: #2c3a1c; color: var(--success); } .flash-info { border-color: #22303f; color: #7aa7cc; } /* ── Hero ────────────────────────────────────────────────────── */ .hero, .home-hero { text-align: center; padding: 4.5rem 1rem 2rem; } .hero h1, .home-hero h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.45rem; } .hero-sub, .home-hero p { color: var(--text-muted); font-size: 1rem; margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; justify-content: center; } .hero-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 0.9rem; } /* ── Home search ─────────────────────────────────────────────── */ .search-wrap { max-width: 560px; margin: 0 auto; position: relative; } #home-search { width: 100%; padding: 0.95rem 1.1rem; font-size: 1.05rem; font-family: var(--sans); background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); } #home-search::placeholder { color: var(--text-dim); } #home-search:focus { border-color: var(--accent); outline: none; } .search-hint { color: var(--text-dim); font-size: 0.75rem; margin-top: 0.55rem; font-family: var(--mono); } .search-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; z-index: 50; display: none; text-align: left; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .search-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1rem; cursor: pointer; } .search-row:hover, .search-row.active { background: var(--bg-raised); } .search-row .tk { color: var(--text); font-weight: 600; font-family: var(--mono); } .search-row .nm { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.6rem; } .search-row .badge { font-size: 0.66rem; padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-family: var(--mono); } .badge-data { background: rgba(139, 195, 74, 0.07); border: 1px solid #2c3a1c; color: var(--pos); } .badge-gen { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); } /* ── Shared header quick-search ────────────────────────────────── The top-nav search on EVERY page + the viewer's own top-nav, one component so it stays uniform (markup: `.hdr-search`; behaviour: header_search.js). Ported from the viewer's original search so the look is identical. */ .hdr-search { position: relative; } .hdr-search input { width: 210px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 12.5px; padding: 5px 10px 5px 28px; font-family: var(--sans); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a847a' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 9px center; } .hdr-search input::placeholder { color: var(--text-dim); } .hdr-search input:focus { border-color: var(--accent); outline: none; } .hdr-search-results { position: absolute; left: 0; top: calc(100% + 5px); min-width: 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; z-index: 1300; display: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); } .hdr-sr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 11px; cursor: pointer; } .hdr-sr-row:hover, .hdr-sr-row.active { background: var(--bg-raised); } .hdr-sr-tk { font-family: var(--mono); color: var(--text); font-weight: 600; font-size: 12px; } .hdr-sr-nm { color: var(--text-muted); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hdr-sr-badge { font-size: 9px; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); white-space: nowrap; } .hdr-sr-badge.on { background: rgba(139, 195, 74, 0.07); border: 1px solid #2c3a1c; color: var(--pos); } .hdr-sr-badge.off { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); } .hdr-sr-empty { padding: 8px 11px; color: var(--text-dim); font-size: 11px; } /* nav-bar instance: keep it from crowding the links; drop it on small screens */ .nav-hdr-search input { width: 200px; } @media (max-width: 760px) { .nav-hdr-search { display: none; } } /* ── Contact page cards ──────────────────────────────────────── */ .contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.6rem 0 0.5rem; } .contact-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--hair-bar); border-radius: 9px; padding: 1rem 1.1rem; text-decoration: none; transition: border-color 0.15s, transform 0.15s; } .contact-card:hover { border-color: var(--accent); transform: translateY(-2px); } .contact-card-h { color: var(--text); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; } .contact-card p { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; margin: 0 0 0.7rem; } .contact-card-cta { color: var(--accent); font-size: 0.78rem; font-family: var(--mono); margin-top: auto; } /* ══════════════════════════════════════════════════════════════ Landing page ══════════════════════════════════════════════════════════════ */ .lp { max-width: 1080px; margin: 0 auto; } .lp-hero { text-align: center; padding: 4rem 1rem 3rem; } .lp-hero h1 { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); margin: 0 0 1rem; } .lp-sub { max-width: 620px; margin: 0 auto 2rem; color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; } .lp-hero .search-wrap { max-width: 560px; } /* Feature rows */ .lp-feat { display: flex; flex-direction: column; gap: 2.5rem; margin: 2rem 0 3.5rem; } .lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; text-decoration: none; padding: 1.4rem; border: 1px solid transparent; border-radius: 14px; transition: border-color .15s, background .15s; } .lp-row:hover { border-color: var(--hair-bar); background: rgba(255,255,255,.012); } .lp-row.reverse .lp-txt { order: 2; } .lp-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; } .lp-txt h2 { font-size: 1.5rem; font-weight: 600; color: var(--text); line-height: 1.2; margin: 0 0 0.7rem; } .lp-txt p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; margin: 0 0 1rem; } .lp-link { font-size: 0.88rem; color: var(--accent); font-weight: 500; } .lp-row:hover .lp-link { text-decoration: underline; } .lp-img img { width: 100%; display: block; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); cursor: zoom-in; } .lp-row:hover .lp-img img { border-color: var(--accent-dim); } a.lp-link { text-decoration: none; } /* hero brand lockup — theme-aware pair, only one shows (2026-07-19) */ .lp-logo { height: 120px; margin: 0 auto 1.8rem; display: none; } :root:not([data-theme="light"]) .lp-logo-dark { display: block; } :root[data-theme="light"] .lp-logo-light { display: block; } /* screenshot lightbox — click a feature image to view full screen */ .lp-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; cursor: zoom-out; padding: 2vh 2vw; } .lp-lightbox.open { display: flex; } .lp-lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 30px 90px rgba(0,0,0,.7); } .lp-ready { margin: 1rem 0 2.5rem; } .lp-ready .lead { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); text-align: center; margin-bottom: 1rem; } .lp-trust { text-align: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--hair-bar); padding: 2rem 1rem 1rem; margin-top: 1rem; } .lp-trust b { color: var(--text-val); } @media (max-width: 760px) { .lp-hero { padding: 2.5rem 1rem 1.5rem; } .lp-hero h1 { font-size: 1.8rem; } .lp-hero h1 br { display: none; } .lp-row, .lp-row.reverse { grid-template-columns: 1fr; gap: 1.2rem; padding: 0.5rem 0; } .lp-row.reverse .lp-txt { order: 0; } /* text above image on mobile */ .lp-row.reverse .lp-img { order: 1; } .lp-feat { gap: 2rem; } } /* ── Featured deposit cards (home + stocks) ──────────────────── */ .home-featured { max-width: 940px; margin: 2.5rem auto 0; } .home-featured .lead { color: var(--text-dim); font-size: 11px; text-align: center; margin-bottom: 0.9rem; font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .featured-section { margin-bottom: 2.2rem; } .featured-title { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.2rem; } .featured-sub { color: var(--text-dim); font-size: 0.78rem; margin-bottom: 0.9rem; } .featured-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; } .drill-card { display: block; background: var(--bg-card); border: 1px solid var(--hair-bar); border-radius: 9px; padding: 0.9rem 1rem; text-decoration: none; transition: border-color 0.15s, transform 0.15s; } .drill-card:hover { border-color: var(--accent); transform: translateY(-2px); } .drill-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .drill-card-ticker { color: var(--text); font-weight: 600; font-size: 1.05rem; font-family: var(--mono); } /* flat commodity label — NOT a gold-shaded pill (style guide §3: commodity chips are flat text). The hardcoded gold box didn't retheme, so it read as stray gold in light. */ .drill-card-commodity { font-size: 10px; color: var(--commodity); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .drill-card-project { color: var(--text-val); font-size: 0.82rem; margin: 0.35rem 0 0.15rem; } .drill-card-stats { color: var(--text-muted); font-size: 0.72rem; font-family: var(--mono); } .drill-card-best { color: var(--pos); font-size: 0.76rem; margin-top: 0.45rem; font-family: var(--mono); } .drill-card-cta { color: var(--accent); font-size: 0.76rem; margin-top: 0.55rem; } /* ── Stocks page: search hero + latest-activity announcement cards ──── */ .stk-hero { text-align: center; padding: 2.6rem 1rem 2.4rem; } .stk-hero .lp-logo { height: 64px; margin: 0 auto 0.9rem; } .stk-hero-tag { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.4rem; letter-spacing: 0.01em; } .stk-hero .search-wrap { max-width: 560px; } .stk-hero .search-hint { text-align: center; } .ann-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; } .ann-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--hair-bar); border-radius: 9px; padding: 0.95rem 1rem; text-decoration: none; min-height: 150px; transition: border-color 0.15s, transform 0.15s; } .ann-card:hover { border-color: var(--accent); transform: translateY(-2px); } .ann-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ann-card-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ann-card-ticker { color: var(--text); font-weight: 600; font-size: 1.05rem; font-family: var(--mono); } .ann-card-name { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* flat commodity label (see .drill-card-commodity) — no gold box */ .ann-card-commodity { font-size: 10px; color: var(--commodity); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; flex: 0 0 auto; } /* market row — mono 'instrument' data. price/change fill in client-side. */ .ann-card-quote { display: flex; align-items: baseline; gap: 10px; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.82rem; min-height: 1.1em; } .ann-card-quote .q-price { color: var(--text); font-weight: 600; } .ann-card-quote .q-change.up { color: var(--pos); } .ann-card-quote .q-change.down { color: var(--error); } .ann-card-quote .q-cap { color: var(--text-dim); margin-left: auto; } /* the announcement snapshot — the reason the card exists; clamp to 2 lines */ .ann-card-headline { color: var(--text-val); font-size: 0.85rem; line-height: 1.35; margin: 0.6rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* best hit OF this announcement (green = a genuine positive, per style guide §1) */ .ann-card-best { color: var(--pos); font-size: 0.76rem; font-family: var(--mono); margin-top: 0.45rem; } .ann-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 0.6rem; } /* date is content, not interactive → never gold (style guide §1); the gold hover border is what signals the whole card is clickable */ .ann-card-date { color: var(--text-muted); font-size: 0.72rem; font-family: var(--mono); } .ann-card-holes { color: var(--text-dim); font-size: 0.72rem; font-family: var(--mono); } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 7px; text-decoration: none; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-primary:hover { background: #d7ba82; border-color: #d7ba82; } .btn-secondary { background: transparent; color: var(--text-val); border-color: var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-full { width: 100%; text-align: center; } /* 3D link chip in the stocks table */ .btn-3d { display: inline-block; padding: 3px 10px; background: rgba(200, 169, 110, 0.08); color: var(--accent); border: 1px solid #4a4535; border-radius: 5px; text-decoration: none; font-size: 11px; font-weight: 600; font-family: var(--mono); } .btn-3d:hover { background: rgba(200, 169, 110, 0.16); border-color: var(--accent); } /* ── Login modal (in-page, dismissible) ──────────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(2px); } /* The login/create modal stacks ABOVE the generate modal (it opens on top of it). */ #login-modal { z-index: 9600; } /* The generate pop-up reuses the nodata-card look; center it, cap its height. */ #gen-modal .nodata-card { margin: 0; max-height: 88vh; overflow-y: auto; } .modal-card { position: relative; width: 100%; max-width: 360px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem 1.5rem; box-shadow: 0 24px 70px rgba(0,0,0,.6); } .modal-card h3 { color: var(--text); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; } .modal-sub { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin-bottom: 1rem; } .modal-card .form-input { margin-bottom: 0.7rem; } .modal-card .btn { margin-top: 0.3rem; } .modal-x { position: absolute; top: 0.7rem; right: 0.8rem; background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; line-height: 1; } .modal-x:hover { color: var(--text); } .modal-err { background: rgba(224,92,74,.08); border: 1px solid #4a2620; color: var(--error); font-size: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 6px; margin-bottom: 0.8rem; } .modal-alt { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.9rem; } .modal-alt a { color: var(--accent); } /* ── Auth forms ──────────────────────────────────────────────── */ .auth-form { max-width: 400px; margin: 3.5rem auto; background: var(--bg-panel); border: 1px solid var(--hair-bar); border-radius: 10px; padding: 2rem; } .auth-form h2 { color: var(--text); font-size: 1.15rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 0.35rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .form-input { width: 100%; padding: 0.6rem 0.8rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: var(--sans); font-size: 0.9rem; } .form-input::placeholder { color: var(--text-dim); } .form-input:focus { outline: none; border-color: var(--accent); } .form-error { color: var(--error); font-size: 0.78rem; display: block; margin-top: 0.25rem; } .auth-link { text-align: center; margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); } .auth-link a { color: var(--accent); } /* ── Controls bar + tables ───────────────────────────────────── */ .controls-bar { display: flex; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; } .controls-bar .form-input { width: auto; min-width: 220px; } .checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; } .checkbox-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } .table-wrap { overflow-x: auto; border: 1px solid var(--hair-bar); border-radius: 9px; background: var(--bg-panel); } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--hair); } th { font-family: var(--mono); color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; background: var(--bg); position: sticky; top: 0; } th.sort-asc, th.sort-desc { color: var(--accent); } th.sort-asc::after { content: ' ▲'; font-size: 0.6rem; } th.sort-desc::after { content: ' ▼'; font-size: 0.6rem; } td { color: var(--text-val); } td .tk { font-family: var(--mono); font-weight: 600; color: var(--text); } td.num { font-family: var(--mono); } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--bg-raised); } .signal-edge { color: var(--success); } .signal-none { color: var(--text-muted); } /* ── Loading ─────────────────────────────────────────────────── */ .loading-spinner { text-align: center; padding: 2rem; color: var(--text-muted); font-family: var(--mono); font-size: 0.8rem; } /* ── Cross-section lightbox (fullscreen — used by the viewer) ── */ .lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; } .lightbox img { max-width: 96vw; max-height: 88vh; object-fit: contain; border: 1px solid var(--border-3); border-radius: 6px; cursor: default; } .lightbox-caption { color: var(--accent); font-size: 0.85rem; margin-top: 0.8rem; } .lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: var(--bg-raised); border: 1px solid var(--border-3); color: var(--text); font-size: 1.3rem; width: 40px; height: 40px; border-radius: 6px; cursor: pointer; } .lightbox-close:hover { border-color: var(--accent); color: var(--accent); } .sections-grid img { transition: border-color 0.15s; } /* ── Deposit scorecard (viewer base — restyled by viewer.css) ── */ .scorecard { background: var(--bg-card); border: 1px solid var(--hair-bar); border-left: 3px solid var(--accent); border-radius: 8px; padding: 1.1rem 1.3rem; margin: 0.5rem 0 1.4rem; } .sc-verdict { color: var(--text-val); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.8rem; } .sc-stats { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .sc-stat { display: flex; flex-direction: column; } .sc-stat b { color: var(--text); font-size: 1.15rem; font-family: var(--mono); font-weight: 500; } .sc-stat span { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .sc-stat.sc-best b { color: var(--commodity); font-size: 1rem; } .sc-tierbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bg-raised); margin-bottom: 0.5rem; } .sc-tierbar span { display: block; height: 100%; } .sc-legend { display: flex; gap: 1rem; flex-wrap: wrap; } .sc-chip { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; } .sc-chip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* ── Section headings (viewer base) ──────────────────────────── */ .section-head { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin: 1.8rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--hair-bar); display: flex; align-items: center; gap: 0.5rem; } .section-head .count-pill { font-family: var(--mono); font-size: 0.62rem; color: var(--text-muted); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; letter-spacing: 0; text-transform: none; } /* ── Deposit toggle (viewer base) ────────────────────────────── */ .deposit-toggle { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hair); } .deposit-tab { padding: 0.4rem 0.9rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-family: var(--sans); font-size: 0.82rem; transition: all 0.15s; white-space: nowrap; } .deposit-tab:hover { border-color: var(--accent-dim); color: var(--text); } .deposit-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; } .deposit-tab .tab-sub { font-size: 0.68rem; opacity: 0.7; } /* ── All-mines overview cards (viewer base) ──────────────────── */ .deposit-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .deposit-card { background: var(--bg-card); border: 1px solid var(--hair-bar); border-radius: 9px; padding: 1.1rem; cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .deposit-card:hover { border-color: var(--accent); transform: translateY(-2px); } .deposit-card h4 { color: var(--text); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; } .deposit-card .dc-callout { font-family: var(--mono); font-size: 0.9rem; color: var(--commodity); font-weight: 600; margin: 0.4rem 0; } .deposit-card .dc-meta { font-size: 0.76rem; color: var(--text-muted); } /* ── Stats grid (viewer base) ────────────────────────────────── */ .stats-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: 0.5rem 0 1rem; } .stat-box { background: var(--bg-card); border: 1px solid var(--hair-bar); border-radius: 7px; padding: 0.7rem 0.8rem; } .stat-box .sb-val { color: var(--text-val); font-family: var(--mono); font-size: 1.2rem; font-weight: 500; } .stat-box .sb-label { font-size: 0.66rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; } /* ── Significant intercepts table (viewer base) ──────────────── */ .intercept-table td.callout-cell { font-family: var(--mono); font-weight: 600; color: var(--commodity); white-space: nowrap; } .intercept-table tr { cursor: pointer; } .intercept-table tr.is-best td { background: #16140a; } .grade-pill { display: inline-block; min-width: 2.5rem; text-align: center; padding: 1px 7px; border-radius: 4px; font-size: 0.78rem; font-family: var(--mono); font-weight: 600; color: var(--bg); } .src-tag { font-family: var(--mono); font-size: 0.64rem; padding: 1px 6px; border-radius: 4px; border: 1px solid; letter-spacing: 0.02em; } .src-asx { color: #ff8c00; border-color: #5a3300; background: #1a1000; } .src-wamex { color: #00bcd4; border-color: #00444c; background: #001416; } .table-expand { margin-top: 0.6rem; font-size: 0.78rem; color: var(--accent); background: none; border: none; cursor: pointer; font-family: var(--sans); } .table-expand:hover { text-decoration: underline; } /* ── "How to read" helper (viewer base) ──────────────────────── */ .helper-box { background: var(--bg-card); border: 1px solid var(--hair-bar); border-left: 3px solid var(--accent); border-radius: 7px; padding: 0.9rem 1.1rem; margin: 0.5rem 0 1.2rem; } .helper-box summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; list-style: none; outline: none; } .helper-box summary::-webkit-details-marker { display: none; } .helper-box summary::before { content: 'ⓘ '; } .helper-box[open] summary { margin-bottom: 0.6rem; } .helper-box p { font-size: 0.8rem; color: var(--text-muted); margin: 0.4rem 0; line-height: 1.6; } .helper-box code { background: var(--bg-raised); padding: 1px 5px; border-radius: 3px; color: var(--commodity); font-family: var(--mono); } .helper-box .warn { color: #e0a030; } .caveat-note { font-size: 0.72rem; color: var(--text-dim); font-style: italic; margin-top: 0.4rem; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .container { padding: 1rem; } .hero, .home-hero { padding: 2.5rem 1rem 1.5rem; } .hero h1, .home-hero h1 { font-size: 1.5rem; } .controls-bar { flex-direction: column; align-items: stretch; } .controls-bar .form-input { width: 100%; min-width: 0; } .nav-links { gap: 14px; } .stats-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } /* ── Trust / content pages (FAQ · About · Glossary) ──────────────── */ .doc-page { max-width: 820px; margin: 0 auto; padding: 40px 22px 72px; } .doc-page .doc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-quiet); margin-bottom: 10px; } .doc-page h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .doc-page .doc-lead { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin-bottom: 8px; } .doc-page h2 { font-size: 17px; font-weight: 600; margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid var(--hair-bar); color: var(--text); } .doc-page h2:first-of-type { border-top: none; padding-top: 0; } .doc-page p, .doc-page li { color: var(--text-val); font-size: 14px; line-height: 1.7; } .doc-page p { margin: 8px 0; } .doc-page ul { margin: 8px 0 8px 20px; } .doc-page li { margin: 5px 0; } .doc-page a { color: var(--accent); text-decoration: none; } .doc-page a:hover { text-decoration: underline; } .doc-page strong { color: var(--text); font-weight: 600; } .doc-page .doc-note { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-quiet); border-radius: 7px; padding: 14px 16px; margin: 18px 0; font-size: 13.5px; color: var(--text-muted); } .doc-page .doc-note strong { color: var(--accent-quiet); } /* FAQ question blocks */ .faq-q { font-weight: 600; color: var(--text); font-size: 14.5px; margin: 26px 0 4px; } .faq-q:first-of-type { margin-top: 8px; } .faq-a { color: var(--text-val); font-size: 14px; line-height: 1.7; } /* Glossary term list */ .gloss dt { font-family: var(--mono); color: var(--accent); font-size: 13px; margin-top: 18px; font-weight: 600; } .gloss dd { color: var(--text-val); font-size: 14px; line-height: 1.65; margin: 3px 0 0; } /* Footer trust links */ .site-footer .f-links { display: flex; gap: 14px; flex-wrap: wrap; } .site-footer .f-links a { color: var(--text-dim); text-decoration: none; } .site-footer .f-links a:hover { color: var(--text-muted); } /* Floating "clear highlight" chip — dismiss any selection (also: click empty / Esc). Gold, matching the selection highlight on the map / 3D / sections (#ffce33 — the logo's bright-gold bar). Was magenta until 2026-07-14; "selected" is ONE colour across every view, so this chip must always track it. */ .sel-clear-chip { /* Centre in the VISIBLE stage, not the full width — shift the centre left by half the PDF overlay so the chip doesn't drift under it. --pdf-w is a px value (set by viewer_shell). */ position: absolute; bottom: 16px; left: calc(50% - var(--pdf-w, 0px) / 2); transform: translateX(-50%); z-index: 1250; background: rgba(26, 20, 6, 0.92); color: #ffce33; border: 1px solid #ffce33; border-radius: 20px; padding: 5px 13px; font: 600 12px var(--mono); letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } .sel-clear-chip:hover { background: #ffce33; color: #1a1406; } /* ── "No data yet · Generate" viewer state ───────────────────────── */ .nodata-wrap { display: flex; align-items: center; justify-content: center; min-height: 62vh; padding: 32px 20px; } .nodata-card { width: 100%; max-width: 460px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 34px 30px 30px; } .nodata-card .nd-tk { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } .nodata-card .nd-ax { color: var(--text-dim); font-size: 18px; } .nodata-card .nd-name { color: var(--text); font-size: 15px; margin-top: 2px; } .nodata-card .nd-lead { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 16px 0 20px; } .nodata-card .nd-generate { font-size: 15px; padding: 11px 22px; } .nodata-card .nd-est { display: flex; gap: 10px; justify-content: center; margin: 20px 0 6px; } .nd-est-row { flex: 1; max-width: 170px; background: var(--bg-raised); border: 1px solid var(--hair-bar); border-radius: 9px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } .nd-est-row b { color: var(--accent); font-family: var(--mono); font-size: 15px; } .nd-est-row span { color: var(--text-muted); font-size: 11.5px; line-height: 1.3; } .nodata-card .nd-fine { color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin-top: 14px; } .nodata-card .nd-back { margin-top: 18px; display: inline-block; text-decoration: none; color: var(--text-muted); border: 1px solid var(--border); background: var(--bg-raised); border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 500; } .nodata-card .nd-back:hover { color: var(--text); border-color: var(--accent); } /* Stepper */ .nd-stepper { margin-top: 22px; text-align: left; border-top: 1px solid var(--hair-bar); padding-top: 18px; } .nd-step { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--text-dim); font-size: 13px; } .nd-step i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); flex: none; transition: all 0.2s; } .nd-step.active { color: var(--text); } .nd-step.active i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: nd-pulse 1.2s infinite; } .nd-step.done { color: var(--text-val); } .nd-step.done i { background: var(--accent); border-color: var(--accent); } @keyframes nd-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px transparent; } } .nd-msg { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); } .nd-msg a { color: var(--accent); } .nd-stepper.nd-infeasible .nd-step.active i { border-color: var(--text-dim); box-shadow: none; animation: none; } .nd-err { margin-top: 14px; color: var(--error); font-size: 12.5px; } /* Header-search "no data yet" badge */ .vw-sr-badge { margin-left: auto; font-size: 9.5px; font-family: var(--mono); padding: 1px 6px; border-radius: 8px; letter-spacing: 0.03em; } .vw-sr-badge.on { color: var(--accent); background: var(--accent-soft); } .vw-sr-badge.off { color: var(--text-dim); background: var(--bg-raised); } /* ── Theme toggle button (nav) ───────────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }