:root { --bg-0: #05070a; --bg-1: #0a0f16; --bg-2: #0f1620; --panel: rgba(16, 24, 34, 0.72); --panel-border: rgba(103, 214, 255, 0.25); --cyan: #5fe3ff; --cyan-dim: #2b8ba8; --amber: #ffb454; --danger: #ff5f6d; --ok: #6dffb0; --text: #dbe9f0; --text-dim: #8fa4b3; --text-faint: #5b6b78; /* Base/value/body-copy text tone (dossier stat values, description prose) -- kept distinct from --text (still used for titles/badges/ chips) so only the actual readable content picks up this tint, not headings. Same color as --cyan-dim (the darker blue already used for .entry-subtitle, right under an entry's own title) on request, rather than the lighter blue this used to be -- one consistent "body copy" blue instead of two different ones. */ --text-blue: #2b8ba8; --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --sans: "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } /* ---------- scrollbars: match the dark cyan theme everywhere (page, dossier columns, log/glossary panels, etc.) instead of the browser's default grey/white ---------- */ :root { scrollbar-color: var(--cyan-dim) rgba(255,255,255,0.05); scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); } *::-webkit-scrollbar-thumb { background: var(--cyan-dim); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--cyan); } *::-webkit-scrollbar-corner { background: transparent; } html, body { margin: 0; padding: 0; background: radial-gradient(ellipse at 50% -10%, #10202b 0%, var(--bg-0) 55%, #020304 100%); color: var(--text); font-family: var(--sans); min-height: 100vh; overscroll-behavior-y: none; } /* Installed-as-app (PWA standalone) on iOS: overscrolling past the top/ bottom normally reveals the native WKWebView background (plain white) behind the page during the elastic "rubber-band" bounce, since the bounce goes past the whole HTML document's own bounds. Making a fixed, non-scrolling frame and the actual scrolling element keeps the bounce entirely inside body's own dark background instead -- the same trick used to kill this on installed iOS web apps generally. Harmless in the plain browser tab too (scrolling behaves identically). */ html { height: 100%; overflow: hidden; } body { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 999; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; } /* ---------- shared spinner ---------- A ring of small dots at fixed brightness (a "comet tail" gradient) that spins as one rigid body via a single transform: rotate animation -- real, smooth circular motion, nothing blinking on/off. Reused inline (via .content-loading below) whenever a not-yet-cached region/category is loading mid-session (see app.js), and (a separate copy, since admin.html is a standalone page with its own stylesheet) the Log tab's own live-activity indicator. There's no full-screen startup splash anymore -- the home grid only ever preloads small thumbnails now, fast enough that blocking the whole page behind one stopped being worth it. */ .log-spinner { position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: middle; } .log-spinner.hidden { display: none; } .log-spinner-ring { position: absolute; inset: 0; animation: spin-ring 1s linear infinite; } .log-spinner-ring i { position: absolute; top: 50%; left: 50%; width: 2.5px; height: 2.5px; margin: -1.25px 0 0 -1.25px; border-radius: 50%; background: var(--cyan); font-style: normal; } .log-spinner-ring i:nth-child(1) { transform: rotate(0deg) translateY(-8px); opacity: 1; } .log-spinner-ring i:nth-child(2) { transform: rotate(45deg) translateY(-8px); opacity: 0.82; } .log-spinner-ring i:nth-child(3) { transform: rotate(90deg) translateY(-8px); opacity: 0.64; } .log-spinner-ring i:nth-child(4) { transform: rotate(135deg) translateY(-8px); opacity: 0.46; } .log-spinner-ring i:nth-child(5) { transform: rotate(180deg) translateY(-8px); opacity: 0.28; } .log-spinner-ring i:nth-child(6) { transform: rotate(225deg) translateY(-8px); opacity: 0.16; } .log-spinner-ring i:nth-child(7) { transform: rotate(270deg) translateY(-8px); opacity: 0.08; } .log-spinner-ring i:nth-child(8) { transform: rotate(315deg) translateY(-8px); opacity: 0.03; } @keyframes spin-ring { to { transform: rotate(360deg); } } /* Shown over the main content area the first time (this session) a region or category is opened and its images aren't preloaded yet -- see app.js's showContentLoading(). Not a full-screen takeover -- the app chrome (topbar/nav) stays visible and usable. */ .content-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 50vh; color: var(--text-faint); font-family: var(--mono); font-size: 0.85em; letter-spacing: 1px; } .content-loading .log-spinner { width: 28px; height: 28px; } .content-loading .log-spinner-ring i { width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 32px; /* gap, not just justify-content:space-between -- space-between alone only pushes the brand and the nav button group toward opposite edges when there's enough leftover room; once the nav's own button count (now six wide, with Delete/New Region/Settings) eats into that room, "Archive" could end up sitting right up against the logo with no gap at all. gap guarantees a floor on that spacing regardless of width. */ padding: 16px 28px; /* env(safe-area-inset-top) is 0 on any device with no notch/status-bar overlay (desktop included), so this is a no-op everywhere except an iPhone-style notched screen -- where, combined with index.html/ admin.html's own viewport-fit=cover meta tag, it nudges VISION ARCHIVE / Archive / Classification Codex / etc. down below the status bar instead of sitting flush against (or under) it. */ padding-top: calc(16px + env(safe-area-inset-top)); border-bottom: 1px solid var(--panel-border); background: linear-gradient(to bottom, rgba(10,18,26,0.9), rgba(10,18,26,0.4)); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 50; } .brand { display: flex; align-items: center; gap: 10px; letter-spacing: 3px; font-weight: 600; } .brand-mark { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); font-size: 1.1em; } a.brand-mark { text-decoration: none; cursor: pointer; } a.brand-mark:hover { text-shadow: 0 0 18px var(--cyan); } .brand-text { color: var(--text); font-size: 0.95em; } .topnav { display: flex; gap: 10px; } .nav-btn { background: rgba(20, 32, 44, 0.6); border: 1px solid var(--panel-border); color: var(--text-dim); padding: 9px 16px; font-family: var(--sans); font-size: 0.82em; letter-spacing: 0.5px; border-radius: 3px; cursor: pointer; transition: all 0.15s ease; } .nav-btn:hover, .nav-btn:focus-visible { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(95,227,255,0.25); outline: none; } .nav-btn.accent { color: var(--bg-0); background: var(--cyan); border-color: var(--cyan); font-weight: 600; } .nav-btn.accent:hover { box-shadow: 0 0 16px var(--cyan); } .nav-btn.danger { color: var(--danger); border-color: var(--danger); } .nav-btn.danger:hover { color: var(--bg-0); background: var(--danger); box-shadow: 0 0 16px var(--danger); } .nav-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; } .nav-btn.hidden { display: none; } main#app { padding: 28px 34px 80px; max-width: 1400px; margin: 0 auto; } .muted { color: var(--text-dim); font-size: 0.9em; line-height: 1.5; } .muted.small { font-size: 0.78em; color: var(--text-faint); margin-top: 14px; } /* ---------- home / archive grid ---------- */ .section-title { font-size: 0.78em; letter-spacing: 3px; color: var(--cyan-dim); text-transform: uppercase; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ""; flex: 1; height: 1px; background: var(--panel-border); } .hint-bar { font-size: 0.78em; color: var(--text-faint); margin-bottom: 22px; font-family: var(--mono); } .hint-bar kbd { background: rgba(255,255,255,0.06); border: 1px solid var(--panel-border); border-radius: 3px; padding: 1px 6px; color: var(--cyan); font-family: var(--mono); } .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .region-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; outline: none; } .region-card:hover, .region-card:focus { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 6px 24px rgba(95,227,255,0.18), 0 0 0 1px var(--cyan) inset; } /* Bulk-delete select mode (see toggleDeleteSelection() in app.js) -- every card dims very slightly so the SELECTED ones (full opacity, danger-red glow) read as clearly picked out of the set, rather than everything looking the same with just a small checkmark to notice. */ .region-card.delete-mode { opacity: 0.72; transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .region-card.delete-mode:hover { opacity: 0.9; transform: none; } .region-card.delete-mode.selected { opacity: 1; border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset, 0 0 16px rgba(255,90,90,0.25); } .card-viewport { /* aspect-ratio, not a fixed height -- a fixed 130px stayed constant while the grid's own card WIDTH shrank a lot more on a narrow mobile viewport (down to one column, close to full screen width) than it ever does on desktop, so the same object-fit:cover crop ended up cutting off far more of the image's top/bottom on mobile than on desktop for the exact same source picture. Tying height to width via aspect-ratio instead keeps the crop identical at every card width. */ aspect-ratio: 2 / 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-viewport::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px); } .card-viewport .glyph { font-size: 2.6em; opacity: 0.55; filter: drop-shadow(0 0 10px currentColor); } .card-viewport.has-image img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } /* Stands in for the favorite icon (top-right of the viewport) while delete-mode is active -- an empty ring, filled with a checkmark and the same danger red once that card is selected, same corner/overlay positioning .fav-icon--overlay already uses. */ .select-check { position: absolute; top: 7px; right: 7px; z-index: 2; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #ffffff; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 0.68em; line-height: 1; color: var(--bg-0); } .region-card.selected .select-check { background: var(--danger); border-color: var(--danger); } .card-body { padding: 12px 14px 14px; } .card-code { font-family: var(--mono); font-size: 0.7em; color: var(--text-faint); letter-spacing: 1px; } .card-name { font-size: 1.02em; font-weight: 600; color: var(--text); } /* Rename icon docks to the right of the title, same row -- title itself is NOT centered here (home-grid cards read left-aligned throughout, this isn't the dossier's own centered-title convention), so a plain flex row with the icon pushed to the far end is enough; no grid-centering trick needed the way .entry-title-row/.subsection-title require. */ .card-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px 0 8px; } .card-name-row .rename-icon { flex-shrink: 0; } .card-badges { display: flex; flex-wrap: wrap; gap: 5px; } .badge { font-size: 0.68em; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--panel-border); color: var(--text-dim); white-space: nowrap; } .badge.rumor { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px rgba(255,180,84,0.25); } .badge.hz-1, .badge.hz-2 { color: var(--ok); border-color: var(--ok); } .badge.hz-3, .badge.hz-4 { color: var(--amber); border-color: var(--amber); } .badge.hz-5, .badge.hz-6 { color: var(--danger); border-color: var(--danger); } .empty-state { padding: 60px 20px; text-align: center; color: var(--text-dim); } .empty-state .glyph { font-size: 2.4em; opacity: 0.4; margin-bottom: 12px; } /* ---------- home controls: k/j category tabs + sort toggle ---------- */ .home-title-bar { margin-bottom: 10px; } .home-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .category-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .category-tab { padding: 6px 12px; font-size: 0.75em; } /* Unknown's own category tab -- just its glyph (see CATEGORY_GLYPH.rumors/ viewportGlyph's own "✦" placeholder), not the word "Unknown". Amber to match every other rumor/unknown accent in the app (the region-card badge, the glyph itself). */ .category-tab--icon { font-size: 1.05em; padding: 5px 14px; color: var(--amber); border-color: var(--amber); } .category-tab--icon:hover { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(255,180,84,0.3); } .category-tab--icon.accent { color: var(--bg-0); background: var(--amber); border-color: var(--amber); } .sort-select { font-size: 0.75em; padding: 6px 30px 6px 12px; cursor: pointer; /* Without this, iOS/mobile Safari ignores most of the custom styling a plain