/* Crosscut Hub — dark mode (v0.23). Loaded last. is set by the tiny script in index.html from the Your login setting (Auto follows the phone/computer, Light, Dark). Tokens first; then the few rules that hard-code a light color. --charcoal is "strongest text" (it flips light here); --solid is dark UI surfaces (buttons, bars). */ :root[data-theme="dark"] { color-scheme: dark; --ground: #121110; --paper: #1c1b19; --line: #2c2a27; --ink: #d3cdc4; --charcoal: #f4f0e9; --muted: #928b81; --solid: #3b3834; --fill: #282623; --fill-2: #312e2a; --green: #4fb477; --red: #e2685a; --blue: #6a9fd8; --orange-2: #ffae4d; --shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35); --shadow-hi: 0 0 0 1px rgba(255,255,255,.07), 0 16px 40px rgba(0,0,0,.5); --px-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35); --focus: 0 0 0 3px rgba(248,156,51,.35); } [data-theme="dark"] body { background: var(--ground); color: var(--ink); } [data-theme="dark"] ::selection { background: rgba(248,156,51,.4); } /* chrome */ [data-theme="dark"] .topbar { background: #151412; } @media (min-width: 900px) { [data-theme="dark"] .topbar { background: color-mix(in srgb, var(--ground) 80%, transparent); } } [data-theme="dark"] .side { background: #0e0d0c; border-right: 1px solid #1f1d1b; } [data-theme="dark"] .tabs, [data-theme="dark"] .morepop { background: color-mix(in srgb, #0e0d0c 90%, transparent); } [data-theme="dark"] .search input { background: var(--paper); border-color: var(--line); color: var(--charcoal); } [data-theme="dark"] .search .results { background: #24221f; } [data-theme="dark"] .search .gi { color: var(--ink); border-color: var(--line); } [data-theme="dark"] .search .gi:hover { background: var(--fill); } [data-theme="dark"] .btn.dark { background: #f1ede6; color: #161513; } [data-theme="dark"] .btn.dark:hover { background: #fff; } [data-theme="dark"] .btn.ghost { color: var(--charcoal); } [data-theme="dark"] .toast { background: color-mix(in srgb, #f1ede6 94%, transparent); color: #161513; } [data-theme="dark"] .pill.gray { background: var(--fill-2); color: var(--ink); } [data-theme="dark"] .card.accent h3 .pill, [data-theme="dark"] .side-nav a .pill { color: #1a1612; } /* fields */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #151412; border-color: var(--line); color: var(--charcoal); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6f695f; } [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23928b81' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } [data-theme="dark"] .stage-sel { background-color: var(--paper); } [data-theme="dark"] .seg button.on, [data-theme="dark"] .px-seg button[aria-pressed="true"] { background: #45413c; color: var(--charcoal); } [data-theme="dark"] .px-seg, [data-theme="dark"] .px-btn.soft { background: var(--fill-2); color: var(--charcoal); } /* tables, lists, cards */ [data-theme="dark"] table.data { background: transparent; } [data-theme="dark"] table.data td { border-bottom-color: var(--line); } [data-theme="dark"] table.data tbody tr:hover td { background: #22201e; } [data-theme="dark"] .reasons span, [data-theme="dark"] .opp .src { background: var(--fill-2); } [data-theme="dark"] .tier.local { background: rgba(79,180,119,.16); color: #7fd3a0; } [data-theme="dark"] .tier.ext { background: rgba(226,104,90,.16); color: #f19a8f; } [data-theme="dark"] .tier.out { background: var(--fill-2); color: var(--muted); } [data-theme="dark"] .scope.keep { background: rgba(248,156,51,.1); } [data-theme="dark"] .oak { background: rgba(160,110,50,.18); color: #e2b77c; } /* pipeline + schedule + map */ [data-theme="dark"] .col { background: #181715; } [data-theme="dark"] .col.done { background: #15201a; } [data-theme="dark"] .opp { background: var(--paper); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.3); } [data-theme="dark"] .sched { background: var(--paper); } [data-theme="dark"] .sched th, [data-theme="dark"] .sched td.eq { background: #181715; } [data-theme="dark"] .sched th, [data-theme="dark"] .sched td { border-color: #26241f; } [data-theme="dark"] .sched td.sun { background: #161513; } [data-theme="dark"] .sched .blk.hold { background: #4a4640; color: var(--charcoal); } [data-theme="dark"] .capbar, [data-theme="dark"] .cbar { background: var(--fill-2); } [data-theme="dark"] .mapbox { background: #1b211b; } [data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: #24221f; color: var(--ink); } [data-theme="dark"] .leaflet-bar a { background: #24221f; color: var(--charcoal); border-color: var(--line); } [data-theme="dark"] .leaflet-control-attribution { background: rgba(20,19,18,.7) !important; color: #8f897f; } [data-theme="dark"] .leaflet-control-attribution a { color: #b5aea4; } [data-theme="dark"] .mapside .lyr { background: var(--paper); } /* modals / sheets */ [data-theme="dark"] .modal { background: #1f1e1c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.6); } [data-theme="dark"] .modal-bg, [data-theme="dark"] .px-scrim { background: rgba(0,0,0,.55); } [data-theme="dark"] .pk-row { background: var(--fill); } /* proposals + bell */ [data-theme="dark"] .px-note .ic, [data-theme="dark"] .px-note .acts a, [data-theme="dark"] .px-state:not(.viewing):not(.hot):not(.viewed):not(.signed):not(.declined):not(.expired):not(.void), [data-theme="dark"] .px-row .av { background: var(--fill-2); color: var(--ink); } [data-theme="dark"] .px-state.viewed { background: rgba(106,159,216,.16); color: #8fb8e6; } [data-theme="dark"] .px-state.viewing, [data-theme="dark"] .px-state.signed { color: #5fd08e; } [data-theme="dark"] .px-note .acts a:first-child { background: #f1ede6; color: #161513; } [data-theme="dark"] .px-cta { background: #26241f; } [data-theme="dark"] .px-banner { background: color-mix(in srgb, #24221f 90%, transparent); } [data-theme="dark"] .px-banner .ic { background: #3b3834; } [data-theme="dark"] .px-tools button:hover, [data-theme="dark"] .px-tpl:hover { background: var(--fill-2); } [data-theme="dark"] .px-sheet .grab, [data-theme="dark"] .px-toggle i { background: #4a4640; } [data-theme="dark"] .px-warn, [data-theme="dark"] .ix-warn { background: rgba(248,156,51,.12); color: #f3c68f; } [data-theme="dark"] .px-bell { color: #fff; } @media (min-width: 900px) { [data-theme="dark"] .px-bell { color: var(--charcoal); } } [data-theme="dark"] .px-bell .px-badge { box-shadow: 0 0 0 2px var(--ground); } [data-theme="dark"] .px-preview iframe { background: #111; } /* inbox */ [data-theme="dark"] .ix-row { background: var(--paper); } [data-theme="dark"] .ix-row:hover { background: #22201e; } [data-theme="dark"] .ix-row.on { background: #282520; } [data-theme="dark"] .ix-row .av, [data-theme="dark"] .ix-sys { background: var(--fill-2); color: var(--ink); } [data-theme="dark"] .ix-thread { background: #161513; } [data-theme="dark"] .ix-ibtn:hover { background: var(--fill-2); } [data-theme="dark"] .ix-filters button { background: var(--fill); color: var(--ink); } [data-theme="dark"] .ix-filters button[aria-pressed="true"] { background: #f1ede6; color: #161513; } [data-theme="dark"] .ix-filters button[aria-pressed="true"] b { background: #161513; color: #fff; } [data-theme="dark"] .ix-note { background: rgba(242,212,92,.12); color: #efdc9a; } [data-theme="dark"] .ix-inrow textarea.note { background: #1f1c12; } [data-theme="dark"] .ix-chanpick button[aria-pressed="true"].note { background: #6d5c1c; color: #fff4c8; } [data-theme="dark"] .msg.in { background: #262421; border-color: var(--line); } [data-theme="dark"] .msg.out { background: #f1ede6; color: #161513; } [data-theme="dark"] .composer, [data-theme="dark"] .snips { background: var(--paper); } /* login keeps its own dark backdrop; only the card changes */ [data-theme="dark"] .login .login-card { background: #1f1e1c; } [data-theme="dark"] .login input { background: #151412; } [data-theme="dark"] .login-google { background: #fff; color: #1f1f1f; } [data-theme="dark"] .login-pk { background: #f1ede6; color: #161513; } [data-theme="dark"] .login-pk:hover { background: #fff; } [data-theme="dark"] .login .logo { content: url("/logo-dark.png"); }