/* ════════════════════════════════════════════════════════════════
REDitors — Hero Feature Showcase
Drop-in replacement for the coupon-card right column.
HOW TO USE
1. Add this file AFTER promo-hero.css in :
with the
HTML from hero-right-snippet.html
3. Add the JS block from hero-right-snippet.html before
════════════════════════════════════════════════════════════════ */
/* ── Widen right column & reset coupon remnants ── */
.promo-right {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: stretch !important;
position: relative !important;
padding: 0 !important;
}
/* Kill any leftover coupon ambient glow */
.promo-right::before {
background: none !important;
display: none !important;
}
/* ════════════════════════════════════════════════════════════════
SHOWCASE — GRADIENT BORDER WRAPPER
════════════════════════════════════════════════════════════════ */
.sc-showcase {
position: relative;
z-index: 1;
width: 100%;
padding: 1.5px;
border-radius: 22px;
background: linear-gradient(162deg,
rgba(139,92,246,0.58) 0%,
rgba(100,60,220,0.38) 14%,
rgba(59,130,246,0.24) 28%,
rgba(255,255,255,0.09) 50%,
rgba(255,255,255,0.04) 72%,
rgba(100,60,220,0.10) 100%
);
box-shadow:
0 0 0 1px rgba(255,255,255,0.02),
0 40px 100px rgba(0,0,0,0.55),
0 0 80px rgba(139,92,246,0.07),
inset 0 1px 0 rgba(255,255,255,0.04);
transition: box-shadow 0.4s ease;
}
.sc-showcase:hover {
box-shadow:
0 0 0 1px rgba(255,255,255,0.03),
0 50px 120px rgba(0,0,0,0.60),
0 0 110px rgba(139,92,246,0.12),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Inner glass pane */
.sc-glass {
background: rgba(8,5,20,0.92);
border-radius: 21px;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
overflow: hidden;
position: relative;
}
/* AI scan-sweep highlight */
.sc-sweep {
position: absolute;
left: 0; right: 0;
height: 90px;
background: linear-gradient(180deg,
transparent 0%,
rgba(139,92,246,0.03) 40%,
rgba(59,130,246,0.025) 60%,
transparent 100%
);
pointer-events: none;
z-index: 20;
animation: sc-sweep-anim 6s ease-in-out infinite;
}
@keyframes sc-sweep-anim {
0% { top: -90px; opacity: 0; }
8% { opacity: 1; }
88% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* ════════════════════════════════════════════════════════════════
CHROME TITLEBAR
════════════════════════════════════════════════════════════════ */
.sc-chrome {
display: flex;
align-items: center;
padding: 11px 16px;
background: rgba(255,255,255,0.02);
border-bottom: 1px solid rgba(255,255,255,0.05);
gap: 8px;
}
.sc-chrome-dots { display: flex; gap: 6px; }
.sc-dot {
width: 10px; height: 10px; border-radius: 50%;
}
.sc-dot-r { background: #ff5f57; box-shadow: 0 0 5px rgba(255,95,87,0.45); }
.sc-dot-y { background: #febc2e; box-shadow: 0 0 5px rgba(254,188,46,0.38); }
.sc-dot-g { background: #28c840; box-shadow: 0 0 5px rgba(40,200,64,0.38); }
.sc-chrome-title {
flex: 1;
text-align: center;
font-size: 0.70rem;
font-weight: 600;
color: rgba(255,255,255,0.25);
letter-spacing: 0.04em;
font-family: 'JetBrains Mono', monospace;
}
.sc-chrome-live {
display: flex; align-items: center; gap: 5px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.64rem; font-weight: 600;
color: #10b981;
}
.sc-live-dot {
width: 5px; height: 5px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 5px #10b981;
animation: sc-pulse 2.2s ease-in-out infinite;
}
@keyframes sc-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.7); }
}
/* ════════════════════════════════════════════════════════════════
PANEL — BASE
════════════════════════════════════════════════════════════════ */
.sc-panel {
padding: 13px 16px 14px;
border-bottom: 1px solid rgba(255,255,255,0.045);
transition: background 0.2s ease;
position: relative;
}
.sc-panel:last-child { border-bottom: none; }
.sc-panel:hover { background: rgba(255,255,255,0.012); }
.sc-panel-head {
display: flex; align-items: center; gap: 7px;
margin-bottom: 10px;
}
.sc-panel-icon {
width: 24px; height: 24px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 0.66rem; font-weight: 800;
flex-shrink: 0;
}
.sc-panel-name {
font-size: 0.80rem; font-weight: 700; color: #fff; flex: 1;
}
.sc-panel-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.60rem; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
padding: 2px 8px; border-radius: 100px;
}
/* ── Panel 1: Auto Captions — blue ── */
.sc-panel-captions { border-left: 2px solid rgba(59,130,246,0.48); }
.sc-panel-captions .sc-panel-icon {
background: rgba(59,130,246,0.14);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.25);
}
.sc-panel-captions .sc-panel-badge {
background: rgba(59,130,246,0.10);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.20);
}
/* ── Panel 2: AI Speech Cut — green ── */
.sc-panel-speech { border-left: 2px solid rgba(16,185,129,0.48); }
.sc-panel-speech .sc-panel-icon {
background: rgba(16,185,129,0.12);
color: #10b981;
border: 1px solid rgba(16,185,129,0.23);
}
.sc-panel-speech .sc-panel-badge {
background: rgba(245,158,11,0.10);
color: #f59e0b;
border: 1px solid rgba(245,158,11,0.22);
}
/* ── Panel 3: Title Animator — purple ── */
.sc-panel-animator { border-left: 2px solid rgba(139,92,246,0.48); }
.sc-panel-animator .sc-panel-icon {
background: rgba(139,92,246,0.12);
color: #8b5cf6;
border: 1px solid rgba(139,92,246,0.23);
}
.sc-panel-animator .sc-panel-badge {
background: rgba(139,92,246,0.10);
color: #8b5cf6;
border: 1px solid rgba(139,92,246,0.20);
}
/* ════════════════════════════════════════════════════════════════
PANEL 1 — AUTO CAPTIONS
════════════════════════════════════════════════════════════════ */
.sc-lang-chips {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 10px;
}
.sc-lc {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px; padding: 3px 7px;
font-size: 0.64rem; font-weight: 600;
color: rgba(255,255,255,0.70);
transition: all 0.15s ease; cursor: default;
}
.sc-lc .fi { font-size: 0.70rem; line-height: 1; }
.sc-lc:hover {
background: rgba(59,130,246,0.12);
border-color: rgba(59,130,246,0.26);
color: #fff;
}
.sc-lc-more {
background: rgba(59,130,246,0.08);
border-color: rgba(59,130,246,0.18);
color: #3b82f6;
font-family: 'JetBrains Mono', monospace;
}
/* Video-style caption preview */
.sc-cap-preview {
background: linear-gradient(150deg, #09001a 0%, #110930 45%, #0c0820 100%);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 9px; height: 64px;
position: relative; overflow: hidden;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 8px;
}
.sc-cap-preview::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.50) 100%);
pointer-events: none; z-index: 1;
}
.sc-cap-preview::after {
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
0deg,
rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px,
transparent 1px, transparent 3px
);
pointer-events: none; z-index: 1; opacity: 0.5;
}
.sc-cap-light {
position: absolute;
width: 160px; height: 50px;
background: radial-gradient(ellipse, rgba(139,92,246,0.18) 0%, transparent 70%);
top: 5px; left: 50%; transform: translateX(-50%);
pointer-events: none;
}
.sc-cap-pill {
display: inline-flex; align-items: center; gap: 1px;
background: rgba(0,0,0,0.68);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.13);
border-radius: 7px; padding: 4px 10px;
position: relative; z-index: 3;
white-space: nowrap;
}
.sc-cword {
font-size: 0.76rem; font-weight: 600;
color: rgba(255,255,255,0.45);
transition: all 0.22s ease;
padding: 0 2px; border-radius: 3px;
}
.sc-cword.done { color: rgba(255,255,255,0.80); }
.sc-cword.active {
color: #fff;
background: rgba(59,130,246,0.38);
text-shadow: 0 0 8px rgba(59,130,246,0.6);
}
/* ════════════════════════════════════════════════════════════════
PANEL 2 — AI SPEECH CUT
════════════════════════════════════════════════════════════════ */
.sc-tl-wrap {
background: rgba(0,0,0,0.42);
border: 1px solid rgba(255,255,255,0.055);
border-radius: 8px; padding: 8px 10px 7px;
position: relative;
}
.sc-tl-ruler {
display: flex; justify-content: space-between;
padding: 0 2px; margin-bottom: 5px;
}
.sc-tl-tick {
font-size: 0.54rem; font-family: 'JetBrains Mono', monospace;
color: rgba(255,255,255,0.17);
}
.sc-tl-row {
display: flex; align-items: center; gap: 6px;
margin-bottom: 4px;
}
.sc-tl-row:last-of-type { margin-bottom: 0; }
.sc-tl-label {
font-size: 0.56rem; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
color: rgba(255,255,255,0.24);
width: 15px; text-align: right; flex-shrink: 0;
}
.sc-tl-bars {
flex: 1; height: 26px;
overflow: hidden; border-radius: 4px;
display: flex; align-items: center;
}
.sc-tl-playhead {
position: absolute; top: 26px; bottom: 7px;
width: 1px; left: 38%;
background: rgba(255,255,255,0.50);
box-shadow: 0 0 4px rgba(255,255,255,0.35);
pointer-events: none;
}
.sc-tl-playhead::before {
content: '';
position: absolute; top: 0; left: -3px;
width: 7px; height: 7px; border-radius: 50%;
background: #fff; box-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.sc-speech-stats {
display: flex; align-items: center; gap: 14px;
margin-top: 8px;
}
.sc-stat {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.64rem; font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.sc-stat.g { color: #10b981; }
.sc-stat.a { color: #f59e0b; }
/* ════════════════════════════════════════════════════════════════
PANEL 3 — TITLE ANIMATOR
════════════════════════════════════════════════════════════════ */
.sc-preset-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.sc-ptile {
border-radius: 7px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.07);
aspect-ratio: 16 / 9; position: relative;
cursor: pointer; transition: all 0.20s ease;
}
.sc-ptile:hover {
border-color: rgba(255,255,255,0.18);
transform: scale(1.045); z-index: 2;
}
.sc-ptile.sel {
border-color: #8b5cf6;
box-shadow: 0 0 0 1px rgba(139,92,246,0.38), 0 5px 16px rgba(139,92,246,0.28);
}
.sc-ptile-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.sc-ptile-lines {
display: flex; flex-direction: column; gap: 2px; width: 70%; opacity: 0.55;
}
.sc-ptile-line {
height: 2px; background: rgba(255,255,255,0.6); border-radius: 1px;
}
.sc-ptile-line.short { width: 55%; }
.sc-ptile-label {
position: absolute; bottom: 0; left: 0; right: 0;
text-align: center; z-index: 2;
font-size: 0.48rem; font-weight: 700;
color: rgba(255,255,255,0.72);
padding: 4px 2px 2px;
background: linear-gradient(to top, rgba(0,0,0,0.70), transparent);
}
/* Tile gradient themes */
.sc-th-fade { background: linear-gradient(135deg, #0c0a20 0%, #221460 55%, #0c091c 100%); }
.sc-th-slide { background: linear-gradient(135deg, #0d1a2e 0%, #0e3a70 55%, #0a1828 100%); }
.sc-th-zoom { background: linear-gradient(135deg, #190d30 0%, #4a1a8e 55%, #260c56 100%); }
.sc-th-glitch { background: linear-gradient(135deg, #0e1a0e 0%, #0b5036 55%, #091d14 100%); }
.sc-th-type { background: linear-gradient(135deg, #1a150a 0%, #6b3a0a 55%, #3d1e04 100%); }
.sc-th-cinema { background: linear-gradient(135deg, #1a0c0c 0%, #781515 55%, #3d0a0a 100%); }
.sc-th-elastic { background: linear-gradient(135deg, #0c1a1a 0%, #0e4e4a 55%, #061818 100%); }
.sc-th-split { background: linear-gradient(135deg, #0d0d1e 0%, #2a267e 55%, #16144e 100%); }
/* ════════════════════════════════════════════════════════════════
RESPONSIVE — collapse showcase below nav at mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.promo-hero-grid {
flex-direction: column !important;
gap: 40px !important;
}
.promo-right { width: 100% !important; }
.sc-preset-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
.sc-chrome-title { display: none !important; }
.sc-lang-chips .sc-lc:nth-child(n+5) { display: none !important; }
.sc-preset-grid { grid-template-columns: repeat(4, 1fr) !important; }
}