/* ═══════════════════════════════════════════════════════════════════════════ base.css — layout, karta, glassmorphism. Wartości :root to fallbacki — main.js nadpisuje je z profile.config.js. Klasy sterujące (ustawia JS na ): entered, glow-username, glow-avatar, glow-socials, border-glow, mono-icons, swap-boxes, light, typing. ═══════════════════════════════════════════════════════════════════════════ */ :root { --accent: #8b5cf6; --text: #ffffff; --muted: rgba(255, 255, 255, 0.62); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --card-opacity: 0.42; --card-blur: 16px; --card-radius: 20px; --glow: 16px; /* promień poświaty (style.glow.strength) */ --overlay-a: 0.45; /* przyciemnienie tła (theme.overlay) */ --enter-blur: 14px; --cur-def: auto; /* własny kursor (effects.cursor) */ --cur-act: pointer; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { cursor: var(--cur-def); } a, button, input[type="range"], .badge { cursor: var(--cur-act); } html, body { height: 100%; } body { margin: 0; background: #060609; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } ::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; } :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 80%, white); outline-offset: 3px; border-radius: 6px; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } /* ── Tło ─────────────────────────────────────────────────────────────────── */ #bg { position: fixed; inset: 0; z-index: 0; } #bg video, #bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #bg video { opacity: 0; } /* .visible nadaje themes.css (crossfade) */ #bg-image { background-position: center; background-size: cover; transition: opacity 0.6s ease; } #bg-overlay { position: absolute; inset: 0; background-color: rgb(0 0 0 / var(--overlay-a)); } /* motyw z themes[].scanlines: linie CRT (klimat Mr Robot) */ body.scanlines #bg-overlay { background-image: repeating-linear-gradient( 0deg, rgb(0 0 0 / 0.28) 0px, rgb(0 0 0 / 0.28) 1px, transparent 1px, transparent 3px ); } /* ── Particles ───────────────────────────────────────────────────────────── */ #fx { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } /* ── Ekran wejściowy ─────────────────────────────────────────────────────── */ #enter-screen { position: fixed; inset: 0; z-index: 10; width: 100%; display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: rgb(0 0 0 / 0.35); -webkit-backdrop-filter: blur(var(--enter-blur)); backdrop-filter: blur(var(--enter-blur)); color: var(--text); font-family: inherit; transition: opacity 0.7s ease, visibility 0.7s, -webkit-backdrop-filter 0.7s ease, backdrop-filter 0.7s ease; } #enter-text { font-size: clamp(0.95rem, 2.6vw, 1.3rem); font-weight: 300; letter-spacing: 0.42em; text-indent: 0.42em; /* wyrównuje optycznie ostatni odstęp trackingu */ text-transform: lowercase; animation: pulse 2.6s ease-in-out infinite; } body.entered #enter-screen { opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); pointer-events: none; } /* ── Scena + karta ───────────────────────────────────────────────────────── */ #stage { position: fixed; inset: 0; z-index: 2; display: flex; overflow-y: auto; padding: clamp(16px, 4vh, 48px) 16px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.15) transparent; transition: opacity 0.8s ease; } #stage[aria-hidden="true"] { opacity: 0; pointer-events: none; } #card { margin: auto; /* centrowanie + poprawny scroll gdy karta wyższa niż ekran */ width: min(100%, 580px); padding: clamp(28px, 5vw, 44px) clamp(20px, 4.5vw, 40px); text-align: center; background: rgb(8 8 14 / var(--card-opacity)); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(1.25); backdrop-filter: blur(var(--card-blur)) saturate(1.25); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--card-radius); box-shadow: 0 24px 70px rgb(0 0 0 / 0.45); transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); } body.border-glow #card { border-color: color-mix(in srgb, var(--accent) 35%, rgb(255 255 255 / 0.08)); box-shadow: 0 24px 70px rgb(0 0 0 / 0.45), 0 0 calc(var(--glow) * 1.6) color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 calc(var(--glow) * 1.2) color-mix(in srgb, var(--accent) 8%, transparent); } /* choreografia wejścia: sekcje karty wstają kaskadą po kliknięciu splasha */ body.entered #card-head { animation: rise 0.6s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both; } body.entered #socials { animation: rise 0.6s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both; } body.entered #widgets { animation: rise 0.6s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; } body.entered #links { animation: rise 0.6s 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── Nagłówek karty ──────────────────────────────────────────────────────── */ #avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px; } #avatar { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.06); } body.glow-avatar #avatar { box-shadow: 0 0 var(--glow) color-mix(in srgb, var(--accent) 65%, transparent), 0 0 calc(var(--glow) * 2.4) color-mix(in srgb, var(--accent) 30%, transparent); } #avatar-decoration { position: absolute; inset: -11%; width: 122%; height: 122%; pointer-events: none; } #avatar-status { position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--status, #80848e); border: 3.5px solid #0b0b12; } #username { margin: 0 0 6px; font-size: clamp(1.5rem, 5.4vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } /* poświata przez drop-shadow, nie text-shadow — działa też dla tekstu ciętego gradientem (color: transparent), gdzie text-shadow się psuje */ body.glow-username #username { filter: drop-shadow(0 0 calc(var(--glow) * 0.65) color-mix(in srgb, var(--accent) 70%, transparent)) drop-shadow(0 0 calc(var(--glow) * 1.8) color-mix(in srgb, var(--accent) 30%, transparent)); } #description { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; min-height: 1.45em; /* typewriter nie skacze layoutem przy pustej linii */ } body.typing #description::after { content: "▍"; margin-left: 2px; color: var(--accent); animation: blink 1.05s steps(1) infinite; } #location { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; } #location svg { width: 13px; height: 13px; fill: currentColor; opacity: 0.8; } /* ── Odznaki ─────────────────────────────────────────────────────────────── */ #badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 2px 0 10px; } #badges:empty { display: none; } .badge { position: relative; display: grid; place-items: center; width: 24px; height: 24px; } .badge svg, .badge img { width: 21px; height: 21px; } .badge svg { fill: var(--icon-c, var(--text)); } .badge img { object-fit: contain; } .badge::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 7px; background: rgb(10 10 16 / 0.94); border: 1px solid rgb(255 255 255 / 0.1); font-size: 0.72rem; letter-spacing: 0.03em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 5; } .badge:hover::after, .badge:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } /* ── Ikony socialowe ─────────────────────────────────────────────────────── */ #socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; } #socials:empty { display: none; } .social { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease; } .social:hover, .social:focus-visible { transform: translateY(-3px) scale(1.07); background: rgb(255 255 255 / 0.06); } .social svg { width: 25px; height: 25px; fill: var(--icon-c, currentColor); } .social img { width: 25px; height: 25px; object-fit: contain; } body.mono-icons .social svg { fill: var(--accent); } body.mono-icons .badge svg { fill: var(--accent); } body.glow-socials .social:hover, body.glow-socials .social:focus-visible { filter: drop-shadow(0 0 calc(var(--glow) * 0.55) color-mix(in srgb, var(--accent) 75%, transparent)); } /* ── Widgety (Discord / Spotify) ─────────────────────────────────────────── */ #widgets { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } #widgets:not(:has(.widget:not([hidden]))) { display: none; } .widget { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; background: rgb(255 255 255 / 0.055); border: 1px solid rgb(255 255 255 / 0.07); border-radius: 14px; } body.swap-boxes .widget { background: color-mix(in srgb, var(--accent) 20%, rgb(20 20 30 / 0.5)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .widget .art { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: rgb(255 255 255 / 0.06); } .w-body { flex: 1; min-width: 0; } .w-tag { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 2px; } body.swap-boxes .w-tag { color: var(--text); } .w-title { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w-sub { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-bar { height: 3px; margin-top: 7px; border-radius: 2px; background: rgb(255 255 255 / 0.12); overflow: hidden; } .sp-bar i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 1s linear; } body.swap-boxes .sp-bar i { background: var(--text); } .sp-time { display: flex; justify-content: space-between; margin-top: 3px; font-size: 0.64rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── Duże linki ──────────────────────────────────────────────────────────── */ #links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } #links:empty { display: none; } .link-btn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-align: left; background: rgb(255 255 255 / 0.055); border: 1px solid rgb(255 255 255 / 0.07); border-radius: 14px; transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease; } .link-btn:hover, .link-btn:focus-visible { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 14%, rgb(255 255 255 / 0.04)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .link-btn svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--icon-c, currentColor); } .link-btn img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; } .lb-title { font-size: 0.9rem; font-weight: 600; } .lb-sub { font-size: 0.76rem; color: var(--muted); } /* ── Narożne UI (audio / motywy / licznik) ───────────────────────────────── */ #ui > div { position: fixed; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgb(8 8 14 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / 0.08); font-size: 0.78rem; letter-spacing: 0.02em; transition: opacity 0.5s ease 0.35s; } /* narożne UI wjeżdża dopiero po przejściu splasha */ body:not(.entered) #ui > div { opacity: 0; pointer-events: none; } #audio-control { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } #mute-toggle { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--text); } #mute-toggle svg { width: 19px; height: 19px; fill: currentColor; } #volume { width: 0; opacity: 0; accent-color: var(--accent); transition: width 0.25s ease, opacity 0.25s ease; } #audio-control:hover #volume, #audio-control:focus-within #volume { width: 90px; opacity: 1; } #track-name { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 0.73rem; } #track-name:empty { display: none; } #views { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); color: var(--muted); gap: 6px; } #views svg { width: 15px; height: 15px; fill: currentColor; opacity: 0.85; } #views-count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* ── Efekty nicku ────────────────────────────────────────────────────────── */ .fx-gradient, .fx-shine, .fx-rainbow { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bg-pan 3.5s linear infinite; } .fx-gradient { background-image: linear-gradient(100deg, var(--accent), #fff 50%, var(--accent)); } .fx-shine { background-image: linear-gradient(110deg, var(--text) 38%, var(--accent) 50%, var(--text) 62%); background-size: 260% auto; animation-duration: 4.2s; } .fx-rainbow { background-image: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f87171); background-size: 300% auto; animation-duration: 6s; } .fx-glitch { position: relative; } .fx-glitch::before, .fx-glitch::after { content: attr(data-text); position: absolute; inset: 0; clip-path: inset(50% 0 50% 0); } .fx-glitch::before { color: #22d3ee; transform: translateX(-2px); animation: glitch-a 3.2s infinite steps(2, jump-none); } .fx-glitch::after { color: #f43f5e; transform: translateX(2px); animation: glitch-b 3.2s infinite steps(2, jump-none); } /* ── Keyframes ───────────────────────────────────────────────────────────── */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes bg-pan { to { background-position: 200% center; } } @keyframes glitch-a { 0%, 85%, 100% { clip-path: inset(50% 0 50% 0); } 86% { clip-path: inset(12% 0 60% 0); } 88% { clip-path: inset(48% 0 30% 0); } 90% { clip-path: inset(70% 0 10% 0); } 92% { clip-path: inset(22% 0 52% 0); } 94% { clip-path: inset(50% 0 50% 0); } } @keyframes glitch-b { 0%, 42%, 56%, 100% { clip-path: inset(50% 0 50% 0); } 44% { clip-path: inset(60% 0 18% 0); } 47% { clip-path: inset(8% 0 70% 0); } 50% { clip-path: inset(42% 0 40% 0); } 53% { clip-path: inset(65% 0 22% 0); } } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { #card { padding: 26px 18px; } #avatar { width: 88px; height: 88px; } #socials { gap: 4px; } #audio-control { left: 12px; } #views { right: 12px; } #theme-switcher { top: 12px; right: 12px; } #track-name { max-width: 90px; } } /* ── Dostępność ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }