/* 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.1); --portal-glow: rgba(90, 160, 255, 0.14); --portal-accent: #5aa0ff; --portal-accent-deep: #2e6fd1; --portal-border: rgba(255, 255, 255, 0.06); --portal-border-hot: rgba(90, 160, 255, 0.35); } html, body { background: var(--portal-bg); color-scheme: dark; } /* ── Beat sync / Create Edits ── */ html[data-portal="beat"] { --portal-surface: #0c1628; --portal-surface-2: #101e34; --portal-tint: rgba(61, 122, 212, 0.16); --portal-glow: rgba(74, 139, 232, 0.22); --portal-accent: #5aa0ff; --portal-accent-deep: #1e3a6b; --portal-border-hot: rgba(74, 139, 232, 0.42); --sb-bg: #000000; --sb-panel: #0c1628; --sb-border: rgba(74, 139, 232, 0.28); --sb-accent: #5aa0ff; } /* ── Copy an Edit ── */ html[data-portal="copy"] { --portal-surface: #140e24; --portal-surface-2: #1a1230; --portal-tint: rgba(124, 92, 255, 0.18); --portal-glow: rgba(124, 92, 255, 0.24); --portal-accent: #b09cff; --portal-accent-deep: #6b4fc7; --portal-border-hot: rgba(176, 156, 255, 0.45); --sb-bg: #000000; --sb-panel: #140e24; --sb-border: rgba(176, 156, 255, 0.28); --sb-accent: #b09cff; } /* ── Long-form Clipper ── */ html[data-portal="clipper"] { --portal-surface: #0c1412; --portal-surface-2: #101a16; --portal-tint: rgba(61, 184, 146, 0.16); --portal-glow: rgba(61, 184, 146, 0.2); --portal-accent: #4fd4a8; --portal-accent-deep: #1f6b52; --portal-border-hot: rgba(79, 212, 168, 0.4); } /* ── SFX Playground ── */ html[data-portal="sfx"] { --portal-surface: #081420; --portal-surface-2: #0c1a28; --portal-tint: rgba(98, 212, 255, 0.16); --portal-glow: rgba(98, 212, 255, 0.2); --portal-accent: #7ee4ff; --portal-accent-deep: #2a7a99; --portal-border-hot: rgba(126, 228, 255, 0.4); } /* ── Enhance ── */ html[data-portal="enhance"] { --portal-surface: #0c1210; --portal-surface-2: #101814; --portal-tint: rgba(63, 203, 126, 0.14); --portal-glow: rgba(63, 203, 126, 0.18); --portal-accent: #52db8e; --portal-accent-deep: #1f7a4a; --portal-border-hot: rgba(82, 219, 142, 0.38); } /* ── Hub / home / mobile dashboard ── */ html[data-portal="hub"] { --portal-tint: rgba(90, 160, 255, 0.09); --portal-glow: rgba(90, 160, 255, 0.12); } /* 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); } 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 tool-card previews ── */ .rd-card[data-portal="beat"] { --card-accent: rgba(90, 160, 255, 0.52); --card-surface: #0c1628; --card-wash: rgba(74, 139, 232, 0.2); --card-glow: rgba(74, 139, 232, 0.22); --card-edge: rgba(90, 160, 255, 0.14); } .rd-card[data-portal="copy"] { --card-accent: rgba(176, 156, 255, 0.58); --card-surface: #140e24; --card-wash: rgba(124, 92, 255, 0.26); --card-glow: rgba(124, 92, 255, 0.28); --card-edge: rgba(176, 156, 255, 0.18); } .rd-card[data-portal="clipper"] { --card-accent: rgba(79, 212, 168, 0.52); --card-surface: #0c1412; --card-wash: rgba(61, 184, 146, 0.18); --card-glow: rgba(61, 184, 146, 0.2); --card-edge: rgba(79, 212, 168, 0.14); } .rd-card[data-portal="sfx"] { --card-accent: rgba(126, 228, 255, 0.52); --card-surface: #081420; --card-wash: rgba(98, 212, 255, 0.18); --card-glow: rgba(98, 212, 255, 0.2); --card-edge: rgba(126, 228, 255, 0.14); } .rd-card[data-portal] { border: 1px solid var(--card-edge, rgba(255, 255, 255, 0.06)); background: rgba(0, 0, 0, 0.72); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .rd-card[data-portal] .rd-prev { background: var(--card-surface, #080808) !important; } .rd-card[data-portal] .rd-prev::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% -8%, var(--card-wash, transparent), transparent 68%), radial-gradient(ellipse 55% 45% at 100% 100%, var(--card-wash, transparent), transparent 60%); opacity: 0.95; } .rd-card[data-portal] .rd-prev > * { position: relative; z-index: 1; } .rd-card[data-portal]:hover { border-color: var(--card-accent, rgba(90, 160, 255, 0.4)) !important; box-shadow: 0 36px 84px rgba(0, 0, 0, 0.65), 0 0 52px var(--card-glow, rgba(90, 160, 255, 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .rd-card[data-portal]:hover .rd-go { background: var(--portal-accent, #5aa0ff); box-shadow: 0 0 20px var(--card-glow, rgba(90, 160, 255, 0.25)); } @import url("/cutflux-ui.css?v=2");