/** * streamSUITE Setup — wizard styles. * * Palette and component language taken from Stream Director's control * panel (assets/broadcast-graphics/control.html) and the schemaVersion 1 * onboarding template, so this reads as part of the same system: * * background #0b1828 / #080f1c primary #60a5fa * secondary #2dd4bf gold #e3b95c * text #f4f8ff muted #a3b4cc * * The wizard renders its own document, so nothing here fights the * hitwarehouse-modern theme. Every animation is behind a * prefers-reduced-motion guard at the bottom of the file. */ :root { --ss-void: #080f1c; --ss-bg: #0b1828; --ss-chrome: #0c1727; --ss-card-a: #132237; --ss-card-b: #0e1a2b; --ss-well: #091423; --ss-line: #24364e; --ss-line-soft: #283d56; --ss-line-input: #36506b; --ss-cap: #44698b; --ss-primary: #60a5fa; --ss-secondary: #2dd4bf; --ss-gold: #e3b95c; --ss-text: #f4f8ff; --ss-label: #b2c4da; --ss-muted: #a3b4cc; --ss-placeholder: #71849e; --ss-btn: #1b3550; --ss-btn-hover: #294d6e; --ss-btn-line: #41617e; --ss-r: 8px; --ss-r-card: 14px; --ss-ease: cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } .ss-body { margin: 0; min-height: 100vh; background: var(--ss-void); color: var(--ss-text); font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; /* No overflow-x here: an overflow value on makes it the scroll container and silently breaks position:sticky on the console bar. The backdrop clips its own aurora instead. */ } /* ================================================================= BACKDROP — drifting aurora, console grid, scanline, grain ================================================================= */ .ss-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .ss-aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .ss-aurora-1 { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; top: -22%; left: -12%; background: radial-gradient(circle, rgba(96, 165, 250, 0.42), transparent 68%); animation: ss-drift-a 26s var(--ss-ease) infinite alternate; } .ss-aurora-2 { width: 52vw; height: 52vw; max-width: 780px; max-height: 780px; top: -12%; right: -14%; background: radial-gradient(circle, rgba(45, 212, 191, 0.30), transparent 68%); animation: ss-drift-b 32s var(--ss-ease) infinite alternate; } .ss-aurora-3 { width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; bottom: -24%; left: 32%; background: radial-gradient(circle, rgba(227, 185, 92, 0.16), transparent 70%); animation: ss-drift-c 38s var(--ss-ease) infinite alternate; } @keyframes ss-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vw, 7vh, 0) scale(1.16); } } @keyframes ss-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-8vw, 10vh, 0) scale(1); } } @keyframes ss-drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, -8vh, 0) scale(1.2); } } /* Faint engineering grid — the "console" cue. */ .ss-grid { position: absolute; inset: -2px; background-image: linear-gradient(rgba(96, 165, 250, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.055) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 90% 65% at 50% 32%, #000 35%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 32%, #000 35%, transparent 78%); } /* Slow broadcast sweep. */ .ss-scan { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(96, 165, 250, 0.05) 45%, rgba(45, 212, 191, 0.07) 50%, rgba(96, 165, 250, 0.05) 55%, transparent 100% ); height: 42%; animation: ss-sweep 13s linear infinite; } @keyframes ss-sweep { 0% { transform: translateY(-110%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(320%); opacity: 0; } } .ss-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 68% at 50% 42%, transparent 30%, rgba(3, 7, 15, 0.72) 100%); } /* Film grain: gives the flat gradients real surface texture. */ .ss-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.30; mix-blend-mode: overlay; } /* Everything above the backdrop. */ .ss-head, .ss-main { position: relative; z-index: 1; } /* ================================================================= CONSOLE STATUS BAR ================================================================= */ .ss-head { position: sticky; top: 0; z-index: 30; background: rgba(9, 18, 32, 0.82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid rgba(96, 165, 250, 0.16); box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.95); padding: 12px 24px 0; } .ss-head-inner { display: flex; align-items: center; gap: 26px; max-width: 1040px; margin: 0 auto; } .ss-ident { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .ss-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-secondary); box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.65); animation: ss-pulse 2.3s ease-out infinite; flex: 0 0 auto; } @keyframes ss-pulse { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6); } 70% { box-shadow: 0 0 0 11px rgba(45, 212, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } } .ss-brand { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; } .ss-brand-sub { color: var(--ss-secondary); font-weight: 700; font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; } /* --- segmented progress track --- */ .ss-track-wrap { flex: 1 1 auto; min-width: 0; } .ss-track { display: flex; gap: 4px; height: 6px; } .ss-seg { flex: 1 1 0; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(96, 165, 250, 0.12); position: relative; overflow: hidden; transform-origin: center bottom; animation: ss-seg-in 0.5s var(--ss-ease) both; animation-delay: var(--seg-delay, 0ms); transition: background 0.3s, box-shadow 0.3s; } @keyframes ss-seg-in { from { transform: scaleX(0.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .ss-seg.ss-state-done { background: linear-gradient(90deg, var(--ss-primary), var(--ss-secondary)); border-color: transparent; box-shadow: 0 0 12px rgba(45, 212, 191, 0.55); } .ss-seg.ss-state-needs_attention { background: linear-gradient(90deg, #c98f2a, var(--ss-gold)); border-color: transparent; box-shadow: 0 0 12px rgba(227, 185, 92, 0.45); } .ss-seg.ss-state-skipped { background: rgba(163, 180, 204, 0.26); border-color: transparent; } /* The segment you are standing on sweeps, so "here" is unmistakable. */ .ss-seg.is-current::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: translateX(-100%); animation: ss-seg-sweep 1.9s var(--ss-ease) infinite; } @keyframes ss-seg-sweep { to { transform: translateX(100%); } } .ss-seg.is-current:not(.ss-state-done):not(.ss-state-needs_attention) { background: rgba(96, 165, 250, 0.34); border-color: var(--ss-primary); } .ss-track-label { margin: 7px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ss-muted); } /* --- right side: chip + ring --- */ .ss-head-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .ss-chip { color: var(--ss-secondary); background: rgba(45, 212, 191, 0.09); border: 1px solid #2c5960; border-radius: 30px; padding: 6px 13px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; } .ss-ring { position: relative; width: 40px; height: 40px; flex: 0 0 auto; } .ss-ring svg { transform: rotate(-90deg); display: block; } .ss-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 3; } .ss-ring-fg { fill: none; stroke: url(#ss-ring-grad); stroke: var(--ss-secondary); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.65)); transition: stroke-dashoffset 0.9s var(--ss-ease); } .ss-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-text); } .ss-ring-num::after { content: "%"; font-size: 7.5px; margin-left: 1px; opacity: 0.65; } /* --- section rail --- */ .ss-rail { max-width: 1040px; margin: 11px auto 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ss-rail::-webkit-scrollbar { display: none; } .ss-rail ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 0 11px; } .ss-rail-item a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--ss-r); color: var(--ss-muted); text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .ss-rail-item a:hover { background: rgba(96, 165, 250, 0.12); color: #fff; transform: translateY(-1px); } .ss-rail-num { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--ss-well); border: 1px solid var(--ss-line-input); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; } .ss-rail-item.is-current a { color: var(--ss-text); border-color: rgba(96, 165, 250, 0.5); background: linear-gradient(135deg, rgba(19, 34, 55, 0.9), rgba(14, 26, 43, 0.9)); } .ss-rail-item.is-current .ss-rail-num { background: var(--ss-primary); border-color: var(--ss-primary); color: #06182c; transform: scale(1.1); box-shadow: 0 0 12px rgba(96, 165, 250, 0.6); } .ss-state-done .ss-rail-num { background: var(--ss-secondary); border-color: var(--ss-secondary); color: #04201d; } .ss-state-needs_attention .ss-rail-num { background: var(--ss-gold); border-color: var(--ss-gold); color: #241a05; } .ss-state-skipped .ss-rail-num { opacity: 0.42; } /* ================================================================= BODY ================================================================= */ .ss-main { max-width: 1040px; margin: 0 auto; padding: 38px 24px 90px; } .ss-title { font-size: 32px; line-height: 1.12; margin: 0 0 8px; letter-spacing: -0.025em; background: linear-gradient(135deg, #ffffff 20%, #a8cbf5 90%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ss-rise 0.5s var(--ss-ease) both; } .ss-summary { color: var(--ss-muted); margin: 0 0 30px; max-width: 64ch; animation: ss-rise 0.5s var(--ss-ease) 0.05s both; } @keyframes ss-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Each field is a glass console card, staggered in on load. */ .ss-field { background: linear-gradient(135deg, rgba(19, 34, 55, 0.82), rgba(14, 26, 43, 0.82)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ss-line-soft); border-radius: var(--ss-r-card); padding: 19px 21px; margin: 0 0 13px; position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; animation: ss-rise 0.5s var(--ss-ease) both; animation-delay: var(--card-delay, 0ms); } /* Top edge highlight — the control.html cap, as a gradient. */ .ss-field::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ss-cap) 22%, var(--ss-cap) 78%, transparent); opacity: 0.85; transition: background 0.3s, opacity 0.3s; } .ss-field:hover { border-color: rgba(96, 165, 250, 0.36); transform: translateY(-2px); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.95); } .ss-field:focus-within { border-color: rgba(96, 165, 250, 0.5); } .ss-field:focus-within::before { background: linear-gradient(90deg, transparent, var(--ss-primary) 18%, var(--ss-secondary) 82%, transparent); opacity: 1; } .ss-label { display: block; color: var(--ss-label); font-size: 13px; font-weight: 600; margin: 0 0 9px; } .ss-req { color: var(--ss-gold); } .ss-input { width: 100%; color: var(--ss-text); background: rgba(9, 20, 35, 0.85); border: 1px solid var(--ss-line-input); border-radius: var(--ss-r); padding: 11px 13px; font: 15px system-ui, -apple-system, sans-serif; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .ss-input::placeholder { color: var(--ss-placeholder); } .ss-input:hover { border-color: var(--ss-cap); } .ss-input:focus { outline: none; background: rgba(9, 20, 35, 1); border-color: var(--ss-primary); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16), 0 0 18px -4px rgba(96, 165, 250, 0.5); } textarea.ss-input { min-height: 84px; resize: vertical; } .ss-input-narrow { max-width: 110px; } .ss-help { margin: 9px 0 0; font-size: 12.5px; color: var(--ss-muted); } .ss-notice { border: 1px solid #2c5960; border-left: 3px solid var(--ss-secondary); background: rgba(45, 212, 191, 0.06); padding: 13px 16px; border-radius: var(--ss-r); font-size: 13.5px; color: var(--ss-muted); margin: 0 0 13px; animation: ss-rise 0.5s var(--ss-ease) both; animation-delay: var(--card-delay, 0ms); } .ss-pending { font-size: 13px; color: var(--ss-placeholder); font-style: italic; margin: 0; } .ss-hidden { display: none; } /* Revealed conditional fields animate rather than snapping in. */ .ss-field.ss-revealed { animation: ss-reveal 0.4s var(--ss-ease); } @keyframes ss-reveal { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } } /* ================================================================= CHOICES ================================================================= */ .ss-choices { display: grid; gap: 8px; } @media (min-width: 680px) { .ss-choices-multi { grid-template-columns: 1fr 1fr; } } .ss-choice { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--ss-line-input); border-radius: var(--ss-r); background: rgba(9, 20, 35, 0.72); cursor: pointer; font-size: 14.5px; position: relative; overflow: hidden; transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s; } .ss-choice:hover { border-color: var(--ss-cap); background: rgba(96, 165, 250, 0.08); transform: translateX(2px); } .ss-choice:active { transform: scale(0.988); } .ss-choice input { margin: 2px 0 0; accent-color: var(--ss-primary); flex: 0 0 auto; cursor: pointer; } .ss-choice:has(input:checked) { border-color: var(--ss-primary); background: rgba(96, 165, 250, 0.13); box-shadow: inset 3px 0 0 var(--ss-primary), 0 0 20px -8px rgba(96, 165, 250, 0.85); } .ss-choice:has(input:checked) span { color: #fff; font-weight: 500; } .ss-choice:has(input:focus-visible) { outline: 2px solid var(--ss-primary); outline-offset: 2px; } /* ================================================================= COLORS / SLOTS / REPEATERS ================================================================= */ .ss-colors { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); } .ss-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--ss-line-input); border-radius: var(--ss-r); background: rgba(9, 20, 35, 0.72); font-size: 12.5px; color: var(--ss-label); cursor: pointer; transition: border-color 0.2s, transform 0.2s; } .ss-color:hover { border-color: var(--ss-primary); transform: translateY(-2px); } .ss-color input[type="color"] { width: 42px; height: 27px; border: 1px solid var(--ss-line-input); border-radius: 5px; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; } .ss-slots { display: grid; gap: 10px; } .ss-slot { display: grid; gap: 10px; grid-template-columns: 110px 1fr 1fr; align-items: center; padding: 12px; border: 1px solid var(--ss-line-input); border-radius: var(--ss-r); background: rgba(9, 20, 35, 0.72); transition: border-color 0.2s, background 0.2s; } .ss-slot:hover { border-color: var(--ss-cap); background: rgba(96, 165, 250, 0.05); } .ss-slot-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ss-primary); } .ss-rep-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; animation: ss-reveal 0.3s var(--ss-ease); } .ss-rep-del { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--ss-r); border: 1px solid var(--ss-line-input); background: rgba(9, 20, 35, 0.72); color: var(--ss-muted); cursor: pointer; font-size: 18px; line-height: 1; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s; } .ss-rep-del:hover { color: #ff8fa3; border-color: #7a3b4b; background: #2a1520; transform: rotate(90deg); } .ss-rep-add { background: none; border: 1px dashed var(--ss-line-input); color: var(--ss-muted); padding: 9px 15px; border-radius: var(--ss-r); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: color 0.2s, border-color 0.2s, background 0.2s; } .ss-rep-add:hover { color: var(--ss-text); border-color: var(--ss-primary); border-style: solid; background: rgba(96, 165, 250, 0.08); } /* ================================================================= ACTIONS ================================================================= */ .ss-actions { position: sticky; bottom: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--ss-line); background: linear-gradient(to top, var(--ss-void) 62%, rgba(8, 15, 28, 0)); z-index: 5; } .ss-btn { position: relative; overflow: hidden; border: 1px solid var(--ss-btn-line); border-radius: var(--ss-r); padding: 11px 17px; background: var(--ss-btn); color: var(--ss-text); cursor: pointer; font: inherit; font-weight: 600; transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s; } .ss-btn:hover { background: var(--ss-btn-hover); transform: translateY(-2px); } .ss-btn:active { transform: translateY(0) scale(0.985); } .ss-btn-go { margin-left: auto; background: linear-gradient(135deg, var(--ss-primary), #3d84e0); border-color: var(--ss-primary); color: #04182c; padding: 12px 26px; box-shadow: 0 6px 22px -8px rgba(96, 165, 250, 0.85); } .ss-btn-go:hover { background: linear-gradient(135deg, #7ab4fb, #4a90e8); box-shadow: 0 10px 28px -8px rgba(96, 165, 250, 1); } .ss-btn-quiet { background: transparent; color: var(--ss-muted); border-color: var(--ss-line-input); } .ss-btn-quiet:hover { background: rgba(96, 165, 250, 0.1); color: var(--ss-text); } /* Click ripple, positioned by wizard.js. */ .ss-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.42); transform: translate(-50%, -50%) scale(0); animation: ss-ripple 0.6s var(--ss-ease) forwards; pointer-events: none; } @keyframes ss-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* ================================================================= REVIEW ================================================================= */ .ss-review { list-style: none; margin: 0; padding: 0; } .ss-review-item a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 19px; margin-bottom: 9px; border: 1px solid var(--ss-line-soft); border-left: 3px solid var(--ss-line-input); border-radius: var(--ss-r-card); background: linear-gradient(135deg, rgba(19, 34, 55, 0.82), rgba(14, 26, 43, 0.82)); color: var(--ss-text); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .ss-review-item a:hover { border-color: rgba(96, 165, 250, 0.4); border-left-color: var(--ss-primary); transform: translateX(4px); box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.95); } .ss-review-title { font-weight: 600; } .ss-review-state { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ss-placeholder); border: 1px solid var(--ss-line-input); border-radius: 30px; padding: 4px 12px; white-space: nowrap; } .ss-review-item.ss-state-done a { border-left-color: var(--ss-secondary); } .ss-review-item.ss-state-done .ss-review-state { color: var(--ss-secondary); border-color: #2c5960; } .ss-review-item.ss-state-needs_attention a { border-left-color: var(--ss-gold); } .ss-review-item.ss-state-needs_attention .ss-review-state { color: var(--ss-gold); border-color: #5c4a22; } .ss-main-plain { padding-top: 70px; } /* ================================================================= RESPONSIVE ================================================================= */ @media (max-width: 780px) { .ss-head-inner { flex-wrap: wrap; gap: 12px; } .ss-track-wrap { order: 3; flex: 1 0 100%; } .ss-head-right { margin-left: auto; } } @media (max-width: 600px) { .ss-head { padding: 10px 16px 0; } .ss-main { padding: 26px 16px 90px; } .ss-title { font-size: 25px; } .ss-field { padding: 16px 17px; } .ss-slot { grid-template-columns: 1fr; } .ss-rep-row { flex-wrap: wrap; } .ss-actions { flex-direction: column-reverse; align-items: stretch; } .ss-btn-go { margin-left: 0; width: 100%; } .ss-aurora { filter: blur(60px); } } /* ================================================================= MOTION PREFERENCES ================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .ss-scan, .ss-aurora { animation: none; } .ss-field:hover, .ss-review-item a:hover, .ss-choice:hover { transform: none; } } /* ================================================================= UPLOADS ================================================================= */ .ss-errors { border: 1px solid #7a3b4b; border-left: 3px solid #ff6b85; background: rgba(255, 107, 133, 0.08); border-radius: var(--ss-r-card); padding: 14px 18px; margin: 0 0 18px; color: #ffc9d3; animation: ss-reveal 0.4s var(--ss-ease); } .ss-errors strong { display: block; margin-bottom: 6px; color: #ff8fa3; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; } .ss-errors ul { margin: 0; padding-left: 18px; font-size: 14px; } .ss-files { list-style: none; margin: 0 0 12px; padding: 0; } .ss-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--ss-line-input); border-left: 3px solid var(--ss-secondary); border-radius: var(--ss-r); background: rgba(9, 20, 35, 0.72); animation: ss-reveal 0.35s var(--ss-ease); } .ss-file-name { font-weight: 600; font-size: 14px; word-break: break-all; flex: 1 1 auto; min-width: 0; } .ss-file-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ss-placeholder); white-space: nowrap; } .ss-file-dl, .ss-file-rm { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: var(--ss-r); border: 1px solid var(--ss-line-input); background: transparent; color: var(--ss-muted); text-decoration: none; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; white-space: nowrap; } .ss-file-dl:hover { color: var(--ss-primary); border-color: var(--ss-primary); background: rgba(96, 165, 250, 0.1); } .ss-file-rm:hover { color: #ff8fa3; border-color: #7a3b4b; background: #2a1520; } .ss-file-input { width: 100%; padding: 14px; border: 1px dashed var(--ss-line-input); border-radius: var(--ss-r); background: rgba(9, 20, 35, 0.55); color: var(--ss-muted); font: inherit; font-size: 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .ss-file-input:hover { border-color: var(--ss-primary); background: rgba(96, 165, 250, 0.07); } .ss-file-input::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: var(--ss-r); border: 1px solid var(--ss-btn-line); background: var(--ss-btn); color: var(--ss-text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; } .ss-file-input::file-selector-button:hover { background: var(--ss-btn-hover); } /* ================================================================= MEDIA PREVIEW ================================================================= */ .ss-thumb { flex: 0 0 auto; width: 54px; height: 40px; padding: 0; border: 1px solid var(--ss-line-input); border-radius: 6px; background: var(--ss-void); cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: border-color 0.2s, transform 0.2s; } .ss-thumb:hover { border-color: var(--ss-primary); transform: scale(1.05); } .ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-thumb-av { color: var(--ss-primary); font-size: 15px; } .ss-preview-open { background: transparent; } /* display:grid below beats the UA's [hidden]{display:none}, so the dialog must be explicitly hidden. Without this it sits invisible over the whole page and eats every click. */ .ss-lightbox[hidden] { display: none !important; } .ss-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(3, 8, 16, 0.88); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: ss-fade 0.2s var(--ss-ease); } @keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } } .ss-lightbox-inner { max-width: min(1100px, 96vw); max-height: 92vh; background: linear-gradient(135deg, var(--ss-card-a), var(--ss-card-b)); border: 1px solid var(--ss-line-soft); border-radius: var(--ss-r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -30px #000; animation: ss-pop 0.25s var(--ss-ease); } @keyframes ss-pop { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } } .ss-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--ss-line); flex: 0 0 auto; } .ss-lightbox-name { font-size: 13px; font-weight: 600; color: var(--ss-label); word-break: break-all; } .ss-lightbox-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--ss-line-input); background: var(--ss-well); color: var(--ss-muted); font-size: 19px; line-height: 1; cursor: pointer; } .ss-lightbox-close:hover { color: #fff; border-color: var(--ss-primary); } .ss-lightbox-body { padding: 16px; overflow: auto; display: grid; place-items: center; background: repeating-conic-gradient(#0e1a2b 0% 25%, #0a1422 0% 50%) 50% / 22px 22px; } .ss-lightbox-body img, .ss-lightbox-body video { max-width: 100%; max-height: 74vh; display: block; border-radius: 6px; } .ss-lightbox-body audio { width: min(520px, 80vw); } /* ================================================================= "WHO DECIDES THIS" CONTROL ================================================================= */ .ss-notice-defer { border-color: #5c4a22; border-left-color: var(--ss-gold); background: rgba(227, 185, 92, 0.06); color: #e8d5a8; } .ss-field.ss-defer { background: linear-gradient(135deg, rgba(37, 31, 16, 0.7), rgba(24, 21, 12, 0.7)); border-color: #4a3d1d; } .ss-field.ss-defer::before { background: linear-gradient(90deg, transparent, var(--ss-gold) 22%, var(--ss-gold) 78%, transparent); opacity: 0.6; } .ss-field.ss-defer .ss-choice:has(input:checked) { border-color: var(--ss-gold); background: rgba(227, 185, 92, 0.12); box-shadow: inset 3px 0 0 var(--ss-gold), 0 0 20px -8px rgba(227, 185, 92, 0.8); } .ss-field.ss-defer .ss-input:focus { border-color: var(--ss-gold); box-shadow: 0 0 0 3px rgba(227, 185, 92, 0.16); } /* deferred sections read as a decision, not an omission */ .ss-seg.ss-state-deferred { background: linear-gradient(90deg, #6b5a2a, var(--ss-gold)); border-color: transparent; box-shadow: 0 0 10px rgba(227, 185, 92, 0.4); } .ss-state-deferred .ss-rail-num { background: var(--ss-gold); border-color: var(--ss-gold); color: #241a05; opacity: 0.8; } .ss-review-item.ss-state-deferred a { border-left-color: var(--ss-gold); } .ss-review-item.ss-state-deferred .ss-review-state { color: var(--ss-gold); border-color: #5c4a22; } /* placeholders should read as examples, not as filled-in values */ .ss-input::placeholder { color: var(--ss-placeholder); opacity: 0.75; font-style: italic; } /* Submission people cards: balanced columns, consistent field rhythm. */ .ss-slots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .ss-slot { grid-template-columns:minmax(0,1fr); align-items:stretch; gap:14px; padding:24px; border-radius:16px; background:var(--ss-panel,#101c2a); } .ss-slot-label { font-size:16px; letter-spacing:.04em; padding-bottom:12px; border-bottom:1px solid var(--ss-line-input); } .ss-slot label { display:grid; gap:7px; min-width:0; font-size:13px; font-weight:600; line-height:1.4; } .ss-slot .ss-input { width:100%; box-sizing:border-box; min-width:0; min-height:44px; } @media(max-width:680px) { .ss-slots { grid-template-columns:1fr; } .ss-slot { padding:20px; } } .ss-review-section { margin:14px 0; border:1px solid var(--ss-line-input); border-radius:14px; background:#101c2a; overflow:hidden; } .ss-review-section summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px; cursor:pointer; } .ss-review-section summary:before { content:'+'; color:var(--ss-primary); font-size:22px; } .ss-review-section[open] summary:before { content:'−'; } .ss-review-section summary strong { flex:1; font-size:18px; } .ss-review-section summary span { font-size:13px; } .ss-review-content { padding:0 22px 22px; } .ss-review-content dl>div { display:grid; grid-template-columns:minmax(140px,1fr) 2fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--ss-line-input); } .ss-review-content dt { font-weight:600; }.ss-review-content dd { margin:0; overflow-wrap:anywhere; line-height:1.65; } @media(max-width:680px){.ss-review-content dl>div{grid-template-columns:1fr;gap:6px}.ss-review-section summary{padding:16px}.ss-review-section summary span{max-width:90px}} .ss-person-socials summary { cursor:pointer; font-weight:600; padding:10px 0; }.ss-social-row { display:grid; grid-template-columns:1fr 1.4fr; gap:12px; padding:10px 0; } @media(max-width:420px){.ss-social-row{grid-template-columns:1fr}}