/* ===================================================================== Pijin OS — shared THEME TOKENS + skins (/themes.css) Linked by the shell (index.html) AND every content page (dash.html …). Light preserves the current exact colors → nothing changes on Light. Switch themes by setting data-theme="…" on (theme-dock.js). ===================================================================== */ :root { --mono:"SFMono-Regular","Consolas","Menlo","DejaVu Sans Mono",ui-monospace,monospace; } /* === BRAND: the Pijin WORDMARK logo (no bird) replaces the sidebar text wordmark, CENTERED in the header (all themes). On-dark flavor → works on both dark navs. === */ /* center the wordmark across the FULL sidebar: float the collapse button, center the wrapper */ aside.w-56 > div:first-child{ position:relative!important; justify-content:center!important; } aside.w-56 > div:first-child > button{ position:absolute!important; left:14px!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important; } aside.w-56 > div:first-child > div{ flex:0 1 auto!important; text-align:center!important; } aside.w-56 > div:first-child .text-sm.font-semibold{ color:transparent!important; font-size:0!important; line-height:0!important; display:inline-block!important; width:118px!important; height:40px!important; background:url("/pijin-logo-wordmark.png?v=1") center center/contain no-repeat!important; } aside.w-56 > div:first-child .text-sm.font-semibold::before{ content:none!important; } /* the "OS" span carries an inline font-size that survives the parent's 0 — hide it too */ aside.w-56 > div:first-child .text-sm.font-semibold span{ font-size:0!important; color:transparent!important; } :root, [data-theme="light"] { /* PIJIN ACCENTS on the ORIGINAL clean Light structure. Structure - bg, card, hover, sidebar, tables, borders, text ramp - is UNCHANGED from stock Light. Bright white windows, grey canvas. Only the accent colours are ours: teal primary, violet and gold touches. */ --bg:#f1f3f4; --card:#ffffff; --hover:#e8eaed; --sidebar:#111111; --table-head:#fafaf8; --table-row:#e8eaed; --border:#dadce0; --border-strong:#bdc1c6; --text-1:#3c4043; --text-2:#5f6368; --text-muted:#70757a; --text-strong:#202124; --accent:#1a73e8; --accent-h:#1765cc; --accent-soft:#e8f0fe; --on-accent:#ffffff; --success:#1e7a52; --success-soft:#e3f4ea; --warning:#b8892b; --warning-soft:#f7ecd0; --error:#c0392b; --error-soft:#fce8e6; --violet:#7c3aed; --violet-soft:#f3efff; --highlight:#b07d10; /* large fills only - these fail contrast as text, by design */ --accent-fill:#3bbfa0; --violet-fill:#9b7bd4; --gold-fill:#e6b422; --gray:#9aa0a6; } /* ============================================================ PIGEON (neo-brutalist pixel) — colors AND surface treatment ============================================================ */ [data-theme="pigeon"] { /* CLEAN PIGEON: white windows, ink nav, pigeon trio (teal/violet/gold) */ --bg:#f4f4f2; --card:#ffffff; --hover:#ececeb; --sidebar:#141414; --table-head:#f4f4f2; --table-row:#ececeb; --border:#141414; --border-strong:#141414; --text-1:#1b1b18; --text-2:#45464a; --text-muted:#6b6f76; --text-strong:#141414; --accent:#0f8f78; --accent-h:#0b6f5e; --accent-soft:#e6f5f0; --on-accent:#ffffff; --success:#1e7a52; --success-soft:#e3f4ea; --warning:#b8892b; --warning-soft:#f7ecd0; --error:#c0392b; --error-soft:#fbe5e2; --violet:#6d28d9; --violet-soft:#f0eafc; --highlight:#e6b422; /* neo-brutal structural palette (used by the skin below) */ --px-ink:#141414; --px-teal:#25b89b; --px-violet:#8b6fd4; --px-gold:#eab308; --px-paper:#141414; --px-cream:#f4f4f2; } /* ---- clean flat canvas (no dot-grid) ---- */ [data-theme="pigeon"] body{ background-color:#f4f4f2; background-image:none; } /* ---- SURFACES: ink border + HARD offset shadow (kills the soft material shadow) ---- */ [data-theme="pigeon"] .card, [data-theme="pigeon"] .stile, [data-theme="pigeon"] .cm-card, [data-theme="pigeon"] .gcm-card, [data-theme="pigeon"] .gc, [data-theme="pigeon"] .panel, [data-theme="pigeon"] .box, [data-theme="pigeon"] .surface, [data-theme="pigeon"] .tile, [data-theme="pigeon"] .widget, [data-theme="pigeon"] .sheet{ border:2.5px solid var(--px-ink)!important; box-shadow:4px 4px 0 var(--px-ink)!important; border-radius:12px!important; } /* rounded stat pills (sbc) get a lighter chunky treatment */ [data-theme="pigeon"] .sbc{ border:2px solid var(--px-ink)!important; box-shadow:2px 2px 0 var(--px-ink)!important; } /* per-page bespoke surfaces (discovered): border + hard shadow only, keep own radius. Rows/chips/inputs/bubbles deliberately excluded so lists don't become stacks of boxes. */ [data-theme="pigeon"] .mcard,[data-theme="pigeon"] .modal,[data-theme="pigeon"] .pcard, [data-theme="pigeon"] .pvcard,[data-theme="pigeon"] .acomp,[data-theme="pigeon"] .addcard, [data-theme="pigeon"] .addpanelcard,[data-theme="pigeon"] .addm,[data-theme="pigeon"] .avpcard, [data-theme="pigeon"] .cal-form,[data-theme="pigeon"] .cal-today,[data-theme="pigeon"] .ccard, [data-theme="pigeon"] .clcard,[data-theme="pigeon"] .coach,[data-theme="pigeon"] .cs-card, [data-theme="pigeon"] .cs-tip,[data-theme="pigeon"] .drop,[data-theme="pigeon"] .emptytab, [data-theme="pigeon"] .feedwrap,[data-theme="pigeon"] .fsec,[data-theme="pigeon"] .gc-create, [data-theme="pigeon"] .gcm-desc,[data-theme="pigeon"] .idcard,[data-theme="pigeon"] .menu, [data-theme="pigeon"] .amenu,[data-theme="pigeon"] .vmenu,[data-theme="pigeon"] .mstat, [data-theme="pigeon"] .nccard,[data-theme="pigeon"] .pbcard,[data-theme="pigeon"] .pmreader, [data-theme="pigeon"] .pnote,[data-theme="pigeon"] .pg,[data-theme="pigeon"] .rc, [data-theme="pigeon"] .railcard,[data-theme="pigeon"] .refcol,[data-theme="pigeon"] .resp, [data-theme="pigeon"] .rowcard,[data-theme="pigeon"] .scard,[data-theme="pigeon"] .schedprev, [data-theme="pigeon"] .setup,[data-theme="pigeon"] .sheet,[data-theme="pigeon"] .stalebar, [data-theme="pigeon"] .sugg,[data-theme="pigeon"] .tcard,[data-theme="pigeon"] .tk, [data-theme="pigeon"] .wcard,[data-theme="pigeon"] .wg,[data-theme="pigeon"] .wk, [data-theme="pigeon"] .wqcard,[data-theme="pigeon"] .wqnote,[data-theme="pigeon"] .wqsum{ border:2.5px solid var(--px-ink)!important; box-shadow:4px 4px 0 var(--px-ink)!important; } /* inner header/body stay as crisp DIVIDERS, never their own boxes */ [data-theme="pigeon"] .card-h{border-bottom:2px solid var(--px-ink)!important} /* ---- MONO uppercase eyebrow / stat labels ---- */ [data-theme="pigeon"] .stile .k, [data-theme="pigeon"] .sbc .k, [data-theme="pigeon"] .grp, [data-theme="pigeon"] .eyebrow{ font-family:var(--mono)!important; text-transform:uppercase;letter-spacing:.06em;font-weight:800; } [data-theme="pigeon"] .stile .v,[data-theme="pigeon"] .sbc .v{font-weight:800} /* ---- BUTTONS: chunky bordered w/ hard shadow + press animation ---- */ [data-theme="pigeon"] .btn, [data-theme="pigeon"] .cm-btn, [data-theme="pigeon"] .gc-btn, [data-theme="pigeon"] .cbbtn, [data-theme="pigeon"] .gcm-save, [data-theme="pigeon"] .td-plus{ border:2px solid var(--px-ink)!important; box-shadow:2px 2px 0 var(--px-ink)!important; border-radius:8px!important;font-weight:750!important; transition:transform .08s,box-shadow .08s; } [data-theme="pigeon"] .btn:active, [data-theme="pigeon"] .cm-btn:active, [data-theme="pigeon"] .gc-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--px-ink)!important} /* ---- PILLS / BADGES / STATUS chips / tabs: mono uppercase w/ ink edge ---- */ [data-theme="pigeon"] [class*="pill"], [data-theme="pigeon"] [class*="badge"], [data-theme="pigeon"] [class*="chip"], [data-theme="pigeon"] .ntab, [data-theme="pigeon"] .pulse-tab{ border:2px solid var(--px-ink)!important; box-shadow:1.5px 1.5px 0 var(--px-ink)!important; border-radius:6px!important; font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em;font-weight:800; } /* active tab reads as a filled teal chip */ [data-theme="pigeon"] .ntab.on, [data-theme="pigeon"] .pulse-tab.on{background:var(--px-teal)!important;color:var(--px-ink)!important} /* ---- INPUTS / SEARCH ---- */ [data-theme="pigeon"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="pigeon"] select, [data-theme="pigeon"] textarea, [data-theme="pigeon"] .search{ border:2px solid var(--px-ink)!important; box-shadow:2px 2px 0 var(--px-ink)!important; border-radius:8px!important; } /* ---- table rows: crisp ink separators ---- */ [data-theme="pigeon"] table tr{border-color:var(--px-ink)} /* ---- SHELL SIDEBAR: black ink nav, light text, teal active chip, gold "os" ---- */ [data-theme="pigeon"] aside.w-56{ background:var(--px-ink)!important; border-right:2.5px solid var(--px-ink)!important; } /* default text → light on the ink nav (brand wordmark, gray-200 items, Settings). */ [data-theme="pigeon"] aside.w-56 a, [data-theme="pigeon"] aside.w-56 [class*="text-gray"], [data-theme="pigeon"] aside.w-56 .font-semibold, [data-theme="pigeon"] aside.w-56 nav a{ color:#f3f3f0!important; } /* nav items: neutral base with room for the active chip's border */ [data-theme="pigeon"] aside.w-56 nav a{ border:2px solid transparent!important; border-radius:8px!important; } [data-theme="pigeon"] aside.w-56 nav a:hover{ background:rgba(255,255,255,.08)!important; } /* ACTIVE nav (aria-current) → teal ink-chip; inactive stay flat */ [data-theme="pigeon"] aside.w-56 nav a[aria-current="page"]{ background:var(--px-teal)!important; color:var(--px-ink)!important; border:2px solid var(--px-ink)!important; box-shadow:3px 3px 0 var(--px-ink)!important; font-weight:800!important; } /* section group labels → mono, muted-light */ [data-theme="pigeon"] aside.w-56 p[class*="tracking-widest"]{ font-family:var(--mono)!important; color:#9a9a95!important; font-weight:800; } /* gold "os" in the wordmark */ [data-theme="pigeon"] aside.w-56 .font-semibold span{ color:var(--px-gold)!important; } /* ---- pigeon trio: colorize stat tiles where they appear (bento pops) + violet focus ---- */ [data-theme="pigeon"] .stile:nth-of-type(4n+1),[data-theme="pigeon"] .sbc:nth-of-type(4n+1){background:var(--px-teal)!important;color:var(--px-ink)!important} [data-theme="pigeon"] .stile:nth-of-type(4n+2),[data-theme="pigeon"] .sbc:nth-of-type(4n+2){background:var(--px-violet)!important;color:#ffffff!important} [data-theme="pigeon"] .stile:nth-of-type(4n+3),[data-theme="pigeon"] .sbc:nth-of-type(4n+3){background:var(--px-gold)!important;color:var(--px-ink)!important} [data-theme="pigeon"] .stile:nth-of-type(4n+4),[data-theme="pigeon"] .sbc:nth-of-type(4n+4){background:var(--px-ink)!important;color:#ffffff!important} [data-theme="pigeon"] .stile .v,[data-theme="pigeon"] .stile .k,[data-theme="pigeon"] .sbc .v,[data-theme="pigeon"] .sbc .k{color:inherit!important} [data-theme="pigeon"] :focus-visible{outline:2.5px solid var(--px-violet)!important;outline-offset:2px} /* ---- SALES TAB pigeon skin: its bespoke widgets get the same ink border + hard shadow. Border/shadow ONLY (sizing/layout unchanged = pure skin); scoped to pigeon so the sales session's Light work is untouched; never edits sales_app.html. ---- */ [data-theme="pigeon"] .opener,[data-theme="pigeon"] .gcard,[data-theme="pigeon"] .quotecard, [data-theme="pigeon"] .addpanelcard,[data-theme="pigeon"] .askbox,[data-theme="pigeon"] .dictate, [data-theme="pigeon"] .fadd,[data-theme="pigeon"] .modetabs,[data-theme="pigeon"] .cbpick, [data-theme="pigeon"] .activelead:not(.urgent){ border:2.5px solid var(--px-ink)!important; box-shadow:4px 4px 0 var(--px-ink)!important; } [data-theme="pigeon"] .activelead.urgent{ border:2.5px solid var(--error)!important; box-shadow:4px 4px 0 var(--error)!important; } /* sales buttons → chunky bordered */ [data-theme="pigeon"] .lbtn,[data-theme="pigeon"] .apptbtn,[data-theme="pigeon"] .askbtn, [data-theme="pigeon"] .pipebtn,[data-theme="pigeon"] .enrichbtn,[data-theme="pigeon"] .ltbtn, [data-theme="pigeon"] .cbtn,[data-theme="pigeon"] .putx,[data-theme="pigeon"] .hist{ border:2px solid var(--px-ink)!important; box-shadow:2px 2px 0 var(--px-ink)!important; } /* ============================================================ DARK (revived) ============================================================ */ [data-theme="dark"] { --bg:#141414; --card:#1e1e1e; --hover:#272727; --sidebar:#0a0a0a; --table-head:#1a1a1a; --table-row:#282828; --border:#2e2e2e; --border-strong:#3a3a3a; --text-1:#f1f3f4; --text-2:#c2c8d0; --text-muted:#9da5b0; --text-strong:#ffffff; --accent:#4285f4; --accent-h:#5a95f5; --accent-soft:#1c2c46; --on-accent:#ffffff; /* teal primary on dark; structure unchanged */ --success:#34d399; --success-soft:#12281f; --warning:#fbbf24; --warning-soft:#2a2412; --error:#f87171; --error-soft:#2a1615; --violet:#a78bfa; --violet-soft:#2a2440; --highlight:#fbbf24; } /* ---- Pijin category family: six colours for things that sit side by side and must be told apart (contact kinds, stages, chips). Validated as a set. Green is absent on purpose - it is only dE 7.2 from the brand teal; green stays semantic (success). ---- */ :root, [data-theme="light"] { --cat-teal:#0f8f78; --cat-teal-soft:#e6f5f0; --cat-gold:#b07d10; --cat-gold-soft:#f7ecd0; --cat-violet:#7c3aed; --cat-violet-soft:#f3efff; --cat-red:#c0392b; --cat-red-soft:#fce8e6; --cat-blue:#1668a5; --cat-blue-soft:#e7f0f8; --cat-rose:#a8447a; --cat-rose-soft:#f9eaf2; } [data-theme="pigeon"] { --cat-teal:#0f8f78; --cat-teal-soft:#e6f5f0; --cat-gold:#b8892b; --cat-gold-soft:#f7ecd0; --cat-violet:#6d28d9; --cat-violet-soft:#f0eafc; --cat-red:#c0392b; --cat-red-soft:#fbe5e2; --cat-blue:#1668a5; --cat-blue-soft:#e7f0f8; --cat-rose:#a8447a; --cat-rose-soft:#f9eaf2; } [data-theme="dark"] { --cat-teal:#3bbfa0; --cat-teal-soft:#12312b; --cat-gold:#e6b422; --cat-gold-soft:#332a12; --cat-violet:#a78bfa; --cat-violet-soft:#251f3d; --cat-red:#f87171; --cat-red-soft:#3a1f1f; --cat-blue:#5aa9e6; --cat-blue-soft:#16283a; --cat-rose:#e08cba; --cat-rose-soft:#331f2b; } /* Platform mode - see platform-mode.js. Hidden, not removed: these docks are correct inside an agency's OS and wrong for the person who owns the platform. */ html.pj-platform #pjahBar, /* Pijin Assistant - Faith's assistant, not Pijin's */ html.pj-platform #pjclkDock, html.pj-platform #pjclk, html.pj-platform [id^="pclk"], /* Time Clock - nobody clocks in to run a platform */ html.pj-platform #pjfb-dock, html.pj-platform [id^="pjfb-"] /* Feedback panel - the Support tab is this, done properly */ { display: none !important; } /* The last three agency things in the sidebar. Done in CSS rather than by opening a ternary in minified React and hunting for where to close it - that is a white-screen for a cosmetic win, and the first attempt at it could not find its own closing anchor, which was the warning. */ html.pj-platform #pjahBtn, /* Pijin Assistant - the agency's, not Pijin's */ html.pj-platform a[href="/feedback"], /* an agency's report board; Support replaces it */ html.pj-platform nav a[href="/admin"] /* a way back, not a place to stand */ { display: none !important; } /* the wrappers those sat in, so their padding does not leave a gap behind */ html.pj-platform div:has(> a[href="/feedback"]), html.pj-platform div:has(> a[href="/admin"]) { display: none !important; }