/* ===================================================================== Sound of the Vibe — Creator Flow (v6.1.0) Premium iOS styling. Mobile-first & fluid: the app fills the viewport, max-width caps it on big screens, padding scales with clamp(), media keep aspect-ratio, safe-area insets respected, tap targets >= 44px. ===================================================================== */ .vibe-root *{ box-sizing:border-box; } .vibe-root{ --pink:#FF2D6F; --purple:#A435F0; --violet:#6D28D9; --ink:#1a1726; --muted:#7a748c; --bg:#F4F2F8; --line:#E7DFF4; --grad:linear-gradient(135deg,var(--pink),var(--purple)); position:relative; width:100%; max-width:480px; height:100svh; min-height:560px; margin:0 auto; overflow:hidden; background:#000; border-radius:0; font-family:-apple-system,'SF Pro Display',BlinkMacSystemFont,system-ui,sans-serif; color:var(--ink); -webkit-tap-highlight-color:transparent; } @media (min-width:520px){ .vibe-root{ height:min(880px,94svh); border-radius:42px; box-shadow:0 40px 90px rgba(40,20,80,.28); margin-top:3svh; } } .vibe-screen{ position:absolute; inset:0; } .vibe-screen[hidden]{ display:none; } /* ---------- buttons reset ---------- */ .vibe-root button{ font-family:inherit; cursor:pointer; border:none; background:none; } /* ===================================================================== CAPTURE / RECORDING ===================================================================== */ .vibe-capture{ overflow:hidden; background:#15101f; } .vibe-cam{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background: radial-gradient(58% 42% at 50% 58%, rgba(255,217,160,.9) 0%, rgba(255,168,118,.4) 46%, rgba(120,70,90,0) 76%), linear-gradient(180deg,#2a2440 0%,#5a4666 26%,#9a6a6f 52%,#caa07f 70%,#7c5152 88%,#2c2032 100%); } .vibe-cam-scrim{ position:absolute; inset:0; background:radial-gradient(140% 95% at 50% 80%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 100%); pointer-events:none; } .vibe-cap-top{ position:absolute; left:0; right:0; top:max(46px, env(safe-area-inset-top)); display:flex; flex-direction:column; align-items:center; gap:9px; z-index:3; } .vibe-wordmark{ font-size:13px; font-weight:700; letter-spacing:.28em; color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.4); } .vibe-gps-pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; color:#fff; background:rgba(20,15,30,.42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:.5px solid rgba(255,255,255,.18); font-size:12px; font-weight:600; } .vibe-gps-dot{ width:6px; height:6px; border-radius:50%; background:#34d27b; box-shadow:0 0 7px #34d27b; } .vibe-rec-pill{ position:absolute; left:50%; transform:translateX(-50%); top:max(104px, calc(env(safe-area-inset-top) + 58px)); z-index:4; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; color:#fff; background:rgba(20,15,30,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:.5px solid rgba(255,255,255,.18); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; } .vibe-rec-dot{ width:9px; height:9px; border-radius:50%; background:#FF3B5C; animation:vibeRecPulse 1.1s ease-in-out infinite; } .vibe-capture.is-recording .vibe-cam-scrim{ box-shadow:inset 0 0 0 2.5px rgba(255,59,92,.55), inset 0 0 40px rgba(255,59,92,.18); } .vibe-cap-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 clamp(20px,7vw,30px) max(40px, calc(env(safe-area-inset-bottom) + 26px)); display:flex; flex-direction:column; align-items:center; gap:22px; } .vibe-hint{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; color:#fff; background:rgba(20,15,30,.42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:.5px solid rgba(255,255,255,.18); font-size:13px; font-weight:600; text-align:center; } .vibe-shutter-row{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 8px; } .vibe-thumb{ width:42px; height:42px; border-radius:11px; background:linear-gradient(145deg,#9a6a6f,#caa07f); border:1.5px solid rgba(255,255,255,.5); } .vibe-shutter{ position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; padding:0; } .vibe-shutter::before{ content:""; position:absolute; inset:0; border-radius:50%; border:4px solid rgba(255,255,255,.95); } .vibe-shutter-core{ width:62px; height:62px; border-radius:50%; background:var(--grad); transition:all .25s ease; } .vibe-ring{ position:absolute; inset:-4px; width:92px; height:92px; transform:rotate(-90deg); opacity:0; } .vibe-ring circle{ fill:none; stroke:#FF3B5C; stroke-width:4; stroke-linecap:round; stroke-dasharray:264; stroke-dashoffset:0; } .vibe-shutter.is-recording .vibe-ring circle{ animation:vibeRingSweep 6s linear forwards; } @keyframes vibeRingSweep{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:264; } } /* recording state */ .vibe-shutter.is-recording::before{ border-color:rgba(255,255,255,.55); } .vibe-shutter.is-recording .vibe-shutter-core{ width:32px; height:32px; border-radius:9px; background:#FF3B5C; } .vibe-shutter.is-recording .vibe-ring{ opacity:1; } .vibe-flip{ width:42px; height:42px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; background:rgba(20,15,30,.42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:.5px solid rgba(255,255,255,.18); } .vibe-flip:disabled{ opacity:.4; } /* ===================================================================== ANALYZING ===================================================================== */ .vibe-analyzing{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0 40px; text-align:center; background:linear-gradient(180deg,#241a36,#120c1e); } .vibe-orb{ position:relative; width:128px; height:128px; margin-bottom:40px; } .vibe-orb::before{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 38% 35%, #FF6FA3, var(--purple) 70%); box-shadow:0 0 60px rgba(164,53,240,.55); animation:vibeOrbPulse 2.2s ease-in-out infinite; } .vibe-orb::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(255,255,255,.85); border-right-color:rgba(255,255,255,.35); animation:vibeSpin 1.5s linear infinite; } .vibe-orb span{ position:absolute; bottom:50%; left:50%; width:5px; height:17px; border-radius:3px; background:#fff; transform-origin:bottom; } .vibe-orb span:nth-child(1){ transform:translate(-15px,50%); animation:vibeEq .9s ease-in-out infinite; } .vibe-orb span:nth-child(2){ transform:translate(-6px,50%); animation:vibeEq .9s ease-in-out infinite .18s; } .vibe-orb span:nth-child(3){ transform:translate(3px,50%); animation:vibeEq .9s ease-in-out infinite .36s; } .vibe-orb span:nth-child(4){ transform:translate(12px,50%); animation:vibeEq .9s ease-in-out infinite .12s; } .vibe-analyzing-title{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:#fff; margin-bottom:10px; } .vibe-analyzing-sub{ font-size:15px; line-height:1.5; color:rgba(255,255,255,.62); max-width:260px; } /* ===================================================================== RESULTS ===================================================================== */ .vibe-results-screen{ background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; } .vibe-results-head{ position:sticky; top:0; z-index:8; background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:max(48px,env(safe-area-inset-top)) clamp(14px,4vw,17px) 12px; } .vibe-circle-btn{ width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(40,20,80,.08); display:flex; align-items:center; justify-content:center; color:#5a5470; flex-shrink:0; } .vibe-results-title{ font-size:clamp(16px,4.4vw,17px); font-weight:700; letter-spacing:-.01em; } .vibe-pinned{ position:sticky; top:calc(max(48px,env(safe-area-inset-top)) + 48px); z-index:7; background:var(--bg); display:flex; gap:clamp(11px,3.5vw,14px); align-items:stretch; padding:2px clamp(14px,4vw,17px) 14px; box-shadow:0 12px 18px -14px rgba(30,20,60,.4); } .vibe-clip{ width:clamp(92px,29vw,116px); aspect-ratio:9/16; flex-shrink:0; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 12px 28px rgba(30,20,60,.22); background:radial-gradient(72% 48% at 50% 55%, rgba(255,217,160,.95) 0%, rgba(255,168,118,.4) 46%, rgba(120,70,90,0) 80%),linear-gradient(180deg,#2a2440 0%,#5a4666 28%,#9a6a6f 54%,#caa07f 76%,#7c5152 100%); } .vibe-clip-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vibe-clip-gps,.vibe-clip-loop{ position:absolute; left:8px; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; color:#fff; font-weight:700; background:rgba(20,15,30,.46); backdrop-filter:blur(10px); border:.5px solid rgba(255,255,255,.18); z-index:2; } .vibe-clip-gps{ top:8px; font-size:9.5px; } .vibe-clip-loop{ bottom:8px; font-size:9px; letter-spacing:.04em; } .vibe-nowplaying{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:9px; } .vibe-np-kicker{ font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--purple); } .vibe-np-title{ font-size:clamp(15px,4.2vw,16px); font-weight:700; color:#2a2740; margin-top:2px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vibe-np-sub{ font-size:12.5px; color:var(--muted); } .vibe-np-bar{ height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:2px; } .vibe-np-bar i{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--purple)); transition:width .25s linear; } .vibe-np-time{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; color:var(--purple); font-variant-numeric:tabular-nums; } .vibe-np-time span:last-child{ color:#b3adc2; font-weight:400; } .vibe-scene{ display:flex; gap:8px; align-items:flex-start; padding:14px clamp(14px,4vw,17px) 0; font-size:13px; line-height:1.45; color:#4a4560; text-wrap:pretty; } .vibe-scene b{ font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--purple); flex-shrink:0; padding-top:2px; } .vibe-section-label{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:16px clamp(14px,4vw,17px) 13px; } .vibe-section-label span{ font-size:15px; font-weight:700; letter-spacing:-.01em; } .vibe-section-label em{ font-size:11.5px; color:#9a93ad; font-style:normal; text-align:right; } .vibe-cards{ display:flex; flex-direction:column; gap:16px; padding:0 clamp(14px,4vw,17px) 132px; } /* ---------- card ---------- */ .vibe-card{ background:#fff; border-radius:26px; padding:clamp(13px,4vw,16px); box-shadow:0 10px 30px rgba(30,20,60,.07); position:relative; } .vibe-card.is-voted{ background:var(--grad); padding:2px; box-shadow:0 14px 34px rgba(164,53,240,.22); } .vibe-card.is-voted .vibe-card-inner{ background:#fff; border-radius:24px; padding:clamp(13px,4vw,16px); } .vibe-card-inner{ display:contents; } .vibe-card.is-voted .vibe-card-inner{ display:block; } .vibe-check{ display:none; position:absolute; top:-9px; right:-6px; width:30px; height:30px; border-radius:50%; background:var(--grad); border:3px solid var(--bg); align-items:center; justify-content:center; z-index:3; } .vibe-card.is-voted .vibe-check{ display:flex; } .vibe-card-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; } .vibe-label{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; } .vibe-mood-chip{ font-size:12px; font-weight:800; color:#fff; background:var(--grad); padding:5px 13px; border-radius:999px; letter-spacing:.02em; } .vibe-family{ font-size:10px; font-weight:700; color:#C2410C; background:#FFEDD5; padding:3px 8px; border-radius:999px; } .vibe-mood{ font-size:12px; font-style:italic; color:var(--muted); text-align:right; } .vibe-card-body{ display:flex; gap:13px; align-items:center; margin-bottom:13px; } .vibe-album-art{ width:66px; height:66px; border-radius:14px; flex-shrink:0; object-fit:cover; box-shadow:0 4px 14px rgba(80,40,120,.22); background:linear-gradient(145deg,#F7B267,#E76F88 55%,#A8597E); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:28px; font-family:Georgia,serif; } .vibe-track-info{ flex:1; min-width:0; } .vibe-track-name{ font-size:16px; font-weight:700; color:var(--violet); letter-spacing:-.01em; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vibe-track-artist{ font-size:13.5px; color:var(--muted); } .vibe-genres-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .vibe-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#475569; background:#EEF1F6; padding:4px 10px; border-radius:999px; } .vibe-reasoning{ margin-bottom:14px; } .vibe-reasoning b{ font-size:10px; font-weight:800; letter-spacing:.09em; color:var(--purple); } .vibe-reasoning p{ font-size:13px; line-height:1.5; color:#5e5872; font-style:italic; margin:4px 0 0; text-wrap:pretty; } .vibe-preview-panel{ background:#F8F4FE; border-radius:16px; padding:13px; } .vibe-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:11px; font-size:11.5px; font-weight:600; color:#8a7aa6; } .vibe-preview-head .vibe-mini-time{ font-weight:700; color:var(--purple); font-variant-numeric:tabular-nums; } .vibe-mini-bar{ height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-bottom:12px; } .vibe-mini-bar i{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--purple)); } .vibe-card-actions{ display:flex; gap:9px; } .vibe-preview-btn{ flex:1; min-height:44px; background:var(--grad); color:#fff; border-radius:13px; padding:11px; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 16px rgba(164,53,240,.32); } .vibe-preview-btn.is-playing{ background:#fff; color:#7C2BDF; border:1.5px solid #C9B6EC; box-shadow:none; } .vibe-media-link{ min-height:44px; text-decoration:none; background:#fff; border:1.5px solid var(--line); color:#5a5470; border-radius:13px; padding:11px 14px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; } .vibe-no-preview{ flex:1; display:flex; align-items:center; justify-content:center; min-height:44px; font-size:12px; color:#b3adc2; } /* error card */ .vibe-card-error{ background:#FFF5F6; } .vibe-error-note{ font-size:12px; color:#b4434f; margin-bottom:8px; } .vibe-error-note code{ font-size:11px; } .vibe-confirm-bar{ position:sticky; bottom:0; z-index:8; margin-top:auto; padding:14px clamp(14px,4vw,17px) max(24px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(244,242,248,0),var(--bg) 26%); } .vibe-confirm-btn{ width:100%; min-height:54px; background:var(--grad); color:#fff; border-radius:17px; padding:16px; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 10px 26px rgba(164,53,240,.34); transition:opacity .2s; } .vibe-confirm-btn:disabled{ opacity:.45; box-shadow:none; } /* ===================================================================== CONFIRMED / MAP ===================================================================== */ .vibe-confirmed{ background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; } .vibe-confirmed-hero{ position:absolute; top:0; left:0; right:0; height:330px; background:radial-gradient(120% 90% at 50% 0%, var(--purple) 0%, var(--pink) 55%, var(--bg) 100%); } .vibe-confirmed-inner{ position:relative; padding:max(70px,calc(env(safe-area-inset-top) + 30px)) clamp(16px,5vw,22px) max(34px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; text-align:center; } .vibe-locked-pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.22); backdrop-filter:blur(10px); border:.5px solid rgba(255,255,255,.3); color:#fff; font-size:12px; font-weight:700; letter-spacing:.03em; margin-bottom:18px; } .vibe-confirmed-title{ font-size:25px; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0; text-shadow:0 2px 14px rgba(80,20,90,.3); } .vibe-map-card{ width:100%; background:#fff; border-radius:28px; padding:18px; box-shadow:0 24px 50px rgba(80,30,120,.2); margin-top:24px; text-align:left; } .vibe-song-id{ display:flex; align-items:center; gap:13px; margin-bottom:16px; } .vibe-song-art{ width:62px; height:62px; border-radius:14px; flex-shrink:0; object-fit:cover; box-shadow:0 6px 16px rgba(80,40,120,.3); background:linear-gradient(145deg,#F7B267,#E76F88 55%,#A8597E); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:26px; font-family:Georgia,serif; } .vibe-song-meta{ flex:1; min-width:0; } .vibe-song-mood{ font-size:10px; font-weight:800; color:#fff; background:var(--grad); padding:3px 10px; border-radius:999px; letter-spacing:.02em; } .vibe-song-name{ font-size:19px; font-weight:700; color:var(--violet); letter-spacing:-.015em; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vibe-song-artist{ font-size:13.5px; color:var(--muted); } .vibe-map{ position:relative; height:208px; border-radius:18px; overflow:hidden; background:#E7ECEF; } .vibe-map-tiles{ position:absolute; inset:0; background: linear-gradient(#fff,#fff) 42% 0/7px 100% no-repeat, linear-gradient(#fff,#fff) 0 46%/100% 7px no-repeat, linear-gradient(#fff,#fff) 74% 0/4px 100% no-repeat, radial-gradient(#D4EACD 0 100%) 86% 24%/88px 64px no-repeat, radial-gradient(#CBE3F0 0 100%) 50% 118%/150% 60px no-repeat, #E7ECEF; opacity:.96; } .vibe-map-pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); width:54px; height:54px; } .vibe-pin-pulse{ position:absolute; top:34px; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:radial-gradient(circle,var(--purple),transparent 70%); animation:vibePinPulse 2s ease-out infinite; } .vibe-pin-body{ position:absolute; top:0; left:0; width:54px; height:54px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:var(--grad); box-shadow:0 8px 18px rgba(164,53,240,.45); display:flex; align-items:center; justify-content:center; overflow:hidden; } .vibe-pin-body{ color:transparent; } .vibe-pin-body::after{ content:""; position:absolute; top:5px; left:5px; width:44px; height:44px; border-radius:50%; transform:rotate(-45deg); border:2px solid #fff; background:var(--pin-art,linear-gradient(145deg,#F7B267,#E76F88 55%,#A8597E)) center/cover; } .vibe-loc-row{ display:flex; align-items:center; gap:9px; margin:14px 2px 16px; } .vibe-loc-text{ flex:1; min-width:0; } .vibe-loc-text div{ font-size:14px; font-weight:700; color:#2a2740; } .vibe-loc-text small{ font-size:11.5px; color:#9a93ad; } .vibe-public-badge{ display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; background:#ECFCF3; color:#1F8A5B; font-size:10.5px; font-weight:700; flex-shrink:0; } .vibe-public-badge i{ width:6px; height:6px; border-radius:50%; background:#1FAE6A; } .vibe-apple-btn{ width:100%; min-height:52px; background:#000; color:#fff; border-radius:16px; padding:15px; font-size:15.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:10px; text-decoration:none; } .vibe-share-btn{ width:100%; min-height:48px; background:#fff; border:1.5px solid var(--line); color:var(--violet); border-radius:16px; padding:13px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; } .vibe-again-btn{ margin-top:22px; color:#8a7aa6; font-size:14.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px; } /* ===================================================================== keyframes ===================================================================== */ @keyframes vibeRecPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.82);} } @keyframes vibeOrbPulse{ 0%,100%{ transform:scale(1); opacity:.95;} 50%{ transform:scale(1.12); opacity:.7;} } @keyframes vibeSpin{ to{ transform:rotate(360deg);} } @keyframes vibeEq{ 0%,100%{ transform:translateX(var(--x,0)) scaleY(.35);} 50%{ transform:translateX(var(--x,0)) scaleY(1);} } @keyframes vibePinPulse{ 0%{ transform:translate(-50%,-50%) scale(.6); opacity:.55;} 100%{ transform:translate(-50%,-50%) scale(2.4); opacity:0;} } /* equalizer transforms need the translate preserved */ .vibe-orb span:nth-child(1){ --x:-15px; } .vibe-orb span:nth-child(2){ --x:-6px; } .vibe-orb span:nth-child(3){ --x:3px; } .vibe-orb span:nth-child(4){ --x:12px; } @media (prefers-reduced-motion:reduce){ .vibe-rec-dot,.vibe-orb::before,.vibe-orb::after,.vibe-orb span,.vibe-pin-pulse{ animation:none !important; } } /* ===================================================================== THEME-PROOFING — WordPress themes often style bare