| |
| |
| |
| |
|
|
| :root { |
| --fx: cubic-bezier(0.15, 0.85, 0.3, 1.0); |
| --pop: cubic-bezier(0.2, 1.7, 0.4, 1.0); |
| --primary: #B98BFF; |
| --secondary: #FF3D8B; |
| --accent: #3DE7FF; |
| --gold: #FFC94D; |
| --night: #120821; |
| --night-2: #0a0414; |
| --stage: #241241; |
| --stage-2: #2E1A52; |
| --raise: #382060; |
| --line: #3A2A5E; |
| --line-soft: #2C1E4C; |
| --cream: #FFF3E9; |
| --muted: #A98FC9; |
| --muted-2: #7C66A6; |
| --star-gold: #FFC94D; |
| --star-hot: #FF4D9A; |
| --star-cyan: #3DE7FF; |
| --star-violet: #C18BFF; |
| --star-lime: #9BE85B; |
| --star-tang: #FF8A4D; |
| } |
|
|
| [data-vibe="football"] { |
| --primary: #F5C842; --secondary: #4CAF50; --accent: #8BC34A; |
| --night: #0a1a0f; --night-2: #050c07; --stage: #0f2415; --stage-2: #14351c; --raise: #1e4d2a; |
| --line: rgba(76, 175, 80, 0.25); --line-soft: rgba(76, 175, 80, 0.12); |
| --cream: #f0f4e8; --muted: #8aaa7a; --muted-2: #5f7a53; |
| } |
| [data-vibe="diva"] { |
| --primary: #F4C2E1; --secondary: #D4AF37; --accent: #E91E8C; |
| --night: #1a0a14; --night-2: #0e050b; --stage: #240f1d; --stage-2: #38152c; --raise: #4c1a3b; |
| --line: rgba(233, 30, 140, 0.2); --line-soft: rgba(233, 30, 140, 0.1); |
| --cream: #fdf0f7; --muted: #b88aa8; --muted-2: #865f79; |
| } |
| [data-vibe="wildlife"] { |
| --primary: #C8A84B; --secondary: #2E7D32; --accent: #8D6E3C; |
| --night: #0d1a0a; --night-2: #060c04; --stage: #141f0f; --stage-2: #1f3017; --raise: #2b4520; |
| --line: rgba(200, 168, 75, 0.3); --line-soft: rgba(200, 168, 75, 0.15); |
| --cream: #e8dcc8; --muted: #8a9e78; --muted-2: #5c6e50; |
| } |
| [data-vibe="boxing"] { |
| --primary: #E53935; --secondary: #FFB300; --accent: #FF6F00; |
| --night: #0f0505; --night-2: #080202; --stage: #1a0808; --stage-2: #2b0c0c; --raise: #3d1111; |
| --line: rgba(229, 57, 53, 0.3); --line-soft: rgba(229, 57, 53, 0.15); |
| --cream: #fdf0ee; --muted: #aa8080; --muted-2: #7c5858; |
| } |
| [data-vibe="masterchef"] { |
| --primary: #FF8F00; --secondary: #ECEFF1; --accent: #F57F17; |
| --night: #080808; --night-2: #020202; --stage: #101010; --stage-2: #1b1b1b; --raise: #262626; |
| --line: rgba(255, 255, 255, 0.07); --line-soft: rgba(255, 255, 255, 0.03); |
| --cream: #f5f5f5; --muted: #9e9e9e; --muted-2: #616161; |
| } |
|
|
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } |
| body { |
| font-family: 'Nunito', system-ui, sans-serif; |
| color: var(--cream); background-color: var(--night); min-height: 100vh; line-height: 1.5; |
| transition: background-color 0.8s var(--fx), color 0.8s var(--fx); overflow-x: hidden; |
| } |
| body::before { |
| content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: 0.015; |
| background: repeating-linear-gradient(0deg, #000 0px, #000 1px, transparent 1px, transparent 3px); |
| } |
| body::after { |
| content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .03; mix-blend-mode: overlay; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); |
| } |
| .disp { font-family: 'Unbounded', sans-serif; } |
| .marq { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; } |
| svg.i { width: 1em; height: 1em; display: block; flex: none; } |
| .shell { max-width: 1240px; margin: 0 auto; padding: clamp(20px,4vw,40px) clamp(16px,3vw,32px) 60px; position: relative; z-index: 1; } |
|
|
| |
| .masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; margin-bottom: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } |
| .brand { display: flex; align-items: center; gap: 20px; } |
| .sign { |
| position: relative; padding: 14px 24px 15px; border-radius: 12px; |
| border: 2px solid rgba(255,201,77,0.3); |
| background: radial-gradient(120% 140% at 50% 0%, rgba(255,201,77,0.1), transparent 75%), linear-gradient(180deg, rgba(21,21,37,0.4), rgba(11,11,20,0.8)); |
| box-shadow: inset 0 0 20px rgba(255,201,77,0.06), 0 10px 40px rgba(0,0,0,0.5); |
| } |
| .sign h1 { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(22px,3vw,32px); letter-spacing: .06em; line-height: 1; color: var(--cream); text-shadow: 0 0 14px rgba(255,201,77,0.35); } |
| .sign .bulbs { position: absolute; left: 16px; right: 16px; display: flex; justify-content: space-between; } |
| .sign .bulbs.t { top: -5px; } |
| .sign .bulbs.b { bottom: -5px; } |
| .sign .bulbs i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 2px #fff; animation: tw 2s infinite; } |
| .sign .bulbs i:nth-child(2n) { animation-delay: .5s; background: var(--secondary); box-shadow: 0 0 8px var(--secondary), 0 0 2px #fff; } |
| .sign .bulbs i:nth-child(3n) { animation-delay: 1.2s; background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 2px #fff; } |
| @keyframes tw { 0%,100% { opacity: 1; filter: brightness(1.2); } 50% { opacity: .2; filter: brightness(0.6); } } |
| .tag { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 13px; color: var(--primary); letter-spacing: .02em; } |
| .tag small { display: block; font-family: 'Nunito', sans-serif; font-weight: 600; color: var(--muted); font-size: 12px; margin-top: 4px; letter-spacing: 0; } |
| .broadcast-meta { display: flex; align-items: center; gap: 16px; } |
| .clock { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 22px; color: var(--muted); font-variant-numeric: tabular-nums; } |
| .status { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-family: 'Bebas Neue', sans-serif; letter-spacing: .14em; font-size: 15px; color: var(--muted); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; background: rgba(11,11,20,0.6); } |
| .status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); transition: .3s; } |
| .status.live { color: var(--secondary); border-color: rgba(255,61,139,0.4); background: rgba(255,61,139,0.06); } |
| .status.live .led { background: var(--secondary); box-shadow: 0 0 10px var(--secondary); animation: tw 1.1s infinite; } |
|
|
| |
| .rundown { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin: 12px 0 34px; padding: 0 8px; } |
| .rundown::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 2px; background: var(--line-soft); } |
| .cue { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } |
| .cue .node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); border: 1.5px solid var(--line); font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--muted-2); position: relative; z-index: 1; transition: .35s var(--fx); } |
| .cue .ttl { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--muted); } |
| .cue .sub { font-size: 11px; color: var(--muted-2); letter-spacing: .01em; } |
| .cue.done .node { border-color: var(--accent); color: var(--accent); background: rgba(0,240,255,0.06); } |
| .cue.done .ttl { color: var(--cream); } |
| .cue.on .node { border-color: var(--primary); color: var(--primary); background: rgba(185,139,255,0.1); box-shadow: 0 0 0 4px rgba(185,139,255,0.06), 0 0 20px rgba(185,139,255,0.25); } |
| .cue.on .ttl { color: var(--primary); } |
|
|
| |
| .vibe-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; margin-bottom: 24px; background: color-mix(in srgb, var(--primary) 8%, var(--stage)); border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 30px rgba(0,0,0,0.4); backdrop-filter: blur(12px); transition: all 0.5s var(--fx); position: relative; overflow: hidden; } |
| .vibe-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--vc, var(--primary)) 8%, transparent), transparent 50%); pointer-events: none; } |
| .vibe-banner-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); transition: all 0.5s var(--fx); box-shadow: 0 0 15px color-mix(in srgb,var(--vc,var(--primary)) 40%,transparent); } |
| .vibe-banner-name { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 16px; font-weight: bold; color: var(--primary); letter-spacing: .08em; } |
| .vibe-banner-desc { display: block; font-size: 12.5px; color: var(--cream); line-height: 1.45; } |
| .banner-wave { display: flex; align-items: center; gap: 3px; height: 16px; margin-left: auto; flex-shrink: 0; padding-left: 14px; border-left: 1px solid var(--line); } |
| .banner-wave span { width: 2.5px; height: 4px; border-radius: 1px; background: var(--vc, var(--primary)); animation: wav 1.1s ease-in-out infinite alternate; opacity: 0.85; } |
| .banner-wave span:nth-child(2) { animation-delay: 0.15s; height: 8px; } |
| .banner-wave span:nth-child(3) { animation-delay: 0.3s; height: 14px; } |
| .banner-wave span:nth-child(4) { animation-delay: 0.45s; height: 9px; } |
| .banner-wave span:nth-child(5) { animation-delay: 0.6s; height: 5px; } |
| @keyframes wav { 0% { transform: scaleY(0.4); opacity: 0.3; } 100% { transform: scaleY(1.5); opacity: 1; filter: brightness(1.2); } } |
|
|
| |
| .console { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } |
| @media(max-width:960px){ .console { grid-template-columns: 1fr; } } |
| .desk { display: flex; flex-direction: column; gap: 20px; } |
| .card { background: var(--stage); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02); backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: background-color 0.5s var(--fx), border-color 0.5s var(--fx); } |
| .card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } |
| .card-h .ic { color: var(--primary); font-size: 18px; transition: color 0.5s; } |
| .card-h h2 { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .01em; } |
| .card-h .meta { margin-left: auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: .07em; font-size: 12px; color: var(--muted-2); } |
| .skew-header { transform: skewX(-12deg); } |
|
|
| |
| .drop { position: relative; border: 1.5px dashed rgba(255,255,255,0.15); border-radius: 14px; padding: 28px 20px; text-align: center; cursor: pointer; transition: .25s var(--fx); overflow: hidden; background: radial-gradient(180px 100px at 50% -20%, rgba(185,139,255,0.03), transparent 75%); } |
| .drop:hover { border-color: var(--primary); background: radial-gradient(180px 100px at 50% -10%, rgba(185,139,255,0.06), transparent 75%); } |
| .drop:focus-visible { border-color: var(--accent); } |
| .drop .clap { font-size: 32px; color: var(--primary); display: inline-flex; margin-bottom: 10px; transition: color 0.5s; } |
| .drop .t { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; } |
| .drop .s { font-size: 11px; color: var(--muted); margin-top: 5px; } |
| .drop .loaded { display: none; align-items: center; gap: 14px; text-align: left; } |
| .drop.loaded { border-style: solid; border-color: rgba(185,139,255,0.35); background: rgba(185,139,255,0.03); cursor: default; } |
| .drop.loaded .ask { display: none; } |
| .drop.loaded .loaded { display: flex; } |
| .strip { width: 52px; height: 52px; border-radius: 10px; flex: none; position: relative; overflow: hidden; background: linear-gradient(135deg,var(--night-2),var(--stage)); border: 1.5px solid var(--line); } |
| .strip::before, .strip::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; background: repeating-linear-gradient(var(--night) 0 3px,transparent 3px 6px); } |
| .strip::before { left: 3px; } |
| .strip::after { right: 3px; } |
| .strip .play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 18px; } |
| .loaded .fn { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } |
| .loaded .fd { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: 14px; color: var(--accent); margin-top: 2px; } |
|
|
| |
| .btn { width: 100%; border: 0; cursor: pointer; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; color: var(--night); padding: 15px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .2s var(--fx); } |
| .btn:disabled { opacity: .3; cursor: not-allowed; background: var(--night-2) !important; color: var(--muted-2) !important; border: 1px solid var(--line-soft); } |
| .btn.cyan { background: linear-gradient(135deg,var(--accent),#00a8e8); box-shadow: 0 4px 14px rgba(0,240,255,0.2); } |
| .btn.cyan:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,240,255,0.4); } |
| .btn.show { font-size: 15px; padding: 18px; background: linear-gradient(110deg,var(--primary),var(--secondary)); position: relative; overflow: hidden; color: #fff; box-shadow: 0 6px 20px rgba(255,0,102,0.15); } |
| .btn.show:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,0,102,0.35); } |
| .btn.show:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); transform: translateX(-220%); } |
| @media(prefers-reduced-motion:no-preference){ .btn.show:not(:disabled)::after { animation: shine 4s ease-in-out infinite; } } |
| @keyframes shine { 0% { transform: translateX(-220%); } 35%,100% { transform: translateX(360%); } } |
| .mt { margin-top: 14px; } |
| .sweep { height: 4px; border-radius: 2px; margin-top: 14px; background: var(--night-2); position: relative; overflow: hidden; opacity: 0; transition: .25s; } |
| .casting .sweep { opacity: 1; } |
| .sweep::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg,transparent,var(--primary),transparent); } |
| @media(prefers-reduced-motion:no-preference){ .sweep::after { animation: sw 1.2s linear infinite; } } |
| @keyframes sw { from { transform: translateX(-120%); } to { transform: translateX(300%); } } |
|
|
| |
| .stage-panel { background: radial-gradient(80% 60% at 50% -8%, rgba(185,139,255,0.03), transparent 60%), linear-gradient(180deg,var(--stage),var(--night-2)); border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 24px 60px rgba(0,0,0,0.5); backdrop-filter: blur(12px); transition: background-color 0.5s var(--fx); } |
| .stage-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } |
| .stage-h .ic { color: var(--primary); font-size: 20px; transition: color 0.5s; } |
| .stage-h h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; } |
| .stage-h .count { margin-left: auto; white-space: nowrap; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 14px; color: var(--primary); background: rgba(185,139,255,0.06); padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(185,139,255,0.15); transition: color 0.5s, border-color 0.5s; } |
| .empty { display: grid; place-items: center; min-height: 330px; text-align: center; padding: 20px; } |
| .empty .spot { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; color: var(--muted-2); font-size: 44px; background: radial-gradient(circle at 50% 30%,rgba(255,255,255,0.03),transparent 75%); border: 1px solid var(--line-soft); } |
| .empty .t { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 16px; color: var(--cream); margin-bottom: 6px; } |
| .empty .s { font-size: 13px; color: var(--muted); max-width: 320px; } |
| .roster { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 18px; } |
| .star { --c: var(--primary); position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg,var(--stage-2),var(--stage)); border: 1px solid var(--line); transition: .25s var(--fx); } |
| .star:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--c) 60%,transparent); } |
| .portrait { position: relative; height: 138px; overflow: hidden; background: radial-gradient(90% 80% at 50% 120%,color-mix(in srgb,var(--c) 15%,var(--night-2)),var(--night-2)); } |
| .portrait .beam { position: absolute; top: -30px; left: 50%; width: 140px; height: 170px; transform: translateX(-50%); pointer-events: none; clip-path: polygon(40% 0,60% 0,100% 100%,0 100%); background: linear-gradient(180deg,color-mix(in srgb,var(--c) 40%,transparent),transparent 75%); opacity: .5; } |
| .portrait .head-ph { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); color: color-mix(in srgb,var(--c) 30%,#ffffff); opacity: .3; } |
| .portrait .frame { position: absolute; inset: 8px; border: 1.5px solid color-mix(in srgb,var(--c) 25%,transparent); border-radius: 10px; pointer-events: none; } |
| .portrait .idx { position: absolute; top: 10px; left: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: var(--cream); background: rgba(11,11,20,0.8); padding: 2px 8px; border-radius: 6px; display: flex; align-items: center; gap: 4px; } |
| .portrait .idx .st { color: var(--c); } |
| .tier { position: absolute; top: 10px; right: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: .02em; white-space: nowrap; color: var(--night); background: var(--c); padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 10px color-mix(in srgb,var(--c) 40%,transparent); font-weight: bold; } |
| .crown { position: absolute; top: 50px; left: 50%; transform: translateX(-50%) translateY(12px) scale(.4) rotate(-12deg); opacity: 0; width: 30px; height: 30px; color: var(--primary); filter: drop-shadow(0 2px 6px color-mix(in srgb,var(--primary) 60%,transparent)); transition: .4s var(--pop); } |
| .star.named .crown { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } |
| .star-body { padding: 12px; } |
| .star-body label { font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; } |
| .star input { width: 100%; background: var(--night-2); border: 1px solid var(--line); color: var(--cream); border-radius: 10px; padding: 10px 12px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; outline: none; transition: .16s; } |
| .star input::placeholder { color: var(--muted-2); font-weight: 600; } |
| .star input:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent); } |
| .star.named { border-color: color-mix(in srgb,var(--c) 55%,transparent); box-shadow: 0 8px 24px color-mix(in srgb,var(--c) 12%,transparent); } |
| .star.named .portrait { background: radial-gradient(90% 90% at 50% 120%,color-mix(in srgb,var(--c) 30%,var(--night-2)),var(--night-2)); } |
| .star.named .portrait .beam { opacity: 1; } |
| .star.named .head-ph { opacity: .6; } |
|
|
| |
| .view { display: none; } |
| .view.active { display: block; animation: viewIn .45s var(--fx); } |
| @keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } |
|
|
| |
| .booth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } |
| .back { display: inline-flex; align-items: center; gap: 8px; background: var(--stage); border: 1px solid var(--line); color: var(--cream); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: .16s; backdrop-filter: blur(12px); } |
| .back:hover { border-color: var(--primary); color: var(--cream); } |
| .booth { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; transition: grid-template-columns 0.4s var(--fx); } |
| @media(max-width:840px){ .booth { grid-template-columns: 1fr; } } |
| .screen-wrap { background: #000; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.8); position: relative; } |
| |
| .screen { position: relative; width: 100%; aspect-ratio: 1/1 !important; background: repeating-linear-gradient(135deg,#0e0a1a 0 18px,#07050d 18px 36px); display: grid; place-items: center; overflow: hidden; } |
| .screen .ph { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; color: var(--muted-2); font-size: 15px; text-align: center; padding: 0 20px; } |
| .screen .ph svg { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--line); display: block; } |
| .screen-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; } |
| .booth.portrait .screen-vid { object-fit: cover; } |
| .screen.has-video .ph { display: none; } |
| .screen.has-video .screen-vid { display: block; } |
| .portrait .head-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } |
| .star.named .head-img { filter: saturate(1.05); } |
| .bug { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(6,6,12,0.85); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 13px; color: var(--cream); z-index: 5; border: 1px solid var(--line); } |
| .bug .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 10px var(--secondary); } |
| @media(prefers-reduced-motion:no-preference){ .bug .dot { animation: tw 1s infinite; } } |
| .tc { position: absolute; top: 14px; right: 14px; background: rgba(6,6,12,0.85); backdrop-filter: blur(8px); padding: 7px 14px; border-radius: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 14px; color: var(--primary); font-variant-numeric: tabular-nums; z-index: 5; border: 1px solid var(--line); } |
| .chyron { position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 12px; overflow: hidden; background: linear-gradient(100deg, rgba(10,10,18,0.96), rgba(18,18,30,0.94)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 15px 40px rgba(0,0,0,0.6); transform: translateY(130%); opacity: 0; transition: .45s var(--fx); z-index: 10; } |
| .chyron.in { transform: none; opacity: 1; } |
| .chyron .bar { height: 4px; background: var(--vibe-primary, var(--secondary)); } |
| .chyron .row { display: flex; align-items: stretch; } |
| .chyron .who { display: flex; align-items: center; font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; font-size: 16px; color: var(--night); background: var(--vibe-primary, var(--secondary)); padding: 12px 16px; white-space: nowrap; font-weight: bold; } |
| .chyron .line { padding: 12px 18px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; color: var(--cream); display: flex; align-items: center; line-height: 1.35; } |
| @media(prefers-reduced-motion:no-preference){ .chyron.in .line { animation: sharpen .5s var(--fx); } } |
| @keyframes sharpen { from { filter: blur(6px); opacity: .3; } to { filter: blur(0); opacity: 1; } } |
| .transport { display: flex; align-items: center; gap: 14px; margin-top: 14px; } |
| .transport .pp { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; background: linear-gradient(135deg,var(--primary),var(--secondary)); color: var(--night); font-size: 20px; transition: .16s; box-shadow: 0 4px 12px rgba(255,0,102,0.2); } |
| .transport .pp:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(255,0,102,0.4); } |
| .scrub { flex: 1; height: 6px; border-radius: 4px; background: var(--night-2); position: relative; cursor: pointer; border: 1px solid var(--line-soft); } |
| .scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; width: 0; background: linear-gradient(90deg,var(--secondary),var(--primary)); } |
| .scrub .knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); transform: translate(-50%,-50%); left: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.6); border: 1.5px solid var(--primary); } |
| .pbp { background: var(--stage); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; max-height: 520px; backdrop-filter: blur(12px); } |
| .pbp .pbp-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); } |
| .pbp .pbp-h .ic { color: var(--primary); font-size: 16px; } |
| .pbp .pbp-h h3 { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px; } |
| .pbp .pbp-h .ct { margin-left: auto; font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-size: 12px; color: var(--muted-2); } |
| .pbp .lines { overflow-y: auto; padding: 6px; } |
| .pbp .pl { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; transition: .15s; align-items: baseline; } |
| .pbp .pl:hover { background: rgba(255,255,255,0.02); } |
| .pbp .pl .t { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 14px; color: var(--muted-2); flex: none; width: 42px; font-variant-numeric: tabular-nums; padding-top: 1px; } |
| .pbp .pl .tx { font-size: 13px; line-height: 1.45; color: var(--muted); } |
| .pbp .pl .tx b { color: var(--cream); font-weight: 800; } |
| .pbp .pl.now { background: color-mix(in srgb,var(--vibe-primary,var(--primary)) 10%,rgba(255,255,255,0.01)); } |
| .pbp .pl.now .t { color: var(--vibe-primary,var(--primary)); } |
| .pbp .pl.now .tx { color: var(--cream); } |
| .pbp .pl.now .tx b { color: var(--vibe-primary,var(--primary)); } |
| .export { padding: 14px 18px; border-top: 1px solid var(--line-soft); background: rgba(6,6,12,0.4); } |
| .export .btn-srt { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; background: var(--stage-2); border: 1px solid var(--line); color: var(--cream); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; padding: 12px; border-radius: 11px; transition: .16s; } |
| .export .btn-srt:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(0,240,255,0.15); } |
| .export .btn-srt .ic { color: var(--accent); font-size: 16px; } |
| .export .hint { text-align: center; font-size: 11px; color: var(--muted-2); margin-top: 8px; } |
| .export .hint b { color: var(--muted); } |
| .voice-card { margin-top: 0; } |
| .voice-opts { display: flex; gap: 8px; padding: 4px 0; } |
| .voice-opt { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: .15s; } |
| .voice-opt:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); } |
| .voice-opt[aria-pressed="true"] { border-color: var(--primary); background: rgba(185,139,255,0.06); } |
| .voice-opt .vt { font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 600; color: var(--cream); } |
| .voice-opt[aria-pressed="true"] .vt { color: var(--primary); } |
| .voice-opt .vd { font-size: 10px; color: var(--muted-2); } |
| .export .btn-export { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--vibe-primary, var(--secondary)); background: color-mix(in srgb,var(--vibe-primary, var(--secondary)) 12%,transparent); color: var(--vibe-primary, var(--secondary)); font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em; transition: .15s; margin-top: 10px; } |
| .export .btn-export:hover { background: color-mix(in srgb,var(--vibe-primary, var(--secondary)) 22%,transparent); } |
| .export .btn-export:disabled { opacity: .4; cursor: not-allowed; } |
| .export .btn-export .ic { font-size: 16px; } |
| .export-progress { margin-top: 10px; } |
| .export-bar { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 6px; } |
| .export-fill { height: 100%; background: var(--vibe-primary, var(--secondary)); border-radius: 2px; width: 0%; transition: width .3s; } |
| .export-label { font-size: 11px; color: var(--muted-2); } |
| .confetti { position: fixed; top: -20px; width: 11px; height: 14px; z-index: 90; pointer-events: none; border-radius: 2px; } |
| @media(prefers-reduced-motion:no-preference){ .confetti { animation: fall linear forwards; } } |
| @keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } } |
| .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--stage-2); border: 1px solid var(--primary); color: var(--cream); padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 13px; z-index: 95; transition: .3s var(--fx); display: flex; align-items: center; gap: 9px; box-shadow: 0 14px 40px rgba(0,0,0,0.6); } |
| .toast.show { transform: translateX(-50%); opacity: 1; } |
| .toast .ic { color: var(--primary); } |
| .note { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--muted-2); margin-top: 28px; max-width: 560px; line-height: 1.55; } |
| .note .lock { font-size: 14px; margin-top: 1px; flex: none; } |
| .note b { color: var(--muted); } |
| @media(prefers-reduced-motion:reduce){ * { animation: none !important; transition: none !important; } } |
| @media(max-width:560px){ .masthead { gap: 14px; } .rundown .sub { display: none; } .roster { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); } } |
|
|
| |
| .landing { position: fixed; inset: 0; z-index: 100; background: #040409; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; transition: opacity .5s ease, visibility .5s ease; } |
| .landing.hidden { opacity: 0; visibility: hidden; pointer-events: none; } |
| .landing-inner { width: 100%; max-width: 700px; padding: clamp(32px,6vw,64px) clamp(16px,4vw,32px) 48px; display: flex; flex-direction: column; gap: 40px; } |
| .landing-brand { text-align: center; } |
| .landing-brand .sign { display: inline-block; position: relative; margin-bottom: 16px; } |
| .landing-tag { font-family: 'Nunito', sans-serif; font-size: 15px; color: var(--muted); max-width: 380px; margin: 0 auto; line-height: 1.6; } |
| .landing-prompt { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 13px; color: var(--muted-2); text-transform: uppercase; margin-bottom: 12px; text-align: center; } |
| .landing-vibes { display: flex; flex-direction: column; gap: 12px; } |
| .lv-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--stage); border: 1px solid var(--line-soft); border-radius: 16px; cursor: pointer; text-align: left; width: 100%; transition: transform .22s var(--fx), border-color .22s var(--fx), background .22s var(--fx), box-shadow .22s var(--fx); position: relative; overflow: hidden; } |
| .lv-card::before { content: ''; position: absolute; inset: 0; background: var(--lv-glow, transparent); opacity: 0.15; transition: opacity .25s; pointer-events: none; } |
| .lv-card:hover { transform: translateY(-3px); } |
| .lv-card:hover::before { opacity: 0.35; } |
| .lv-card[data-vibe="football"] { background: linear-gradient(135deg, #09170d 0%, #080c14 100%); border-color: rgba(76,175,80,0.15); } |
| .lv-card[data-vibe="football"]::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 150px; background: linear-gradient(115deg, transparent, rgba(76,175,80,0.04), transparent); transform: skewX(-20deg); pointer-events: none; } |
| .lv-card[data-vibe="football"]:hover { border-color: #39FF14; box-shadow: 0 8px 24px rgba(57,255,20,0.08); } |
| .lv-card[data-vibe="football"] .lv-icon { color: #39FF14; background: rgba(57,255,20,0.08); } |
| .lv-card[data-vibe="diva"] { background: linear-gradient(135deg, #1c0615 0%, #0a030c 100%); border-color: rgba(233,30,140,0.15); } |
| .lv-card[data-vibe="diva"]::after { content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; background: #E91E8C; border-radius: 50%; opacity: 0.12; filter: blur(5px); box-shadow: -40px -10px 0 #D4AF37, -20px 15px 0 #E91E8C; pointer-events: none; } |
| .lv-card[data-vibe="diva"]:hover { border-color: #E91E8C; box-shadow: 0 8px 24px rgba(233,30,140,0.08); } |
| .lv-card[data-vibe="diva"] .lv-icon { color: #F4C2E1; background: rgba(233,30,140,0.08); } |
| .lv-card[data-vibe="wildlife"] { background: linear-gradient(135deg, #110e08 0%, #050805 100%); border-color: rgba(200,168,75,0.15); } |
| .lv-card[data-vibe="wildlife"]::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 50%, rgba(200,168,75,0.04), transparent 75%); pointer-events: none; } |
| .lv-card[data-vibe="wildlife"]:hover { border-color: #C8A84B; box-shadow: 0 8px 24px rgba(200,168,75,0.08); } |
| .lv-card[data-vibe="wildlife"] .lv-icon { color: #C8A84B; background: rgba(200,168,75,0.08); } |
| .lv-card[data-vibe="boxing"] { background: linear-gradient(135deg, #150404 0%, #080202 100%); border-color: rgba(229,57,53,0.15); } |
| .lv-card[data-vibe="boxing"]::after { content: ""; position: absolute; top: -30px; right: 20px; width: 80px; height: 160px; background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); pointer-events: none; } |
| .lv-card[data-vibe="boxing"]:hover { border-color: #E53935; box-shadow: 0 8px 24px rgba(229,57,53,0.08); } |
| .lv-card[data-vibe="boxing"] .lv-icon { color: #E53935; background: rgba(229,57,53,0.08); } |
| .lv-card[data-vibe="masterchef"] { background: linear-gradient(135deg, #141414 0%, #080808 100%); border-color: rgba(255,143,0,0.15); } |
| .lv-card[data-vibe="masterchef"]:hover { border-color: #FF8F00; box-shadow: 0 8px 24px rgba(255,143,0,0.05); } |
| .lv-card[data-vibe="masterchef"] .lv-icon { color: #FF8F00; background: rgba(255,143,0,0.05); } |
| .lv-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 22px; transition: background .2s; } |
| .lv-body { flex: 1; min-width: 0; } |
| .lv-name { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; color: var(--cream); margin-bottom: 4px; } |
| .lv-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; } |
| .lv-arrow { color: var(--muted-2); font-size: 18px; flex: none; transition: transform .2s, color .2s; } |
| .lv-card:hover .lv-arrow { transform: translateX(4px); color: var(--cream); } |
|
|
| |
| .change-vibe-btn { background: linear-gradient(180deg, var(--stage-2), var(--stage)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); border-radius: 8px; padding: 8px 16px; font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 13px; color: var(--muted); cursor: pointer; transition: all 0.25s var(--fx); position: relative; overflow: hidden; } |
| .change-vibe-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: translateX(-100%); transition: transform 0.4s var(--fx); } |
| .change-vibe-btn:hover { border-color: var(--primary); color: #fff; box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 25%, transparent); } |
| .change-vibe-btn:hover::before { transform: translateX(100%); } |
