:root { --hub-gold: #d8b468; --hub-cyan: #70d7cf; --hub-violet: #a988ff; } body[data-app-screen="feed"] .app-floating-compose { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } body:not([data-app-screen="feed"]) .app-floating-compose { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.88); } body.hub-player-open { overflow: hidden; } body.hub-upgrade-open { overflow: hidden; } body.hub-native-update-open { overflow: hidden; } body.hub-upgrade-open #appPushWelcome, body.hub-upgrade-open #appActivityConsent, body.hub-upgrade-open #appInstallGuide, body.hub-upgrade-open #appDailyVote { display: none !important; } .hub-more-grid .hub-more-standby { opacity: .44; cursor: not-allowed; } body.hub-player-open .app-header, body.hub-player-open .app-bottom-nav, body.hub-player-open .hub-mini-player, body.hub-player-open .app-floating-compose, body.hub-player-open .app-notification-beacon { visibility: hidden; } body.hub-has-player .app-main { padding-bottom: 154px; } .hub-view { padding-bottom: 24px; } .hub-view-heading { border-bottom: 0; } .hub-view-heading h1 { font-size: 2rem; } .hub-home-hero { position: relative; min-height: 0; padding: 26px 22px 20px; overflow: hidden; border-bottom: 1px solid var(--app-line); background: #15181d; } .hub-home-hero::after { display: none; } .hub-live-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--hub-gold); font-size: .68rem; font-weight: 900; letter-spacing: .12em; } .hub-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-green); box-shadow: 0 0 14px rgba(80, 210, 160, .7); } .hub-home-hero h1 { max-width: 540px; margin: 24px 0 16px; font-size: 3.8rem; line-height: .91; letter-spacing: 0; } .hub-home-hero h1 em { color: var(--app-orange); font-style: normal; } .hub-home-hero p { max-width: 520px; margin: 0; color: var(--app-muted); font-size: .95rem; line-height: 1.55; } .hub-home-more { max-width: 520px; margin: 0; color: var(--app-muted); font-size: .78rem; } .hub-home-more summary { width: fit-content; margin-top: 2px; color: var(--app-text); cursor: pointer; font-size: .72rem; font-weight: 850; } .hub-home-more summary::marker { color: var(--app-orange); } .hub-home-more[open] summary { margin-bottom: 8px; color: var(--app-orange); } .hub-home-more p { margin: 0; font-size: .78rem; } .hub-hero-actions { display: flex; gap: 9px; margin-top: 25px; } .hub-primary-button, .hub-secondary-button { min-height: 44px; padding: 0 17px; border: 1px solid transparent; border-radius: 8px; font-weight: 850; cursor: pointer; transition: transform 160ms ease, filter 160ms ease, background 160ms ease; } .hub-primary-button { background: var(--app-orange); color: #160c09; } .hub-secondary-button { border-color: var(--app-line); background: var(--app-surface); color: var(--app-text); } .hub-primary-button:active, .hub-secondary-button:active { transform: scale(.97); } .hub-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 22px 16px 12px; } .hub-section-heading small { color: var(--app-orange); font-size: .65rem; font-weight: 900; letter-spacing: .11em; } .hub-section-heading h2 { margin: 4px 0 0; font-size: 1.18rem; } .hub-section-heading button { border: 0; background: transparent; color: var(--app-muted); font-size: .73rem; cursor: pointer; } .hub-home-today { margin: 14px 12px 2px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-orange) 34%, var(--app-line)); border-radius: 11px; background: color-mix(in srgb, var(--app-surface) 94%, var(--app-orange)); } .hub-home-today[hidden] { display: none; } .hub-home-today > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px 10px; border-bottom: 1px solid var(--app-line); } .hub-home-today > header small { color: var(--app-orange); font-size: .56rem; font-weight: 950; letter-spacing: .1em; } .hub-home-today > header h2 { margin: 2px 0 0; font-size: .88rem; } .hub-home-today > header button { border: 0; background: transparent; color: var(--app-muted); font-size: .65rem; font-weight: 800; } .hub-daily-kafmusic { position: relative; display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 13px; margin: 14px 12px 2px; overflow: hidden; padding: 11px 12px; border: 1px solid rgba(255,211,46,.3); border-radius: 12px; background: radial-gradient(circle at 9% 50%,rgba(151,49,190,.28),transparent 34%),linear-gradient(125deg,#23152c,#17141c 62%,#2b2010); box-shadow: 0 14px 36px rgba(0,0,0,.2); } .hub-daily-kafmusic[hidden] { display: none; } .hub-daily-kafmusic::after { position: absolute; right: -28px; bottom: -50px; width: 145px; height: 145px; content: "K"; color: rgba(255,211,46,.055); font-size: 8rem; font-weight: 1000; line-height: 1; pointer-events: none; } .hub-daily-kafmusic>img { z-index: 1; width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 9px 13px rgba(0,0,0,.38)); } .hub-daily-kafmusic>span { z-index: 1; display: grid; min-width: 0; gap: 4px; } .hub-daily-kafmusic small { color: #ffd32e; font-size: .57rem; font-weight: 950; letter-spacing: .08em; } .hub-daily-kafmusic h2 { overflow: hidden; margin: 0; font-size: 1rem; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; } .hub-daily-kafmusic p { margin: 0; color: var(--app-muted); font-size: .67rem; line-height: 1.35; } .hub-daily-kafmusic>button { z-index: 1; display: grid; grid-template-columns: 31px auto; align-items: center; gap: 7px; min-height: 42px; padding: 5px 11px 5px 6px; border: 1px solid rgba(255,211,46,.45); border-radius: 999px; background: #ffd32e; color: #251129; font: inherit; cursor: pointer; } .hub-daily-kafmusic>button i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #2b1432; color: #ffd32e; font-size: .72rem; font-style: normal; } .hub-daily-kafmusic>button b { font-size: .68rem; } .hub-daily-kafmusic>button.is-complete { border-color: rgba(85,230,181,.45); background: rgba(85,230,181,.13); color: #70edb7; } .hub-daily-kafmusic>button.is-complete i { background: #70edb7; color: #10261d; } #hubHomeTodayList { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } #hubHomeTodayList > button { display: grid; grid-template-columns: 34px minmax(0,1fr) 14px; align-items: center; gap: 8px; min-width: 0; min-height: 64px; padding: 10px 12px; border: 0; border-right: 1px solid var(--app-line); background: transparent; color: var(--app-text); text-align: left; } #hubHomeTodayList > button:last-child { border-right: 0; } #hubHomeTodayList > button > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--app-orange) 12%, var(--app-bg)); } #hubHomeTodayList > button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } #hubHomeTodayList small, #hubHomeTodayList strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hubHomeTodayList small { color: var(--app-orange); font-size: .53rem; font-weight: 900; text-transform: uppercase; } #hubHomeTodayList strong { font-size: .71rem; } #hubHomeTodayList b { color: var(--app-muted); font-size: 1rem; } .hub-home-heading-actions { display: flex; align-items: center; gap: 10px; } .hub-home-heading-actions button:first-child { color: var(--app-orange); } .hub-featured-track { display: grid; grid-template-columns: 78px minmax(0, 1fr) 40px; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 0 12px; padding: 10px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); color: var(--app-text); text-align: left; cursor: pointer; } .hub-featured-track img { width: 78px; height: 78px; border-radius: 8px; object-fit: cover; } .hub-featured-track > span { display: grid; min-width: 0; gap: 5px; } .hub-featured-track small { color: var(--app-orange); font-size: .62rem; font-weight: 900; text-transform: uppercase; } .hub-featured-track strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; } .hub-featured-track em { color: var(--app-muted); font-size: .67rem; font-style: normal; } .hub-featured-track b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--app-orange); color: #16100e; } .hub-home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 18px 12px 0; } .hub-home-grid button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 9px; min-height: 82px; padding: 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); color: var(--app-text); text-align: left; cursor: pointer; } .hub-home-grid button > span { grid-row: 1 / 3; align-self: center; color: var(--hub-cyan); font-size: 1.5rem; } .hub-home-grid strong { align-self: end; font-size: .9rem; } .hub-home-grid small { color: var(--app-muted); font-size: .67rem; } .hub-home-icon, .hub-home-module-icon { position: relative; display: inline-block; width: 22px; height: 22px; color: var(--hub-cyan); } .hub-home-icon::before, .hub-home-module-icon::before { position: absolute; inset: 2px; content: ""; border: 2px solid currentColor; border-radius: 6px; } .hub-home-icon-music::after, .hub-home-module-icon-music::after { position: absolute; right: 2px; top: -2px; width: 5px; height: 14px; content: ""; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: skewY(-25deg); } .hub-home-icon-social::before, .hub-home-module-icon-social::before { border-radius: 50%; } .hub-home-icon-social::after, .hub-home-module-icon-social::after { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(18deg); } .hub-home-icon-radio::before, .hub-home-module-icon-radio::before { border-radius: 50%; box-shadow: 0 0 0 3px currentColor; } .hub-home-icon-clips::after, .hub-home-module-icon-clips::after { position: absolute; top: 6px; left: 8px; content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; } .hub-home-icon-albums::before, .hub-home-module-icon-albums::before { border-radius: 3px; box-shadow: 4px -4px 0 -1px var(--app-surface), 4px -4px 0 1px currentColor; } .hub-home-icon-store::before, .hub-home-module-icon-store::before { border-radius: 2px 2px 6px 6px; } .hub-home-grid .hub-home-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 0; font-size: 1.5rem; line-height: 1; } .hub-home-grid .hub-home-icon::before, .hub-home-grid .hub-home-icon::after { display: none; } .hub-home-grid .hub-home-icon-members, .hub-home-module-icon-members { background: center / contain no-repeat url("/assets/logos/kommu-icon.png"); } .hub-home-module-icon-members { width: 22px; height: 22px; } /* Suite communautaire 1.2.7 */ .hub-community-suite { margin: 22px 12px 0; padding: 0 0 8px; } .hub-community-suite .hub-section-heading { padding: 0 0 12px; } .hub-community-suite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .hub-community-suite-grid button { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 10px; min-height: 82px; padding: 12px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); color: var(--app-text); text-align: left; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; } .hub-community-suite-grid button:hover { border-color: color-mix(in srgb, var(--app-orange) 58%, var(--app-line)); background: color-mix(in srgb, var(--app-surface) 91%, var(--app-orange)); transform: translateY(-2px); } .hub-community-suite-grid button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--app-orange) 50%, var(--app-line)); border-radius: 50%; background: color-mix(in srgb, var(--app-orange) 12%, transparent); color: var(--app-orange); font-size: .88rem; font-weight: 950; } .hub-community-suite-grid strong { align-self: end; font-size: .82rem; } .hub-community-suite-grid small { align-self: start; overflow: hidden; color: var(--app-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; } .hub-more-panel { max-height: min(88dvh, 720px); overflow-y: auto; overscroll-behavior: contain; } .hub-suite-view { min-height: calc(100dvh - 150px); } .hub-suite-view > .app-view-heading { position: sticky; z-index: 5; top: 0; background: color-mix(in srgb, var(--app-bg) 92%, transparent); backdrop-filter: blur(18px); } .hub-suite-add { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--app-orange) 55%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--app-orange) 12%, transparent); color: var(--app-text); font-size: .72rem; font-weight: 900; cursor: pointer; } .hub-suite-add span { color: var(--app-orange); font-size: 1.1rem; line-height: 1; } .hub-calendar-heading-actions { display: flex; align-items: center; gap: 8px; } .hub-calendar-reminder-toggle.is-active { border-color: color-mix(in srgb, #3ecf8e 52%, var(--app-line)); background: color-mix(in srgb, #3ecf8e 12%, var(--app-surface)); } .hub-community-form { margin: 14px 12px 18px; padding: 16px; border: 1px solid color-mix(in srgb, var(--app-orange) 40%, var(--app-line)); border-radius: 12px; background: var(--app-surface); box-shadow: 0 18px 55px rgba(0,0,0,.16); animation: hub-suite-form-in 220ms ease both; } .hub-community-form-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .hub-community-form-heading > div { display: grid; gap: 2px; } .hub-community-form-heading small { color: var(--app-orange); font-size: .59rem; font-weight: 950; letter-spacing: .12em; } .hub-community-form-heading strong { font-size: 1.04rem; } .hub-community-form-heading > button { width: 34px; height: 34px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-bg); color: var(--app-text); font-size: 1.2rem; } .hub-community-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .hub-community-form label { display: grid; gap: 6px; margin-bottom: 10px; color: var(--app-muted); font-size: .65rem; font-weight: 800; } .hub-community-form label small { font-size: .58rem; font-weight: 500; } .hub-community-form input, .hub-community-form select, .hub-community-form textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--app-line); border-radius: 7px; outline: none; background: var(--app-bg); color: var(--app-text); font: inherit; font-size: .76rem; resize: vertical; } .hub-community-form input:focus, .hub-community-form select:focus, .hub-community-form textarea:focus { border-color: var(--app-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-orange) 12%, transparent); } .hub-community-form .hub-community-check { display: flex; align-items: center; gap: 8px; width: fit-content; } .hub-community-check input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--app-orange); } .hub-community-form-status { margin: 9px 0 0; color: var(--app-orange); font-size: .68rem; } @keyframes hub-suite-form-in { from { opacity: 0; transform: translateY(-8px); } } .hub-calendar-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(270px,.75fr); gap: 12px; padding: 14px 12px 28px; } .hub-calendar-card, .hub-calendar-agenda { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); } .hub-calendar-card > header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 13px; border-bottom: 1px solid var(--app-line); } .hub-calendar-card > header h2 { margin: 0; font-size: 1.05rem; text-align: center; text-transform: capitalize; } .hub-calendar-card > header button { width: 36px; height: 36px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-bg); color: var(--app-text); font-size: 1.45rem; cursor: pointer; } .hub-calendar-weekdays, .hub-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); } .hub-calendar-weekdays { padding: 9px 10px 4px; color: var(--app-muted); font-size: .55rem; font-weight: 900; text-align: center; text-transform: uppercase; } .hub-calendar-grid { gap: 3px; padding: 5px 10px 12px; } .hub-calendar-grid button { position: relative; display: grid; place-items: start center; min-width: 0; min-height: 66px; padding: 8px 2px 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--app-text); cursor: pointer; } .hub-calendar-grid button:hover { background: color-mix(in srgb, var(--app-text) 5%, transparent); } .hub-calendar-grid button.is-outside { opacity: .28; } .hub-calendar-grid button.is-today span { display: grid; place-items: center; width: 24px; height: 24px; margin-top: -4px; border-radius: 50%; background: var(--app-orange); color: #fff; } .hub-calendar-grid button.is-selected { border-color: color-mix(in srgb, var(--app-orange) 56%, transparent); background: color-mix(in srgb, var(--app-orange) 9%, transparent); } .hub-calendar-grid button > span { font-size: .72rem; font-weight: 850; } .hub-calendar-grid button > i { position: absolute; right: 3px; bottom: 6px; left: 3px; display: flex; justify-content: center; gap: 2px; } .hub-calendar-grid button b { width: 5px; height: 5px; border-radius: 50%; background: var(--app-orange); } .hub-calendar-grid button b[data-category="birthday"] { background: #ef4f9a; } .hub-calendar-grid button b[data-category="stream"] { background: #39c5bb; } .hub-calendar-grid button b[data-category="release"] { background: #d8b468; } .hub-calendar-agenda { min-height: 360px; padding: 16px; } .hub-calendar-agenda > div:first-child { padding-bottom: 12px; border-bottom: 1px solid var(--app-line); } .hub-calendar-agenda h2 { margin: 3px 0 0; font-size: 1.02rem; text-transform: capitalize; } .hub-calendar-event { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--app-line); } .hub-calendar-event:last-child { border-bottom: 0; } .hub-calendar-event-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--app-orange) 12%, var(--app-bg)); font-size: 1rem; } .hub-calendar-event > div { display: grid; gap: 3px; min-width: 0; } .hub-calendar-event small { color: var(--app-orange); font-size: .57rem; font-weight: 900; text-transform: uppercase; } .hub-calendar-event strong { font-size: .8rem; } .hub-calendar-event p { margin: 2px 0; color: var(--app-muted); font-size: .67rem; line-height: 1.4; } .hub-calendar-event em { color: var(--app-muted); font-size: .57rem; font-style: normal; } .hub-calendar-event > button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); font-size: 1rem; } .hub-calendar-empty, .hub-ideas-empty, .hub-blindtest-empty { display: grid; place-items: center; min-height: 220px; padding: 24px; color: var(--app-muted); text-align: center; } .hub-calendar-empty span, .hub-ideas-empty span, .hub-blindtest-empty span { color: var(--app-orange); font-size: 2rem; } .hub-calendar-empty strong, .hub-ideas-empty strong, .hub-blindtest-empty strong { margin-top: 8px; color: var(--app-text); font-size: .86rem; } .hub-calendar-empty small, .hub-ideas-empty small, .hub-blindtest-empty small { margin-top: 4px; font-size: .65rem; } .hub-blindtest-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); gap: 12px; padding: 14px 12px 28px; } .hub-blindtest-game, .hub-blindtest-ranking { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); } .hub-blindtest-game { display: flex; flex-direction: column; align-items: center; min-height: 590px; padding: 18px; text-align: center; } .hub-blindtest-exit { position: absolute; z-index: 7; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(10,11,14,.76); color: #fff; font-size: 1.45rem; line-height: 1; cursor: pointer; backdrop-filter: blur(14px); transition: transform 160ms ease, background 160ms ease; } .hub-blindtest-exit:hover { background: var(--app-orange); color: #17100d; transform: scale(1.06); } .hub-blindtest-exit[hidden] { display: none; } .hub-blindtest-countdown { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: radial-gradient(circle at center, color-mix(in srgb,var(--app-orange) 18%,#101114),#0d0f12 58%); color: #fff; } .hub-blindtest-countdown[hidden] { display: none; } .hub-blindtest-countdown small { color: var(--app-orange); font-size: clamp(.72rem,2dvh,.92rem); font-weight: 950; letter-spacing: .08em; } .hub-blindtest-countdown strong { font-size: clamp(6rem,28dvh,13rem); font-weight: 950; line-height: .85; text-shadow: 0 0 48px color-mix(in srgb,var(--app-orange) 55%,transparent); } .hub-blindtest-countdown strong.is-popping { animation: hub-countdown-pop 760ms cubic-bezier(.18,.8,.22,1) both; } @keyframes hub-countdown-pop { 0% { opacity: 0; transform: scale(.45); } 35% { opacity: 1; transform: scale(1.08); } 100% { opacity: .78; transform: scale(.92); } } .hub-blindtest-topline { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--app-muted); font-size: .65rem; font-weight: 850; } .hub-blindtest-topline strong { color: var(--app-orange); } .hub-blindtest-stage { position: relative; width: min(260px,75%); aspect-ratio: 1; margin: 24px auto 16px; overflow: hidden; border-radius: 50%; background: #090a0c; box-shadow: 0 18px 55px rgba(0,0,0,.34); } .hub-blindtest-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(16px) saturate(.5); transform: scale(1.12); transition: opacity 280ms ease, filter 500ms ease, transform 500ms ease; } .hub-blindtest-disc { position: absolute; z-index: 2; inset: 11%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.08); border-radius: 50%; background: repeating-radial-gradient(circle, #17191d 0 4px, #0d0e11 5px 8px); } .hub-blindtest-disc::after { position: absolute; width: 20%; aspect-ratio: 1; content: ""; border: 7px solid var(--app-orange); border-radius: 50%; background: #111; } .hub-blindtest-disc span { z-index: 2; margin-top: -54%; color: rgba(255,255,255,.7); font-size: 2.4rem; font-weight: 950; } .hub-blindtest-disc i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.04); border-radius: 50%; } .hub-blindtest-game.is-playing .hub-blindtest-disc { animation: hub-disc-spin 3.2s linear infinite; } .hub-blindtest-game.is-revealed .hub-blindtest-disc, .hub-blindtest-game.is-revealed .hub-blindtest-bars { opacity: 0; } .hub-blindtest-game.is-revealed .hub-blindtest-stage > img { opacity: 1; filter: none; transform: scale(1); } .hub-blindtest-bars { position: absolute; z-index: 3; right: 12%; bottom: 22%; left: 12%; display: flex; align-items: end; justify-content: center; gap: 4px; height: 42px; } .hub-blindtest-bars i { width: 5px; height: 22%; border-radius: 4px; background: var(--app-orange); animation: hub-bars 650ms ease-in-out infinite alternate; } .hub-blindtest-bars i:nth-child(2n) { animation-delay: -330ms; }.hub-blindtest-bars i:nth-child(3n) { animation-delay: -160ms; } .hub-blindtest-game:not(.is-playing) .hub-blindtest-bars { display: none; } @keyframes hub-disc-spin { to { transform: rotate(360deg); } } @keyframes hub-bars { to { height: 100%; } } .hub-blindtest-timer { width: min(420px,100%); height: 4px; overflow: hidden; border-radius: 8px; background: var(--app-line); } .hub-blindtest-timer span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--app-orange); transition: width 80ms linear; } .hub-blindtest-game h2 { min-height: 31px; margin: 16px 0 4px; font-size: 1.24rem; } .hub-blindtest-game > p { min-height: 34px; margin: 0; color: var(--app-muted); font-size: .7rem; line-height: 1.45; } .hub-blindtest-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; width: min(560px,100%); min-height: 114px; margin-top: 14px; } .hub-blindtest-options:empty { display: none; min-height: 0; margin-top: 0; } .hub-blindtest-options button { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-height: 52px; padding: 8px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-text); text-align: left; cursor: pointer; } .hub-blindtest-options button > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--app-surface); color: var(--app-orange); font-size: .64rem; font-weight: 950; } .hub-blindtest-options button strong { overflow: hidden; font-size: .68rem; line-height: 1.2; text-overflow: ellipsis; } .hub-blindtest-options button.is-answer { border-color: #3ecf8e; background: color-mix(in srgb, #3ecf8e 13%, var(--app-bg)); } .hub-blindtest-options button.is-wrong-answer { border-color: #ef5350; opacity: .65; } .hub-blindtest-start { min-width: 210px; margin: 18px auto 0; } body.hub-blindtest-immersive { overflow: hidden !important; overscroll-behavior: none; touch-action: none; } body.hub-blindtest-immersive > .social-app, body.hub-blindtest-immersive > .app-header, body.hub-blindtest-immersive > .app-bottom-nav, body.hub-blindtest-immersive > .app-floating-compose, body.hub-blindtest-immersive > .app-notification-beacon, body.hub-blindtest-immersive > .hub-mini-player, body.hub-blindtest-immersive > .hub-social-music-button { visibility: hidden !important; pointer-events: none !important; } .hub-blindtest-game.is-immersive { position: fixed; z-index: 10000; inset: 0; display: grid; grid-template-rows: auto minmax(92px,1fr) 4px auto auto minmax(190px,auto) auto; justify-items: center; gap: clamp(5px,1.2dvh,12px); width: 100%; height: 100dvh; min-height: 0; padding: max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); overflow: hidden; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 32%, color-mix(in srgb,var(--app-orange) 9%,var(--app-bg)), var(--app-bg) 55%); overscroll-behavior: none; visibility: visible !important; pointer-events: auto !important; touch-action: manipulation; } .hub-blindtest-game.is-immersive .hub-blindtest-topline { align-self: start; min-height: 40px; padding: 0 48px 0 4px; } .hub-blindtest-game.is-immersive .hub-blindtest-stage { align-self: center; width: min(23dvh,190px,48vw); max-width: 100%; max-height: 100%; margin: 0; } .hub-blindtest-game.is-immersive .hub-blindtest-timer { align-self: center; width: min(560px,92vw); } .hub-blindtest-game.is-immersive h2 { min-height: 0; margin: 0; font-size: clamp(1rem,2.5dvh,1.35rem); } .hub-blindtest-game.is-immersive > p { min-height: 0; margin: 0; font-size: clamp(.62rem,1.7dvh,.76rem); } .hub-blindtest-game.is-immersive .hub-blindtest-options { align-self: center; grid-template-columns: minmax(0,1fr); gap: clamp(4px,.7dvh,7px); width: min(620px,94vw); min-height: 0; margin: 0; } .hub-blindtest-game.is-immersive .hub-blindtest-options button { min-height: clamp(36px,5.5dvh,48px); } .hub-blindtest-game.is-immersive .hub-blindtest-start { align-self: center; margin: 2px auto 0; } .hub-blindtest-ranking { padding: 16px; } .hub-blindtest-ranking > div:first-child { padding-bottom: 12px; border-bottom: 1px solid var(--app-line); } .hub-blindtest-ranking h2 { margin: 3px 0 0; font-size: 1.05rem; } #hubBlindtestLeaderboard > article { display: grid; grid-template-columns: 24px 34px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 58px; border-bottom: 1px solid var(--app-line); } #hubBlindtestLeaderboard > article.is-me { margin: 0 -8px; padding: 0 8px; border-radius: 8px; background: color-mix(in srgb, var(--app-orange) 9%, transparent); } #hubBlindtestLeaderboard > article > b { color: var(--app-muted); font-size: .7rem; text-align: center; } #hubBlindtestLeaderboard > article:nth-child(-n+3) > b { color: var(--app-orange); font-size: .9rem; } .hub-suite-avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; overflow: visible; border-radius: 50%; background: color-mix(in srgb, var(--app-orange) 16%, var(--app-bg)); color: var(--app-orange); font-size: .7rem; font-weight: 950; } .hub-suite-avatar img { width: 100%; height: 100%; object-fit: cover; } .hub-suite-avatar .hub-suite-avatar-frame { position: absolute; z-index: 2; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: 0; border-radius: 0; object-fit: contain; pointer-events: none; } #hubBlindtestLeaderboard article > div { display: grid; gap: 2px; min-width: 0; } #hubBlindtestLeaderboard article > div strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; } #hubBlindtestLeaderboard article > div small { color: var(--app-muted); font-size: .54rem; } #hubBlindtestLeaderboard article > em { color: var(--app-orange); font-size: 1rem; font-style: normal; font-weight: 950; } #hubBlindtestLeaderboard article > em small { font-size: .55rem; } body.hub-calendar-prompt-open { overflow: hidden; } .hub-calendar-prompt { position: fixed; z-index: 175; inset: 0; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); background: rgba(4,5,7,.9); backdrop-filter: blur(16px); } .hub-calendar-prompt[hidden] { display: none; } .hub-calendar-prompt-card { width: min(100%,430px); padding: 28px 24px 22px; border: 1px solid color-mix(in srgb, var(--app-orange) 46%, var(--app-line)); border-radius: 16px; background: var(--app-surface); box-shadow: 0 28px 90px rgba(0,0,0,.58); text-align: center; animation: hub-suite-form-in 240ms ease both; } .hub-calendar-prompt-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 17px; background: var(--app-orange); color: #fff; font-size: 1.45rem; font-weight: 950; box-shadow: 0 12px 32px color-mix(in srgb, var(--app-orange) 34%, transparent); } .hub-calendar-prompt-card h2 { margin: 7px 0 10px; font-size: 1.6rem; } .hub-calendar-prompt-card > p:not(.app-kicker) { margin: 0 0 19px; color: var(--app-muted); font-size: .78rem; line-height: 1.55; } .hub-calendar-prompt-card .hub-primary-button { width: 100%; } .hub-calendar-prompt-card .app-text-button { margin-top: 8px; } .hub-ideas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; } .hub-ideas-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 0 12px; padding: 4px; border: 1px solid rgba(230,91,208,.25); border-radius: 10px; background: color-mix(in srgb, var(--app-surface) 88%, #2d102b); } .hub-ideas-tabs button { min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: var(--app-muted); font-size: .68rem; font-weight: 900; cursor: pointer; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .hub-ideas-tabs button.is-active { background: linear-gradient(135deg,#c549b4,#ec6bd8); color: #fff; box-shadow: 0 7px 20px rgba(230,91,208,.23); } .hub-ideas-toolbar > div { display: inline-flex; padding: 3px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-surface); } .hub-ideas-toolbar > div button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: .65rem; font-weight: 850; } .hub-ideas-toolbar > div button.is-active { background: var(--app-orange); color: #fff; } .hub-ideas-list { display: grid; gap: 9px; padding: 0 12px 28px; } .hub-ideas-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 10px 12px 16px; padding: 22px 24px; overflow: hidden; border: 1px solid rgba(230,91,208,.34); border-radius: 16px; background: radial-gradient(circle at 88% 35%, rgba(230,91,208,.22), transparent 34%), linear-gradient(135deg, rgba(178,71,201,.16), var(--app-surface) 58%); } .hub-ideas-hero > div { min-width: 0; } .hub-ideas-hero h1 { margin: 6px 0 8px; font-size: clamp(1.65rem, 4vw, 2.7rem); letter-spacing: -.03em; } .hub-ideas-hero p:not(.app-kicker) { max-width: 560px; margin: 0; color: var(--app-muted); line-height: 1.5; } .hub-ideas-hero > img { flex: 0 0 auto; width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 12px 25px rgba(230,91,208,.36)); } .hub-ideas-heading { margin-bottom: 4px; } .hub-idea-teaser { border-color: rgba(230,91,208,.38); background: radial-gradient(circle at 9% 50%,rgba(230,91,208,.28),transparent 34%),linear-gradient(125deg,#2c142b,#1d161f 62%,#281126); } .hub-idea-teaser:hover { border-color: rgba(230,91,208,.75); } .hub-idea-teaser-icon { display: grid; place-items: center; width: 82px; height: 82px; overflow: hidden; border: 1px solid rgba(230,91,208,.4); border-radius: 12px; background: #251122; } .hub-idea-teaser-icon img { width: 76px; height: 76px; object-fit: contain; } .hub-idea-teaser > b { color: #e65bd0; } .hub-idea-card { position: relative; display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 13px; min-height: 130px; padding: 14px 44px 14px 14px; border: 1px solid var(--app-line); border-radius: 11px; background: var(--app-surface); transition: border-color 180ms ease, transform 180ms ease; } .hub-idea-card:hover { border-color: color-mix(in srgb, var(--app-orange) 38%, var(--app-line)); } .hub-idea-card.is-voted { border-color: color-mix(in srgb, #e65bd0 62%, var(--app-line)); } .hub-idea-card.is-validated { border-color: rgba(89,221,151,.38); background: radial-gradient(circle at 5% 20%,rgba(61,190,128,.13),transparent 31%),var(--app-surface); } .hub-idea-votes { display: flex; flex-direction: column; align-items: center; gap: 3px; } .hub-idea-vote-button { display: grid; place-items: center; width: 34px; height: 29px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-muted); cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease; } .hub-idea-vote-button:hover { transform: translateY(-1px); border-color: #e65bd0; color: #e65bd0; } .hub-idea-vote-button.is-up.is-active { border-color: #e65bd0; background: rgba(230,91,208,.18); color: #ff83e9; } .hub-idea-vote-button.is-down.is-active { border-color: #7cc7ff; background: rgba(124,199,255,.14); color: #7cc7ff; } .hub-idea-score { color: var(--app-text); font-size: 1.1rem; line-height: 1.1; } .hub-idea-votes > small { width: 68px; color: var(--app-muted); font-size: .45rem; line-height: 1.15; text-align: center; } .hub-idea-approved { justify-content: center; min-height: 92px; padding: 7px 3px; border: 1px solid rgba(89,221,151,.28); border-radius: 9px; background: rgba(40,173,110,.08); color: #59dd97; } .hub-idea-approved > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: rgba(89,221,151,.14); font-size: 1rem; } .hub-idea-approved > strong { font-size: .58rem; } .hub-idea-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; min-height: 88px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-bg); color: var(--app-muted); cursor: pointer; } .hub-idea-vote span { color: var(--app-orange); font-size: .85rem; transition: transform 160ms ease; } .hub-idea-vote:hover span { transform: translateY(-2px); } .hub-idea-vote strong { margin: 3px 0; color: var(--app-text); font-size: 1.25rem; } .hub-idea-vote small { font-size: .52rem; } .hub-idea-card.is-voted .hub-idea-vote { border-color: var(--app-orange); background: color-mix(in srgb, var(--app-orange) 12%, var(--app-bg)); } .hub-idea-content { min-width: 0; } .hub-idea-meta { display: flex; align-items: center; gap: 8px; } .hub-idea-meta > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; } .hub-idea-meta > span:nth-child(2) strong { font-size: .67rem; }.hub-idea-meta > span:nth-child(2) small { color: var(--app-muted); font-size: .56rem; } .hub-idea-meta > b { margin-left: auto; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--app-orange) 45%, transparent); border-radius: 5px; color: var(--app-orange); font-size: .5rem; } .hub-idea-meta > .hub-idea-validated-badge { border-color: rgba(89,221,151,.35); color: #59dd97; } .hub-idea-content h2 { margin: 11px 0 5px; font-size: 1rem; } .hub-idea-content p { margin: 0; color: var(--app-muted); font-size: .7rem; line-height: 1.48; } .hub-idea-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--app-line); } .hub-idea-actions button { padding: 0; border: 0; background: transparent; color: #e65bd0; font-size: .62rem; font-weight: 850; cursor: pointer; } .hub-idea-actions button span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 3px; place-items: center; border-radius: 99px; background: rgba(230,91,208,.14); font-size: .55rem; } .hub-idea-actions .hub-idea-validate { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(89,221,151,.34); border-radius: 7px; background: rgba(89,221,151,.09); color: #59dd97; } .hub-idea-actions .hub-idea-validate.is-reopen { border-color: var(--app-line); background: var(--app-bg); color: var(--app-muted); } .hub-idea-actions .hub-idea-validate:disabled { opacity: .55; cursor: wait; } .hub-idea-comments { display: grid; gap: 9px; margin-top: 10px; padding: 10px; border: 1px solid rgba(230,91,208,.2); border-radius: 10px; background: rgba(178,71,201,.06); } .hub-idea-comments[hidden] { display: none; } .hub-idea-comment-list { display: grid; gap: 8px; } .hub-idea-comment { position: relative; display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; padding: 7px 25px 7px 0; border-bottom: 1px solid var(--app-line); } .hub-idea-comment:last-child { border-bottom: 0; } .hub-idea-comment .hub-suite-avatar { width: 25px; height: 25px; font-size: .56rem; } .hub-idea-comment > div { min-width: 0; } .hub-idea-comment strong { font-size: .62rem; } .hub-idea-comment small { margin-left: 5px; color: var(--app-muted); font-size: .52rem; } .hub-idea-comment p { margin-top: 3px; color: var(--app-text); font-size: .65rem; white-space: pre-wrap; } .hub-idea-comment > button { position: absolute; top: 5px; right: 0; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); cursor: pointer; } .hub-idea-no-comments { color: var(--app-muted); font-size: .62rem; } .hub-idea-comment-form { display: grid; grid-template-columns: minmax(0,1fr) 32px; gap: 6px; } .hub-idea-comment-form input { min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-text); outline: 0; } .hub-idea-comment-form input:focus { border-color: #e65bd0; } .hub-idea-comment-form button { border: 0; border-radius: 7px; background: #e65bd0; color: #1b0c1a; font-weight: 950; cursor: pointer; } .hub-idea-delete { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--app-bg); color: var(--app-muted); } .hub-ideas-empty { border: 1px dashed var(--app-line); border-radius: 11px; } @media (max-width: 720px) { #hubHomeTodayList { grid-template-columns: 1fr; } #hubHomeTodayList > button { border-right: 0; border-bottom: 1px solid var(--app-line); } #hubHomeTodayList > button:last-child { border-bottom: 0; } .hub-community-suite-grid { grid-template-columns: 1fr; } .hub-community-suite-grid button { min-height: 70px; } .hub-calendar-layout, .hub-blindtest-layout { grid-template-columns: 1fr; } .hub-calendar-agenda, .hub-blindtest-ranking { min-height: auto; } .hub-community-form-grid { grid-template-columns: 1fr; gap: 0; } .hub-calendar-grid button { min-height: 50px; } .hub-blindtest-game { min-height: 560px; padding: 14px; } .hub-blindtest-stage { width: min(230px,70vw); margin-top: 18px; } } @media (max-width: 430px) { .hub-suite-view > .app-view-heading h1 { font-size: 1.35rem; } .hub-suite-add { min-width: 38px; padding: 0 9px; font-size: 0; } .hub-suite-add span { font-size: 1.1rem; } .hub-calendar-layout, .hub-blindtest-layout { padding-right: 8px; padding-left: 8px; } .hub-calendar-weekdays { padding-right: 5px; padding-left: 5px; font-size: .48rem; } .hub-calendar-grid { gap: 1px; padding-right: 5px; padding-left: 5px; } .hub-calendar-grid button { min-height: 45px; border-radius: 5px; } .hub-blindtest-options { grid-template-columns: 1fr; min-height: 230px; } .hub-blindtest-options button { min-height: 48px; } .hub-blindtest-game.is-immersive .hub-blindtest-options { grid-template-columns: minmax(0,1fr); min-height: 0; } .hub-blindtest-game.is-immersive .hub-blindtest-options button { grid-template-columns: 23px minmax(0,1fr); min-height: clamp(36px,5.5dvh,46px); padding: 6px; } .hub-blindtest-game.is-immersive .hub-blindtest-options button > span { width: 22px; height: 22px; } .hub-ideas-hero { align-items: flex-start; margin: 8px 8px 12px; padding: 17px; } .hub-ideas-hero > img { width: 72px; height: 72px; } .hub-idea-card { grid-template-columns: 52px minmax(0,1fr); padding-left: 10px; } .hub-idea-votes > small { width: 52px; font-size: .42rem; } } @media (max-height: 520px) { .hub-blindtest-game.is-immersive { grid-template-rows: auto minmax(48px,.6fr) 3px auto auto minmax(210px,1.8fr) auto; gap: 3px; padding-top: max(7px,env(safe-area-inset-top)); padding-bottom: max(7px,env(safe-area-inset-bottom)); } .hub-blindtest-game.is-immersive .hub-blindtest-topline { min-height: 30px; } .hub-blindtest-game.is-immersive .hub-blindtest-stage { width: min(17dvh,82px); } .hub-blindtest-game.is-immersive .hub-blindtest-options { width: min(720px,88vw); } .hub-blindtest-game.is-immersive .hub-blindtest-options button { min-height: 32px; padding-top: 4px; padding-bottom: 4px; } .hub-blindtest-game.is-immersive .hub-blindtest-start { min-height: 38px; } } .hub-music-heading { padding-bottom: 13px; } .hub-music-space-switcher { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 0 12px 15px; padding: 4px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb,var(--app-surface) 94%,#050507); } .hub-music-space-switcher button { min-height: 42px; border: 0; border-radius: 6px; background: transparent; color: var(--app-muted); font: inherit; font-size: .76rem; font-weight: 900; cursor: pointer; transition: background 160ms ease,color 160ms ease,box-shadow 160ms ease; } .hub-music-space-switcher button.is-active { background: linear-gradient(135deg,var(--app-orange),#ff9e3d); color: #16100d; box-shadow: 0 7px 18px rgba(255,106,61,.22); } .hub-music-space { min-height: 220px; touch-action: pan-y; } .hub-music-space[hidden] { display: none !important; } .hub-music-space.is-active { animation: hub-music-panel-enter 180ms ease-out; } .hub-music-space .hub-daily-kafmusic { margin-top: 0; margin-bottom: 14px; } .hub-music-space[data-hub-music-panel="clips"] { padding-bottom: 24px; } .hub-music-space[data-hub-music-panel="clips"] .hub-clips { padding-top: 1px; } @keyframes hub-music-panel-enter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .hub-music-space.is-active { animation: none; } } .hub-music-toolbar { display: grid; gap: 9px; padding: 0 12px 14px; } .hub-music-toolbar > label { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-height: 45px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-surface); color: var(--app-muted); } .hub-music-toolbar input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--app-text); } .hub-music-toolbar > label[hidden] { display: none; } .hub-music-toolbar > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 3px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-surface); } .hub-music-toolbar > div button { min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: .75rem; font-weight: 850; } .hub-music-toolbar > div button.is-active { background: var(--app-orange); color: #17100d; } .hub-track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 12px; } .hub-track-card { min-width: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); } .hub-track-art { position: relative; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; background: #0d0f12; cursor: pointer; touch-action: pan-y; } .hub-track-art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .hub-track-art span { position: absolute; right: 10px; bottom: 10px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgba(255, 106, 61, .94); color: #130b08; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } .hub-track-copy { display: grid; gap: 5px; padding: 11px; } .hub-track-copy small { overflow: hidden; color: var(--app-orange); font-size: .58rem; font-weight: 850; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .hub-track-copy strong { display: -webkit-box; min-height: 2.35em; overflow: hidden; font-size: .79rem; line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .hub-track-copy em { color: var(--app-muted); font-size: .62rem; font-style: normal; } .hub-track-actions { display: flex; gap: 5px; margin-top: 3px; } .hub-track-actions button { flex: 1; min-height: 30px; border: 1px solid var(--app-line); border-radius: 6px; background: transparent; color: var(--app-muted); font-size: .63rem; font-weight: 800; cursor: pointer; } .hub-track-actions button:active { background: rgba(255, 106, 61, .14); color: var(--app-orange); } .hub-album-grid { display: grid; gap: 10px; padding: 0 12px; } .hub-album-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 13px; padding: 10px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); color: var(--app-text); text-align: left; cursor: pointer; } .hub-album-card img { width: 104px; height: 104px; border-radius: 7px; object-fit: cover; } .hub-album-card > span { align-self: center; min-width: 0; } .hub-album-card small { color: var(--hub-gold); font-size: .62rem; font-weight: 900; } .hub-album-card strong { display: block; margin: 6px 0; font-size: 1rem; } .hub-album-card em { color: var(--app-muted); font-size: .68rem; font-style: normal; } .hub-album-player { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); } .hub-album-player > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; } .hub-album-player > div strong { font-size: .78rem; } .hub-album-player > div button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--app-bg); color: var(--app-text); } .hub-album-player iframe { display: block; width: 100%; height: 320px; border: 0; } .hub-queue-panel { margin: 18px 12px 0; padding: 13px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); } .hub-queue-panel > div:first-child { display: flex; justify-content: space-between; color: var(--app-orange); font-size: .62rem; font-weight: 900; } .hub-queue-panel > div:first-child button { border: 0; background: transparent; color: var(--app-muted); font-size: .65rem; } #hubQueueList { display: grid; gap: 5px; margin-top: 9px; } .hub-queue-item { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .68rem; } .hub-queue-item strong { overflow: hidden; color: var(--app-text); text-overflow: ellipsis; white-space: nowrap; } .hub-queue-item button { border: 0; background: transparent; color: var(--app-muted); } .hub-radio-grid { display: grid; gap: 12px; padding: 0 12px; } .hub-radio-grid[hidden] { display: none; } .hub-radio-card { padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); } .hub-radio-card > span { color: var(--app-orange); font-size: .63rem; font-weight: 900; letter-spacing: .12em; } .hub-radio-card h2 { margin: 15px 0; font-size: 1.25rem; } .hub-radio-art { display: grid; height: 108px; margin-top: 12px; place-items: center; border-radius: 8px; background: #332018; color: var(--app-orange); font-size: 2.5rem; } .hub-radio-art-green { background: #172825; color: var(--app-green); } .hub-radio-card .hub-primary-button { width: 100%; } .hub-radio-queue { display: grid; gap: 6px; } .hub-radio-queue button { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-text); text-align: left; } .hub-radio-queue button small { color: var(--app-muted); } .hub-queue-embed { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 10px 0; border: 0; border-radius: 8px; background: #000; } .hub-clips { display: grid; gap: 12px; padding: 0 12px; } .hub-clip-card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; background: #08090b; } .hub-clip-youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0 !important; background: radial-gradient(circle at 50% 45%,rgba(255,106,61,.17),transparent 44%),#000; } .hub-clip-youtube > div,.hub-clip-youtube iframe { position: relative; z-index: 2; display: block; width: 100%; height: 100%; padding: 0; border: 0; } .hub-clip-loading { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.48); font-size: .62rem; font-weight: 950; letter-spacing: .18em; } .hub-clip-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 12px; padding: 12px; } .hub-clip-card small { color: var(--app-orange); font-size: .62rem; font-weight: 900; } .hub-clip-card h2 { grid-column: 1; margin: 2px 0 0; font-size: .95rem; } .hub-clip-card a { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 7px 9px; border: 1px solid rgba(255,106,61,.32); border-radius: 8px; color: var(--app-orange); font-size: .58rem; font-weight: 850; text-decoration: none; } .hub-clip-card.is-ready .hub-clip-loading { display: none; } .hub-clip-card.is-error .hub-clip-loading { z-index: 3; display: grid; padding: 20px; color: #fff; font-size: 0; text-align: center; } .hub-clip-card.is-error .hub-clip-loading::after { content: "Ouvre la vidéo sur YouTube"; font-size: .62rem; } .hub-clips-empty { margin: 12px 0; color: var(--app-muted); overflow-wrap: break-word; } .hub-store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 12px; } .hub-store-card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); } .hub-store-card img { width: 100%; aspect-ratio: 1; background: #eee; object-fit: cover; } .hub-store-card div { display: grid; gap: 6px; padding: 11px; } .hub-store-card small { color: var(--app-orange); font-size: .58rem; font-weight: 850; } .hub-store-card strong { min-height: 2.3em; font-size: .78rem; } .hub-store-card em { color: var(--hub-gold); font-size: .7rem; font-style: normal; font-weight: 850; } .hub-store-card button, .hub-cart-shortcut { min-height: 34px; border: 1px solid var(--app-line); border-radius: 7px; background: transparent; color: var(--app-text); font-size: .68rem; font-weight: 850; } .hub-cart-shortcut { padding: 0 11px; } .hub-cart-shortcut b { color: var(--app-orange); } .hub-cart-list { display: grid; gap: 8px; padding: 0 12px; } .hub-cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-surface); } .hub-cart-line img { width: 64px; height: 64px; border-radius: 7px; object-fit: cover; } .hub-cart-line span { display: grid; gap: 5px; min-width: 0; } .hub-cart-line strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .hub-cart-line small { color: var(--hub-gold); } .hub-cart-line button { border: 0; background: transparent; color: var(--app-muted); font-size: 1.1rem; } .hub-cart-total { display: grid; gap: 10px; margin: 14px 12px; padding: 18px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); } .hub-cart-total span, .hub-cart-total small { color: var(--app-muted); font-size: .68rem; } .hub-cart-total strong { font-size: 1.6rem; } .hub-contact-form { display: grid; gap: 13px; margin: 0 12px; padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); } .hub-contact-address { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--app-line); } .hub-contact-address > span { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--app-orange); color: #180e0a; } .hub-contact-address > div { display: grid; gap: 3px; min-width: 0; } .hub-contact-address strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .hub-contact-address small { color: var(--app-muted); font-size: .65rem; } .hub-contact-form label { display: grid; gap: 6px; color: var(--app-muted); font-size: .68rem; font-weight: 800; } .hub-contact-form input, .hub-contact-form textarea { width: 100%; border: 1px solid var(--app-line); border-radius: 8px; padding: 11px 12px; background: var(--app-bg); color: var(--app-text); } .hub-contact-form textarea { resize: vertical; } .hub-contact-result { margin: 0; color: var(--app-green); font-size: .72rem; } .hub-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .app-floating-compose { position: fixed; z-index: 32; right: max(18px, calc(50% - 342px)); bottom: calc(82px + env(safe-area-inset-bottom)); transition: opacity 180ms ease, transform 180ms ease; } .hub-mini-player { position: fixed; z-index: 38; right: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) 42px 34px 30px; align-items: center; width: min(704px, calc(100% - 16px)); min-height: 64px; transform: translateX(50%); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: linear-gradient(120deg, rgba(31,33,39,.98), rgba(20,22,27,.98)); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); backdrop-filter: blur(22px); animation: hub-mini-in 240ms ease both; } .hub-mini-open { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 0; background: transparent; color: var(--app-text); text-align: left; } .hub-mini-art { position: relative; display: block; width: 45px; height: 45px; } .hub-mini-open img { width: 45px; height: 45px; border-radius: 9px; object-fit: cover; } .hub-mini-art > i { position: absolute; right: 4px; bottom: 4px; display: none; height: 13px; align-items: end; gap: 2px; padding: 3px; border-radius: 5px; background: rgba(8,9,12,.72); backdrop-filter: blur(4px); } .hub-mini-player.is-playing .hub-mini-art > i { display: flex; } .hub-mini-art b { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--app-orange); animation: hub-eq .72s ease-in-out infinite alternate; } .hub-mini-art b:nth-child(2) { height: 9px; animation-delay: -.28s; } .hub-mini-art b:nth-child(3) { height: 7px; animation-delay: -.5s; } @keyframes hub-eq { to { height: 11px; } } .hub-mini-open span { display: grid; min-width: 0; gap: 3px; } .hub-mini-open strong, .hub-mini-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-mini-open strong { font-size: .75rem; }.hub-mini-open small { color: var(--app-muted); font-size: .62rem; } .hub-mini-player > button:not(.hub-mini-open) { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--app-text); font-size: 1.05rem; } .hub-mini-player > .hub-mini-close { width: 28px; height: 28px; color: var(--app-muted); font-size: 1.25rem; font-weight: 300; } .hub-mini-player > i { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(255,255,255,.08); } .hub-mini-player > i span { display: block; width: 0; height: 100%; background: var(--app-orange); transition: width 250ms linear; } @keyframes hub-mini-in { from { opacity: 0; transform: translate(50%, 12px); } to { opacity: 1; transform: translate(50%, 0); } } .hub-social-music-shortcut { position: fixed; z-index: 30; left: max(16px, calc(50% - 342px)); bottom: calc(82px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } .hub-social-music-button { position: absolute; inset: 0; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: var(--app-orange); color: #160c09; box-shadow: 0 12px 28px rgba(0,0,0,.38); font-size: 1.45rem; line-height: 1; transition: transform 180ms ease, opacity 180ms ease; } .hub-social-music-close { position: absolute; top: -7px; right: -8px; display: grid; width: 17px; height: 17px; place-items: center; padding: 0; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-surface); color: var(--app-muted); font-size: .76rem; line-height: 1; } .hub-social-music-button:hover { transform: translateY(-2px) scale(1.04); } .hub-social-music-close:hover { color: var(--app-text); } body.hub-player-open .hub-social-music-shortcut { visibility: hidden; } .hub-player-screen { position: fixed; z-index: 80; inset: 0; overflow: hidden; background: #0c0e11; } .hub-player-background { position: absolute; inset: -30px; opacity: .2; background-position: center; background-size: cover; filter: blur(30px) saturate(1.35); transform: scale(1.1); transition: background-image 300ms ease; } .hub-player-background::after { position: absolute; inset: 0; content: ""; background: rgba(9, 11, 14, .66); } .hub-full-player { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(100% - 34px, 520px); height: 100dvh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); } .hub-player-grabber { width: 38px; height: 4px; margin: 2px auto 9px; border-radius: 99px; background: rgba(255,255,255,.32); } .hub-full-player > header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; text-align: center; } .hub-full-player > header span { color: var(--app-muted); font-size: .64rem; font-weight: 900; letter-spacing: .16em; } .hub-player-heading { display: grid; gap: 2px; } .hub-player-heading small { display: none; } .hub-player-heading strong { font: inherit; } .hub-full-player > header button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--app-text); font-size: 1.2rem; } .hub-player-art-stage { position: relative; } .hub-player-art { width: min(52dvh, calc(100vw - 52px), 470px); aspect-ratio: 1; margin: clamp(22px, 6dvh, 64px) auto 28px; overflow: hidden; border-radius: 14px; background: #111; box-shadow: 0 25px 70px rgba(0,0,0,.48); touch-action: none; user-select: none; } .hub-player-art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .hub-player-pulse, .hub-apk-badge, .hub-player-next-up { display: none; } .hub-player-screen.is-changing .hub-player-art img { animation: hub-track-fade 420ms cubic-bezier(.2,.8,.2,1) both; } .hub-player-screen[data-direction="previous"].is-changing .hub-player-art img { animation-name: hub-track-fade-back; } @keyframes hub-track-fade { 0% { opacity: .15; transform: translateX(22px) scale(.98); } 100% { opacity: 1; transform: none; } } @keyframes hub-track-fade-back { 0% { opacity: .15; transform: translateX(-22px) scale(.98); } 100% { opacity: 1; transform: none; } } .hub-player-copy { min-width: 0; } .hub-player-copy small { color: var(--app-orange); font-size: .64rem; font-weight: 900; text-transform: uppercase; } .hub-player-copy h1 { overflow: hidden; margin: 7px 0 5px; font-size: 2rem; text-overflow: ellipsis; white-space: nowrap; } .hub-player-copy p { margin: 0; color: var(--app-muted); font-size: .7rem; } .hub-player-timeline { margin-top: 20px; } .hub-player-timeline input { width: 100%; accent-color: var(--app-orange); } .hub-player-timeline div { display: flex; justify-content: space-between; margin-top: 5px; color: var(--app-muted); font-size: .64rem; } .hub-player-controls { display: grid; grid-template-columns: 38px 48px 66px 48px 38px; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; } .hub-player-controls button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); font-size: 1rem; } .hub-player-controls button[aria-pressed="true"] { color: var(--app-orange); background: rgba(255,106,61,.1); } .hub-player-controls .hub-main-play { width: 64px; height: 64px; background: var(--app-orange); color: #160c09; font-size: 1.25rem; } .hub-icon { position: relative; display: block; width: 20px; height: 20px; color: currentColor; } .hub-icon-play { width: 0; height: 0; margin-left: 3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; } .hub-icon-play.is-pause { width: 13px; height: 16px; margin-left: 0; border: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px); } .hub-icon-chevron { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); } .hub-icon-party { width: 21px; height: 21px; overflow: visible; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 30%, currentColor 31% 35%, transparent 36% 64%, currentColor 65% 69%, transparent 70%), linear-gradient(transparent 30%, currentColor 31% 35%, transparent 36% 64%, currentColor 65% 69%, transparent 70%); opacity: .92; } .hub-icon-party::before { position: absolute; top: -5px; left: 9px; width: 2px; height: 5px; content: ""; border-radius: 2px 2px 0 0; background: currentColor; } .hub-icon-party::after { position: absolute; top: 3px; left: 4px; width: 4px; height: 4px; content: ""; border-radius: 50%; background: #fff; box-shadow: 8px 7px 0 -1px currentColor; } #hubPartyMode[aria-pressed="true"] { border-color: rgba(255,214,111,.5); background: rgba(255,214,111,.13); color: #ffd66f; box-shadow: 0 0 24px rgba(255,214,111,.18); } .hub-reader-glyph { position: relative; display: grid; width: 25px; height: 25px; place-items: center; } .hub-reader-glyph img { display: block; width: 25px; height: 25px; object-fit: contain; filter: invert(1); mix-blend-mode: screen; } .hub-player-controls button[data-mode="one"] .hub-reader-glyph::after { position: absolute; right: -5px; top: -5px; display: grid; width: 12px; height: 12px; place-items: center; content: "1"; border: 1px solid currentColor; border-radius: 50%; background: #15171b; color: currentColor; font-size: .52rem; font-weight: 900; } .hub-skip { position: relative; display: block; width: 23px; height: 20px; } .hub-skip::before, .hub-skip::after { position: absolute; top: 3px; width: 0; height: 0; content: ""; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .hub-skip-back::before, .hub-skip-back::after { border-right: 10px solid currentColor; }.hub-skip-back::before { left: 0; }.hub-skip-back::after { left: 8px; } .hub-skip-next::before, .hub-skip-next::after { border-left: 10px solid currentColor; }.hub-skip-next::before { left: 0; }.hub-skip-next::after { left: 8px; } .hub-skip-back { border-left: 2px solid currentColor; }.hub-skip-next { border-right: 2px solid currentColor; } .hub-party-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .hub-player-screen.is-party .hub-party-layer { opacity: 1; } .hub-disco-ball { position: absolute; top: 5%; left: 50%; width: 82px; height: 82px; transform: translateX(-50%); border: 3px solid #fff; border-radius: 50%; background: repeating-linear-gradient(45deg,#fff 0 7px,#71818b 7px 14px); box-shadow: 0 0 34px rgba(255,255,255,.5); animation: hub-disco 3s ease-in-out infinite; } .hub-party-layer i { position: absolute; top: -20px; width: 8px; height: 16px; background: var(--app-orange); animation: hub-confetti 4.2s linear infinite; } .hub-party-layer i:nth-child(2){left:8%;}.hub-party-layer i:nth-child(3){left:21%;background:var(--app-green);animation-delay:-1s}.hub-party-layer i:nth-child(4){left:34%;background:var(--app-blue);animation-delay:-2.2s}.hub-party-layer i:nth-child(5){left:47%;background:var(--hub-gold);animation-delay:-.4s}.hub-party-layer i:nth-child(6){left:60%;background:var(--hub-violet);animation-delay:-2.8s}.hub-party-layer i:nth-child(7){left:73%;background:var(--app-green);animation-delay:-1.8s}.hub-party-layer i:nth-child(8){left:86%;background:var(--app-orange);animation-delay:-3.4s}.hub-party-layer i:nth-child(9){left:95%;background:var(--app-blue);animation-delay:-.7s} @keyframes hub-confetti { to { transform: translate3d(6vw,110vh,0) rotate(620deg); } } @keyframes hub-disco { 50% { transform: translateX(-50%) translateY(8px) rotate(8deg); } } .hub-more-sheet, .hub-upgrade { position: fixed; z-index: 65; inset: 0; } .hub-more-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(4,5,7,.74); backdrop-filter: blur(7px); } .hub-more-panel { position: absolute; right: 0; bottom: 0; left: 0; width: min(720px,100%); margin: auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); border: 1px solid var(--app-line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--app-surface); animation: hub-sheet-in 260ms cubic-bezier(.2,.8,.2,1) both; } .hub-more-panel > i { display: block; width: 42px; height: 4px; margin: 0 auto 16px; border-radius: 5px; background: var(--app-line); } .hub-more-panel header { display: flex; align-items: center; justify-content: space-between; } .hub-more-panel header small { color: var(--app-orange); font-size: .62rem; font-weight: 900; }.hub-more-panel header h2 { margin: 4px 0 0; } .hub-more-panel header button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--app-bg); color: var(--app-text); font-size: 1.25rem; } .hub-more-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 18px; } .hub-more-grid button { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 2px 8px; min-height: 70px; padding: 12px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-bg); color: var(--app-text); text-align: left; } .hub-more-grid button > span, .hub-more-grid button > img { grid-row: 1 / 3; align-self: center; width: 26px; max-height: 32px; object-fit: contain; color: var(--app-orange); font-size: 1.25rem; } .hub-more-grid strong { align-self: end; font-size: .78rem; }.hub-more-grid small { color: var(--app-muted); font-size: .62rem; } @keyframes hub-sheet-in { from { transform: translateY(100%); } } .hub-home-customize { position: fixed; z-index: 75; inset: 0; } .hub-home-customize-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(4,5,7,.76); backdrop-filter: blur(8px); } .hub-home-customize-panel { position: absolute; right: 0; bottom: 0; left: 0; width: min(680px,100%); max-height: min(84dvh,680px); margin: auto; overflow: auto; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border: 1px solid var(--app-line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--app-surface); animation: hub-sheet-in 260ms cubic-bezier(.2,.8,.2,1) both; } .hub-home-customize-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hub-home-customize-panel header small { color: var(--app-orange); font-size: .62rem; font-weight: 900; letter-spacing: .12em; } .hub-home-customize-panel h2 { margin: 4px 0 0; font-size: 1.25rem; } .hub-home-customize-panel header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--app-bg); color: var(--app-text); font-size: 1.3rem; } .hub-home-customize-panel > p { margin: 12px 0 14px; color: var(--app-muted); font-size: .74rem; line-height: 1.45; } .hub-home-module-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 30px 30px; align-items: center; gap: 8px; min-height: 58px; border-top: 1px solid var(--app-line); } .hub-home-module-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } .hub-home-module-row strong { font-size: .78rem; }.hub-home-module-row small { color: var(--app-muted); font-size: .64rem; } .hub-home-module-row label { display: flex; align-items: center; gap: 5px; color: var(--app-muted); font-size: .62rem; white-space: nowrap; } .hub-home-module-row input { accent-color: var(--app-orange); } .hub-home-module-row > button { width: 28px; height: 28px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-text); } .hub-home-module-row > button:disabled { opacity: .28; } .hub-home-reset { width: 100%; min-height: 40px; margin-top: 14px; border: 1px solid var(--app-line); border-radius: 8px; background: transparent; color: var(--app-muted); font-size: .7rem; font-weight: 800; } .hub-upgrade { z-index: 100; display: grid; place-items: center; overflow-y:auto; padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); background: rgba(5,6,8,.88); backdrop-filter: blur(18px); } .hub-upgrade-card { width: min(100%,470px); max-height:calc(100dvh - 36px);overflow-y:auto;padding: 28px 24px; border: 1px solid rgba(216,180,104,.45); border-radius: 18px; background: #191b20; box-shadow: 0 26px 90px rgba(0,0,0,.6); text-align: center; animation: hub-upgrade-in 340ms cubic-bezier(.2,.8,.2,1) both; } .hub-upgrade-card img { width: 72px; height: 72px; margin: 0 auto 17px; border-radius: 14px; object-fit: cover; } .hub-upgrade-card img.hub-upgrade-celebration { display: block; width: 100%; height: clamp(155px, 38vw, 208px); margin: 0 0 19px; border: 1px solid rgba(216,180,104,.4); border-radius: 13px; object-position: center 42%; box-shadow: 0 16px 34px rgba(0,0,0,.34); } .hub-upgrade-card > small { color: var(--hub-gold); font-size: .67rem; font-weight: 950; letter-spacing: .14em; } .hub-upgrade-card h2 { margin: 12px 0; font-size: 2rem; line-height: 1; } .hub-upgrade-card p { color: var(--app-muted); font-size: .83rem; line-height: 1.55; }.hub-upgrade-card p strong { color: var(--app-text); } .hub-upgrade-notes { display: grid; gap: 9px; margin: 18px 0; padding: 0; list-style: none; text-align: left; } .hub-upgrade-notes:empty { display: none; } .hub-upgrade-notes li { position: relative; padding: 11px 12px 11px 34px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--app-text); font-size: .76rem; line-height: 1.4; } .hub-upgrade-notes li::before { position: absolute; left: 12px; top: 11px; color: var(--app-orange); content: "✓"; font-weight: 950; } .hub-upgrade-card button { width: 100%; margin-top: 8px; } .hub-home-icon-kafpoints{position:relative;color:#ffd32e!important;background:linear-gradient(145deg,#54147b,#21102f)!important;box-shadow:inset 0 0 0 1px rgba(255,211,46,.35),0 8px 22px rgba(76,18,112,.28);font-weight:1000!important}.hub-home-icon-kafpoints::after{position:absolute;content:"";inset:5px;border:1px dashed rgba(255,211,46,.55);border-radius:50%;animation:hub-kaf-spin 12s linear infinite}@keyframes hub-kaf-spin{to{transform:rotate(360deg)}} @keyframes hub-upgrade-in { from { opacity: 0; transform: translateY(18px) scale(.97); } } @media(max-width:480px),(max-height:720px){.hub-upgrade-card{padding:20px 17px}.hub-upgrade-card img{width:58px;height:58px;margin-bottom:10px}.hub-upgrade-card img.hub-upgrade-celebration{width:100%;height:142px;margin-bottom:14px}.hub-upgrade-card h2{margin:8px 0;font-size:1.65rem}.hub-upgrade-notes{gap:6px;margin:12px 0}.hub-upgrade-notes li{padding:8px 9px 8px 29px}.hub-upgrade-notes li::before{left:10px;top:8px}} .hub-native-update { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); background: rgba(5,6,8,.94); backdrop-filter: blur(22px); } .hub-native-update-card { width: min(100%,470px); padding: 30px 24px; border: 1px solid rgba(255,101,64,.55); border-radius: 18px; background: #191b20; box-shadow: 0 28px 100px rgba(0,0,0,.72); text-align: center; animation: hub-upgrade-in 340ms cubic-bezier(.2,.8,.2,1) both; } .hub-native-update-card img { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 15px; object-fit: cover; } .hub-native-update-card > small:first-of-type { color: var(--app-orange); font-size: .7rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; } .hub-native-update-card h2 { margin: 12px 0; font-size: 2rem; line-height: 1.04; } .hub-native-update-card p { margin: 0 0 20px; color: var(--app-muted); font-size: .86rem; line-height: 1.55; } .hub-native-update-progress { position: relative; height: 10px; margin: 0 0 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 4px rgba(0,0,0,.3); } .hub-native-update-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--app-orange),#ff9f5f); box-shadow: 0 0 18px rgba(255,106,61,.42); transition: width 220ms ease; } .hub-native-update-progress.is-indeterminate span { width: 34%; animation: hub-update-indeterminate 1.05s ease-in-out infinite; } @keyframes hub-update-indeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } } .hub-native-update-card button { width: 100%; min-height: 52px; } .hub-native-update-card > span { display: block; min-height: 36px; margin-top: 12px; color: var(--app-muted); font-size: .68rem; line-height: 1.45; } #hubAudio, #hubSoundCloud { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; } @media (min-width: 620px) { .hub-track-grid, .hub-store-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .hub-radio-grid { grid-template-columns: 1fr 1fr; } .hub-clips { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 480px) { .hub-home-hero { min-height: 0; padding-top: 24px; } .hub-home-hero h1 { font-size: 2.65rem; } .hub-view-heading h1 { font-size: 1.65rem; } .hub-player-copy h1 { font-size: 1.55rem; } .hub-hero-actions { display: grid; grid-template-columns: 1fr 1fr; } .hub-player-art { margin-top: clamp(16px,4dvh,40px); } .hub-full-player { width: min(100% - 28px,520px); } .hub-player-controls { gap: 5px; } } @media (max-height: 690px) and (max-width: 620px) { .hub-player-art { width: min(40dvh,calc(100vw - 70px),300px); margin-top: 8px; margin-bottom: 14px; } .hub-player-copy h1 { margin-top: 4px; font-size: 1.42rem; } .hub-player-timeline, .hub-player-controls { margin-top: 10px; } .hub-player-controls .hub-main-play { width: 56px; height: 56px; } } .hub-community-playlists { margin: 18px 0 26px; padding: 16px; border: 1px solid var(--app-line); border-radius: 14px; background: color-mix(in srgb, var(--app-surface) 88%, transparent); } .hub-community-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .hub-community-heading > div:last-child { display: flex; align-items: center; gap: 6px; } .hub-community-heading h2 { margin: 3px 0 0; font-size: 1.1rem; } .hub-community-playlist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; } .hub-community-playlist-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 10px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); } .hub-community-playlist-cover { width: 92px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: #101114; } .hub-community-playlist-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; } .hub-community-playlist-cover:hover img { transform: scale(1.06); } .hub-community-playlist-copy { min-width: 0; } .hub-community-playlist-copy small, .hub-community-playlist-copy p, .hub-community-playlist-copy > span { display: block; overflow: hidden; color: var(--app-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .hub-community-playlist-copy h3 { overflow: hidden; margin: 4px 0; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; } .hub-community-playlist-copy p { margin: 0 0 4px; } .hub-community-playlist-actions { display: flex; align-items: center; gap: 6px; margin-top: 9px; } .hub-community-playlist-actions .hub-primary-button { min-height: 30px; padding: 0 10px; font-size: .66rem; } .hub-community-playlist-actions .app-text-button { padding: 4px; font-size: .65rem; } .hub-community-empty { grid-column: 1 / -1; margin: 8px 0 2px; color: var(--app-muted); font-size: .78rem; } .hub-community-playlist-detail { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--app-orange) 48%, var(--app-line)); border-radius: 12px; background: var(--app-bg); } .hub-community-playlist-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .hub-community-playlist-detail-heading small { color: var(--app-orange); font-size: .64rem; font-weight: 850; letter-spacing: .08em; } .hub-community-playlist-detail-heading h3 { margin: 4px 0 2px; font-size: 1.08rem; } .hub-community-playlist-detail-heading p { margin: 0; color: var(--app-muted); font-size: .72rem; } .hub-community-playlist-detail-summary { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 11px; align-items: center; margin: 13px 0; } .hub-community-playlist-detail-summary > img { width: 78px; height: 78px; border-radius: 9px; object-fit: cover; background: #101114; } .hub-community-playlist-detail-summary > span { display: grid; gap: 4px; min-width: 0; } .hub-community-playlist-detail-summary strong { font-size: .82rem; } .hub-community-playlist-detail-summary small { color: var(--app-muted); font-size: .69rem; } .hub-community-playlist-detail-summary .hub-primary-button { justify-self: start; min-height: 32px; margin-top: 4px; padding: 0 11px; font-size: .68rem; } .hub-community-playlist-detail-tracks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .hub-community-playlist-detail-tracks li { min-width: 0; } .hub-community-playlist-detail-tracks li > button { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) 24px; gap: 9px; align-items: center; width: 100%; min-height: 52px; padding: 7px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-surface); color: var(--app-text); text-align: left; } .hub-community-playlist-detail-tracks li > button:active { transform: scale(.99); } .hub-community-playlist-track-number { color: var(--app-muted); font-size: .72rem; text-align: center; } .hub-community-playlist-detail-tracks img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #101114; } .hub-community-playlist-detail-tracks li > button > span:not(.hub-community-playlist-track-number) { display: grid; gap: 2px; min-width: 0; } .hub-community-playlist-detail-tracks strong, .hub-community-playlist-detail-tracks small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-community-playlist-detail-tracks strong { font-size: .75rem; } .hub-community-playlist-detail-tracks small { color: var(--app-muted); font-size: .65rem; } .hub-community-playlist-detail-tracks i { color: var(--app-orange); font-size: .72rem; font-style: normal; text-align: center; } .hub-community-playlist-detail-empty { padding: 10px; color: var(--app-muted); font-size: .72rem; text-align: center; } .hub-playlist-editor { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--app-orange) 45%, var(--app-line)); border-radius: 12px; background: var(--app-bg); } .hub-playlist-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .hub-playlist-editor-heading h3 { margin: 3px 0 0; font-size: 1rem; } .hub-playlist-editor > label { display: grid; gap: 5px; color: var(--app-muted); font-size: .68rem; font-weight: 800; } .hub-playlist-editor input[type="text"], .hub-playlist-editor input:not([type]) { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-surface); color: var(--app-text); } .hub-playlist-cover-editor { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .hub-playlist-cover-editor img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; background: #101114; } .hub-playlist-cover-editor label { display: grid; gap: 5px; color: var(--app-muted); font-size: .68rem; font-weight: 800; } .hub-playlist-cover-editor input { max-width: 190px; font-size: .68rem; } .hub-playlist-add-track { display: flex; align-items: center; gap: 7px; margin-top: 12px; } .hub-playlist-add-track select { min-width: 0; flex: 1; min-height: 34px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-surface); color: var(--app-text); font-size: .7rem; } .hub-playlist-add-track .app-text-button { padding: 5px 8px; font-size: .66rem; } .hub-playlist-track-list { display: grid; gap: 5px; margin: 14px 0; padding: 0; list-style: none; } .hub-playlist-track-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; gap: 7px; min-height: 31px; padding: 4px 7px; border-radius: 7px; background: var(--app-surface); color: var(--app-muted); font-size: .68rem; } .hub-playlist-track-list strong { overflow: hidden; color: var(--app-text); text-overflow: ellipsis; white-space: nowrap; } .hub-playlist-track-list button { width: 25px; height: 25px; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); } .hub-playlist-editor-actions { display: flex; align-items: center; gap: 10px; } .hub-playlist-editor-actions .hub-primary-button { min-height: 36px; padding: 0 14px; } .hub-playlist-editor-status { min-height: 18px; margin: 8px 0 0; color: var(--app-orange); font-size: .7rem; } @media (max-width: 620px) { .hub-community-playlists { padding: 12px; } .hub-community-heading { align-items: flex-start; } .hub-community-heading > div:last-child { flex-shrink: 0; } .hub-community-heading .app-text-button { max-width: 92px; overflow: hidden; padding: 4px; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; } .hub-community-playlist-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hub-player-screen *, .hub-mini-player, .hub-more-panel, .hub-upgrade-card { animation-duration: .01ms !important; transition-duration: .01ms !important; } } html.app-ios .hub-player-screen { height: var(--app-height, 100dvh); overscroll-behavior: none; } html.app-ios .hub-full-player { height: var(--app-height, 100dvh); } html:is(.app-ios,.app-android-apk) .hub-player-art, html:is(.app-ios,.app-android-apk) .hub-track-art, html:is(.app-ios,.app-android-apk) .hub-featured-track { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* PWA iOS : lecteur plein écran indépendant du navigateur Safari. */ html.app-ios-player .hub-player-screen { --hub-player-drag: 0px; height: var(--app-height,100dvh); background: #090a0d; opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 260ms ease; } html.app-ios-player .hub-player-screen.is-visible, html.app-ios-player .hub-player-screen.is-dragging { opacity: 1; visibility: visible; } html.app-ios-player .hub-player-screen.is-closing { opacity: 0; visibility: visible; } html.app-ios-player .hub-player-background { inset: 0; opacity: 1; background: #090a0d; filter: none; transform: none; transition: none; } html.app-ios-player .hub-player-background::after { background: #090a0d; } html.app-ios-player .hub-full-player { width: min(100% - 32px,560px); height: var(--app-height,100dvh); padding: max(10px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom)); transform: translate3d(0,var(--hub-player-drag),0); transform-origin: center bottom; transition: transform 340ms cubic-bezier(.2,.82,.2,1), opacity 240ms ease; } html.app-ios-player .hub-player-screen:not(.is-visible):not(.is-dragging) .hub-full-player { opacity: .76; transform: translate3d(0,26px,0) scale(.99); } html.app-ios-player .hub-player-screen.is-dragging .hub-full-player { opacity: .94; transition: none; } html.app-ios-player .hub-player-grabber { width: 42px; height: 5px; margin-top: 2px; background: rgba(255,255,255,.4); } html.app-ios-player .hub-full-player > header { min-height: 46px; } html.app-ios-player .hub-full-player > header button { width: 42px; height: 42px; border-color: rgba(255,255,255,.13); background: rgba(20,22,27,.9); backdrop-filter: none; -webkit-backdrop-filter: none; } html.app-ios-player .hub-player-heading { gap: 1px; line-height: 1; } html.app-ios-player .hub-player-heading small { display: block; color: var(--app-orange); font-size: .5rem; font-weight: 950; letter-spacing: .18em; } html.app-ios-player .hub-player-heading strong { color: #f8f6f1; font-size: .66rem; letter-spacing: .13em; } html.app-ios-player .hub-player-art-stage { margin: clamp(14px,3dvh,32px) 0 23px; } html.app-ios-player .hub-player-art { position: relative; width: min(48dvh,calc(100vw - 48px),480px); margin: 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; box-shadow: 0 32px 86px rgba(0,0,0,.62),0 0 0 .5px rgba(255,255,255,.08); transform: translate3d(var(--hub-art-drag,0),0,0); transition: transform 320ms cubic-bezier(.2,.82,.2,1),box-shadow 300ms ease; } html.app-ios-player .hub-player-screen.is-playing .hub-player-art { box-shadow: 0 36px 92px rgba(0,0,0,.68),0 0 38px rgba(255,106,61,.1); } html.app-ios-player .hub-player-pulse { position: absolute; right: max(4px,calc(50% - min(24dvh,240px))); bottom: -10px; display: flex; align-items: flex-end; gap: 3px; height: 25px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(13,14,18,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.app-ios-player .hub-player-pulse i { width: 3px; height: 7px; border-radius: 3px; background: var(--app-orange); transform-origin: bottom; } html.app-ios-player .hub-player-screen.is-playing .hub-player-pulse i { animation: hub-player-bar .8s ease-in-out infinite alternate; } html.app-ios-player .hub-player-pulse i:nth-child(2) { animation-delay: -.25s; } html.app-ios-player .hub-player-pulse i:nth-child(3) { animation-delay: -.55s; } html.app-ios-player .hub-player-pulse i:nth-child(4) { animation-delay: -.14s; } html.app-ios-player .hub-player-pulse i:nth-child(5) { animation-delay: -.42s; } html.app-ios-player .hub-player-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.app-ios-player .hub-apk-badge { display: inline-flex; padding: 4px 7px; border: 1px solid rgba(112,215,207,.3); border-radius: 999px; background: rgba(112,215,207,.08); color: var(--hub-cyan); font-size: .5rem; font-weight: 950; letter-spacing: .08em; } html.app-ios-player .hub-player-copy { padding: 0 4px; } html.app-ios-player .hub-player-copy h1 { margin-top: 9px; font-size: clamp(1.72rem,6vw,2.3rem); } html.app-ios-player .hub-player-copy p { font-size: .71rem; } html.app-ios-player .hub-player-timeline { margin-top: 19px; } html.app-ios-player .hub-player-timeline input { width: 100%; height: 26px; margin: 0; appearance: none; background: transparent; touch-action: pan-x; } html.app-ios-player .hub-player-timeline input::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg,var(--app-orange) 0 var(--hub-progress,0%),rgba(255,255,255,.18) var(--hub-progress,0%) 100%); } html.app-ios-player .hub-player-timeline input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6px; appearance: none; border: 3px solid #f8f6f1; border-radius: 50%; background: var(--app-orange); box-shadow: 0 4px 14px rgba(0,0,0,.42); } html.app-ios-player .hub-player-timeline div { margin-top: 0; font-variant-numeric: tabular-nums; } html.app-ios-player .hub-player-controls { grid-template-columns: 45px 56px 76px 56px 45px; gap: 8px; margin-top: 14px; } html.app-ios-player .hub-player-controls button { width: 45px; height: 45px; } html.app-ios-player .hub-player-controls .hub-main-play { width: 74px; height: 74px; background: #f7f5ef; color: #101115; box-shadow: 0 14px 36px rgba(0,0,0,.38),0 0 0 6px rgba(255,255,255,.055); } html.app-ios-player .hub-player-next-up { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; margin-top: auto; padding: 9px 4px 3px; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--app-text); text-align: left; } html.app-ios-player .hub-player-next-up > span:first-child { display: grid; min-width: 0; gap: 2px; } html.app-ios-player .hub-player-next-up small { color: var(--app-orange); font-size: .5rem; font-weight: 950; letter-spacing: .12em; } html.app-ios-player .hub-player-next-up strong,html.app-ios-player .hub-player-next-up em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.app-ios-player .hub-player-next-up strong { font-size: .72rem; } html.app-ios-player .hub-player-next-up em { color: var(--app-muted); font-size: .58rem; font-style: normal; } html.app-ios-player .hub-player-next-up > .hub-skip { flex: 0 0 auto; margin-right: 7px; color: var(--app-muted); transform: scale(.72); } html.app-ios-player .hub-player-next-up:disabled { opacity: .45; } html.app-ios-player .hub-mini-player { bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 68px; border-color: rgba(255,255,255,.14); border-radius: 15px; background: #121418; box-shadow: 0 16px 52px rgba(0,0,0,.5); backdrop-filter: none; -webkit-backdrop-filter: none; } html.app-ios-player .hub-mini-open { grid-template-columns: 49px minmax(0,1fr); } html.app-ios-player .hub-mini-art { width: 49px; height: 49px; } html.app-ios-player .hub-mini-open img { width: 49px; height: 49px; border-radius: 10px; } @media (max-height: 720px) and (max-width: 620px) { html.app-ios-player .hub-player-art-stage { margin-top: 6px; margin-bottom: 13px; } html.app-ios-player .hub-player-art { width: min(38dvh,calc(100vw - 88px),292px); } html.app-ios-player .hub-player-copy h1 { margin: 5px 0 3px; font-size: 1.42rem; } html.app-ios-player .hub-player-timeline,html.app-ios-player .hub-player-controls { margin-top: 8px; } html.app-ios-player .hub-player-controls { grid-template-columns: 41px 51px 63px 51px 41px; } html.app-ios-player .hub-player-controls .hub-main-play { width: 61px; height: 61px; } html.app-ios-player .hub-player-next-up { min-height: 44px; padding-top: 5px; } } /* APK Android uniquement : interface premium, moteur web stable en dessous. */ html.app-android-apk body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; } html.app-android-apk .app-header { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 6px; width: 100%; padding-right: max(12px,env(safe-area-inset-right)); padding-left: max(12px,env(safe-area-inset-left)); } html.app-android-apk .app-brand { width: 100%; overflow: hidden; } html.app-android-apk .app-brand span { overflow: hidden; } html.app-android-apk .app-header-actions { align-items: center; justify-self: end; min-width: 0; max-width: 100%; gap: 3px; white-space: nowrap; } html.app-android-apk .app-header-actions > .app-icon-button { flex: 0 0 38px; } html.app-android-apk .app-header-actions > .kafpoints-balance { min-width: 0; max-width: 98px; flex: 0 1 auto; } html.app-android-apk .kafpoints-balance > span { min-width: 0; overflow: hidden; } html.app-android-apk .kafpoints-balance strong { display: block; overflow: hidden; text-overflow: ellipsis; } html.app-android-apk .hub-more-button { flex-shrink: 0; } html.app-android-apk .app-push-button { position: relative; flex: 0 0 38px; font-size: 0; } html.app-android-apk .app-push-button::before { width: 13px; height: 14px; content: ""; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 4px 4px; transform: translateY(-1px); } html.app-android-apk .app-push-button::after { position: absolute; bottom: 9px; width: 17px; height: 5px; content: ""; border-top: 2px solid currentColor; border-radius: 50%; box-shadow: 0 3px 0 -1px currentColor; } html.app-android-apk .app-post-media { isolation: isolate; contain: paint; background: #090a0c; transform: translateZ(0); } html.app-android-apk .app-post-media-item, html.app-android-apk .app-post-media img, html.app-android-apk .app-post-media video { backface-visibility: hidden; transform: translateZ(0); } html.app-android-apk .hub-player-screen { --hub-player-drag: 0px; background: #08090c; opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms ease; } html.app-android-apk .hub-player-screen.is-visible, html.app-android-apk .hub-player-screen.is-dragging { opacity: 1; visibility: visible; } html.app-android-apk .hub-player-screen.is-closing { opacity: 0; visibility: visible; } html.app-android-apk .hub-player-background { inset: -64px; opacity: .42; filter: blur(54px) saturate(1.6) contrast(1.05); transform: scale(1.16); } html.app-android-apk .hub-player-background::after { background: linear-gradient(180deg, rgba(7,8,11,.36), rgba(8,9,12,.74) 48%, #08090c 92%); } html.app-android-apk .hub-full-player { width: min(100% - 34px, 600px); padding: max(10px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom)); opacity: 1; transform: translate3d(0,var(--hub-player-drag),0); transform-origin: center bottom; transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease; } html.app-android-apk .hub-player-screen:not(.is-visible):not(.is-dragging) .hub-full-player { transform: translate3d(0,28px,0) scale(.985); opacity: .72; } html.app-android-apk .hub-player-screen.is-dragging .hub-full-player { opacity: .94; transition: none; } html.app-android-apk .hub-player-grabber { width: 44px; height: 5px; margin-top: 3px; background: rgba(255,255,255,.42); } html.app-android-apk .hub-full-player > header { min-height: 48px; } html.app-android-apk .hub-full-player > header button { width: 42px; height: 42px; border-color: rgba(255,255,255,.14); background: rgba(17,19,24,.46); backdrop-filter: blur(14px); transition: transform 120ms ease, background-color 180ms ease; } html.app-android-apk .hub-full-player > header button:active { transform: scale(.88); background: rgba(255,255,255,.14); } html.app-android-apk .hub-player-heading { gap: 1px; line-height: 1; } html.app-android-apk .hub-player-heading small { display: block; color: var(--app-orange); font-size: .5rem; font-weight: 950; letter-spacing: .18em; } html.app-android-apk .hub-player-heading strong { color: #f8f6f1; font-size: .67rem; letter-spacing: .13em; } html.app-android-apk .hub-player-art-stage { margin: clamp(14px,3dvh,34px) 0 24px; } html.app-android-apk .hub-player-art { position: relative; width: min(50dvh, calc(100vw - 48px), 500px); margin: 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 34px 90px rgba(0,0,0,.64), 0 0 0 1px rgba(255,106,61,.08); transform: translate3d(var(--hub-art-drag,0),0,0); transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease; } html.app-android-apk .hub-player-screen.is-playing .hub-player-art { box-shadow: 0 38px 96px rgba(0,0,0,.68), 0 0 42px rgba(255,106,61,.12); } html.app-android-apk .hub-player-pulse { position: absolute; right: max(4px,calc(50% - min(25dvh,250px))); bottom: -11px; display: flex; align-items: flex-end; gap: 3px; height: 26px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(10,11,14,.86); box-shadow: 0 9px 28px rgba(0,0,0,.38); } html.app-android-apk .hub-player-pulse i { width: 3px; height: 7px; border-radius: 3px; background: var(--app-orange); transform-origin: bottom; } html.app-android-apk .hub-player-screen.is-playing .hub-player-pulse i { animation: hub-player-bar .8s ease-in-out infinite alternate; } html.app-android-apk .hub-player-pulse i:nth-child(2) { animation-delay: -.25s; } html.app-android-apk .hub-player-pulse i:nth-child(3) { animation-delay: -.55s; } html.app-android-apk .hub-player-pulse i:nth-child(4) { animation-delay: -.14s; } html.app-android-apk .hub-player-pulse i:nth-child(5) { animation-delay: -.42s; } @keyframes hub-player-bar { to { height: 18px; background: #74dbad; } } html.app-android-apk .hub-player-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hub-native-badge { padding: 5px 8px; border: 1px solid rgba(116,219,173,.32); border-radius: 999px; background: rgba(116,219,173,.09); color: #74dbad; font-size: .54rem; font-weight: 900; letter-spacing: .08em; } .hub-apk-badge { padding: 4px 7px; border: 1px solid rgba(255,106,61,.32); border-radius: 999px; background: rgba(255,106,61,.09); color: #ff8a66; font-size: .5rem; font-weight: 950; letter-spacing: .08em; } html.app-android-apk .hub-apk-badge { display: inline-flex; } html.app-android-apk .hub-player-copy { padding: 0 4px; } html.app-android-apk .hub-player-copy h1 { margin-top: 10px; font-size: clamp(1.72rem,6vw,2.4rem); letter-spacing: 0; } html.app-android-apk .hub-player-copy p { font-size: .72rem; } html.app-android-apk .hub-player-timeline { margin-top: 20px; } html.app-android-apk .hub-player-timeline input { width: 100%; height: 26px; margin: 0; appearance: none; background: transparent; touch-action: pan-x; } html.app-android-apk .hub-player-timeline input::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg,var(--app-orange) 0 var(--hub-progress,0%),rgba(255,255,255,.18) var(--hub-progress,0%) 100%); } html.app-android-apk .hub-player-timeline input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5.5px; appearance: none; border: 3px solid #f7f4ee; border-radius: 50%; background: var(--app-orange); box-shadow: 0 4px 14px rgba(0,0,0,.42); } html.app-android-apk .hub-player-timeline div { margin-top: 0; font-variant-numeric: tabular-nums; } html.app-android-apk .hub-player-controls { grid-template-columns: 46px 58px 78px 58px 46px; gap: 8px; margin-top: 14px; } html.app-android-apk .hub-player-controls button { width: 46px; height: 46px; transition: transform 120ms ease, background-color 180ms ease, color 180ms ease; } html.app-android-apk .hub-player-controls button:active { transform: scale(.84); } html.app-android-apk .hub-player-controls .hub-main-play { width: 76px; height: 76px; background: #f6f3ec; color: #101115; box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.06); } html.app-android-apk .hub-player-controls .hub-main-play:active { transform: scale(.9); } html.app-android-apk .hub-player-next-up { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; margin-top: auto; padding: 10px 4px 4px; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--app-text); text-align: left; } html.app-android-apk .hub-player-next-up > span:first-child { display: grid; min-width: 0; gap: 2px; } html.app-android-apk .hub-player-next-up small { color: var(--app-orange); font-size: .5rem; font-weight: 950; letter-spacing: .12em; } html.app-android-apk .hub-player-next-up strong, html.app-android-apk .hub-player-next-up em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.app-android-apk .hub-player-next-up strong { font-size: .72rem; } html.app-android-apk .hub-player-next-up em { color: var(--app-muted); font-size: .58rem; font-style: normal; } html.app-android-apk .hub-player-next-up > .hub-skip { flex: 0 0 auto; margin-right: 7px; color: var(--app-muted); transform: scale(.72); } html.app-android-apk .hub-player-next-up:disabled { opacity: .45; } html.app-android-apk .hub-mini-player { z-index: 38; bottom: calc(80px + env(safe-area-inset-bottom)); min-height: 70px; border-color: rgba(255,255,255,.15); border-radius: 16px; background: rgba(17,19,23,.96); box-shadow: 0 18px 58px rgba(0,0,0,.58); } html.app-android-apk .hub-mini-open { grid-template-columns: 50px minmax(0,1fr); } html.app-android-apk .hub-mini-art { width: 50px; height: 50px; } html.app-android-apk .hub-mini-open img { width: 50px; height: 50px; border-radius: 11px; } html.app-android-apk .hub-mini-player.is-playing .hub-mini-art img { animation: hub-mini-cover 3.2s ease-in-out infinite alternate; } @keyframes hub-mini-cover { to { transform: scale(1.045); } } html.app-android-apk .hub-player-screen.is-buffering .hub-player-art::after, html.app-ios-player .hub-player-screen.is-buffering .hub-player-art::after { position: absolute; inset: 50% auto auto 50%; width: 38px; height: 38px; content: ""; border: 3px solid rgba(255,255,255,.24); border-top-color: var(--app-orange); border-radius: 50%; transform: translate(-50%,-50%); animation: hub-native-spin .8s linear infinite; } html:is(.app-android-apk,.app-ios-player) .hub-mini-player.is-buffering .hub-mini-art::after { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; content: ""; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--app-orange); border-radius: 50%; background: rgba(8,9,12,.82); animation: hub-mini-spin .75s linear infinite; } @keyframes hub-mini-spin { to { transform: rotate(360deg); } } @keyframes hub-native-spin { to { transform: translate(-50%,-50%) rotate(360deg); } } .hub-home-icon-live { color: #5ee6a8; background: rgba(46,201,133,.12); } .hub-home-icon-live::after { position: absolute; inset: 50% auto auto 50%; width: 12px; height: 12px; content: ""; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%,-50%); animation: hub-live-ring 1.8s ease-out infinite; } .hub-menu-live-icon { color: #55dfa0 !important; text-shadow: 0 0 15px rgba(85,223,160,.7); } .hub-live-teaser { position: relative; display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 13px; width: calc(100% - 24px); min-height: 106px; margin: 14px 12px 2px; overflow: hidden; padding: 11px 12px; border: 1px solid rgba(66,216,143,.34); border-radius: 12px; background: radial-gradient(circle at 9% 50%,rgba(66,216,143,.25),transparent 34%),linear-gradient(125deg,#12251d,#151b19 62%,#10271d); box-shadow: 0 14px 36px rgba(0,0,0,.2); color: inherit; text-align: left; transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease; } .hub-live-teaser:hover { border-color: rgba(66,216,143,.52); background-color: rgba(66,216,143,.08); transform: translateY(-1px); } .hub-live-teaser:active { transform: scale(.985); } .hub-live-teaser-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(66,216,143,.13); color: #55dfa0; } .hub-live-teaser-icon { width: 82px; height: 82px; border-radius: 12px; } .hub-live-teaser-art { overflow: hidden; background: rgba(255,255,255,.06); } .hub-live-teaser-art img { width: 100%; height: 100%; object-fit: contain; } .hub-live-teaser-icon i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 13px currentColor; animation: hub-live-dot 1.6s ease-in-out infinite; } .hub-live-teaser > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; } .hub-live-teaser small { color: #55dfa0; font-size: .57rem; font-weight: 950; letter-spacing: .09em; } .hub-live-teaser strong { overflow: hidden; color: var(--app-text); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .hub-live-teaser > b { display: flex; align-items: center; gap: 7px; color: var(--app-muted); font-size: .65rem; font-weight: 750; white-space: nowrap; } .hub-live-teaser > b span { color: #63e7a7; font-size: .75rem; font-weight: 950; } .hub-live-teaser em { color: var(--app-text); font-size: 1.15rem; font-style: normal; line-height: 1; } .hub-live-now-teaser { border-color: rgba(255,106,61,.34); background: radial-gradient(circle at 9% 50%,rgba(255,106,61,.28),transparent 34%),linear-gradient(125deg,#2a1712,#1d1716 62%,#2b160f); } .hub-live-now-teaser:hover { border-color: rgba(255,106,61,.45); background-color: rgba(255,106,61,.07); } .hub-live-now-teaser .hub-live-teaser-icon { background: rgba(255,106,61,.13); color: var(--app-orange); font-size: .9rem; } .hub-live-now-teaser > b { color: var(--app-orange); } .hub-live-view { --kommu-pink: #ff36c8; --kommu-violet: #8f54ff; --kommu-blue: #38b8ff; --kommu-orange: #ff922e; --kommu-green: #53e6a5; width: min(860px,100%); min-height: 100%; margin-inline: auto; padding-bottom: 28px; background: #0d0c13; } .hub-nav-kommu { color: var(--kommu-pink,#ff36c8); font-size: .78rem; text-shadow: 0 0 12px rgba(255,54,200,.72); } .hub-more-button { position: relative; } .hub-more-button>#appNotificationBadge { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--app-bg); border-radius: 9px; background: var(--app-orange); color: #fff; font-size: .53rem; line-height: 1; } .hub-more-button>#appNotificationBadge[hidden] { display: none; } .hub-kommu-hero { position: relative; aspect-ratio: 3/1; margin: 12px; overflow: hidden; border: 1px solid rgba(255,54,200,.48); border-radius: 8px; background: #07060a; box-shadow: 0 14px 36px rgba(0,0,0,.42),0 0 28px rgba(143,84,255,.12); isolation: isolate; } .hub-kommu-hero img { display: block; width: 100%; height: 100%; object-fit: cover; } .hub-kommu-hero>.app-icon-button { position: absolute; z-index: 4; top: 9px; right: 9px; width: 36px; height: 36px; border-color: rgba(255,255,255,.18); background: rgba(10,7,15,.72); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hub-kommu-hero::after { position: absolute; content: ""; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--kommu-blue),var(--kommu-pink) 38%,var(--kommu-orange) 74%,var(--kommu-violet)); box-shadow: 0 0 18px rgba(255,54,200,.8); } .hub-kommu-hero-shine { position: absolute; top: -70%; bottom: -70%; left: -24%; width: 14%; background: rgba(255,255,255,.16); filter: blur(12px); transform: rotate(16deg); animation: hub-kommu-hero-shine 7s ease-in-out infinite; pointer-events: none; } .hub-kommu-overview { margin: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #14121b; } .hub-kommu-momentum { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 13px; padding: 15px 16px; border-left: 3px solid var(--kommu-pink); } .hub-kommu-momentum>div { display: grid; min-width: 0; gap: 2px; } .hub-kommu-momentum small { color: var(--kommu-pink); font-size: .54rem; font-weight: 950; letter-spacing: .08em; } .hub-kommu-momentum strong { color: #fff; font-size: .91rem; } .hub-kommu-momentum p { overflow: hidden; margin: 0; color: #aaa5b4; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; } .hub-kommu-signal { display: flex; align-items: end; justify-content: center; gap: 4px; height: 34px; } .hub-kommu-signal i { display: block; width: 4px; border-radius: 2px; background: var(--kommu-pink); box-shadow: 0 0 10px rgba(255,54,200,.58); animation: hub-kommu-level 1s ease-in-out infinite alternate; } .hub-kommu-signal i:nth-child(1) { height: 32%; } .hub-kommu-signal i:nth-child(2) { height: 72%; animation-delay: -.25s; } .hub-kommu-signal i:nth-child(3) { height: 100%; animation-delay: -.55s; } .hub-kommu-signal i:nth-child(4) { height: 48%; animation-delay: -.8s; background: var(--kommu-orange); } .hub-kommu-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.08); } .hub-kommu-stats>div { display: grid; gap: 2px; padding: 12px 6px; text-align: center; } .hub-kommu-stats>div+div { border-left: 1px solid rgba(255,255,255,.07); } .hub-kommu-stats strong { color: #fff; font-size: 1.08rem; font-variant-numeric: tabular-nums; } .hub-kommu-stats>div:nth-child(1) strong { color: var(--kommu-green); } .hub-kommu-stats>div:nth-child(2) strong { color: var(--kommu-pink); } .hub-kommu-stats>div:nth-child(3) strong { color: var(--kommu-blue); } .hub-kommu-stats>div:nth-child(4) strong { color: var(--kommu-orange); } .hub-kommu-stats small { color: #817d8b; font-size: .52rem; font-weight: 850; text-transform: uppercase; } .hub-kommu-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 12px; } .hub-kommu-actions button { display: grid; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 9px; min-width: 0; min-height: 66px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #15131c; color: #fff; text-align: left; transition: border-color 170ms ease,background-color 170ms ease,transform 170ms ease; } .hub-kommu-actions button:hover { border-color: rgba(255,54,200,.5); background: #1b1723; transform: translateY(-2px); } .hub-kommu-actions button:active { transform: scale(.97); } .hub-kommu-actions button.is-primary { border-color: rgba(255,54,200,.42); background: #241329; } .hub-kommu-actions span { display: grid; width: 36px; height: 36px; grid-row: 1/3; place-items: center; border-radius: 50%; background: rgba(255,54,200,.12); color: var(--kommu-pink); font-size: 1rem; font-weight: 950; } .hub-kommu-actions button:nth-child(2) span { background: rgba(56,184,255,.12); color: var(--kommu-blue); } .hub-kommu-actions button:nth-child(3) span { background: rgba(255,146,46,.12); color: var(--kommu-orange); } .hub-kommu-actions strong,.hub-kommu-actions small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-kommu-actions strong { font-size: .69rem; } .hub-kommu-actions small { color: #8f8a99; font-size: .55rem; } .hub-kommu-daily { display: grid; grid-template-columns: 58px minmax(0,1fr) 40px; align-items: center; gap: 12px; margin: 12px; padding: 10px; border: 1px solid rgba(255,146,46,.32); border-radius: 8px; background: #1d1614; box-shadow: inset 3px 0 0 var(--kommu-orange); animation: hub-kommu-entry-in 340ms ease both; } .hub-kommu-daily>img { width: 58px; height: 58px; border-radius: 6px; object-fit: cover; } .hub-kommu-daily>div { display: grid; min-width: 0; gap: 2px; } .hub-kommu-daily small { color: var(--kommu-orange); font-size: .52rem; font-weight: 950; letter-spacing: .06em; } .hub-kommu-daily h2,.hub-kommu-daily p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; } .hub-kommu-daily h2 { color: #fff; font-size: .82rem; letter-spacing: 0; } .hub-kommu-daily p { color: #9d968f; font-size: .59rem; } .hub-kommu-daily>button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: var(--kommu-orange); color: #100b07; box-shadow: 0 0 20px rgba(255,146,46,.26); } .hub-live-members,.hub-kommu-content { margin: 20px 12px 0; } .hub-live-members>header,.hub-kommu-popular>header,.hub-live-timeline>header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .hub-live-members>header>div,.hub-kommu-popular>header>div,.hub-live-timeline>header>div { display: flex; align-items: center; gap: 10px; min-width: 0; } .hub-live-members header span:not(.hub-section-icon),.hub-kommu-popular header span:not(.hub-section-icon),.hub-live-timeline header span:not(.hub-section-icon) { display: grid; min-width: 0; gap: 1px; } .hub-live-members header small,.hub-kommu-popular header small,.hub-live-timeline header small { color: #817d8b; font-size: .51rem; font-weight: 850; letter-spacing: .06em; } .hub-live-members h2,.hub-kommu-popular h2,.hub-live-timeline h2 { margin: 0; color: #fff; font-size: .98rem; letter-spacing: 0; } .hub-live-members>header>small,.hub-kommu-popular>header>small { max-width: 145px; color: #797583; font-size: .57rem; font-weight: 650; letter-spacing: 0; text-align: right; } .hub-live-members header b { min-width: 26px; padding: 3px 7px; border-radius: 999px; background: rgba(83,230,165,.1); color: var(--kommu-green); font-size: .65rem; text-align: center; } .hub-section-icon { display: grid !important; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; background: rgba(83,230,165,.1); color: var(--kommu-green); font-size: .66rem; box-shadow: inset 0 0 0 1px rgba(83,230,165,.14); } .hub-section-icon.is-pink { background: rgba(255,54,200,.1); color: var(--kommu-pink); box-shadow: inset 0 0 0 1px rgba(255,54,200,.14); } .hub-section-icon.is-orange { background: rgba(255,146,46,.1); color: var(--kommu-orange); box-shadow: inset 0 0 0 1px rgba(255,146,46,.14); } #hubLiveMembers { display: flex; gap: 10px; overflow-x: auto; padding: 2px 1px 8px; scrollbar-width: none; scroll-snap-type: x proximity; } #hubLiveMembers::-webkit-scrollbar { display: none; } #hubLiveMembers>button { flex: 0 0 78px; display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: center; scroll-snap-align: start; transition: background-color 160ms ease,transform 160ms ease; } #hubLiveMembers>button:hover { background: rgba(255,255,255,.04); } #hubLiveMembers>button:active { transform: scale(.94); } #hubLiveMembers>button strong,#hubLiveMembers>button small { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hubLiveMembers>button strong { color: #f5f2f8; font-size: .67rem; } #hubLiveMembers>button small { color: #777280; font-size: .54rem; } .hub-live-avatar { position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; } .hub-live-avatar img,.hub-live-avatar>i { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: #27212f; object-fit: cover; color: #fff; font-style: normal; font-weight: 950; } .hub-live-avatar .hub-live-avatar-frame { position: absolute; z-index: 2; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); border: 0; background: transparent; object-fit: contain; pointer-events: none; } .hub-live-avatar>b { position: absolute; z-index: 4; right: 0; bottom: 1px; width: 12px; height: 12px; border: 3px solid #0d0c13; border-radius: 50%; background: var(--kommu-green); box-shadow: 0 0 10px rgba(83,230,165,.6); } .hub-live-entry .hub-live-avatar>b { top: -1px; right: -1px; bottom: auto; } .hub-activity-kind { position: absolute; z-index: 5; right: -3px; bottom: -3px; display: grid !important; width: 19px !important; height: 19px !important; place-items: center; border: 2px solid #17141d !important; border-radius: 50% !important; background: var(--kommu-pink) !important; color: #fff !important; font-size: .52rem !important; font-style: normal; font-weight: 950; } .hub-live-entry.is-music .hub-activity-kind { background: var(--kommu-blue) !important; color: #06131a !important; } .hub-live-entry.is-games .hub-activity-kind { background: var(--kommu-orange) !important; color: #170d04 !important; } .hub-live-entry.is-comment .hub-activity-kind { background: var(--kommu-violet) !important; } .hub-kommu-content { display: grid; gap: 24px; } .hub-live-timeline,.hub-kommu-popular { min-width: 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.09); } #hubLiveActivityList,#hubKommuPopular { display: grid; gap: 7px; } .hub-live-entry { display: grid; grid-template-columns: 48px minmax(0,1fr) auto 8px; align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: #15131b; color: inherit; text-align: left; animation: hub-kommu-entry-in 360ms cubic-bezier(.2,.78,.25,1) both; animation-delay: var(--hub-entry-delay,0ms); transition: border-color 160ms ease,background-color 160ms ease,transform 160ms ease; } .hub-live-entry .hub-live-avatar { width: 46px; height: 46px; } .hub-live-entry>span:nth-child(2) { display: grid; min-width: 0; gap: 3px; } .hub-live-entry strong,.hub-live-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-live-entry strong { color: #f7f4fa; font-size: .75rem; } .hub-live-entry small,.hub-live-entry time { color: #8e8998; font-size: .61rem; } .hub-live-entry time { white-space: nowrap; } .hub-live-entry em { color: #5f5a68; font-size: 1.05rem; font-style: normal; } .hub-live-entry:hover { border-color: rgba(255,54,200,.3); background: #1a1621; transform: translateX(2px); } .hub-live-entry.is-music:hover { border-color: rgba(56,184,255,.3); } .hub-live-entry.is-games:hover { border-color: rgba(255,146,46,.34); } .hub-live-entry:active { transform: scale(.99); } .hub-kommu-popular-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto 8px; align-items: center; gap: 9px; width: 100%; min-height: 62px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: #15131b; color: inherit; text-align: left; animation: hub-kommu-entry-in 360ms cubic-bezier(.2,.78,.25,1) both; animation-delay: var(--hub-entry-delay,0ms); transition: border-color 160ms ease,background-color 160ms ease,transform 160ms ease; } .hub-kommu-rank { color: var(--kommu-orange); font-size: .66rem; font-weight: 950; text-align: center; } .hub-kommu-popular-row>span:nth-child(2) { display: grid; min-width: 0; gap: 3px; } .hub-kommu-popular-row small { color: #7f7988; font-size: .55rem; } .hub-kommu-popular-row strong { overflow: hidden; color: #f5f1f7; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; } .hub-kommu-popular-row>b { color: var(--kommu-green); font-size: .64rem; white-space: nowrap; } .hub-kommu-popular-row>b small { display: block; color: #74707c; font-size: .47rem; font-weight: 650; } .hub-kommu-popular-row>em { color: #5f5a68; font-size: 1.05rem; font-style: normal; } .hub-kommu-popular-row:hover { border-color: rgba(255,146,46,.3); background: #1b171f; transform: translateX(2px); } .hub-kommu-filters { display: flex !important; gap: 3px !important; padding: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: #111017; } .hub-kommu-filters button { min-height: 27px; padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; color: #85808d; font-size: .55rem; font-weight: 850; } .hub-kommu-filters button.is-active { background: var(--kommu-pink); color: #fff; box-shadow: 0 0 14px rgba(255,54,200,.2); } .hub-live-empty { display: grid; justify-items: center; width: 100%; gap: 5px; padding: 27px 14px; border: 1px dashed rgba(255,255,255,.1); border-radius: 8px; color: #85808d; text-align: center; } .hub-live-empty>span { color: var(--kommu-pink); font-size: 1.25rem; } .hub-live-empty strong { color: #f1edf4; font-size: .76rem; } .hub-live-empty small { font-size: .61rem; } @keyframes hub-live-dot { 50% { opacity: .55; transform: scale(.88); } } @keyframes hub-live-ring { from { opacity: .8; transform: translate(-50%,-50%) scale(.6); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } } @keyframes hub-kommu-level { to { height: 24%; opacity: .45; } } @keyframes hub-kommu-entry-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes hub-kommu-number-pop { 0% { transform: scale(.82); opacity: .45; } 65% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes hub-kommu-hero-shine { 0%,70% { left: -24%; opacity: 0; } 76% { opacity: .62; } 90%,100% { left: 112%; opacity: 0; } } .hub-live-members>div>button { animation: hub-kommu-entry-in 340ms cubic-bezier(.2,.78,.25,1) both; animation-delay: var(--hub-entry-delay,0ms); } .hub-live-view.is-kommu-updated .hub-kommu-stats strong { animation: hub-kommu-number-pop 430ms cubic-bezier(.2,.8,.2,1) both; } html.app-reduced-motion .hub-kommu-hero-shine,html.app-reduced-motion .hub-live-entry,html.app-reduced-motion .hub-kommu-popular-row,html.app-reduced-motion .hub-live-members>div>button { animation: none; } @media (min-width: 720px) { .hub-live-view.is-kommu-private .hub-kommu-content { grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); align-items: start; } } @media (max-height: 720px) and (max-width: 620px) { html.app-android-apk .hub-player-art-stage { margin-top: 6px; margin-bottom: 13px; } html.app-android-apk .hub-player-art { width: min(39dvh,calc(100vw - 86px),300px); } html.app-android-apk .hub-player-copy h1 { margin: 5px 0 3px; font-size: 1.45rem; } html.app-android-apk .hub-player-timeline, html.app-android-apk .hub-player-controls { margin-top: 8px; } html.app-android-apk .hub-player-controls .hub-main-play { width: 62px; height: 62px; } html.app-android-apk .hub-player-controls { grid-template-columns: 42px 52px 64px 52px 42px; } html.app-android-apk .hub-player-next-up { min-height: 46px; padding-top: 6px; } } @media (max-width: 520px) { .hub-live-teaser { grid-template-columns: 68px minmax(0,1fr) auto; min-height: 88px; gap: 10px; padding: 10px; } .hub-live-teaser-icon { width: 68px; height: 68px; } .hub-idea-teaser-icon { width: 68px; height: 68px; } .hub-idea-teaser-icon img { width: 62px; height: 62px; } .hub-daily-kafmusic { grid-template-columns: 68px minmax(0,1fr) 42px; gap: 10px; padding: 10px; } .hub-daily-kafmusic>img { width: 68px; height: 68px; } .hub-daily-kafmusic h2 { font-size: .87rem; } .hub-daily-kafmusic p { font-size: .62rem; } .hub-daily-kafmusic>button { grid-template-columns: 1fr; width: 42px; height: 42px; padding: 5px; } .hub-daily-kafmusic>button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .hub-kommu-hero { margin: 10px; } .hub-kommu-actions,.hub-kommu-daily,.hub-live-members,.hub-kommu-content,.hub-kommu-overview { margin-right: 10px; margin-left: 10px; } .hub-kommu-actions button { grid-template-columns: 1fr; grid-template-rows: 34px auto auto; justify-items: center; gap: 2px; min-height: 83px; padding: 7px 4px; text-align: center; } .hub-kommu-actions span { width: 34px; height: 34px; grid-row: 1; } .hub-kommu-actions strong { font-size: .63rem; } .hub-kommu-actions small { font-size: .48rem; } .hub-live-timeline>header { align-items: flex-start; flex-direction: column; gap: 10px; } .hub-kommu-filters { width: 100%; } .hub-kommu-filters button { flex: 1; } .hub-kommu-popular-row { grid-template-columns: 26px minmax(0,1fr) auto 8px; gap: 7px; } .hub-live-entry { grid-template-columns: 46px minmax(0,1fr) auto 7px; padding-right: 8px; padding-left: 8px; } } @media (max-width: 370px) { .hub-kommu-stats small { font-size: .46rem; } .hub-live-entry time { display: none; } .hub-live-entry { grid-template-columns: 46px minmax(0,1fr) 7px; } .hub-kommu-popular-row>b small { display: none; } } @media (max-width: 430px) { html.app-android-apk .app-brand img { width: 32px; height: 32px; } html.app-android-apk .app-brand strong { font-size: .84rem; } html.app-android-apk .app-brand small { font-size: .56rem; } html.app-android-apk .kafpoints-balance { padding-right: 6px; } html.app-android-apk .kafpoints-coin { width: 25px; height: 25px; } html.app-android-apk .app-icon-button { width: 36px; height: 36px; } html.app-android-apk .app-header-actions > .app-icon-button { flex-basis: 36px; } html.app-android-apk .app-header-actions > .kafpoints-balance { max-width: 88px; } } /* Daily Loop: discovery, favorites, resumable listening and a smarter queue. */ .hub-music-discovery { display: grid; gap: 11px; margin: 0 12px 16px; padding: 13px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; background: linear-gradient(145deg,color-mix(in srgb,var(--app-surface) 92%,#2a1a14),var(--app-surface)); } .hub-music-discovery > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; } .hub-music-discovery > header small { color: var(--app-orange); font-size: .54rem; font-weight: 950; letter-spacing: .13em; } .hub-music-discovery > header h2 { margin: 3px 0 0; font-size: 1rem; } .hub-music-discovery > header > div:last-child { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--app-line); border-radius: 8px; background: rgba(0,0,0,.16); } .hub-music-discovery > header > div:last-child button { min-height: 29px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: .58rem; font-weight: 850; } .hub-music-discovery > header > div:last-child button.is-active { background: var(--app-orange); color: #1a0d08; } .hub-resume-card { display: grid; grid-template-columns: 54px minmax(0,1fr) 36px; align-items: center; gap: 10px; width: 100%; padding: 7px; border: 1px solid rgba(255,106,61,.24); border-radius: 10px; background: rgba(255,106,61,.07); color: var(--app-text); text-align: left; } .hub-resume-card img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; } .hub-resume-card > span { display: grid; min-width: 0; gap: 2px; } .hub-resume-card small { color: var(--app-orange); font-size: .5rem; font-weight: 950; letter-spacing: .08em; } .hub-resume-card strong,.hub-resume-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-resume-card strong { font-size: .75rem; } .hub-resume-card em { color: var(--app-muted); font-size: .58rem; font-style: normal; } .hub-resume-card > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--app-orange); color: #180c08; } .hub-discovery-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; } .hub-discovery-list > p { grid-column: 1/-1; margin: 4px 0; color: var(--app-muted); font-size: .68rem; } .hub-discovery-list article { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 9px; background: rgba(0,0,0,.13); } .hub-discovery-play { display: grid; width: 100%; padding: 0; border: 0; background: transparent; color: var(--app-text); text-align: left; } .hub-discovery-play img { width: 100%; aspect-ratio: 1; object-fit: cover; } .hub-discovery-play > span { display: grid; min-width: 0; gap: 2px; padding: 7px; } .hub-discovery-play strong,.hub-discovery-play small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-discovery-play strong { font-size: .64rem; } .hub-discovery-play small { color: var(--app-muted); font-size: .52rem; } .hub-discovery-play > i { position: absolute; right: 7px; top: 7px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(255,106,61,.94); color: #180c08; font-size: .65rem; font-style: normal; box-shadow: 0 5px 15px rgba(0,0,0,.32); } .hub-favorite-button { display: grid; width: 36px; height: 36px; flex: 0 0 36px !important; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; background: transparent; color: var(--app-muted); font-size: 1rem; } .hub-favorite-button.is-compact { width: 30px; height: 30px; flex-basis: 30px !important; padding: 0; } .hub-favorite-button.is-favorite { border-color: rgba(255,106,61,.38); background: rgba(255,106,61,.12); color: var(--app-orange); animation: hub-favorite-pop 260ms cubic-bezier(.2,.8,.2,1); } .hub-discovery-list .hub-favorite-button { position: absolute; right: 5px; bottom: 5px; background: rgba(15,16,19,.9); } .hub-track-card.is-favorite { border-color: rgba(255,106,61,.3); } @keyframes hub-favorite-pop { 50% { transform: scale(1.2); } } .hub-queue-item { grid-template-columns: 27px minmax(0,1fr) auto auto; } .hub-queue-order { display: flex; gap: 1px; } .hub-queue-order button { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 6px; background: rgba(255,255,255,.04); font-size: .72rem; } .hub-queue-order button:disabled { opacity: .25; } .hub-player-title-row { display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; gap: 10px; } .hub-player-title-row h1 { min-width: 0; } #hubPlayerFavorite { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.045); color: #aaa; font-size: 1.25rem; } #hubPlayerFavorite.is-favorite { border-color: color-mix(in srgb,var(--hub-track-accent) 55%,transparent); color: var(--hub-track-accent); background: color-mix(in srgb,var(--hub-track-accent) 13%,transparent); } .hub-player-screen .hub-main-play,.hub-player-screen .hub-player-pulse i { background-color: var(--hub-track-accent,var(--app-orange)); } .hub-mini-player > i span,.hub-mini-art b { background: var(--hub-track-accent,var(--app-orange)); } @media (min-width: 700px) { .hub-discovery-list { grid-template-columns: repeat(6,minmax(0,1fr)); } } @media (max-width: 420px) { .hub-music-discovery > header { align-items: stretch; flex-direction: column; } .hub-music-discovery > header > div:last-child button { flex: 1; } .hub-discovery-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .hub-queue-order button { width: 24px; } } @media (prefers-reduced-motion: reduce) { .hub-favorite-button.is-favorite { animation: none; } } /* Reprise de session V2 : le contexte d'écoute survit à une fermeture de l'app. */ .hub-resume-session { margin: 14px 12px 2px; } .hub-resume-session[hidden] { display: none; } .hub-session-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb,var(--hub-session-accent) 44%,var(--app-line)); border-radius: 13px; background: linear-gradient(112deg,color-mix(in srgb,var(--hub-session-accent) 14%,#111216),#111216 58%); box-shadow: 0 14px 32px rgba(0,0,0,.2); } .hub-session-card::after { content: ""; position: absolute; z-index: 0; right: -45px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: var(--hub-session-accent); opacity: .09; filter: blur(12px); pointer-events: none; } .hub-session-main { position: relative; z-index: 1; display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 12px; width: 100%; min-height: 94px; padding: 10px 44px 10px 10px; border: 0; background: transparent; color: var(--app-text); text-align: left; } .hub-session-art { position: relative; display: block; width: 72px; height: 72px; } .hub-session-art img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; } .hub-session-art i { position: absolute; right: 5px; bottom: 5px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--hub-session-accent); color: #09090b; font-size: .65rem; font-style: normal; box-shadow: 0 5px 14px rgba(0,0,0,.35); } .hub-session-copy { display: grid; min-width: 0; gap: 2px; } .hub-session-copy small { color: var(--hub-session-accent); font-size: .53rem; font-weight: 950; letter-spacing: .12em; } .hub-session-copy strong,.hub-session-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-session-copy strong { font-size: .88rem; } .hub-session-copy em,.hub-session-time { color: var(--app-muted); font-size: .58rem; font-style: normal; } .hub-session-time { margin-top: 4px; } .hub-session-progress { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); } .hub-session-progress i { display: block; height: 100%; border-radius: inherit; background: var(--hub-session-accent); box-shadow: 0 0 10px color-mix(in srgb,var(--hub-session-accent) 66%,transparent); } .hub-session-forget { position: absolute; z-index: 2; top: 7px; right: 7px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.055); color: var(--app-muted); font-size: 1rem; } /* V2 player polish and lightweight catalogue placeholders. */ .hub-track-skeleton { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); animation: hub-skeleton-in 220ms ease both; animation-delay: calc(var(--hub-skeleton-index) * 36ms); } .hub-track-skeleton > span { display: block; width: 100%; aspect-ratio: 1; } .hub-track-skeleton > div { display: grid; gap: 7px; padding: 10px; } .hub-track-skeleton :is(span,i) { border-radius: 6px; background: linear-gradient(110deg,#202329 8%,#353941 18%,#202329 33%); background-size: 210% 100%; animation: hub-skeleton-shimmer 1.25s linear infinite; } .hub-track-skeleton i { display: block; width: 82%; height: 9px; } .hub-track-skeleton i:nth-child(2) { width: 58%; height: 12px; } .hub-track-skeleton i:nth-child(3) { width: 70%; height: 7px; } .hub-mini-player::before { position: absolute; inset: -45% 48% -65% -12%; content: ""; border-radius: 50%; background: var(--hub-track-accent,var(--app-orange)); opacity: .08; filter: blur(22px); pointer-events: none; transition: opacity 180ms ease,transform 260ms ease; } .hub-mini-player[data-state="playing"]::before { opacity: .17; transform: translateX(18%) scale(1.15); } .hub-mini-player[data-state="buffering"]::before { opacity: .2; animation: hub-mini-buffer 800ms ease-in-out infinite alternate; } .hub-mini-player.is-track-changing .hub-mini-open img { animation: hub-mini-art-change 260ms cubic-bezier(.2,.8,.2,1); } .hub-mini-player.is-track-changing .hub-mini-open > span:last-child { animation: hub-mini-copy-change 250ms ease; } .hub-mini-art b:nth-child(4) { height: 11px; animation-delay: -.38s; } .hub-mini-art b:nth-child(5) { height: 6px; animation-delay: -.62s; } .hub-artwork-flight { position: fixed; z-index: 120; display: block; margin: 0; object-fit: cover; transform-origin: 0 0; box-shadow: 0 20px 55px rgba(0,0,0,.48); pointer-events: none; will-change: transform,opacity,border-radius; } .hub-clip-card.is-loading-player .hub-clip-loading { color: rgba(255,255,255,.76); animation: hub-klip-loading 850ms ease-in-out infinite alternate; } @keyframes hub-skeleton-shimmer { to { background-position: -210% 0; } } @keyframes hub-skeleton-in { from { opacity: 0; transform: translateY(6px); } } @keyframes hub-mini-buffer { to { opacity: .08; transform: translateX(24%) scale(1.22); } } @keyframes hub-mini-art-change { 45% { opacity: .25; transform: scale(.88) rotate(-2deg); } } @keyframes hub-mini-copy-change { 45% { opacity: .2; transform: translateX(6px); } } @keyframes hub-klip-loading { to { opacity: .38; letter-spacing: .24em; } } html.app-reduced-motion .hub-track-skeleton *, html.app-reduced-motion .hub-mini-player::before, html.app-reduced-motion .hub-mini-player.is-track-changing *, html.app-reduced-motion .hub-clip-loading { animation: none !important; transition-duration: .01ms !important; } @media (prefers-reduced-motion: reduce) { .hub-track-skeleton *, .hub-mini-player::before, .hub-mini-player.is-track-changing *, .hub-clip-loading { animation: none !important; transition-duration: .01ms !important; } }