/* ============================================================ Shadow White · LISU_WORLD Paleta i typografia przeniesione 1:1 z projektu w Claude Design. ============================================================ */ :root{ --bg:#121110; --bg2:#1a1817; --card:rgba(30,27,25,.82); --card-hi:rgba(26,24,23,.94); --line:#302b26; --fg:#efe7da; --fg2:#9a9187; /* Kolor akcentu — ramki kafelków, ikony marek, pierścień focusu. */ --accent:#cdb996; --accent-rgb:205,185,150; --ease:cubic-bezier(.2,.8,.2,1); --dock-gap:clamp(16px,3vw,26px); /* Pływający pasek odtwarzacza — dwie gałki wystawione w projekcie: odsunięcie pigułki od dolnej krawędzi i siła rozmycia tła pod nią. --player-h to jej wysokość; z niej liczy się zapas w .stage, żeby pasek nigdy nie zasłonił treści. */ --player-float:20px; --player-blur:22px; --player-h:54px; --stage-bottom:calc(var(--player-h) + var(--player-float) + 28px); /* Siła przyciemnienia tła. Ustawienia domyślne są pod ciemny, nocny materiał. Jasne nagranie wymaga mocniejszych wartości — patrz [data-bg] niżej. */ --bg-opacity:.82; --bg-brightness:1; --scrim-top:.52; --scrim-mid:.62; --scrim-bot:.80; --spot:.62; } /* Jasny materiał (dzień, pustynia, białe niebo) — bez mocniejszego przyciemnienia biały napis na środku robi się nieczytelny. */ [data-bg="jasne"]{ --bg-opacity:.72; --bg-brightness:.62; --scrim-top:.74; --scrim-mid:.80; --scrim-bot:.90; --spot:.74; } *,*::before,*::after{box-sizing:border-box} /* Reguły z display:flex biją domyślne [hidden]{display:none} z UA, więc przełączanie widoków musi być wymuszone. */ [hidden]{display:none !important} html,body{ margin:0; min-height:100%; background:var(--bg); color:var(--fg); font-family:Manrope,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{overflow-x:hidden} a{color:var(--accent);text-decoration:none} a:hover{color:var(--fg)} img{max-width:100%;display:block} /* Widoczny focus wyłącznie dla klawiatury */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } :focus:not(:focus-visible){outline:none} /* ── Tło ────────────────────────────────────────────────────── */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .bg__video{ position:absolute; top:50%;left:50%; width:100%;height:100%; transform:translate(-50%,-50%) scale(1.06); object-fit:cover; filter:blur(1.5px) saturate(1.05) brightness(var(--bg-brightness)); opacity:var(--bg-opacity); } /* Przyciemnienie — tekst musi być czytelny na każdym kadrze, ale neony Shinjuku muszą być widoczne. */ .bg__scrim{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(18,17,16,var(--scrim-top)) 0%, rgba(18,17,16,var(--scrim-mid)) 55%, rgba(18,17,16,var(--scrim-bot)) 100%); } .bg__glow{ position:absolute;inset:0; background:radial-gradient(105% 65% at 50% 8%, rgba(var(--accent-rgb),.16), transparent 62%); transition:background .6s ease; } /* Winieta + miękkie przyciemnienie dokładnie pod tekstem, żeby tło mogło zostać jasne, a napisy i tak były czytelne. */ .bg__vignette{ position:absolute;inset:0; background: radial-gradient(46% 42% at 50% 52%, rgba(12,11,10,var(--spot)), transparent 70%), radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.62) 100%); } /* ── Scena ────────────────────────────────────────────────────── Obie sceny — logo i lista linków — leżą na sobie i przenikają się. Przełącza je atrybut data-view na ; ruch opisują przejścia przy poszczególnych elementach (sekcja „Choreografia" niżej). ───────────────────────────────────────────────────────────── */ .stage{ position:relative; z-index:1; min-height:100svh; animation:pop .6s var(--ease) both; } .intro, .links{ position:absolute; inset:0; padding:min(60px,6vh) clamp(20px,5vw,56px) var(--stage-bottom); } @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes breathe{0%,100%{opacity:.4}50%{opacity:1}} @keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} /* ── Widok: intro ───────────────────────────────────────────── */ .intro{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px,4vw,34px); text-align:center; } [data-view="links"] .intro{pointer-events:none} /* flex:none — na niskich ekranach kółko nie może się spłaszczyć w elipsę */ .logo-wrap{position:relative;display:grid;place-items:center;flex:none} /* Płótno jest sporo większe od logo i to jest celowe: poświata fali musi mieć gdzie się rozejść. Gdy było ciasne, canvas ucinał ją na swojej krawędzi i wokół logo rysował się kwadrat. Sam promień fali liczy się z realnej wielkości logo (app.js), nie z rozmiaru płótna. */ .ring{ position:absolute;left:50%;top:50%; z-index:2; width:clamp(340px,88vw,460px); height:clamp(340px,88vw,460px); transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none; opacity:0; transition:opacity .5s ease; } .ring.is-on{opacity:1} .logo{ width:clamp(210px,58vw,300px); height:clamp(210px,58vw,300px); flex:none; aspect-ratio:1; border-radius:50%; border:1px solid var(--line); background:var(--bg2); padding:0; cursor:pointer; overflow:hidden; position:relative; box-shadow:0 34px 80px -34px rgba(0,0,0,.95); transition:transform .5s var(--ease), box-shadow .5s ease, border-color .4s ease; } .logo:hover{ transform:scale(1.035); border-color:rgba(var(--accent-rgb),.55); box-shadow:0 46px 100px -30px rgba(0,0,0,1); } .logo:active{transform:scale(.99)} .logo__img{width:100%;height:100%;object-fit:cover} /* Kropka statusu Discord (z Lanyard) */ .status{ position:absolute; right:8%;bottom:8%; z-index:3; width:clamp(20px,5vw,26px); height:clamp(20px,5vw,26px); border-radius:50%; border:3px solid var(--bg); background:#6b6560; opacity:0; transform:scale(.6); transition:opacity .45s ease, transform .45s var(--ease), background .3s ease; } .status.is-live{opacity:1;transform:none} .status[data-status="online"]{background:#43b581;box-shadow:0 0 14px rgba(67,181,129,.75)} .status[data-status="idle"]{background:#faa61a;box-shadow:0 0 14px rgba(250,166,26,.7)} .status[data-status="dnd"]{background:#f04747;box-shadow:0 0 14px rgba(240,71,71,.7)} .status[data-status="offline"]{background:#6b6560} .intro__text{display:flex;flex-direction:column;align-items:center;gap:9px} .title{ margin:0; font-family:'Bebas Neue',Impact,sans-serif; font-size:clamp(38px,9vw,60px); letter-spacing:.07em; line-height:1; text-shadow:0 4px 24px rgba(0,0,0,.6); } .tagline{ margin:0; font-size:clamp(13px,3.4vw,15px); line-height:1.55; color:var(--fg2); max-width:36ch; text-wrap:pretty; } /* „Teraz słucham" — pojawia się tylko gdy Lanyard zwróci Spotify */ .now-playing{ margin:0; display:flex;align-items:center;gap:8px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.06em; color:var(--accent); /* bez fill-mode: po zagraniu opacity wraca pod kontrolę przejścia z choreografii, inaczej element zostałby na sztywno widoczny */ animation:fadeUp .5s var(--ease); } .now-playing::before{ content:""; width:7px;height:7px;border-radius:50%; background:#1db954; box-shadow:0 0 10px #1db954; animation:breathe 2s ease-in-out infinite; } /* Pulsuje kolorem, a nie przezroczystością — opacity jest zajęte przez choreografię i nieskończona animacja by ją zagłuszyła. */ @keyframes breatheInk{ 0%,100%{color:rgba(var(--accent-rgb),.4)} 50% {color:rgba(var(--accent-rgb),1)} } .hint{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); background:transparent; border:none; padding:12px; cursor:pointer; animation:breatheInk 2.6s ease-in-out infinite; } /* ── Widok: linki ───────────────────────────────────────────── */ /* Panel jest własnym kontenerem przewijania — kółko myszy wraca do logo dopiero wtedy, gdy lista jest przewinięta na sam początek. */ .links{ padding-top:min(84px,7vh); overflow-x:hidden; overflow-y:hidden; pointer-events:none; } [data-view="links"] .links{overflow-y:auto;pointer-events:auto} .links__inner{ width:100%; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(22px,4vw,30px); } .links__head{display:flex;align-items:center;gap:16px} .avatar-sm{ width:clamp(64px,16vw,84px); height:clamp(64px,16vw,84px); border-radius:50%; border:1px solid var(--line); background:var(--bg2); padding:0; cursor:pointer; overflow:hidden; flex:none; /* transition: patrz „Choreografia" niżej — wjazd i :hover dzielą jedną deklarację, bo druga nadpisałaby pierwszą w całości. */ } .avatar-sm:hover{transform:rotate(-6deg) scale(.96);border-color:var(--accent)} .avatar-sm__img{width:100%;height:100%;object-fit:cover} .links__id{display:flex;flex-direction:column;gap:4px;min-width:0} .links__name{ font-family:'Bebas Neue',Impact,sans-serif; font-size:clamp(26px,6.5vw,36px); letter-spacing:.06em; line-height:1; } .links__sub{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg2); } /* Kafelki mają zawsze tę samą szerokość, a niepełny ostatni rząd jest wyśrodkowany. Przy auto-fit w gridzie pięć kafelków zostawiało dziurę po prawej w drugim rzędzie — flex z policzoną szerokością kolumny trzyma równe płytki i sam domyka rząd. Liczbę kolumn ustawia --cols, więc szerokość zgadza się na każdym ekranie. */ .grid{ --cols:3; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .card{ flex:0 1 calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); min-width:0; } .card{ position:relative; display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--fg); /* transition: patrz „Choreografia" niżej */ } .card:hover{ transform:translateY(-5px); border-color:var(--accent); background:var(--card-hi); color:var(--fg); } .card__icon{ position:relative; width:40px;height:40px;flex:none; border-radius:11px; border:1px solid var(--line); background-color:rgba(0,0,0,.35); background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; } .card__icon--round{border-radius:50%} /* Ikony marek trzymamy lokalnie i barwimy maską. Zmiana akcentu przemalowuje je od razu — bez pobierania czegokolwiek z sieci. Ścieżki muszą siedzieć tutaj, a nie w atrybucie style: adresy w url() są rozwiązywane względem pliku CSS, więc podane z HTML-a trafiałyby w assets/css/. Nowa ikona = nowy plik + jedna reguła. */ .card__icon--brand::before{ content:""; position:absolute;inset:0; background:var(--accent); -webkit-mask-position:center; mask-position:center; -webkit-mask-size:55%; mask-size:55%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:background .3s ease; } .card__icon--brand[data-icon="discord"]::before{ -webkit-mask-image:url('../img/icons/discord.svg'); mask-image:url('../img/icons/discord.svg'); } .card__icon--brand[data-icon="instagram"]::before{ -webkit-mask-image:url('../img/icons/instagram.svg'); mask-image:url('../img/icons/instagram.svg'); } .card__icon--brand[data-icon="spotify"]::before{ -webkit-mask-image:url('../img/icons/spotify.svg'); mask-image:url('../img/icons/spotify.svg'); } .card__icon--brand[data-icon="steam"]::before{ -webkit-mask-image:url('../img/icons/steam.svg'); mask-image:url('../img/icons/steam.svg'); } .card__label{ font-family:'Bebas Neue',Impact,sans-serif; font-size:24px; letter-spacing:.05em; line-height:1; } .card__sub{font-size:12.5px;line-height:1.45;color:var(--fg2)} /* Link jeszcze nieaktywny */ .card--soon{cursor:default;opacity:.62} .card--soon:hover{transform:none;border-color:var(--line);background:var(--card)} /* Treść plakietki przychodzi z CONFIG (pole `badge`), więc jest zwykłym elementem, a nie content: w CSS. */ .card__badge{ display:inline-block; margin-left:8px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg2); vertical-align:middle; white-space:nowrap; } .links__foot{ display:flex;align-items:center; justify-content:space-between; gap:12px;flex-wrap:wrap; } /* Przycisk kopiujący tag Discord */ .tag{ display:inline-flex;align-items:center;gap:8px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px;letter-spacing:.12em; color:var(--fg2); background:rgba(18,17,16,.55); border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer; transition:color .3s ease, border-color .3s ease, background .3s ease; } .tag:hover{color:var(--fg);border-color:var(--accent)} .tag svg{width:13px;height:13px;fill:currentColor;flex:none} .tag.is-copied{color:var(--accent);border-color:var(--accent)} .back{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg2); background:transparent; border:none; padding:11px 4px; cursor:pointer; transition:color .3s ease; } .back:hover{color:var(--accent)} /* ── Reklama partnera (NeoBot) ────────────────────────────────── Pasek reklamodawcy pod siatką linków. Wszystko poniżej to wartości z systemu projektowego NeoBota — chłodne szkło, jego skala szarości (#f2f3f5 / #c8cbd1 / #8b8f97 / #5b5f67), fiolet znaku #a78bfa, niebieski przycisk akcji #3b82f6 i jego systemowy krój. Dzięki temu pasek czyta się jako reklama, a nie jako kolejny kafelek gospodarza. Od strony bierze tylko promień rogów i szerokość kolumny. ─────────────────────────────────────────────────────────────── */ .partner{ --partner-h:76px; --partner-chip-h:34px; position:relative; display:flex; flex-direction:column; font-family:'Segoe UI',Tahoma,Verdana,sans-serif; } /* Zwijanie: obie wersje siedzą w flow, jedna ma wysokość 0. overflow:hidden przycina zewnętrzny cień, ale na ciemnym tle i tak go nie widać — pracuje głównie wewnętrzny rozjaśniacz u góry. */ .partner__pane{ overflow:hidden; transition:height var(--dur-panel,.32s) var(--ease-panel,cubic-bezier(.6,0,.2,1)), opacity .2s ease; } /* Wysokość paska mierzy app.js i wpisuje w --partner-h — inaczej nie dałoby się jej animować, gdy hasło łamie się na dwie linie. 76px to wartość awaryjna na czas przed startem skryptu. */ .partner__pane--strip{position:relative;height:var(--partner-h,76px)} .partner__pane--chip {height:0;opacity:0} .partner[data-open="false"] .partner__pane--strip{height:0;opacity:0} .partner[data-open="false"] .partner__pane--chip {height:var(--partner-chip-h);opacity:1} .partner__strip{ position:relative; display:flex; align-items:center; gap:14px; min-height:76px; box-sizing:border-box; padding:0 52px 0 16px; /* z prawej miejsce na przycisk zwijania */ border:1px solid rgba(255,255,255,.09); border-radius:18px; /* promień kafelków gospodarza */ /* ciepły refleks od strony + chłodne szkło NeoBota */ background: radial-gradient(120% 180% at 6% 0%, rgba(205,185,150,.06), transparent 62%), linear-gradient(180deg, rgba(22,24,30,.97), rgba(13,15,20,.97)); box-shadow:0 8px 20px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05); color:#c8cbd1; text-decoration:none; transition:border-color .16s cubic-bezier(.4,0,.2,1); } .partner__strip:hover{border-color:rgba(255,255,255,.16)} .partner__avatar{ flex:none; width:40px;height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.10); object-fit:cover; } /* flex-basis 0, a nie auto: o łamaniu rzędu decyduje bazowa szerokość elementu, więc przy `auto` tekst spychał awatar do osobnego rzędu na wąskim ekranie. Z zerem tekst po prostu dostaje to, co zostanie. */ .partner__body{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0} /* Zawijanie jest tu po to, żeby na wąskim ekranie nagłówek nie rozpychał minimalnej szerokości tekstu — bez tego awatar lądował sam w rzędzie. */ .partner__line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0} .partner__kicker{ font-size:.6rem;font-weight:800; letter-spacing:.16em;text-transform:uppercase; color:#5b5f67;white-space:nowrap; } .partner__brand{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:#f2f3f5;white-space:nowrap} .partner__brand span{color:#a78bfa} .partner__tag{ font-size:.56rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase; color:#8b8f97; border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:2px 6px; white-space:nowrap; } .partner__claim{ font-size:.82rem; color:#c8cbd1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .partner__stats{ display:flex;align-items:center;gap:14px; flex:none; font-variant-numeric:tabular-nums; padding-right:4px; } .partner__stat{display:flex;flex-direction:column;align-items:flex-end} .partner__stat b{font-size:.9rem;font-weight:650;color:#f2f3f5} .partner__stat span{ font-size:.6rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase; color:#5b5f67; } /* Przycisk akcji NeoBota: niebieski, cień kierunkowy (nie poświata), hover tylko kolorem, klik = scale(.96). */ .partner__cta{ flex:none; display:inline-flex;align-items:center;justify-content:center; height:36px;padding:0 1.1rem; border:1px solid transparent; border-radius:7px; background:#3b82f6; color:#fff; font-size:.875rem;font-weight:700;line-height:1.2; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 14px -6px rgba(59,130,246,.55), inset 0 1px 0 rgba(255,255,255,.18); transition:background .15s ease, transform .12s ease; } .partner__strip:hover .partner__cta{background:#2563eb} .partner__strip:active .partner__cta{transform:scale(.96)} .partner__toggle{ position:absolute; top:50%;right:12px; transform:translateY(-50%); display:flex;align-items:center;justify-content:center; width:26px;height:26px; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:#8b8f97; cursor:pointer; transition:color .14s ease, background .14s ease; } .partner__toggle:hover{color:#fb7185;background:rgba(255,255,255,.05)} /* Wersja zwinięta — plakietka wraca do tej samej krawędzi co siatka. */ .partner__chip{ align-self:flex-start; display:inline-flex;align-items:center;gap:9px; height:var(--partner-chip-h); padding:0 14px 0 7px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:linear-gradient(180deg, rgba(22,24,30,.97), rgba(13,15,20,.97)); box-shadow:0 8px 20px rgba(0,0,0,.34); color:#f2f3f5; font-family:inherit; cursor:pointer; transition:border-color .16s cubic-bezier(.4,0,.2,1); } .partner__chip:hover{border-color:rgba(255,255,255,.16)} .partner__chip img{width:22px;height:22px;border-radius:999px;display:block;flex:none} .partner__chip b{font-size:.8rem;font-weight:650} .partner__chip b span{color:#a78bfa} .partner__chip i{ font-style:normal; font-size:.58rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase; color:#5b5f67; } /* ── Choreografia: logo ⇄ linki ───────────────────────────────── Czasy, krzywe i opóźnienia przeniesione z projektu w Claude Design. Wejście gra od góry (awatar → nagłówek → kafelki → stopka), wyjście w odwrotnej kolejności i szybciej — stąd przy każdym elemencie dwa opóźnienia: --d (domyślne = zamykanie) i to spod [data-view]. Scena rusza się przez translate/scale/rotate, a NIE przez transform, żeby nie zderzała się z transformami z :hover. Te właściwości składają się ze sobą, więc kafelek może jednocześnie wjeżdżać i podnosić się pod kursorem. ─────────────────────────────────────────────────────────────── */ /* Duże logo odlatuje w lewo i w górę — tam, gdzie czeka awatar. */ .logo-wrap{ will-change:translate, scale; transition: translate 980ms cubic-bezier(.18,.9,.2,1), scale 980ms cubic-bezier(.18,.9,.2,1), rotate 980ms cubic-bezier(.18,.9,.2,1), opacity 620ms ease 120ms, filter 620ms ease; } [data-view="links"] .logo-wrap{ translate:-30vw -26vh; scale:.28; rotate:-14deg; opacity:0; filter:blur(6px); } .title{ transition: translate 760ms cubic-bezier(.16,1,.3,1) var(--d,260ms), scale 760ms cubic-bezier(.16,1,.3,1) var(--d,260ms), opacity 460ms ease var(--d,260ms), filter 460ms ease var(--d,260ms); } [data-view="links"] .title{ --d:0ms; translate:0 -38px; scale:.86; opacity:0; filter:blur(8px); } .tagline, .now-playing{ transition: translate 760ms cubic-bezier(.16,1,.3,1) var(--d,340ms), opacity 440ms ease var(--d,340ms), filter 440ms ease var(--d,340ms); } [data-view="links"] .tagline, [data-view="links"] .now-playing{ --d:40ms; translate:0 -22px; opacity:0; filter:blur(8px); } .hint{ transition: translate 620ms cubic-bezier(.16,1,.3,1), opacity 320ms ease; } [data-view="links"] .hint{translate:0 -22px;opacity:0} /* Awatar w nagłówku startuje tam, gdzie stało duże logo. */ .avatar-sm{ opacity:0; translate:24vw 22vh; scale:3.1; rotate:10deg; will-change:translate, scale; transition: translate 900ms cubic-bezier(.2,1.06,.24,1) var(--d,0ms), scale 900ms cubic-bezier(.2,1.06,.24,1) var(--d,0ms), rotate 900ms cubic-bezier(.2,1.06,.24,1) var(--d,0ms), opacity 520ms ease var(--d,0ms), transform .35s var(--ease), border-color .35s ease; } [data-view="links"] .avatar-sm{ --d:60ms; opacity:1;translate:none;scale:none;rotate:none; } .links__id{ opacity:0; translate:-26px 0; filter:blur(7px); transition: translate 780ms cubic-bezier(.16,1,.3,1) var(--d,0ms), opacity 460ms ease var(--d,0ms), filter 460ms ease var(--d,0ms); } [data-view="links"] .links__id{ --d:170ms; opacity:1;translate:none;filter:none; } /* Kafelki i stopka wchodzą kaskadą — opóźnienia (--d-open / --d-close) wylicza app.js, bo zależą od liczby pozycji w CONFIG.links. */ .card{ opacity:0; translate:0 34px; scale:.965; filter:blur(7px); --d:var(--d-close,0ms); transition: translate 820ms cubic-bezier(.16,1,.3,1) var(--d), scale 820ms cubic-bezier(.16,1,.3,1) var(--d), opacity 520ms ease var(--d), filter 520ms ease var(--d), transform .32s var(--ease), border-color .32s ease, background .32s ease; } [data-view="links"] .card{ --d:var(--d-open,0ms); opacity:1;translate:none;scale:none;filter:none; } .partner, .links__foot{ opacity:0; translate:0 34px; --d:var(--d-close,0ms); transition: translate 700ms cubic-bezier(.16,1,.3,1) var(--d), opacity 460ms ease var(--d); } [data-view="links"] .partner, [data-view="links"] .links__foot{ --d:var(--d-open,0ms); opacity:1;translate:none; } /* ── Pasek odtwarzacza ────────────────────────────────────────── Pływająca „pigułka" nad dolną krawędzią. Dok rozciąga się na całą szerokość i tylko centruje pigułkę — sam jest przezroczysty dla kliknięć, żeby nie zjadał dolnego pasa strony. ───────────────────────────────────────────────────────────── */ .player-dock{ position:fixed; z-index:5; left:0;right:0; bottom:calc(var(--player-float) + env(safe-area-inset-bottom,0px)); display:flex; justify-content:center; padding:0 20px; pointer-events:none; } .player{ pointer-events:auto; width:100%; max-width:1020px; display:grid; /* utwór · sterowanie z paskiem czasu · głośność */ grid-template-columns:minmax(180px,1fr) minmax(300px,1.9fr) minmax(130px,.8fr); align-items:center; gap:24px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.11); background:linear-gradient(180deg,rgba(52,45,38,.55),rgba(20,17,14,.52)); backdrop-filter:blur(var(--player-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--player-blur)) saturate(150%); box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); transition:border-color .5s ease; } .player.is-playing{border-color:rgba(var(--accent-rgb),.3)} /* ── Strefa 1: co leci ──────────────────────────────────────── */ .player__now{display:flex;align-items:center;gap:11px;min-width:0} /* Domyślnie ukośny deseń — okładka utworu wchodzi jako background-image i go przykrywa (klasa .has-art z JS). */ .player__art{ flex:none; width:34px;height:34px; border-radius:11px; border:1px solid rgba(255,255,255,.13); background: repeating-linear-gradient(45deg,rgba(232,223,208,.1) 0 2px,transparent 2px 8px), #221d19; } .player__art.has-art{ background-size:cover; background-position:center; background-repeat:no-repeat; } .player__meta{display:flex;flex-direction:column;min-width:0} .player__title{ font-size:13.5px;font-weight:600;color:#f3ebdd; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .player__artist{ margin-top:1px; font-size:10px;font-weight:500; letter-spacing:.13em;text-transform:uppercase; color:rgba(232,223,208,.45); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ── Strefa 2: sterowanie + pasek czasu ─────────────────────── */ .player__center{display:flex;align-items:center;gap:14px;min-width:0} .player__controls{display:flex;align-items:center;gap:6px;flex:none} .pbtn{ display:flex;align-items:center;justify-content:center; width:28px;height:28px; flex:none; border:0; border-radius:50%; background:transparent; color:rgba(240,232,220,.65); padding:0; cursor:pointer; transition:color .16s ease; } /* Ikony są konturowe (stroke), więc fill nadaje im markup, nie CSS. */ .pbtn svg{display:block} .pbtn:hover:not(:disabled){color:#fff6e8} .pbtn:disabled{opacity:.28;cursor:default} .pbtn--play{ width:36px;height:36px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg,rgba(247,240,229,.96),rgba(214,203,186,.92)); color:#17130f; box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .15s ease; } .pbtn--play:hover{transform:scale(1.06);color:#17130f} .pbtn--play:active{transform:scale(.95)} .ico-play{margin-left:2px} /* trójkąt optycznie na środku koła */ .pbtn--sm{width:26px;height:26px;color:rgba(240,232,220,.62)} /* SVG nie ma właściwości .hidden, więc ikony przełączamy klasą rodzica. */ .player.is-playing .ico-play {display:none} .player:not(.is-playing) .ico-pause{display:none} .pbtn.is-muted .ico-vol {display:none} .pbtn:not(.is-muted) .ico-mute {display:none} .player__time{ flex:none;width:34px; font-size:10.5px;letter-spacing:.05em; color:rgba(232,223,208,.5); font-variant-numeric:tabular-nums; text-align:right; } .player__time--total{text-align:left} /* ── Strefa 3: dźwięk + akcent ──────────────────────────────── */ .player__right{ display:flex;align-items:center;justify-content:flex-end; gap:9px; min-width:0; } /* Suwaki — wypełnienie rysuje CSS, samą pozycję (--pct) podaje JS. Element ma 14px wysokości (wygodne trafianie myszą), a widoczny tor tylko 3px. */ .range{ -webkit-appearance:none;appearance:none; height:14px; margin:0;padding:0; background:transparent; cursor:pointer; outline:none; min-width:0; --pct:0%; --track:rgba(255,255,255,.12); } .range--seek{ flex:1 1 auto;width:100%; --fill-a:rgba(240,232,220,.7); --fill-b:#f6eee2; } .range--vol{ flex:none;width:78px; --fill-a:rgba(246,238,226,.8); --fill-b:rgba(246,238,226,.8); } .range::-webkit-slider-runnable-track{ height:3px;border-radius:999px; background:linear-gradient(90deg, var(--fill-a) 0%, var(--fill-b) var(--pct), var(--track) var(--pct), var(--track) 100%); } .range::-moz-range-track{ height:3px;border-radius:999px;border:none; background:linear-gradient(90deg, var(--fill-a) 0%, var(--fill-b) var(--pct), var(--track) var(--pct), var(--track) 100%); } .range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:9px;height:9px; margin-top:-3px; /* na środek toru 3px */ border-radius:50%;border:none; background:#f7f0e5; box-shadow:0 2px 7px rgba(0,0,0,.5); transition:transform .18s var(--ease); } .range::-moz-range-thumb{ width:9px;height:9px; border-radius:50%;border:none; background:#f7f0e5; box-shadow:0 2px 7px rgba(0,0,0,.5); } .range:hover::-webkit-slider-thumb{transform:scale(1.25)} .range--vol::-webkit-slider-thumb{width:8px;height:8px;margin-top:-2.5px} .range--vol::-moz-range-thumb{width:8px;height:8px} .yt-host{position:fixed;width:1px;height:1px;right:0;bottom:0;opacity:.01;pointer-events:none;border:0;overflow:hidden} /* ── Węższe ekrany: pasek czasu przechodzi do drugiego rzędu ── Trzy strefy obok siebie potrzebują ~800px. Niżej pigułka łamie się na dwa rzędy i traci pełne zaokrąglenie — przy dwóch rzędach promień 999px robiłby z niej stadion. */ @media (max-width:800px){ :root{--player-h:100px} .player{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas: "now right" "center center"; gap:8px 16px; padding:10px 16px; border-radius:26px; } .player__now {grid-area:now} .player__right {grid-area:right} .player__center{grid-area:center;width:100%} } /* ── Pasek reklamy w dwóch rzędach ─────────────────────────── Kolumna linków dobija do swoich 760px dopiero przy ~844px okna; niżej hasło przestaje się mieścić obok przycisku, więc pasek łamie się na nagłówek z hasłem u góry i przycisk na całą szerokość pod spodem. Hasło może się wtedy zawinąć — wysokość i tak liczy JS. */ @media (max-width:840px){ .partner__strip{ flex-wrap:wrap; align-content:center; gap:10px 12px; padding:12px 14px; } .partner__body{padding-right:26px} /* miejsce pod przyciskiem zwijania */ .partner__claim{white-space:normal;line-height:1.35} .partner__stats{display:none} .partner__cta{flex:1 1 100%} .partner__toggle{top:10px;right:10px;transform:none} } /* ── Węższa kolumna linków ──────────────────────────────────── */ @media (max-width:720px){ .grid{--cols:2} } /* ── Telefony ───────────────────────────────────────────────── */ @media (max-width:560px){ .grid{--cols:1} .bg__video{filter:blur(1.5px) saturate(.9) brightness(.8)} .player-dock{padding:0 12px} .player{gap:8px 12px;padding:10px 14px} .player__center{gap:10px} .player__time{width:30px} .range--vol{display:none} /* zostaje sama ikonka wyciszenia */ } /* ── Mniej ruchu ────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } /* zamiast wideo pokazujemy nieruchomy kadr */ .bg__video{display:none} .bg{background:url("../../media/bg-poster.jpg") center/cover no-repeat} }