/* =====================================================================
slavpic-ui.css — all custom slavpic components in one file
Fonts (add to ):
Icons: use pictograms/slavpic-pictograms.svg →
See README.md for markup of every component.
===================================================================== */
:root {
--sp-mint: #3dff9a; /* hero accent */
--sp-mint-2: #b8ffd8; /* bright mint */
--sp-mint-3: #8fcdb0; /* muted mint */
--sp-text: #eafff4;
--sp-text-2: #c5e7d4;
--sp-dim: #6f8f7e;
--sp-dim-2: #557565;
--sp-bg: #020806; /* page */
--sp-bg-2: #04140c;
--sp-surface: #070d0a; /* cards, fields */
--sp-raised: #0d1c15; /* raised / ghost buttons */
--sp-line: #244036; /* borders */
--sp-line-2: #1c3a2c;
--sp-font: 'Share Tech Mono', ui-monospace, Menlo, monospace;
--sp-display: 'Orbitron', var(--sp-font);
}
@property --sp-a { syntax: ""; inherits: false; initial-value: 0deg; }
/* ---------- page ---------- */
.sp-page {
background-color: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font);
background-image: repeating-linear-gradient(0deg, rgba(61,255,154,.035) 0 1px, transparent 1px 4px);
}
/* ---------- BASE SHAPE: cut corners (top-left + bottom-right) ----------
Any element: class="sp-cut" — size with --c (default 12px)
Add a border: class="sp-cut sp-edge" — color --bc, width --b */
.sp-cut {
--c: 12px;
clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.sp-edge { position: relative; --bc: var(--sp-line); --b: 1.5px; }
.sp-edge::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--bc); transition: background .2s;
clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c),
var(--b) calc(var(--c) + var(--b) * .41), var(--b) calc(100% - var(--b)), calc(100% - var(--c) - var(--b) * .41) calc(100% - var(--b)),
calc(100% - var(--b)) calc(100% - var(--c) - var(--b) * .41), calc(100% - var(--b)) var(--b), calc(var(--c) + var(--b) * .41) var(--b),
var(--b) calc(var(--c) + var(--b) * .41), 0 var(--c));
}
/* ---------- panel ---------- */
.sp-panel { --c: 24px; --bc: var(--sp-line-2); padding: 28px; background: linear-gradient(170deg, #0a1610, #060c09 40%); }
.sp-hazard { position: absolute; top: 10px; right: 34px; width: 46px; height: 7px; opacity: .6;
background: repeating-linear-gradient(-45deg, var(--sp-mint) 0 4px, transparent 4px 8px); }
/* ---------- step badge + headings ---------- */
.sp-step { --c: 9px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
background: var(--sp-mint); color: var(--sp-bg-2); font: 900 18px var(--sp-display); }
.sp-h2 { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font: 900 26px var(--sp-display); color: var(--sp-mint); }
.sp-h2 svg { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(61,255,154,.5)); }
.sp-desc { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: var(--sp-mint-3); }
.sp-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-mint-2); }
.sp-label svg { width: 20px; height: 20px; }
.sp-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sp-line), transparent); }
/* ---------- buttons ---------- */
.sp-btn { --c: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px;
border: 0; cursor: pointer; font: 17px var(--sp-font); letter-spacing: .04em; text-decoration: none; }
.sp-btn svg { width: 22px; height: 22px; flex: none; }
.sp-btn--primary { background: var(--sp-mint); color: var(--sp-bg-2); }
.sp-btn--primary .sp-btn__ico { --c: 6px; width: 32px; height: 32px; margin-left: -10px; display: flex; align-items: center; justify-content: center; background: var(--sp-bg-2);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.sp-btn--ghost { background: var(--sp-raised); color: var(--sp-mint-2); --bc: var(--sp-mint); } /* use with sp-edge */
.sp-btn--quiet { background: var(--sp-surface); color: var(--sp-dim); --bc: var(--sp-line); } /* use with sp-edge */
/* only interactive elements light up on hover — not container panels/frames */
.sp-edge:hover:not(.sp-panel):not(.sp-frame):not(.scenario-panel) { --bc: var(--sp-mint); }
.sp-btn:focus-visible { outline: 2px solid var(--sp-mint); outline-offset: 3px; }
/* GENERATE — shine when idle, moving stripes while generating (.is-generating on it or any parent) */
.sp-generate { --c: 14px; position: relative; overflow: hidden; isolation: isolate; min-height: 64px; width: 100%;
border: 0; cursor: pointer; background: var(--sp-mint); color: var(--sp-bg-2); font: 900 20px var(--sp-display); letter-spacing: .14em; }
.sp-generate::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: sp-shine 4.5s ease-in-out infinite; }
.is-generating .sp-generate, .sp-generate.is-generating {
background: repeating-linear-gradient(-45deg, var(--sp-mint) 0 14px, #2ee586 14px 28px); background-size: 40px 40px;
animation: sp-stripes .6s linear infinite, sp-pulse 1.2s ease-in-out infinite; }
.is-generating .sp-generate::after, .sp-generate.is-generating::after { animation-duration: 1.1s; }
/* ---------- option cards (Vibe / Figure) ---------- */
.sp-card { --c: 14px; position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px;
text-align: left; border: 0; cursor: pointer; background: var(--sp-surface); color: var(--sp-text); font-family: var(--sp-font); }
.sp-card__title { font: 700 17px var(--sp-display); }
.sp-card__sub { display: block; margin-top: 6px; font-size: 14px; color: var(--sp-mint-3); }
.sp-card__ico { --c: 7px; flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--sp-raised);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.sp-card__ico svg { width: 32px; height: 32px; }
.sp-card.is-selected { --bc: var(--sp-mint); background: linear-gradient(120deg, #123326, #0b1f16); }
.sp-card.is-selected .sp-card__title { color: var(--sp-mint); }
.sp-card.is-selected .sp-card__ico { background: var(--sp-mint); }
.sp-card.is-selected .sp-card__ico svg { filter: brightness(0); }
.sp-card.is-selected::after { content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; z-index: 3;
border-top: 2px solid var(--sp-mint); border-right: 2px solid var(--sp-mint); }
/* ---------- fields (select / dropdown / search) ---------- */
.sp-field { --c: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px;
border: 0; background: var(--sp-surface); color: var(--sp-text); font: 16px var(--sp-font); text-align: left; cursor: pointer; }
.sp-field--big { --c: 12px; --bc: var(--sp-mint); --b: 2px; min-height: 58px; font-size: 18px; background: linear-gradient(90deg, var(--sp-raised), var(--sp-surface)); }
.sp-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: inherit; font: inherit; }
.sp-field input::placeholder { color: var(--sp-dim-2); }
.sp-chevron { width: 14px; height: 14px; flex: none; } /* */
.sp-field-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; color: var(--sp-text-2); }
.sp-field-label .sp-tile-ico { --c: 5px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--sp-raised);
clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.sp-field-label svg { width: 20px; height: 20px; }
/* ---------- chips (Indoors / Outdoors / Mine) + nav pills ---------- */
.sp-chip { --c: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; cursor: pointer;
background: var(--sp-raised); color: var(--sp-text-2); font: 16px var(--sp-font); text-decoration: none; }
.sp-chip svg { width: 20px; height: 20px; }
.sp-chip.is-active { background: var(--sp-mint); color: var(--sp-bg-2); box-shadow: 0 0 22px rgba(61,255,154,.35); }
.sp-chip.is-active svg { filter: brightness(0); }
.sp-icon-btn { --c: 10px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; background: var(--sp-surface); }
.sp-icon-btn svg { width: 30px; height: 30px; }
.sp-icon-btn.is-active { background: var(--sp-mint); }
.sp-icon-btn.is-active svg { filter: brightness(0); }
/* ---------- PHOTO FRAME (generator) — calm idle, fast while generating ---------- */
.sp-frame { position: relative; width: 100%; aspect-ratio: var(--ratio, 4/5); }
.sp-frame__media { position: absolute; inset: 0; overflow: hidden; background: var(--sp-surface);
clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); }
.sp-frame__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: conic-gradient(from var(--sp-a), #1c3a2c 0deg, #1c3a2c 280deg, #557565 320deg, #8fcdb0 350deg, #1c3a2c 360deg);
clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px, 2px 26.8px, 2px calc(100% - 2px), calc(100% - 26.8px) calc(100% - 2px), calc(100% - 2px) calc(100% - 26.8px), calc(100% - 2px) 2px, 26.8px 2px, 2px 26.8px, 0 26px);
animation: sp-spin 12s linear infinite; }
.sp-frame__corner { position: absolute; z-index: 3; width: 22px; height: 22px; opacity: .45; transition: opacity .4s; }
.sp-frame__corner--tr { top: -8px; right: -8px; border-top: 3px solid var(--sp-mint); border-right: 3px solid var(--sp-mint); }
.sp-frame__corner--bl { bottom: -8px; left: -8px; border-bottom: 3px solid var(--sp-mint); border-left: 3px solid var(--sp-mint); }
.sp-frame__ruler { position: absolute; z-index: 3; top: 18%; bottom: 26%; right: -16px; width: 8px; border-left: 1px solid var(--sp-line);
background: repeating-linear-gradient(to bottom, var(--sp-dim-2) 0 1px, transparent 1px 10px); }
.sp-frame__ruler::after { content: ""; position: absolute; left: -6px; top: 8%; border: 5px solid transparent; border-left-color: var(--sp-mint); animation: sp-ruler 8s ease-in-out infinite; }
.sp-frame__scan { display: none; position: absolute; left: 0; right: 0; height: 22%; top: -22%; pointer-events: none; mix-blend-mode: screen;
background: linear-gradient(to bottom, transparent, rgba(61,255,154,.10) 70%, rgba(184,255,216,.55) 98%, transparent); }
/* generating: add .is-generating to .sp-frame or a parent */
.is-generating .sp-frame::before, .sp-frame.is-generating::before {
background: conic-gradient(from var(--sp-a), #244036 0deg, #244036 220deg, #8fcdb0 290deg, #3dff9a 335deg, #f4fff8 352deg, #244036 360deg);
animation-duration: 1.1s; filter: drop-shadow(0 0 8px rgba(61,255,154,.8)); }
.is-generating .sp-frame__corner, .sp-frame.is-generating .sp-frame__corner { opacity: 1; }
.is-generating .sp-frame__corner--tr, .sp-frame.is-generating .sp-frame__corner--tr { animation: sp-tr .5s ease-in-out infinite; }
.is-generating .sp-frame__corner--bl, .sp-frame.is-generating .sp-frame__corner--bl { animation: sp-bl .5s ease-in-out infinite; }
.is-generating .sp-frame__ruler::after, .sp-frame.is-generating .sp-frame__ruler::after { animation-duration: 1.2s; }
.is-generating .sp-frame__scan, .sp-frame.is-generating .sp-frame__scan { display: block; animation: sp-scan 1.6s linear infinite; }
/* ---------- INSPO photo tile — clean, brackets on hover ---------- */
.sp-tile { --c: 18px; --bc: var(--sp-line-2); position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--sp-surface); cursor: pointer; }
.sp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sp-tile:hover img { transform: scale(1.045); }
.sp-tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 1; pointer-events: none; opacity: .6; transition: opacity .3s;
background: linear-gradient(to top, rgba(2,8,6,.55), transparent); }
.sp-tile:hover::after { opacity: 1; }
.sp-tile__br { position: absolute; z-index: 3; width: 20px; height: 20px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.sp-tile__br--tr { top: 8px; right: 8px; border-top: 3px solid var(--sp-mint); border-right: 3px solid var(--sp-mint); transform: translate(6px,-6px); }
.sp-tile__br--bl { bottom: 8px; left: 8px; border-bottom: 3px solid var(--sp-mint); border-left: 3px solid var(--sp-mint); transform: translate(-6px,6px); }
.sp-tile:hover .sp-tile__br { opacity: 1; transform: none; }
/* ---------- glitch title (GLAM) ---------- */
.sp-glitch { position: relative; display: inline-block; margin: 0; font: 900 44px/1 var(--sp-display); letter-spacing: .04em; color: var(--sp-text); }
.sp-glitch > span:last-child { position: relative; text-shadow: -2px 0 0 rgba(61,255,154,.7), 0 0 24px rgba(61,255,154,.35); }
.sp-glitch__l1, .sp-glitch__l2 { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.sp-glitch__l1 { color: var(--sp-mint); clip-path: inset(18% 0 60% 0); transform: translateX(-4px); animation: sp-g1 2.6s ease-in-out infinite; }
.sp-glitch__l2 { color: var(--sp-mint-2); opacity: .8; clip-path: inset(62% 0 16% 0); transform: translateX(5px); animation: sp-g2 3.2s ease-in-out infinite; }
/* ---------- small motion helpers ---------- */
.sp-dice { animation: sp-dice 3.2s ease-in-out infinite; }
.sp-scroll-btn { --c: 12px; width: 60px; height: 60px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
background: var(--sp-mint); box-shadow: 0 0 26px rgba(61,255,154,.55); animation: sp-bob 1.8s ease-in-out infinite; }
/* ---------- keyframes ---------- */
@keyframes sp-spin { to { --sp-a: 360deg; } }
@keyframes sp-scan { from { top: -22%; } to { top: 100%; } }
@keyframes sp-tr { 50% { transform: translate(4px,-4px); } }
@keyframes sp-bl { 50% { transform: translate(-4px,4px); } }
@keyframes sp-ruler { 0%,100% { top: 8%; } 50% { top: 84%; } }
@keyframes sp-shine { 0%,60% { left: -60%; } 100% { left: 130%; } }
@keyframes sp-stripes { to { background-position: 40px 0; } }
@keyframes sp-pulse { 50% { filter: brightness(1.15) drop-shadow(0 0 10px rgba(61,255,154,.7)); } }
/* Continuous, interpolated (no steps / no long freeze) so the chromatic split moves smoothly at
60fps instead of sitting frozen then snapping once — that snap read as "5fps / lagging". */
@keyframes sp-g1 { 0%,100% { transform: translateX(-4px); } 30% { transform: translateX(-6px); } 50% { transform: translateX(-3px); } 70% { transform: translateX(-7px); } }
@keyframes sp-g2 { 0%,100% { transform: translateX(5px); } 35% { transform: translateX(8px); } 55% { transform: translateX(4px); } 75% { transform: translateX(7px); } }
@keyframes sp-dice { 0%,80%,100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@keyframes sp-bob { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
.sp-frame::before, .sp-frame__ruler::after, .sp-frame__scan, .sp-frame__corner, .sp-generate, .sp-generate::after,
.sp-glitch__l1, .sp-glitch__l2, .sp-dice, .sp-scroll-btn { animation: none !important; }
}
/* ---- site integration: existing JS toggles .on for the selected card/chip/icon-btn ---- */
.sp-card.on { --bc: var(--sp-mint); background: linear-gradient(120deg, #123326, #0b1f16); }
.sp-card.on .sp-card__title { color: var(--sp-mint); }
.sp-card.on .sp-card__ico { background: var(--sp-mint); }
.sp-card.on .sp-card__ico svg { filter: brightness(0); }
.sp-card.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; z-index: 3; border-top: 2px solid var(--sp-mint); border-right: 2px solid var(--sp-mint); }
.sp-chip.on { background: var(--sp-mint); color: var(--sp-bg-2); box-shadow: 0 0 22px rgba(61,255,154,.35); }
.sp-chip.on svg { filter: brightness(0); }
.sp-icon-btn.on { background: var(--sp-mint); }
.sp-icon-btn.on svg { filter: brightness(0); }
/* ---- site integration: branded Details selects + neutralize legacy rounding ---- */
.sp-cut, .sp-panel, .sp-btn, .sp-card, .sp-field, .sp-chip, .sp-generate, .sp-icon-btn, .sp-step { border-radius: 0 !important; }
.scenario-trigger.sp-field { border: 0; margin-top: 6px; }
.scenario-trigger.sp-field .scenario-trigger-label { flex: 1; }
#mixGrid .field select, #mixGrid select {
appearance: none; -webkit-appearance: none; margin-top: 8px;
background-color: var(--sp-surface); color: var(--sp-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='2,6 18,6 10,15' fill='%233dff9a'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
border: 1.5px solid var(--sp-line); border-radius: 0; min-height: 50px; padding: 0 34px 0 14px;
font: 16px var(--sp-font);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
#mixGrid .field select:hover, #mixGrid .field select:focus { border-color: var(--sp-mint); outline: none; }
#mixGrid .field { font: 15px var(--sp-font); color: var(--sp-text-2); }
/* scenario panel: cut-corner search + close to match kit */
.scenario-search {
border-radius: 0 !important; border: 1.5px solid var(--sp-line);
background: var(--sp-surface); color: var(--sp-text); font-family: var(--sp-font);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.scenario-search:focus { border-color: var(--sp-mint); outline: none; }
.scenario-close {
border-radius: 0 !important; border: 1.5px solid var(--sp-line);
background: var(--sp-surface); color: var(--sp-mint);
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.scenario-close:hover { border-color: var(--sp-mint); }
/* ---- INSPO tiles: slavpic cut corners + mint brackets on hover (no whole-tile glow) ---- */
.inspo-tile {
border-radius: 0 !important;
border: 1.5px solid var(--sp-line) !important;
clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.inspo-card:hover .inspo-tile,
.inspo-card.is-open .inspo-tile {
transform: none !important;
border-color: var(--sp-mint) !important;
box-shadow: none !important;
}
.inspo-cover { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1) !important; }
.inspo-card:hover .inspo-cover,
.inspo-card.is-open .inspo-cover { transform: scale(1.045); }
.inspo-card:hover .sp-tile__br,
.inspo-card.is-open .sp-tile__br { opacity: 1; transform: none; }
/* ---- inspo: who-toggle cut, dice/scroll button, glitch sizing ---- */
.inspo-who button {
border-radius: 0 !important; border: 1.5px solid var(--sp-line);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
background: var(--sp-surface);
}
.inspo-who button.on { border-color: var(--sp-mint); background: var(--sp-mint); }
.inspo-who button.on svg { filter: brightness(0); }
.rando-head .rando-dice { width: 22px; height: 22px; }
.inspo-more .inspo-more-btn {
width: 52px; height: 52px; display: grid; place-items: center;
border-radius: 0 !important; background: var(--sp-mint); color: #020806;
box-shadow: 0 0 26px rgba(61,255,154,.5);
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
animation: sp-bob 1.8s ease-in-out infinite;
}
.inspo-col h2.face-glam.sp-glitch, .inspo-col h2.face-spicy.sp-glitch { font-size: 2rem; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .inspo-more .inspo-more-btn { animation: none; } }
/* ---- top nav: slavpic cut corners (keep existing colours, states & our emerald pill) ---- */
.modes button, .corner-btn, .help-btn {
border-radius: 0 !important;
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
/* ---- Details: Car + Car colour only show for car scenarios (styles.css isn't loaded here) ----
Container-agnostic (the fields now live in the wizard's detail grids, not only #mixGrid). ---- */
#mixGrid .field.is-car-only, .wiz-detail-grid .field.is-car-only { display: none; }
body.scene-car #mixGrid .field.is-car-only, body.scene-car .wiz-detail-grid .field.is-car-only { display: block; }
/* ---- in-place generating overlay (crunch & rebuild on the uploaded photo) ---- */
.photo-stage { position: relative; }
/* Remove-photo: a floating cut-corner badge on the frame's top-right (only while a photo is
loaded) instead of a button that crowded/overlapped the actions row. Gentle idle float + hover. */
.photo-stage .photo-remove {
position: absolute; top: 10px; right: 10px; z-index: 7;
width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
border: 1.5px solid rgba(61,255,154,.6); background: rgba(4,10,8,.72); color: var(--sp-mint, #3dff9a);
cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
box-shadow: 0 6px 18px rgba(0,0,0,.45);
animation: sp-bob 2.4s ease-in-out infinite;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.photo-stage .photo-remove[hidden] { display: none; }
.photo-stage .photo-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.photo-stage .photo-remove:hover { background: rgba(255,120,140,.16); color: #ffd0d8; border-color: rgba(255,120,140,.75); animation-play-state: paused; }
.photo-stage .photo-remove:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .photo-stage .photo-remove { animation: none; } }
.genfx-overlay {
position: absolute; inset: 0; width: 100%; height: 100%;
aspect-ratio: auto; z-index: 5; transition: opacity .34s ease;
}
.genfx-overlay .sp-frame__media { background: #020806; }
.genfx-tag {
position: absolute; left: 10px; bottom: 10px; z-index: 6;
font: 700 0.62rem/1 var(--sp-font, 'Share Tech Mono', monospace); letter-spacing: .14em;
color: #020806; background: var(--sp-mint, #3dff9a); padding: 6px 10px;
box-shadow: 0 0 18px rgba(61,255,154,.5);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
/* under-photo GENERATE — the primary call-to-action right beneath the uploaded face */
.sp-generate.photo-go { width: 100%; margin-top: 12px; }
/* ---- custom styled dropdowns for Details (replaces the native browser menu) ---- */
.sp-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0); overflow: hidden; }
.sp-select { position: relative; margin-top: 8px; }
.sp-select.is-open { z-index: 60; }
.sp-select-trigger {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-height: 50px; padding: 0 14px; margin: 0;
background: var(--sp-surface); color: var(--sp-text); font: 16px var(--sp-font);
cursor: pointer; text-align: left;
}
.sp-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-select-label.is-placeholder { color: var(--sp-dim); }
.sp-select-trigger .sp-chevron { flex: none; width: 16px; height: 16px; transition: transform .18s ease; }
.sp-select.is-open .sp-chevron { transform: rotate(180deg); }
.sp-select-panel {
position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 61;
max-height: 280px; overflow-y: auto; padding: 6px;
background: var(--sp-raised); --bc: var(--sp-mint);
box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.sp-select-group {
padding: 9px 10px 4px; font: 700 0.62rem/1 var(--sp-font); letter-spacing: .1em;
text-transform: uppercase; color: var(--sp-mint-2); opacity: .85;
}
.sp-select-opt {
display: block; width: 100%; text-align: left; padding: 10px 12px;
background: transparent; border: 0; color: var(--sp-text); font: 15px var(--sp-font);
cursor: pointer; border-radius: 0; transition: background .12s ease;
}
.sp-select-opt:hover { background: rgba(61,255,154,.12); }
.sp-select-opt.is-active { background: var(--sp-mint); color: var(--sp-bg-2); font-weight: 700; }
/* ========== step-by-step generator wizard ========== */
body.mode-generator main.dash.wiz-on { display: block; padding: 16px 16px 26px; }
.wiz { max-width: 680px; margin: 0 auto; }
.wiz-bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 18px; flex-wrap: wrap; }
.wiz-dot {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
background: var(--sp-surface); color: var(--sp-dim); border: 1.5px solid var(--sp-line);
border-radius: 0 !important; cursor: pointer; font: 13px var(--sp-font); letter-spacing: .02em;
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.wiz-dot-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--sp-line); color: var(--sp-text); font-weight: 700; font-size: 12px; }
.wiz-dot-l { white-space: nowrap; }
.wiz-dot.is-active { border-color: var(--sp-mint); color: var(--sp-mint); }
.wiz-dot.is-active .wiz-dot-n { background: var(--sp-mint); color: var(--sp-bg-2); }
.wiz-dot.is-done { color: var(--sp-mint-2); border-color: rgba(61,255,154,.4); }
.wiz-dot.is-done .wiz-dot-n { background: var(--sp-mint-2); color: var(--sp-bg-2); }
.wiz-step-wrap[hidden] { display: none; }
.wiz-panel { margin: 0; }
.wiz-nav { display: flex; gap: 10px; margin: 16px 0 0; }
.wiz-nav .wiz-next { flex: 1; justify-content: center; }
.wiz-nav .wiz-back { flex: 0 0 auto; min-width: 108px; justify-content: center; }
.wiz-nav .sp-btn--primary { flex: 1; justify-content: center; }
.wiz-note { margin: 12px 0 0; color: #ffd38a; font: 14px var(--sp-font); opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.wiz-note.show { opacity: 1; transform: none; }
.wiz-result-frame { position: relative; width: min(360px, 100%); margin: 0 auto 14px; aspect-ratio: 3/4; background: #070d0a; }
.wiz-result-frame .genfx-overlay { position: absolute; inset: 0; }
@media (max-width: 560px) {
.wiz-dot { padding: 7px 10px; font-size: 12px; }
.wiz-dot-l { display: none; } /* on phones show just the numbers */
.wiz-dot.is-active .wiz-dot-l { display: inline; }
}
/* wizard: the progress bar is the single source of step numbers */
.dash.wiz-on .pane .step-num { display: none; }
.dash.wiz-on .pane.wiz-panel { margin-bottom: 0; }
/* wizard: keep the uploaded-photo preview inside the screen (was overflowing on mobile) */
.dash.wiz-on .photo-stage {
aspect-ratio: 4 / 5;
height: min(46vh, 430px);
width: auto;
max-width: 100%;
margin-inline: auto;
}
.dash.wiz-on .photo-stage img,
.dash.wiz-on .photo-stage video { width: 100%; height: 100%; object-fit: cover; }
/* wizard: tighter step chrome so the photo + actions fit the screen better */
.dash.wiz-on .wiz-panel { padding: 18px 16px; }
.dash.wiz-on .wiz-panel > .sp-desc { font-size: 0.86rem; line-height: 1.42; margin: 6px 0 12px; }
.dash.wiz-on .wiz-panel > .sp-h2 { margin-bottom: 4px; }
.dash.wiz-on .photo-actions { margin-top: 12px; }
/* wizard: clear the fixed bottom nav so Next / Generate / result buttons are never hidden */
@media (max-width: 1099px) {
main.dash.wiz-on { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* ---- scenario picker: scroll affordance (arrows + bottom fade so people know it scrolls) ---- */
.scenario-list-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.scenario-list-wrap > .scenario-list { flex: 1 1 auto; }
.scenario-list-wrap.has-more::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 2; pointer-events: none;
background: linear-gradient(transparent, var(--card, #0b1b12));
}
.scenario-scroll {
position: absolute; left: 50%; transform: translateX(-50%); z-index: 4;
width: 42px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0;
background: var(--sp-mint, #3dff9a); color: #020806; border: 0; cursor: pointer;
box-shadow: 0 0 16px rgba(61,255,154,.5);
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.scenario-scroll svg { width: 22px; height: 22px; fill: none; stroke: #020806; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scenario-scroll[hidden] { display: none; }
.scenario-scroll-up { top: 6px; }
.scenario-scroll-down { bottom: 8px; animation: sp-bob 1.8s ease-in-out infinite; }
/* On the mobile bottom-sheet, lift the down arrow off the very bottom edge (home-indicator zone)
so it's clearly visible — otherwise only the top (up) arrow gets noticed. */
@media (max-width: 760px) { .scenario-scroll-down { bottom: 46px; } }
@media (prefers-reduced-motion: reduce) { .scenario-scroll-down { animation: none; } }
/* Details: fine-tune toggle + Random button row */
.mix-intro { display: flex; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.mix-intro .mix-toggle { flex: 1 1 auto; justify-content: center; }
.mix-intro .mix-random { flex: 0 0 auto; }
/* ========== inspo: how-it-works + prominent back arrow ========== */
.inspo-top { display: flex; justify-content: center; padding: 12px 16px 2px; }
.inspo-help-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
background: var(--sp-surface, #070d0a); color: var(--sp-mint, #3dff9a);
border: 1.5px solid rgba(61,255,154,.45); cursor: pointer; font: 700 0.8rem/1 var(--sp-font, ui-monospace, monospace); letter-spacing: .03em;
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.inspo-help-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.inspo-help-btn:hover { background: rgba(61,255,154,.1); }
/* how-it-works modal */
.inspo-help .hiw-steps { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inspo-help .hiw-steps li { display: flex; gap: 14px; align-items: flex-start; }
.inspo-help .hiw-n {
flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
background: var(--sp-mint, #3dff9a); color: #020806; font: 800 1rem/1 var(--sp-display, 'Orbitron', sans-serif);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.inspo-help .hiw-steps b { color: #eafff4; font-size: 1rem; display: block; margin-bottom: 2px; }
.inspo-help .hiw-steps p { margin: 0; color: var(--muted, #8fcdb0); font-size: 0.88rem; line-height: 1.42; }
.inspo-help .look-go { width: 100%; }
/* lock the regenerate buttons until the photo is done AND its reveal finishes */
body.gen-busy .wiz-step-wrap[data-wstep="result"] .wiz-nav button,
body.gen-busy #lookGo {
pointer-events: none !important; opacity: .45 !important; filter: grayscale(.35);
}
/* inspo look result frame: keep the crunch frame a sensible size in the modal */
#lookLatestWrap .sp-frame { max-width: 320px; margin: 10px auto 0; }
/* ========== Generator = app shell: fits the viewport, nav pinned, no page scroll ========== */
body.mode-generator { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.mode-generator main.dash.wiz-on {
flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
padding-top: 10px;
}
body.mode-generator .wiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
body.mode-generator .wiz-bar { flex: none; margin: 2px 0 8px; }
/* breadcrumb of choices so far (scenario · vibe · who · figure) — compact one-liner, never grows */
.wiz-context { display: flex; align-items: center; gap: 7px; margin: -2px 0 8px; padding: 5px 11px; flex: none;
font: 600 0.72rem/1.3 var(--sp-font, ui-monospace, monospace); color: var(--sp-dim, #8fcdb0);
background: rgba(61,255,154,.07);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.wiz-context[hidden] { display: none; }
.wiz-context .pic { color: var(--sp-mint, #3dff9a); flex: none; width: 1.05em; height: 1.05em; }
.wiz-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mode-generator .wiz-step-wrap:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.mode-generator .wiz-step-wrap:not([hidden]) > .wiz-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.mode-generator .wiz-nav { flex: none; }
/* photo preview shrinks so the photo step fits the shell without scrolling (even on short phones) */
body.mode-generator main.dash.wiz-on .photo-stage { height: min(30vh, 260px); max-height: 30vh; }
body.mode-generator .wiz-step-wrap[data-wstep="photo"] > .wiz-panel > .lede { font-size: 0.8rem; line-height: 1.4; margin: 4px 0 8px; }
/* Import / Take side-by-side so the photo step fits without scrolling */
body.mode-generator .wiz-step-wrap[data-wstep="photo"] .photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
body.mode-generator .wiz-step-wrap[data-wstep="photo"] .photo-actions > * { margin: 0; }
/* result frame capped by height (not just width) so it fits short screens without scrolling */
body.mode-generator .wiz-step-wrap[data-wstep="result"] .wiz-result-frame { height: min(44vh, 430px); width: auto; max-width: 100%; margin: 0 auto 8px; }
@media (max-width: 1099px) {
/* the bottom nav is fixed; reserve its height, and drop nav-bottom's body padding (we handle it) */
body.mode-generator { padding-bottom: 0 !important; }
body.mode-generator main.dash.wiz-on { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* rest step: GENERATE pinned below the look-options (always reachable) */
body.mode-generator .wiz-step-wrap[data-wstep="rest"] .wiz-pinned-go { flex: none; margin: 10px 0 0; }
/* "The look" must fit on one screen — no scrolling. Compact 2-col card grids + tighter everything so
Vibe, Who and Figure (Slim / Slim busty / Hourglass / Kim) are all visible to click through. */
body.mode-generator .wiz-step-wrap[data-wstep="rest"] > .wiz-panel { padding: 12px 14px; }
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .cards { grid-template-columns: 1fr 1fr; gap: 6px; }
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .block { margin: 0 0 4px; }
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .sp-card { padding: 6px 9px; }
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .sp-card__title { font-size: 0.9rem; }
/* drop the secondary card descriptions here — titles + icons are clear, and it keeps The look
short enough to never scroll even on small phones (figure details still show in the picker). */
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .sp-card__sub { display: none; }
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .label { margin: 0 0 3px; font-size: 0.72rem; }
/* this step is pure selection — drop the long lede + section header + saved-faces to save height */
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene > .lede,
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene > .sp-h2,
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene > .step-num,
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene .saved-label,
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #stepScene #sceneFaces { display: none; }
/* The look no longer hosts the Fine-tune/Random row — "Fine-tune details" is the Next button, and
Random lives on each Details screen. Hiding it keeps The look short enough to never scroll. */
body.mode-generator .wiz-step-wrap[data-wstep="rest"] #mixIntro { display: none; }
/* Details is a 3-screen flow (Scene & outfit / Beauty & pose / Camera & extras). Each screen:
Random pinned on top, a few dropdowns in a 2-col grid, pinned GENERATE — short enough to never
scroll, even on a small phone. Each custom dropdown opens its own contained menu. */
body.mode-generator .wiz-step-wrap[data-wstep^="details"] .wiz-pinned-go { flex: none; margin: 10px 0 0; }
body.mode-generator .wiz-step-wrap[data-wstep^="details"] > .wiz-panel { padding: 12px 14px; }
body.mode-generator .wiz-step-wrap[data-wstep^="details"] > .wiz-panel > .sp-h2 { margin-bottom: 2px; }
.wiz-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 2px; }
.wiz-detail-prog { font: 700 0.68rem/1 var(--sp-font, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-dim, #8fcdb0); }
.wiz-detail-random { flex: 0 0 auto; padding: 8px 14px; }
/* minmax(0,…) lets columns shrink below the trigger text so the right column isn't clipped (labels ellipsis). */
.wiz-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 10px; margin-top: 10px; }
.wiz-detail-grid .field { min-width: 0; max-width: 100%; margin: 0; font-size: 0.74rem; gap: 3px; }
.wiz-detail-grid .sp-select { margin-top: 3px; min-width: 0; }
.wiz-detail-grid .sp-select-trigger { padding: 8px 10px; }