/* SparkCore Demo — inherits the site --sc-* tokens, with safe fallbacks. */ .scd{ --c-blue:var(--sc-blue,#2563eb); --c-ink:var(--sc-ink,#101828); --c-gray:var(--sc-gray-600,#4a5568); --c-line:var(--sc-gray-200,#d7dbe3); --c-bg:var(--sc-gray-50,#f7f8fa); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; width:100%; } .scd [hidden]{ display:none; } /* ---- dropzone (the whole card interior) ---- */ .scd-zone{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:1.5px dashed var(--c-line); border-radius:14px; background:transparent; cursor:pointer; padding:16px 18px; transition:border-color .15s ease, background .15s ease; font:inherit; } .scd-zone:hover, .scd-zone:focus-visible{ border-color:var(--c-blue); background:color-mix(in srgb, var(--c-blue) 4%, #fff); outline:none; } .scd-zone.is-drag{ border-color:var(--c-blue); background:color-mix(in srgb, var(--c-blue) 7%, #fff); } .scd-zone-ico{ flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--c-ink); color:#fff; } .scd-zone-ico svg{ width:20px; height:20px; } .scd-zone-text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .scd-zone-title{ font-size:15px; font-weight:700; color:var(--c-ink); } .scd-zone-sub{ font-size:13px; color:var(--sc-gray-500,#6b7280); } .scd-zone-busy{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--c-gray); } .scd-spin{ width:16px; height:16px; border-radius:50%; border:2.5px solid var(--c-line); border-top-color:var(--c-blue); animation:scd-spin .7s linear infinite; } @keyframes scd-spin{ to{ transform:rotate(360deg); } } .scd-error{ margin:10px 0 0; font-size:13px; font-weight:600; color:#b42318; background:#fef3f2; border:1px solid #fecdca; border-radius:10px; padding:10px 12px; } /* ---- modal ---- */ /* portal wrapper on : no box of its own, but passes the --c-* vars down to the modal */ .scd-portal{ display:contents; } .scd-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; } .scd-modal-overlay{ position:absolute; inset:0; background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .scd-dialog{ position:relative; z-index:1; width:100%; max-width:760px; background:#fff; border-radius:22px; box-shadow:0 30px 60px -20px rgba(16,24,40,.45); padding:18px; animation:scd-pop .2s ease; } @keyframes scd-pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } } .scd-x{ position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--sc-gray-100,#e6e8ee); color:var(--c-gray); cursor:pointer; } .scd-x:hover{ background:var(--c-bg); } .scd-x svg{ width:18px; height:18px; } /* ---- before/after comparison slider ---- */ .scd-compare{ position:relative; border-radius:16px; overflow:hidden; background:var(--sc-gray-100,#eceef2); aspect-ratio:16/10; user-select:none; touch-action:none; } .scd-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; } .scd-img-top{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 var(--pos,50%)); } .scd-handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.06); } .scd-handle-dot{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(16,24,40,.25); display:grid; place-items:center; cursor:ew-resize; } .scd-handle-dot::before{ content:""; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, var(--c-blue) 2px, transparent 2.5px) 0 0/6px 6px; opacity:.9; } .scd-tag{ position:absolute; top:14px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.04em; padding:6px 12px; border-radius:8px; } .scd-tag-l{ left:14px; background:var(--c-ink); color:#fff; } .scd-tag-r{ right:14px; background:var(--c-blue); color:#fff; } .scd-compare-cap{ text-align:center; font-size:12.5px; color:var(--sc-gray-500,#6b7280); margin:10px 0 4px; } /* ---- modal stats ---- */ .scd-modal-stats{ display:flex; align-items:center; gap:14px; padding:14px 4px 16px; border-top:1px solid var(--sc-gray-100,#eceef2); } .scd-ms{ display:flex; flex-direction:column; gap:1px; } .scd-ms-r{ margin-left:auto; text-align:right; } .scd-ms-label, .scd-ms-engine{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sc-gray-500,#6b7280); } .scd-ms-engine{ color:var(--c-blue); text-transform:none; font-weight:700; } .scd-ms-val{ font-size:20px; font-weight:800; color:var(--c-ink); font-variant-numeric:tabular-nums; } .scd-ms-opt{ color:var(--c-blue); } .scd-ms-save{ color:#15803d; font-size:14px; font-weight:800; } .scd-ms-sub{ font-size:11.5px; color:var(--sc-gray-500,#6b7280); } .scd-ms-arrow{ color:var(--sc-gray-400,#9aa3b2); font-size:18px; } /* ---- modal actions ---- */ .scd-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; } .scd-btn{ flex:1 1 0; min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; font-size:15px; border-radius:12px; padding:14px 18px; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:.15s ease; } .scd-btn{ text-decoration:none; } .scd-btn svg{ stroke:currentColor; } .scd-btn-dark{ background:var(--c-ink); color:#fff; } .scd-btn-dark:hover{ background:var(--sc-gray-800,#1f2937); } .scd-btn-blue{ background:var(--c-blue); color:#fff; } .scd-btn-blue:hover{ filter:brightness(.94); } .scd-btn-ghost{ background:#fff; color:var(--c-ink); border-color:var(--sc-gray-100,#e6e8ee); flex:0 0 auto; min-width:90px; } .scd-btn-ghost:hover{ background:var(--c-bg); } /* ---- history under the dropzone ---- */ .scd-history{ margin-top:14px; } .scd-history-title{ margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sc-gray-500,#6b7280); } .scd-history-list{ display:flex; flex-direction:column; gap:8px; } .scd-h-row{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--sc-gray-100,#e6e8ee); border-radius:12px; background:#fff; } .scd-h-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 auto; background:var(--c-bg); } .scd-h-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; } .scd-h-name{ font-size:13px; font-weight:600; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .scd-h-sizes{ font-size:12.5px; color:var(--c-gray); } .scd-h-sizes b{ color:var(--c-blue); } .scd-h-sizes em{ color:#15803d; font-style:normal; font-weight:700; } .scd-h-actions{ display:flex; gap:6px; flex:0 0 auto; } .scd-h-view, .scd-h-dl{ font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:9px; cursor:pointer; text-decoration:none; border:1px solid var(--sc-gray-100,#e6e8ee); background:#fff; color:var(--c-ink); } .scd-h-dl{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); } .scd-h-view:hover{ background:var(--c-bg); } .scd-h-dl:hover{ filter:brightness(1.15); } @media (max-width:480px){ .scd-h-actions{ flex-direction:column; } } @media (max-width:560px){ .scd-modal-actions{ flex-direction:column; } .scd-btn{ width:100%; } }