/* ============================================================ ☕ Eiskaffee Linktree-Profil — Public Profile Page ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --pf-accent: #0077be; --pf-text: #ffffff; --pf-text-soft: rgba(255,255,255,0.78); --pf-text-mute: rgba(255,255,255,0.55); --pf-card-bg: rgba(15, 15, 26, 0.55); --pf-card-border: rgba(255,255,255,0.12); --pf-card-border-alpha: 0.12; --pf-card-radius: 24px; --pf-link-bg: rgba(255,255,255,0.10); --pf-link-bg-hover: rgba(255,255,255,0.20); --pf-link-border: rgba(255,255,255,0.18); --pf-shadow: 0 20px 60px rgba(0,0,0,0.40); /* Reduced blur (was 18px + saturate 140% — too distorting on bg images). The card now reads more like glass over a clear photo, not frosted. */ --pf-blur: 10px; --pf-font: 'Outfit', system-ui, -apple-system, sans-serif; } html, body { height: 100%; width: 100%; } body.pf-body { font-family: var(--pf-font); color: var(--pf-text); background: #0a0a14; overflow-x: hidden; overflow-y: auto; min-height: 100vh; min-height: 100dvh; position: relative; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* ===== Cursor-Effekt: alle Cursor-Particles ===== */ .pf-cursor-particle { position: fixed; pointer-events: none; z-index: 9999; will-change: transform, opacity; user-select: none; } /* ============================================================ BACKGROUND LAYER + Themes ============================================================ */ .pf-bg { position: fixed; inset: 0; z-index: -2; background: #0a0a14; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.4s ease; } .pf-bg-overlay { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%); } /* Themes — applied via class on */ .pf-theme-aurora .pf-bg { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); } .pf-theme-aurora .pf-bg::after { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 20% 30%, rgba(120, 80, 255, 0.4), transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.35), transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 80, 200, 0.25), transparent 60%); animation: pfAuroraDrift 20s ease-in-out infinite alternate; filter: blur(30px); } @keyframes pfAuroraDrift { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(5%, -5%) rotate(8deg); } } .pf-theme-sunset .pf-bg { background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%); } .pf-theme-sunset .pf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255, 100, 80, 0.4) 60%, rgba(40, 0, 60, 0.7) 100%); } .pf-theme-ocean .pf-bg { background: linear-gradient(180deg, #001f3f 0%, #0077be 50%, #00bcd4 100%); } .pf-theme-ocean .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(0, 200, 255, 0.4), transparent 60%); animation: pfWave 8s ease-in-out infinite alternate; } @keyframes pfWave { 0% { opacity: 0.6 } 100% { opacity: 1 } } .pf-theme-forest .pf-bg { background: linear-gradient(135deg, #134e5e 0%, #71b280 100%); } .pf-theme-midnight .pf-bg { background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%); } .pf-theme-neon .pf-bg { background: linear-gradient(135deg, #ff00cc 0%, #333399 50%, #00ffcc 100%); } .pf-theme-neon .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 0, 200, 0.5), transparent 50%), radial-gradient(circle at 70% 80%, rgba(0, 255, 200, 0.5), transparent 50%); animation: pfNeonPulse 4s ease-in-out infinite alternate; } @keyframes pfNeonPulse { 0% { opacity: 0.7 } 100% { opacity: 1 } } .pf-theme-pastel .pf-bg { background: linear-gradient(135deg, #ffd1ff 0%, #c1c8ff 50%, #a0e9ff 100%); } .pf-theme-coffee .pf-bg { background: linear-gradient(135deg, #3e2723 0%, #6d4c41 50%, #a1887f 100%); } .pf-theme-coffee .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255, 200, 130, 0.18), transparent 60%); } .pf-theme-minimal .pf-bg { background: #1a1a1a; } .pf-theme-retro .pf-bg { background: linear-gradient(180deg, #0c0026 0%, #2d0066 50%, #ff006e 100%); } .pf-theme-retro .pf-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(255, 0, 200, 0.18) 40px, rgba(255, 0, 200, 0.18) 41px), repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255, 0, 200, 0.18) 40px, rgba(255, 0, 200, 0.18) 41px); transform: perspective(400px) rotateX(70deg); transform-origin: center bottom; mask-image: linear-gradient(180deg, transparent 0%, black 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100%); } .pf-theme-cherry .pf-bg { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); } .pf-theme-galaxy .pf-bg { background: radial-gradient(ellipse at top, #1b2735 0%, #090a0f 100%); } .pf-theme-galaxy .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(2px 2px at 20% 30%, white, transparent), radial-gradient(1px 1px at 60% 70%, white, transparent), radial-gradient(1.5px 1.5px at 80% 20%, white, transparent), radial-gradient(1px 1px at 30% 80%, white, transparent), radial-gradient(2px 2px at 90% 50%, white, transparent), radial-gradient(1px 1px at 10% 60%, white, transparent); background-size: 200% 200%; animation: pfStars 60s linear infinite; opacity: 0.7; } @keyframes pfStars { from { background-position: 0 0 } to { background-position: 200% 200% } } /* New themes (v3) */ .pf-theme-lava .pf-bg { background: radial-gradient(ellipse at bottom, #ff4e00 0%, #8a0000 50%, #240000 100%); } .pf-theme-lava .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 80%, rgba(255,180,0,0.4), transparent 50%); animation: pfNeonPulse 3s ease-in-out infinite alternate; } .pf-theme-ice .pf-bg { background: linear-gradient(135deg, #e0f7ff 0%, #80c8ff 50%, #1e3c72 100%); } .pf-theme-ice .pf-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.4), transparent 60%); } .pf-theme-candy .pf-bg { background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 30%, #fda4ff 70%, #c2e9fb 100%); } .pf-theme-cyberpunk .pf-bg { background: linear-gradient(135deg, #0a0014 0%, #240046 40%, #ff006e 100%); } .pf-theme-cyberpunk .pf-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0, transparent 30px, rgba(255,0,200,0.25) 30px, rgba(255,0,200,0.25) 31px); animation: pfNeonPulse 4s ease-in-out infinite alternate; } .pf-theme-mint .pf-bg { background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); } .pf-theme-rose .pf-bg { background: linear-gradient(135deg, #e0c3fc 0%, #f093fb 50%, #f5576c 100%); } .pf-theme-deepsea .pf-bg { background: linear-gradient(180deg, #000428 0%, #004e92 100%); } .pf-theme-autumn .pf-bg { background: linear-gradient(135deg, #d38312 0%, #a83279 100%); } /* Custom image background */ .pf-bg.has-image { background-color: transparent; } .pf-bg.has-image::after { content: none !important; } /* Solid color bg */ .pf-theme-solid .pf-bg { background-color: var(--pf-solid, #1a1a2e); } /* ============================================================ PARTICLE CANVAS ============================================================ */ .pf-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ============================================================ LOADING / ERROR ============================================================ */ .pf-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 10; background: rgba(10, 10, 20, 0.9); } .pf-loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--pf-accent); border-radius: 50%; animation: pfSpin 0.9s linear infinite; } @keyframes pfSpin { to { transform: rotate(360deg); } } .pf-loading-text { color: var(--pf-text-soft); font-size: 14px; letter-spacing: 0.5px; } body[data-loading="0"] .pf-loading { display: none; } .pf-error[hidden], .pf-shell[hidden], .pf-player[hidden], .pf-share[hidden] { display: none !important; } .pf-error { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; z-index: 10; } .pf-error-icon { font-size: 64px; margin-bottom: 8px; } .pf-error h1 { font-size: 28px; font-weight: 800; } .pf-error p { color: var(--pf-text-soft); max-width: 380px; } .pf-error-back { margin-top: 16px; padding: 12px 22px; background: var(--pf-accent); border-radius: 999px; font-weight: 700; transition: transform 0.15s ease; } .pf-error-back:hover { transform: translateY(-2px); } .pf-error-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .pf-error-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--pf-text); font-weight: 600; font-size: 14px; transition: transform 0.15s ease, background 0.15s ease; white-space: nowrap; } .pf-error-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); } .pf-error-btn-primary { background: linear-gradient(135deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 70%, white)); border-color: transparent; box-shadow: 0 8px 22px color-mix(in srgb, var(--pf-accent) 40%, transparent); } .pf-error-btn-primary:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--pf-accent) 50%, transparent); } /* ============================================================ PROFILE SHELL + CARD ============================================================ */ .pf-shell { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 56px 18px 96px; } .pf-card { width: 100%; max-width: 460px; padding: 36px 28px 28px; border-radius: var(--pf-card-radius); background: var(--pf-card-bg); border: 1px solid rgba(255,255,255, var(--pf-card-border-alpha)); /* No saturate filter — was distorting bg images. Plain blur is enough. */ backdrop-filter: blur(var(--pf-blur)); -webkit-backdrop-filter: blur(var(--pf-blur)); box-shadow: var(--pf-shadow); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: pfCardIn 0.6s cubic-bezier(.4,0,.2,1); } @keyframes pfCardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Layouts */ .pf-layout-card .pf-card { background: var(--pf-card-bg); } .pf-layout-glass .pf-card { background: rgba(255,255,255,0.06); --pf-blur: 18px; border-color: rgba(255,255,255,0.20); } .pf-layout-minimal .pf-card { background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .pf-layout-classic .pf-card { /* default */ } /* ============================================================ AVATAR (mit Shape-Varianten: circle / square / hex / none) ============================================================ */ .pf-avatar-wrap { position: relative; width: 132px; height: 132px; margin-top: -8px; margin-bottom: 4px; } .pf-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.4); transition: clip-path 0.3s ease, border-radius 0.3s ease; } .pf-avatar-ring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, var(--pf-accent), transparent 50%, var(--pf-accent)); z-index: -1; animation: pfAvatarSpin 6s linear infinite; opacity: 0.7; filter: blur(4px); } @keyframes pfAvatarSpin { to { transform: rotate(360deg); } } /* Shape: circle (default) — already handled */ .pf-avatar-shape-circle .pf-avatar { border-radius: 50%; } .pf-avatar-shape-circle .pf-avatar-ring { border-radius: 50%; } /* Shape: square (rounded corners) */ .pf-avatar-shape-square .pf-avatar { border-radius: 22px; } .pf-avatar-shape-square .pf-avatar-ring { border-radius: 26px; } /* Shape: hexagon (clip-path) */ .pf-avatar-shape-hex .pf-avatar { border-radius: 0; border: none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .pf-avatar-shape-hex .pf-avatar-ring { border-radius: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--pf-accent); inset: -4px; filter: none; opacity: 0.6; } /* Shape: none — rectangular, no styling */ .pf-avatar-shape-none .pf-avatar { border-radius: 0; } .pf-avatar-shape-none .pf-avatar-ring { display: none; } /* ============================================================ NAME + EFFEKTE ============================================================ */ .pf-name { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; text-align: center; line-height: 1.1; margin-top: 4px; color: var(--pf-text); } /* Name Sizes */ .pf-name.pf-name-size-sm { font-size: 22px; } .pf-name.pf-name-size-md { font-size: 30px; } .pf-name.pf-name-size-lg { font-size: 40px; } .pf-name.pf-name-size-xl { font-size: 54px; line-height: 1.05; letter-spacing: -1px; } /* none — default */ .pf-name-effect-none { /* no extra */ } /* glow — pulsing soft glow */ .pf-name-effect-glow { text-shadow: 0 0 8px var(--pf-accent), 0 0 24px var(--pf-accent), 0 0 48px var(--pf-accent); animation: pfNameGlow 2.4s ease-in-out infinite alternate; } @keyframes pfNameGlow { from { filter: brightness(1.0); } to { filter: brightness(1.3); } } /* rainbow — animated multicolor gradient text */ .pf-name-effect-rainbow { background: linear-gradient(90deg, #ff0080, #ff8c00, #ffd700, #00ff88, #00bfff, #8a2be2, #ff0080); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: pfRainbow 4s linear infinite; } @keyframes pfRainbow { to { background-position: 300% 0; } } /* gradient — static accent gradient */ .pf-name-effect-gradient { background: linear-gradient(135deg, var(--pf-accent), #ff00aa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* chrome — silver shimmer */ .pf-name-effect-chrome { background: linear-gradient(180deg, #ffffff 0%, #b8c0c8 40%, #ffffff 50%, #6f7680 80%, #ffffff 100%); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: pfChrome 3s ease-in-out infinite alternate; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } @keyframes pfChrome { from { background-position: 0 0 } to { background-position: 0 100% } } /* fire — orange flicker */ .pf-name-effect-fire { color: #ffeb3b; text-shadow: 0 -2px 4px #ffeb3b, 0 -6px 10px #ff9800, 0 -14px 18px #ff5722, 0 -22px 30px rgba(255, 87, 34, 0.6); animation: pfFlicker 0.15s steps(2) infinite; } @keyframes pfFlicker { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-1px); filter: brightness(1.15); } } /* glitch — RGB-split shake */ .pf-name-effect-glitch { position: relative; color: var(--pf-text); } .pf-name-effect-glitch::before, .pf-name-effect-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; } .pf-name-effect-glitch::before { color: #ff003c; transform: translate(-2px, 0); animation: pfGlitch 2.5s infinite linear alternate-reverse; mix-blend-mode: screen; } .pf-name-effect-glitch::after { color: #00f0ff; transform: translate(2px, 0); animation: pfGlitch 2.0s infinite linear alternate-reverse; mix-blend-mode: screen; } @keyframes pfGlitch { 0% { clip-path: inset(20% 0 60% 0); } 25% { clip-path: inset(60% 0 10% 0); } 50% { clip-path: inset(10% 0 70% 0); } 75% { clip-path: inset(40% 0 20% 0); } 100% { clip-path: inset(80% 0 5% 0); } } /* shake — gentle wiggle */ .pf-name-effect-shake { animation: pfShake 2.5s ease-in-out infinite; display: inline-block; } @keyframes pfShake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } } /* bounce — letter-by-letter bounce (JS wraps each char) */ .pf-name-effect-bounce span { display: inline-block; animation: pfBounce 1.4s ease-in-out infinite; } @keyframes pfBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } } /* typewriter — JS handles the actual typing; CSS provides cursor */ .pf-name-effect-typewriter { border-right: 3px solid var(--pf-accent); padding-right: 4px; animation: pfBlink 1s steps(2) infinite; white-space: nowrap; overflow: hidden; display: inline-block; } @keyframes pfBlink { 50% { border-color: transparent; } } /* wave — letters bob up/down in a wave (JS wraps each char into span) */ .pf-name-effect-wave span { display: inline-block; animation: pfWave 1.6s ease-in-out infinite; } @keyframes pfWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* neon — bright color + flicker glow */ .pf-name-effect-neon { color: #fff; text-shadow: 0 0 5px var(--pf-accent), 0 0 10px var(--pf-accent), 0 0 20px var(--pf-accent), 0 0 40px var(--pf-accent), 0 0 80px var(--pf-accent); animation: pfNeonFlicker 4s linear infinite; } @keyframes pfNeonFlicker { 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; } 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.5; } } /* shadow — strong dropshadow, retro pop */ .pf-name-effect-shadow { color: var(--pf-text); text-shadow: 3px 3px 0 var(--pf-accent), 6px 6px 0 rgba(0,0,0,0.4); } /* ============================================================ BADGES ============================================================ */ .pf-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .pf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); color: var(--pf-text); } .pf-badge-icon { font-size: 12px; } /* ============================================================ BIO ============================================================ */ .pf-bio { font-size: 15px; color: var(--pf-text-soft); text-align: center; max-width: 380px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } /* ============================================================ LINKS ============================================================ */ .pf-links { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; } .pf-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--pf-link-bg); border: 1px solid var(--pf-link-border); border-radius: 14px; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; color: var(--pf-text); position: relative; overflow: hidden; } .pf-link:hover { transform: translateY(-2px); background: var(--pf-link-bg-hover); border-color: var(--pf-accent); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .pf-link::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .pf-link:hover::before { transform: translateX(100%); } .pf-link-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; line-height: 1; } .pf-link-icon svg { width: 24px; height: 24px; fill: currentColor; } .pf-link-body { flex: 1; min-width: 0; overflow: hidden; } .pf-link-label { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-link-sub { /* Hide URL/host preview on link buttons — only the title (Twitch, Discord etc.) is shown */ display: none; font-size: 12px; color: var(--pf-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-link-arrow { font-size: 18px; color: var(--pf-text-mute); flex-shrink: 0; } /* Per-Type Akzentfarben (subtil) */ .pf-link[data-type="discord"]:hover { border-color: #5865F2; box-shadow: 0 8px 24px rgba(88,101,242,0.35); } .pf-link[data-type="twitch"]:hover { border-color: #9146ff; box-shadow: 0 8px 24px rgba(145,70,255,0.35); } .pf-link[data-type="youtube"]:hover { border-color: #ff0000; box-shadow: 0 8px 24px rgba(255,0,0,0.35); } .pf-link[data-type="spotify"]:hover { border-color: #1db954; box-shadow: 0 8px 24px rgba(29,185,84,0.35); } .pf-link[data-type="instagram"]:hover { border-color: #e1306c; box-shadow: 0 8px 24px rgba(225,48,108,0.35); } .pf-link[data-type="x"]:hover, .pf-link[data-type="twitter"]:hover { border-color: #ffffff; box-shadow: 0 8px 24px rgba(255,255,255,0.18); } .pf-link[data-type="tiktok"]:hover { border-color: #ff0050; box-shadow: 0 8px 24px rgba(255,0,80,0.35); } .pf-link[data-type="github"]:hover { border-color: #ffffff; box-shadow: 0 8px 24px rgba(255,255,255,0.18); } .pf-link[data-type="steam"]:hover { border-color: #66c0f4; box-shadow: 0 8px 24px rgba(102,192,244,0.35); } .pf-link[data-type="snapchat"]:hover { border-color: #fffc00; box-shadow: 0 8px 24px rgba(255,252,0,0.35); } .pf-link[data-type="kick"]:hover { border-color: #53fc18; box-shadow: 0 8px 24px rgba(83,252,24,0.35); } .pf-link[data-type="reddit"]:hover { border-color: #ff4500; box-shadow: 0 8px 24px rgba(255,69,0,0.35); } .pf-link[data-type="telegram"]:hover { border-color: #0088cc; box-shadow: 0 8px 24px rgba(0,136,204,0.35); } .pf-link[data-type="threads"]:hover { border-color: #ffffff; box-shadow: 0 8px 24px rgba(255,255,255,0.18); } .pf-link[data-type="linkedin"]:hover { border-color: #0a66c2; box-shadow: 0 8px 24px rgba(10,102,194,0.35); } .pf-link[data-type="email"]:hover { border-color: #ffaa00; box-shadow: 0 8px 24px rgba(255,170,0,0.35); } /* ============================================================ LINK STYLES (filled / outline / pill / sharp / glass) ============================================================ */ /* outline — only border, no fill */ .pf-link-style-outline .pf-link { background: transparent; border-width: 2px; } .pf-link-style-outline .pf-link:hover { background: rgba(255,255,255,0.08); } /* pill — fully rounded */ .pf-link-style-pill .pf-link { border-radius: 999px; padding: 14px 22px; } /* sharp — no rounding */ .pf-link-style-sharp .pf-link { border-radius: 4px; } /* glass — strong blur */ .pf-link-style-glass .pf-link { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-color: rgba(255,255,255,0.20); } .pf-link-style-glass .pf-link:hover { background: rgba(255,255,255,0.14); } /* ============================================================ META (Views + Brand) ============================================================ */ .pf-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; /* Use text color (with reduced opacity) so the views-eye + counter follow whatever colour the user picked. Previously hardcoded white would not change with the text-color setting. */ color: var(--pf-text); opacity: 0.65; } .pf-views { font-weight: 600; color: var(--pf-text); display: inline-flex; align-items: center; gap: 6px; } .pf-views-icon { width: 15px; height: 15px; flex-shrink: 0; /* fill=none + stroke=currentColor → folgt automatisch der Textfarbe */ } .pf-views-count { font-variant-numeric: tabular-nums; } .pf-brand { transition: color 0.15s ease, transform 0.15s ease; display: inline-flex; align-items: center; gap: 4px; color: var(--pf-text); } .pf-brand:hover { color: var(--pf-accent); opacity: 1; } .pf-brand .pf-coffee { display: inline-block; transition: transform 0.4s ease; } .pf-brand:hover .pf-coffee { transform: rotate(20deg); } /* ============================================================ PLAYER (rechts unten) ============================================================ */ .pf-player { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; background: rgba(15, 15, 26, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); max-width: 360px; animation: pfPlayerIn 0.5s cubic-bezier(.4,0,.2,1) 0.3s both; } .pf-player-mute { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.10); border: none; color: var(--pf-text); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, transform 0.12s ease; } .pf-player-mute:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); } .pf-player-vol { width: 70px; height: 4px; accent-color: var(--pf-accent); cursor: pointer; flex-shrink: 0; } /* ============================================================ CLICK-TO-ENTER SPLASH (für garantierten Audio-Autoplay) Zeigt sich vor dem eigentlichen Profil. Übernimmt das Theme des Profils als Vorgeschmack und animiert gestaffelt rein. ============================================================ */ /* WICHTIG: Das HTML `hidden` Attribut wird sonst von display:flex überschrieben. Diese Regel sorgt dafür dass [hidden] wirklich "weg" bedeutet — sonst zeigt sich der Splash mit Default-Werten beim Page-Load, bei 404, und auf privaten Profilen. */ .pf-enter-splash[hidden], .pf-shell[hidden], .pf-error[hidden], .pf-loading[hidden], .pf-player[hidden], .pf-share[hidden], .pf-unmute-prompt[hidden] { display: none !important; } .pf-enter-splash { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; /* Default-Hintergrund — wird via JS überschrieben mit dem Theme */ background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a14 100%); animation: pfEnterFadeIn 0.5s cubic-bezier(.4,0,.2,1); } @keyframes pfEnterFadeIn { from { opacity: 0 } to { opacity: 1 } } /* Vignette-Overlay damit der Inhalt vor dem Theme lesbar bleibt */ .pf-enter-splash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.55) 80%), rgba(0,0,0,0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; } /* Sanfter Glow hinter dem Card */ .pf-enter-splash::after { content: ''; position: absolute; width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--pf-accent) 0%, transparent 70%); opacity: 0.18; z-index: 1; animation: pfEnterGlow 3s ease-in-out infinite alternate; pointer-events: none; } @keyframes pfEnterGlow { from { opacity: 0.10; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 0.22; transform: translate(-50%, -50%) scale(1.05); } } .pf-enter-card { position: relative; z-index: 2; text-align: center; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Staggered fade-in: jedes Element kommt mit Verzögerung */ .pf-enter-avatar, .pf-enter-name, .pf-enter-hint, .pf-enter-btn, .pf-enter-skip { opacity: 0; animation: pfEnterStaggerIn 0.7s cubic-bezier(.2,.65,.3,1.15) forwards; } .pf-enter-avatar { animation-delay: 0.10s; } .pf-enter-name { animation-delay: 0.30s; } .pf-enter-hint { animation-delay: 0.45s; } .pf-enter-btn { animation-delay: 0.60s; } .pf-enter-skip { animation-delay: 0.75s; } @keyframes pfEnterStaggerIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .pf-enter-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.25); box-shadow: 0 0 0 8px rgba(255,255,255,0.04), 0 0 60px var(--pf-accent), 0 18px 50px rgba(0,0,0,0.55); background: rgba(0,0,0,0.4); } .pf-enter-avatar.has-loaded { animation: pfEnterStaggerIn 0.7s cubic-bezier(.2,.65,.3,1.15) forwards, pfEnterAvatarFloat 4s ease-in-out 0.7s infinite; } @keyframes pfEnterAvatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .pf-enter-name { font-size: 32px; font-weight: 800; color: white; letter-spacing: -0.5px; line-height: 1.1; text-shadow: 0 2px 18px rgba(0,0,0,0.55); } .pf-enter-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.78); padding: 6px 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pf-enter-music { width: 16px; height: 16px; flex-shrink: 0; color: var(--pf-accent); } .pf-enter-btn { margin-top: 4px; padding: 16px 36px; background: linear-gradient(135deg, var(--pf-accent), color-mix(in srgb, var(--pf-accent) 70%, white)); color: white; border: none; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.3px; transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.2s ease; box-shadow: 0 12px 36px color-mix(in srgb, var(--pf-accent) 50%, transparent), 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); position: relative; overflow: hidden; } .pf-enter-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%); transform: translateX(-100%); transition: transform 0.6s ease; } .pf-enter-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 48px color-mix(in srgb, var(--pf-accent) 60%, transparent), 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35); } .pf-enter-btn:hover::before { transform: translateX(100%); } .pf-enter-btn:active { transform: translateY(0) scale(0.97); } .pf-enter-btn-icon { font-size: 14px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: rgba(255,255,255,0.20); border-radius: 50%; } .pf-enter-skip { margin-top: 4px; background: transparent; border: none; color: rgba(255,255,255,0.50); font-size: 13px; cursor: pointer; padding: 8px 14px; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .pf-enter-skip:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.06); } .pf-enter-splash.is-leaving { pointer-events: none; animation: pfEnterFadeOut 0.5s cubic-bezier(.4,0,.2,1) forwards; } @keyframes pfEnterFadeOut { to { opacity: 0; transform: scale(1.04); } } @media (max-width: 480px) { .pf-enter-avatar { width: 96px; height: 96px; } .pf-enter-name { font-size: 26px; } .pf-enter-btn { padding: 14px 28px; font-size: 15px; } } /* Click-to-unmute overlay (Fallback) */ .pf-unmute-prompt { position: fixed; right: 18px; bottom: 80px; z-index: 21; padding: 10px 18px; background: var(--pf-accent); color: white; border: none; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,0.4); cursor: pointer; animation: pfPulseUnmute 1.5s ease-in-out infinite; } .pf-unmute-prompt:hover { transform: scale(1.05); } @keyframes pfPulseUnmute { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 0 var(--pf-accent); } 50% { transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 12px transparent; } } @keyframes pfPlayerIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pf-player-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--pf-accent); color: white; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s ease, background 0.2s ease; } .pf-player-btn:hover { transform: scale(1.08); } .pf-player-btn:active { transform: scale(0.95); } .pf-player-icon { font-size: 14px; line-height: 1; } .pf-player-info { min-width: 0; flex: 1; overflow: hidden; } .pf-player-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pf-text); } .pf-player-bar { margin-top: 4px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; } .pf-player-bar-fill { height: 100%; background: var(--pf-accent); width: 0%; transition: width 0.3s linear; } .pf-player-vol { width: 50px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.15); border-radius: 999px; outline: none; transition: background 0.2s; cursor: pointer; } .pf-player-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pf-accent); cursor: pointer; } .pf-player-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--pf-accent); cursor: pointer; border: none; } .pf-player-close { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.10); border: none; color: var(--pf-text-soft); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease; } .pf-player-close:hover { background: rgba(255,255,255,0.25); color: var(--pf-text); } .pf-yt-host { position: fixed; right: -10000px; bottom: -10000px; width: 1px; height: 1px; visibility: hidden; pointer-events: none; } /* Tap-To-Play prompt — wenn Autoplay vom Browser geblockt wird */ .pf-player.is-pending .pf-player-btn { animation: pfPulseBtn 1.2s ease-in-out infinite; } @keyframes pfPulseBtn { 0%, 100% { box-shadow: 0 0 0 0 var(--pf-accent); } 50% { box-shadow: 0 0 0 10px transparent; } } /* Share Button (Mobile) */ .pf-share { position: fixed; right: 18px; top: 18px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; background: rgba(15,15,26,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); color: var(--pf-text); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; } .pf-share:hover { transform: scale(1.06); } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 480px) { .pf-shell { padding: 32px 14px 80px; } .pf-card { padding: 28px 20px 22px; border-radius: 22px; } .pf-name { font-size: 26px; } .pf-avatar-wrap { width: 108px; height: 108px; } .pf-link { padding: 12px 14px; } .pf-link-label { font-size: 14px; } .pf-player { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .pf-bg::after, .pf-avatar-ring, .pf-name-effect-rainbow, .pf-name-effect-chrome, .pf-name-effect-glow, .pf-name-effect-fire, .pf-name-effect-glitch::before, .pf-name-effect-glitch::after, .pf-name-effect-shake, .pf-name-effect-bounce span, .pf-name-effect-typewriter, .pf-card, .pf-player { animation: none !important; } }