/* ── Auctus Ops canonical favicon (copy into every new page ) ──────── ───────────────────────────────────────────────────────────────────────── */ /* shared.css — Auctus Ops Dashboard common styles */ /* Auth overlay — single source of truth lives in /auth-overlay.css. @import MUST stay above all style rules below (CSS spec). */ @import url("/auth-overlay.css"); /* ── Site header — shared across all dashboard pages ── */ .biq-hdr { position: sticky; top: 0; z-index: 200; background: rgba(8,8,14,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(109,204,209,.35); padding: 0 40px; height: 72px; display: flex; align-items: center; gap: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.35); } .biq-hdr::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #6DCCD1 30%, #94D6DC 50%, #6DCCD1 70%, transparent); opacity: .7; } .biq-hdr-logo { display: flex; align-items: center; padding-right: 20px; border-right: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } .biq-hdr-logo svg { height: 34px; width: auto; display: block; } .biq-hdr-title { flex: 1; display: flex; flex-direction: column; gap: 2px; } .biq-hdr-name { font-size: 20px; line-height: 1; letter-spacing: .1em; color: #fff; font-weight: 900; text-transform: uppercase; } .biq-hdr-name .thin { font-weight: 300; opacity: .7; margin-right: 3px; color: #C4A24A; } .biq-hdr-rule { height: 1px; background: linear-gradient(90deg, #C4A24A, rgba(196,162,74,.3), transparent); opacity: .6; margin-top: 3px; } .biq-hdr-sub { font-size: 9px; letter-spacing: .22em; color: #6DCCD1; text-transform: uppercase; opacity: .8; } .header-user { font-size: 12px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } /* Time-of-day greeting card — centered, floating, auto-fades after 30s (auth-gate.js) */ .greeting-card { position: fixed; top: 88px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 150; display: flex; align-items: center; gap: 10px; padding: 11px 22px; border-radius: 999px; background: rgba(8,8,14,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(109,204,209,.35); box-shadow: 0 8px 32px rgba(0,0,0,.35); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .6s ease, transform .6s ease; } .greeting-card.show { opacity: 1; transform: translateX(-50%) translateY(0); } .greeting-card .greeting-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; } .greeting-card .greeting-close { pointer-events: auto; cursor: pointer; flex-shrink: 0; margin: -4px -12px -4px 4px; padding: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: rgba(255,255,255,.55); font-size: 18px; line-height: 1; transition: color .15s ease, background .15s ease; } .greeting-card .greeting-close:hover { color: #fff; background: rgba(255,255,255,.12); } /* ── Content approval badges (content.html) ── */ .content-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .cb-ig-reel { background: rgba(109,40,217,0.12); color: #8b5cf6; } .cb-li-video { background: rgba(37,99,235,0.12); color: #3b82f6; } .cb-yt-long { background: rgba(220,38,38,0.12); color: #ef4444; } .cb-carousel { background: rgba(107,114,128,0.12); color: var(--text-secondary); } .cb-quote-card { background: rgba(217,119,6,0.12); color: #d97706; } .cb-caption { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-blog { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-ig { background: rgba(157,23,77,0.12); color: #db2777; } .cb-li { background: rgba(37,99,235,0.12); color: #3b82f6; } .cb-yt { background: rgba(220,38,38,0.12); color: #ef4444; } .cb-multi { background: rgba(107,114,128,0.12); color: var(--text-secondary); } .cb-web { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-meme { background: rgba(217,119,6,0.12); color: #d97706; } .chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .cb-fb { background: rgba(37,99,235,0.12); color: #3b82f6; } .cb-gg { background: rgba(217,119,6,0.12); color: #d97706; } /* ── Ops sub-dashboard header mark (used on every sub-page) ── */ .ops-hdr-wrap{display:flex;align-items:center;gap:18px} .ops-hdr-mark{width:32px;height:auto;flex-shrink:0} .ops-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6DCCD1;margin-bottom:6px} .ops-back{color:#6DCCD1;text-decoration:none} .ops-back:hover{text-decoration:underline} /* ── Shared error / empty state utilities ── */ .ops-error { padding: 20px 24px; background: rgba(220,38,38,0.08); border-left: 3px solid #ef4444; border-radius: 4px; font-size: 13px; color: #ef4444; display: flex; align-items: center; gap: 10px; } .ops-error::before { content: '⚠'; font-size: 16px; flex-shrink: 0; } .ops-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 13px; } .ops-empty-icon { font-size: 28px; margin-bottom: 10px; opacity: 0.4; } .ops-empty-msg { font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; font-size: 14px; } .ops-empty-sub { font-size: 12px; opacity: 0.7; } /* ── Inter-dashboard quick nav ── */ .dash-nav { position: relative; flex-shrink: 0; font-family: 'Lato', sans-serif; } /* Trigger lives inside the always-dark header — hardcoded dark palette */ .dash-nav-trigger { background: transparent; border: 1px solid #444; color: #9f9f9f; padding: 5px 12px 5px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; font-family: 'Lato', sans-serif; border-radius: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .dash-nav-trigger:hover, .dash-nav.open .dash-nav-trigger { border-color: #6DCCD1; color: #6DCCD1; } .dash-nav-arrow { display: inline-block; transition: transform 0.2s; font-size: 8px; } .dash-nav.open .dash-nav-arrow { transform: rotate(180deg); } /* Dropdown opens into page content — theme-aware */ .dash-nav-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; min-width: 210px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 1000; } .dash-nav.open .dash-nav-menu { display: block; } .dash-nav-menu a { display: block; padding: 8px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); text-decoration: none !important; white-space: nowrap; transition: background 0.1s, color 0.1s; } .dash-nav-menu a:hover { color: var(--text); background: var(--surface-alt); } .dash-nav-menu a.dash-current { color: var(--gold) !important; } .dash-nav-divider { height: 1px; background: var(--border-strong); margin: 4px 0; } /* ══════════════════════════════════════════════════════════════ DROPDOWN CANON — platform-wide. The line is NOT "form select vs action menu" — it's "will a user OPEN and read this menu?" A native into this so the OPEN menu is on-design (not OS-rendered). The native for a date field: its OPEN calendar popup is OS-rendered and cannot be styled, so it never matches the design (same rule as the native on the page — it hides the native input (keeps it as the value source-of-truth, shadows .value so existing reads/writes + change events keep working) and renders the .dp UI below. Panel shell + pill month/year jump. Theme-safe (pure tokens). Reference impl: sm-oversight task deadlines. ══════════════════════════════════════════════════════════════ */ .dp { position:relative; display:inline-block; } .dp-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; padding:0; border:0; } .dp-field { display:inline-flex; align-items:center; gap:8px; width:100%; background:var(--surface-alt); border:1px solid var(--border-strong); border-radius:7px; padding:8px 12px; font-size:12px; font-weight:600; font-family:inherit; color:var(--text); cursor:pointer; user-select:none; text-align:left; } .dp-field:hover { border-color:var(--text-muted); } .dp.open .dp-field { border-color:var(--teal); } .dp-field .dp-val { white-space:nowrap; } .dp-field .dp-val.dp-empty { color:var(--text-muted); } .dp-field .dp-cal-ico { margin-left:auto; flex-shrink:0; } /* position:fixed + JS-set left/top (dp.js place()) so the popup escapes any overflow:hidden ancestor (section cards, scroll rows). Coordinates are viewport-relative and recomputed on scroll/resize. Updated 2026-07-07. */ .dp-pop { display:none; position:fixed; z-index:3000; width:286px; background:var(--surface); border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.22); } .dp.open .dp-pop { display:block; } .dp-hd { display:flex; align-items:center; justify-content:space-between; background:rgba(109,204,209,.10); border-bottom:1px solid var(--border-strong); padding:10px 12px; } .dp-nav { width:28px; height:28px; border:0; background:none; border-radius:6px; font-size:16px; line-height:1; color:var(--teal); cursor:pointer; display:grid; place-items:center; font-family:inherit; } .dp-nav:hover { background:rgba(109,204,209,.16); } .dp-jump { background:var(--surface-alt); border:1px solid var(--border-strong); border-radius:100px; font-family:inherit; font-weight:700; font-size:13px; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:5px 11px; } .dp-jump .dp-cx { font-size:8px; color:var(--teal); } .dp-jump:hover { border-color:var(--teal); background:rgba(109,204,209,.12); } .dp-body { padding:12px; } .dp-dow { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border); margin-bottom:6px; padding-bottom:6px; } .dp-dow span { text-align:center; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); } .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .dp-zoom { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .dp-cell { aspect-ratio:1; border:0; background:none; border-radius:6px; font-size:13px; font-weight:600; font-family:inherit; color:var(--text); cursor:pointer; display:grid; place-items:center; } .dp-cell:hover { background:var(--surface-alt); } .dp-cell:disabled { color:var(--text-muted); cursor:default; } .dp-cell.dp-mute { color:var(--text-muted); } .dp-cell.dp-today { box-shadow:inset 0 0 0 1.5px var(--teal); color:var(--teal); } .dp-cell.dp-sel { background:var(--teal); color:#08080e; font-weight:800; box-shadow:none; } .dp-zcell { border:0; background:none; border-radius:6px; font-size:12px; font-weight:600; font-family:inherit; color:var(--text); cursor:pointer; display:grid; place-items:center; padding:13px 0; } .dp-zcell:hover { background:var(--surface-alt); color:var(--teal); } .dp-zcell:disabled { color:var(--text-muted); cursor:default; } .dp-zcell.dp-today { box-shadow:inset 0 0 0 1.5px var(--teal); color:var(--teal); } .dp-zcell.dp-sel { background:var(--teal); color:#08080e; font-weight:800; } .dp-foot { display:flex; gap:8px; padding:0 12px 12px; } .dp-foot button { flex:1; border:1px solid var(--border-strong); background:none; border-radius:6px; padding:7px 0; font-size:11px; font-weight:700; color:var(--text-secondary); cursor:pointer; font-family:inherit; } .dp-foot button:hover { border-color:var(--teal); color:var(--teal); } .dp-foot .dp-today-btn { background:var(--teal); color:#08080e; border-color:var(--teal); } .dp-foot .dp-today-btn:hover { background:var(--teal); color:#08080e; } /* ── .dp-range — date-range variant (opt-in via data-dp-range pairing on two inputs). One two-month popup; click start → end; days between connect in a teal band. Used only where a genuine range exists (event start/end, filters). Built by /dp.js — same theme-safe tokens as .dp. ── */ .dp-rpop { width:560px; max-width:92vw; } .dp-rpop .dp-months { display:flex; } .dp-rpop .dp-mo { flex:1; padding:12px; } .dp-rpop .dp-mo + .dp-mo { border-left:1px solid var(--border); } .dp-rpop .dp-motitle { text-align:center; font-size:12px; font-weight:700; color:var(--text); margin-bottom:8px; } .dp-rcell { position:relative; aspect-ratio:1; border:0; background:none; font-size:12px; font-weight:600; font-family:inherit; color:var(--text); cursor:pointer; display:grid; place-items:center; z-index:1; } .dp-rcell:hover { color:var(--teal); } .dp-rcell.dp-mute { color:var(--text-muted); cursor:default; } .dp-rcell.dp-in::before { content:""; position:absolute; inset:0; background:rgba(109,204,209,.14); z-index:-1; } .dp-rcell.dp-start::before { content:""; position:absolute; inset:0; left:50%; background:rgba(109,204,209,.14); z-index:-1; } .dp-rcell.dp-end::before { content:""; position:absolute; inset:0; right:50%; background:rgba(109,204,209,.14); z-index:-1; } .dp-rcell.dp-only::before { display:none; } .dp-rcell.dp-start > i, .dp-rcell.dp-end > i, .dp-rcell.dp-only > i { position:absolute; inset:2px; background:var(--teal); border-radius:6px; z-index:-1; } .dp-rcell.dp-start, .dp-rcell.dp-end, .dp-rcell.dp-only { color:#08080e; font-weight:800; } .dp-rcell.dp-today:not(.dp-start):not(.dp-end):not(.dp-only) { box-shadow:inset 0 0 0 1.5px var(--teal); border-radius:6px; color:var(--teal); } .dp-rfoot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-top:1px solid var(--border); } .dp-rsummary { font-size:11px; color:var(--text-secondary); font-weight:600; } .dp-rsummary b { color:var(--text); } .dp-ractions { display:flex; gap:8px; } .dp-ractions button { border:1px solid var(--border-strong); background:none; border-radius:6px; padding:6px 12px; font-size:11px; font-weight:700; color:var(--text-secondary); cursor:pointer; font-family:inherit; } .dp-ractions button:hover { border-color:var(--teal); color:var(--teal); } .dp-ractions .dp-apply { background:var(--teal); color:#08080e; border-color:var(--teal); } .dp-ractions .dp-apply:disabled { opacity:.4; cursor:default; background:var(--surface-alt); color:var(--text-muted); border-color:var(--border-strong); } /* ══════════════════════════════════════════════════════════════ PERCEIVED-QUALITY CANON (locked 2026-06-22). Platform-wide polish primitives: skeleton loaders, optimistic save-states, toasts, cache badges. Paired with /ops-skel.js, which auto-upgrades existing "Loading…" placeholders into shimmer (no per-page wiring) and exposes window.OpsSkel for optimistic writes + toasts. Theme-safe (pure tokens → works dark & light). Reference impl: the four IG "vibe-coded polish" ideas, applied in-skin. ══════════════════════════════════════════════════════════════ */ /* ── ① Skeleton loader ── shimmer placeholder in the data's final shape. Put .skel on any box; or let /ops-skel.js swap it in for "Loading…" text. */ @keyframes ops-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } } .skel { background:linear-gradient(90deg, var(--surface-alt) 25%, var(--border-mid) 37%, var(--surface-alt) 63%); background-size:400% 100%; animation:ops-shimmer 1.4s ease infinite; border-radius:5px; color:transparent !important; pointer-events:none; user-select:none; } @media (prefers-reduced-motion: reduce) { .skel { animation:none; opacity:.65; } } .skel-line { display:block; height:12px; margin:8px 0; } /* stacked text bar */ .skel-line.sk-sm { width:55%; } .skel-line.sk-lg { height:20px; width:72%; } .skel-inline { display:inline-block; height:12px; width:84px; vertical-align:middle; border-radius:4px; } /* graceful give-up: /ops-skel.js converts a skeleton that never resolved (hung fetch) into this muted note rather than shimmering forever. */ .skel-stuck { color:var(--text-muted); font-size:12px; font-style:italic; padding:4px 0; } /* ── ③ Optimistic save-state ── tiny status word next to an instantly-updated row. */ .ops-st { font-size:10px; font-weight:700; letter-spacing:.04em; transition:opacity .2s, color .2s; } .ops-st-saving { color:var(--warn-text); } .ops-st-saved { color:var(--ok-text); } .ops-st-failed { color:var(--danger-text); } .ops-pending { opacity:.55; transition:opacity .2s; } /* row mid-save */ /* ── Toast ── transient confirm / error surfaced by OpsSkel.toast(). */ .ops-toast-zone { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:4000; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; } .ops-toast { pointer-events:auto; background:var(--surface); border:1px solid var(--border-strong); border-left:3px solid var(--teal); border-radius:8px; padding:11px 16px; font-size:12.5px; color:var(--text); font-family:'Lato',sans-serif; box-shadow:0 12px 34px rgba(0,0,0,.45); display:flex; align-items:center; gap:10px; max-width:360px; opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; } .ops-toast.show { opacity:1; transform:translateY(0); } .ops-toast.ok { border-left-color:var(--ok); } .ops-toast.err { border-left-color:var(--danger); } .ops-toast b { font-weight:700; } /* ── ② Cache badge ── 8px chip showing a panel served from cache vs fetched live. */ .ops-cache { font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:100px; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; } .ops-cache.hit { background:rgba(98,194,142,.14); color:var(--ok-text); border:1px solid rgba(98,194,142,.32); } .ops-cache.live { background:rgba(220,154,79,.15); color:var(--warn-text); border:1px solid rgba(220,154,79,.32); } /* ── Error + empty state actions ── paired with OpsSkel.error()/.empty() and the stuck-fetch fallback. (.ops-error / .ops-empty base styles live above.) */ .ops-error-txt { flex:1; line-height:1.45; } .ops-error-txt small { display:block; color:rgba(239,68,68,.72); font-size:11px; margin-top:3px; font-weight:400; } .ops-retry { flex-shrink:0; background:none; border:1px solid #ef4444; color:#ef4444; border-radius:100px; padding:5px 14px; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .15s; } .ops-retry:hover { background:rgba(239,68,68,.12); } .ops-empty-cta { margin-top:14px; background:var(--teal); color:#08080e; border:none; border-radius:100px; padding:8px 18px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; } .ops-empty-cta:hover { background:#7fd8dd; }