/* =========================================================================== Storyboard Events — shared theme (prototype) Dark, gold (#d4af37) + teal (#1eb4ad) on near-black. Mirrors emo-sparkles palette. Used by admin.html and offer.html so both share one visual identity. =========================================================================== */ :root{ --bg:#0d0f12; --bg-2:#14171c; --bg-3:#1b1f26; --panel:#16191f; --panel-2:#1d222a; --line:#2a2f38; --line-soft:#222730; --text:#f0ede8; --muted:#9aa3b0; --muted-2:#6b7280; /* tighter palette: ONE gold + ONE teal + neutrals + 2 semantic colors. --amber/--green/--red kept as aliases so nothing breaks, but they fold into the same family to avoid a rainbow. */ --gold:#d4af37; --gold-soft:#e3c98a; --teal:#1ea7a0; --teal-soft:#4fc3bc; --red:#cf5a4f; --green:#4aa886; --amber:var(--gold-soft); --radius:14px; --radius-sm:9px; --shadow:0 18px 50px rgba(0,0,0,.45); --serif:"Cormorant Garamond","Playfair Display",Georgia,serif; --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background: radial-gradient(900px 500px at 85% -10%, rgba(30,180,173,.10), transparent 60%), radial-gradient(1000px 600px at -5% 0%, rgba(212,175,55,.08), transparent 55%), var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; } a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-weight:600;margin:0} /* --- sparkles: keep particles BEHIND content + soft blur for readability --- The engine CSS only lifts content above the canvas for the Elementor surfaces, not for .emo-sparkle-offer / .emo-sparkle-admin. We fix that here (without touching the vendor engine files). */ .emo-sparkle-offer, .emo-sparkle-admin{position:relative} /* lift ONLY the main content wrapper above the canvas — never the fixed overlays (#drawer, #stickyNext, #drawerBg keep their own position:fixed / z-index) */ .emo-sparkle-admin > #sb-admin-root, .emo-sparkle-offer > .wrap{position:relative;z-index:1} /* Force the canvas to stay absolutely positioned. The vendor css lifts ALL children of .e-con.emo-sparkle-{header,content,footer} to position:relative WITHOUT excluding the canvas, which turns it into an in-flow box whose height==element height → a ResizeObserver feedback loop that grows the surface infinitely. !important + inset:0 breaks that loop (vendor untouched). --spark-blur / --spark-opacity are theme-controlled (Personalization → glow). */ .emo-sparkle-canvas{ position:absolute!important; inset:0; z-index:0; pointer-events:none; opacity:var(--spark-opacity,.5); filter:blur(var(--spark-blur,.8px)); } /* Light ("day") mode: the vendor forces mix-blend-mode:screen, which can only lighten pixels — on a light background every particle vanishes. --spark-blend is set by Theme (multiply when the background is light, screen when dark); the canvas.* selector out-specifies the vendor rule that loads after us. */ canvas.emo-sparkle-canvas{ mix-blend-mode:var(--spark-blend,screen); } /* ---- typography helpers ---- */ .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:600} .serif{font-family:var(--serif)} .muted{color:var(--muted)} .gold{color:var(--gold)} .teal{color:var(--teal)} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center; border:1px solid var(--line);background:var(--panel-2);color:var(--text); padding:9px 15px;border-radius:999px;font-size:13px;font-weight:500; cursor:pointer;transition:.16s ease;white-space:nowrap; } .btn:hover{border-color:var(--gold);color:var(--gold-soft)} .btn.sm{padding:6px 11px;font-size:12px} .btn.primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#19150a;border-color:transparent;font-weight:600} .btn.primary:hover{filter:brightness(1.06);color:#19150a} .btn.teal{background:linear-gradient(180deg,var(--teal-soft),var(--teal));color:#04201e;border-color:transparent;font-weight:600} .btn.ghost{background:transparent} .btn.danger:hover{border-color:var(--red);color:var(--red)} .btn[disabled]{opacity:.4;cursor:not-allowed} /* ---- panels / cards ---- */ .panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow)} .card{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);transition:.16s} .card:hover{border-color:var(--line)} .card.selectable{cursor:pointer} .card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} /* ---- badges ---- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--bg-3)} .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} /* status badges drawn from the unified palette: neutral → gold → teal → green/red */ .badge.new{color:var(--muted)} .badge.contacted{color:var(--muted)} .badge.offer_generated{color:var(--gold-soft)} .badge.offer_sent{color:var(--gold)} .badge.opened{color:var(--teal)} .badge.offer_chosen{color:var(--teal)} .badge.confirmed{color:var(--green)} .badge.rejected{color:var(--red)} .badge.high{color:var(--red)} .badge.medium{color:var(--gold-soft)} .badge.low{color:var(--muted)} /* ---- form controls ---- */ input,select,textarea{ font-family:inherit;font-size:13px;color:var(--text); background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)} label.fld{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} /* range slider — gold thumb on thin track */ input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;height:22px} input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--teal),var(--gold))} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);margin-top:-8px;cursor:pointer;box-shadow:0 0 0 4px rgba(212,175,55,.15)} input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--teal),var(--gold))} input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--gold);cursor:pointer} /* pill toggle group */ .pillgroup{display:flex;flex-wrap:wrap;gap:8px} .pill{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg-3);color:var(--muted);cursor:pointer;font-size:12.5px;transition:.15s} .pill:hover{color:var(--text);border-color:var(--gold)} .pill.on{background:rgba(212,175,55,.12);border-color:var(--gold);color:var(--gold-soft);font-weight:600} /* tables */ table.tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)} .tbl td{padding:11px 12px;border-bottom:1px solid var(--line-soft)} .tbl tbody tr{cursor:pointer;transition:.12s} .tbl tbody tr:hover{background:var(--bg-3)} /* misc */ .divider{height:1px;background:var(--line-soft);border:0;margin:18px 0} .scroll::-webkit-scrollbar{width:9px;height:9px} .scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .scroll::-webkit-scrollbar-track{background:transparent} .tag{font-size:10.5px;padding:2px 7px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line);color:var(--muted)} .tag.inc{color:var(--green);border-color:rgba(63,178,127,.4)} .tag.opt{color:var(--teal-soft);border-color:rgba(30,180,173,.4)} .tag.rec{color:var(--gold-soft);border-color:rgba(212,175,55,.4)} /* ===================== Analytics view (read-only) ===================== */ .an-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0} .an-kpi{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px} .an-kpi .k-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:600} .an-kpi .k-val{font-size:24px;font-weight:600;color:var(--text);margin-top:6px;line-height:1.1;font-family:Georgia,'Times New Roman',serif} .an-kpi .k-val .u{font-size:13px;color:var(--muted);font-weight:400;margin-left:3px} .an-kpi .k-sub{font-size:11.5px;color:var(--muted);margin-top:5px} .an-kpi.gold .k-val{color:var(--gold-soft)} .an-kpi.teal .k-val{color:var(--teal-soft)} .an-kpi .k-sub .up{color:var(--green)} .an-kpi .k-sub .down{color:var(--red)} .an-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .an-cols.wide{grid-template-columns:1.4fr 1fr} .an-sec{padding:16px 18px;margin-top:16px} .an-sec .an-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px} .an-sec .an-h .t{font-size:14px;font-weight:600;color:var(--text)} .an-sec .an-h .s{font-size:11.5px;color:var(--muted-2)} .an-bars{display:flex;flex-direction:column;gap:9px} .an-bar-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;font-size:12.5px} .an-bar-label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .an-bar-track{height:9px;background:var(--bg-3);border-radius:6px;overflow:hidden} .an-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--gold));min-width:2px;transition:width .4s} .an-bar-fill.teal{background:linear-gradient(90deg,var(--teal-soft),var(--teal))} .an-bar-fill.gold{background:linear-gradient(90deg,var(--gold-soft),var(--gold))} .an-bar-fill.red{background:linear-gradient(90deg,#e08a80,var(--red))} .an-bar-val{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;min-width:42px;text-align:right} .an-vbars{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:8px} .an-vbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .an-vbar .vb-fill{width:70%;max-width:46px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-radius:6px 6px 0 0;min-height:2px;transition:height .4s} .an-vbar .vb-fill.teal{background:linear-gradient(180deg,var(--teal-soft),var(--teal))} .an-vbar .vb-x{font-size:10px;color:var(--muted-2);white-space:nowrap} .an-vbar .vb-v{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums} .an-funnel{display:flex;flex-direction:column;gap:7px} .an-step{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;font-size:12.5px} .an-step .st-bar{height:26px;background:linear-gradient(90deg,rgba(30,167,160,.55),rgba(212,175,55,.5));border-radius:7px;display:flex;align-items:center;padding-left:10px;color:var(--text);font-weight:600;font-size:12px;min-width:30px} .an-step .st-label{color:var(--muted)} .an-step .st-meta{color:var(--muted-2);font-size:11px} .an-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .an-chip{background:var(--bg-3);border:1px solid var(--line-soft);border-radius:9px;padding:9px 12px;min-width:96px} .an-chip .c-l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .an-chip .c-v{font-size:16px;font-weight:600;color:var(--text);margin-top:3px} .an-empty{color:var(--muted-2);font-size:12.5px;font-style:italic;padding:10px 0} .an-flag{font-size:13px;margin-right:5px} .an-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle} /* =========================================================================== Mobile touch ergonomics — shared by admin.html + offer.html (both load this file). Additive media block: desktop rules above are untouched. Per-file overrides (e.g. .cd-grid / .op-tech inputs) are bumped in their own