/* ============================================================ Vesper Atlas - Artifact Futurism override layer Loaded LAST (after lm-chrome.css + lm.css), so these rules win. Foundation pass (2026-06-14): the AF globals that token values alone can't express. Per-surface detailing (drawn ink borders, waypoint palette, section glyphs, dossier/folder cards) is added in the surface passes. Token names/values live in lm.css :root. Rollback: builds/archives/vesper-atlas-v0.22.3-pre-AF-reskin. ============================================================ */ /* ---- type ---------------------------------------------------- */ html, body { font-family: var(--font-sans); font-weight: 300; color: var(--ink); -webkit-font-smoothing: antialiased; } /* paper on , transparent , so the z-index:-1 corner watermark sits between the canvas and the page content (instead of being hidden behind an opaque body background). */ html { background: var(--paper); } body { background: transparent; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } code, kbd, samp, pre, .mono, [class*="mono"] { font-family: var(--font-mono); } /* ---- flat surfaces: AF has no shadows, no blur, no glow ------- */ *, *::before, *::after { box-shadow: none !important; } [style*="backdrop-filter"], [class*="blur"], .lm-sticky, .popover, [class*="popover"], [class*="overlay"], [class*="modal"], [class*="tray"], [class*="sheet"], [class*="chrome"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* text-shadow only survives where AF wants it (waypoint segment labels handle their own) */ body :not([class*="wp"]):not([class*="seg"]) { text-shadow: none; } /* ---- focus: 3px accent ring on everything focusable ---------- */ :where(a, button, input, textarea, select, [tabindex], [role="button"]):focus-visible { outline: 3px solid var(--user-accent, var(--accent)) !important; outline-offset: 2px !important; } /* ---- links --------------------------------------------------- */ a { color: var(--user-accent, var(--accent-deep)); } /* ---- selection + scrollbar ----------------------------------- */ ::selection { background: var(--highlight); color: var(--ink); } * { scrollbar-color: var(--muted) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; border: 2px solid var(--paper); } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ---- mechanical motion default ------------------------------- */ :where(a, button, [role="button"], .card, [class*="card"]) { transition-timing-function: var(--ease-mech); } /* ============================================================ SURFACE: Projects landing ("Your missions") Folder-tab FILE cards, mono filter chips, AF pills. ============================================================ */ /* filter chips -> AF mono */ .atlas-pl-filter-chip { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; border-radius: 6px; background: transparent; border: 1.5px solid transparent; color: var(--ink); padding: 7px 13px; } .atlas-pl-filter-chip:hover:not(.is-active) { color: var(--accent-deep); border-color: var(--rule); } .atlas-pl-filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper-raised); } .atlas-pl-filter-sep { background: var(--rule); } .atlas-pl-filter-meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); } /* hero "New mission" button -> AF primary */ .atlas-pl-new-btn { background: var(--ink); color: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--font-sans); font-weight: 500; } .atlas-pl-new-btn:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } /* grid file counter + top room so the FILE tabs aren't clipped by the container's overflow (.atlas-pl-main uses overflow-x:hidden which clips the vertical axis too). */ .atlas-pl-grid { counter-reset: afile; overflow: visible; } .atlas-pl-main { overflow: visible; } /* mission cards -> punch-hole "file" cards (v0.26.6). The protruding folder tab was replaced by a left rail: two drawn binder holes + a vertical file code. Flatter, quieter, and reclaims the vertical room the tab cost. Card is now a flex row [rail | body]; the old card padding/stack moves onto .atlas-pl-card-body. */ .atlas-pl-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; /* clip the rail edge into the rounded corner */ position: relative; flex-direction: row; /* override the base column: [rail | body] */ gap: 0; padding: 0; /* padding lives on .atlas-pl-card-body now */ counter-increment: afile; } .atlas-pl-card-rail { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 15px 0; border-right: 1px solid var(--rule); background: var(--paper); } .atlas-pl-card-hole { width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper-raised); } .atlas-pl-card-code { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; color: var(--muted); } /* The card code is now the real mission number ("M-NN"), written into the span by JS. The old CSS list-counter ("F-01") is retired. */ .atlas-pl-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; } .atlas-pl-card:hover { border-color: var(--ink); transform: translateY(-2px); } .atlas-pl-card.is-completed { background: var(--tint-amber); border-color: var(--ink); } .atlas-pl-card.is-completed .atlas-pl-card-rail { background: var(--putty); border-right-color: var(--ink); } .atlas-pl-card.is-completed .atlas-pl-card-hole { background: var(--tint-amber); } .atlas-pl-card.is-archived { opacity: 1; background: var(--putty); } .atlas-pl-card.is-archived .atlas-pl-card-rail { background: var(--paper); } /* Traveler ID kicker + hover "personnel file" card (v0.26.x). The hero kicker label ("Traveler · 0002") reveals a small dossier card on hover or keyboard focus: name, ID, role, join date, mission tally. */ .atlas-pl-traveler-wrap { position: relative; display: inline-flex; } .atlas-pl-traveler-trigger { background: none; border: none; padding: 0; margin: 0; cursor: help; } .atlas-pl-traveler-trigger:focus-visible { outline: 2px solid var(--user-accent, var(--accent)); outline-offset: 3px; border-radius: 3px; } .atlas-pl-traveler-card { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 224px; padding: 12px 14px; background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s; pointer-events: none; } .atlas-pl-traveler-wrap:hover .atlas-pl-traveler-card, .atlas-pl-traveler-trigger:focus-visible + .atlas-pl-traveler-card { opacity: 1; visibility: visible; transform: translateY(0); } .atlas-pl-id-name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; } .atlas-pl-id-row { display: flex; justify-content: space-between; gap: 18px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; } .atlas-pl-id-row .k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .atlas-pl-id-row .v { color: var(--ink); text-align: right; } .atlas-pl-card-name { font-family: var(--font-sans); font-weight: 500; color: var(--ink); } .atlas-pl-card-star { color: var(--ochre); } .atlas-pl-card-desc { color: var(--muted); } .atlas-pl-card-pct { font-family: var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; } .atlas-pl-card-pct-label, .atlas-pl-card-wp-meta { color: var(--muted); font-family: var(--font-mono); } .atlas-pl-card-foot { border-top: 1px solid var(--rule); } /* status pills -> AF (mono, drawn border, fills with ink text) */ .atlas-pl-status-pill { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); padding: 3px 10px; } .atlas-pl-status-pill.is-active { background: var(--tint-teal); color: var(--ink); } .atlas-pl-status-pill.is-completed { background: var(--ochre); color: var(--ink); } .atlas-pl-status-pill.is-archived { background: var(--putty); color: var(--muted); } /* create-card -> dashed AF */ .atlas-pl-create-card { border: 1.5px dashed var(--ink); border-radius: 10px; background: transparent; } .atlas-pl-create-card-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .atlas-pl-create-card-sub { color: var(--muted); } /* ============================================================ SURFACE: Mission page ============================================================ */ /* eyebrows -> AF mono microlabel */ .atlas-mp-eyebrow, .atlas-mp-poll-eyebrow { font-family: var(--font-mono); font-size: 0.706rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); } /* v0.28.0: the per-section kicker (MISSION PLAN, CREW DECISIONS, etc.) is a colored marker so each section header anchors clearly. Poll-card eyebrows (author + time metadata) stay muted via the rule above. */ .atlas-mp-section-header .atlas-mp-eyebrow { color: var(--user-accent, var(--accent-deep)); font-weight: 600; } /* kicker row: mono file label + status + role pills */ .atlas-mp-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .atlas-mp-statuspill, .atlas-mp-rolepill { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 10px; color: var(--ink); line-height: 1.4; } .atlas-mp-statuspill.is-active { background: var(--tint-teal); } .atlas-mp-statuspill.is-completed { background: var(--ochre); } .atlas-mp-statuspill.is-archived { background: var(--putty); color: var(--muted); } .atlas-mp-rolepill { background: var(--ochre); } .atlas-mp-section-header h2 { font-family: var(--font-sans); font-weight: 700; color: var(--ink); } .atlas-mp-section-subtitle { color: var(--muted); } /* hero -> open two-column dossier layout (no card border) */ .atlas-mp-hero { background: none; border: none; border-radius: 0; padding: 0; display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; } .atlas-mp-hero-main { min-width: 0; } @media (max-width: 860px) { .atlas-mp-hero { grid-template-columns: 1fr; } } /* dossier rail (right) - mono readout with dotted leaders */ .atlas-mp-dossier { border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper-raised); padding: 18px 20px; display: grid; gap: 9px; } .atlas-mp-dossier-row { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 0.78rem; } .atlas-mp-dossier-row .k { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 62px; } .atlas-mp-dossier-row .dots { flex: 1; border-bottom: 1.5px dotted var(--muted); transform: translateY(-4px); } .atlas-mp-dossier-row .v { color: var(--ink); text-align: right; } /* hero waypoint bar: drop the cramped in-bar labels; a tick-track sits below */ .atlas-mp-waypoints-shell .atlas-wp-label { display: none; } .atlas-mp-wptrack { display: flex; margin: 9px 0 22px; } .atlas-mp-wptrack-item { min-width: 0; padding: 0 10px 0 9px; border-left: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; } .atlas-mp-wptrack-item:first-child { border-left: none; padding-left: 0; } .atlas-mp-wptrack-item .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--ink); margin-right: 6px; vertical-align: 0; } .atlas-mp-wptrack-item .nm { font-weight: 500; } .atlas-mp-wptrack-item .p { color: var(--muted); } .atlas-mp-wptrack-item[data-c="1"] .sw { background: #784A9D; } .atlas-mp-wptrack-item[data-c="2"] .sw { background: #2E8B7F; } .atlas-mp-wptrack-item[data-c="3"] .sw { background: #C58A1E; } .atlas-mp-wptrack-item[data-c="4"] .sw { background: #B5546E; } .atlas-mp-wptrack-item[data-c="5"] .sw { background: #4A6B82; } .atlas-mp-wptrack-item[data-c="6"] .sw { background: #6E8B5A; } .atlas-mp-wptrack-item[data-c="7"] .sw { background: #8A6BB0; } .atlas-mp-wptrack-item[data-c="8"] .sw { background: #B26A3C; } .atlas-mp-wptrack-item[data-c="9"] .sw { background: #5A4F8A; } .atlas-mp-wptrack-item[data-c="10"] .sw { background: #7E6A3A; } @media (max-width: 640px) { .atlas-mp-wptrack { flex-wrap: wrap; gap: 6px 0; } .atlas-mp-wptrack-item { flex: 0 0 50% !important; border-left: none; padding-left: 0; } } /* section-heading instrument glyphs (Waypoints / Polls / Crew) */ [data-atlas-section="waypoints"] .atlas-mp-section-header-text h2, [data-atlas-section="polls"] .atlas-mp-section-header-text h2, [data-atlas-section="crew"] .atlas-mp-section-header-text h2 { display: inline-flex; align-items: center; gap: 14px; } [data-atlas-section="waypoints"] .atlas-mp-section-header-text h2::after, [data-atlas-section="polls"] .atlas-mp-section-header-text h2::after, [data-atlas-section="crew"] .atlas-mp-section-header-text h2::after { content: ""; width: 50px; height: 24px; flex: none; background-repeat: no-repeat; background-position: left center; background-size: contain; } [data-atlas-section="waypoints"] .atlas-mp-section-header-text h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cline x1='8' y1='20' x2='48' y2='20' stroke='%231B1A17' stroke-width='2.5'/%3E%3Cline x1='48' y1='20' x2='112' y2='20' stroke='%235F5B51' stroke-width='2.5' stroke-dasharray='2 6'/%3E%3Ccircle cx='8' cy='20' r='4.5' fill='%231B1A17'/%3E%3Ccircle cx='34' cy='20' r='4.5' fill='%231B1A17'/%3E%3Ccircle cx='62' cy='20' r='6.5' fill='%23784A9D' stroke='%231B1A17' stroke-width='1.5'/%3E%3Ccircle cx='88' cy='20' r='4.5' fill='none' stroke='%235F5B51' stroke-width='2.5'/%3E%3Ccircle cx='112' cy='20' r='4.5' fill='none' stroke='%235F5B51' stroke-width='2.5'/%3E%3C/svg%3E"); } [data-atlas-section="polls"] .atlas-mp-section-header-text h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cline x1='6' y1='34' x2='114' y2='34' stroke='%231B1A17' stroke-width='2'/%3E%3Crect x='14' y='18' width='16' height='16' fill='none' stroke='%231B1A17' stroke-width='2'/%3E%3Crect x='40' y='6' width='16' height='28' fill='%23784A9D' stroke='%231B1A17' stroke-width='2'/%3E%3Crect x='66' y='22' width='16' height='12' fill='none' stroke='%231B1A17' stroke-width='2'/%3E%3Crect x='92' y='14' width='16' height='20' fill='none' stroke='%231B1A17' stroke-width='2'/%3E%3C/svg%3E"); } [data-atlas-section="crew"] .atlas-mp-section-header-text h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Ccircle cx='26' cy='22' r='13' fill='%23FBFAF6' stroke='%231B1A17' stroke-width='2'/%3E%3Ccircle cx='46' cy='22' r='13' fill='%23FBFAF6' stroke='%231B1A17' stroke-width='2'/%3E%3Ccircle cx='66' cy='22' r='13' fill='%23ECE4F3' stroke='%231B1A17' stroke-width='2'/%3E%3Cpath d='M88 6 l1.6 5 5 1.6 -5 1.6 -1.6 5 -1.6 -5 -5 -1.6 5 -1.6 z' fill='%23D9A93C' stroke='%231B1A17' stroke-width='1'/%3E%3C/svg%3E"); } /* buttons -> AF */ .atlas-mp-btn { border-radius: 6px; font-family: var(--font-sans); font-weight: 500; } .atlas-mp-btn-primary { background: var(--ink); color: var(--paper-raised); border: 1.5px solid var(--ink); } .atlas-mp-btn-primary:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } .atlas-mp-btn-secondary { border: 1.5px solid var(--ink); color: var(--ink); } .atlas-mp-btn-secondary:hover { background: var(--ink); color: var(--paper-raised); } .atlas-mp-add-waypoint-btn, .atlas-mp-batch-edit-btn, .atlas-mp-add-poll-btn { border-radius: 6px; font-family: var(--font-sans); font-weight: 500; border: 1.5px solid var(--ink); } .atlas-mp-add-waypoint-btn { background: var(--ink); color: var(--paper-raised); } .atlas-mp-add-waypoint-btn:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } .atlas-mp-batch-edit-btn, .atlas-mp-add-poll-btn { background: transparent; color: var(--ink); } .atlas-mp-batch-edit-btn:hover, .atlas-mp-add-poll-btn:hover { background: var(--ink); color: var(--paper-raised); } /* waypoint accordion cards -> drawn paper */ .atlas-mp-wp-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-mp-wp-card:hover { border-color: var(--ink); } .atlas-mp-wp-weight-pill { font-family: var(--font-mono); color: var(--ink); background: var(--putty); border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 500; } /* due / status pills -> AF */ .atlas-mp-due-pill { font-family: var(--font-mono); color: var(--ink); background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 999px; } /* sticky bar -> paper with drawn bottom edge */ .atlas-mp-sticky { background: var(--paper); border-bottom: 1.5px solid var(--ink); } /* polls filters -> drawn instrument strip (like the projects-landing bar): a bordered container box holding mono chips; active chip = ink fill. */ .atlas-mp-polls-filters { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper-raised); padding: 7px 9px; } .atlas-mp-polls-filter { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; border: 1.5px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); padding: 6px 12px; } .atlas-mp-polls-filter:hover:not(.is-active) { color: var(--accent-deep); } .atlas-mp-polls-filter.is-active, .atlas-mp-polls-filter[aria-selected="true"] { background: var(--ink); color: var(--paper-raised); } .atlas-mp-polls-filter.is-active .atlas-mp-polls-filter-count { color: var(--paper); opacity: 0.75; } .atlas-mp-poll { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-mp-poll-save-btn { background: var(--ink); color: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--font-sans); font-weight: 500; } .atlas-mp-poll-save-btn:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } /* poll options -> AF (preferred mockup treatment): a thin tally bar UNDER each option (radio/check left, votes right), not a full-height background fill. */ .atlas-mp-poll-options { display: grid; gap: 6px; } .atlas-mp-poll-option { display: block; position: relative; border-radius: 0; overflow: visible; padding-bottom: 14px; } .atlas-mp-poll-option-btn { border: none; border-radius: 0; background: transparent; color: var(--ink); padding: 9px 2px; min-height: 0; } .atlas-mp-poll-option-btn:hover:not([disabled]) { background: transparent; } .atlas-mp-poll-option-btn:focus-visible { outline: 3px solid var(--user-accent, var(--accent)); outline-offset: 2px; } .atlas-mp-poll-option.is-selected .atlas-mp-poll-option-btn { background: transparent; } /* full-width track */ .atlas-mp-poll-option::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; border-radius: 999px; background: var(--putty); border: 1px solid var(--rule); } /* the fill (width set inline by JS) sits on the track */ .atlas-mp-poll-option-bar { inset: auto auto 4px 0; top: auto; height: 7px; border-radius: 999px; border: none; z-index: 1; background: var(--user-accent, var(--accent)); } .atlas-mp-poll-option:nth-child(2) .atlas-mp-poll-option-bar { background: var(--accent3); } .atlas-mp-poll-option:nth-child(3) .atlas-mp-poll-option-bar { background: var(--ochre); } .atlas-mp-poll-option:nth-child(4) .atlas-mp-poll-option-bar { background: var(--coral); } .atlas-mp-poll-option:nth-child(5) .atlas-mp-poll-option-bar { background: #4A6B82; } /* hole-punch marks: white center, ink ring, hard 2D offset shadow (depth) */ .atlas-mp-poll-option-mark { width: 18px; height: 18px; min-width: 18px; flex: none; border-radius: 50%; background: var(--bg3); border: 1.5px solid var(--ink); color: transparent; box-shadow: 1.5px 1.5px 0 var(--rule) !important; /* override the global no-shadow flatten */ position: relative; display: inline-block; } .atlas-mp-poll-option-mark svg { display: none; } /* CSS draws the punch; drop the glyph */ .atlas-mp-poll-option.is-selected .atlas-mp-poll-option-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--user-accent, var(--accent)); /* dead-centre dot */ } .atlas-mp-poll-option-pct { color: var(--ink); font-family: var(--font-sans); } .atlas-mp-poll-option-count { background: var(--putty); color: var(--muted); font-family: var(--font-mono); } .atlas-mp-poll-voters { display: none; } /* voter avatars removed - too cluttered under the bars */ .atlas-mp-poll-voter { border: 2px solid var(--paper-raised); background: var(--putty); color: var(--ink); } .atlas-mp-poll-voter.is-overflow { background: var(--putty); color: var(--muted); } /* poll meta -> AF */ .atlas-mp-poll-question { color: var(--ink); font-family: var(--font-sans); } .atlas-mp-poll-status { font-family: var(--font-mono); font-size: 0.62rem; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); padding: 2px 9px; } .atlas-mp-poll-status.is-open { background: var(--tint-teal); } .atlas-mp-poll-status.is-closed { background: var(--putty); color: var(--muted); } .atlas-mp-poll-mode, .atlas-mp-poll-deadline, .atlas-mp-poll-footer, .atlas-mp-poll-save-help { font-family: var(--font-mono); color: var(--muted); } .atlas-mp-polls-filter-count { color: var(--muted); } /* crew / team cards -> drawn paper */ .atlas-mp-team-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } /* role pills -> AF: ink text on tint, ink border (Observer was illegible teal-on-teal) */ .atlas-mp-team-role { border: 1.5px solid var(--ink); color: var(--ink); font-family: var(--font-mono); font-weight: 500; border-radius: 999px; } .atlas-mp-team-role.is-owner, .atlas-mp-team-role.is-captain { background: var(--ochre); color: var(--ink); } .atlas-mp-team-role.is-member { background: var(--tint-violet); color: var(--ink); } .atlas-mp-team-role.is-client { background: var(--tint-teal); color: var(--ink); } /* ============================================================ CHROME: notification bell + popover (raw white tints -> AF) ============================================================ */ .lm-notif-bell:hover, .lm-notif-bell:focus-visible { background: var(--putty); } .lm-notif-popover { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .lm-notif-popover-head { border-bottom: 1px solid var(--rule); } .lm-notif-list li { border-bottom: 1px solid var(--rule); } .lm-notif-row:hover { background: var(--putty); } .lm-notif-empty { color: var(--muted); } .lm-notif-mark-read { color: var(--accent-deep); } /* ============================================================ SURFACE: Personal dashboard (Your galaxy) ============================================================ */ .atlas-dash-hero { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-dash-hero-eyebrow { font-family: var(--font-mono); color: var(--muted); } .atlas-dash-hero-title { font-family: var(--font-sans); color: var(--ink); } .atlas-dash-hero-sub { color: var(--muted); } .atlas-dash-stat { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-dash-stat::before { display: none; } /* drop the colored accent side-bar (AF: plain ink border only) */ .atlas-dash-stat.is-violet { background: var(--tint-violet); } .atlas-dash-stat.is-amber { background: var(--tint-amber); } .atlas-dash-stat.is-teal { background: var(--tint-teal); } .atlas-dash-stat.is-coral { background: var(--tint-coral); } .atlas-dash-stat-label { font-family: var(--font-mono); color: var(--ink); } .atlas-dash-stat-value { font-family: var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; } .atlas-dash-stat-meta { color: var(--muted); font-family: var(--font-mono); } .atlas-dash-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-dash-card-eyebrow { font-family: var(--font-mono); color: var(--muted); } .atlas-dash-card h2 { font-family: var(--font-sans); color: var(--ink); } /* heatmap ramp -> AF purple (light to deep) on putty empty cells */ .atlas-dash-heat-cell { fill: var(--putty); } .atlas-dash-heat-cell.l1 { fill: #E0D2EC; } .atlas-dash-heat-cell.l2 { fill: #C3A9DC; } .atlas-dash-heat-cell.l3 { fill: #9B72C0; } .atlas-dash-heat-cell.l4 { fill: #8B2E47; } /* left-align the heatmap grid instead of centring it in a wide card (the centred natural-size grid left big voids on both sides). Cells are also enlarged in atlas-dashboard.js so the grid fills more of the card width. */ .atlas-dash-heat-svg { margin: 0; } .atlas-dash-heat-legend-cell { background: var(--putty); } .atlas-dash-heat-legend-cell.l1 { background: #E0D2EC; } .atlas-dash-heat-legend-cell.l2 { background: #C3A9DC; } .atlas-dash-heat-legend-cell.l3 { background: #9B72C0; } .atlas-dash-heat-legend-cell.l4 { background: #8B2E47; } /* ------------------------------------------------------------ Dashboard pieces the first AF pass missed. All flat, drawn ink edges, muted AF palette, no gradients, AA+ contrast on paper. ------------------------------------------------------------ */ /* window selector (7d/30d/90d/All): paper segmented control, ink active cell. Fixes the grey-on-grey low-contrast inactive labels. */ .atlas-dash-window { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 8px; } .atlas-dash-window-btn { color: var(--ink); font-family: var(--font-mono); border-radius: 5px; } .atlas-dash-window-btn:hover { color: var(--ink); background: var(--putty); } .atlas-dash-window-btn.is-active { background: var(--user-accent, var(--accent)); color: var(--user-accent-ink, #fff); } /* white on #784A9D = 5.8:1 AA; auto-ink for light user accents */ /* Atlas Universe banner: flat paper card with ink + accent. Fixes the amber-eyebrow-on-paper (yellow-on-yellow) no-contrast failure. */ .atlas-dash-universe-banner-link { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-dash-universe-banner-link:hover { border-color: var(--ink); background: var(--putty); } .atlas-dash-universe-banner-eyebrow { color: var(--accent-deep); font-family: var(--font-mono); } /* #5C3879 on paper = AAA */ .atlas-dash-universe-banner-title { font-family: var(--font-sans); color: var(--ink); } .atlas-dash-universe-banner-arrow { color: var(--accent); } /* mission list rows: flat paper rows, flat bars, consistent ink role chips (role word carries meaning; no color-tinted pills on paper). */ .atlas-dash-mission-row { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 8px; } .atlas-dash-mission-row:hover { background: var(--putty); } .atlas-dash-mission-name { color: var(--ink); font-family: var(--font-sans); } .atlas-dash-mission-role-pill, .atlas-dash-mission-role-pill.is-captain, .atlas-dash-mission-role-pill.is-member, .atlas-dash-mission-role-pill.is-client { background: var(--putty); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-mono); } /* donut role chips: same uniform putty/ink/mono treatment as the mission pills above (the role word carries the meaning; no colour-tinted pills on paper). Without this the donut chips kept the dark-theme per-role tints, so identical labels read in different colours. */ .atlas-dash-mini-donut-role, .atlas-dash-mini-donut-role.is-captain, .atlas-dash-mini-donut-role.is-member, .atlas-dash-mini-donut-role.is-client { background: var(--putty); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-mono); font-weight: 500; } .atlas-dash-mission-bar { height: 8px; background: var(--putty); border: 1.5px solid var(--ink); border-radius: 0; } .atlas-dash-mission-fill { background: var(--user-accent, var(--accent)); border-radius: 0; } .atlas-dash-mission-meta { color: var(--muted); } .atlas-dash-mission-pct { color: var(--ink); } /* next milestone: flat paper card, putty track, ochre fill */ .atlas-dash-milestone-card { background: var(--paper-raised); border: 1.5px solid var(--ink); } .atlas-dash-milestone-current { color: var(--accent-deep); } .atlas-dash-milestone-sep { color: var(--muted); } .atlas-dash-milestone-target { color: var(--muted); } .atlas-dash-milestone-bar { height: 12px; background: var(--putty); border: 1.5px solid var(--ink); border-radius: 0; overflow: hidden; } .atlas-dash-milestone-fill { background: var(--ochre); border-radius: 0; } .atlas-dash-milestone-pct { color: var(--ink); } /* personal records ("Bragging rights") tiles: flat paper, mono label */ .atlas-dash-record { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .atlas-dash-record-label { color: var(--muted); font-family: var(--font-mono); } .atlas-dash-record-value { color: var(--ink); font-family: var(--font-sans); } .atlas-dash-record-meta { color: var(--muted); } /* cross-mission activity feed: AF status dots + ink text */ .atlas-dash-feed-dot { background: var(--muted); } .atlas-dash-feed-dot.is-success { background: var(--user-accent, var(--accent)); } .atlas-dash-feed-dot.is-amber { background: var(--ochre); } .atlas-dash-feed-dot.is-coral { background: var(--coral); } .atlas-dash-feed-text { color: var(--ink); } .atlas-dash-feed-time { color: var(--muted); font-family: var(--font-mono); } /* badge + patch placeholders: flat putty discs with a dashed ink edge (no amber gradient), plus a clear "Coming soon" status chip. */ .atlas-dash-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .atlas-dash-soon-chip { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--ink); background: var(--ochre); border: 1.5px solid var(--ink); padding: 3px 8px; white-space: nowrap; } /* ink on ochre = 8.2:1 */ .atlas-dash-placeholder-cell { background: var(--putty); border: 1.5px dashed var(--ink); } .atlas-dash-placeholder-pill { background: var(--putty); border: 1.5px dashed var(--ink); } .atlas-dash-placeholder-line { background: var(--rule); border-radius: 0; } .atlas-dash-placeholder-note { color: var(--muted); } /* galaxy preview: the static AF "viewport" panel (orbital graphic) with a legible CTA plate, so it's obvious the card opens the interactive 3D galaxy. */ .atlas-dash-galaxy-preview-link { position: relative; display: block; height: auto; min-height: 210px; background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; transform: none; } .atlas-dash-galaxy-preview-link::after { display: none; } /* drop the dark scrim */ .atlas-dash-galaxy-preview-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; } /* show the planet + orbital sweep (left) */ .atlas-dash-galaxy-cta { position: relative; z-index: 1; min-height: 210px; margin-left: auto; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 24px clamp(20px, 4vw, 40px); width: min(56%, 480px); } /* plate on the RIGHT */ .atlas-dash-galaxy-cta::before { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: 0.88; border-left: 1.5px solid var(--ink); z-index: -1; } .atlas-dash-galaxy-cta-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-deep); } .atlas-dash-galaxy-cta-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.28rem); line-height: 1.18; color: var(--ink); } /* Primary button rule: INK at rest, user-accent on hover, with text auto-flipped for contrast (--user-accent-ink). */ .atlas-dash-galaxy-cta-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; color: var(--paper-raised); background: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 15px; } .atlas-dash-galaxy-cta-btn svg { transition: transform 0.18s; } .atlas-dash-galaxy-preview-link:hover .atlas-dash-galaxy-cta-btn { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } .atlas-dash-galaxy-preview-link:hover .atlas-dash-galaxy-cta-btn svg { transform: translateX(3px); } @media (max-width: 640px) { /* stack on phones: viewport banner on top, CTA below it (no shrinking overlay) */ .atlas-dash-galaxy-preview-link { min-height: auto; } .atlas-dash-galaxy-preview-svg { position: static; width: 100%; height: auto; } /* full panel, natural aspect, no crop */ .atlas-dash-galaxy-cta { position: static; width: 100%; min-height: auto; margin-left: 0; padding: 18px 20px; gap: 8px; border-top: 1.5px solid var(--ink); } .atlas-dash-galaxy-cta::before { display: none; } } /* AF audit: dark-theme values the first pass missed */ .atlas-dash-hero::after { display: none; } /* drop the violet->amber gradient wash on the profile hero */ .atlas-dash-heat-legend-cell.l0 { background: var(--putty); } /* empty legend cell = putty (was white-on-paper) */ .atlas-dash-feed-row { border-bottom-color: var(--rule); } /* visible hairline separators (were invisible white) */ /* donut totals -> AF readout chips: colour-coded value cell + putty unit cell */ .atlas-dash-mission-donuts-tot { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper-raised); font-family: var(--font-mono); } .atlas-dash-mission-donuts-tot strong { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; padding: 2px 9px; display: flex; align-items: center; } .atlas-dash-mission-donuts-tot > span { padding: 2px 9px; border-left: 1.5px solid var(--ink); background: var(--putty); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: flex; align-items: center; } .atlas-dash-mission-donuts-tot.is-amber strong { color: var(--ochre-deep); } .atlas-dash-mission-donuts-tot.is-teal strong { color: var(--accent3-deep); } .atlas-dash-mission-donuts-tot.is-muted strong { color: var(--ink); } /* ============================================================ SURFACE: First-login onboarding overlay ============================================================ */ /* flat AF ink scrim - kill the inherited violet/amber radial wash + saturate(140%) (which re-coloured the blurred surface behind into a purple glow, off-brand for AF's flat surfaces). Mild neutral blur only. */ .atlas-onb-backdrop { background: rgba(27, 26, 23, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .atlas-onb-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 14px; } .atlas-onb-eyebrow { font-family: var(--font-mono); color: var(--muted); } .atlas-onb-title { font-family: var(--font-sans); color: var(--ink); } .atlas-onb-body { color: var(--muted); } .atlas-onb-symbol { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--putty); color: var(--ink); } /* nav now lives inside the card; push it to the bottom on a hairline rule. */ .atlas-onb-nav { margin-top: auto; padding-top: 18px; width: 100%; } .atlas-onb-card .atlas-onb-buttons { justify-content: center; } .atlas-onb-symbol svg { stroke: var(--ink); } .atlas-onb-dot { background: var(--rule); } .atlas-onb-dot.is-active { background: var(--user-accent, var(--accent)); } .atlas-onb-btn { border-radius: 6px; font-family: var(--font-sans); font-weight: 500; } .atlas-onb-btn-primary { background: var(--ink); color: var(--paper-raised); border: 1.5px solid var(--ink); } /* include :focus-visible - the Next button is auto-focused on mount, and onboarding.css's .atlas-onb-btn-primary:focus-visible (0,2,0) otherwise beats a plain :hover override and shows the legacy violet-hover. */ .atlas-onb-btn-primary:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } /* The Next button is auto-focused on mount; keep it ink (not a purple fill) and show focus as a ring so it doesn't read as "very colorful". */ .atlas-onb-btn-primary:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper-raised); outline: 3px solid var(--user-accent, var(--accent)); outline-offset: 2px; } .atlas-onb-btn-ghost { color: var(--accent-deep); } .atlas-onb-skip { font-family: var(--font-mono); color: var(--muted); } /* ============================================================ SURFACE: Profile (/profile/) - still dark-token + bright violet; retoned to AF paper: paper-raised cards w/ ink borders, mono eyebrow, ink-fill buttons, AF inputs + notification toggles. ============================================================ */ .profile-eyebrow { font-family: var(--font-mono); color: var(--accent-deep); } .profile-header h1 { font-family: var(--font-sans); color: var(--ink); } .profile-header p { color: var(--muted); } .profile-card { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 10px; } .profile-card h2 { font-family: var(--font-sans); color: var(--ink); } .profile-card-sub, .profile-label, .profile-hint, .profile-static, .profile-avatar-meta-sub, .profile-image-hint { color: var(--muted); } .profile-label { font-family: var(--font-mono); } .profile-avatar-meta-mode, .profile-notif-title { color: var(--ink); } .profile-notif-sub { color: var(--muted); } .profile-input { background: var(--paper); color: var(--ink); -webkit-text-fill-color: var(--ink); border: 1.5px solid var(--muted); border-radius: 8px; } .profile-input:focus { outline: 3px solid var(--user-accent, var(--accent)); outline-offset: 2px; border-color: var(--ink); } .profile-avatar-preview { background: var(--putty); } /* Buttons: AF ink-fill primary (purple on hover), ink-outline ghost. */ .profile-btn { background: var(--ink); color: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--font-sans); } .profile-btn:hover { background: var(--user-accent, var(--accent)); border-color: var(--user-accent, var(--accent)); color: var(--user-accent-ink, var(--paper-raised)); } .profile-btn.is-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .profile-btn.is-ghost:hover { background: var(--ink); color: var(--paper-raised); } /* Notification toggles: putty track + ink border; checked = accent. */ .profile-notif-row { border-top-color: var(--rule); } .profile-notif-track { background: var(--putty); border: 1.5px solid var(--ink); } .profile-notif-thumb { background: var(--muted); } .profile-notif-toggle input:checked ~ .profile-notif-track { background: var(--tint-amber, var(--tint-amber)); border-color: var(--ink); } .profile-notif-toggle input:checked ~ .profile-notif-track .profile-notif-thumb { background: var(--user-accent, var(--accent)); } .profile-notif-toggle input:focus-visible ~ .profile-notif-track { outline: 3px solid var(--user-accent, var(--accent)); outline-offset: 2px; } .profile-swatch.is-selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper-raised); } /* Invite + New-mission modals (dark inline styles) -> AF paper. Opened from the avatar menu (/home/#invite) and the New mission button. */ #atlas-invite-modal, #atlas-new-mission-modal { background: rgba(27, 26, 23, 0.18) !important; } #atlas-invite-modal > div, #atlas-new-mission-modal > div { background: var(--paper-raised) !important; border: 1.5px solid var(--ink) !important; border-radius: 12px !important; } /* The invite modal has a separate full-screen backdrop child; the rule above (meant for the card) was repainting it opaque paper-raised (a brown wash in dark theme). Keep it a gentle scrim instead. */ #atlas-invite-modal .atlas-invite-backdrop { background: rgba(27, 26, 23, 0.18) !important; border: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #atlas-invite-email, #atlas-invite-note, #atlas-new-mission-modal input, #atlas-new-mission-modal textarea { background: var(--paper) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; border: 1.5px solid var(--muted) !important; } #atlas-invite-email:focus, #atlas-invite-note:focus, #atlas-new-mission-modal input:focus, #atlas-new-mission-modal textarea:focus { outline: 3px solid var(--user-accent, var(--accent)) !important; outline-offset: 2px; border-color: var(--ink) !important; } #atlas-invite-link-card { background: var(--putty) !important; } #atlas-invite-send { background: var(--ink) !important; color: var(--user-accent-ink, var(--paper-raised)) !important; border: 1.5px solid var(--ink) !important; border-radius: 6px !important; } #atlas-invite-send:hover { background: var(--user-accent, var(--accent)) !important; border-color: var(--user-accent, var(--accent)) !important; } #atlas-invite-cancel { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 6px !important; } #atlas-invite-cancel:hover { background: var(--ink) !important; color: var(--paper-raised) !important; } /* New-mission modal send/cancel + checkbox (inline-styled -> !important). */ #atlas-new-mission-send { background: var(--ink) !important; color: var(--user-accent-ink, var(--paper-raised)) !important; border: 1.5px solid var(--ink) !important; border-radius: 6px !important; } #atlas-new-mission-send:hover { background: var(--user-accent, var(--accent)) !important; border-color: var(--user-accent, var(--accent)) !important; } #atlas-new-mission-cancel { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 6px !important; } #atlas-new-mission-cancel:hover { background: var(--ink) !important; color: var(--paper-raised) !important; } #atlas-new-mission-waypoints { accent-color: var(--user-accent, var(--accent)) !important; } /* Page-