/* Cutflux portal themes — pure black shell, each tool gets a dark tint + accent. Set on */ :root { --portal-bg: #000000; --portal-surface: #080808; --portal-surface-2: #0c0c0c; --portal-tint: rgba(90, 160, 255, 0.07); --portal-glow: rgba(90, 160, 255, 0.1); --portal-accent: #5aa0ff; --portal-accent-deep: #2e6fd1; --portal-border: rgba(255, 255, 255, 0.06); --portal-border-hot: rgba(90, 160, 255, 0.28); } html, body { background: var(--portal-bg); color-scheme: dark; } /* ── Beat sync / Create Edits ── */ html[data-portal="beat"] { --portal-surface: #0a1220; --portal-surface-2: #0d1628; --portal-tint: rgba(61, 122, 212, 0.11); --portal-glow: rgba(74, 139, 232, 0.14); --portal-accent: #4a8be8; --portal-accent-deep: #1e3a6b; --portal-border-hot: rgba(74, 139, 232, 0.32); --sb-bg: #000000; --sb-panel: #0a1220; --sb-border: rgba(74, 139, 232, 0.22); --sb-accent: #4a8be8; } /* ── Copy an Edit ── */ html[data-portal="copy"] { --portal-surface: #0e0a18; --portal-surface-2: #120e1e; --portal-tint: rgba(124, 92, 255, 0.11); --portal-glow: rgba(124, 92, 255, 0.14); --portal-accent: #9b8cff; --portal-accent-deep: #5a3fd4; --portal-border-hot: rgba(155, 140, 255, 0.32); --sb-bg: #000000; --sb-panel: #0e0a18; --sb-border: rgba(155, 140, 255, 0.22); --sb-accent: #9b8cff; } /* ── Long-form Clipper ── */ html[data-portal="clipper"] { --portal-surface: #0a100e; --portal-surface-2: #0d1412; --portal-tint: rgba(61, 184, 146, 0.1); --portal-glow: rgba(61, 184, 146, 0.12); --portal-accent: #3db892; --portal-accent-deep: #1f6b52; --portal-border-hot: rgba(61, 184, 146, 0.3); } /* ── SFX Playground ── */ html[data-portal="sfx"] { --portal-surface: #061018; --portal-surface-2: #0a1420; --portal-tint: rgba(98, 212, 255, 0.1); --portal-glow: rgba(98, 212, 255, 0.12); --portal-accent: #62d4ff; --portal-accent-deep: #2a7a99; --portal-border-hot: rgba(98, 212, 255, 0.3); } /* ── Enhance ── */ html[data-portal="enhance"] { --portal-surface: #0a0f0c; --portal-surface-2: #0d1410; --portal-tint: rgba(63, 203, 126, 0.09); --portal-glow: rgba(63, 203, 126, 0.1); --portal-accent: #3fcb7e; --portal-accent-deep: #1f7a4a; --portal-border-hot: rgba(63, 203, 126, 0.28); } /* ── Hub / home / mobile dashboard ── */ html[data-portal="hub"] { --portal-tint: rgba(90, 160, 255, 0.06); --portal-glow: rgba(90, 160, 255, 0.08); } /* Ambient wash on portal pages */ html[data-portal] body { background: radial-gradient(ellipse 85% 55% at 50% -12%, var(--portal-glow), transparent 62%), radial-gradient(ellipse 45% 35% at 100% 100%, var(--portal-tint), transparent 55%), var(--portal-bg); } /* beat-timeline.css pages */ html[data-portal="beat"] body, html[data-portal="copy"] body { background: radial-gradient(ellipse 720px 420px at 50% -8%, var(--portal-glow), transparent 68%), var(--portal-bg); } /* Home card accents */ .rd-card[data-portal="beat"] { --card-accent: rgba(74, 139, 232, 0.38); --card-surface: #0a1220; --card-glow: rgba(74, 139, 232, 0.12); } .rd-card[data-portal="copy"] { --card-accent: rgba(155, 140, 255, 0.38); --card-surface: #0e0a18; --card-glow: rgba(124, 92, 255, 0.12); } .rd-card[data-portal="clipper"] { --card-accent: rgba(61, 184, 146, 0.38); --card-surface: #0a100e; --card-glow: rgba(61, 184, 146, 0.1); } .rd-card[data-portal="sfx"] { --card-accent: rgba(98, 212, 255, 0.38); --card-surface: #061018; --card-glow: rgba(98, 212, 255, 0.1); } .rd-card[data-portal] { border: 1px solid rgba(255, 255, 255, 0.04); background: rgba(0, 0, 0, 0.55); } .rd-card[data-portal] .rd-prev { background: var(--card-surface, #080808) !important; } .rd-card[data-portal]:hover { border-color: var(--card-accent, rgba(90, 160, 255, 0.3)) !important; box-shadow: 0 36px 84px rgba(0, 0, 0, 0.65), 0 0 46px var(--card-glow, rgba(90, 160, 255, 0.08)) !important; } .rd-card[data-portal]:hover .rd-go { background: var(--portal-accent, #5aa0ff); }