/* Theme Name: VibraMusic Theme URI: https://vibramusic.app Author: VibraMusic Description: Artist-first launch, pilot intake, studio preview, and transparent operating principles for VibraMusic.app. Version: 2.8.1 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: vibramusic */ :root { --ink: #080a09; --surface: #101311; --surface-2: #151815; --bone: #f1eadf; --soft: #c1bbb1; --muted: #817f78; --line: #2a2e2a; --copper: #df9767; --copper-dark: #aa6742; --teal: #58b9b0; --lilac: #9b79c8; --green: #67bd8b; --warning: #daa44f; --display: Georgia, "Times New Roman", serif; --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* VibraMusic 2.0 — The Release Passport */ .release-passport { --passport-accent: var(--copper); position: relative; isolation: isolate; overflow: hidden; padding: clamp(108px, 9vw, 154px) 0 clamp(136px, 11vw, 188px); border-block: 1px solid rgba(231,154,98,.27); background: radial-gradient(circle 680px at 67% 47%, rgba(231,154,98,.055), transparent 69%), linear-gradient(180deg, #090b09 0%, #080a08 74%, #060706 100%); } .release-passport::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 33%, #000 88%, transparent); } .passport-room { position: absolute; z-index: -2; inset: auto 0 0; height: 310px; overflow: hidden; opacity: .42; } .passport-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#060706 0%,transparent 68%); } .passport-room img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 58%; filter: saturate(.72) contrast(1.08); } .passport-layout { width: min(1600px,calc(100% - 72px)); display: grid; grid-template-columns: minmax(440px,.82fr) minmax(0,1.6fr); gap: clamp(44px,4.4vw,72px); align-items: center; } .passport-copy { position: relative; z-index: 2; min-width: 0; } .passport-copy .eyebrow { margin-bottom: 21px; color: var(--copper); } .passport-copy h2 { max-width: 570px; margin: 0; color: var(--bone); font: 400 clamp(54px,4.35vw,82px)/.88 var(--display); letter-spacing: -.052em; } .passport-copy h2 em { display: block; color: var(--copper); font-style: normal; font-weight: 400; } .passport-lede { max-width: 520px; margin: 28px 0 0; color: #bcb6ad; font-size: clamp(15px,1.25vw,18px); line-height: 1.62; } .passport-role-tabs { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 32px; border: 1px solid #343731; background: rgba(5,7,6,.74); } .passport-role-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 54px; padding: 8px 10px; border: 0; border-right: 1px solid #343731; color: #aaa69f; background: transparent; font: 650 10px/1.1 var(--ui); cursor: pointer; transition: color .22s ease, background .22s ease, box-shadow .22s ease; } .passport-role-tabs button:last-child { border-right: 0; } .passport-role-tabs button svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .passport-role-tabs button:hover { color: var(--bone); background: rgba(255,255,255,.03); } .passport-role-tabs button:focus-visible { position: relative; z-index: 2; outline-offset: -3px; } .passport-role-tabs button[aria-pressed="true"] { color: var(--copper); background: rgba(231,154,98,.065); box-shadow: inset 0 0 0 1px var(--copper), 0 0 30px rgba(231,154,98,.06); } .passport-role-outcome { min-height: 45px; margin: 16px 0 0; padding-left: 14px; border-left: 1px solid var(--copper); color: #918d86; font-size: 11px; line-height: 1.55; } .passport-role-outcome.is-changing { animation: passport-copy-in .38s ease both; } .passport-desktop-cta { display: inline-flex; margin-top: 27px; } .passport-desktop-cta svg,.passport-mobile-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .passport-product { display: grid; grid-template-columns: minmax(480px,1fr) minmax(238px,280px); gap: clamp(18px,2.1vw,30px); align-items: center; min-width: 0; } .passport-orbit { position: relative; width: 100%; max-width: 610px; aspect-ratio: 1; margin-inline: auto; } .passport-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(231,154,98,.16); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; } .passport-ring::before,.passport-ring::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); } .passport-ring-one { width: 82%; height: 82%; } .passport-ring-one::before { width: 2px; height: 2px; box-shadow: 0 -247px 0 2px var(--copper), 214px -123px 0 1px rgba(231,154,98,.74), 214px 123px 0 1px rgba(231,154,98,.74), 0 247px 0 1px rgba(231,154,98,.74), -214px 123px 0 1px rgba(231,154,98,.74), -214px -123px 0 1px rgba(231,154,98,.74); } .passport-ring-two { width: 64%; height: 64%; border-style: dotted; opacity: .7; animation: passport-spin 28s linear infinite; } .passport-ring-three { width: 51%; height: 51%; border-color: rgba(231,154,98,.38); box-shadow: 0 0 34px rgba(231,154,98,.035), inset 0 0 28px rgba(231,154,98,.025); } .passport-routes { position: absolute; inset: 0; pointer-events: none; } .passport-route { --route-angle: 0deg; position: absolute; top: 50%; left: 50%; width: 42%; height: 1px; opacity: .26; transform: rotate(var(--route-angle)); transform-origin: 0 50%; background: linear-gradient(90deg,rgba(231,154,98,.18) 0 42%,rgba(231,154,98,.92) 43% 82%,rgba(231,154,98,.18)); transition: opacity .24s ease; } .passport-route::after { content: ""; position: absolute; top: -2px; left: 43%; width: 5px; height: 5px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 9px var(--copper),18px 0 0 -1px rgba(241,234,223,.65),38px 0 0 -1px var(--copper); animation: passport-signal 2.6s cubic-bezier(.35,.04,.48,.96) infinite; } .passport-route-master { --route-angle: -135deg; } .passport-route-composition { --route-angle: -45deg; } .passport-route-contributors { --route-angle: 0deg; } .passport-route-territories { --route-angle: 45deg; } .passport-route-access { --route-angle: 135deg; } .passport-route-settlement { --route-angle: 180deg; } .release-passport[data-passport-proof="master"] .passport-route-master, .release-passport[data-passport-proof="composition"] .passport-route-composition, .release-passport[data-passport-proof="contributors"] .passport-route-contributors, .release-passport[data-passport-proof="territories"] .passport-route-territories, .release-passport[data-passport-proof="access"] .passport-route-access, .release-passport[data-passport-proof="settlement"] .passport-route-settlement { opacity: 1; } .passport-release { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 38.5%; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(231,154,98,.84); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 11px rgba(6,8,7,.78),0 0 0 12px rgba(231,154,98,.25),0 22px 55px rgba(0,0,0,.55); } .passport-release::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle,transparent 18%,rgba(3,4,3,.18) 62%,rgba(3,4,3,.58)); } .passport-release img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.67) brightness(.62) contrast(1.12); } .passport-release-shine { position: absolute; z-index: 1; inset: -30%; background: linear-gradient(116deg,transparent 32%,rgba(255,255,255,.08) 48%,transparent 62%); transform: translateX(-36%); animation: passport-shine 7s ease-in-out infinite; } .passport-release strong,.passport-release em { position: relative; z-index: 2; text-transform: uppercase; text-align: center; } .passport-release strong { align-self: end; margin-bottom: 2px; color: #fffaf1; font: 700 clamp(14px,1.45vw,22px)/1 var(--ui); letter-spacing: .24em; text-indent: .24em; text-shadow: 0 2px 16px #000; } .passport-release em { align-self: start; margin-top: 8px; color: var(--copper); font: 750 clamp(8px,.76vw,11px)/1 var(--ui); letter-spacing: .2em; text-indent: .2em; } .passport-node { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 7px; width: 122px; padding: 0; border: 0; color: #d4cec4; background: transparent; cursor: pointer; transform: translate(-50%,-50%); } .passport-node-icon { display: grid; place-items: center; width: clamp(64px,5.4vw,82px); height: clamp(64px,5.4vw,82px); border: 1px solid rgba(231,154,98,.37); border-radius: 50%; background: rgba(9,11,9,.92); box-shadow: 0 0 0 6px rgba(7,9,8,.66), inset 0 0 20px rgba(231,154,98,.025); transition: color .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease,transform .24s ease; } .passport-node-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .passport-node strong { font: 600 9px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .passport-node:hover .passport-node-icon { color: var(--bone); border-color: rgba(231,154,98,.78); transform: scale(1.04); } .passport-node:focus-visible { outline: 0; } .passport-node:focus-visible .passport-node-icon { outline: 2px solid var(--copper); outline-offset: 4px; } .passport-node[aria-pressed="true"] { color: var(--copper); } .passport-node[aria-pressed="true"] .passport-node-icon { color: #0b0907; border-color: var(--copper); background: var(--copper); box-shadow: 0 0 0 7px rgba(231,154,98,.12),0 0 28px rgba(231,154,98,.32); } .passport-node-master { top: 11.5%; left: 24%; } .passport-node-composition { top: 11.5%; left: 76%; } .passport-node-contributors { top: 50%; left: 92%; } .passport-node-territories { top: 88.5%; left: 76%; } .passport-node-access { top: 88.5%; left: 24%; } .passport-node-settlement { top: 50%; left: 8%; } .passport-safety { position: absolute; z-index: 5; bottom: 13%; left: 50%; display: flex; align-items: center; gap: 7px; color: #a39e96; font: 500 9px/1.2 var(--ui); white-space: nowrap; transform: translateX(-50%); } .passport-safety svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; } .passport-detail { position: relative; overflow: hidden; min-height: 460px; padding: 34px 28px 25px; border: 1px solid rgba(231,154,98,.44); background: linear-gradient(145deg,rgba(19,20,17,.9),rgba(8,10,8,.86)); box-shadow: inset 0 0 35px rgba(231,154,98,.028),0 28px 50px rgba(0,0,0,.18); } .passport-detail::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 1px; background: var(--passport-accent); box-shadow: 0 0 17px var(--passport-accent); } .passport-detail-content.is-changing { animation: passport-copy-in .38s ease both; } .passport-detail-content > span { color: var(--passport-accent); font: 750 10px/1.2 var(--ui); letter-spacing: .13em; text-transform: uppercase; } .passport-detail-wave { display: flex; align-items: center; gap: 2px; height: 43px; margin: 11px 0 9px; overflow: hidden; mask-image: linear-gradient(90deg,#000,transparent); } .passport-detail-wave i { flex: 1; max-width: 3px; height: calc(4px + var(--passport-wave) * .36px); background: var(--passport-accent); opacity: .84; animation: passport-wave 1s ease-in-out infinite alternate; animation-delay: calc(var(--passport-wave) * -43ms); } .passport-detail h3 { margin: 0 0 11px; color: var(--bone); font: 600 18px/1.16 var(--ui); letter-spacing: -.025em; } .passport-detail p { min-height: 96px; margin: 0; color: #bcb7af; font-size: 13px; line-height: 1.65; } .passport-status-list { margin-top: 28px; border-top: 1px solid #34332e; } .passport-status-list > span { display: grid; grid-template-columns: 38px 1fr 6px; align-items: center; gap: 11px; min-height: 62px; border-bottom: 1px solid #2d2d29; } .passport-status-list strong { color: #c8c2ba; font: 500 11px/1.25 var(--ui); } .passport-status-list > span > i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(231,154,98,.36); border-radius: 50%; color: var(--copper); font-style: normal; } .passport-status-list > span > b { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px var(--teal); } .passport-status-list > span:nth-child(2) > b { background: var(--lilac); box-shadow: 0 0 9px var(--lilac); } .passport-status-list > span:nth-child(3) > b { background: #3e93d0; box-shadow: 0 0 9px #3e93d0; } .passport-status-check::before { content: ""; width: 11px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .passport-status-share { font: 700 7px/1 var(--ui); box-shadow: inset 0 0 0 5px rgba(231,154,98,.13); } .passport-status-route::before,.passport-status-route::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; } .passport-status-route::before { top: 8px; left: 9px; box-shadow: 9px 8px 0 -1px #0d100e,9px 8px 0 0 currentColor,0 16px 0 -1px #0d100e,0 16px 0 0 currentColor; } .passport-status-route::after { top: 11px; left: 12px; width: 8px; height: 9px; border-width: 0 0 1px 1px; border-radius: 0; transform: skewY(-31deg); } .passport-mobile-cta { display: none; } .release-passport[data-passport-role="manager"] { --passport-accent: var(--teal); } .release-passport[data-passport-role="label"] { --passport-accent: #e5b36d; } .release-passport[data-passport-role="publisher"] { --passport-accent: var(--lilac); } .release-passport[data-passport-role="manager"] .passport-ring-three,.release-passport[data-passport-role="manager"] .passport-detail { border-color: color-mix(in srgb,var(--teal) 45%,#343731); } .release-passport[data-passport-role="publisher"] .passport-ring-three,.release-passport[data-passport-role="publisher"] .passport-detail { border-color: color-mix(in srgb,var(--lilac) 45%,#343731); } @keyframes passport-spin { to { transform: translate(-50%,-50%) rotate(1turn); } } @keyframes passport-signal { 0% { left: 39%; opacity: 0; } 18%,75% { opacity: 1; } 100% { left: 85%; opacity: 0; } } @keyframes passport-shine { 0%,42% { transform: translateX(-48%); opacity: 0; } 58% { opacity: 1; } 72%,100% { transform: translateX(48%); opacity: 0; } } @keyframes passport-wave { from { transform: scaleY(.55); opacity: .38; } to { transform: scaleY(1.5); opacity: .95; } } @keyframes passport-copy-in { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (max-width: 1230px) { .passport-layout { width: min(1380px,calc(100% - 56px)); grid-template-columns: 1fr; } .passport-copy { max-width: 710px; } .passport-copy h2 em { display: inline; } .passport-role-tabs { max-width: 570px; } .passport-role-outcome { max-width: 570px; } .passport-product { grid-template-columns: minmax(480px,1fr) minmax(250px,310px); } .passport-orbit { max-width: 660px; } } @media (max-width: 860px) { .passport-product { grid-template-columns: 1fr; gap: 30px; } .passport-orbit { width: min(100%,650px); } .passport-detail { min-height: 0; } .passport-detail p { min-height: 0; } .passport-status-list { display: grid; grid-template-columns: repeat(3,1fr); } .passport-status-list > span { grid-template-columns: 34px 1fr; padding: 10px 12px; border-right: 1px solid #2d2d29; } .passport-status-list > span:last-child { border-right: 0; } .passport-status-list > span > b { display: none; } } @media (max-width: 760px) { .release-passport { padding: 82px 0 106px; } .release-passport::before { display: none; } .passport-room { height: 190px; opacity: .32; } .passport-layout { gap: 38px; } .passport-copy .eyebrow { margin-bottom: 14px; } .passport-copy h2 { max-width: 520px; font-size: clamp(48px,14vw,67px); line-height: .91; } .passport-copy h2 em { display: inline; } .passport-lede { margin-top: 22px; font-size: 14px; line-height: 1.58; } .passport-role-tabs { margin-top: 27px; } .passport-role-tabs button { min-height: 58px; padding: 7px 4px; gap: 5px; font-size: 9px; } .passport-role-tabs button svg { width: 17px; height: 17px; } .passport-role-outcome { min-height: 54px; margin-top: 13px; font-size: 10px; } .passport-desktop-cta { display: none; } .passport-product { gap: 23px; } .passport-orbit { width: 100%; } .passport-node { width: 89px; gap: 5px; } .passport-node-icon { width: clamp(52px,16vw,68px); height: clamp(52px,16vw,68px); box-shadow: 0 0 0 4px rgba(7,9,8,.69); } .passport-node-icon svg { width: 29px; height: 29px; } .passport-node strong { font-size: 7.5px; letter-spacing: .09em; } .passport-node-master { left: 22%; top: 12%; } .passport-node-composition { left: 78%; top: 12%; } .passport-node-contributors { left: 91%; } .passport-node-settlement { left: 9%; } .passport-node-territories { left: 78%; top: 88%; } .passport-node-access { left: 22%; top: 88%; } .passport-release { width: 41%; box-shadow: 0 0 0 7px rgba(6,8,7,.78),0 0 0 8px rgba(231,154,98,.25),0 18px 36px rgba(0,0,0,.55); } .passport-release strong { font-size: clamp(11px,4vw,18px); } .passport-release em { font-size: clamp(7px,2.2vw,10px); } .passport-safety { bottom: 12%; font-size: 8px; } .passport-ring-one::before { display: none; } .passport-detail { padding: 27px 20px 18px; } .passport-detail-wave { height: 36px; } .passport-detail h3 { font-size: 17px; } .passport-detail p { font-size: 12px; } .passport-status-list { grid-template-columns: 1fr; margin-top: 21px; } .passport-status-list > span { grid-template-columns: 38px 1fr 6px; min-height: 58px; padding: 0; border-right: 0; } .passport-status-list > span > b { display: block; } .passport-mobile-cta { display: flex; width: 100%; min-height: 64px; justify-content: center; } } @media (max-width: 430px) { .passport-role-tabs button { min-height: 64px; flex-direction: column; font-size: 8px; } .passport-role-tabs button svg { width: 18px; height: 18px; } .passport-node { width: 76px; } .passport-node strong { max-width: 76px; font-size: 6.5px; letter-spacing: .05em; } .passport-node-icon { width: 50px; height: 50px; } .passport-node-icon svg { width: 25px; height: 25px; } .passport-safety { bottom: 10.5%; font-size: 7px; } } /* Transparency Proof Room · 2.6 */ .trust-page { --proof-accent: var(--copper); --proof-accent-rgb: 231,154,98; background: #070908; overflow: hidden; } .trust-page [data-reveal] { transition-delay: .04s; } .trust-hero { position: relative; padding: clamp(88px,8vw,138px) 0 42px; border-bottom: 1px solid rgba(230,223,211,.12); background: linear-gradient(90deg,rgba(6,8,7,.9) 0%,rgba(6,8,7,.64) 32%,rgba(6,8,7,.94) 51%,#070908 100%), linear-gradient(0deg,#070908 0%,transparent 42%), url("assets/workshop-bench.webp") left 30% / 48% auto no-repeat, #070908; } .trust-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0 / 100% 58px, radial-gradient(circle 520px at 74% 42%,rgba(var(--proof-accent-rgb),.075),transparent 72%); transition: background .45s ease; } .trust-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px,.78fr) minmax(650px,1.22fr); gap: clamp(38px,5vw,86px); align-items: center; } .trust-intro { align-self: center; padding: 35px 0 46px; } .trust-intro .eyebrow { margin: 0 0 25px; color: var(--proof-accent); transition: color .35s ease; } .trust-intro .eyebrow span { margin-inline: 5px; color: #766c65; } .trust-intro h1 { max-width: 700px; margin: 0; color: #f1ebe1; font: 400 clamp(58px,5vw,89px)/.93 var(--display); letter-spacing: -.058em; text-wrap: balance; } .trust-intro-copy { max-width: 625px; margin: 27px 0 0; color: #b8b2a9; font: 400 16px/1.68 var(--ui); } .trust-intro-note { display: flex; align-items: center; gap: 14px; margin-top: 39px; color: #77756f; font: 600 9px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; } .trust-intro-note::before { content: ""; width: 31px; height: 1px; background: var(--proof-accent); box-shadow: 0 0 13px rgba(var(--proof-accent-rgb),.55); } .trust-intro-note strong { color: #aaa69e; font-weight: 600; } .proof-room { position: relative; min-width: 0; border: 1px solid rgba(235,226,214,.22); background: #090b0a; box-shadow: 0 42px 100px rgba(0,0,0,.58),0 0 50px rgba(var(--proof-accent-rgb),.045); } .proof-room::before, .proof-room::after { content: ""; position: absolute; z-index: 4; width: 27px; height: 27px; pointer-events: none; border-color: var(--proof-accent); opacity: .72; } .proof-room::before { inset: -1px auto auto -1px; border-top: 1px solid; border-left: 1px solid; } .proof-room::after { inset: auto -1px -1px auto; border-right: 1px solid; border-bottom: 1px solid; } .proof-lenses { display: grid; grid-template-columns: repeat(4,1fr); background: #080a09; border-bottom: 1px solid #30322e; } .proof-lenses button { position: relative; min-width: 0; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 12px 10px; border: 0; border-right: 1px solid #2e302d; background: linear-gradient(180deg,rgba(255,255,255,.03),transparent); color: #aaa69e; cursor: pointer; font: 650 10px/1 var(--ui); letter-spacing: .095em; text-transform: uppercase; transition: color .25s ease,background .25s ease,box-shadow .25s ease; } .proof-lenses button:last-child { border-right: 0; } .proof-lenses button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; transform: scaleX(0); background: var(--proof-accent); box-shadow: 0 0 13px rgba(var(--proof-accent-rgb),.7); transition: transform .25s ease; } .proof-lenses button:hover { color: var(--bone); background: rgba(255,255,255,.035); } .proof-lenses button.is-active { color: var(--proof-accent); background: linear-gradient(180deg,rgba(var(--proof-accent-rgb),.13),rgba(var(--proof-accent-rgb),.035)); box-shadow: 0 0 30px rgba(var(--proof-accent-rgb),.09) inset; } .proof-lenses button.is-active::after { transform: scaleX(1); } .proof-lenses button:focus-visible { z-index: 2; outline: 2px solid var(--bone); outline-offset: -4px; } .proof-lenses svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .proof-console { position: relative; min-height: 520px; padding: 0 26px 20px; background: radial-gradient(circle at 50% 50%,rgba(var(--proof-accent-rgb),.032),transparent 44%),linear-gradient(180deg,#0c0e0d,#090b0a); overflow: hidden; } .proof-console::before { content: ""; position: absolute; inset: 48px 0 0; pointer-events: none; opacity: .26; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px); } .proof-console-head { position: relative; z-index: 2; min-height: 55px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; border-bottom: 1px solid #2b2e2a; color: #6f716b; font: 600 8px/1 var(--ui); letter-spacing: .15em; text-transform: uppercase; } .proof-console-head b { color: var(--teal); font-weight: 600; } .proof-console-head b i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .proof-console-head strong { color: var(--proof-accent); font-weight: 600; } .proof-console-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(175px,.82fr) minmax(245px,1.1fr) minmax(205px,.92fr); align-items: center; min-height: 416px; } .proof-standard { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 34px 22px 34px 0; border-right: 1px solid #262925; } .proof-kicker { color: var(--proof-accent); font: 650 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; transition: color .35s ease; } .proof-standard h2 { max-width: 240px; min-height: 82px; margin: 18px 0 13px; color: #e9e2d8; font: 400 clamp(27px,2.15vw,37px)/1.03 var(--display); letter-spacing: -.035em; } .proof-standard p { min-height: 94px; margin: 0; color: #99968f; font: 400 12px/1.65 var(--ui); } .proof-wave { height: 35px; display: flex; align-items: center; gap: 3px; margin-top: 28px; overflow: hidden; opacity: .58; } .proof-wave i { flex: 0 0 1px; height: calc(5px + (var(--wave,1) * 3px)); background: #9f9c94; box-shadow: 0 0 3px rgba(var(--proof-accent-rgb),.3); transform-origin: center; } .proof-wave i:nth-child(3n) { height: 22px; }.proof-wave i:nth-child(4n) { height: 31px; }.proof-wave i:nth-child(7n) { height: 14px; }.proof-wave i:nth-child(11n) { height: 28px; } .proof-room.is-changing .proof-standard h2,.proof-room.is-changing .proof-standard p,.proof-room.is-changing .proof-evidence p { animation: trust-copy-in .42s ease both; } .proof-seal { position: relative; width: min(24vw,270px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; } .proof-seal::before,.proof-seal::after { content: ""; position: absolute; background: linear-gradient(90deg,transparent,rgba(var(--proof-accent-rgb),.72),transparent); pointer-events: none; } .proof-seal::before { left: -10%; right: -10%; top: 50%; height: 1px; } .proof-seal::after { top: -10%; bottom: -10%; left: 50%; width: 1px; background: linear-gradient(transparent,rgba(var(--proof-accent-rgb),.72),transparent); } .proof-seal-orbit { position: absolute; inset: 0; border: 1px solid rgba(var(--proof-accent-rgb),.25); border-radius: 50%; background: repeating-conic-gradient(from -3deg,rgba(var(--proof-accent-rgb),.88) 0 1deg,transparent 1deg 3deg); -webkit-mask: radial-gradient(circle,transparent 0 76%,#000 76.5% 79%,transparent 79.5%); mask: radial-gradient(circle,transparent 0 76%,#000 76.5% 79%,transparent 79.5%); animation: proof-orbit 36s linear infinite; } .proof-seal-orbit::before,.proof-seal-orbit::after { content: ""; position: absolute; border-radius: 50%; } .proof-seal-orbit::before { inset: 8%; border: 1px dashed rgba(var(--proof-accent-rgb),.3); } .proof-seal-orbit::after { inset: 18%; border: 1px solid rgba(235,226,214,.16); } .proof-seal-orbit i { position: absolute; inset: 2%; border-radius: 50%; border-top: 1px solid var(--proof-accent); transform: rotate(calc(var(--i,0) * 90deg)); } .proof-seal-orbit i:nth-child(1) { --i:0; }.proof-seal-orbit i:nth-child(2) { --i:1; }.proof-seal-orbit i:nth-child(3) { --i:2; }.proof-seal-orbit i:nth-child(4) { --i:3; } .proof-seal-core { position: relative; z-index: 1; width: 68%; aspect-ratio: 1; display: grid; align-content: center; justify-items: center; border: 1px solid rgba(var(--proof-accent-rgb),.38); border-radius: 50%; background: radial-gradient(circle,rgba(var(--proof-accent-rgb),.07),rgba(7,9,8,.95) 67%); box-shadow: 0 0 40px rgba(var(--proof-accent-rgb),.08),inset 0 0 35px rgba(0,0,0,.7); text-align: center; } .proof-seal-core small { color: #d5cfc5; font: 650 8px/1 var(--ui); letter-spacing: .28em; text-transform: uppercase; } .proof-seal-core strong { margin: 8px 0 9px; color: #bdb6ac; font: 400 clamp(24px,2vw,31px)/.86 var(--display); letter-spacing: -.035em; text-transform: uppercase; } .proof-seal-core span { color: var(--teal); font: 650 7px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; } .proof-seal-core span b { color: #6a6b65; } .proof-seal-core > i { position: relative; width: 13px; height: 11px; margin-top: 14px; border: 1px solid #88847d; border-radius: 2px; } .proof-seal-core > i::before { content: ""; position: absolute; width: 7px; height: 7px; left: 2px; top: -7px; border: 1px solid #88847d; border-bottom: 0; border-radius: 6px 6px 0 0; } .proof-room.is-changing .proof-seal { animation: proof-seal-change .55s ease both; } .proof-evidence { align-self: stretch; display: grid; align-content: center; padding-left: 22px; border-left: 1px solid #262925; } .proof-evidence article { min-height: 115px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; border-bottom: 1px solid #282b27; } .proof-evidence article:last-child { border-bottom: 0; } .proof-evidence strong { display: block; margin-bottom: 7px; color: var(--proof-accent); font: 650 9px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; } .proof-evidence p { min-height: 39px; margin: 0; color: #95928b; font: 400 10px/1.5 var(--ui); } .proof-evidence-icon { position: relative; width: 28px; height: 28px; display: grid; place-items: center; color: var(--teal); } .proof-source-icon { border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 5px 0 -4px currentColor,inset 0 -5px 0 -4px currentColor; } .proof-source-icon::after { content: ""; width: 19px; height: 7px; border: 1px solid currentColor; border-inline: 0; border-radius: 50%; } .proof-fresh-icon { color: var(--lilac); border: 1px solid currentColor; border-radius: 50%; } .proof-fresh-icon::before { content: ""; position: absolute; width: 1px; height: 8px; top: 5px; background: currentColor; } .proof-fresh-icon::after { content: ""; position: absolute; width: 6px; height: 1px; top: 13px; left: 13px; background: currentColor; transform: rotate(25deg); transform-origin: left; } .proof-method-icon { border: 1px dashed currentColor; border-radius: 50%; } .proof-method-icon::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; } .proof-console-foot { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #63655f; font: 600 7px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; } .proof-console-foot i { height: 1px; background: linear-gradient(90deg,rgba(var(--proof-accent-rgb),.18),var(--proof-accent),rgba(var(--proof-accent-rgb),.18)); } .trust-fact-rail { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 28px; border: 1px solid rgba(230,223,211,.2); background: linear-gradient(180deg,rgba(17,19,17,.96),rgba(9,11,10,.98)); box-shadow: 0 24px 60px rgba(0,0,0,.38); } .trust-fact-rail article { min-width: 0; min-height: 126px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; padding: 23px 25px; border-right: 1px solid #30322e; } .trust-fact-rail article:last-child { border-right: 0; } .trust-fact-rail small { color: var(--proof-accent); font: 650 8px/1.2 var(--ui); letter-spacing: .11em; text-transform: uppercase; } .trust-fact-rail small b { color: #666861; } .trust-fact-rail strong { display: block; margin: 8px 0 3px; color: #e3dcd1; font: 400 27px/1 var(--display); } .trust-fact-rail strong i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); } .trust-fact-rail p { margin: 0; color: #85837d; font: 400 9px/1.4 var(--ui); } .fact-icon { position: relative; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid #343732; border-radius: 50%; color: #928f87; font: 400 19px/1 var(--display); } .fact-platform { color: var(--teal); } .fact-platform::before,.fact-platform::after { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; } .fact-platform::before { inset: 10px; }.fact-platform::after { inset: 17px; background: currentColor; } .fact-catalog { border-radius: 6px; width: 31px; height: 39px; margin-left: 7px; } .fact-catalog::after { content: ""; width: 13px; height: 1px; background: currentColor; box-shadow: 0 5px 0 currentColor; } .fact-token { color: var(--lilac); } .fact-token::before { content: ""; width: 15px; height: 13px; border: 1px solid currentColor; border-radius: 3px; } .fact-token::after { content: ""; position: absolute; width: 9px; height: 8px; top: 8px; border: 1px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; } .trust-methodology { position: relative; padding: 118px 0 130px; background: radial-gradient(circle 700px at 82% 20%,rgba(231,154,98,.055),transparent 70%),#090b0a; } .trust-methodology::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg,transparent,#000 18%,#000 85%,transparent); } .trust-methodology .wrap { position: relative; } .trust-section-heading { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 70px; align-items: end; margin-bottom: 46px; } .trust-section-heading .eyebrow { grid-column: 1/-1; margin: 0 0 20px; } .trust-section-heading h2 { max-width: 760px; margin: 0; color: #eee7dc; font: 400 clamp(52px,5.4vw,84px)/.92 var(--display); letter-spacing: -.052em; } .trust-section-heading > p:last-child { max-width: 520px; margin: 0 0 8px; color: #9c9991; font: 400 15px/1.65 var(--ui); } .trust-method-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; } .trust-method-card { min-width: 0; padding: 30px; border: 1px solid #2d302c; background: linear-gradient(145deg,rgba(255,255,255,.02),transparent 40%),#0d100e; } .trust-method-card header { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding-bottom: 25px; border-bottom: 1px solid #2e312d; } .trust-method-card header > span { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(231,154,98,.44); border-radius: 50%; color: var(--copper); font: 500 12px/1 var(--ui); } .trust-method-card header small,.trust-token-boundary small { display: block; margin-bottom: 7px; color: #74766f; font: 650 8px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; } .trust-method-card h3,.trust-token-boundary h3 { margin: 0; color: #e6dfd5; font: 400 30px/1.05 var(--display); letter-spacing: -.035em; } .trust-method-card ul,.trust-rules { margin: 0; padding: 0; list-style: none; } .trust-method-card ul li { min-height: 67px; display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 20px; border-bottom: 1px solid #292c28; } .trust-method-card ul li:last-child { border-bottom: 0; } .trust-method-card ul span { color: var(--copper); font: 650 8px/1 var(--ui); letter-spacing: .11em; text-transform: uppercase; } .trust-method-card ul strong { color: #aaa69e; font: 500 12px/1.45 var(--ui); } .trust-rules li { min-height: 67px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 13px; border-bottom: 1px solid #292c28; color: #aaa69e; font: 500 11px/1.45 var(--ui); } .trust-rules li:last-child { border-bottom: 0; } .trust-rules i { color: var(--lilac); font: 650 8px/1 var(--ui); font-style: normal; } .trust-gates-card { grid-column: 1/-1; } .trust-gates { display: grid; grid-template-columns: repeat(4,1fr); } .trust-gates > div { position: relative; min-height: 155px; padding: 27px 24px; border-right: 1px solid #2b2e2a; } .trust-gates > div:last-child { border-right: 0; } .trust-gates > div::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: #3b3d38; } .trust-gates > div::after { content: ""; position: absolute; top: -3px; left: 24px; width: 7px; height: 7px; border-radius: 50%; background: #555750; } .trust-gates > div.is-active::before { background: linear-gradient(90deg,var(--teal),transparent); } .trust-gates > div.is-active::after { background: var(--teal); box-shadow: 0 0 13px var(--teal); } .trust-gates span { display: block; color: #6f716a; font: 650 8px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; } .trust-gates strong { display: block; min-height: 50px; margin: 15px 0 18px; color: #b7b2a9; font: 500 12px/1.45 var(--ui); } .trust-gates b { color: #777970; font: 650 7px/1 var(--ui); letter-spacing: .13em; text-transform: uppercase; } .trust-gates .is-active b { color: var(--teal); } .trust-token-boundary { grid-column: 1/-1; display: grid; grid-template-columns: .78fr 1.1fr auto; align-items: center; gap: 45px; min-height: 180px; padding: 34px 36px; border: 1px solid rgba(218,164,79,.32); background: radial-gradient(circle at 82% 50%,rgba(218,164,79,.07),transparent 42%),#0d0f0e; } .trust-token-boundary p { margin: 0; color: #9d9991; font: 400 12px/1.65 var(--ui); } .trust-token-boundary > strong { max-width: 230px; color: var(--warning); font: 650 8px/1.7 var(--ui); letter-spacing: .12em; text-align: right; text-transform: uppercase; } .trust-token-boundary > strong span { margin-inline: 6px; color: #666861; } .trust-hero[data-proof-lens="money"] { --proof-accent: var(--teal); --proof-accent-rgb: 94,190,166; } .trust-hero[data-proof-lens="reliability"] { --proof-accent: var(--lilac); --proof-accent-rgb: 184,151,211; } .trust-hero[data-proof-lens="governance"] { --proof-accent: var(--warning); --proof-accent-rgb: 218,164,79; } @keyframes proof-orbit { to { transform: rotate(360deg); } } @keyframes proof-seal-change { 0% { opacity: .35; transform: scale(.94) rotate(-2deg); } 100% { opacity: 1; transform: none; } } @keyframes trust-copy-in { from { opacity: .15; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (max-width: 1180px) { .trust-hero-grid { grid-template-columns: .8fr 1.2fr; gap: 35px; } .proof-console { padding-inline: 20px; } .proof-console-grid { grid-template-columns: .8fr 1fr .9fr; } .proof-standard { padding-right: 15px; } .proof-evidence { padding-left: 15px; } .proof-evidence article { grid-template-columns: 28px 1fr; gap: 9px; } .trust-fact-rail article { grid-template-columns: 42px 1fr; gap: 12px; padding-inline: 17px; } .fact-icon { width: 39px; height: 39px; } } @media (max-width: 980px) { .trust-hero { padding-top: 76px; background: radial-gradient(circle 480px at 50% 38%,rgba(231,154,98,.06),transparent 72%),#070908; } .trust-hero-grid { grid-template-columns: 1fr; gap: 25px; } .trust-intro { padding-bottom: 20px; } .trust-intro h1 { max-width: 790px; } .proof-room { width: 100%; } .proof-seal { width: 250px; } .trust-fact-rail { grid-template-columns: 1fr 1fr; } .trust-fact-rail article:nth-child(2) { border-right: 0; } .trust-fact-rail article:nth-child(-n+2) { border-bottom: 1px solid #30322e; } .trust-section-heading { grid-template-columns: 1fr; gap: 23px; } .trust-method-grid { grid-template-columns: 1fr; } .trust-method-card,.trust-gates-card,.trust-token-boundary { grid-column: auto; } .trust-token-boundary { grid-template-columns: 1fr 1fr; } .trust-token-boundary > strong { grid-column: 1/-1; max-width: none; text-align: left; } } @media (max-width: 760px) { .trust-hero { padding: 70px 0 27px; } .trust-hero::before { opacity: .18; } .trust-intro { padding: 29px 0 19px; } .trust-intro .eyebrow { margin-bottom: 20px; font-size: 9px; } .trust-intro h1 { font-size: clamp(48px,13.9vw,62px); line-height: .96; letter-spacing: -.055em; } .trust-intro-copy { margin-top: 23px; font-size: 14px; line-height: 1.65; } .trust-intro-note { display: none; } .proof-room { margin-top: 14px; border-inline: 0; } .proof-room::before,.proof-room::after { display: none; } .proof-lenses { grid-template-columns: 1fr 1fr; gap: 7px; padding-bottom: 14px; border: 0; background: transparent; } .proof-lenses button,.proof-lenses button:last-child { min-height: 62px; border: 1px solid #393c37; } .proof-lenses button::after { left: 0; right: 0; } .proof-lenses button.is-active { border-color: var(--proof-accent); box-shadow: 0 0 20px rgba(var(--proof-accent-rgb),.1) inset; } .proof-console { min-height: 0; padding: 0 15px 16px; border: 1px solid #30332f; } .proof-console-head { min-height: 51px; grid-template-columns: 1fr auto; gap: 9px; } .proof-console-head > span { display: none; } .proof-console-grid { grid-template-columns: 1fr; min-height: 0; } .proof-standard { min-height: 226px; padding: 28px 2px 23px; border: 0; border-bottom: 1px solid #292c28; text-align: center; } .proof-standard h2 { min-height: 0; max-width: 320px; margin: 14px auto 12px; font-size: 35px; } .proof-standard p { min-height: 0; max-width: 320px; margin-inline: auto; font-size: 11px; } .proof-wave { justify-content: center; height: 30px; margin-top: 21px; } .proof-seal { width: min(79vw,285px); margin: 30px auto; } .proof-evidence { padding: 0; border: 0; border-top: 1px solid #292c28; } .proof-evidence article { min-height: 92px; grid-template-columns: 34px 1fr; gap: 13px; } .proof-evidence p { min-height: 0; font-size: 10px; } .proof-console-foot { padding-top: 16px; } .trust-fact-rail { grid-template-columns: 1fr; margin-top: 17px; } .trust-fact-rail article { min-height: 99px; grid-template-columns: 46px 1fr; padding: 17px 18px; border-right: 0; border-bottom: 1px solid #30322e; } .trust-fact-rail article:last-child { border-bottom: 0; } .trust-fact-rail article:nth-child(-n+2) { border-bottom: 1px solid #30322e; } .trust-fact-rail strong { margin-top: 6px; font-size: 24px; } .trust-methodology { padding: 86px 0 95px; } .trust-section-heading { margin-bottom: 32px; } .trust-section-heading h2 { font-size: clamp(50px,13.5vw,63px); } .trust-section-heading > p:last-child { font-size: 13px; } .trust-method-card { padding: 22px 18px; } .trust-method-card header { grid-template-columns: 42px 1fr; gap: 13px; } .trust-method-card header > span { width: 36px; height: 36px; } .trust-method-card h3,.trust-token-boundary h3 { font-size: 28px; } .trust-method-card ul li { grid-template-columns: 74px 1fr; gap: 11px; } .trust-method-card ul strong { font-size: 10px; } .trust-gates { grid-template-columns: 1fr; } .trust-gates > div { min-height: 112px; border-right: 0; border-bottom: 1px solid #292c28; } .trust-gates > div:last-child { border-bottom: 0; } .trust-gates strong { min-height: 0; margin-block: 12px 15px; } .trust-token-boundary { grid-template-columns: 1fr; gap: 21px; min-height: 0; padding: 28px 22px; } .trust-token-boundary > strong { grid-column: auto; font-size: 7px; line-height: 1.8; } } @media (max-width: 390px) { .trust-hero-grid,.trust-methodology .wrap { width: min(100% - 24px,1240px); } .trust-intro h1 { font-size: 48px; } .proof-lenses { gap: 5px; } .proof-lenses button { min-height: 60px; gap: 8px; padding-inline: 6px; font-size: 9px; } .proof-lenses svg { width: 20px; height: 20px; } .proof-console { margin-inline: -6px; } .proof-standard h2 { font-size: 32px; } .trust-fact-rail { margin-inline: -1px; } } @media (prefers-reduced-motion: reduce) { .proof-seal-orbit,.proof-room.is-changing .proof-seal,.proof-room.is-changing .proof-standard h2,.proof-room.is-changing .proof-standard p,.proof-room.is-changing .proof-evidence p { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .passport-ring-two,.passport-route::after,.passport-release-shine,.passport-detail-wave i { animation: none !important; } .passport-node-icon,.passport-role-tabs button { transition: none !important; } } /* VibraMusic 1.3 — precision polish */ :root { --ink: #070908; --surface: #0d110f; --surface-2: #151916; --bone: #f0eadf; --soft: #c8c0b5; --muted: #8f8a82; --line: #292d29; --copper: #e79a62; --copper-dark: #a9633f; } html { scrollbar-color: rgba(231,154,98,.5) #080a09; } body { overflow-x: hidden; background: #070908; } body.nav-open { overflow: hidden; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; } .wrap { width: min(1380px, calc(100% - 56px)); } .site-header { height: 78px; border-bottom-color: rgba(231,154,98,.2); background: rgba(6,8,7,.88); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } .site-header.is-scrolled { border-bottom-color: rgba(231,154,98,.34); background: rgba(6,8,7,.96); box-shadow: 0 18px 46px rgba(0,0,0,.32); } .site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: linear-gradient(90deg,var(--copper),transparent); transition: width .45s ease; } .site-header.is-scrolled::after { width: min(38vw, 620px); } .header-inner { gap: 42px; } .brand { gap: 12px; font-size: 27px; } .brand-mark { width: 25px; height: 32px; } .brand-mark i { width: 2px; box-shadow: 0 0 14px rgba(231,154,98,.2); } .brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 12px; } .brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 23px; } .brand-mark i:nth-child(3) { height: 32px; } .site-nav { gap: 14px; } .site-nav a { position: relative; padding: 14px 8px; border-radius: 0; color: #aaa49b; font-size: 12px; font-weight: 650; letter-spacing: .01em; background: transparent !important; } .site-nav a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: right; transition: transform .22s ease; } .site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--bone); } .site-nav .header-cta { min-height: 44px; display: inline-flex; align-items: center; margin-left: 22px; padding-inline: 19px; border-color: rgba(231,154,98,.72); border-radius: 6px; } .site-nav .header-cta::after { display: none; } .site-nav .header-cta:hover, .site-nav .header-cta:focus-visible { border-color: var(--copper); background: rgba(231,154,98,.08) !important; } .menu-toggle { position: relative; width: 46px; height: 46px; border-color: rgba(231,154,98,.58); border-radius: 7px; } .menu-toggle span { position: absolute; left: 12px; width: 20px; height: 1px; background: currentColor; transform-origin: center; transition: transform .22s ease, top .22s ease, opacity .18s ease; } .menu-toggle span:nth-child(1) { top: 14px; } .menu-toggle span:nth-child(2) { top: 21px; } .menu-toggle span:nth-child(3) { top: 28px; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); } .button { min-height: 50px; padding-inline: 23px; border-radius: 6px; font-size: 13px; letter-spacing: .01em; transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, box-shadow .2s ease; } .button-primary { background: var(--copper); box-shadow: 0 12px 34px rgba(231,154,98,.12); } .button-primary:hover { background: #f3ad76; box-shadow: 0 16px 38px rgba(231,154,98,.2); } .button-secondary { border-color: rgba(231,154,98,.54); background: rgba(7,9,8,.36); } .button-secondary:hover { background: rgba(231,154,98,.055); } .eyebrow { margin-bottom: 20px; color: #eda06b; letter-spacing: .18em; font-size: 11px; } .cinematic-shell::before, .cinematic-shell::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } .cinematic-shell::before { left: clamp(20px,3vw,70px); top: 24px; bottom: 34px; width: 1px; background: linear-gradient(transparent,rgba(231,154,98,.34) 18%,rgba(231,154,98,.34) 82%,transparent); } .cinematic-shell::after { left: 0; top: 53%; width: clamp(55px,7vw,150px); height: 1px; background: linear-gradient(90deg,rgba(231,154,98,.42),transparent); } .cinematic-stage-bg img { opacity: .72; filter: saturate(.82) contrast(1.11); } .cinematic-stage-bg::after { background: linear-gradient(90deg,#070908 0%,rgba(7,9,8,.97) 22%,rgba(7,9,8,.62) 43%,rgba(7,9,8,.08) 76%,rgba(7,9,8,.56) 100%), linear-gradient(0deg,rgba(7,9,8,.93) 0%,transparent 33%,rgba(7,9,8,.24) 100%); } .cinematic-light { opacity: .6; } .cinematic-shell .wrap { width: min(1580px, calc(100% - 96px)); } .cinematic-shell .launch-hero { min-height: calc(100svh - 78px); grid-template-columns: minmax(440px,.8fr) minmax(650px,1.2fr); gap: clamp(30px,4vw,72px); padding-block: clamp(54px,7vh,86px) 54px; } .cinematic-shell .launch-copy h1 { max-width: 720px; font-size: clamp(70px,5.45vw,106px); line-height: .9; letter-spacing: -.058em; } .cinematic-shell .launch-lede { max-width: 590px; margin-top: 29px; color: #c9c2b8; font-size: clamp(17px,1.25vw,20px); } .cinematic-shell .launch-actions { gap: 12px; margin-top: 34px; } .hero-stage { height: min(73vh,730px); } .artist-float-left { width: 30%; top: 17%; } .artist-float-center { width: 47%; left: 27%; } .artist-float-right { width: 29%; top: 24%; } .artist-card { border-color: rgba(231,154,98,.48); border-radius: 4px; box-shadow: 0 42px 100px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.035) inset; } .artist-card:hover, .artist-card:focus-visible, .artist-card.is-active { border-color: rgba(231,154,98,.92); box-shadow: 0 50px 120px rgba(0,0,0,.7),0 0 44px rgba(231,154,98,.11); } .cinematic-player { left: 2%; right: 1%; padding: 17px 18px 16px; border-color: rgba(231,154,98,.38); border-radius: 10px; background: rgba(5,7,6,.91); backdrop-filter: blur(22px) saturate(1.15); box-shadow: 0 26px 80px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.025) inset; } .cinematic-player::before { content: ""; position: absolute; left: 18px; top: -1px; width: 80px; height: 1px; background: var(--copper); } .sound-meta { align-items: baseline; margin-bottom: 9px; } .sound-meta strong { font-size: 19px; } .sound-meta span { font-size: 11px; } .playlist-player-row { grid-template-columns: 52px minmax(0,1fr) 78px 42px; gap: 14px; } .cinematic-player .player-button { width: 48px; height: 48px; border: 1px solid var(--copper); background: rgba(231,154,98,.06); color: var(--copper); font-size: 17px; } .cinematic-player.is-playing .player-button { background: var(--copper); color: #160f0b; } .player-next { width: 40px; height: 40px; border-color: rgba(231,154,98,.3); } .player-time { min-width: 76px; color: #aaa49b; font-size: 11px; } .player-progress { --audio-progress: 0%; width: 100%; height: 34px; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer; background: linear-gradient(90deg,rgba(231,154,98,.9),rgba(231,154,98,.72)) 0 50% / var(--audio-progress) 70% no-repeat, repeating-linear-gradient(90deg,rgba(255,255,255,.19) 0 1px,transparent 1px 4px) 0 50% / 100% 44% no-repeat; } .player-progress::-webkit-slider-runnable-track { height: 34px; background: transparent; border: 0; } .player-progress::-moz-range-track { height: 34px; background: transparent; border: 0; } .player-progress::-webkit-slider-thumb { width: 3px; height: 34px; margin-top: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 2px; background: var(--copper); box-shadow: 0 0 16px rgba(231,154,98,.42); } .player-progress::-moz-range-thumb { width: 3px; height: 34px; border: 0; border-radius: 2px; background: var(--copper); } .cinematic-player.is-playing .player-progress { animation: waveform-pulse 1.4s ease-in-out infinite alternate; } .audio-rotation { gap: 7px; margin-top: 12px; } .audio-rotation button { position: relative; min-height: 54px; padding: 9px 40px 9px 11px; border-color: rgba(255,255,255,.06); border-radius: 5px; background: rgba(255,255,255,.018); transition: border-color .2s ease,background .2s ease,transform .2s ease; } .audio-rotation button:hover, .audio-rotation button:focus-visible { transform: translateY(-2px); } .audio-rotation button.active { border-color: rgba(231,154,98,.78); background: rgba(231,154,98,.065); } .audio-rotation span { color: #d3ccc2; font-size: 10px; } .audio-rotation small { margin-top: 3px; font-size: 9px; } .audio-rotation b { position: absolute; right: 10px; bottom: 9px; color: #777b75; font-size: 9px; font-weight: 500; } .launch-proof-rail { border-color: rgba(231,154,98,.16); } .launch-proof-rail .launch-proof { padding-block: 28px; } .launch-proof-rail .launch-proof div { position: relative; padding-left: 18px; } .launch-proof-rail .launch-proof div::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: rgba(231,154,98,.34); } .launch-proof strong { color: var(--copper); font-size: 31px; } .launch-proof span { margin-top: 8px; color: #929088; font-size: 12px; } .manifesto, .preview-section, .direct-section, .gate-section { padding-block: clamp(92px,8vw,132px); } .manifesto { position: relative; } .manifesto::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(1380px,calc(100% - 56px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent); } .principle { padding-block: 30px; } .principle h3 { font-size: 26px; } .principle p { max-width: 720px; color: #98948c; font-size: 15px; } .dashboard-frame, .money-card, .method-card, .application-form { border-color: rgba(255,255,255,.11); box-shadow: 0 34px 90px rgba(0,0,0,.26); } .dashboard-frame { padding: 26px; } .gate-grid { gap: 0; border-block: 1px solid var(--line); } .gate-card { min-height: 240px; border: 0; border-left: 1px solid var(--line); background: transparent; transition: background .24s ease,transform .24s ease; } .gate-card:first-child { border-left: 0; } .gate-card:hover { z-index: 1; background: rgba(231,154,98,.035); transform: translateY(-4px); } .gate-card h3 { margin-top: 54px; font-size: 25px; } .gate-card p { color: #98948c; font-size: 14px; } .pilot-cta { background: radial-gradient(circle at 76% 45%,rgba(231,154,98,.12),transparent 30%),#0c0f0d; } .page-hero { padding-block: 76px 58px; } .page-hero h1 { max-width: 990px; line-height: .93; } .studio-demo-hero { padding-block: 44px 30px; background: radial-gradient(circle at 82% 42%,rgba(231,154,98,.09),transparent 26%); } .studio-demo-hero .wrap, .studio-demo-page .wrap { width: min(1540px,calc(100% - 64px)); } .studio-demo-hero h1 { max-width: 850px; font-size: clamp(52px,5vw,78px); line-height: .92; } .studio-demo-hero p { margin-top: 16px; font-size: 16px; } .studio-demo-hero .button { min-width: 174px; } .studio-demo-page { padding-top: 16px; } .studio-demo-shell { grid-template-columns: 230px minmax(0,1fr); min-height: 800px; border-color: rgba(255,255,255,.12); box-shadow: 0 48px 130px rgba(0,0,0,.44),0 0 0 1px rgba(231,154,98,.035) inset; } .studio-demo-shell .studio-side { padding: 25px 14px; background: #080a09; } .studio-side-brand strong { font-size: 24px; } .studio-side-brand small { font-size: 10px; } .studio-side-nav { gap: 4px; } .studio-side-nav button { min-height: 42px; padding: 10px 14px; border-left-width: 1px; font-size: 12px; } .studio-side-nav button.active { background: linear-gradient(90deg,rgba(231,154,98,.1),rgba(231,154,98,.025)); } .studio-demo-shell .studio-main { padding: 26px 30px 32px; } .studio-heading h2 { font-size: 37px; } .studio-heading p { margin-top: 5px; font-size: 12px; } .range-switch button, .analytics-modes button, .catalog-filters button { min-height: 35px; font-size: 10px; } .range-switch button.active, .analytics-modes button.active, .catalog-filters button.active { color: var(--copper); box-shadow: 0 0 0 1px rgba(231,154,98,.25) inset; } .studio-demo-banner { margin-block: 16px; padding: 11px 14px; font-size: 10px; } .studio-demo-banner small { font-size: 10px; } .studio-kpis { gap: 11px; margin-bottom: 11px; } .studio-kpis article, .studio-demo-panel, .demo-list-card { border-color: rgba(255,255,255,.1); } .studio-kpis article { min-height: 124px; padding: 17px; } .studio-kpis span { font-size: 11px; } .studio-kpis strong { font-size: 30px; } .studio-kpis small { font-size: 9px; } .studio-overview-grid, .studio-overview-bottom { gap: 11px; } .studio-demo-panel { padding: 19px; } .studio-panel-head span, .studio-select-label, .catalog-toolbar label, .message-composer label { font-size: 10px; } .studio-panel-head strong { font-size: 19px; } .studio-chart-axis, .release-focus-stats dt, .release-focus-meta span, .segment-detail small, .store-price-panel small, .wallet-balance small { font-size: 9px; } .readiness-list button, .quick-actions-panel button, .catalog-row, .release-detail-panel p, .segment-detail p, .campaign-list small, .settings-list span, .ledger-table div, .rights-row span, .rights-snapshot span { font-size: 10px; } .transparency-status, .method-grid { gap: 14px; } .metric-card, .method-card { border-color: rgba(255,255,255,.1); background: #0d110f; } .metric-card { transition: border-color .2s ease,transform .2s ease; } .metric-card:hover { border-color: rgba(231,154,98,.34); transform: translateY(-3px); } .application-form { background: #0d110f; } .field input, .field textarea, .field select { min-height: 48px; border-color: rgba(255,255,255,.1); background: #090b0a; } .field label { font-size: 12px; } .site-footer { background: #060807; } .footer-nav a { font-size: 13px; } .footer-bottom { color: #777b75; font-size: 11px; } @keyframes waveform-pulse { from { filter: saturate(.86) brightness(.9); opacity: .86; } to { filter: saturate(1.18) brightness(1.12); opacity: 1; } } @media (max-width: 1180px) { .cinematic-shell .wrap { width: min(100% - 52px,1080px); } .cinematic-shell .launch-hero { grid-template-columns: minmax(390px,.82fr) minmax(500px,1.18fr); } .cinematic-shell .launch-copy h1 { font-size: clamp(66px,6.6vw,88px); } } @media (max-width: 980px) { .wrap { width: min(100% - 40px,820px); } .cinematic-shell .wrap { width: min(100% - 40px,820px); } .cinematic-shell .launch-hero { grid-template-columns: 1fr; padding-block: 62px 36px; } .cinematic-shell .launch-copy h1 { max-width: 760px; font-size: clamp(68px,10vw,94px); } .hero-stage { height: min(78vw,650px); } .studio-demo-hero .wrap, .studio-demo-page .wrap { width: min(100% - 40px,900px); } .studio-demo-shell { grid-template-columns: 190px minmax(0,1fr); } } @media (max-width: 760px) { body.admin-bar .site-header { top: 46px; } .wrap, .cinematic-shell .wrap, .studio-demo-hero .wrap, .studio-demo-page .wrap { width: min(100% - 28px,620px); } .site-header { height: 68px; } .brand { font-size: 23px; } .brand-mark { transform: scale(.9); transform-origin: left center; } .site-nav { top: 68px; max-height: calc(100svh - 68px); overflow: auto; padding: 12px 14px 20px; border-bottom-color: rgba(231,154,98,.34); background: rgba(7,9,8,.985); box-shadow: 0 26px 60px rgba(0,0,0,.52); } .site-nav a { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-size: 14px; } .site-nav a::after { left: 12px; right: 12px; bottom: 5px; } .site-nav .header-cta { justify-content: center; margin: 8px 0 0; border-radius: 6px; } .cinematic-shell::before { left: 14px; top: 18px; bottom: 20px; opacity: .6; } .cinematic-shell::after { display: none; } .cinematic-shell .launch-hero { gap: 30px; padding-block: 42px 26px; } .cinematic-shell .launch-copy h1 { max-width: 560px; font-size: clamp(52px,14.8vw,70px); line-height: .92; } .cinematic-shell .launch-lede { margin-top: 24px; font-size: 17px; line-height: 1.55; } .cinematic-shell .launch-actions { grid-template-columns: 1fr; gap: 10px; } .cinematic-shell .launch-actions .button { width: 100%; min-height: 52px; font-size: 13px; } .hero-stage { width: calc(100% + 28px); height: 620px; margin-left: -14px; } .artist-float-left { width: 39%; left: -4%; top: 9%; transform: none; } .artist-float-center { width: 56%; left: 22%; top: 0; } .artist-float-right { width: 39%; right: -4%; top: 11%; transform: none; } .artist-card { border-radius: 4px; } .portrait-whisper { display: none; } .cinematic-player { left: 14px; right: 14px; bottom: 0; padding: 14px 13px; } .cinematic-player .sound-meta { align-items: center; } .cinematic-player .sound-meta strong { font-size: 17px; } .cinematic-player .sound-meta span { display: inline; font-size: 10px; } .sound-meta strong em { display: inline; margin-left: 5px; } .playlist-player-row { grid-template-columns: 46px minmax(0,1fr) auto 38px !important; gap: 9px; } .cinematic-player .player-button { width: 44px; height: 44px; } .player-time { min-width: 66px; font-size: 10px; } .player-next { width: 36px; height: 36px; } .player-progress, .player-progress::-webkit-slider-runnable-track, .player-progress::-moz-range-track { height: 30px; } .player-progress::-webkit-slider-thumb, .player-progress::-moz-range-thumb { height: 30px; } .audio-rotation { grid-template-columns: repeat(4,minmax(128px,1fr)); gap: 7px; margin-right: -13px; padding: 1px 13px 7px 0; scrollbar-width: thin; scroll-snap-type: x proximity; } .audio-rotation button { min-height: 62px; scroll-snap-align: start; } .audio-rotation span { font-size: 11px; } .audio-rotation small,.audio-rotation b { font-size: 10px; } .launch-proof-rail .launch-proof { gap: 0; padding-block: 12px; } .launch-proof-rail .launch-proof div { grid-template-columns: 64px 1fr; padding: 10px 0 10px 16px; } .launch-proof-rail .launch-proof div::before { top: 9px; bottom: 9px; } .manifesto, .preview-section, .direct-section, .gate-section { padding-block: 76px; } .section-title { font-size: clamp(43px,13vw,60px); } .principle { grid-template-columns: 44px 1fr; padding-block: 24px; } .principle h3 { font-size: 23px; } .principle p { font-size: 14px; } .preview-heading { gap: 24px; } .preview-heading .button { width: 100%; } .dashboard-frame { padding: 14px; } .gate-grid { border: 0; } .gate-card { min-height: 0; padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); } .gate-card:first-child { border-top: 0; } .gate-card h3 { margin-top: 24px; } .pilot-inner .button { width: 100%; } .page-hero { padding-block: 54px 40px; } .page-hero h1 { font-size: clamp(52px,14vw,72px); } .studio-demo-hero { padding-block: 44px 28px; } .studio-demo-hero h1 { font-size: clamp(49px,13vw,64px); } .studio-demo-hero .button { width: 100%; margin: 0; } .studio-demo-shell { grid-template-columns: 1fr; border-radius: 8px; } .studio-demo-shell .studio-side { padding: 14px; } .studio-side-brand strong { font-size: 22px; } .studio-side-nav button { min-height: 42px; font-size: 12px; } .studio-demo-shell .studio-main { padding: 17px; } .studio-heading h2 { font-size: 32px; } .studio-heading p { font-size: 12px; } .studio-demo-banner { gap: 8px; } .studio-demo-banner small { font-size: 10px; } .studio-kpis { grid-template-columns: 1fr 1fr; } .studio-kpis article { min-height: 112px; } .studio-kpis span { font-size: 10px; } .studio-kpis strong { font-size: 27px; } .studio-kpis small { font-size: 9px; } .application-form { padding: 22px; } .footer-nav { grid-template-columns: 1fr 1fr; gap-block: 14px; } .footer-bottom { gap: 14px; } } @media (max-width: 430px) { .wrap, .cinematic-shell .wrap, .studio-demo-hero .wrap, .studio-demo-page .wrap { width: min(100% - 22px,620px); } .cinematic-shell .launch-copy h1 { font-size: clamp(47px,14.3vw,61px); } .cinematic-shell .launch-lede { font-size: 16px; } .hero-stage { width: calc(100% + 22px); height: 590px; margin-left: -11px; } .cinematic-player { left: 11px; right: 11px; } .cinematic-player .sound-meta span { max-width: 110px; text-align: right; } .playlist-player-row { grid-template-columns: 44px minmax(0,1fr) 35px !important; } .playlist-player-row .player-time { grid-column: 2; grid-row: 2; justify-self: end; } .playlist-player-row .player-next { grid-column: 3; grid-row: 1 / span 2; } .audio-rotation { grid-template-columns: repeat(4,minmax(118px,1fr)); } .studio-kpis { grid-template-columns: 1fr; } .studio-heading-actions { grid-template-columns: 1fr; } .studio-create-button { width: 100%; } .footer-nav { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .cinematic-player.is-playing .player-progress { animation: none; } } /* VibraMusic 1.5.1 — final interaction and mobile-menu polish */ .player-next { width: 44px; min-width: 44px; height: 44px; } @media (max-width: 760px) { .site-nav { background: #070908; box-shadow: 0 30px 70px rgba(0,0,0,.78); } .playlist-player-row { grid-template-columns: 46px minmax(0,1fr) auto 44px !important; } .player-next { width: 44px; height: 44px; } .role-tab { font-size: 11px; } } @media (max-width: 430px) { .playlist-player-row { grid-template-columns: 44px minmax(0,1fr) 44px !important; } } /* VibraMusic 1.6 — immersive role-aware industry command center */ .industry-room { --command-accent: var(--copper); position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 10vw, 160px) 0; border-bottom: 1px solid rgba(231,154,98,.14); background: #070908; } .industry-room[data-active-role="manager"] { --command-accent: var(--teal); } .industry-room[data-active-role="label"] { --command-accent: var(--lilac); } .industry-room[data-active-role="publisher"] { --command-accent: #edc0a0; } .industry-room::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,9,8,.04) 0%, rgba(7,9,8,.22) 36%, rgba(7,9,8,.72) 59%, #070908 100%), linear-gradient(180deg, #070908 0%, transparent 18%, transparent 78%, #070908 100%); } .industry-room-atmosphere { position: absolute; z-index: -2; inset: 0; background: url("assets/industry-room-v1.webp") left center / cover no-repeat; opacity: .72; transform: scale(1.02); } .industry-room-grid { position: relative; display: grid; grid-template-columns: minmax(380px,.67fr) minmax(700px,1.33fr); gap: clamp(38px,4.4vw,76px); align-items: center; } .industry-room-copy { position: relative; z-index: 2; } .industry-room-copy h2 { max-width: 580px; margin: 0; color: var(--bone); font: 400 clamp(62px,5.55vw,88px)/.88 var(--display); letter-spacing: -.048em; } .industry-room-copy h2 span { display: block; } .industry-room-copy h2 em { display: inline; color: var(--command-accent); font-style: normal; transition: color .35s ease; } .industry-room-rule { display: block; width: 44px; height: 3px; margin: 36px 0 26px; background: var(--command-accent); box-shadow: 0 0 24px color-mix(in srgb,var(--command-accent) 28%,transparent); transition: width .45s ease, background .35s ease; } .industry-room:hover .industry-room-rule { width: 78px; } .industry-room-copy > p:not(.industry-room-outcome) { max-width: 500px; margin: 0; color: #b8b0a5; font: 400 17px/1.65 var(--ui); } .industry-room-outcome { max-width: 500px; min-height: 58px; margin: 28px 0 30px; color: var(--command-accent); font: 500 22px/1.45 var(--display); transition: color .35s ease, opacity .2s ease, transform .25s ease; } .industry-room-outcome.is-changing { animation: command-copy-in .42s cubic-bezier(.2,.8,.2,1); } .industry-role-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); max-width: 560px; min-height: 58px; border: 1px solid rgba(240,234,223,.24); border-radius: 6px; background: rgba(10,12,11,.84); backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(0,0,0,.3); } .industry-role-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 56px; padding: 0 12px; border: 0; border-left: 1px solid rgba(240,234,223,.09); background: transparent; color: #aaa59e; font: 700 12px/1 var(--ui); cursor: pointer; transition: color .22s ease, background .22s ease, box-shadow .22s ease; } .industry-role-tabs button:first-child { border-left: 0; } .industry-role-tabs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .industry-role-tabs button:hover, .industry-role-tabs button:focus-visible { color: var(--bone); } .industry-role-tabs button[aria-pressed="true"] { color: #130e0a; background: var(--command-accent); box-shadow: 0 0 28px color-mix(in srgb,var(--command-accent) 18%,transparent); } .industry-role-signal { position: relative; height: 74px; margin: -1px -30px -74px 58px; border-left: 1px solid color-mix(in srgb,var(--command-accent) 70%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--command-accent) 48%,transparent); border-radius: 0 0 0 22px; pointer-events: none; } .industry-role-signal::before, .industry-role-signal::after, .industry-role-signal i { content: ""; position: absolute; border-radius: 50%; background: var(--command-accent); box-shadow: 0 0 16px var(--command-accent); } .industry-role-signal::before { left: -4px; top: -4px; width: 7px; height: 7px; } .industry-role-signal::after { right: -4px; bottom: -4px; width: 7px; height: 7px; } .industry-role-signal i { left: -3px; top: 0; width: 5px; height: 5px; animation: command-signal-travel 3.8s ease-in-out infinite; } .command-center-frame { position: relative; z-index: 3; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--command-accent) 64%,#292d29); border-radius: 8px; background: rgba(7,9,8,.95); box-shadow: 0 55px 130px rgba(0,0,0,.62), 0 0 50px color-mix(in srgb,var(--command-accent) 5%,transparent); transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); } .command-center-frame::before { content: ""; position: absolute; z-index: 5; top: 0; left: -22%; width: 18%; height: 1px; background: linear-gradient(90deg,transparent,var(--command-accent),transparent); animation: command-frame-scan 6s ease-in-out infinite; } .command-center-frame.is-changing { animation: command-frame-change .42s cubic-bezier(.2,.8,.2,1); } .command-center-topbar { min-height: 72px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px; padding: 13px 18px 13px 22px; border-bottom: 1px solid rgba(240,234,223,.14); background: rgba(9,11,10,.78); } .command-center-brand { display: flex; align-items: center; gap: 9px; color: var(--bone); } .command-center-brand .brand-mark { width: 20px; height: 28px; } .command-center-brand .brand-mark i { background: var(--command-accent); transition: background .35s ease; } .command-center-brand strong { font: 600 20px/1 var(--display); } .command-center-topbar > span { color: #a9a39a; font: 600 11px/1 var(--ui); } .command-center-topbar > a, .command-mobile-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 19px; border: 1px solid var(--command-accent); border-radius: 5px; background: var(--command-accent); color: #120d09; font: 800 12px/1 var(--ui); transition: transform .2s ease, box-shadow .2s ease, background .35s ease, border-color .35s ease; } .command-center-topbar > a:hover, .command-center-topbar > a:focus-visible, .command-mobile-cta:hover, .command-mobile-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px color-mix(in srgb,var(--command-accent) 16%,transparent); } .command-center-topbar a svg, .command-mobile-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .command-center-body { display: grid; grid-template-columns: 136px minmax(0,1fr) 238px; min-height: 624px; } .command-center-nav { display: flex; flex-direction: column; gap: 4px; padding: 20px 11px; border-right: 1px solid rgba(240,234,223,.13); background: rgba(12,14,13,.66); } .command-center-nav span { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-left: 2px solid transparent; color: #9f9a92; font: 600 11px/1 var(--ui); } .command-center-nav span.active { border-left-color: var(--command-accent); color: var(--command-accent); background: color-mix(in srgb,var(--command-accent) 7%,transparent); } .command-center-nav svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .command-workspace { min-width: 0; padding: 26px 22px 20px; } .command-workspace-head { display: flex; justify-content: space-between; gap: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(240,234,223,.12); } .command-workspace-head > div:first-child span, .command-release-focus span, .command-signal-rail section > span { display: block; margin-bottom: 7px; color: var(--command-accent); font: 800 9px/1.2 var(--ui); letter-spacing: .13em; text-transform: uppercase; transition: color .35s ease; } .command-workspace-head h3 { margin: 0; color: var(--bone); font: 500 27px/1 var(--display); } .command-workspace-tabs { display: flex; align-items: end; gap: 18px; } .command-workspace-tabs span { position: relative; color: #8e8981; font: 700 10px/1 var(--ui); } .command-workspace-tabs span.active { color: var(--command-accent); } .command-workspace-tabs span.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--command-accent); } .command-release-focus { display: grid; grid-template-columns: 136px 1fr; gap: 20px; align-items: center; margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(240,234,223,.11); } .command-release-focus img { width: 136px; aspect-ratio: 1; object-fit: cover; object-position: 50% 28%; border: 1px solid color-mix(in srgb,var(--command-accent) 52%,#292d29); border-radius: 4px; filter: saturate(.72) contrast(1.04); } .command-release-focus h4 { margin: 0; color: var(--bone); font: 500 29px/1.05 var(--display); } .command-release-focus p { margin: 8px 0 0; color: #aaa49b; font: 500 11px/1.4 var(--ui); } .command-signal-wave { height: 58px; display: flex; align-items: center; gap: 3px; overflow: hidden; border-bottom: 1px solid rgba(240,234,223,.11); } .command-signal-wave i { width: 2px; height: calc(8px + var(--wave,12) * 1px); background: var(--command-accent); border-radius: 999px; opacity: .76; animation: command-wave 1.1s ease-in-out infinite alternate; } .command-signal-wave i:nth-child(3n+1) { --wave: 9; animation-delay: -.2s; } .command-signal-wave i:nth-child(3n+2) { --wave: 18; animation-delay: -.55s; } .command-signal-wave i:nth-child(3n) { --wave: 5; animation-delay: -.8s; } .command-activity { padding-top: 7px; } .command-activity p { display: grid; grid-template-columns: 28px 1fr; gap: 3px 10px; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(240,234,223,.09); } .command-activity p:last-child { border-bottom: 0; } .command-activity span { grid-row: 1 / 3; align-self: center; color: var(--command-accent); font: 700 10px/1 var(--ui); } .command-activity strong { color: #ddd5ca; font: 650 11px/1.25 var(--ui); } .command-activity small { color: #77746e; font: 600 9px/1.2 var(--ui); } .command-signal-rail { display: grid; grid-template-rows: repeat(3,1fr) auto; gap: 10px; padding: 16px; border-left: 1px solid rgba(240,234,223,.13); background: rgba(9,11,10,.52); } .command-signal-rail section { min-height: 0; padding: 16px; border: 1px solid rgba(240,234,223,.16); border-radius: 5px; background: rgba(13,15,14,.72); } .command-signal-rail svg { width: 100%; height: 54px; overflow: visible; } .command-signal-rail section > svg path { fill: none; stroke: var(--command-accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .command-signal-rail p { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 8px 0 0; } .command-signal-rail strong { color: var(--bone); font: 600 14px/1 var(--display); } .command-signal-rail small { color: #8e8982; font: 600 9px/1.25 var(--ui); } .command-meter { height: 54px; display: flex; align-items: center; gap: 3px; } .command-meter i { width: 4px; height: 29px; background: var(--command-accent); opacity: .88; } .command-meter i:nth-last-child(-n+4) { opacity: .16; } .command-ready-mark { width: 52px; height: 52px; display: grid; place-items: center; margin: 5px 0; border: 2px solid var(--command-accent); border-radius: 50%; color: var(--command-accent); } .command-ready-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .command-mobile-cta { display: none; } @keyframes command-signal-travel { 0% { left: -3px; top: 0; opacity: 0; } 16% { opacity: 1; } 55% { left: -3px; top: 69px; } 100% { left: calc(100% - 2px); top: 69px; opacity: 0; } } @keyframes command-frame-scan { 0%,12% { left: -22%; opacity: 0; } 32%,72% { opacity: 1; } 100% { left: 108%; opacity: 0; } } @keyframes command-frame-change { 0% { opacity: .72; transform: translateY(7px); } 100% { opacity: 1; transform: none; } } @keyframes command-copy-in { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: none; } } @keyframes command-wave { from { transform: scaleY(.55); opacity: .45; } to { transform: scaleY(1.08); opacity: .92; } } @media (max-width: 1260px) { .industry-room-grid { grid-template-columns: minmax(340px,.6fr) minmax(620px,1.4fr); gap: 34px; } .industry-room-copy h2 { font-size: clamp(58px,5.7vw,76px); } .command-center-body { grid-template-columns: 120px minmax(0,1fr) 208px; } .command-center-nav span { padding-inline: 7px; } .command-workspace { padding-inline: 18px; } .command-release-focus { grid-template-columns: 112px 1fr; } .command-release-focus img { width: 112px; } .command-signal-rail { padding: 12px; } } @media (max-width: 1030px) { .industry-room { padding-block: 110px; } .industry-room::before { background: linear-gradient(180deg,#070908 0%,rgba(7,9,8,.18) 30%,rgba(7,9,8,.74) 65%,#070908 100%); } .industry-room-atmosphere { opacity: .5; background-position: 25% top; } .industry-room-grid { grid-template-columns: 1fr; gap: 68px; } .industry-room-copy { max-width: 740px; } .industry-room-copy h2 { max-width: 740px; font-size: clamp(68px,9vw,92px); } .industry-room-copy > p:not(.industry-room-outcome), .industry-room-outcome { max-width: 610px; } .industry-role-signal { width: 55%; } .command-center-frame { width: 100%; } } @media (max-width: 760px) { .industry-room { padding-block: 86px 94px; } .industry-room::before { background: linear-gradient(180deg,#070908 0%,rgba(7,9,8,.23) 18%,rgba(7,9,8,.84) 48%,#070908 100%); } .industry-room-atmosphere { height: 520px; opacity: .28; background-position: 34% top; background-size: auto 520px; } .industry-room-grid { gap: 48px; } .industry-room-copy h2 { font-size: clamp(49px,14.7vw,67px); line-height: .92; } .industry-room-rule { margin: 27px 0 21px; } .industry-room-copy > p:not(.industry-room-outcome) { font-size: 15px; line-height: 1.6; } .industry-room-outcome { min-height: 0; margin: 21px 0 24px; font-size: 20px; } .industry-role-tabs { width: 100%; max-width: none; min-height: 62px; } .industry-role-tabs button { min-height: 60px; gap: 6px; padding-inline: 5px; font-size: 10px; } .industry-role-tabs button svg { width: 16px; height: 16px; } .industry-role-signal { display: none; } .command-center-frame { border-radius: 7px; } .command-center-topbar { min-height: 64px; grid-template-columns: 1fr auto; padding: 10px 12px 10px 16px; } .command-center-brand strong { font-size: 18px; } .command-center-topbar > span { font-size: 10px; color: var(--bone); } .command-center-topbar > a { display: none; } .command-center-body { display: grid; grid-template-columns: 1fr; min-height: 0; } .command-center-nav { grid-row: 1; min-width: 0; display: flex; flex-direction: row; gap: 4px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(240,234,223,.13); scrollbar-width: thin; scroll-snap-type: x proximity; } .command-center-nav span { flex: 0 0 76px; min-height: 67px; flex-direction: column; justify-content: center; gap: 7px; padding: 6px; border-left: 0; border-bottom: 2px solid transparent; font-size: 9px; scroll-snap-align: start; } .command-center-nav span.active { border-bottom-color: var(--command-accent); } .command-center-nav svg { width: 21px; height: 21px; } .command-workspace { padding: 19px 16px 4px; } .command-workspace-head { align-items: end; padding-bottom: 12px; } .command-workspace-head h3 { font-size: 24px; } .command-workspace-tabs { display: none; } .command-release-focus { grid-template-columns: 104px minmax(0,1fr); gap: 15px; margin-top: 16px; padding-bottom: 16px; } .command-release-focus img { width: 104px; } .command-release-focus h4 { font-size: 28px; } .command-release-focus p { font-size: 10px; } .command-signal-wave { height: 50px; } .command-activity { display: none; } .command-signal-rail { grid-row: 3; display: grid; grid-template-rows: auto; gap: 0; padding: 4px 16px 16px; border-left: 0; background: transparent; } .command-signal-rail section { min-height: 60px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px 14px; padding: 15px 0; border: 0; border-bottom: 1px solid rgba(240,234,223,.14); border-radius: 0; background: transparent; } .command-signal-rail section > span { grid-column: 1; margin: 0; color: #d2c9bd; font-size: 10px; letter-spacing: .02em; text-transform: none; } .command-signal-rail section > svg, .command-meter, .command-ready-mark { display: none; } .command-signal-rail p { grid-column: 2; grid-row: 1; margin: 0; text-align: right; } .command-signal-rail strong { color: var(--command-accent); font: 700 12px/1 var(--ui); } .command-signal-rail small { margin-top: 4px; max-width: 164px; font-size: 8px; } .command-mobile-cta { display: flex; width: 100%; min-height: 56px; margin-top: 14px; font-size: 12px; } } @media (max-width: 430px) { .industry-role-tabs button { flex-direction: column; font-size: 9px; } .command-center-topbar > span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-release-focus { grid-template-columns: 92px minmax(0,1fr); } .command-release-focus img { width: 92px; } } @media (prefers-reduced-motion: reduce) { .industry-role-signal i, .command-center-frame::before, .command-signal-wave i, .command-center-frame.is-changing, .industry-room-outcome.is-changing { animation: none !important; } } /* VibraMusic 1.5 — role-aware stage polish */ .mobile-now-playing { display: none; } .hero-role-picker { --role-accent: var(--copper); position: relative; z-index: 7; max-width: 610px; margin-top: 28px; } .hero-role-picker[data-active-role="manager"] { --role-accent: var(--teal); } .hero-role-picker[data-active-role="label"] { --role-accent: var(--lilac); } .hero-role-picker[data-active-role="publisher"] { --role-accent: #edc0a0; } .hero-role-picker > p:first-child { margin: 0 0 9px; color: #9f9990; font: 700 11px/1.2 var(--ui); letter-spacing: .11em; text-transform: uppercase; } .hero-role-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: linear-gradient(110deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.025) inset; } .hero-role-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #aaa49b; font: 700 11px/1 var(--ui); cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; } .hero-role-tabs button + button { border-left-color: rgba(255,255,255,.055); } .hero-role-tabs button:hover, .hero-role-tabs button:focus-visible { color: var(--bone); outline: none; transform: translateY(-1px); } .hero-role-tabs button:focus-visible { box-shadow: 0 0 0 2px #070908, 0 0 0 4px var(--role-accent); } .hero-role-tabs button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--role-accent) 76%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--role-accent) 16%, transparent), rgba(255,255,255,.018)); color: var(--role-accent); box-shadow: 0 0 26px color-mix(in srgb, var(--role-accent) 12%, transparent), 0 1px 0 rgba(255,255,255,.035) inset; } .hero-role-tabs svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .hero-role-outcome { position: relative; min-height: 48px; margin: 12px 0 0; padding: 2px 4px 2px 17px; color: #bcb5ab; font: 500 13px/1.55 var(--ui); } .hero-role-outcome::before { content: ""; position: absolute; inset: 1px auto 1px 0; width: 1px; background: linear-gradient(180deg, transparent, var(--role-accent) 26%, var(--role-accent) 74%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--role-accent) 32%, transparent); transition: background .25s ease, box-shadow .25s ease; } .hero-role-outcome strong { color: var(--role-accent); font-weight: 800; } .hero-role-outcome.is-changing { animation: vibra-role-copy .42s cubic-bezier(.2,.8,.2,1); } .consent a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 3px; } .consent a:hover, .consent a:focus-visible { color: var(--bone); } @keyframes vibra-role-copy { from { opacity: .25; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @media (min-width: 981px) { .cinematic-shell .launch-hero { min-height: calc(100svh - 74px); padding-block: 66px 42px; } .cinematic-shell .launch-copy h1 { font-size: clamp(62px,5.65vw,82px); } .cinematic-shell .launch-lede { margin-top: 23px; } .cinematic-shell .launch-actions { margin-top: 27px; } .hero-stage { height: min(75vh,720px); } } @media (max-width: 760px) { .cinematic-shell .launch-hero { padding-block: 24px 22px; gap: 24px; } .mobile-now-playing { position: relative; display: grid; grid-template-columns: 62px minmax(0,1fr) 56px; align-items: center; gap: 12px; min-height: 78px; margin: 0 0 26px; padding: 8px 10px 8px 8px; overflow: hidden; border: 1px solid rgba(255,181,125,.34); border-radius: 10px; background: linear-gradient(110deg, rgba(17,18,15,.96), rgba(21,16,12,.9)); box-shadow: 0 20px 55px rgba(0,0,0,.44), 0 0 34px rgba(231,154,98,.055); } .mobile-now-playing::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 30%, rgba(255,215,184,.07), transparent 60%); transform: translateX(-115%); } .mobile-now-playing.is-playing::after { animation: vibra-mobile-player-scan 3.2s ease-in-out infinite; } .mobile-now-playing img { width: 62px; height: 62px; object-fit: cover; object-position: 52% 23%; border: 1px solid rgba(255,191,143,.42); border-radius: 7px; filter: saturate(.9) contrast(1.08); } .mobile-now-playing-copy { position: relative; z-index: 1; min-width: 0; padding-right: 32px; } .mobile-now-playing-copy span, .mobile-now-playing-copy strong, .mobile-now-playing-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-now-playing-copy span { color: var(--copper); font: 800 9px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; } .mobile-now-playing-copy strong { margin-top: 4px; color: var(--bone); font: 600 17px/1.15 var(--display); } .mobile-now-playing-copy small { margin-top: 3px; color: #a8a198; font: 600 10px/1.2 var(--ui); } .mobile-now-playing-signal { position: absolute; left: 84px; right: 70px; bottom: 10px; z-index: 1; height: 8px; opacity: .48; background: repeating-linear-gradient(90deg, var(--copper) 0 1px, transparent 1px 4px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, transparent); mask-image: linear-gradient(180deg, transparent, #000 45%, transparent); transform-origin: 0 50%; } .mobile-now-playing.is-playing .mobile-now-playing-signal { animation: vibra-mobile-wave .65s ease-in-out infinite alternate; } .mobile-now-playing button { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,179,122,.76); border-radius: 50%; background: rgba(231,154,98,.075); color: var(--copper); font: 800 16px/1 var(--ui); cursor: pointer; transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; } .mobile-now-playing button:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .mobile-now-playing.is-playing button { background: var(--copper); color: #160f0b; box-shadow: 0 0 0 7px rgba(231,154,98,.09); } .cinematic-shell .launch-copy h1 { font-size: clamp(49px,13.8vw,59px); line-height: .93; } .cinematic-shell .launch-lede { margin-top: 20px; font-size: 15.5px; line-height: 1.54; } .cinematic-shell .launch-actions { grid-template-columns: 1fr; margin-top: 25px; } .cinematic-shell .launch-actions .button { min-height: 54px; font-size: 12px; } .hero-role-picker { max-width: none; margin-top: 23px; } .hero-role-picker > p:first-child { margin-bottom: 8px; } .hero-role-tabs { grid-template-columns: repeat(4,minmax(92px,1fr)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .hero-role-tabs button { min-height: 52px; scroll-snap-align: start; font-size: 10px; } .hero-role-tabs svg { width: 16px; height: 16px; flex-basis: 16px; } .hero-role-outcome { min-height: 66px; margin-top: 12px; padding-left: 14px; font-size: 12.5px; line-height: 1.5; } .hero-stage { height: 540px; } .cinematic-player .player-next { width: 44px; height: 44px; } } @keyframes vibra-mobile-player-scan { 0%, 18% { transform: translateX(-115%); opacity: 0; } 36% { opacity: 1; } 78%, 100% { transform: translateX(120%); opacity: 0; } } @keyframes vibra-mobile-wave { from { transform: scaleY(.45); opacity: .35; } to { transform: scaleY(1); opacity: .72; } } @media (prefers-reduced-motion: reduce) { .hero-role-outcome.is-changing, .mobile-now-playing.is-playing::after, .mobile-now-playing.is-playing .mobile-now-playing-signal { animation: none !important; } .hero-role-tabs button:hover, .hero-role-tabs button:focus-visible { transform: none; } } @layer vibra-base { * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--ui); font-size: 16px; line-height: 1.55; } body.admin-bar .site-header { top: 32px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } ::selection { background: var(--copper); color: var(--ink); } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; background: var(--bone); color: var(--ink); padding: 10px 14px; } .skip-link:focus { top: 16px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .wrap { width: min(1240px, calc(100% - 48px)); margin-inline: auto; } .site-header { position: sticky; top: 0; z-index: 50; height: 74px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,10,9,.92); backdrop-filter: blur(18px); } .header-inner { height: 100%; display: flex; align-items: center; gap: 34px; } .brand { display: inline-flex; align-items: center; gap: 11px; font: 600 24px/1 var(--display); letter-spacing: -.025em; } .brand-mark { width: 23px; height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; } .brand-mark i { display: block; width: 2px; border-radius: 3px; background: var(--copper); } .brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 10px; } .brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 21px; } .brand-mark i:nth-child(3) { height: 29px; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { padding: 10px 13px; color: var(--muted); font-size: 13px; border-radius: 5px; } .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--bone); background: var(--surface-2); } .header-cta { border: 1px solid var(--copper-dark); color: var(--bone) !important; margin-left: 10px; } .menu-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: transparent; color: var(--bone); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; } .button { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 5px; font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .16s ease, background .2s ease, border-color .2s ease; } .button:hover { transform: translateY(-1px); } .button-primary { background: var(--copper); color: #160f0b; } .button-primary:hover { background: #eda879; } .button-secondary { border-color: #5b3b29; color: var(--bone); background: transparent; } .button-secondary:hover { border-color: var(--copper); } .eyebrow { margin: 0 0 18px; color: var(--copper); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; } .section-title { font: 400 clamp(42px, 5vw, 72px)/.98 var(--display); letter-spacing: -.045em; margin: 0; } .section-intro { max-width: 620px; color: var(--muted); font-size: 17px; } .launch-hero { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(42px, 7vw, 110px); padding-block: 72px 48px; } .launch-copy h1 { max-width: 780px; font: 400 clamp(66px, 7vw, 112px)/.86 var(--display); letter-spacing: -.06em; margin: 0; } .launch-copy h1 em { color: var(--copper); font-style: normal; } .launch-lede { max-width: 620px; margin: 28px 0 0; color: var(--soft); font-size: clamp(17px, 2vw, 21px); } .launch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .launch-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--line); margin-top: 42px; padding-top: 21px; } .launch-proof strong { display: block; color: var(--copper); font: 400 29px/1 var(--display); } .launch-proof span { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; } .hero-visual { position: relative; min-width: 0; } .hero-cover { aspect-ratio: 1; position: relative; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.44); } .hero-cover img { width: 100%; height: 100%; object-fit: cover; } .status-stamp { position: absolute; right: 17px; top: 17px; padding: 9px 11px; background: rgba(8,10,9,.87); border: 1px solid rgba(255,255,255,.13); border-radius: 4px; color: var(--bone); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; } .sound-study { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; } .sound-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 11px; } .sound-meta strong { font: 400 18px var(--display); } .sound-meta span { color: var(--muted); font-size: 10px; } .player-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 13px; align-items: center; } .player-button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--copper); color: #17100c; cursor: pointer; } .player-progress { width: 100%; accent-color: var(--copper); } .player-time { color: var(--muted); font-size: 10px; min-width: 70px; text-align: right; } .manifesto { border-top: 1px solid var(--line); padding: 110px 0; } .manifesto-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(46px, 8vw, 120px); align-items: start; } .manifesto-copy { font: 400 clamp(37px, 4vw, 61px)/1.06 var(--display); letter-spacing: -.035em; margin: 0; } .principles { display: grid; gap: 0; } .principle { display: grid; grid-template-columns: 54px 1fr; gap: 15px; border-top: 1px solid var(--line); padding: 25px 0; } .principle:first-child { border-top: 0; padding-top: 0; } .principle > span { color: var(--copper); font: 400 24px var(--display); } .principle h3 { font: 400 24px var(--display); margin: 0 0 8px; } .principle p { color: var(--muted); margin: 0; } .preview-section { padding: 105px 0; background: #0b0d0c; border-block: 1px solid var(--line); overflow: hidden; } .preview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; } .dashboard-frame { border: 1px solid var(--line); border-radius: 9px; padding: 22px; background: #0d100e; box-shadow: 0 35px 100px rgba(0,0,0,.36); } .dash-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .dash-top h3 { font: 400 29px var(--display); margin: 0; } .preview-label { padding: 7px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; } .dash-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; } .dash-panel { min-height: 230px; border: 1px solid var(--line); border-radius: 6px; padding: 20px; background: var(--surface); } .dash-panel h4 { margin: 0 0 20px; font-size: 13px; } .balance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .balance-row span, .chart-legend span { color: var(--muted); font-size: 10px; } .balance-row strong { display: block; font: 400 34px var(--display); margin-top: 6px; } .artist-pool { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 20px; } .pool-ring { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(var(--copper) 0 90%, #343833 90%); display: grid; place-items: center; position: relative; } .pool-ring::after { content: ""; width: 52px; height: 52px; position: absolute; border-radius: 50%; background: var(--surface); } .pool-ring b { position: relative; z-index: 1; font: 400 18px var(--display); } .artist-pool p { margin: 0; } .artist-pool small { color: var(--muted); display: block; } .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .chart-legend { display: flex; gap: 12px; } .chart-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; } .chart-svg { width: 100%; height: 155px; margin-top: 18px; } .chart-svg line { stroke: #292d29; stroke-width: 1; } .chart-svg path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .dash-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; } .mini-panel { border: 1px solid var(--line); border-radius: 6px; padding: 17px; background: var(--surface); } .mini-panel h4 { margin: 0 0 14px; font-size: 12px; } .mini-stat { display: flex; align-items: center; justify-content: space-between; min-height: 37px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10px; } .mini-stat:first-of-type { border-top: 0; } .mini-stat span { color: var(--muted); } .direct-section { padding: 112px 0; } .direct-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 120px); align-items: center; } .direct-copy p { color: var(--muted); max-width: 520px; } .money-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 28px; } .money-card > p { color: var(--muted); margin: 0 0 22px; font-size: 12px; } .money-flow { display: grid; grid-template-columns: 1fr 86px 1fr; align-items: center; gap: 20px; } .money-source, .money-destination { border: 1px solid var(--line); padding: 18px; min-height: 112px; } .money-source span, .money-destination span { color: var(--muted); font-size: 10px; } .money-source strong, .money-destination strong { display: block; margin-top: 8px; font: 400 27px var(--display); } .flow-line { height: 1px; background: var(--copper); position: relative; } .flow-line::after { content: ""; width: 7px; height: 7px; border-top: 1px solid var(--copper); border-right: 1px solid var(--copper); transform: rotate(45deg); position: absolute; right: 0; top: -3px; } .money-destination strong { color: var(--copper); } .fine-print { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px !important; font-size: 10px !important; } .gate-section { padding: 105px 0; border-top: 1px solid var(--line); } .gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 42px; } .gate-card { min-height: 210px; border: 1px solid var(--line); padding: 23px; background: var(--surface); } .gate-card span { color: var(--copper); font: 400 25px var(--display); } .gate-card h3 { font: 400 22px var(--display); margin: 42px 0 8px; } .gate-card p { color: var(--muted); font-size: 13px; margin: 0; } .pilot-cta { padding: 100px 0; border-block: 1px solid var(--line); background: radial-gradient(circle at 75% 45%, rgba(223,151,103,.13), transparent 34%), #0d0f0e; } .pilot-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; } .pilot-inner p { color: var(--muted); max-width: 620px; } .page-hero { padding: 80px 0 50px; border-bottom: 1px solid var(--line); } .page-hero h1 { font: 400 clamp(58px, 7vw, 100px)/.9 var(--display); letter-spacing: -.055em; margin: 0; max-width: 920px; } .page-hero p { color: var(--soft); max-width: 690px; font-size: 18px; margin: 24px 0 0; } .page-content { padding: 64px 0 110px; } .studio-layout { display: grid; grid-template-columns: 210px 1fr; min-height: 720px; border: 1px solid var(--line); background: #0b0d0c; } .studio-side { border-right: 1px solid var(--line); padding: 23px 13px; } .studio-side strong { display: block; font: 400 20px var(--display); padding: 0 9px 22px; } .studio-side span { display: block; padding: 11px 12px; color: var(--muted); border-left: 2px solid transparent; font-size: 11px; } .studio-side span.active { color: var(--copper); border-left-color: var(--copper); background: var(--surface); } .studio-main { padding: 27px; min-width: 0; } .studio-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 20px; } .studio-heading h2 { font: 400 32px var(--display); margin: 0; } .studio-heading p { color: var(--muted); margin: 3px 0 0; font-size: 11px; } .studio-panels { display: grid; grid-template-columns: 1fr 1.45fr; gap: 12px; } .studio-panels .dash-bottom { grid-column: 1 / -1; } .honesty-note { margin-top: 22px; border-left: 2px solid var(--copper); padding: 14px 18px; color: var(--muted); background: var(--surface); font-size: 12px; } .transparency-status { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .metric-card { min-height: 185px; border: 1px solid var(--line); background: var(--surface); padding: 22px; } .metric-card > span { color: var(--muted); font-size: 10px; } .metric-card strong { display: block; font: 400 38px var(--display); margin: 25px 0 5px; } .metric-card small { color: var(--green); } .status-card strong { color: var(--green); font-size: 24px; } .method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .method-card { border: 1px solid var(--line); padding: 25px; background: var(--surface); } .method-card h2 { font: 400 27px var(--display); margin: 0 0 13px; } .method-card p, .method-card li { color: var(--muted); } .method-card ul { padding-left: 19px; } .timeline { display: grid; gap: 0; } .timeline-row { display: grid; grid-template-columns: 95px 1fr auto; gap: 18px; border-top: 1px solid var(--line); padding: 16px 0; font-size: 12px; } .timeline-row:first-child { border-top: 0; } .timeline-row span { color: var(--muted); } .badge { align-self: start; padding: 5px 8px; border: 1px solid var(--line); border-radius: 20px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-size: 8px; } .badge-locked { color: var(--warning); border-color: rgba(218,164,79,.4); } .application-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 8vw, 120px); align-items: start; } .application-copy h2 { font: 400 40px var(--display); margin: 0 0 14px; } .application-copy p, .application-copy li { color: var(--muted); } .application-copy ul { padding-left: 18px; } .application-form { border: 1px solid var(--line); border-radius: 8px; padding: clamp(24px, 4vw, 38px); background: var(--surface); display: grid; gap: 17px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .field { display: grid; gap: 7px; } .field label { color: var(--soft); font-size: 11px; } .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #0b0d0c; color: var(--bone); padding: 12px 13px; outline: none; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(223,151,103,.12); } .field textarea { min-height: 125px; resize: vertical; } .consent { display: flex; gap: 10px; color: var(--muted); font-size: 11px; } .consent input { margin-top: 3px; accent-color: var(--copper); } .form-success, .form-error { border: 1px solid rgba(103,189,139,.45); background: rgba(103,189,139,.08); color: var(--green); padding: 14px 16px; margin-bottom: 20px; } .form-error { border-color: rgba(218,164,79,.45); background: rgba(218,164,79,.08); color: var(--warning); } .website-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .site-footer { border-top: 1px solid var(--line); padding: 54px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; } .footer-statement { max-width: 500px; color: var(--muted); margin: 16px 0 0; } .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; } .footer-nav a { color: var(--muted); font-size: 12px; } .footer-nav a:hover { color: var(--copper); } .footer-bottom { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); margin-top: 45px; padding-top: 18px; color: #666963; font-size: 10px; } @media (max-width: 980px) { .launch-hero, .manifesto-grid, .direct-grid, .application-layout { grid-template-columns: 1fr; } .hero-visual { width: min(620px, 100%); } .dash-grid, .studio-panels { grid-template-columns: 1fr; } .dash-bottom { grid-template-columns: 1fr 1fr; } .gate-grid { grid-template-columns: 1fr 1fr; } .transparency-status { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body.admin-bar .site-header { top: 46px; } .wrap { width: min(100% - 28px, 1240px); } .site-header { height: 66px; } .menu-toggle { display: inline-grid; place-items: center; } .site-nav { position: absolute; left: 0; right: 0; top: 66px; display: none; background: #0b0d0c; border-bottom: 1px solid var(--line); padding: 10px 14px 16px; } .site-nav.open { display: grid; } .site-nav a { padding: 12px; } .header-cta { margin-left: 0; } .launch-hero { min-height: auto; padding-block: 58px 72px; } .launch-copy h1 { font-size: clamp(57px, 16vw, 76px); } .launch-proof { grid-template-columns: 1fr; gap: 13px; } .hero-cover { margin-top: 20px; } .manifesto, .preview-section, .direct-section, .gate-section { padding-block: 75px; } .preview-heading, .pilot-inner, .footer-grid, .footer-bottom { display: grid; grid-template-columns: 1fr; align-items: start; } .dashboard-frame { padding: 13px; overflow-x: auto; } .dash-grid, .dash-bottom, .gate-grid, .method-grid, .transparency-status { grid-template-columns: 1fr; } .money-flow { grid-template-columns: 1fr; } .flow-line { width: 1px; height: 42px; margin-left: 50%; } .flow-line::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); } .studio-layout { grid-template-columns: 1fr; } .studio-side { display: none; } .studio-main { padding: 14px; } .studio-heading { display: grid; } .balance-row, .form-row { grid-template-columns: 1fr; } .page-hero { padding-top: 58px; } .timeline-row { grid-template-columns: 1fr; gap: 5px; } .footer-nav { margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* VibraMusic 1.1 — cinematic interactive launch */ .cinematic-shell { --pointer-x: 72%; --pointer-y: 42%; position: relative; min-height: calc(100svh - 74px); overflow: hidden; isolation: isolate; background: #070908; } .cinematic-stage-bg, .cinematic-grain, .cinematic-light { position: absolute; inset: 0; pointer-events: none; } .cinematic-stage-bg { z-index: -3; overflow: hidden; } .cinematic-stage-bg img { width: 108%; height: 108%; margin: -4%; max-width: none; object-fit: cover; object-position: center; opacity: .78; filter: saturate(.88) contrast(1.08); animation: stage-drift 26s ease-in-out infinite alternate; will-change: transform; } .cinematic-stage-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070908 0%, rgba(7,9,8,.96) 25%, rgba(7,9,8,.60) 43%, rgba(7,9,8,.12) 72%, rgba(7,9,8,.48) 100%), linear-gradient(0deg, rgba(7,9,8,.94) 0%, transparent 34%, rgba(7,9,8,.25) 100%); } .cinematic-grain { z-index: -1; opacity: .1; mix-blend-mode: soft-light; background-image: repeating-linear-gradient(18deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(103deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px); background-size: 9px 11px, 13px 17px; animation: grain-shift .7s steps(2) infinite; } .cinematic-light { z-index: -2; opacity: .74; background: radial-gradient(circle 34vw at var(--pointer-x) var(--pointer-y), rgba(223,151,103,.22), transparent 68%); transition: background-position .16s ease-out; } .cinematic-shell .wrap { width: min(1540px, calc(100% - 64px)); } .cinematic-shell .launch-hero { position: relative; min-height: calc(100svh - 74px); grid-template-columns: minmax(440px, .82fr) minmax(620px, 1.18fr); gap: clamp(24px, 3vw, 58px); padding-block: clamp(70px, 8vh, 108px) 64px; } .cinematic-shell .launch-copy { position: relative; z-index: 5; } .cinematic-shell .launch-copy h1 { max-width: 710px; font-size: clamp(72px, 5.55vw, 108px); line-height: .86; text-wrap: balance; text-shadow: 0 8px 34px rgba(0,0,0,.42); } .cinematic-shell .launch-lede { max-width: 560px; } .hero-stage { position: relative; min-width: 0; height: min(72vh, 720px); perspective: 1200px; } .artist-float { --parallax-x: 0px; --parallax-y: 0px; position: absolute; z-index: 2; transform: translate3d(var(--parallax-x), var(--parallax-y), 0); transition: transform .25s cubic-bezier(.2,.75,.3,1), z-index 0s; will-change: transform; } .artist-float-left { width: 29%; left: 0; top: 18%; z-index: 2; } .artist-float-center { width: 48%; left: 26%; top: 0; z-index: 4; } .artist-float-right { width: 28%; right: 0; top: 25%; z-index: 3; } .artist-float.is-focused { z-index: 8; } .artist-card { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; color: var(--bone); border: 1px solid rgba(223,151,103,.62); border-radius: 2px; background: #111411; box-shadow: 0 35px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.06) inset; cursor: pointer; transition: box-shadow .35s ease, border-color .35s ease, filter .35s ease, transform .35s cubic-bezier(.2,.8,.25,1); } .artist-card img { width: 100%; height: 100%; object-fit: cover; animation: portrait-breathe 7.2s ease-in-out infinite; transition: transform .7s cubic-bezier(.2,.8,.25,1), filter .5s ease; } .artist-float-left .artist-card img { animation-delay: -2.1s; } .artist-float-right .artist-card img { animation-delay: -4.3s; } .artist-card:hover, .artist-card:focus-visible, .artist-card.is-active { border-color: var(--copper); box-shadow: 0 44px 100px rgba(0,0,0,.68), 0 0 40px rgba(223,151,103,.13); outline: none; } .artist-card:hover img, .artist-card:focus-visible img, .artist-card.is-active img { transform: scale(1.035); filter: contrast(1.04) saturate(1.04); } .portrait-whisper { position: absolute; left: 0; right: 0; bottom: 0; padding: 62px 16px 15px; color: var(--bone); background: linear-gradient(0deg, rgba(7,9,8,.94), transparent); font: 400 clamp(13px, 1vw, 17px)/1.25 var(--display); text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; } .artist-card:hover .portrait-whisper, .artist-card:focus-visible .portrait-whisper, .artist-card.is-active .portrait-whisper { opacity: 1; transform: translateY(0); } .cinematic-player { position: absolute; left: 4%; right: 2%; bottom: 0; z-index: 12; margin: 0; padding: 15px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(8,10,9,.84); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.35); } .cinematic-player .player-button { box-shadow: 0 0 0 0 rgba(223,151,103,.38); transition: transform .2s ease, box-shadow .3s ease; } .cinematic-player .player-button:hover, .cinematic-player .player-button:focus-visible { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(223,151,103,.12); outline: none; } .launch-proof-rail { position: relative; z-index: 3; background: #080a09; border-block: 1px solid var(--line); } .launch-proof-rail .launch-proof { margin-top: 0; padding-block: 24px; border-top: 0; } .footer-bottom a { color: var(--copper); text-decoration: underline; text-decoration-color: rgba(223,151,103,.35); text-underline-offset: 4px; } .footer-bottom a:hover, .footer-bottom a:focus-visible { color: #f2b084; text-decoration-color: currentColor; } .vibra-motion [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .vibra-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @keyframes stage-drift { 0% { transform: scale(1.025) translate3d(-1.2%, -.7%, 0); } 100% { transform: scale(1.075) translate3d(1.5%, .5%, 0); } } @keyframes grain-shift { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-2px,1px,0); } 50% { transform: translate3d(1px,-2px,0); } 75% { transform: translate3d(2px,2px,0); } 100% { transform: translate3d(-1px,-1px,0); } } @keyframes portrait-breathe { 0%, 100% { object-position: center 49%; } 50% { object-position: center 52%; } } @media (max-width: 1180px) { .cinematic-shell .launch-hero { grid-template-columns: minmax(390px, .8fr) minmax(500px, 1.2fr); } .cinematic-shell .launch-copy h1 { font-size: clamp(66px, 6.7vw, 88px); } .hero-stage { height: 620px; } } @media (max-width: 980px) { .cinematic-shell .wrap { width: min(100% - 40px, 760px); } .cinematic-shell .launch-hero { grid-template-columns: 1fr; min-height: auto; gap: 34px; padding-block: 66px 36px; } .cinematic-shell .launch-copy { max-width: 700px; } .cinematic-shell .launch-copy h1 { max-width: 760px; font-size: clamp(68px, 10vw, 96px); } .hero-stage { width: 100%; height: min(78vw, 650px); } .cinematic-stage-bg::after { background: linear-gradient(180deg, #070908 0%, rgba(7,9,8,.82) 28%, rgba(7,9,8,.18) 67%, rgba(7,9,8,.92) 100%), linear-gradient(90deg, rgba(7,9,8,.7), transparent 35%, rgba(7,9,8,.35)); } } @media (max-width: 760px) { .cinematic-shell { min-height: auto; } .cinematic-shell .wrap { width: min(100% - 28px, 600px); } .cinematic-shell .launch-hero { padding-block: 48px 24px; gap: 22px; } .cinematic-shell .launch-copy h1 { max-width: 560px; font-size: clamp(54px, 15.2vw, 72px); line-height: .88; letter-spacing: -.055em; } .cinematic-shell .launch-lede { margin-top: 22px; font-size: 16px; } .cinematic-shell .launch-actions { display: grid; grid-template-columns: 1.12fr .88fr; gap: 8px; margin-top: 25px; } .cinematic-shell .launch-actions .button { min-width: 0; padding-inline: 12px; font-size: 11px; } .hero-stage { width: calc(100% + 28px); height: 455px; margin-left: -14px; overflow: hidden; } .artist-float-left { width: 36%; left: -3%; top: 19%; transform: rotate(-4deg); } .artist-float-center { width: 53%; left: 24%; top: 0; } .artist-float-right { width: 36%; right: -5%; top: 22%; transform: rotate(4deg); } .artist-card { box-shadow: 0 24px 60px rgba(0,0,0,.62); } .portrait-whisper { padding: 45px 10px 10px; font-size: 12px; } .cinematic-player { left: 14px; right: 14px; bottom: 0; padding: 12px; } .cinematic-player .sound-meta { margin-bottom: 8px; } .cinematic-player .sound-meta strong { font-size: 15px; } .cinematic-player .sound-meta span { display: none; } .cinematic-player .player-row { grid-template-columns: 44px 1fr auto; gap: 9px; } .cinematic-player .player-button { width: 42px; height: 42px; } .launch-proof-rail .launch-proof { padding-block: 18px; } .launch-proof-rail .launch-proof div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; padding-block: 5px; } .launch-proof-rail .launch-proof strong { font-size: 25px; } .launch-proof-rail .launch-proof span { margin-top: 0; } .footer-bottom { gap: 12px; } } @media (prefers-reduced-motion: reduce) { .cinematic-stage-bg img, .cinematic-grain, .artist-card img { animation: none !important; } .vibra-motion [data-reveal] { opacity: 1; transform: none; } .artist-float { transform: none !important; } } /* VibraMusic 1.2 — interactive Artist Studio and four-artist sound rotation */ .sound-meta strong em { margin-left: 6px; color: var(--copper); font: 700 9px/1 var(--ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; } .playlist-player-row { grid-template-columns: 48px 1fr auto 38px; } .player-next { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--bone); cursor: pointer; } .player-next:hover, .player-next:focus-visible { color: var(--copper); border-color: var(--copper); outline: none; } .player-next svg { width: 15px; height: 15px; fill: currentColor; } .audio-rotation { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; } .audio-rotation button { min-width: 0; padding: 8px 9px; border: 1px solid transparent; border-radius: 4px; background: rgba(255,255,255,.025); color: var(--muted); text-align: left; cursor: pointer; } .audio-rotation button:hover, .audio-rotation button:focus-visible, .audio-rotation button.active { border-color: rgba(223,151,103,.5); background: rgba(223,151,103,.07); color: var(--bone); outline: none; } .audio-rotation span, .audio-rotation small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audio-rotation span { font-size: 9px; font-weight: 800; } .audio-rotation small { margin-top: 2px; color: var(--muted); font-size: 8px; } .studio-demo-hero { background: radial-gradient(circle at 82% 42%, rgba(223,151,103,.1), transparent 28%); } .studio-hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 46px; } .studio-demo-hero .button { margin-bottom: 8px; } .studio-demo-page { padding-top: 48px; } .studio-demo-shell { grid-template-columns: 220px minmax(0,1fr); min-height: 850px; overflow: hidden; border-radius: 10px; box-shadow: 0 45px 110px rgba(0,0,0,.34); } .studio-demo-shell .studio-side { padding: 22px 12px; background: #090b0a; } .studio-side-brand { padding: 0 9px 22px; border-bottom: 1px solid var(--line); margin-bottom: 11px; } .studio-side-brand strong { padding: 0; } .studio-side-brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .studio-side-nav { display: grid; gap: 2px; } .studio-side-nav button { width: 100%; padding: 10px 12px; border: 0; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; background: transparent; color: var(--muted); font-family: var(--ui); font-size: 11px; text-align: left; cursor: pointer; } .studio-side-nav button:hover, .studio-side-nav button:focus-visible { color: var(--bone); background: rgba(255,255,255,.035); outline: none; } .studio-side-nav button.active { color: var(--copper); border-left-color: var(--copper); background: var(--surface); } .studio-demo-shell .studio-main { padding: 24px; background: #0b0d0c; } .studio-demo-heading { align-items: center; padding-bottom: 19px; border-bottom: 1px solid var(--line); } .studio-heading-actions { display: flex; align-items: center; gap: 10px; } .studio-create-button { min-height: 39px; } .range-switch, .analytics-modes, .catalog-filters { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: #090b0a; } .range-switch button, .analytics-modes button, .catalog-filters button { min-width: 42px; min-height: 31px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; } .range-switch button:hover, .range-switch button:focus-visible, .range-switch button.active, .analytics-modes button:hover, .analytics-modes button:focus-visible, .analytics-modes button.active, .catalog-filters button:hover, .catalog-filters button:focus-visible, .catalog-filters button.active { color: var(--bone); background: var(--surface-2); outline: none; } .studio-demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0; padding: 10px 12px; border: 1px solid rgba(88,185,176,.22); border-radius: 5px; background: rgba(88,185,176,.055); color: var(--teal); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .studio-demo-banner span { display: flex; align-items: center; gap: 7px; font-weight: 800; } .studio-demo-banner i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(88,185,176,.08); } .studio-demo-banner small { color: var(--muted); font-size: 8px; text-transform: none; letter-spacing: 0; } .studio-view { animation: studio-view-in .3s ease both; } .studio-view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 20px; } .studio-view-heading h3 { margin: 0; font: 400 31px/1 var(--display); } .studio-view-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; } .studio-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 9px; } .studio-kpis article, .studio-demo-panel, .store-products article, .campaign-list article, .settings-list article, .wallet-balance { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); } .studio-kpis article { min-height: 112px; padding: 15px; } .studio-kpis span, .studio-demo-panel > span, .wallet-balance > span { display: block; color: var(--muted); font-size: 9px; } .studio-kpis strong { display: block; margin: 12px 0 4px; font: 400 26px/1 var(--display); } .studio-kpis small { color: var(--teal); font-size: 8px; } .studio-kpis strong.flash { animation: metric-flash .42s ease; } .studio-overview-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(240px,.7fr); gap: 9px; } .studio-demo-panel { padding: 17px; } .studio-panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; } .studio-panel-head span { display: block; color: var(--muted); font-size: 9px; } .studio-panel-head strong { display: block; margin-top: 4px; font: 400 17px var(--display); } .studio-live-chart { width: 100%; height: 210px; margin-top: 8px; overflow: visible; } .studio-live-chart .chart-grid line { stroke: #292d29; stroke-width: 1; } .studio-area { fill: rgba(223,151,103,.07); transition: d .35s ease; } .studio-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; transition: points .35s ease; } .studio-line-revenue { stroke: var(--copper); } .studio-line-engagement { stroke: var(--teal); opacity: .82; } .studio-chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; } .release-focus-panel { display: grid; align-content: start; } .studio-select-label { display: grid; gap: 5px; margin: 14px 0 11px; color: var(--muted); font-size: 9px; } .studio-select-label select, .catalog-toolbar input, .message-composer select, .message-composer textarea, .studio-dialog input, .studio-dialog select { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #090b0a; color: var(--bone); padding: 10px 11px; outline: none; } .studio-select-label select:focus, .catalog-toolbar input:focus, .message-composer select:focus, .message-composer textarea:focus, .studio-dialog input:focus, .studio-dialog select:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(223,151,103,.1); } .release-focus-art { aspect-ratio: 16/7; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg,#3f271b,#ba7249 52%,#17100d); } .release-focus-art[data-release-art="golden-distance"] { background: linear-gradient(135deg,#151918,#67766d 52%,#d29a67); } .release-focus-art[data-release-art="under-the-surface"] { background: linear-gradient(135deg,#28202e,#785e89 54%,#171318); } .release-focus-art span { color: rgba(241,234,223,.82); font: 400 30px var(--display); letter-spacing: -.08em; } .release-focus-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0; } .release-focus-meta strong { font: 400 19px var(--display); } .release-focus-meta span { color: var(--teal); font-size: 8px; } .release-focus-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; } .release-focus-stats div { border-top: 1px solid var(--line); padding-top: 9px; } .release-focus-stats dt { color: var(--muted); font-size: 8px; } .release-focus-stats dd { margin: 3px 0 0; font-weight: 800; font-size: 11px; } .studio-overview-bottom { display: grid; grid-template-columns: 1.4fr .6fr; gap: 9px; margin-top: 9px; } .progress-track { width: 100px; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 10px; background: #30342f; } .progress-track i { display: block; height: 100%; background: var(--copper); transition: width .3s ease; } .readiness-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 15px; } .readiness-list button, .quick-actions-panel button { display: flex; justify-content: space-between; align-items: center; min-height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #0b0d0c; color: var(--soft); font-size: 9px; cursor: pointer; } .readiness-list button:hover, .readiness-list button:focus-visible, .quick-actions-panel button:hover, .quick-actions-panel button:focus-visible { border-color: var(--copper); outline: none; } .readiness-list b { color: var(--muted); font-size: 8px; } .readiness-list .complete b { color: var(--teal); } .quick-actions-panel { display: grid; gap: 7px; } .quick-actions-panel .studio-panel-head { margin-bottom: 5px; } .quick-actions-panel button span { color: var(--copper); } .catalog-toolbar { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 12px; } .catalog-toolbar label { display: grid; gap: 5px; width: min(340px,100%); color: var(--muted); font-size: 9px; } .catalog-table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .catalog-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr .6fr 40px; gap: 12px; align-items: center; min-height: 58px; padding: 0 14px; border-top: 1px solid var(--line); font-size: 10px; } .catalog-row:first-child { border-top: 0; } .catalog-row > span { color: var(--muted); } .catalog-head { min-height: 38px; background: #090b0a; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; } .catalog-row button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--bone); cursor: pointer; } .catalog-row button:hover, .catalog-row button:focus-visible, .catalog-row button.playing { color: var(--ink); background: var(--copper); border-color: var(--copper); outline: none; } .status-live { color: var(--teal) !important; } .status-draft { color: var(--warning) !important; } .status-review { color: var(--lilac) !important; } .catalog-count { color: var(--muted); font-size: 9px; } .release-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; } .release-board-card { display: grid; min-height: 165px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--bone); text-align: left; cursor: pointer; } .release-board-card:hover, .release-board-card:focus-visible, .release-board-card.selected { border-color: rgba(223,151,103,.65); outline: none; } .release-board-card span { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; } .release-board-card strong { align-self: end; font: 400 20px var(--display); } .release-board-card small { color: var(--muted); font-size: 9px; } .release-board-card i { height: 3px; overflow: hidden; border-radius: 4px; background: #30342f; } .release-board-card i b { display: block; height: 100%; background: var(--copper); } .release-detail-panel { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 9px; } .release-detail-panel h4 { margin: 7px 0; font: 400 28px var(--display); } .release-detail-panel p { margin: 0; color: var(--muted); font-size: 10px; } .audience-layout, .store-demo-grid, .message-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 9px; } .segment-list { display: grid; gap: 6px; } .segment-list button { display: flex; justify-content: space-between; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--soft); cursor: pointer; } .segment-list button:hover, .segment-list button:focus-visible, .segment-list button.active { border-color: var(--copper); color: var(--bone); outline: none; } .segment-list b { color: var(--copper); } .segment-detail { min-height: 285px; display: grid; align-content: center; } .segment-detail h4 { margin: 9px 0 4px; font: 400 28px var(--display); } .segment-detail > strong { color: var(--copper); font: 400 42px var(--display); } .segment-detail p { max-width: 520px; color: var(--muted); font-size: 11px; } .segment-bars { display: grid; gap: 7px; margin: 18px 0 10px; } .segment-bars i { width: var(--bar); height: 5px; border-radius: 8px; background: linear-gradient(90deg,var(--copper),var(--lilac)); } .segment-detail small { color: var(--muted); font-size: 8px; } .store-price-panel { min-height: 310px; display: grid; align-content: center; } .store-price-panel > strong { margin: 10px 0 18px; color: var(--copper); font: 400 50px var(--display); } .store-price-panel input { width: 100%; accent-color: var(--copper); } .store-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; } .store-split div { padding: 11px; border: 1px solid var(--line); } .store-split span { display: block; color: var(--muted); font-size: 8px; } .store-split strong { font: 400 19px var(--display); } .store-price-panel small { color: var(--muted); font-size: 8px; } .store-products { display: grid; gap: 7px; } .store-products article { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; padding: 16px; } .store-products article > span { font-size: 10px; } .store-products article strong { color: var(--copper); font: 400 18px var(--display); } .store-products button { border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; } .store-products button:hover, .store-products button:focus-visible { color: var(--bone); outline: none; } .campaign-list, .settings-list { display: grid; gap: 8px; } .campaign-list article, .settings-list article { display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center; min-height: 76px; padding: 15px 17px; } .campaign-list span, .settings-list strong { display: block; font-size: 11px; } .campaign-list small, .settings-list span { display: block; color: var(--muted); font-size: 9px; } .campaign-list article > strong { color: var(--soft); font-size: 10px; } [role="switch"] { min-width: 60px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 20px; background: #090b0a; color: var(--muted); font-size: 8px; cursor: pointer; } [role="switch"][aria-checked="true"] { border-color: rgba(88,185,176,.5); background: rgba(88,185,176,.1); color: var(--teal); } .message-composer { display: grid; gap: 14px; } .message-composer label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; } .message-composer textarea { min-height: 126px; resize: vertical; } .message-preview { min-height: 315px; display: grid; align-content: center; background: radial-gradient(circle at 80% 20%,rgba(223,151,103,.09),transparent 34%),var(--surface); } .message-preview strong { margin-top: 12px; color: var(--copper); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } .message-preview p { max-width: 460px; font: 400 29px/1.15 var(--display); } .message-preview small { color: var(--muted); } .wallet-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; } .wallet-balance { padding: 18px; } .wallet-balance strong { display: block; margin: 18px 0 5px; font: 400 34px var(--display); } .wallet-balance small { color: var(--muted); font-size: 8px; } .ledger-table { margin-top: 9px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .ledger-table div { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; min-height: 54px; padding: 0 16px; border-top: 1px solid var(--line); font-size: 9px; } .ledger-table div:first-child { border-top: 0; } .ledger-table span { color: var(--muted); } .ledger-table b { color: var(--teal); } .ledger-table .ledger-out { color: var(--soft); } .rights-total { color: var(--muted); font-size: 10px; } .rights-total b { margin-left: 6px; color: var(--teal); font: 400 22px var(--display); } .rights-panel { display: grid; gap: 16px; } .rights-row { display: grid; grid-template-columns: 1fr 60px 1.3fr; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 5px; } .rights-row strong, .rights-row span { display: block; } .rights-row span { color: var(--muted); font-size: 9px; } .rights-row output { color: var(--copper); font: 400 24px var(--display); } .rights-row input { width: 100%; accent-color: var(--copper); } .rights-snapshot { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding-top: 7px; } .rights-snapshot span { color: var(--muted); font-size: 9px; } .rights-snapshot strong { color: var(--teal); font-size: 10px; } .analytics-panel { display: grid; grid-template-columns: .45fr 1.55fr; gap: 28px; align-items: center; min-height: 360px; } .analytics-panel > div strong { display: block; margin: 15px 0 8px; color: var(--copper); font: 400 42px var(--display); } .analytics-panel > div small { color: var(--teal); font-size: 9px; } .analytics-bars { width: 100%; height: 250px; } .analytics-bars rect { fill: var(--copper); opacity: .62; transition: y .35s ease,height .35s ease,fill .35s ease; } .settings-list article { grid-template-columns: 1fr auto; } .studio-dialog { width: min(680px,calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 0; overflow: auto; border: 1px solid rgba(223,151,103,.45); border-radius: 10px; background: #0c0f0d; color: var(--bone); box-shadow: 0 40px 120px rgba(0,0,0,.72); } .studio-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(8px); } .studio-dialog-card { display: grid; gap: 20px; padding: 25px; } .studio-dialog-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; } .studio-dialog-head span { color: var(--copper); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; } .studio-dialog-head h2 { margin: 5px 0 0; font: 400 35px var(--display); } .studio-dialog-head > button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--bone); font-size: 19px; cursor: pointer; } .release-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; } .release-steps button { min-height: 38px; border: 1px solid var(--line); border-radius: 4px; background: #090b0a; color: var(--muted); font-size: 8px; cursor: pointer; } .release-steps button.active { border-color: var(--copper); color: var(--bone); background: rgba(223,151,103,.08); } .release-step { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 210px; align-content: start; } .release-step label, .payout-dialog label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; } .release-step label:first-child { grid-column: 1/-1; } .dialog-check { grid-template-columns: auto 1fr !important; align-items: center; color: var(--soft) !important; } .dialog-check input { width: auto; accent-color: var(--copper); } .dialog-explainer { grid-column: 1/-1; padding: 15px; border: 1px solid var(--line); background: var(--surface); } .dialog-explainer p { margin: 5px 0 0; color: var(--muted); font-size: 10px; } .dialog-review { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); } .dialog-review span, .dialog-review strong { padding: 12px; border-top: 1px solid var(--line); font-size: 9px; } .dialog-review span:nth-child(-n+2),.dialog-review strong:nth-child(-n+2) { border-top: 0; } .dialog-review span { color: var(--muted); } .studio-dialog-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; } .studio-dialog-actions span { text-align: center; color: var(--muted); font-size: 9px; } .payout-dialog { width: min(500px,calc(100% - 32px)); } .payout-dialog .studio-dialog-card { grid-template-columns: 1fr; } .studio-toast { position: fixed; left: 50%; bottom: 25px; z-index: 1000; max-width: min(460px,calc(100% - 30px)); padding: 12px 16px; border: 1px solid rgba(88,185,176,.5); border-radius: 6px; background: rgba(11,14,12,.96); color: var(--bone); font-size: 10px; opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: opacity .25s ease,transform .25s ease; } .studio-toast.show { opacity: 1; transform: translate(-50%,0); } @keyframes studio-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes metric-flash { 0% { color: var(--copper); transform: translateY(-2px); } 100% { color: inherit; transform: none; } } @media (max-width: 980px) { .studio-hero-grid { grid-template-columns: 1fr; align-items: start; } .studio-demo-shell { grid-template-columns: 180px minmax(0,1fr); } .studio-kpis { grid-template-columns: 1fr 1fr; } .studio-overview-grid, .studio-overview-bottom, .audience-layout, .store-demo-grid, .message-layout, .analytics-panel { grid-template-columns: 1fr; } .release-board { grid-template-columns: 1fr; } } @media (max-width: 760px) { .hero-stage { height: 520px; } .playlist-player-row { grid-template-columns: 42px 1fr auto 34px !important; } .audio-rotation { overflow-x: auto; grid-template-columns: repeat(4,minmax(88px,1fr)); padding-bottom: 2px; } .cinematic-player .sound-meta strong { font-size: 14px; } .sound-meta strong em { display: block; margin: 4px 0 0; } .studio-demo-page { padding-top: 22px; } .studio-demo-shell { display: grid; grid-template-columns: 1fr; } .studio-demo-shell .studio-side { display: block; padding: 12px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); } .studio-side-brand { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 4px 10px; margin-bottom: 8px; } .studio-side-brand small { margin: 0; } .studio-side-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; } .studio-side-nav button { flex: 0 0 auto; width: auto; padding: 9px 12px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 4px; white-space: nowrap; } .studio-side-nav button.active { border-left-color: transparent; border-bottom-color: var(--copper); } .studio-demo-shell .studio-main { padding: 14px; } .studio-demo-heading { display: grid; align-items: start; } .studio-heading-actions { display: grid; grid-template-columns: 1fr auto; width: 100%; } .range-switch { width: 100%; } .range-switch button { flex: 1; } .studio-demo-banner { align-items: start; display: grid; } .studio-kpis { grid-template-columns: 1fr 1fr; } .studio-kpis strong { font-size: 23px; } .studio-overview-grid, .studio-overview-bottom, .audience-layout, .store-demo-grid, .message-layout, .wallet-grid, .analytics-panel { grid-template-columns: 1fr; } .readiness-list { grid-template-columns: 1fr; } .catalog-toolbar { display: grid; } .catalog-filters { justify-self: start; } .catalog-table { overflow-x: auto; } .catalog-row { min-width: 680px; } .release-board { grid-template-columns: 1fr; } .release-detail-panel { display: grid; } .campaign-list article { grid-template-columns: 1fr auto; } .campaign-list article > strong { grid-column: 1/-1; grid-row: 2; } .rights-row { grid-template-columns: 1fr auto; } .rights-row input { grid-column: 1/-1; } .rights-snapshot { grid-template-columns: 1fr; } .studio-view-heading { display: grid; align-items: start; } .analytics-modes { overflow-x: auto; max-width: 100%; } .studio-dialog-card { padding: 18px; } .release-steps { overflow-x: auto; grid-template-columns: repeat(4,minmax(90px,1fr)); } .release-step { grid-template-columns: 1fr; } .release-step label:first-child { grid-column: auto; } .dialog-explainer,.dialog-review { grid-column: auto; } } @media (max-width: 430px) { .studio-kpis { grid-template-columns: 1fr; } .studio-heading-actions { grid-template-columns: 1fr; } .studio-create-button { width: 100%; } .store-products article { grid-template-columns: 1fr auto; } .store-products button { grid-column: 1/-1; text-align: left; } .studio-dialog-actions { grid-template-columns: 1fr 1fr; } .studio-dialog-actions span { grid-column: 1/-1; grid-row: 1; } } } /* VibraMusic 1.3.1 — segmented musical-note mobile navigation */ .menu-toggle { color: var(--copper); isolation: isolate; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; } .menu-toggle:hover, .menu-toggle:focus-visible, .menu-toggle[aria-expanded="true"] { border-color: rgba(243,173,118,.92); background: rgba(231,154,98,.075); box-shadow: 0 0 24px rgba(231,154,98,.11); } .menu-toggle .menu-note-piece { position: absolute; display: block; background: linear-gradient(135deg, #f3ad76 0%, #d97c49 100%); box-shadow: 0 0 9px rgba(231,154,98,.18); transform-origin: center; transition: top .26s cubic-bezier(.2,.8,.2,1), left .26s cubic-bezier(.2,.8,.2,1), width .26s cubic-bezier(.2,.8,.2,1), height .26s cubic-bezier(.2,.8,.2,1), border-radius .22s ease, transform .26s cubic-bezier(.2,.8,.2,1), opacity .16s ease; } .menu-toggle .note-flag { top: 10px; left: 20px; width: 14px; height: 3px; border-radius: 999px; transform: rotate(20deg); } .menu-toggle .note-stem { top: 15px; left: 18px; width: 3px; height: 14px; border-radius: 999px; } .menu-toggle .note-head { top: 28px; left: 9px; width: 12px; height: 8px; border-radius: 52% 48% 52% 48%; transform: rotate(-18deg); } .menu-toggle[aria-expanded="true"] .note-flag, .menu-toggle[aria-expanded="true"] .note-stem { top: 21px; left: 12px; width: 22px; height: 2px; border-radius: 999px; } .menu-toggle[aria-expanded="true"] .note-flag { transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .note-stem { transform: rotate(-45deg); } .menu-toggle[aria-expanded="true"] .note-head { top: 19px; left: 19px; width: 8px; height: 8px; opacity: 0; transform: rotate(18deg) scale(.25); } /* Win over the legacy nth-child hamburger positions during the transition. */ .menu-toggle .menu-note-piece.note-flag { top: 10px; } .menu-toggle .menu-note-piece.note-stem { top: 15px; } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-flag, .menu-toggle[aria-expanded="true"] .menu-note-piece.note-stem { top: 21px; opacity: 1; } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-head { top: 19px; opacity: 0; transform: rotate(18deg) scale(.25); } /* VibraMusic 1.4 - live stage energy */ .cinematic-shell { --signal-hot: #ffb47d; --signal-soft: rgba(231,154,98,.24); } .cinematic-shell::before, .cinematic-shell::after { content: ""; position: absolute; top: -26%; z-index: -1; width: 21vw; min-width: 250px; height: 112%; pointer-events: none; opacity: .42; filter: blur(8px); mix-blend-mode: screen; transform-origin: 50% 0; } .cinematic-shell::before { left: 38%; background: linear-gradient(180deg, rgba(255,183,127,.19), rgba(231,154,98,.045) 58%, transparent 86%); clip-path: polygon(45% 0, 58% 0, 100% 100%, 0 100%); transform: rotate(8deg); animation: vibra-spotlight-left 14s ease-in-out infinite alternate; } .cinematic-shell::after { right: -2%; background: linear-gradient(180deg, rgba(255,209,168,.14), rgba(231,154,98,.035) 56%, transparent 88%); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); transform: rotate(-13deg); animation: vibra-spotlight-right 16s ease-in-out -5s infinite alternate; } .cinematic-stage-bg img { filter: saturate(.94) contrast(1.12) brightness(.9); } .cinematic-stage-bg::after { background: radial-gradient(ellipse 48% 58% at 76% 43%, rgba(230,130,72,.12), transparent 70%), linear-gradient(90deg, #070908 0%, rgba(7,9,8,.95) 25%, rgba(7,9,8,.55) 43%, rgba(7,9,8,.08) 72%, rgba(7,9,8,.45) 100%), linear-gradient(0deg, rgba(7,9,8,.94) 0%, transparent 34%, rgba(7,9,8,.23) 100%); } .cinematic-light { opacity: .9; background: radial-gradient(circle 30vw at var(--pointer-x) var(--pointer-y), rgba(255,174,113,.25), transparent 68%), radial-gradient(circle 20vw at 78% 78%, rgba(231,154,98,.11), transparent 72%); } .cinematic-shell .launch-hero::before { content: ""; position: absolute; left: 29%; right: -8%; top: 47%; z-index: 1; height: 58px; pointer-events: none; opacity: .47; background: linear-gradient(180deg, transparent calc(50% - .5px), rgba(255,180,122,.68) 50%, transparent calc(50% + .5px)), repeating-linear-gradient(90deg, transparent 0 8px, rgba(231,154,98,.34) 8px 9px, transparent 9px 15px); background-size: 100% 100%, 220px 46%; background-position: 0 0, 0 50%; background-repeat: no-repeat, repeat-x; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 87%, transparent); transform: rotate(-4deg) skewX(-12deg); animation: vibra-signal-drift 8s linear infinite; } .cinematic-shell .launch-copy, .cinematic-shell .hero-stage { position: relative; } .cinematic-shell .launch-copy { z-index: 5; } .cinematic-shell .hero-stage { z-index: 3; } .artist-card::before, .artist-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s ease, transform .65s cubic-bezier(.2,.8,.2,1); } .artist-card::before { background: linear-gradient(118deg, transparent 12%, rgba(255,229,203,.16) 40%, transparent 57%); transform: translateX(-45%); } .artist-card::after { inset: 1px; border: 1px solid rgba(255,194,147,.26); box-shadow: inset 0 0 44px rgba(231,154,98,.08); } .artist-float-left .artist-card { transform: rotateY(3deg) rotateZ(-.45deg); } .artist-float-center .artist-card { transform: translateZ(12px); } .artist-float-right .artist-card { transform: rotateY(-3deg) rotateZ(.45deg); } .artist-card:hover, .artist-card:focus-visible, .artist-card.is-active { transform: translateY(-9px) translateZ(24px) rotateY(0) rotateZ(0) scale(1.012); border-color: rgba(255,180,125,.98); box-shadow: 0 58px 130px rgba(0,0,0,.75), 0 0 0 1px rgba(255,205,167,.1), 0 0 52px rgba(231,154,98,.17); } .artist-card:hover::before, .artist-card:focus-visible::before, .artist-card.is-active::before { opacity: 1; transform: translateX(45%); } .artist-card:hover::after, .artist-card:focus-visible::after, .artist-card.is-active::after { opacity: 1; } .hero-stage:hover .artist-card:not(:hover):not(:focus-visible):not(.is-active) { filter: brightness(.82) saturate(.86); } .portrait-whisper { z-index: 3; } .button-primary { position: relative; overflow: hidden; isolation: isolate; } .button-primary::after { content: ""; position: absolute; top: -80%; left: -38%; z-index: -1; width: 28%; height: 260%; background: rgba(255,255,255,.32); transform: rotate(24deg) translateX(-180%); transition: transform .62s cubic-bezier(.2,.8,.2,1); } .button-primary:hover::after, .button-primary:focus-visible::after { transform: rotate(24deg) translateX(620%); } .cinematic-player { overflow: hidden; border-color: rgba(255,180,125,.46); background: linear-gradient(112deg, rgba(5,7,6,.94), rgba(16,13,10,.88)); box-shadow: 0 30px 90px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 42px rgba(231,154,98,.055); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .cinematic-player::before { width: 104px; height: 2px; background: linear-gradient(90deg, var(--signal-hot), transparent); box-shadow: 0 0 16px rgba(255,180,125,.42); } .cinematic-player::after { content: ""; position: absolute; top: 0; bottom: 0; left: -22%; width: 16%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,191,143,.11), rgba(255,228,205,.24), transparent); transform: skewX(-16deg); } .cinematic-player.is-playing { border-color: rgba(255,181,125,.78); box-shadow: 0 34px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.045) inset, 0 0 54px rgba(231,154,98,.13); } .cinematic-player.is-playing::after { opacity: 1; animation: vibra-player-scan 3.8s ease-in-out infinite; } .cinematic-player.is-playing .player-button { animation: vibra-player-pulse 1.8s ease-in-out infinite; } .audio-rotation button { transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease; } .audio-rotation button:hover, .audio-rotation button:focus-visible { transform: translateY(-2px); } .launch-proof-rail { overflow: hidden; background: linear-gradient(90deg, rgba(231,154,98,.035), transparent 35%, transparent 66%, rgba(231,154,98,.025)), #080a09; } .launch-proof-rail::after { content: ""; position: absolute; left: -20%; right: -20%; top: 50%; height: 1px; pointer-events: none; opacity: .34; background: linear-gradient(90deg, transparent, rgba(231,154,98,.18) 18%, var(--copper) 50%, rgba(231,154,98,.18) 82%, transparent); transform: translateX(-40%); animation: vibra-proof-signal 11s ease-in-out infinite; } .launch-proof-rail .launch-proof { position: relative; z-index: 1; } .launch-proof-rail .launch-proof div { transition: transform .28s ease, filter .28s ease; } .launch-proof-rail .launch-proof div:hover { transform: translateY(-3px); filter: brightness(1.15); } .manifesto { overflow: hidden; background: radial-gradient(circle at 4% 38%, rgba(231,154,98,.075), transparent 23%), linear-gradient(180deg, rgba(255,255,255,.008), transparent 40%); } .principles { position: relative; } .principles::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255,181,125,.85), rgba(231,154,98,.12) 58%, transparent); box-shadow: 0 0 18px rgba(231,154,98,.16); } .principle { position: relative; transition: transform .32s cubic-bezier(.2,.8,.2,1), background .32s ease, border-color .32s ease; } .principle::after { content: ""; position: absolute; left: 18px; top: 50%; width: 0; height: 1px; background: linear-gradient(90deg, var(--copper), transparent); box-shadow: 0 0 13px rgba(231,154,98,.28); transition: width .45s cubic-bezier(.2,.8,.2,1); } .principle:hover, .principle:focus-within { transform: translateX(8px); border-color: rgba(231,154,98,.36); background: linear-gradient(90deg, rgba(231,154,98,.045), transparent 72%); } .principle:hover::after, .principle:focus-within::after { width: 48px; } .principle > span, .principle > div { position: relative; z-index: 1; } .dashboard-frame, .money-card, .gate-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } .dashboard-frame:hover, .money-card:hover { transform: translateY(-5px); border-color: rgba(231,154,98,.32); box-shadow: 0 44px 110px rgba(0,0,0,.38), 0 0 45px rgba(231,154,98,.045); } .gate-card:hover { transform: translateY(-7px); background: linear-gradient(150deg, rgba(231,154,98,.065), rgba(231,154,98,.012)); box-shadow: 0 24px 60px rgba(0,0,0,.24); } .pilot-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 76% 45%, rgba(255,165,98,.17), transparent 31%), linear-gradient(110deg, transparent 45%, rgba(231,154,98,.025)), #0c0f0d; } .studio-demo-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 81% 45%, rgba(255,164,96,.16), transparent 29%), radial-gradient(circle at 5% 100%, rgba(231,154,98,.055), transparent 24%); } .studio-demo-hero::after { content: ""; position: absolute; right: 5%; bottom: 0; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,181,125,.74), transparent); box-shadow: 0 0 24px rgba(231,154,98,.18); } .studio-demo-shell { position: relative; border-color: rgba(255,183,129,.18); box-shadow: 0 54px 145px rgba(0,0,0,.48), 0 0 0 1px rgba(231,154,98,.035) inset; transition: border-color .4s ease, box-shadow .4s ease; } .studio-demo-shell::after { content: ""; position: absolute; top: 0; left: 20%; z-index: 5; width: 140px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--copper), transparent); box-shadow: 0 0 18px rgba(231,154,98,.22); animation: vibra-studio-edge 9s ease-in-out infinite alternate; } .studio-demo-shell:hover { border-color: rgba(255,183,129,.3); box-shadow: 0 60px 160px rgba(0,0,0,.53), 0 0 54px rgba(231,154,98,.035); } .studio-demo-panel, .studio-kpis article { transition: transform .26s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease; } .studio-demo-panel:hover, .studio-kpis article:hover { transform: translateY(-3px); border-color: rgba(231,154,98,.3); box-shadow: 0 18px 42px rgba(0,0,0,.2); } @keyframes vibra-spotlight-left { from { opacity: .28; transform: rotate(4deg) translateX(-4%); } to { opacity: .48; transform: rotate(11deg) translateX(5%); } } @keyframes vibra-spotlight-right { from { opacity: .24; transform: rotate(-16deg) translateX(4%); } to { opacity: .43; transform: rotate(-8deg) translateX(-5%); } } @keyframes vibra-signal-drift { from { background-position: 0 0, 0 50%; } to { background-position: 0 0, 220px 50%; } } @keyframes vibra-player-scan { 0%, 18% { left: -22%; opacity: 0; } 34% { opacity: 1; } 70%, 100% { left: 112%; opacity: 0; } } @keyframes vibra-player-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,180,125,.25); } 50% { box-shadow: 0 0 0 10px rgba(255,180,125,.075); } } @keyframes vibra-proof-signal { 0%, 12% { transform: translateX(-42%); opacity: 0; } 35%, 65% { opacity: .36; } 88%, 100% { transform: translateX(42%); opacity: 0; } } @keyframes vibra-studio-edge { from { left: 6%; opacity: .5; } to { left: 78%; opacity: 1; } } @media (max-width: 980px) { .cinematic-shell::before { left: 50%; } .cinematic-shell::after { right: -9%; } .cinematic-shell .launch-hero::before { left: 5%; right: 2%; top: 58%; opacity: .34; } .principles::before { left: 17px; } } @media (max-width: 760px) { .cinematic-shell::before, .cinematic-shell::after { opacity: .2; filter: blur(14px); } .cinematic-shell .launch-hero::before, .launch-proof-rail::after, .principles::before { display: none; } .cinematic-stage-bg::after { background: radial-gradient(ellipse 72% 48% at 66% 64%, rgba(230,130,72,.11), transparent 72%), linear-gradient(180deg, #070908 0%, rgba(7,9,8,.8) 28%, rgba(7,9,8,.16) 67%, rgba(7,9,8,.93) 100%), linear-gradient(90deg, rgba(7,9,8,.7), transparent 35%, rgba(7,9,8,.35)); } .artist-float-left .artist-card, .artist-float-center .artist-card, .artist-float-right .artist-card, .artist-card:hover, .artist-card:focus-visible, .artist-card.is-active { transform: none; } .artist-card::before { display: none; } .principle:hover, .principle:focus-within, .dashboard-frame:hover, .money-card:hover, .gate-card:hover, .studio-demo-panel:hover, .studio-kpis article:hover { transform: none; } .principle::after { left: 0; } .principle:hover::after, .principle:focus-within::after { width: 26px; } .studio-demo-shell::after { animation: none; left: 14px; width: 84px; } } @media (hover: none) { .hero-stage:hover .artist-card:not(:hover):not(:focus-visible):not(.is-active) { filter: none; } } @media (prefers-reduced-motion: reduce) { .cinematic-shell::before, .cinematic-shell::after, .cinematic-shell .launch-hero::before, .cinematic-player.is-playing::after, .cinematic-player.is-playing .player-button, .launch-proof-rail::after, .studio-demo-shell::after { animation: none !important; } .artist-float-left .artist-card, .artist-float-center .artist-card, .artist-float-right .artist-card, .artist-card:hover, .artist-card:focus-visible, .artist-card.is-active, .principle:hover, .principle:focus-within, .dashboard-frame:hover, .money-card:hover, .gate-card:hover, .studio-demo-panel:hover, .studio-kpis article:hover { transform: none !important; } } /* Keep 1.5.1 overrides last so they win over the historical launch layers above. */ .player-next { width: 44px; min-width: 44px; height: 44px; } @media (max-width: 760px) { .site-nav { background: #070908; box-shadow: 0 30px 70px rgba(0,0,0,.78); } .playlist-player-row { grid-template-columns: 46px minmax(0,1fr) auto 44px !important; } .player-next { width: 44px; height: 44px; } .role-tab { font-size: 11px; } } @media (max-width: 430px) { .playlist-player-row { grid-template-columns: 44px minmax(0,1fr) 44px !important; } } /* Final 1.6.2 command-center control sizing. */ .command-signal-rail .command-mobile-cta { white-space: nowrap; } .command-signal-rail .command-mobile-cta svg { width: 17px; min-width: 17px; height: 17px; flex: 0 0 17px; } /* VibraMusic 1.6.3 — responsive stage-energy effects */ .site-header::after, .site-header.is-scrolled::after { right: auto; width: calc(var(--vibra-scroll-progress, 0) * 100%); max-width: none; background: linear-gradient(90deg, rgba(231,154,98,.28), var(--copper) 76%, rgba(255,202,160,.95)); box-shadow: 0 0 12px rgba(231,154,98,.32); transition: width .08s linear; } .vibra-particle-field { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: .56; mix-blend-mode: screen; } .industry-room > .vibra-particle-field { z-index: 0; opacity: .34; } .industry-room::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: var(--room-light-opacity, 0); background: radial-gradient(circle 430px at var(--room-light-x, 48%) var(--room-light-y, 48%), color-mix(in srgb,var(--command-accent) 13%,transparent), transparent 72%); mix-blend-mode: screen; transition: opacity .32s ease, background .35s ease; } .industry-room-atmosphere { transform: scale(1.055) translate3d(0,var(--room-parallax,0px),0); transition: transform .12s linear; will-change: transform; } .command-center-frame::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: var(--command-light-opacity, 0); background: radial-gradient(circle 220px at var(--command-light-x, 50%) var(--command-light-y, 50%), color-mix(in srgb,var(--command-accent) 15%,transparent), transparent 72%), linear-gradient(112deg, transparent 32%, color-mix(in srgb,var(--command-accent) 4%,transparent) 50%, transparent 68%); mix-blend-mode: screen; transition: opacity .3s ease, background .35s ease; } .command-center-frame.is-role-pulsing::after { animation: vibra-role-pulse .72s cubic-bezier(.18,.72,.2,1); } .vibra-ripple-host { position: relative; overflow: hidden; isolation: isolate; } .vibra-ripple { position: absolute; z-index: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: vibra-control-ripple .62s ease-out forwards; } .vibra-ripple-host > :not(.vibra-ripple) { position: relative; z-index: 1; } body.vibra-audio-live .brand-mark i { animation: vibra-live-meter .52s ease-in-out infinite alternate; } body.vibra-audio-live .brand-mark i:nth-child(2) { animation-delay: -.26s; } body.vibra-audio-live .brand-mark i:nth-child(3) { animation-delay: -.41s; } body.vibra-audio-live .brand-mark i:nth-child(4) { animation-delay: -.14s; } body.vibra-audio-live .artist-card.is-active { box-shadow: 0 54px 130px rgba(0,0,0,.72), 0 0 calc(38px + var(--vibra-audio-pulse,0) * 22px) rgba(231,154,98,.18); } body.vibra-audio-live .command-signal-wave i { animation-duration: calc(.82s - var(--vibra-audio-pulse,0) * .18s); } body.vibra-audio-live .cinematic-player { border-color: rgba(255,184,132,.52); } @keyframes vibra-role-pulse { 0% { opacity: 0; transform: scale(.94); } 34% { opacity: .72; } 100% { opacity: var(--command-light-opacity,0); transform: scale(1.04); } } @keyframes vibra-control-ripple { to { opacity: 0; transform: scale(24); } } @keyframes vibra-live-meter { from { transform: scaleY(.55); filter: brightness(.92); } to { transform: scaleY(1.14); filter: brightness(1.28); } } @media (max-width: 760px) { .vibra-particle-field { opacity: .26; } .industry-room > .vibra-particle-field { opacity: .2; } .industry-room-atmosphere { will-change: auto; } .command-center-frame::after { background: radial-gradient(circle 170px at 50% 38%, color-mix(in srgb,var(--command-accent) 10%,transparent), transparent 74%); } } @media (prefers-reduced-motion: reduce) { .vibra-particle-field { display: none !important; } .industry-room::after, .command-center-frame::after { display: none !important; } .industry-room-atmosphere { transform: scale(1.02) !important; } .vibra-ripple { display: none !important; } body.vibra-audio-live .brand-mark i { animation: none !important; } } /* VibraMusic 1.7.0 — The Workshop */ .workshop { --workshop-accent: var(--copper); position: relative; isolation: isolate; overflow: hidden; padding: clamp(92px,10vw,148px) 0 clamp(86px,9vw,132px); border-block: 1px solid rgba(231,154,98,.16); background: #070807; } .workshop[data-workshop-step-active="build"] { --workshop-accent: var(--teal); } .workshop[data-workshop-step-active="credit"] { --workshop-accent: var(--lilac); } .workshop[data-workshop-step-active="release"] { --workshop-accent: #e5b36d; } .workshop::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(5,6,5,.24),rgba(5,6,5,.7) 48%,#070807 100%), radial-gradient(circle 390px at var(--workshop-light-x,50%) var(--workshop-light-y,55%),color-mix(in srgb,var(--workshop-accent) 10%,transparent),transparent 75%); opacity: .98; transition: background .35s ease; } .workshop-atmosphere { position: absolute; z-index: -3; inset: 0; overflow: hidden; } .workshop-atmosphere img { width: 100%; height: 100%; object-fit: cover; opacity: .56; filter: saturate(.84) contrast(1.03); transform: scale(1.035) translate3d(0,var(--workshop-parallax,0px),0); transition: transform .12s linear; will-change: transform; } .workshop-grain { position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } .workshop-inner { position: relative; z-index: 1; } .workshop-intro { max-width: 790px; margin-bottom: clamp(42px,5vw,68px); } .workshop-intro .eyebrow { color: var(--copper); } .workshop-intro h2 { max-width: 760px; margin: 16px 0 22px; color: var(--bone); font: 500 clamp(52px,7vw,100px)/.91 var(--ui); letter-spacing: -.066em; } .workshop-intro h2 em { color: var(--copper); font-family: var(--display); font-weight: 400; } .workshop-intro > p:not(.eyebrow) { max-width: 670px; margin: 0; color: #c8c2b9; font-size: clamp(15px,1.35vw,19px); line-height: 1.62; } .workshop-result { display: flex; align-items: center; gap: 13px; margin-top: 24px; color: var(--copper); font: 500 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .065em; text-transform: uppercase; } .workshop-result i { width: 34px; height: 1px; background: currentColor; box-shadow: 8px 0 18px rgba(231,154,98,.45); } .workshop-console { position: relative; border: 1px solid #4a4943; background: rgba(6,8,7,.91); box-shadow: 0 42px 120px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(15px); } .workshop-console::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid transparent; box-shadow: inset 0 0 48px color-mix(in srgb,var(--workshop-accent) 4%,transparent); transition: box-shadow .35s ease; } .workshop-lanes { display: grid; grid-template-columns: repeat(4,1fr); overflow: auto hidden; border-bottom: 1px solid #45453f; scrollbar-width: thin; scrollbar-color: var(--copper) transparent; } .workshop-lanes button { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-width: 190px; min-height: 72px; padding: 16px 20px; border: 0; border-right: 1px solid #3d3e39; background: rgba(10,12,11,.72); color: #b6b3ac; cursor: pointer; text-align: left; transition: color .22s ease,background .22s ease,box-shadow .22s ease; } .workshop-lanes button:last-child { border-right: 0; } .workshop-lanes button:hover,.workshop-lanes button:focus-visible { color: var(--bone); background: rgba(255,255,255,.035); outline: none; } .workshop-lanes button:focus-visible { box-shadow: inset 0 0 0 2px var(--workshop-accent); } .workshop-lanes button[aria-pressed="true"] { color: #0b0a08; background: var(--workshop-accent); } .workshop-lanes button span { font: 400 14px ui-monospace,SFMono-Regular,Consolas,monospace; } .workshop-lanes button strong { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; } .workshop-lanes button > i { width: 17px; height: 17px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .42; } .workshop-lanes button[aria-pressed="true"] > i { opacity: .9; box-shadow: 0 0 13px color-mix(in srgb,var(--workshop-accent) 55%,transparent); } .workshop-console-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,330px); } .workshop-session { min-width: 0; padding: clamp(24px,3.2vw,42px); } .workshop-session.is-changing .workshop-session-copy,.workshop-session.is-changing .workshop-wave { animation: workshop-content-in .42s cubic-bezier(.2,.76,.2,1); } .workshop-session-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .workshop-session-head > span,.workshop-focus-head > span,.workshop-constraint-head > span { color: #c6c1b9; font: 500 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .13em; text-transform: uppercase; } .workshop-session-head > strong { display: flex; align-items: center; gap: 9px; color: var(--workshop-accent); font: 500 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .11em; text-transform: uppercase; } .workshop-session-head > strong i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px color-mix(in srgb,currentColor 9%,transparent),0 0 16px currentColor; animation: workshop-led 1.4s ease-in-out infinite; } .workshop-wave { display: flex; align-items: center; gap: clamp(2px,.32vw,5px); height: 148px; margin: 8px 0 11px; overflow: hidden; border-block: 1px solid rgba(255,255,255,.035); } .workshop-wave > i { flex: 1 1 2px; max-width: 3px; height: 16px; background: var(--workshop-accent); box-shadow: 0 0 8px color-mix(in srgb,var(--workshop-accent) 25%,transparent); opacity: .82; transform-origin: center; animation: workshop-wave 1.18s ease-in-out infinite alternate; animation-delay: calc(var(--wave-index) * -37ms); } .workshop-wave > i:nth-child(3n) { height: 62px; } .workshop-wave > i:nth-child(4n) { height: 96px; opacity: 1; } .workshop-wave > i:nth-child(5n) { height: 42px; } .workshop-wave > i:nth-child(7n) { height: 120px; } .workshop-wave > i:nth-child(n+22) { background: color-mix(in srgb,var(--workshop-accent) 55%,var(--teal)); } .workshop-session-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 34px; align-items: end; } .workshop-session-copy h3 { max-width: 620px; margin: 0 0 13px; color: var(--bone); font: 500 clamp(28px,3.3vw,49px)/1.02 var(--ui); letter-spacing: -.045em; } .workshop-session-copy p { max-width: 620px; margin: 0; color: #aaa69f; font-size: 13px; line-height: 1.62; } .workshop-badge { display: inline-flex; align-items: center; min-height: 36px; margin-top: 22px; padding: 0 14px 0 38px; border: 1px solid color-mix(in srgb,var(--workshop-accent) 66%,#393b37); color: var(--workshop-accent); font: 600 9px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .11em; text-transform: uppercase; background: radial-gradient(circle at 20px 50%,currentColor 0 2px,transparent 3px); } .workshop-reference { display: grid; justify-items: center; gap: 10px; min-width: 124px; color: var(--workshop-accent); } .workshop-reference > span { color: #aaa69f; font: 500 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; text-transform: uppercase; } .workshop-reference button { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid currentColor; border-radius: 50%; background: #0a0c0a; color: inherit; cursor: pointer; transition: transform .24s ease,background .24s ease,box-shadow .24s ease; } .workshop-reference button:hover,.workshop-reference button:focus-visible { transform: scale(1.055); background: color-mix(in srgb,var(--workshop-accent) 11%,#0a0c0a); box-shadow: 0 0 30px color-mix(in srgb,var(--workshop-accent) 14%,transparent); outline: none; } .workshop-reference button[aria-pressed="true"] { background: var(--workshop-accent); color: #080907; } .workshop-reference svg { width: 27px; height: 27px; fill: currentColor; } .workshop-reference > i { width: 74px; height: 8px; background: repeating-linear-gradient(90deg,var(--workshop-accent) 0 2px,transparent 2px 5px); opacity: .7; } .workshop-focus { padding: 27px 25px 25px; border-left: 1px solid #45453f; background: rgba(10,12,11,.82); } .workshop-focus-head { display: flex; align-items: center; justify-content: space-between; } .workshop-focus-head > i { width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 11px var(--lilac); } .workshop-focus output { display: block; margin: 24px 0 16px; color: var(--bone); font: 300 clamp(42px,5vw,66px)/.9 var(--ui); letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .workshop-focus-button { width: 100%; min-height: 48px; border: 1px solid var(--workshop-accent); background: transparent; color: var(--workshop-accent); font: 700 10px var(--ui); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .2s ease,background .2s ease; } .workshop-focus-button:hover,.workshop-focus-button:focus-visible,.workshop-focus-button[aria-pressed="true"] { color: #090a08; background: var(--workshop-accent); outline: none; } .workshop-focus-progress { height: 3px; margin-top: 20px; overflow: hidden; background: #373a36; } .workshop-focus-progress i { display: block; width: var(--focus-progress,0%); height: 100%; background: var(--teal); box-shadow: 0 0 8px var(--teal); transition: width .35s linear; } .workshop-focus-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #6f716b; font: 8px ui-monospace,SFMono-Regular,Consolas,monospace; } .workshop-constraint-head { display: flex; justify-content: space-between; align-items: center; margin: 29px 0 12px; } .workshop-constraint-head button { min-width: 44px; min-height: 32px; padding: 0; border: 0; background: transparent; color: #777973; font: 600 8px var(--ui); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; } .workshop-constraint-head button:hover,.workshop-constraint-head button:focus-visible { color: var(--bone); outline: 1px solid var(--line); } .workshop-constraints { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .workshop-constraints button { min-height: 43px; padding: 9px; border: 1px solid #494b46; background: transparent; color: #b2afa8; font: 500 8px var(--ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .workshop-constraints button:hover,.workshop-constraints button:focus-visible { border-color: var(--workshop-accent); color: var(--bone); outline: none; } .workshop-constraints button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: rgba(88,185,176,.06); box-shadow: inset 0 0 20px rgba(88,185,176,.04); } .workshop-focus > p { margin: 14px 0 0; color: #85857f; font-size: 10px; line-height: 1.45; } .workshop-status { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #45453f; } .workshop-status span { display: grid; grid-template-columns: 13px 1fr 6px; align-items: center; gap: 11px; min-height: 61px; padding: 12px 17px; border-right: 1px solid #393b37; color: #b9b6af; font: 500 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .07em; text-transform: uppercase; } .workshop-status span:last-child { border-right: 0; } .workshop-status span > i { width: 12px; height: 12px; border: 1px solid var(--copper); transform: rotate(45deg); } .workshop-status span:nth-child(2) > i,.workshop-status span:nth-child(4) > i { border-color: var(--lilac); border-radius: 50%; } .workshop-status span > b { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px var(--teal); } @keyframes workshop-content-in { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes workshop-led { 50% { opacity: .45; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 5%,transparent),0 0 7px currentColor; } } @keyframes workshop-wave { from { transform: scaleY(.3); opacity: .42; } to { transform: scaleY(1); opacity: .98; } } @media (max-width: 980px) { .workshop-console-grid { grid-template-columns: 1fr; } .workshop-focus { border-top: 1px solid #45453f; border-left: 0; } .workshop-focus output { font-size: 56px; } .workshop-status { grid-template-columns: 1fr 1fr; } .workshop-status span:nth-child(2) { border-right: 0; } .workshop-status span:nth-child(-n+2) { border-bottom: 1px solid #393b37; } } @media (max-width: 760px) { .workshop { padding-block: 82px 76px; } .workshop::before { background: linear-gradient(180deg,rgba(5,6,5,.25),rgba(5,6,5,.77) 32%,#070807 70%); } .workshop-atmosphere { height: 670px; } .workshop-atmosphere img { object-position: 50% top; opacity: .48; will-change: auto; } .workshop-intro { margin-bottom: 38px; } .workshop-intro h2 { max-width: 470px; margin-top: 13px; font-size: clamp(48px,14vw,68px); line-height: .93; } .workshop-intro > p:not(.eyebrow) { font-size: 14px; line-height: 1.56; } .workshop-result { align-items: flex-start; font-size: 9px; line-height: 1.5; } .workshop-result i { flex: 0 0 24px; margin-top: 6px; } .workshop-console { margin-inline: -5px; backdrop-filter: blur(9px); } .workshop-lanes { display: flex; scroll-snap-type: x proximity; } .workshop-lanes button { flex: 0 0 132px; min-width: 132px; min-height: 68px; grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 10px 9px; text-align: center; scroll-snap-align: start; } .workshop-lanes button > i { display: none; } .workshop-session { padding: 24px 18px 26px; } .workshop-session-head { align-items: flex-start; } .workshop-wave { height: 96px; margin-block: 6px 15px; } .workshop-wave > i:nth-child(4n) { height: 76px; } .workshop-wave > i:nth-child(7n) { height: 88px; } .workshop-session-copy { grid-template-columns: 1fr; gap: 24px; } .workshop-session-copy h3 { font-size: clamp(31px,9.2vw,43px); } .workshop-session-copy p { font-size: 12px; } .workshop-reference { grid-template-columns: 1fr auto; justify-items: start; align-items: center; min-width: 0; border-top: 1px solid #292c28; padding-top: 17px; } .workshop-reference button { grid-column: 2; grid-row: 1/3; width: 58px; height: 58px; } .workshop-reference > i { width: 95px; } .workshop-focus { padding: 24px 18px 27px; } .workshop-focus output { margin-top: 20px; font-size: 54px; } .workshop-focus-button { min-height: 52px; } .workshop-constraint-head button { min-width: 48px; min-height: 44px; } .workshop-constraints button { min-height: 48px; } .workshop-status span { min-height: 67px; padding: 10px 12px; font-size: 7px; line-height: 1.35; } } @media (max-width: 390px) { .workshop-lanes button { flex-basis: 120px; min-width: 120px; } .workshop-session { padding-inline: 14px; } .workshop-constraints { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .workshop-atmosphere img { transform: none !important; } .workshop-session-head > strong i,.workshop-wave > i { animation: none !important; } .workshop-console::after { transition: none !important; } .workshop-focus-progress i { transition: none !important; } } /* VibraMusic 1.8 — founding artist portal + artist blockchain explainer */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .artist-application-page { background: #070908; } .brand-wordmark { font: 650 18px/1 var(--ui); letter-spacing: .34em; color: var(--bone); } .brand > .brand-mark { display: none; } .application-portal { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px,8vw,132px) 0 0; border-bottom: 1px solid #363832; background: #080a09; } .application-atmosphere { position: absolute; z-index: -2; inset: 0 0 auto; height: min(880px,84vw); overflow: hidden; } .application-atmosphere::after { content: ""; position: absolute; inset: 0; background: rgba(6,8,7,.78); } .application-atmosphere img { width: 100%; height: 100%; object-fit: cover; object-position: center 31%; filter: grayscale(.4) contrast(1.15) saturate(.65); opacity: .56; transform: scale(1.03); } .application-beam { position: absolute; z-index: 1; display: block; height: 1px; background: var(--copper); opacity: .34; transform-origin: left; } .application-beam-one { width: 48vw; left: -7vw; top: 60%; transform: rotate(-7deg); } .application-beam-two { width: 34vw; right: -5vw; top: 38%; transform: rotate(11deg); } .application-portal-grid { display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); gap: clamp(48px,6vw,96px); align-items: center; } .application-hero-copy { max-width: 650px; padding-bottom: 20px; } .application-hero-copy h1 { max-width: 620px; margin: 0; color: var(--bone); font: 400 clamp(62px,6.6vw,104px)/.88 var(--display); letter-spacing: -.058em; text-wrap: balance; } .application-deck { max-width: 590px; margin: 28px 0 0; color: #c2bdb4; font-size: clamp(16px,1.5vw,20px); line-height: 1.62; } .application-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px 30px; margin-top: 36px; } .application-hero-actions .button { min-height: 58px; padding-inline: 25px; } .application-text-link { color: var(--copper); font: 700 10px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-block: 13px 7px; } .application-text-link:hover { color: var(--bone); } .application-hero-proof { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 41px; color: #a39f97; font: 600 9px var(--ui); letter-spacing: .08em; text-transform: uppercase; } .application-hero-proof span { display: inline-flex; align-items: center; gap: 8px; } .application-hero-proof i { width: 6px; height: 6px; border: 1px solid var(--teal); transform: rotate(45deg); box-shadow: 0 0 10px rgba(88,185,176,.55); } .application-console { position: relative; min-width: 0; border: 1px solid #66503e; background: rgba(11,13,12,.96); box-shadow: 0 42px 110px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.018); } .application-console::before { content: ""; display: block; height: 2px; background: var(--copper); opacity: .82; } .application-console-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 58px; padding: 12px clamp(20px,2.8vw,34px); border-bottom: 1px solid #30332f; } .application-console-head > div { display: grid; gap: 4px; } .application-console-head span,.application-console-head strong,.application-live-signal { font: 600 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; text-transform: uppercase; } .application-console-head span { color: #7d7f79; } .application-console-head strong { color: #c8c4bc; } .application-live-signal { display: inline-flex; align-items: center; gap: 8px; color: var(--teal) !important; } .application-live-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(88,185,176,.08),0 0 12px rgba(88,185,176,.65); animation: application-signal 1.8s ease-in-out infinite; } .application-progress { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: center; padding: 22px clamp(20px,2.8vw,34px) 19px; border-bottom: 1px solid #30332f; } .application-progress > i { height: 1px; background: #383b36; } .application-progress button { min-height: 50px; padding: 0; border: 0; background: transparent; color: #777a74; text-align: center; cursor: pointer; } .application-progress button span { display: block; color: inherit; font: 400 18px/1 var(--display); } .application-progress button strong { display: block; margin-top: 7px; font: 700 8px var(--ui); letter-spacing: .13em; text-transform: uppercase; } .application-progress button:hover,.application-progress button:focus-visible { color: var(--bone); outline: none; } .application-progress button.is-active { color: var(--copper); } .application-progress button.is-complete { color: var(--teal); } .application-form.application-form-staged { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .application-step { min-width: 0; margin: 0; padding: clamp(26px,3.5vw,46px) clamp(20px,4vw,48px) clamp(25px,3vw,38px); border: 0; } .vibra-motion .application-step { display: none; } .vibra-motion .application-step.is-active { display: block; animation: application-step-in .4s cubic-bezier(.2,.74,.2,1); } .application-step-count { margin: 0 0 6px; color: var(--copper); font: 600 9px var(--ui); letter-spacing: .12em; text-transform: uppercase; } .application-step h2 { margin: 0; color: var(--bone); font: 400 clamp(31px,3.1vw,43px)/1 var(--display); letter-spacing: -.035em; } .application-step-intro { max-width: 620px; margin: 11px 0 25px; color: #97948d; font-size: 12px; line-height: 1.58; } .application-step .field { margin-bottom: 17px; } .application-step .field label { display: block; margin-bottom: 8px; color: #c5c0b7; font-size: 10px; letter-spacing: .02em; } .application-step .field input,.application-step .field select,.application-step .field textarea { min-height: 48px; width: 100%; border: 1px solid #464943; border-radius: 0; background: #0b0d0c; color: var(--bone); padding: 13px 15px; font: 400 13px var(--ui); } .application-step .field textarea { min-height: 128px; resize: vertical; line-height: 1.5; } .application-step .field input::placeholder,.application-step .field textarea::placeholder { color: #5f625d; opacity: 1; } .application-step .field input:focus,.application-step .field select:focus,.application-step .field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(231,154,98,.1); outline: none; } .application-step .form-row { grid-template-columns: 1fr 1fr; gap: 14px; } .field-note { display: block; margin-top: 6px; color: #6f726d; font: 500 8px ui-monospace,SFMono-Regular,Consolas,monospace; text-align: right; } .application-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 9px; } .application-step-actions > span { color: #686b66; font: 500 8px var(--ui); letter-spacing: .05em; text-transform: uppercase; } .application-next { min-width: 155px; min-height: 48px; border: 1px solid var(--copper); background: transparent; color: var(--copper); } .application-next:hover,.application-next:focus-visible { background: var(--copper); color: #15100c; } .application-back { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: #a8a49c; font: 700 9px var(--ui); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .application-back:hover { color: var(--bone); } .application-review { margin: 0 0 21px; border-block: 1px solid #353833; } .application-review div { display: grid; grid-template-columns: 118px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #292c28; } .application-review div:last-child { border-bottom: 0; } .application-review dt { color: #737670; font: 600 8px var(--ui); letter-spacing: .1em; text-transform: uppercase; } .application-review dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #cac6bd; font-size: 11px; } .application-consent { padding: 16px; border: 1px solid #373a35; background: #0a0c0b; } .application-consent span { color: #a5a199; font-size: 10px; line-height: 1.55; } .application-submit-actions .button-primary { min-height: 50px; } .application-trust { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #30332f; } .application-trust span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; padding: 10px; border-right: 1px solid #30332f; color: #918e87; font: 600 7px/1.35 var(--ui); letter-spacing: .07em; text-transform: uppercase; text-align: left; } .application-trust span:last-child { border-right: 0; } .application-trust svg { flex: 0 0 20px; width: 20px; fill: none; stroke: var(--copper); stroke-width: 1.4; } .application-result { min-height: 570px; padding: clamp(44px,6vw,84px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .application-result-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 30px; border: 1px solid var(--teal); color: var(--teal); font-size: 25px; box-shadow: 0 0 35px rgba(88,185,176,.12); } .application-result h2 { max-width: 550px; margin: 0; color: var(--bone); font: 400 clamp(40px,4.5vw,64px)/.98 var(--display); letter-spacing: -.04em; } .application-result > p:not(.eyebrow) { max-width: 520px; margin: 19px 0 30px; color: #aaa69e; line-height: 1.65; } .application-console > .form-error { margin: 20px 24px 0; } .cohort-shapes { margin-top: clamp(80px,9vw,132px); padding: 31px 0 46px; border-top: 1px solid #363832; } .cohort-shapes > .eyebrow { margin-bottom: 25px; } .cohort-shapes-grid { display: grid; grid-template-columns: repeat(4,1fr); } .cohort-shapes article { display: grid; grid-template-columns: 38px 1fr; gap: 15px; min-width: 0; padding: 4px clamp(18px,2vw,31px) 2px 0; border-right: 1px solid #343731; } .cohort-shapes article + article { padding-left: clamp(18px,2vw,31px); } .cohort-shapes article:last-child { border-right: 0; padding-right: 0; } .cohort-shapes article > span { color: var(--teal); font: 400 18px var(--display); } .cohort-shapes h2 { margin: 0 0 8px; color: var(--bone); font: 400 20px var(--display); } .cohort-shapes p { margin: 0; color: #8d8a83; font-size: 11px; line-height: 1.55; } .artist-blockchain { position: relative; isolation: isolate; overflow: hidden; padding: clamp(92px,10vw,150px) 0 clamp(82px,9vw,126px); background: #080b0a; border-bottom: 1px solid #30342f; } .artist-blockchain::before,.artist-blockchain::after { content: ""; position: absolute; z-index: -1; width: 1px; height: 68%; top: 18%; background: rgba(88,185,176,.12); transform: rotate(23deg); } .artist-blockchain::before { left: 17%; } .artist-blockchain::after { right: 16%; transform: rotate(-23deg); } .artist-blockchain-grid { position: absolute; z-index: -2; inset: 0; opacity: .28; background: #080b0a; } .blockchain-heading { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.55fr); gap: clamp(45px,7vw,100px); align-items: end; margin-bottom: 50px; } .blockchain-heading h2 { max-width: 980px; margin: 0; color: var(--bone); font: 400 clamp(48px,5.4vw,78px)/.94 var(--display); letter-spacing: -.052em; text-wrap: balance; } .blockchain-heading-copy p { margin: 0 0 23px; color: #aaa79f; font-size: 14px; line-height: 1.65; } .no-token-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--copper); color: var(--copper); font: 700 9px var(--ui); letter-spacing: .14em; text-transform: uppercase; } .blockchain-console { display: grid; grid-template-columns: minmax(285px,.72fr) minmax(370px,1fr) minmax(270px,.68fr); border: 1px solid #3b403a; background: rgba(7,10,8,.94); box-shadow: 0 38px 100px rgba(0,0,0,.32); } .blockchain-flow { border-right: 1px solid #3b403a; } .blockchain-flow button { position: relative; display: grid; grid-template-columns: 40px 16px 1fr; column-gap: 12px; width: 100%; min-height: 124px; padding: 22px 22px 20px; border: 0; border-bottom: 1px solid #30342f; background: transparent; color: #8e918b; text-align: left; cursor: pointer; } .blockchain-flow button:last-child { border-bottom: 0; } .blockchain-flow button:hover,.blockchain-flow button:focus-visible { color: var(--bone); background: rgba(255,255,255,.018); outline: none; } .blockchain-flow button.is-active { color: var(--bone); background: rgba(231,154,98,.045); } .blockchain-flow button > span { grid-row: 1/3; color: var(--copper); font: 400 31px/.9 var(--display); } .blockchain-flow button > i { width: 10px; height: 10px; margin-top: 3px; border: 1px solid #555a53; transform: rotate(45deg); } .blockchain-flow button.is-active > i { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 13px rgba(88,185,176,.7); } .blockchain-flow button > strong { font: 700 9px var(--ui); letter-spacing: .12em; text-transform: uppercase; } .blockchain-flow button > small { grid-column: 3; margin-top: 8px; color: #858780; font-size: 10px; line-height: 1.55; } .blockchain-flow button.is-active > small { color: #b3b0a8; } .blockchain-signal { display: grid; grid-template-rows: auto minmax(240px,1fr) auto auto; min-width: 0; border-right: 1px solid #3b403a; } .signal-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 55px; padding: 12px 20px; border-bottom: 1px solid #30342f; color: #73766f; font: 600 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .1em; text-transform: uppercase; } .signal-head strong { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); } .signal-head strong i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); } .signal-stage { position: relative; display: grid; grid-template-columns: 95px 1fr 112px; align-items: center; gap: 0; padding: 38px 28px 26px; overflow: hidden; } .signal-stage::before { content: ""; position: absolute; inset: 18% 8%; border-block: 1px solid rgba(255,255,255,.025); } .signal-object { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 92px; height: 92px; border: 1px solid #54584f; background: #090b0a; } .signal-audio i { display: block; width: 2px; height: 22px; background: var(--copper); box-shadow: 0 0 7px rgba(231,154,98,.45); animation: signal-wave 1.2s ease-in-out infinite alternate; } .signal-audio i:nth-child(2n) { height: 45px; animation-delay: -.3s; } .signal-audio i:nth-child(3n) { height: 61px; animation-delay: -.65s; } .signal-line { position: relative; height: 1px; background: var(--copper); } .signal-line i { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 17px var(--copper); animation: signal-travel 2.4s ease-in-out infinite; } .signal-network { position: relative; z-index: 1; width: 108px; height: 108px; border: 1px solid var(--copper); border-radius: 50%; background: #090b0a; box-shadow: 0 0 32px rgba(231,154,98,.08); animation: network-breathe 3s ease-in-out infinite; } .signal-network span { position: absolute; width: 9px; height: 9px; border: 1px solid var(--teal); background: #090b0a; transform: rotate(45deg); } .signal-network span:nth-child(1) { left: 47px; top: 22px; } .signal-network span:nth-child(2) { left: 27px; top: 38px; } .signal-network span:nth-child(3) { right: 26px; top: 39px; } .signal-network span:nth-child(4) { left: 34px; bottom: 27px; } .signal-network span:nth-child(5) { right: 33px; bottom: 26px; } .signal-network span:nth-child(6) { left: 48px; top: 49px; background: var(--teal); box-shadow: 0 0 12px var(--teal); } .signal-readout { padding: 0 28px 25px; } .signal-readout > span { color: #70736e; font: 600 8px var(--ui); letter-spacing: .12em; text-transform: uppercase; } .signal-readout > strong { display: block; margin-top: 7px; color: var(--bone); font: 400 clamp(28px,3vw,42px)/1 var(--display); } .signal-readout > p { max-width: 470px; margin: 10px 0 0; color: #96938b; font-size: 11px; line-height: 1.58; } .blockchain-signal.is-changing .signal-stage,.blockchain-signal.is-changing .signal-readout { animation: application-step-in .38s cubic-bezier(.2,.74,.2,1); } .signal-meta { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #30342f; } .signal-meta span { min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-right: 1px solid #30342f; color: #858780; font: 600 7px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; text-align: center; } .signal-meta span:last-child { border-right: 0; } .signal-meta i { width: 5px; height: 5px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 7px var(--teal); } .blockchain-boundaries { display: grid; align-content: start; } .blockchain-boundaries article { padding: 23px 21px 20px; border-bottom: 1px solid #3b403a; } .blockchain-boundaries article:last-child { border-bottom: 0; } .blockchain-boundaries h3 { display: flex; align-items: center; gap: 11px; margin: 0 0 15px; color: var(--teal); font: 400 17px var(--display); } .blockchain-boundaries svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; } .blockchain-boundaries ul { list-style: none; margin: 0; padding: 0; } .blockchain-boundaries li { min-height: 31px; display: flex; align-items: center; border-top: 1px solid #282c28; color: #9b9992; font-size: 9px; } .blockchain-boundaries li::before { content: "+"; width: 18px; color: var(--teal); font: 500 12px ui-monospace,SFMono-Regular,Consolas,monospace; } .blockchain-boundaries .boundary-private h3 { color: #d4cec3; } .blockchain-boundaries .boundary-private li::before { color: var(--copper); } .blockchain-boundaries .boundary-not-live h3,.blockchain-boundaries .boundary-not-live li::before { color: var(--copper); } .blockchain-boundaries .boundary-not-live li { color: #7d7d77; } .blockchain-footnote { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 26px; padding-left: 18px; border-left: 1px solid var(--copper); } .blockchain-footnote p { max-width: 760px; margin: 0; color: #8f8d86; font-size: 11px; line-height: 1.55; } .blockchain-footnote p strong { color: #c9c4bb; } .blockchain-footnote a { flex: 0 0 auto; color: var(--teal); font: 700 9px var(--ui); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; } .blockchain-footnote a:hover { color: var(--bone); } .application-eligibility { padding: clamp(82px,9vw,126px) 0; background: #0b0e0c; } .application-eligibility-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.65fr); gap: clamp(55px,8vw,120px); } .application-eligibility h2 { max-width: 820px; margin: 0; color: var(--bone); font: 400 clamp(43px,5vw,70px)/.98 var(--display); letter-spacing: -.045em; } .application-eligibility-grid > div:last-child > p { margin-top: 1px; color: #bbb6ad; font-size: 15px; line-height: 1.65; } .application-eligibility ul { margin: 24px 0 30px; padding: 0; list-style: none; } .application-eligibility li { position: relative; padding: 12px 0 12px 27px; border-top: 1px solid #30342f; color: #8e8c85; font-size: 12px; line-height: 1.5; } .application-eligibility li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; border: 1px solid var(--teal); transform: rotate(45deg); } @keyframes application-signal { 50% { opacity: .48; box-shadow: 0 0 0 2px rgba(88,185,176,.04),0 0 5px rgba(88,185,176,.4); } } @keyframes application-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes signal-wave { from { transform: scaleY(.35); opacity: .45; } to { transform: scaleY(1); opacity: 1; } } @keyframes signal-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } } @keyframes network-breathe { 50% { box-shadow: 0 0 46px rgba(231,154,98,.17); } } @media (max-width: 1180px) { .application-portal-grid { grid-template-columns: minmax(0,.8fr) minmax(500px,1.2fr); gap: 40px; } .application-hero-copy h1 { font-size: clamp(57px,6.3vw,82px); } .blockchain-console { grid-template-columns: 320px minmax(0,1fr); } .blockchain-boundaries { grid-column: 1/-1; grid-template-columns: repeat(3,1fr); border-top: 1px solid #3b403a; } .blockchain-boundaries article { border-right: 1px solid #3b403a; border-bottom: 0; } .blockchain-boundaries article:last-child { border-right: 0; } .blockchain-signal { border-right: 0; } } @media (max-width: 980px) { .application-portal { padding-top: 78px; } .application-portal-grid { grid-template-columns: 1fr; } .application-hero-copy { max-width: 760px; padding-top: 20px; } .application-hero-copy h1 { max-width: 760px; font-size: clamp(64px,10vw,92px); } .application-console { width: 100%; max-width: 780px; } .cohort-shapes-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; } .cohort-shapes article:nth-child(2) { border-right: 0; } .cohort-shapes article:nth-child(3) { padding-left: 0; } .blockchain-heading { grid-template-columns: 1fr; gap: 25px; } .blockchain-heading-copy { max-width: 670px; } .application-eligibility-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .application-portal { padding-top: 56px; } .application-atmosphere { height: 760px; } .application-atmosphere img { object-position: 43% top; opacity: .4; } .application-atmosphere::after { background: rgba(6,8,7,.73); } .application-portal-grid { gap: 30px; } .vibra-motion .application-console[data-reveal] { opacity: 1; transform: none; } .application-hero-copy { padding-top: 12px; } .application-hero-copy h1 { max-width: 570px; font-size: clamp(50px,14.8vw,72px); line-height: .91; } .application-deck { margin-top: 21px; font-size: 15px; line-height: 1.52; } .application-hero-actions { display: grid; gap: 9px; margin-top: 28px; } .application-hero-actions .button { width: 100%; min-height: 54px; } .application-text-link { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; } .application-hero-proof { display: grid; gap: 10px; margin-top: 26px; } .application-console { margin-inline: 0; } .application-console-head { padding-inline: 17px; } .application-progress { grid-template-columns: 1fr 14px 1fr 14px 1fr; padding: 16px 13px 13px; } .application-progress button { min-height: 56px; } .application-progress button span { font-size: 17px; } .application-progress button strong { font-size: 7px; } .application-step { padding: 27px 17px 26px; } .application-step h2 { font-size: 34px; } .application-step .form-row { grid-template-columns: 1fr; gap: 0; } .application-step .field input,.application-step .field select { min-height: 52px; font-size: 16px; } .application-step .field textarea { font-size: 16px; } .application-step-actions { align-items: stretch; } .application-step-actions > span { align-self: center; max-width: 110px; } .application-next,.application-submit-actions .button-primary { min-height: 52px; } .application-submit-actions { display: grid; grid-template-columns: auto 1fr; } .application-review div { grid-template-columns: 96px 1fr; } .application-trust { grid-template-columns: 1fr; } .application-trust span { justify-content: flex-start; min-height: 48px; padding-inline: 20px; border-right: 0; border-bottom: 1px solid #30332f; } .application-trust span:last-child { border-bottom: 0; } .application-result { min-height: 540px; padding: 38px 24px; } .cohort-shapes { margin-top: 80px; padding-bottom: 36px; } .cohort-shapes-grid { grid-template-columns: 1fr; gap: 0; } .cohort-shapes article,.cohort-shapes article + article,.cohort-shapes article:nth-child(3) { padding: 20px 0; border-right: 0; border-top: 1px solid #343731; } .cohort-shapes article:last-child { border-bottom: 1px solid #343731; } .artist-blockchain { padding-block: 86px 82px; } .blockchain-heading { margin-bottom: 36px; } .blockchain-heading h2 { font-size: clamp(45px,13.2vw,64px); line-height: .94; } .blockchain-heading h2 br { display: none; } .blockchain-heading-copy p { font-size: 13px; } .blockchain-console { grid-template-columns: 1fr; } .blockchain-flow { border-right: 0; } .blockchain-flow button { min-height: 112px; grid-template-columns: 36px 14px 1fr; padding: 19px 17px; } .blockchain-flow button > span { font-size: 27px; } .blockchain-flow button > small { font-size: 10px; } .blockchain-signal { border-top: 1px solid #3b403a; } .signal-head { padding-inline: 15px; } .signal-stage { grid-template-columns: 76px 1fr 91px; min-height: 200px; padding-inline: 18px; } .signal-object { width: 74px; height: 74px; } .signal-network { width: 88px; height: 88px; } .signal-network span:nth-child(1) { left: 38px; top: 16px; } .signal-network span:nth-child(2) { left: 20px; top: 32px; } .signal-network span:nth-child(3) { right: 19px; top: 32px; } .signal-network span:nth-child(4) { left: 27px; bottom: 20px; } .signal-network span:nth-child(5) { right: 26px; bottom: 20px; } .signal-network span:nth-child(6) { left: 39px; top: 40px; } .signal-readout { padding: 0 18px 23px; } .signal-meta span { min-height: 52px; padding-inline: 5px; font-size: 6px; } .blockchain-boundaries { grid-column: auto; grid-template-columns: 1fr; } .blockchain-boundaries article { border-right: 0; border-bottom: 1px solid #3b403a; } .blockchain-boundaries article:last-child { border-bottom: 0; } .blockchain-footnote { align-items: flex-start; flex-direction: column; } .blockchain-footnote a { min-height: 44px; display: inline-flex; align-items: center; } .application-eligibility { padding-block: 82px; } .application-eligibility h2 { font-size: clamp(43px,12vw,59px); } } @media (max-width: 430px) { .application-portal .wrap,.artist-blockchain .wrap,.application-eligibility .wrap { width: min(100% - 30px,1380px); } .brand-wordmark { font-size: 15px; letter-spacing: .27em; } .application-hero-copy h1 { font-size: clamp(49px,14.1vw,61px); } .application-console-head > div span { display: none; } .application-progress > i { display: none; } .application-progress { grid-template-columns: repeat(3,1fr); gap: 3px; } .application-progress button { border-bottom: 1px solid #343731; } .application-progress button.is-active { border-bottom-color: var(--copper); } .application-step-actions { display: grid; grid-template-columns: 1fr; } .application-step-actions > span { max-width: none; } .application-step-actions .application-next { width: 100%; } .application-submit-actions { grid-template-columns: 1fr; } .application-submit-actions .application-back { justify-self: start; } .signal-head > span { display: none; } .signal-head { justify-content: flex-end; } .signal-stage { grid-template-columns: 66px 1fr 80px; padding-inline: 13px; } .signal-object { width: 65px; height: 65px; } .signal-audio i:nth-child(3n) { height: 47px; } .signal-network { width: 77px; height: 77px; } .signal-network span:nth-child(1) { left: 33px; top: 13px; } .signal-network span:nth-child(2) { left: 17px; top: 28px; } .signal-network span:nth-child(3) { right: 16px; top: 28px; } .signal-network span:nth-child(4) { left: 23px; bottom: 17px; } .signal-network span:nth-child(5) { right: 22px; bottom: 17px; } .signal-network span:nth-child(6) { left: 34px; top: 35px; } .signal-meta { grid-template-columns: 1fr; } .signal-meta span { justify-content: flex-start; min-height: 38px; padding-left: 19px; border-right: 0; border-bottom: 1px solid #292c28; } .signal-meta span:last-child { border-bottom: 0; } } @media (hover: hover) { .application-console { transition: border-color .25s ease,transform .25s ease,box-shadow .25s ease; } .application-console:hover { border-color: #8a684e; transform: translateY(-2px); box-shadow: 0 48px 125px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.02); } } @media (prefers-reduced-motion: reduce) { .application-live-signal i,.signal-audio i,.signal-line i,.signal-network { animation: none !important; } .vibra-motion .application-step.is-active { animation: none !important; } .application-atmosphere img { transform: none; } } /* VibraMusic 1.8.2 — reference-matched double-note mobile menu */ @media (max-width: 760px) { .site-header { height: 61px; background: rgba(9,12,13,.96); } .site-header .header-inner { width: calc(100% - 36px); } .site-nav { top: 61px; max-height: calc(100svh - 61px); } .brand-wordmark { color: #d8cec0; font-size: 18px; font-weight: 600; letter-spacing: .42em; } .menu-toggle { width: 46px; height: 46px; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; color: #ce6f43; } .menu-toggle:hover, .menu-toggle:focus-visible, .menu-toggle[aria-expanded="true"] { border-color: transparent; background: transparent; box-shadow: none; color: #e58a58; } .menu-toggle .menu-note-piece { position: absolute; display: block; background: currentColor; box-shadow: none; opacity: 1; transform-origin: center; transition: top .24s cubic-bezier(.2,.8,.2,1), left .24s cubic-bezier(.2,.8,.2,1), width .24s cubic-bezier(.2,.8,.2,1), height .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1), opacity .16s ease, box-shadow .16s ease; } .menu-toggle .menu-note-piece.note-flag { top: 1px; left: 10px; width: 24px; height: 3px; border-radius: 1px; transform: rotate(-4deg); box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor; } .menu-toggle .menu-note-piece.note-stem { top: 0; left: 31px; width: 3px; height: 28px; border-radius: 1px; transform: none; } .menu-toggle .menu-note-piece.note-stem::after { content: ""; position: absolute; top: 11px; right: 21px; width: 3px; height: 24px; border-radius: 1px; background: currentColor; transition: opacity .14s ease; } .menu-toggle .menu-note-piece.note-head { top: 21px; left: 24px; width: 11px; height: 8px; border-radius: 58% 42% 58% 42%; transform: rotate(-18deg); } .menu-toggle .menu-note-piece.note-head::after { content: ""; position: absolute; top: 7px; right: 21px; width: 11px; height: 8px; border-radius: inherit; background: currentColor; } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-flag, .menu-toggle[aria-expanded="true"] .menu-note-piece.note-stem { top: 22px; left: 12px; width: 24px; height: 2px; border-radius: 2px; opacity: 1; box-shadow: none; } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-flag { transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-stem { transform: rotate(-45deg); } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-stem::after { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-head { top: 19px; left: 19px; width: 8px; height: 8px; opacity: 0; transform: scale(.2); } .menu-toggle[aria-expanded="true"] .menu-note-piece.note-head::after { opacity: 0; } } @media (max-width: 430px) { .brand-wordmark { font-size: 17px; letter-spacing: .38em; } } /* VibraMusic 1.8.4 — exact three-part note traced from the approved reference */ @media (max-width: 760px) { .menu-toggle { color: #b9603b; } .menu-toggle:hover, .menu-toggle:focus-visible, .menu-toggle[aria-expanded="true"] { color: #cf7349; } .menu-note-icon, .menu-close-icon { position: absolute; display: block; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); } .menu-note-icon { top: 2px; left: 4px; width: 32px; height: 37px; overflow: visible; fill: currentColor; opacity: 1; transform: none; transform-origin: center; } .menu-note-part { fill: currentColor; } .menu-close-icon { top: 7px; left: 7px; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: square; opacity: 0; transform: scale(.72) rotate(-12deg); transform-origin: center; } .menu-toggle[aria-expanded="true"] .menu-note-icon { opacity: 0; transform: scale(.76) translateY(-2px); } .menu-toggle[aria-expanded="true"] .menu-close-icon { opacity: 1; transform: scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce) { .menu-note-icon,.menu-close-icon { transition: none !important; } } /* VibraMusic 1.9.0 — live-session to command-center elevation */ .hero-stage-signal { position: absolute; inset: -4% -9% 0 -10%; z-index: 1; width: 119%; height: 102%; overflow: visible; fill: none; pointer-events: none; filter: drop-shadow(0 0 10px rgba(231,154,98,.12)); } .hero-stage-signal path { vector-effect: non-scaling-stroke; stroke-linecap: round; } .hero-stage-signal-back { stroke: rgba(231,154,98,.17); stroke-width: 1; } .hero-stage-signal-live { stroke: rgba(239,166,111,.68); stroke-width: 1.15; stroke-dasharray: .055 .03; animation: moon-signal-travel 8s linear infinite; } .hero-stage-signal circle { fill: var(--copper); stroke: rgba(255,226,204,.76); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: moon-signal-node 2.6s ease-in-out infinite; } .hero-stage-signal circle:nth-of-type(2) { animation-delay: -.9s; } .hero-stage-signal circle:nth-of-type(3) { animation-delay: -1.8s; } .cinematic-shell .hero-stage::before { content: ""; position: absolute; z-index: 1; inset: -13% 5% 10% 9%; pointer-events: none; opacity: calc(.36 + var(--vibra-audio-pulse, 0) * .18); background: conic-gradient(from 194deg at 50% -7%, transparent 0 10deg, rgba(244,176,125,.14) 15deg, transparent 21deg 44deg, rgba(244,176,125,.09) 51deg, transparent 59deg), radial-gradient(ellipse at 52% 24%, rgba(231,154,98,.13), transparent 43%); filter: blur(.2px); transition: opacity .25s ease; } .hero-stage .artist-float { isolation: isolate; } .hero-stage .artist-float::after { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -6%; height: 12%; border-radius: 50%; background: rgba(0,0,0,.86); filter: blur(18px); transform: perspective(240px) rotateX(68deg); } .player-signal { position: relative; min-width: 0; height: 38px; display: grid; align-items: center; } .player-waveform { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: clamp(1px,.18vw,3px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); mask-image: linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent); } .player-waveform i { flex: 1 1 2px; max-width: 3px; height: calc(7px + (var(--player-bar) * .42px)); min-height: 6px; border-radius: 1px; background: rgba(154,145,134,.34); transform-origin: center; transition: height .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease; } .player-waveform i:nth-child(3n) { height: 26px; } .player-waveform i:nth-child(5n) { height: 34px; } .player-waveform i:nth-child(7n) { height: 17px; } .player-waveform i.is-passed { background: var(--copper); box-shadow: 0 0 7px rgba(231,154,98,.34); opacity: 1; } .cinematic-player.is-playing .player-waveform i { animation: moon-player-wave .72s ease-in-out infinite alternate; animation-delay: calc(var(--player-bar) * -19ms); } .player-signal .player-progress { position: relative; z-index: 2; height: 38px; opacity: .01; cursor: ew-resize; } .player-signal:focus-within { outline: 1px solid rgba(231,154,98,.75); outline-offset: 4px; } .direct-section { overflow: hidden; background: linear-gradient(90deg,transparent 0 49.94%,rgba(231,154,98,.07) 50%,transparent 50.06%), radial-gradient(circle at 76% 50%,rgba(231,154,98,.07),transparent 31%); } .money-card { border-color: rgba(231,154,98,.2); border-radius: 0; background: linear-gradient(132deg,rgba(15,17,15,.95),rgba(8,10,9,.96)); box-shadow: 0 36px 100px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.018); } .money-flow { grid-template-columns: minmax(112px,.8fr) 66px minmax(145px,1fr) 150px; grid-template-rows: auto auto; gap: 10px 14px; } .money-source,.money-destination { grid-row: 1 / 3; align-content: center; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.012); } .flow-line { grid-row: 1 / 3; height: auto; display: grid; align-items: center; background: none; } .flow-line::after { display: none; } .flow-line svg { width: 100%; fill: none; stroke: var(--copper); stroke-width: 1; } .money-ring { grid-column: 4; grid-row: 1; width: 138px; height: 138px; padding: 12px; border-radius: 50%; background: conic-gradient(var(--copper) 0 90%,rgba(231,154,98,.1) 90% 100%); box-shadow: 0 0 36px rgba(231,154,98,.09); } .money-ring > div { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #0b0d0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .money-ring strong { display: block; color: var(--copper); font: 400 34px/.9 var(--display); } .money-ring span { margin-top: 7px; color: #9e9a92; font: 600 7px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; } .money-platform { grid-column: 4; grid-row: 2; display: flex; justify-content: center; gap: 7px; color: #8d8a83; font-size: 8px; text-align: center; } .money-platform strong { color: var(--bone); } .gate-grid { gap: 0; border-block: 1px solid rgba(231,154,98,.2); } .gate-card { min-height: 192px; border: 0; border-right: 1px solid var(--line); background: transparent; transition: background .28s ease,transform .28s ease; } .gate-card:last-child { border-right: 0; } .gate-card h3 { margin-top: 30px; } .gate-card:hover { transform: none; background: linear-gradient(180deg,rgba(231,154,98,.055),transparent); box-shadow: inset 0 2px var(--copper); } .pilot-cta { min-height: 520px; display: grid; align-items: center; isolation: isolate; background: #080a09; } .pilot-cta::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: url("assets/vibra-stage.webp"); background-position: 52% 48%; background-size: cover; opacity: .54; filter: saturate(.82) contrast(1.08); } .pilot-cta::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(5,7,6,.96) 0 30%,rgba(5,7,6,.36) 52%,rgba(5,7,6,.82) 100%), linear-gradient(0deg,rgba(5,7,6,.85),transparent 45%,rgba(5,7,6,.48)); } .pilot-stage-light { position: absolute; z-index: -1; left: 49%; top: 18%; width: 2px; height: 52%; background: linear-gradient(rgba(255,210,174,.62),rgba(231,154,98,.08),transparent); box-shadow: 0 0 34px rgba(231,154,98,.36),0 0 90px rgba(231,154,98,.14); } .pilot-inner { grid-template-columns: minmax(0,1fr) minmax(330px,.62fr); align-items: center; gap: clamp(80px,11vw,180px); } .pilot-inner > div:first-of-type { max-width: 740px; } .pilot-actions { padding: clamp(27px,3vw,42px); border: 1px solid rgba(231,154,98,.38); background: rgba(7,9,8,.82); backdrop-filter: blur(14px); box-shadow: 0 35px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.025); } .pilot-actions h3 { margin: 0; color: var(--bone); font: 400 clamp(28px,2.8vw,42px)/1 var(--display); } .pilot-actions > p { margin: 14px 0 25px; color: #aaa59c; font-size: 13px; line-height: 1.55; } .pilot-actions > div { display: flex; flex-wrap: wrap; gap: 9px; } .pilot-actions .button { min-height: 51px; } @keyframes moon-signal-travel { to { stroke-dashoffset: -1; } } @keyframes moon-signal-node { 50% { transform: scale(1.85); opacity: .45; } } @keyframes moon-player-wave { from { transform: scaleY(.46); } to { transform: scaleY(1); } } @media (max-width: 1180px) { .money-flow { grid-template-columns: minmax(110px,.8fr) 52px minmax(140px,1fr) 132px; } .money-ring { width: 122px; height: 122px; } .pilot-inner { gap: 56px; } } @media (max-width: 980px) { .direct-grid { grid-template-columns: 1fr; } .money-flow { grid-template-columns: 1fr 66px 1fr 160px; } .money-ring { width: 142px; height: 142px; } .pilot-inner { grid-template-columns: 1fr; align-items: end; } .pilot-inner > div:first-of-type { max-width: 760px; } .pilot-actions { width: min(100%,640px); justify-self: end; } .pilot-cta::after { background: linear-gradient(90deg,rgba(5,7,6,.94),rgba(5,7,6,.42) 64%,rgba(5,7,6,.68)); } } @media (max-width: 760px) { .hero-stage-signal { inset: -7% -18% 0 -13%; width: 131%; opacity: .68; } .cinematic-shell .hero-stage::before { inset: -8% -14% 17%; opacity: .34; } .player-signal { height: 34px; } .player-waveform { inset-block: 2px; gap: 1px; } .player-waveform i:nth-child(n+34) { display: none; } .player-signal .player-progress { height: 34px; } .money-card { padding: 22px 17px; } .money-flow { grid-template-columns: minmax(96px,1fr) 42px minmax(118px,1fr); grid-template-rows: auto auto; gap: 16px 9px; } .money-source,.money-destination,.flow-line { grid-row: 1; } .money-source,.money-destination { min-height: 104px; padding: 14px; } .money-ring { grid-column: 1 / 3; grid-row: 2; width: 116px; height: 116px; justify-self: center; } .money-ring strong { font-size: 29px; } .money-platform { grid-column: 3; grid-row: 2; align-self: center; display: grid; } .gate-grid { grid-template-columns: 1fr 1fr; } .gate-card,.gate-card:last-child { min-height: 184px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .gate-card:nth-child(2n) { border-right: 0; } .gate-card:nth-last-child(-n+2) { border-bottom: 0; } .pilot-cta { min-height: 660px; padding-block: 82px; } .pilot-cta::before { background-position: 54% 50%; opacity: .42; } .pilot-cta::after { background: linear-gradient(180deg,rgba(5,7,6,.96) 0 28%,rgba(5,7,6,.52) 56%,rgba(5,7,6,.92) 100%); } .pilot-stage-light { left: 53%; top: 24%; } .pilot-inner { gap: 150px; } .pilot-actions { width: 100%; justify-self: stretch; } .pilot-actions > div { display: grid; } .pilot-actions .button { width: 100%; } } @media (max-width: 430px) { .player-waveform i:nth-child(n+27) { display: none; } .money-flow { grid-template-columns: 1fr 31px 1fr; } .money-source strong,.money-destination strong { font-size: 23px; } .gate-grid { grid-template-columns: 1fr; } .gate-card,.gate-card:last-child,.gate-card:nth-child(2n),.gate-card:nth-last-child(-n+2) { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); } .gate-card:last-child { border-bottom: 0; } .pilot-actions { padding: 25px 20px; } } @media (prefers-reduced-motion: reduce) { .hero-stage-signal-live,.hero-stage-signal circle,.cinematic-player.is-playing .player-waveform i { animation: none !important; } } /* VibraMusic 2.1 — The Fan Frequency */ .fan-frequency { --fan-stage-x: 62.5%; position: relative; isolation: isolate; overflow: hidden; padding: clamp(112px,9vw,156px) 0 clamp(122px,10vw,174px); border-block: 1px solid rgba(223,151,103,.22); background: radial-gradient(circle 720px at 38% 62%,rgba(223,151,103,.07),transparent 70%), linear-gradient(180deg,#070907 0%,#050605 100%); } .fan-frequency::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,transparent,#000 24%,#000 82%,transparent); } .fan-frequency[data-fan-stage="discover"] { --fan-stage-x: 12.5%; --fan-accent: var(--teal); } .fan-frequency[data-fan-stage="return"] { --fan-stage-x: 37.5%; --fan-accent: #7f9cab; } .fan-frequency[data-fan-stage="support"] { --fan-stage-x: 62.5%; --fan-accent: var(--copper); } .fan-frequency[data-fan-stage="belong"] { --fan-stage-x: 87.5%; --fan-accent: var(--lilac); } .fan-frequency-inner { width: min(1600px,calc(100% - 72px)); } .fan-frequency-intro { max-width: 980px; margin-bottom: clamp(58px,5vw,84px); } .fan-frequency-intro .eyebrow { margin-bottom: 24px; color: var(--copper); } .fan-frequency-intro .eyebrow::before { background: var(--copper); } .fan-frequency-intro h2 { max-width: 1120px; margin: 0; color: var(--bone); font: 400 clamp(58px,6.2vw,104px)/.98 var(--display); letter-spacing: -.052em; } .fan-frequency-intro h2 em { color: var(--copper); font-style: italic; } .fan-frequency-intro > p:last-child { max-width: 760px; margin: 30px 0 0; color: #c3bdb3; font-size: clamp(16px,1.35vw,21px); line-height: 1.62; } .fan-frequency-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,390px); align-items: stretch; } .fan-journey { min-width: 0; padding-right: clamp(34px,4.2vw,72px); } .fan-stage-rail { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); min-height: 110px; } .fan-stage-rail::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: 25px; height: 1px; background: linear-gradient(90deg,rgba(88,185,176,.5),rgba(223,151,103,.55) 64%,rgba(155,121,200,.48)); } .fan-stage-rail button { position: relative; display: grid; justify-items: center; align-content: end; gap: 12px; padding: 0 5px; border: 0; color: #c7c1b7; background: transparent; font: 500 14px/1 var(--ui); cursor: pointer; } .fan-stage-rail button span,.fan-stage-rail button strong { position: relative; z-index: 1; } .fan-stage-rail button strong { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #ded6ca; border-radius: 50%; color: #e8e0d5; background: #080a08; font: 500 18px/1 var(--ui); transition: transform .24s ease,color .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease; } .fan-stage-rail button:hover strong { transform: translateY(-2px); border-color: var(--copper); } .fan-stage-rail button:focus-visible { outline: 0; } .fan-stage-rail button:focus-visible strong { outline: 2px solid var(--copper); outline-offset: 5px; } .fan-stage-rail button[aria-pressed="true"] { color: var(--fan-accent,var(--copper)); } .fan-stage-rail button[aria-pressed="true"] strong { color: #fff7ed; border-color: #fff2e7; background: var(--fan-accent,var(--copper)); box-shadow: 0 0 0 8px color-mix(in srgb,var(--fan-accent,var(--copper)) 15%,transparent),0 0 34px color-mix(in srgb,var(--fan-accent,var(--copper)) 38%,transparent); transform: scale(1.08); } .fan-signal-canvas { position: relative; isolation: isolate; min-height: clamp(470px,38vw,650px); overflow: hidden; border-top: 1px solid rgba(223,151,103,.16); background: #080807; } .fan-signal-canvas img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(.86) contrast(1.08) brightness(.78); transform: scale(1.015); transition: filter .55s ease,transform 1.1s cubic-bezier(.2,.7,.2,1); } .fan-signal-canvas:hover img { filter: saturate(.98) contrast(1.06) brightness(.87); transform: scale(1.03); } .fan-signal-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(4,5,4,.8) 0%,rgba(5,5,4,.13) 42%,rgba(4,5,4,.16) 70%,rgba(3,4,3,.74) 100%); } .fan-signal-wave { position: absolute; z-index: 2; top: 40%; left: 0; width: 100%; height: 29%; overflow: visible; filter: drop-shadow(0 0 8px rgba(223,151,103,.3)); } .fan-signal-wave path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .fan-wave-base { stroke: rgba(229,219,205,.34); stroke-width: 1.35; } .fan-wave-teal { stroke: var(--teal); stroke-width: 1.55; opacity: .82; } .fan-wave-copper { stroke: var(--copper); stroke-width: 1.9; opacity: .96; } .fan-wave-lilac { stroke: var(--lilac); stroke-width: 1.55; opacity: .78; } .fan-stage-pulse { position: absolute; z-index: 3; top: 0; bottom: 15%; left: var(--fan-stage-x); width: 1px; background: linear-gradient(180deg,var(--fan-accent,var(--copper)),transparent 88%); box-shadow: 0 0 14px color-mix(in srgb,var(--fan-accent,var(--copper)) 55%,transparent); transform: translateX(-50%); transition: left .52s cubic-bezier(.22,.78,.2,1),background .3s ease; } .fan-stage-pulse::before { content: ""; position: absolute; top: calc(40% + 13.6%); left: 50%; width: 14px; height: 14px; border: 2px solid #fff0e5; border-radius: 50%; background: var(--fan-accent,var(--copper)); box-shadow: 0 0 0 8px color-mix(in srgb,var(--fan-accent,var(--copper)) 16%,transparent),0 0 30px var(--fan-accent,var(--copper)); transform: translate(-50%,-50%); animation: fan-pulse 2.3s ease-out infinite; } .fan-stage-pulse i { position: absolute; bottom: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--fan-accent,var(--copper)); box-shadow: 0 0 15px var(--fan-accent,var(--copper)); transform: translateX(-50%); } .fan-signal-canvas > small { display: none; } .fan-frequency-detail { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 17px 0 0 clamp(30px,3vw,54px); border-left: 1px solid rgba(223,151,103,.28); } .fan-frequency-detail::before { content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 90px; background: var(--fan-accent,var(--copper)); box-shadow: 0 0 15px var(--fan-accent,var(--copper)); } .fan-frequency-detail-copy.is-changing { animation: fan-copy-in .42s ease both; } .fan-frequency-detail-copy > span { color: var(--fan-accent,var(--copper)); font: 750 11px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; } .fan-frequency-detail h3 { max-width: 320px; margin: 28px 0 20px; color: var(--bone); font: 400 clamp(29px,2.5vw,42px)/1.1 var(--display); letter-spacing: -.035em; } .fan-frequency-detail p { min-height: 105px; margin: 0; color: #bdb7ae; font-size: 14px; line-height: 1.7; } .fan-trust-list { margin-top: 28px; border-top: 1px solid #34342f; } .fan-trust-list > span { display: grid; grid-template-columns: 47px 1fr 7px; align-items: center; gap: 14px; min-height: 78px; border-bottom: 1px solid #2d2e29; } .fan-trust-list strong { color: #d1cbc1; font: 500 13px/1.25 var(--ui); } .fan-trust-list > span > i { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; color: var(--copper); } .fan-trust-list > span:nth-child(2) > i { color: var(--teal); } .fan-trust-list > span:nth-child(3) > i { color: var(--lilac); } .fan-trust-list > span > b { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 9px var(--copper); } .fan-trust-list > span:nth-child(2) > b { background: var(--teal); box-shadow: 0 0 9px var(--teal); } .fan-trust-list > span:nth-child(3) > b { background: var(--lilac); box-shadow: 0 0 9px var(--lilac); } .fan-trust-shield::before { content: ""; width: 15px; height: 17px; border: 1px solid currentColor; clip-path: polygon(50% 0,100% 22%,91% 72%,50% 100%,9% 72%,0 22%); } .fan-trust-shield::after { content: ""; position: absolute; width: 7px; height: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-1px) rotate(45deg); } .fan-trust-source::before { content: ""; width: 14px; height: 20px; border: 1px solid currentColor; border-width: 0 1px; border-radius: 50%; box-shadow: inset 3px 0 0 -2px currentColor,inset -3px 0 0 -2px currentColor; } .fan-trust-source::after { content: ""; position: absolute; inset: 12px; border: 1px solid currentColor; border-block-color: transparent; border-radius: 50%; } .fan-trust-artist::before { content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; } .fan-trust-artist::after { content: ""; position: absolute; bottom: 8px; width: 20px; height: 10px; border: 1px solid currentColor; border-bottom: 0; border-radius: 14px 14px 0 0; } .fan-frequency-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; margin-top: 32px; padding: 0 24px; border: 1px solid var(--fan-accent,var(--copper)); color: var(--fan-accent,var(--copper)); font: 550 14px/1.2 var(--ui); text-decoration: none; transition: color .24s ease,background .24s ease,box-shadow .24s ease; } .fan-frequency-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .24s ease; } .fan-frequency-cta:hover { color: #0a0907; background: var(--fan-accent,var(--copper)); box-shadow: 0 0 28px color-mix(in srgb,var(--fan-accent,var(--copper)) 18%,transparent); } .fan-frequency-cta:hover svg { transform: translateX(4px); } .fan-frequency-cta:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; } .fan-frequency-disclosure { margin-top: auto; padding-top: 38px; color: #6d6d67; font: 500 11px/1.2 var(--ui); } @keyframes fan-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--fan-accent,var(--copper)) 32%,transparent),0 0 22px var(--fan-accent,var(--copper)); } 50% { box-shadow: 0 0 0 13px transparent,0 0 34px var(--fan-accent,var(--copper)); } } @keyframes fan-copy-in { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 1080px) { .fan-frequency-grid { grid-template-columns: minmax(0,1fr) 320px; } .fan-journey { padding-right: 30px; } .fan-frequency-detail { padding-left: 28px; } } @media (max-width: 860px) { .fan-frequency-inner { width: min(100% - 48px,760px); } .fan-frequency-grid { grid-template-columns: 1fr; } .fan-journey { padding-right: 0; } .fan-signal-canvas { min-height: 480px; } .fan-frequency-detail { min-height: 0; padding: 42px 0 0; border-left: 0; } .fan-frequency-detail::before { display: none; } .fan-frequency-detail h3 { max-width: 620px; } .fan-frequency-detail p { min-height: 0; max-width: 640px; } .fan-trust-list { display: grid; grid-template-columns: repeat(3,1fr); } .fan-trust-list > span { grid-template-columns: 43px 1fr; gap: 10px; padding: 0 12px; border-right: 1px solid #2d2e29; } .fan-trust-list > span:last-child { border-right: 0; } .fan-trust-list > span > b { display: none; } .fan-frequency-disclosure { padding-top: 24px; } } @media (max-width: 760px) { .fan-frequency { padding: 82px 0 104px; } .fan-frequency::before { display: none; } .fan-frequency-inner { width: min(100% - 36px,620px); } .fan-frequency-intro { margin-bottom: 36px; } .fan-frequency-intro .eyebrow { margin-bottom: 17px; } .fan-frequency-intro h2 { max-width: 540px; font-size: clamp(48px,13.8vw,67px); line-height: .92; } .fan-frequency-intro > p:last-child { margin-top: 24px; font-size: 14px; line-height: 1.62; } .fan-stage-rail { min-height: 105px; } .fan-stage-rail::before { left: 8%; right: 8%; bottom: 23px; } .fan-stage-rail button { gap: 11px; font-size: 10px; } .fan-stage-rail button strong { width: 47px; height: 47px; font-size: 16px; } .fan-signal-canvas { min-height: 0; aspect-ratio: 4 / 3; } .fan-signal-canvas img { object-position: 50% 60%; } .fan-signal-wave { top: 38%; height: 34%; } .fan-stage-pulse { bottom: 9%; } .fan-stage-pulse::before { top: calc(38% + 17%); width: 12px; height: 12px; } .fan-frequency-detail { padding-top: 34px; } .fan-frequency-detail-copy > span { font-size: 10px; } .fan-frequency-detail h3 { margin: 19px 0 15px; font-size: clamp(35px,10.6vw,50px); line-height: 1.02; } .fan-frequency-detail p { font-size: 13px; line-height: 1.65; } .fan-trust-list { grid-template-columns: 1fr; margin-top: 28px; } .fan-trust-list > span { grid-template-columns: 46px 1fr 7px; min-height: 69px; padding: 0; border-right: 0; } .fan-trust-list > span > b { display: block; } .fan-frequency-cta { min-height: 64px; margin-top: 24px; padding-inline: 20px; font-size: 13px; } .fan-frequency-disclosure { padding-top: 20px; font-size: 10px; } } @media (max-width: 390px) { .fan-frequency-inner { width: min(100% - 28px,620px); } .fan-stage-rail button { font-size: 9px; } .fan-stage-rail button strong { width: 43px; height: 43px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .fan-stage-pulse::before { animation: none !important; } .fan-stage-pulse,.fan-signal-canvas img,.fan-stage-rail button strong,.fan-frequency-cta,.fan-frequency-cta svg { transition: none !important; } } /* VibraMusic 2.2 — The Money Map */ .money-map { --money-price-progress: 5.263%; position: relative; overflow: hidden; padding: clamp(104px,10vw,160px) 0 0; background: radial-gradient(circle at 68% 42%,rgba(42,119,112,.085),transparent 31%), radial-gradient(circle at 18% 60%,rgba(189,102,58,.07),transparent 27%), #090a09; border-top: 1px solid rgba(230,223,211,.08); color: var(--bone); } .money-map::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 18%,#000 88%,transparent 100%); mask-image: linear-gradient(to bottom,transparent 0,#000 18%,#000 88%,transparent 100%); } .money-map-inner { position: relative; z-index: 1; width: min(1600px,calc(100% - 72px)); } .money-map-intro { max-width: 990px; } .money-map-intro .eyebrow { margin-bottom: 22px; } .money-map-intro .section-title { max-width: 930px; margin: 0; font-size: clamp(58px,6.5vw,116px); line-height: .87; letter-spacing: -.048em; } .money-map-intro > p:last-child { max-width: 670px; margin: 34px 0 0; color: #aaa79f; font: 400 clamp(15px,1.25vw,19px)/1.62 var(--ui); } .money-map-controls { display: grid; grid-template-columns: minmax(380px,1.18fr) minmax(270px,.72fr) minmax(310px,.82fr); gap: clamp(28px,4vw,70px); align-items: start; margin-top: clamp(62px,7vw,104px); padding: 0 0 36px; border-bottom: 1px solid rgba(230,223,211,.14); } .money-map-control { min-width: 0; margin: 0; padding: 0; border: 0; } .money-map-control legend, .money-control-heading label { display: block; margin-bottom: 13px; padding: 0; color: #817f78; font: 700 9px/1 var(--ui); letter-spacing: .19em; text-transform: uppercase; } .money-segmented { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; } .money-team-segmented { grid-template-columns: repeat(3,1fr); } .money-segmented button { min-height: 43px; padding: 8px 10px; border: 1px solid rgba(230,223,211,.15); border-radius: 2px; background: rgba(255,255,255,.018); color: #8e8b84; font: 700 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease; } .money-segmented button:hover { border-color: rgba(189,102,58,.62); color: var(--bone); transform: translateY(-1px); } .money-segmented button[aria-pressed="true"] { border-color: var(--copper); background: rgba(189,102,58,.13); color: #f1d3c1; box-shadow: inset 0 0 0 1px rgba(189,102,58,.16); } .money-segmented button:focus-visible, .money-price-control input:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .money-control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .money-control-heading label { margin-bottom: 0; } .money-control-heading output { color: var(--bone); font: 400 26px/.85 var(--display); letter-spacing: -.03em; } .money-price-control input { width: 100%; height: 20px; margin: 15px 0 0; padding: 0; border: 0; background: transparent; cursor: ew-resize; appearance: none; -webkit-appearance: none; } .money-price-control input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg,var(--copper) 0 var(--money-price-progress),#343632 var(--money-price-progress) 100%); } .money-price-control input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7px; border: 2px solid #090a09; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 1px var(--copper),0 0 20px rgba(189,102,58,.4); appearance: none; -webkit-appearance: none; } .money-price-control input::-moz-range-track { height: 2px; background: #343632; } .money-price-control input::-moz-range-progress { height: 2px; background: var(--copper); } .money-price-control input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #090a09; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 1px var(--copper),0 0 20px rgba(189,102,58,.4); } .money-range-limits { display: flex; justify-content: space-between; margin-top: 3px; color: #696a65; font: 600 8px/1 var(--ui); letter-spacing: .08em; } .money-team-control > p { margin: 11px 0 0; color: #777872; font: 400 10px/1.45 var(--ui); } .money-map-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,390px); min-height: 660px; border-bottom: 1px solid rgba(230,223,211,.12); } .money-route-canvas { position: relative; min-height: 660px; overflow: hidden; border-right: 1px solid rgba(230,223,211,.12); } .money-route-canvas::after { content: "PRE-TAX ROUTING / LIVE MODEL"; position: absolute; right: 32px; bottom: 22px; color: #474945; font: 700 8px/1 var(--ui); letter-spacing: .22em; } .money-route-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .money-route-lines-mobile { display: none; } .money-route { fill: none; stroke-width: 1.35; stroke-dasharray: 8 9; stroke-linecap: round; animation: money-route-travel 2.4s linear infinite; } .money-route-copper { stroke: rgba(189,102,58,.76); } .money-route-teal { stroke: rgba(74,158,151,.76); animation-duration: 2.05s; } .money-route-lilac { stroke: rgba(171,139,198,.72); animation-duration: 2.75s; } #money-arrow-copper path { fill: var(--copper); } #money-arrow-teal path { fill: var(--teal); } #money-arrow-lilac path { fill: var(--lilac); } @keyframes money-route-travel { to { stroke-dashoffset: -34; } } .money-node { position: absolute; z-index: 2; width: clamp(178px,18vw,250px); min-height: 116px; padding: 19px 18px 17px 64px; border: 1px solid rgba(230,223,211,.14); border-radius: 3px; background: linear-gradient(115deg,rgba(21,22,20,.95),rgba(13,14,13,.8)); box-shadow: 0 18px 50px rgba(0,0,0,.19); transition: border-color .3s ease,transform .3s ease,opacity .3s ease,box-shadow .3s ease; } .money-node:hover { z-index: 3; transform: translateY(-3px); border-color: rgba(230,223,211,.27); box-shadow: 0 25px 65px rgba(0,0,0,.32); } .money-node-icon { position: absolute; top: 18px; left: 17px; display: grid; width: 34px; height: 34px; place-items: center; color: var(--copper); } .money-node-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .money-node > span { display: block; color: #82817b; font: 700 8px/1.35 var(--ui); letter-spacing: .14em; text-transform: uppercase; } .money-node > strong { display: block; margin-top: 13px; color: var(--bone); font: 400 clamp(24px,2vw,33px)/.9 var(--display); letter-spacing: -.03em; white-space: nowrap; } .money-node > strong b { font: inherit; } .money-node > strong em { color: var(--copper); font: 700 9px/1 var(--ui); letter-spacing: .08em; } .money-node > small { display: block; margin-top: 11px; color: #777872; font: 600 7px/1.35 var(--ui); letter-spacing: .11em; text-transform: uppercase; } .money-node-fan { left: 1%; top: 36%; } .money-node-pool { left: 33%; top: 20%; border-color: rgba(189,102,58,.48); } .money-node-pool::before { content: "90"; position: absolute; right: 15px; bottom: -5px; color: rgba(189,102,58,.08); font: 400 65px/.8 var(--display); } .money-node-lead { right: 3%; top: 7%; border-color: rgba(74,158,151,.38); } .money-node-lead .money-node-icon,.money-node-lead > strong { color: var(--teal); } .money-node-collab { right: 3%; top: 47%; border-color: rgba(171,139,198,.32); } .money-node-collab .money-node-icon,.money-node-collab > strong { color: var(--lilac); } .money-node-vibra { left: 42%; top: 73%; } .money-map[data-money-team="solo"] .money-node-collab { opacity: .48; } .money-map[data-money-team="solo"] .money-route-lilac { opacity: .2; } .money-ledger { display: flex; flex-direction: column; min-width: 0; padding: 48px 36px 36px; background: rgba(255,255,255,.012); } .money-ledger-head { padding-bottom: 30px; border-bottom: 1px solid rgba(230,223,211,.13); } .money-ledger-head > span { display: block; color: var(--copper); font: 700 8px/1 var(--ui); letter-spacing: .19em; } .money-ledger h3 { margin: 16px 0 0; color: var(--bone); font: 400 clamp(33px,3vw,46px)/.92 var(--display); letter-spacing: -.035em; } .money-ledger dl { margin: 18px 0 0; } .money-ledger dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(230,223,211,.08); } .money-ledger dt { color: #85837c; font: 600 9px/1.35 var(--ui); letter-spacing: .06em; } .money-ledger dd { margin: 0; color: var(--bone); font: 700 12px/1 var(--ui); letter-spacing: .02em; text-align: right; } .money-ledger-pool dd { color: var(--copper); } .money-ledger-disclosure { align-items: start !important; border-bottom: 0 !important; } .money-ledger-disclosure dd { max-width: 105px; color: #777872; font-size: 8px; line-height: 1.45; text-transform: uppercase; } .money-ledger-cta { width: 100%; min-height: 55px; margin-top: auto; justify-content: space-between; padding-inline: 17px; border-color: rgba(189,102,58,.72); color: #e7cfbf; } .money-ledger-cta span { color: var(--copper); font-size: 17px; transition: transform .25s ease; } .money-ledger-cta:hover span { transform: translateX(4px); } .money-ledger > p { margin: 16px 0 0; color: #62635f; font: 600 8px/1.45 var(--ui); letter-spacing: .09em; text-align: center; text-transform: uppercase; } @media (max-width: 1160px) { .money-map-controls { grid-template-columns: 1fr 1fr; } .money-team-control { grid-column: 1 / -1; } .money-team-segmented { max-width: 500px; } .money-map-workspace { grid-template-columns: minmax(0,1fr) 330px; } .money-node { width: 210px; } .money-node-pool { left: 29%; } .money-node-vibra { left: 35%; } } @media (max-width: 900px) { .money-map-inner { width: min(100% - 42px,760px); } .money-map-workspace { grid-template-columns: 1fr; } .money-route-canvas { min-height: 610px; border-right: 0; } .money-ledger { min-height: 530px; border-top: 1px solid rgba(230,223,211,.12); } } @media (max-width: 760px) { .money-map { padding-top: 88px; } .money-map::before { background-size: 42px 42px; } .money-map-inner { width: min(100% - 34px,620px); } .money-map-intro .eyebrow { margin-bottom: 18px; } .money-map-intro .section-title { font-size: clamp(49px,14vw,68px); line-height: .9; } .money-map-intro > p:last-child { margin-top: 25px; font-size: 14px; line-height: 1.62; } .money-map-controls { grid-template-columns: 1fr; gap: 30px; margin-top: 54px; padding-bottom: 32px; } .money-team-control { grid-column: auto; } .money-segmented { gap: 4px; } .money-segmented button { min-height: 44px; padding-inline: 5px; font-size: 8px; letter-spacing: .075em; } .money-team-segmented { max-width: none; } .money-control-heading output { font-size: 25px; } .money-price-control input { margin-top: 18px; } .money-map-workspace { min-height: 0; } .money-route-canvas { min-height: 630px; } .money-route-lines-desktop { display: none; } .money-route-lines-mobile { display: block; } .money-route { stroke-width: 1.2; } .money-node { width: min(215px,67vw); min-height: 102px; padding: 16px 14px 14px 57px; } .money-node-icon { top: 15px; left: 14px; width: 32px; height: 32px; } .money-node > strong { margin-top: 11px; font-size: 26px; } .money-node > strong em { font-size: 8px; } .money-node-fan { left: 0; top: 3%; } .money-node-pool { left: 17%; top: 22%; } .money-node-lead { right: 0; top: 43%; } .money-node-collab { right: 0; top: 63%; } .money-node-vibra { left: 0; top: 82%; } .money-route-canvas::after { right: 3px; bottom: 5px; font-size: 6px; } .money-ledger { min-height: 515px; padding: 40px 22px 28px; } .money-ledger-head { padding-bottom: 25px; } .money-ledger dl { margin-top: 15px; } .money-ledger dl > div { padding: 14px 0; } } @media (max-width: 390px) { .money-map-inner { width: min(100% - 28px,620px); } .money-map-intro .section-title { font-size: 47px; } .money-segmented button { font-size: 7px; letter-spacing: .04em; } .money-node { width: min(202px,69vw); } .money-node-pool { left: 14%; } .money-node > span { font-size: 7px; } .money-node > strong { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .money-route { animation: none !important; } .money-node,.money-segmented button,.money-ledger-cta span { transition: none !important; } } /* VibraMusic 2.3 — The Founding Room */ .founding-room { --founding-role-color: var(--copper); --founding-role-turn: 0deg; --founding-pointer-x: 48%; --founding-pointer-y: 54%; position: relative; overflow: hidden; padding: clamp(105px,9vw,150px) 0 64px; border-top: 1px solid rgba(230,223,211,.1); background: radial-gradient(circle at 13% 54%,rgba(189,102,58,.08),transparent 34%), radial-gradient(circle at 76% 27%,rgba(68,119,111,.045),transparent 29%), #070807; color: var(--bone); isolation: isolate; } .founding-room[data-founding-role="manager"] { --founding-role-color: var(--teal); } .founding-room[data-founding-role="label"] { --founding-role-color: #d7804b; } .founding-room[data-founding-role="publisher"] { --founding-role-color: var(--lilac); } .founding-room::before { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); background-size: 82px 82px; -webkit-mask-image: linear-gradient(to bottom,transparent,#000 17%,#000 85%,transparent); mask-image: linear-gradient(to bottom,transparent,#000 17%,#000 85%,transparent); } .founding-room-light { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle 280px at var(--founding-pointer-x) var(--founding-pointer-y),rgba(227,139,83,.1),transparent 70%); transition: background .25s ease; } .founding-room-grid { display: grid; grid-template-columns: minmax(0,.94fr) minmax(520px,1.06fr); grid-template-rows: auto 1fr auto; grid-template-areas: "record intro" "record panel" "signal signal"; gap: 28px clamp(55px,6vw,110px); width: min(1600px,calc(100% - 72px)); } .founding-record-stage { position: relative; grid-area: record; min-height: 760px; perspective: 1200px; } .founding-record { position: absolute; left: 50%; top: 49%; width: min(850px,61vw); aspect-ratio: 1; border: 1px solid rgba(226,218,207,.42); border-radius: 50%; background: radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(0,0,0,.52) 18.3% 19%,transparent 19.3%), radial-gradient(circle at 26% 22%,rgba(255,255,255,.09),transparent 22%), conic-gradient(from 206deg at 50% 50%,transparent 0 7%,rgba(235,220,205,.14) 10%,transparent 15% 36%,rgba(189,102,58,.08) 43%,transparent 49% 72%,rgba(255,255,255,.1) 78%,transparent 85%), repeating-radial-gradient(circle at 50% 50%,#111211 0 2px,#050605 2.6px 5px,#151615 5.5px 6.2px); box-shadow: 0 60px 130px rgba(0,0,0,.55),inset 0 0 70px rgba(255,255,255,.035),0 0 0 8px rgba(0,0,0,.42); transform: translate(-61%,-50%) rotate(-3.5deg) rotateX(5deg); transform-style: preserve-3d; } .founding-record::after { content: ""; position: absolute; inset: 2.2%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: inset -18px -14px 36px rgba(189,102,58,.055),inset 10px 7px 22px rgba(255,255,255,.025); } .founding-record-orbit { position: absolute; z-index: 1; inset: 0; border-radius: 50%; opacity: .8; background: conic-gradient(from 20deg,transparent 0 27%,rgba(255,255,255,.11) 32%,transparent 38% 67%,rgba(189,102,58,.14) 72%,transparent 81%); mix-blend-mode: screen; animation: founding-record-sheen 22s linear infinite; } .founding-record-label { position: absolute; z-index: 4; left: 50%; top: 50%; display: block; width: 36%; aspect-ratio: 1; padding: 0; border: 1px solid color-mix(in srgb,var(--founding-role-color) 75%,transparent); border-radius: 50%; background: radial-gradient(circle at 37% 25%,rgba(255,255,255,.055),transparent 35%), repeating-linear-gradient(23deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px), #1c1d1b; color: var(--founding-role-color); box-shadow: 0 15px 45px rgba(0,0,0,.68),inset 0 0 40px rgba(0,0,0,.28); text-align: center; transform: translate(-50%,-50%) rotate(3.5deg) translateZ(12px); transition: border-color .4s ease,color .4s ease; } .founding-record-label::before { content: ""; position: absolute; inset: 6.5%; border: 1px solid currentColor; border-radius: 50%; opacity: .16; pointer-events: none; } .founding-record-label > span, .founding-record-label > strong, .founding-record-label > small { position: absolute; z-index: 2; left: 50%; width: max-content; max-width: 82%; padding-left: var(--label-tracking,0); color: currentColor; white-space: nowrap; text-align: center; text-rendering: geometricPrecision; transform: translate(-50%,-50%); } .founding-record-label > span { --label-tracking: .3em; top: 31%; font: 650 clamp(10px,.86vw,14px)/1 var(--ui); letter-spacing: .3em; } .founding-record-label > i { position: absolute; z-index: 1; left: 50%; top: 49%; width: 55%; height: 1px; margin: 0; background: currentColor; opacity: .48; transform: translate(-50%,-50%); } .founding-record-label > strong { --label-tracking: .21em; top: 62%; font: 600 clamp(19px,1.82vw,29px)/1 var(--ui); letter-spacing: .21em; } .founding-record-label > small { --label-tracking: .23em; top: 75%; margin: 0; font: 650 clamp(6px,.56vw,8px)/1 var(--ui); letter-spacing: .23em; } .founding-record-spindle { position: absolute; z-index: 7; left: 50%; top: 50%; width: 16px; height: 16px; border: 3px solid #6b3c26; border-radius: 50%; background: #050505; box-shadow: 0 0 0 3px #b6734d,0 2px 9px #000; transform: translate(-50%,-50%) translateZ(20px); } .founding-track-light { position: absolute; z-index: 5; left: 50%; top: 50%; width: 28%; height: 1px; border-radius: 999px; background: linear-gradient(90deg,transparent,rgba(189,102,58,.5)); transform-origin: 0 50%; transform: rotate(var(--founding-role-turn)); transition: transform .75s cubic-bezier(.2,.8,.2,1); } .founding-track-light::after { content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; border: 1px solid #f0a474; border-radius: 50%; background: #d46f39; box-shadow: 0 0 0 7px rgba(189,102,58,.1),0 0 30px 10px rgba(222,125,68,.36); transform: translateY(-50%); animation: founding-track-pulse 2.2s ease-in-out infinite; } .founding-tonearm { position: absolute; z-index: 4; left: -14%; bottom: 12%; width: 55%; height: 18px; border: 2px solid #9b5633; border-radius: 999px; background: linear-gradient(180deg,#cf8050,#5d2d18 58%,#19100d); box-shadow: 0 8px 20px rgba(0,0,0,.7),0 0 18px rgba(189,102,58,.14); transform: rotate(24deg); transform-origin: left center; } .founding-tonearm::after { content: ""; position: absolute; right: -45px; top: 50%; width: 74px; height: 43px; border: 1px solid #5f5d57; border-radius: 3px; background: linear-gradient(150deg,#5c5b57,#1c1d1c 70%); box-shadow: 0 10px 25px #000; transform: translateY(-50%) rotate(4deg); } .founding-tonearm > i { position: absolute; right: -27px; top: 50%; z-index: 2; width: 24px; height: 2px; background: #c5784b; transform: translateY(-50%); } @keyframes founding-record-sheen { to { transform: rotate(360deg); } } @keyframes founding-track-pulse { 50% { opacity: .55; box-shadow: 0 0 0 3px rgba(189,102,58,.05),0 0 17px 5px rgba(222,125,68,.25); } } .founding-room-intro { grid-area: intro; max-width: 800px; padding-top: 8px; } .founding-room-intro .eyebrow { margin-bottom: 23px; } .founding-room-intro .section-title { max-width: 790px; margin: 0; font-size: clamp(63px,6.25vw,104px); line-height: .9; letter-spacing: -.047em; } .founding-room-intro > p:last-child { max-width: 650px; margin: 29px 0 0; color: #aaa69e; font: 400 clamp(15px,1.22vw,19px)/1.58 var(--ui); } .founding-role-panel { grid-area: panel; min-width: 0; } .founding-role-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 6px; } .founding-role-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 58px; padding: 10px 13px; border: 1px solid rgba(230,223,211,.22); border-radius: 2px; background: rgba(255,255,255,.012); color: #a09d96; font: 600 11px/1 var(--ui); cursor: pointer; transition: border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease; } .founding-role-tabs button svg { flex: 0 0 25px; width: 25px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .founding-role-tabs button:hover { color: var(--bone); border-color: rgba(230,223,211,.42); transform: translateY(-1px); } .founding-role-tabs button[aria-pressed="true"] { color: var(--founding-role-color); border-color: var(--founding-role-color); background: color-mix(in srgb,var(--founding-role-color) 8%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--founding-role-color) 13%,transparent); } .founding-role-tabs button:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .founding-role-copy { max-width: 760px; padding-top: 34px; } .founding-role-copy.is-changing { animation: founding-copy-in .5s cubic-bezier(.2,.75,.2,1); } .founding-role-copy h3 { max-width: 760px; margin: 0; color: var(--bone); font: 400 clamp(31px,3.1vw,48px)/.98 var(--display); letter-spacing: -.035em; } .founding-role-copy > p:not(.founding-disclosure) { max-width: 650px; margin: 14px 0 24px; color: #aaa69e; font: 400 14px/1.6 var(--ui); } @keyframes founding-copy-in { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } } .founding-proof-list { margin: 0; padding: 0; border-top: 1px solid rgba(230,223,211,.13); list-style: none; } .founding-proof-list li { position: relative; display: grid; grid-template-columns: 30px 1fr 10px; gap: 13px; align-items: center; min-height: 58px; border-bottom: 1px solid rgba(230,223,211,.1); color: #b8b4ab; font: 500 12px/1.3 var(--ui); } .founding-proof-list svg { width: 27px; fill: none; stroke: var(--founding-role-color); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s ease; } .founding-proof-list li > i { width: 7px; height: 7px; border-top: 1px solid var(--founding-role-color); border-right: 1px solid var(--founding-role-color); transform: rotate(45deg); } .founding-proof-list li:nth-child(2) svg { stroke: var(--lilac); } .founding-proof-list li:nth-child(3) svg { stroke: var(--teal); } .founding-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 27px; } .founding-actions .button { min-height: 58px; justify-content: space-between; padding-inline: 22px; } .founding-actions .button-primary { background: var(--copper); color: #130d09; } .founding-actions .button-secondary { color: var(--copper); border-color: rgba(189,102,58,.75); } .founding-actions .button span { font-size: 18px; transition: transform .25s ease; } .founding-actions .button:hover span { transform: translateX(4px); } .founding-disclosure { margin: 18px 0 0; color: #716f69; font: 600 9px/1.4 var(--ui); letter-spacing: .06em; } .founding-signal-rail { grid-area: signal; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 28px; border-block: 1px solid rgba(230,223,211,.26); } .founding-signal-rail > span { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 15px clamp(18px,2.1vw,34px); border-right: 1px solid rgba(230,223,211,.18); color: #c5c0b7; font: 500 12px/1.35 var(--ui); } .founding-signal-rail > span:last-child { border-right: 0; } .founding-signal-rail svg { flex: 0 0 33px; width: 33px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .founding-signal-rail > span:nth-child(2) svg { stroke: var(--copper); } .founding-signal-rail > span:nth-child(3) svg { stroke: var(--lilac); } @media (max-width: 1220px) { .founding-room-grid { grid-template-columns: minmax(0,.82fr) minmax(500px,1.18fr); gap-inline: 45px; } .founding-record { width: min(760px,64vw); transform: translate(-66%,-50%) rotate(-3.5deg) rotateX(5deg); } .founding-role-tabs button { gap: 7px; padding-inline: 9px; font-size: 10px; } .founding-role-tabs button svg { width: 22px; flex-basis: 22px; } } @media (max-width: 980px) { .founding-room { padding-top: 100px; } .founding-room-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "intro" "record" "panel" "signal"; width: min(100% - 42px,760px); gap: 35px; } .founding-room-intro { max-width: 760px; text-align: center; } .founding-room-intro .section-title { margin-inline: auto; } .founding-room-intro > p:last-child { margin-inline: auto; } .founding-record-stage { min-height: 585px; } .founding-record { left: 50%; top: 50%; width: min(700px,92vw); transform: translate(-50%,-50%) rotate(-3.5deg) rotateX(5deg); } .founding-tonearm { left: -9%; width: 44%; } .founding-role-panel { width: 100%; } .founding-role-copy { max-width: none; } .founding-signal-rail { grid-template-columns: 1fr 1fr; margin-top: 25px; } .founding-signal-rail > span:nth-child(2) { border-right: 0; } .founding-signal-rail > span:nth-child(-n+2) { border-bottom: 1px solid rgba(230,223,211,.16); } } @media (max-width: 760px) { .founding-room { padding: 86px 0 42px; } .founding-room::before { background-size: 48px 48px; } .founding-room-grid { width: min(100% - 34px,620px); gap: 29px; } .founding-room-intro .eyebrow { margin-bottom: 20px; } .founding-room-intro .section-title { max-width: 560px; font-size: clamp(48px,13.8vw,65px); line-height: .91; } .founding-room-intro > p:last-child { max-width: 520px; margin-top: 23px; font-size: 14px; line-height: 1.56; } .founding-record-stage { min-height: 430px; margin-inline: -17px; overflow: hidden; } .founding-record { width: min(560px,142vw); top: 53%; } .founding-record-label { width: 38%; } .founding-record-label > span { font-size: 10px; } .founding-record-label > strong { font-size: 20px; } .founding-record-label > small { font-size: 6px; } .founding-record-spindle { width: 11px; height: 11px; border-width: 2px; } .founding-tonearm { display: none; } .founding-role-tabs { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; } .founding-role-tabs button { min-height: 60px; font-size: 11px; } .founding-role-tabs button svg { width: 24px; flex-basis: 24px; } .founding-role-copy { padding-top: 27px; text-align: center; } .founding-role-copy h3 { max-width: 560px; margin-inline: auto; font-size: clamp(37px,10.5vw,50px); line-height: .98; } .founding-role-copy > p:not(.founding-disclosure) { margin: 16px auto 25px; font-size: 13px; line-height: 1.58; } .founding-proof-list { text-align: left; } .founding-proof-list li { min-height: 61px; font-size: 12px; } .founding-actions { grid-template-columns: 1fr; gap: 9px; margin-top: 24px; } .founding-actions .button { width: 100%; min-height: 58px; } .founding-disclosure { text-align: center; font-size: 8px; } .founding-signal-rail { gap: 0; margin-top: 17px; } .founding-signal-rail > span { min-height: 76px; gap: 11px; padding: 12px 13px; font-size: 10px; } .founding-signal-rail svg { width: 27px; flex-basis: 27px; } } @media (max-width: 390px) { .founding-room-grid { width: min(100% - 28px,620px); } .founding-room-intro .section-title { font-size: 48px; } .founding-record-stage { min-height: 390px; margin-inline: -14px; } .founding-record { width: 500px; } .founding-role-tabs button { min-height: 57px; gap: 7px; padding-inline: 7px; font-size: 10px; } .founding-signal-rail > span { padding-inline: 10px; font-size: 9px; } } @media (prefers-reduced-motion: reduce) { .founding-record-orbit,.founding-track-light::after { animation: none !important; } .founding-role-copy.is-changing { animation: none !important; } .founding-track-light,.founding-record-label,.founding-role-tabs button,.founding-actions .button span { transition: none !important; } } /* Verification instrument — pilot standards */ .gate-section.verification-section { --verification-turn: 0deg; position: relative; isolation: isolate; overflow: hidden; padding: clamp(58px,5.8vw,92px) 0 clamp(92px,8vw,132px); border-top: 1px solid rgba(231,154,98,.13); background: radial-gradient(circle at 63% 44%,rgba(231,154,98,.045),transparent 26%), linear-gradient(180deg,#050706,#030504 72%,#050706); } .verification-section::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 65% 48%,#000,transparent 68%); } .verification-rule { display: flex; align-items: center; gap: 26px; margin-bottom: clamp(50px,5vw,78px); } .verification-rule i { flex: 1; height: 1px; background: rgba(189,102,58,.68); } .verification-rule span { color: var(--copper); font: 700 9px/1 var(--ui); letter-spacing: .38em; text-transform: uppercase; white-space: nowrap; } .verification-grid { display: grid; grid-template-columns: minmax(500px,.78fr) minmax(0,1.22fr); gap: clamp(44px,4.6vw,78px); align-items: center; } .verification-intro { align-self: center; } .verification-intro .eyebrow { margin-bottom: 30px; } .verification-heading { margin: 0; color: var(--bone); font: 400 clamp(62px,4.6vw,88px)/.91 var(--display); letter-spacing: -.048em; text-transform: uppercase; } .verification-heading span { display: block; } .verification-heading-rule { position: relative; width: min(100%,430px); height: 1px; margin: 38px 0 29px; background: linear-gradient(90deg,var(--copper),rgba(231,154,98,.2)); } .verification-heading-rule::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; border: 1px solid var(--copper); border-radius: 50%; background: #050706; transform: translateY(-50%); } .verification-intro > p:last-child { max-width: 430px; margin: 0; color: #a8a39a; font: 400 clamp(16px,1.35vw,21px)/1.55 var(--ui); } .verification-instrument { display: grid; grid-template-columns: minmax(440px,1fr) minmax(250px,.56fr); gap: clamp(30px,3vw,48px); align-items: center; min-width: 0; } .verification-dial { position: relative; justify-self: center; width: min(100%,560px); aspect-ratio: 1; border: 1px solid rgba(231,154,98,.22); border-radius: 50%; background: repeating-radial-gradient(circle,rgba(231,154,98,.075) 0 1px,transparent 1px 6px),radial-gradient(circle at 50% 45%,rgba(231,154,98,.035),rgba(3,5,4,.97) 67%); box-shadow: 0 0 80px rgba(0,0,0,.5),inset 0 0 70px rgba(0,0,0,.62); } .verification-dial::before,.verification-dial::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .verification-dial::before { inset: 4.5%; border: 1px solid rgba(230,223,211,.1); box-shadow: inset 0 0 0 9px rgba(0,0,0,.16); } .verification-dial::after { inset: 21%; border: 1px dashed rgba(231,154,98,.4); } .verification-orbit { position: absolute; z-index: 2; inset: 5.5%; border-radius: 50%; background: conic-gradient(from 224deg,transparent 0 2%,rgba(231,154,98,.5) 5%,#f4a168 18%,#e78f55 27%,rgba(231,154,98,.38) 32%,transparent 36% 100%); filter: drop-shadow(0 0 8px rgba(231,154,98,.8)) drop-shadow(0 0 19px rgba(231,154,98,.24)); mask: radial-gradient(circle,transparent 0 90.5%,#000 91.5% 97%,transparent 98%); transform: rotate(var(--verification-turn)); transition: transform .72s cubic-bezier(.2,.8,.2,1); } .verification-orbit::after { content: ""; position: absolute; left: 7.5%; top: 29%; width: 9px; height: 9px; border: 2px solid #f4a168; border-radius: 50%; background: #0b0806; box-shadow: 0 0 0 5px rgba(231,154,98,.09),0 0 24px rgba(231,154,98,.75); } .verification-inner-orbit { position: absolute; z-index: 2; inset: 25%; border: 1px dotted rgba(230,223,211,.25); border-radius: 50%; animation: verification-inner-spin 26s linear infinite; } .verification-inner-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #b7afa2; box-shadow: 0 0 8px rgba(255,255,255,.16); } .verification-inner-orbit i:nth-child(1) { left: 11%; top: 12%; } .verification-inner-orbit i:nth-child(2) { right: 11%; top: 12%; } .verification-inner-orbit i:nth-child(3) { right: 11%; bottom: 12%; } .verification-inner-orbit i:nth-child(4) { left: 11%; bottom: 12%; } .verification-axis { position: absolute; z-index: 1; background: rgba(230,223,211,.19); } .verification-axis-horizontal { left: 4%; right: 4%; top: 50%; height: 1px; } .verification-axis-vertical { top: 4%; bottom: 4%; left: 50%; width: 1px; } .verification-center { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-content: center; width: 30%; aspect-ratio: 1; border: 1px solid rgba(231,154,98,.5); border-radius: 50%; color: #c9c2b7; text-align: center; font: 600 9px/1.55 var(--ui); letter-spacing: .18em; text-transform: uppercase; background: rgba(4,6,5,.93); transform: translate(-50%,-50%); } .verification-center span { display: block; } .verification-center i { width: 78px; max-width: 70%; height: 1px; margin: 13px auto 0; background: linear-gradient(90deg,transparent,var(--copper),transparent); } .verification-center b { display: block; margin-top: 8px; color: var(--copper); font: 500 8px/1 var(--ui); letter-spacing: .2em; } .verification-node { position: absolute; z-index: 5; display: grid; place-content: center; width: 58px; aspect-ratio: 1; border: 1px solid rgba(230,223,211,.44); border-radius: 50%; color: var(--bone); font: 400 23px/1 var(--display); background: #070908; transition: color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease,background .35s ease; } .verification-node-rights { left: 0; top: 50%; transform: translate(-23%,-50%); } .verification-node-money { left: 50%; top: 0; transform: translate(-50%,-23%); } .verification-node-playback { right: 0; top: 50%; transform: translate(23%,-50%); } .verification-node-token { left: 50%; bottom: 0; transform: translate(-50%,23%); } .verification-section[data-verification-gate="rights"] .verification-node-rights, .verification-section[data-verification-gate="money"] .verification-node-money, .verification-section[data-verification-gate="playback"] .verification-node-playback, .verification-section[data-verification-gate="token"] .verification-node-token { color: var(--copper); border-color: var(--copper); background: #160f0b; box-shadow: 0 0 0 5px rgba(231,154,98,.08),0 0 25px rgba(231,154,98,.32); } .verification-detail { position: relative; min-width: 0; padding: 72px 0 72px clamp(30px,3.2vw,54px); border-left: 1px solid rgba(230,223,211,.19); transition: opacity .18s ease,transform .18s ease; } .verification-detail.is-changing { opacity: .28; transform: translateX(9px); } .verification-detail-number { display: flex; align-items: baseline; gap: 14px; font-family: var(--ui); text-transform: uppercase; letter-spacing: .17em; } .verification-detail-number strong { color: var(--copper); font: 500 17px/1 var(--ui); } .verification-detail-number span { color: var(--copper); } .verification-detail-number b { color: var(--bone); font: 500 12px/1.2 var(--ui); } .verification-detail-line { position: relative; width: 120px; height: 1px; margin: 36px 0; background: linear-gradient(90deg,var(--copper),rgba(231,154,98,.12)); } .verification-detail-line i { position: absolute; right: 0; top: 50%; width: 9px; height: 9px; border: 1px solid var(--copper); border-radius: 50%; background: #050706; transform: translateY(-50%); } .verification-detail > p { max-width: 330px; margin: 0; color: var(--bone); font: 400 clamp(24px,1.6vw,30px)/1.22 var(--display); letter-spacing: -.018em; } .verification-detail-signal { display: flex; align-items: end; gap: 4px; height: 22px; margin: 34px 0 18px; } .verification-detail-signal i { width: 2px; height: 11px; background: var(--lilac); animation: verification-signal 1.1s ease-in-out infinite alternate; } .verification-detail-signal i:nth-child(2) { height: 19px; animation-delay: -.45s; } .verification-detail-signal i:nth-child(3) { height: 14px; animation-delay: -.8s; } .verification-detail small { color: var(--lilac); font: 600 9px/1.4 var(--ui); letter-spacing: .24em; text-transform: uppercase; } .verification-controls { display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(52px,5vw,82px); border: 1px solid rgba(189,102,58,.45); } .verification-controls button { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; min-width: 0; min-height: 110px; padding: 20px 27px; border: 0; border-right: 1px solid rgba(189,102,58,.35); color: var(--bone); text-align: left; background: rgba(4,6,5,.65); cursor: pointer; transition: background .3s ease,color .3s ease,box-shadow .3s ease; } .verification-controls button:last-child { border-right: 0; } .verification-controls button::before { content: ""; position: absolute; left: 50%; top: -1px; width: 13px; height: 9px; background: var(--copper); clip-path: polygon(50% 0,100% 100%,0 100%); opacity: 0; transform: translate(-50%,-100%); transition: opacity .3s ease; } .verification-controls button span { color: var(--bone); font: 400 34px/1 var(--display); } .verification-controls button strong { overflow: hidden; color: inherit; font: 600 10px/1.35 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } .verification-controls button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .verification-controls button[aria-pressed="true"] { color: var(--copper); background: linear-gradient(110deg,rgba(231,154,98,.16),rgba(231,154,98,.025)); box-shadow: inset 0 0 0 1px var(--copper),0 0 30px rgba(231,154,98,.05); } .verification-controls button[aria-pressed="true"]::before { opacity: 1; } .verification-controls button:hover { background: rgba(231,154,98,.07); } .verification-controls button:focus-visible { z-index: 2; outline: 2px solid var(--teal); outline-offset: 4px; } @keyframes verification-inner-spin { to { transform: rotate(360deg); } } @keyframes verification-signal { to { transform: scaleY(.45); opacity: .45; } } @media (max-width: 1220px) { .verification-grid { grid-template-columns: minmax(350px,.65fr) minmax(620px,1.35fr); gap: 45px; } .verification-instrument { grid-template-columns: minmax(390px,1fr) minmax(220px,.56fr); gap: 28px; } .verification-controls button { gap: 12px; padding-inline: 18px; } .verification-controls button span { font-size: 29px; } .verification-controls button strong { font-size: 9px; } } @media (max-width: 1040px) { .verification-grid { grid-template-columns: 1fr; } .verification-intro { max-width: 820px; } .verification-heading { font-size: clamp(68px,9.2vw,102px); } .verification-instrument { grid-template-columns: minmax(400px,1fr) minmax(260px,.62fr); } } @media (max-width: 760px) { .gate-section.verification-section { padding: 48px 0 84px; } .verification-section::before { background-size: 48px 48px; } .verification-rule { width: min(100% - 34px,620px); gap: 14px; margin-bottom: 62px; } .verification-rule span { font-size: 7px; letter-spacing: .28em; } .verification-grid { width: min(100% - 34px,620px); gap: 42px; } .verification-intro .eyebrow { margin-bottom: 22px; } .verification-heading { font-size: clamp(51px,14.2vw,68px); line-height: .89; letter-spacing: -.045em; } .verification-heading-rule { width: 100%; margin: 28px 0 23px; } .verification-intro > p:last-child { font-size: 15px; line-height: 1.52; } .verification-instrument { grid-template-columns: 1fr; gap: 25px; } .verification-dial { width: min(100%,520px); } .verification-node { width: 52px; font-size: 21px; } .verification-center { width: 32%; font-size: 8px; } .verification-detail { padding: 25px 23px 27px; border: 1px solid rgba(189,102,58,.65); } .verification-detail-number b { font-size: 11px; } .verification-detail-line { margin: 25px 0; } .verification-detail > p { max-width: 520px; font-size: clamp(27px,8vw,38px); } .verification-detail-signal { position: absolute; right: 24px; top: 16px; margin: 0; } .verification-detail small { font-size: 8px; } .verification-controls { width: min(100% - 34px,620px); grid-template-columns: 1fr 1fr; margin-top: 14px; } .verification-controls button { grid-template-columns: auto 1fr auto; min-height: 112px; border-bottom: 1px solid rgba(189,102,58,.35); padding: 19px 17px; } .verification-controls button:nth-child(2n) { border-right: 0; } .verification-controls button:nth-last-child(-n+2) { border-bottom: 0; } .verification-controls button span { font-size: 30px; } .verification-controls button strong { font-size: 8px; white-space: normal; } } @media (max-width: 390px) { .verification-rule,.verification-grid,.verification-controls { width: min(100% - 28px,620px); } .verification-heading { font-size: 50px; } .verification-dial { width: 338px; max-width: 100%; } .verification-node { width: 47px; font-size: 19px; } .verification-center { font-size: 7px; letter-spacing: .12em; } .verification-controls button { min-height: 105px; gap: 9px; padding-inline: 13px; } .verification-controls button span { font-size: 27px; } .verification-controls button strong { font-size: 7px; } .verification-controls button svg { width: 14px; } } @media (prefers-reduced-motion: reduce) { .verification-inner-orbit,.verification-detail-signal i { animation: none !important; } .verification-orbit,.verification-node,.verification-detail,.verification-controls button { transition: none !important; } } /* VibraMusic 2.5 - Founding Session */ .artist-application-page .application-portal { padding-top: clamp(38px,3vw,54px); } .artist-application-page .application-atmosphere { height: min(920px,72vw); } .artist-application-page .application-atmosphere::after { background: linear-gradient(90deg,rgba(6,8,7,.28),rgba(6,8,7,.46) 48%,rgba(6,8,7,.86) 82%), linear-gradient(180deg,rgba(6,8,7,.16),rgba(6,8,7,.2) 62%,#080a09 96%); } .artist-application-page .application-atmosphere img { filter: grayscale(.24) contrast(1.1) saturate(.78); opacity: .68; } .artist-application-page .application-portal-grid { width: min(1520px,calc(100% - 72px)); grid-template-columns: minmax(0,.74fr) minmax(680px,1.26fr); gap: clamp(44px,3.4vw,66px); } .artist-application-page .application-hero-copy { max-width: 600px; padding-bottom: 0; } .artist-application-page .application-hero-copy h1 { max-width: 590px; font-size: clamp(62px,4.8vw,90px); line-height: .92; } .artist-application-page .application-console { background: linear-gradient(145deg,rgba(255,255,255,.018),transparent 31%),rgba(10,12,11,.975); box-shadow: 0 48px 130px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.018); } .artist-application-page .application-progress { padding-block: 13px 11px; } .artist-application-page .application-progress button { position: relative; min-height: 48px; } .artist-application-page .application-progress button::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -12px; height: 2px; background: transparent; transition: background .22s ease,box-shadow .22s ease; } .artist-application-page .application-progress button.is-active::after { background: var(--copper); box-shadow: 0 0 16px rgba(231,154,98,.32); } .artist-application-page .application-progress button.is-complete::after { background: var(--teal); } .artist-application-page .application-step { padding: 24px clamp(24px,3vw,40px) 22px; } .artist-application-page .application-step-intro { min-height: 19px; margin: 8px 0 20px; color: #aaa69d; } .artist-application-page .application-step .field { margin-bottom: 13px; } .application-role-control { margin-bottom: 16px; } .application-role-label { display: block; margin-bottom: 9px; color: #d0cbc2; font: 500 10px/1.2 var(--ui); } .application-role-picker { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #464943; background: #090b0a; } .application-role-picker button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 62px; padding: 9px 8px; border: 0; border-right: 1px solid #393c37; background: transparent; color: #8d8b85; font: 500 11px/1 var(--ui); cursor: pointer; transition: color .2s ease,background .2s ease,box-shadow .2s ease; } .application-role-picker button:last-child { border-right: 0; } .application-role-picker button:hover,.application-role-picker button:focus-visible { color: var(--bone); background: rgba(255,255,255,.025); outline: none; } .application-role-picker button:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); } .application-role-picker button.is-active { color: var(--bone); background: linear-gradient(110deg,rgba(231,154,98,.18),rgba(231,154,98,.045)); box-shadow: inset 0 0 0 1px var(--copper),0 0 24px rgba(231,154,98,.06); } .application-role-picker svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .application-role-picker button.is-active svg { color: var(--copper); } .application-prepare { border-top: 1px solid #30332f; } .application-prepare summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 51px; padding: 11px clamp(24px,3vw,40px); color: #c3beb5; font: 500 10px/1.3 var(--ui); cursor: pointer; list-style: none; } .application-prepare summary::-webkit-details-marker { display: none; } .application-prepare summary:hover,.application-prepare summary:focus-visible { color: var(--bone); background: rgba(255,255,255,.018); outline: none; } .application-prepare summary:focus-visible { box-shadow: inset 0 0 0 1px var(--teal); } .application-prepare summary svg { width: 18px; height: 18px; fill: none; stroke: var(--copper); stroke-width: 1.5; transition: transform .22s ease; } .application-prepare[open] summary svg { transform: rotate(180deg); } .application-prepare > div { padding: 1px clamp(24px,3vw,40px) 21px; border-top: 1px solid #282b27; } .application-prepare ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0; padding: 0; list-style: none; } .application-prepare li { min-height: 54px; padding: 14px 15px 12px 19px; border-right: 1px solid #2d302c; color: #98958e; font-size: 9px; line-height: 1.45; } .application-prepare li:first-child { padding-left: 0; } .application-prepare li:last-child { border-right: 0; padding-right: 0; } .application-prepare li::before { content: "+"; margin-right: 8px; color: var(--teal); } .application-prepare p { margin: 6px 0 0; color: #747770; font: 500 8px/1.5 var(--ui); letter-spacing: .03em; } @media (max-width: 1280px) { .artist-application-page .application-portal-grid { width: min(100% - 48px,1380px); grid-template-columns: minmax(0,.8fr) minmax(600px,1.2fr); gap: 40px; } .application-role-picker button { gap: 6px; font-size: 10px; } } @media (max-width: 980px) { .artist-application-page .application-portal-grid { grid-template-columns: 1fr; } .artist-application-page .application-console { max-width: 860px; } } @media (max-width: 760px) { .artist-application-page .application-portal { padding-top: 38px; } .artist-application-page .application-atmosphere { height: 790px; } .artist-application-page .application-atmosphere::after { background: linear-gradient(180deg,rgba(6,8,7,.22),rgba(6,8,7,.34) 62%,#080a09 98%); } .artist-application-page .application-atmosphere img { object-position: 40% top; opacity: .58; } .artist-application-page .application-portal-grid { width: min(100% - 30px,1380px); gap: 24px; } .artist-application-page .application-hero-copy { min-width: 0; width: 100%; padding-top: 7px; } .artist-application-page .application-deck { margin-top: 18px; font-size: 14px; } .artist-application-page .application-hero-actions { margin-top: 22px; } .artist-application-page .application-text-link { max-width: 100%; font-size: 9px; letter-spacing: .1em; } .artist-application-page .application-hero-proof { display: flex; flex-wrap: nowrap; gap: 19px; margin-top: 20px; padding-block: 13px; overflow-x: auto; border-block: 1px solid rgba(255,255,255,.08); scrollbar-width: none; } .artist-application-page .application-hero-proof::-webkit-scrollbar { display: none; } .artist-application-page .application-hero-proof span { flex: 0 0 auto; white-space: nowrap; } .artist-application-page .application-step { padding: 24px 17px 22px; } .artist-application-page .application-step-intro { min-height: 41px; margin-bottom: 16px; font-size: 12px; } .application-role-picker button { flex-direction: column; gap: 6px; min-height: 72px; font-size: 9px; } .application-role-picker svg { width: 21px; height: 21px; flex-basis: 21px; } .application-prepare summary { min-height: 54px; padding-inline: 17px; font-size: 12px; } .application-prepare > div { padding-inline: 17px; } .application-prepare ul { grid-template-columns: 1fr; } .application-prepare li,.application-prepare li:first-child,.application-prepare li:last-child { min-height: 42px; padding: 12px 0; border-right: 0; border-bottom: 1px solid #2d302c; font-size: 10px; } .application-prepare li:last-child { border-bottom: 0; } .application-prepare p { font-size: 9px; } .artist-application-page .application-trust { grid-template-columns: repeat(3,1fr); } .artist-application-page .application-trust span { flex-direction: column; justify-content: center; min-height: 82px; padding: 10px 6px; border-right: 1px solid #30332f; border-bottom: 0; text-align: center; } .artist-application-page .application-trust span:last-child { border-right: 0; } } @media (max-width: 430px) { .artist-application-page .application-hero-copy h1 { max-width: 100%; font-size: clamp(46px,13.2vw,56px); } .artist-application-page .application-console { width: auto; max-width: none; margin-inline: -15px; overflow: hidden; } .artist-application-page .application-step .form-row > * { min-width: 0; } .artist-application-page .application-progress button::after { bottom: -14px; } .application-role-picker button { padding-inline: 3px; font-size: 8px; } .artist-application-page .application-trust span { font-size: 6px; letter-spacing: .055em; } } /* VibraMusic 2.7 — role-aware Studio command room */ .studio-command-page { --studio-role-accent: var(--copper); --studio-role-rgb: 231,154,98; background: #070908; } .studio-command-page[data-studio-role="manager"] { --studio-role-accent: var(--teal); --studio-role-rgb: 94,190,166; } .studio-command-page[data-studio-role="label"] { --studio-role-accent: var(--lilac); --studio-role-rgb: 184,151,211; } .studio-command-page[data-studio-role="publisher"] { --studio-role-accent: #e5b36d; --studio-role-rgb: 229,179,109; } .studio-role-hero { position: relative; min-height: 0; padding: clamp(72px,7vw,112px) 0 30px; overflow: visible; background: radial-gradient(circle at 81% 36%,rgba(var(--studio-role-rgb),.11),transparent 31%), linear-gradient(180deg,#090b0a 0%,#070908 100%); transition: background .45s ease; } .studio-role-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(180deg,black,transparent 84%); } .studio-role-hero .wrap { position: relative; z-index: 1; width: min(1480px,calc(100% - 64px)); } .studio-role-hero .studio-hero-copy { max-width: 870px; } .studio-role-hero .studio-hero-copy h1 { max-width: 820px; margin-top: 13px; font-size: clamp(56px,4.8vw,78px); line-height: .91; letter-spacing: -.045em; } .studio-role-hero .studio-hero-copy > p:last-child { max-width: 720px; margin-top: 18px; color: #b5b0a7; font-size: 15px; line-height: 1.65; } .studio-role-deck { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(6,8,7,.82); box-shadow: 0 24px 70px rgba(0,0,0,.24); backdrop-filter: blur(18px); } .studio-role-deck button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 78px; padding: 15px 18px; border: 0; border-right: 1px solid rgba(255,255,255,.1); color: #8f918b; background: linear-gradient(180deg,rgba(255,255,255,.016),transparent); font: 600 10px/1 var(--ui); letter-spacing: .17em; text-transform: uppercase; cursor: pointer; transition: color .25s ease,background .25s ease,box-shadow .25s ease; } .studio-role-deck button:last-child { border-right: 0; } .studio-role-deck button svg { width: 25px; height: 25px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .studio-role-deck button:hover,.studio-role-deck button:focus-visible { color: var(--bone); background: rgba(255,255,255,.035); outline: none; } .studio-role-deck button:focus-visible { box-shadow: inset 0 0 0 1px var(--studio-role-accent); } .studio-role-deck button.is-active { color: var(--studio-role-accent); background: linear-gradient(180deg,rgba(var(--studio-role-rgb),.12),rgba(var(--studio-role-rgb),.025)); } .studio-role-deck button.is-active::before { content: ""; position: absolute; inset: auto 20px -1px; height: 2px; background: var(--studio-role-accent); box-shadow: 0 0 18px rgba(var(--studio-role-rgb),.65); } .studio-role-deck button.is-active::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 31px; background: linear-gradient(var(--studio-role-accent),transparent); opacity: .8; } .studio-demo-page { padding-top: 8px; } .studio-demo-page .wrap { width: min(1480px,calc(100% - 64px)); } .studio-command-page .studio-demo-shell { border-color: rgba(var(--studio-role-rgb),.24); box-shadow: 0 54px 145px rgba(0,0,0,.52),0 0 0 1px rgba(var(--studio-role-rgb),.035) inset; transition: border-color .4s ease,box-shadow .4s ease; } .studio-command-page .studio-demo-shell::after { background: linear-gradient(90deg,transparent,var(--studio-role-accent),transparent); opacity: .65; } .studio-command-page .studio-demo-shell:hover { border-color: rgba(var(--studio-role-rgb),.38); box-shadow: 0 60px 160px rgba(0,0,0,.56),0 0 58px rgba(var(--studio-role-rgb),.045); } .studio-command-page .studio-side { background: linear-gradient(180deg,#080a09,#070908 64%) !important; } .studio-side-brand strong { color: var(--bone); } .studio-side-brand small { color: var(--studio-role-accent); } .studio-side-nav button { display: flex; align-items: center; gap: 11px; } .studio-side-nav button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .studio-side-nav button span { display: inline; padding: 0; color: inherit; border: 0; font-size: inherit; } .studio-command-page .studio-side-nav button.active { color: var(--studio-role-accent); border-left-color: var(--studio-role-accent); background: linear-gradient(90deg,rgba(var(--studio-role-rgb),.12),rgba(var(--studio-role-rgb),.02)); } .studio-command-page .studio-main { background: linear-gradient(145deg,#0b0e0c,#090b0a 54%,#0a0c0b); } .studio-role-label { display: block; margin-bottom: 7px; color: var(--studio-role-accent); font: 650 8px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; } .studio-demo-heading h2 { font-size: clamp(31px,2.4vw,39px); letter-spacing: -.025em; } .studio-demo-heading p { max-width: 560px; } .studio-command-page .studio-create-button { color: #080a09; border-color: var(--studio-role-accent); background: var(--studio-role-accent); } .studio-command-page .range-switch button.active,.studio-command-page .range-switch button[aria-pressed="true"] { color: var(--studio-role-accent); border-color: rgba(var(--studio-role-rgb),.42); background: rgba(var(--studio-role-rgb),.09); } .studio-demo-banner { border-color: rgba(var(--studio-role-rgb),.18); background: rgba(var(--studio-role-rgb),.045); } .studio-demo-banner i { background: var(--studio-role-accent); box-shadow: 0 0 13px rgba(var(--studio-role-rgb),.72); } .studio-command-page .studio-kpis article:hover,.studio-command-page .studio-demo-panel:hover { border-color: rgba(var(--studio-role-rgb),.34); } .studio-command-page .studio-kpis strong,.studio-command-page .studio-panel-head strong { text-wrap: balance; } .chart-legend b { color: inherit; font: inherit; } .studio-command-page.is-role-changing .studio-demo-heading > div:first-child,.studio-command-page.is-role-changing .studio-kpis { animation: studio-role-enter .42s cubic-bezier(.2,.8,.2,1); } @keyframes studio-role-enter { from { opacity:.22; transform:translateY(7px); } to { opacity:1; transform:none; } } @media (max-width: 980px) { .studio-role-hero .wrap,.studio-demo-page .wrap { width: min(100% - 40px,1480px); } .studio-demo-shell { grid-template-columns: 190px minmax(0,1fr); } .studio-command-page .studio-main { padding: 22px; } .studio-demo-heading { align-items: flex-start; } .studio-heading-actions { flex-direction: column; align-items: stretch; } .studio-create-button { width: 100%; } .studio-kpis { grid-template-columns: repeat(2,1fr); } } @media (max-width: 760px) { .studio-role-hero { padding: 72px 0 26px; } .studio-role-hero .wrap,.studio-demo-page .wrap { width: min(100% - 22px,1480px); } .studio-role-hero .studio-hero-copy h1 { max-width: 600px; font-size: clamp(49px,13vw,64px); } .studio-role-hero .studio-hero-copy > p:last-child { font-size: 13px; line-height: 1.58; } .studio-role-deck { grid-template-columns: repeat(2,1fr); margin-top: 24px; } .studio-role-deck button { min-height: 84px; border-bottom: 1px solid rgba(255,255,255,.1); } .studio-role-deck button:nth-child(2) { border-right: 0; } .studio-role-deck button:nth-child(n+3) { border-bottom: 0; } .studio-role-deck button.is-active::after { height: 26px; } .studio-demo-page { padding-top: 4px; } .studio-command-page .studio-demo-shell { display: block; min-height: 0; overflow: hidden; } .studio-demo-shell .studio-side { position: relative; width: 100%; padding: 0 !important; border: 0; } .studio-side-brand { display: none; } .studio-side-nav { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.1); scrollbar-width: none; scroll-snap-type: x proximity; } .studio-side-nav::-webkit-scrollbar { display: none; } .studio-side-nav button { flex: 0 0 auto; width: auto; min-width: 103px; min-height: 60px; justify-content: center; padding: 10px 13px; border: 0; border-bottom: 2px solid transparent; scroll-snap-align: start; } .studio-side-nav button svg { width: 16px; height: 16px; } .studio-command-page .studio-side-nav button.active { border-left-color: transparent; border-bottom-color: var(--studio-role-accent); background: linear-gradient(0deg,rgba(var(--studio-role-rgb),.12),rgba(var(--studio-role-rgb),.015)); } .studio-command-page .studio-main { padding: 20px 15px 23px; } .studio-demo-heading { display: grid; grid-template-columns: 1fr; gap: 17px; padding-bottom: 17px; } .studio-demo-heading h2 { font-size: clamp(32px,9vw,41px); } .studio-heading-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; } .studio-create-button { min-width: 142px; min-height: 44px; padding-inline: 14px; } .studio-demo-banner { align-items: flex-start; gap: 7px; } .studio-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .studio-kpis article { min-height: 108px; padding: 14px 12px; } .studio-kpis strong { font-size: clamp(23px,7vw,29px); } .studio-overview-grid,.studio-overview-bottom { grid-template-columns: 1fr; } } @media (max-width: 430px) { .studio-role-hero .studio-hero-copy h1 { font-size: clamp(45px,13.1vw,56px); } .studio-role-deck button { gap: 8px; min-height: 80px; padding-inline: 9px; font-size: 9px; letter-spacing: .13em; } .studio-role-deck button svg { width: 22px; height: 22px; } .studio-command-page .studio-main { padding-inline: 12px; } .studio-heading-actions { grid-template-columns: minmax(0,1fr) minmax(132px,.78fr); } .range-switch button { min-width: 39px; min-height: 44px; padding-inline: 7px; } .studio-create-button { min-width: 0; font-size: 8px; } .studio-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .studio-kpis article { min-width: 0; } .studio-kpis span { min-height: 20px; line-height: 1.25; } .studio-kpis small { line-height: 1.35; } } @media (prefers-reduced-motion: reduce) { .studio-command-page.is-role-changing .studio-demo-heading > div:first-child,.studio-command-page.is-role-changing .studio-kpis { animation: none; } } /* VibraMusic 2.7.1 — the Vibra Brief presentation layer */ .brief-launch { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; cursor: pointer; } .brief-launch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; } body.vibra-brief-open { overflow: hidden; } .vibra-brief { --brief-accent: var(--copper); --brief-rgb: 231,154,98; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--bone); background: #050706; overflow: hidden; } .vibra-brief[data-brief-chapter="2"] { --brief-accent: var(--lilac); --brief-rgb: 184,151,211; } .vibra-brief[data-brief-chapter="3"] { --brief-accent: var(--teal); --brief-rgb: 94,190,166; } .vibra-brief[data-brief-chapter="4"] { --brief-accent: #e5b36d; --brief-rgb: 229,179,109; } .vibra-brief::backdrop { background: rgba(0,0,0,.92); backdrop-filter: blur(12px); } .vibra-brief-frame { position: relative; display: grid; grid-template-rows: 66px minmax(0,1fr) 142px; width: 100%; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 61% 50%,rgba(var(--brief-rgb),.055),transparent 31%), linear-gradient(115deg,#070908,#040605 62%,#070807); transition: background .4s ease; } .vibra-brief-frame::before { content: ""; position: absolute; inset: 66px 0 142px; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at center,black,transparent 77%); } .vibra-brief-topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px,4.6vw,88px); border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(5,7,6,.92); } .vibra-brief-topbar > strong { font: 650 17px/1 var(--ui); letter-spacing: .42em; text-transform: uppercase; } .vibra-brief-topbar > div { display: flex; align-items: center; gap: 42px; } .vibra-brief-topbar [data-brief-count] { color: #827f78; font: 500 16px/1 var(--display); letter-spacing: .11em; } .vibra-brief-topbar [data-brief-count] b { color: var(--brief-accent); font-weight: 600; } .vibra-brief-topbar button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--bone); background: transparent; cursor: pointer; } .vibra-brief-topbar button:hover,.vibra-brief-topbar button:focus-visible { color: var(--brief-accent); outline: none; } .vibra-brief-topbar button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.25; } .vibra-brief-stage { position: relative; z-index: 1; min-height: 0; overflow: hidden; } .vibra-brief-slide { position: relative; width: 100%; height: 100%; padding: clamp(34px,4.4vh,54px) clamp(36px,5.2vw,100px) 16px; } .vibra-brief-slide.is-active { animation: brief-slide-enter .55s cubic-bezier(.2,.82,.2,1); } @keyframes brief-slide-enter { from { opacity:0; transform:translateY(11px); } to { opacity:1; transform:none; } } .vibra-brief-copy { position: relative; z-index: 2; max-width: 780px; } .vibra-brief-copy h2 { max-width: 760px; margin: 0; font: 400 clamp(48px,3.65vw,70px)/.98 var(--display); letter-spacing: -.04em; text-wrap: balance; } .vibra-brief-copy h2 em { color: var(--brief-accent); font-style: normal; } .vibra-brief-copy p { max-width: 540px; margin: 20px 0 0; color: #a7a49d; font-size: clamp(14px,1vw,18px); line-height: 1.58; } .brief-flow { position: relative; } .brief-direct-flow { height: clamp(260px,33vh,350px); margin: clamp(-52px,-4vh,-18px) 0 0; } .brief-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .brief-flow-lines path { fill: none; stroke: var(--brief-accent); stroke-width: 1.35; opacity: .76; stroke-dasharray: 7 5; animation: brief-signal 11s linear infinite; } .brief-flow-lines circle { fill: var(--brief-accent); filter: drop-shadow(0 0 13px rgba(var(--brief-rgb),.85)); animation: brief-pulse 2.2s ease-in-out infinite; } @keyframes brief-signal { to { stroke-dashoffset: -120; } } @keyframes brief-pulse { 50% { opacity:.42; transform:scale(.72); transform-origin:center; } } .brief-flow-node { position: absolute; display: grid; grid-template-columns: auto minmax(0,180px); align-items: center; column-gap: 17px; color: var(--brief-accent); } .brief-flow-node strong { color: var(--brief-accent); font: 650 10px/1.55 var(--ui); letter-spacing: .16em; text-transform: uppercase; } .brief-flow-node b { grid-column: 2; color: var(--bone); font: 400 27px/1 var(--display); } .brief-node-icon { display: grid; grid-row: 1 / span 2; place-items: center; width: 80px; height: 80px; border: 1px solid var(--brief-accent); border-radius: 50%; color: var(--brief-accent); background: radial-gradient(circle,rgba(var(--brief-rgb),.1),transparent 70%); box-shadow: 0 0 30px rgba(var(--brief-rgb),.055); } .brief-node-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .brief-v-mark { color: var(--bone); font: 400 34px/1 var(--display); } .brief-node-fan { left: 3%; top: 37%; } .brief-node-purchase { left: 39%; top: 35%; } .brief-node-pool { left: 76%; top: 6%; } .brief-node-vibra { left: 76%; top: 68%; } .brief-direct-flow > small { position: absolute; left: 43%; top: 70%; color: #7d7a74; font-size: 10px; } .vibra-brief-truth { position: absolute; left: clamp(36px,5.2vw,100px); bottom: 15px; display: flex; align-items: center; gap: 20px; } .vibra-brief-truth > i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--brief-accent); border-radius: 50%; color: var(--brief-accent); } .vibra-brief-truth svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .vibra-brief-truth p { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.2); color: #cac5bc; font: 400 14px/1.45 var(--display); } .vibra-brief-truth strong { color: var(--brief-accent); font-weight: 400; } .brief-linear-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: clamp(42px,7vh,82px); border-block: 1px solid rgba(255,255,255,.12); } .brief-linear-node { position: relative; min-height: 190px; padding: 25px 22px; border-right: 1px solid rgba(255,255,255,.1); } .brief-linear-node:last-child { border-right: 0; } .brief-linear-node::after { content: ""; position: absolute; top: 82px; right: -20px; z-index: 2; width: 40px; height: 1px; background: var(--brief-accent); } .brief-linear-node:last-child::after { display: none; } .brief-linear-node > span { position: absolute; top: 18px; right: 18px; color: #585b56; font: 400 18px var(--display); } .brief-linear-node i { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border: 1px solid var(--brief-accent); border-radius: 50%; color: var(--brief-accent); } .brief-linear-node svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .brief-linear-node strong,.brief-linear-node small { display: block; } .brief-linear-node strong { color: var(--bone); font: 550 12px/1.35 var(--ui); letter-spacing: .08em; text-transform: uppercase; } .brief-linear-node small { margin-top: 7px; color: var(--muted); font-size: 10px; } .brief-relationship-flow { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 18%; max-width: 1080px; height: clamp(250px,31vh,330px); margin: clamp(26px,5vh,58px) auto 0; } .brief-relationship-flow > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--brief-accent); stroke-width: 1; opacity: .42; stroke-dasharray: 6 6; } .brief-relationship-node { position: relative; z-index: 2; text-align: center; } .brief-relationship-node i { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 18px; border: 1px solid var(--brief-accent); border-radius: 50%; color: var(--brief-accent); background: #080a09; box-shadow: 0 0 34px rgba(var(--brief-rgb),.08); } .brief-relationship-node svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.3; } .brief-relationship-node strong,.brief-relationship-node small { display: block; } .brief-relationship-node strong { font: 650 11px/1.35 var(--ui); letter-spacing: .15em; text-transform: uppercase; } .brief-relationship-node small { margin-top: 7px; color: var(--muted); font-size: 10px; } .brief-relationship-node.is-consent i { width: 124px; height: 124px; } .brief-proof-flow { display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(45px,8vh,90px); border-block: 1px solid rgba(255,255,255,.13); } .brief-proof-flow > div { position: relative; min-height: 164px; padding: 30px 25px; border-right: 1px solid rgba(255,255,255,.1); } .brief-proof-flow > div:last-child { border-right: 0; } .brief-proof-flow span { color: var(--brief-accent); font: 400 22px var(--display); } .brief-proof-flow strong,.brief-proof-flow small { display: block; } .brief-proof-flow strong { margin-top: 25px; color: var(--bone); font: 400 clamp(21px,1.6vw,30px)/1 var(--display); } .brief-proof-flow small { margin-top: 10px; color: var(--muted); font-size: 10px; } .brief-proof-flow > div::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--brief-accent); opacity: 0; transform: scaleY(.3); transition: opacity .25s ease,transform .25s ease; } .brief-proof-flow > div:hover::after { opacity: 1; transform: scaleY(1); } .brief-proof-actions { display: flex; gap: 10px; margin-top: 24px; } .brief-proof-actions .button { display: inline-flex; align-items: center; gap: 10px; } .brief-proof-actions svg,.brief-studio-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; } .vibra-brief-footer { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 76px 46px; align-items: center; gap: 10px 24px; padding: 0 clamp(28px,5.2vw,100px) 12px; background: linear-gradient(180deg,rgba(5,7,6,.58),#050706 31%); } .vibra-brief-chapters { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4,1fr); height: 76px; border: 1px solid rgba(255,255,255,.2); } .vibra-brief-chapters button { position: relative; display: flex; align-items: center; gap: 24px; min-width: 0; padding: 0 28px; border: 0; border-right: 1px solid rgba(255,255,255,.13); color: #62635f; background: transparent; cursor: pointer; text-align: left; } .vibra-brief-chapters button:last-child { border-right: 0; } .vibra-brief-chapters button::before { content: ""; position: absolute; inset: -1px auto auto -1px; width: 0; height: 2px; background: var(--brief-accent); transition: width .3s ease; } .vibra-brief-chapters button:hover,.vibra-brief-chapters button:focus-visible { color: var(--bone); outline: none; } .vibra-brief-chapters button.is-active { color: var(--brief-accent); background: linear-gradient(90deg,rgba(var(--brief-rgb),.07),transparent); } .vibra-brief-chapters button.is-active::before { width: 27%; } .vibra-brief-chapters b { font: 400 21px/1 var(--display); } .vibra-brief-chapters span { font: 650 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; } .brief-studio-link { grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: max-content; min-height: 40px; padding: 0 16px; border: 1px solid rgba(var(--brief-rgb),.72); color: var(--brief-accent); font: 600 9px/1 var(--ui); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; } .brief-studio-link:hover,.brief-studio-link:focus-visible { color: var(--bone); outline: none; } .vibra-brief-nav { grid-column: 3; grid-row: 2; display: flex; justify-content: flex-end; gap: 32px; } .vibra-brief-nav button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; color: var(--bone); background: transparent; font: 500 12px/1 var(--ui); cursor: pointer; } .vibra-brief-nav button:hover,.vibra-brief-nav button:focus-visible { color: var(--brief-accent); outline: none; } .vibra-brief-nav button:disabled { color: #50524e; cursor: default; } .vibra-brief-nav svg { width: 28px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; } @media (max-width: 1100px) { .vibra-brief-frame { grid-template-rows: 64px minmax(0,1fr) 132px; } .vibra-brief-copy h2 { font-size: clamp(44px,5.2vw,58px); } .brief-node-pool,.brief-node-vibra { left: 73%; } .brief-flow-node { column-gap: 12px; } .brief-node-icon { width: 68px; height: 68px; } .vibra-brief-chapters button { gap: 14px; padding-inline: 18px; } } @media (max-width: 760px) { .brief-launch { min-height: 48px; } .vibra-brief { overflow: hidden; } .vibra-brief-frame { display: block; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } .vibra-brief-frame::before { position: fixed; inset: 68px 0 0; background-size: 52px 52px; } .vibra-brief-topbar { position: sticky; top: 0; height: 68px; padding: 0 18px; } .vibra-brief-topbar > strong { font-size: 13px; letter-spacing: .34em; } .vibra-brief-topbar > div { gap: 13px; } .vibra-brief-topbar [data-brief-count] { font-size: 14px; } .vibra-brief-topbar button { width: 44px; height: 44px; } .vibra-brief-stage { min-height: 0; overflow: visible; } .vibra-brief-slide { height: auto; min-height: 1040px; padding: 45px 20px 100px; } .vibra-brief-copy h2 { max-width: 360px; font-size: clamp(43px,12.2vw,52px); line-height: .98; } .vibra-brief-copy p { max-width: 340px; margin-top: 22px; font-size: 14px; } .brief-direct-flow { height: 590px; margin-top: 34px; background: linear-gradient(var(--brief-accent),var(--brief-accent)) 50% 76px/1px 195px no-repeat,linear-gradient(90deg,var(--brief-accent),var(--brief-accent)) 50% 328px/52% 1px no-repeat,linear-gradient(var(--brief-accent),var(--brief-accent)) 24% 328px/1px 52px no-repeat,linear-gradient(var(--brief-accent),var(--brief-accent)) 76% 328px/1px 52px no-repeat; } .brief-direct-flow .brief-flow-lines { display: none; } .brief-flow-node { display: flex; flex-direction: column; gap: 8px; width: 150px; text-align: center; } .brief-flow-node strong { max-width: 150px; font-size: 8px; line-height: 1.45; } .brief-flow-node b { font-size: 25px; } .brief-node-icon { width: 82px; height: 82px; } .brief-node-fan { top: 0; left: 50%; transform: translateX(-50%); } .brief-node-purchase { top: 190px; left: 50%; transform: translateX(-50%); } .brief-node-pool { top: 382px; left: 0; } .brief-node-vibra { top: 382px; right: 0; left: auto; } .brief-direct-flow > small { top: 548px; left: 50%; width: 100%; transform: translateX(-50%); text-align: center; } .vibra-brief-truth { position: relative; left: auto; bottom: auto; margin-top: 26px; gap: 13px; } .vibra-brief-truth > i { flex: 0 0 34px; } .vibra-brief-truth p { padding-left: 13px; font-size: 13px; } .brief-linear-flow { grid-template-columns: 1fr; margin-top: 38px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 0; } .brief-linear-node { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; min-height: 116px; padding: 18px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); } .brief-linear-node::after { top: auto; right: auto; bottom: -22px; left: 40px; width: 1px; height: 44px; } .brief-linear-node > span { top: 13px; right: 10px; font-size: 15px; } .brief-linear-node i { grid-row: 1 / span 2; width: 50px; height: 50px; margin: 0; } .brief-linear-node strong,.brief-linear-node small { grid-column: 2; padding-left: 15px; } .brief-linear-node small { margin-top: -22px; } .brief-relationship-flow { grid-template-columns: 1fr; gap: 54px; height: auto; margin-top: 42px; } .brief-relationship-flow > svg { display: none; } .brief-relationship-node::after { content: ""; position: absolute; top: calc(100% + 5px); left: 50%; width: 1px; height: 45px; background: var(--brief-accent); } .brief-relationship-node:last-child::after { display: none; } .brief-relationship-node i,.brief-relationship-node.is-consent i { width: 92px; height: 92px; } .brief-proof-flow { grid-template-columns: 1fr 1fr; margin-top: 38px; } .brief-proof-flow > div { min-height: 142px; padding: 20px 14px; border-bottom: 1px solid rgba(255,255,255,.1); } .brief-proof-flow > div:nth-child(2) { border-right: 0; } .brief-proof-flow strong { margin-top: 14px; font-size: 22px; } .brief-proof-actions { display: grid; } .brief-proof-actions .button { justify-content: center; min-height: 48px; } .vibra-brief-footer { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 14px; padding: 0 20px 26px; } .vibra-brief-chapters { grid-column: 1 / -1; grid-row: 1; height: 78px; overflow-x: auto; } .vibra-brief-chapters button { justify-content: center; flex-direction: column; gap: 6px; min-width: 82px; padding: 8px 5px; text-align: center; } .vibra-brief-chapters button.is-active::before { width: 100%; } .vibra-brief-chapters b { font-size: 17px; } .vibra-brief-chapters span { font-size: 7px; letter-spacing: .1em; } .brief-studio-link { grid-column: 1 / -1; grid-row: 3; justify-content: center; width: 100%; min-height: 48px; border: 1px solid var(--brief-accent); } .vibra-brief-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; } .vibra-brief-nav button { min-height: 52px; } } @media (max-width: 390px) { .vibra-brief-slide { padding-inline: 16px; } .vibra-brief-copy h2 { font-size: clamp(41px,11.6vw,47px); } .brief-flow-node { width: 140px; } .brief-node-pool { left: -2px; } .brief-node-vibra { right: -2px; } } @media (prefers-reduced-motion: reduce) { .vibra-brief-slide.is-active,.brief-flow-lines path,.brief-flow-lines circle { animation: none; } }