/* ============================================================ deathlyill — LinkStack theme Linktree-style glass card over a video/image background. ============================================================ */ :root { /* Single subtle veil on top of the video — bump alpha higher if the text becomes hard to read over your particular bg.mp4. */ --card-bg: rgba(18, 22, 30, 0.20); --card-border: rgba(255, 255, 255, 0.10); --button-bg: rgba(20, 24, 32, 0.55); --button-bg-hover: rgba(30, 36, 46, 0.75); --button-border: rgba(255, 255, 255, 0.06); --pill-bg: rgba(20, 24, 32, 0.55); --pill-border: rgba(255, 255, 255, 0.10); --text: #ffffff; --text-dim: rgba(255, 255, 255, 0.82); --card-radius: 26px; --button-radius: 14px; --pill-size: 38px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; } /* Fallback solid color lives on . Body MUST stay transparent so the .ls-bg video can paint behind it — an opaque body bg would cover a z-index:-1 fixed child, even though that child is logically "behind" everything. */ html { background: #0d1014; } body { background: transparent; } /* LinkStack injects its own parallax block for any non-default theme. We replace it entirely with .ls-bg, so suppress the original. */ .background-container, .parallax-background { display: none !important; } /* PAGE-BACKGROUND video: fixed fullscreen, heavily blurred, with a light gray veil on top. This is the "foggy" layer the reference shows OUTSIDE the card. The slight scale hides the soft transparent edges that blur creates on the video frame. */ .ls-bg-page { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; } .ls-bg-page video, .ls-bg-page img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); filter: blur(22px) brightness(1.12); } .ls-bg-page::after { content: ""; position: absolute; inset: 0; background: rgba(200, 205, 215, 0.22); pointer-events: none; } /* IN-CARD video: absolute inside the .column (moved there by the script in extra/custom-body.blade.php). Clipped to the card's border-radius by overflow:hidden on .column. Sharp — no blur. */ .ls-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .ls-bg.is-placed { opacity: 1; } .ls-bg video, .ls-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Subtle bottom darkening so the lower buttons keep contrast. */ .ls-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.25)); pointer-events: none; } /* --- Layout / card ----------------------------------------- LinkStack wraps the page in .container > .row > .column. We turn the column into the centered glass card. ---------------------------------------------------------- */ .container { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 16px 80px; } .row { display: block; } .column { position: relative; /* z-index:0 forces a new stacking context so .ls-bg at z-index:-1 stays clipped to the card instead of falling behind html. */ z-index: 0; margin-top: 24px !important; padding: 56px 22px 28px; /* Transparent — the in-card .ls-bg video paints the card surface. --card-bg would just be covered by the video anyway. */ background: transparent; border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); /* Clip the in-card video to the rounded corners. box-shadow paints outside the clip, so the drop shadow is unaffected. */ overflow: hidden; } /* --- Top-left brand pill (the * mark in the reference) ----- Injected by custom-body.blade.php as .ls-brand. ---------------------------------------------------------- */ .ls-brand, .ls-bell { display: none !important; position: absolute; top: 14px; width: var(--pill-size); height: var(--pill-size); border-radius: 50%; background: var(--pill-bg); border: 1px solid var(--pill-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: var(--text); z-index: 3; } .ls-brand { left: 14px; } .ls-bell { right: 62px; } .ls-brand svg, .ls-bell svg { width: 18px; height: 18px; } /* --- Avatar ------------------------------------------------- */ #avatar, .rounded-avatar { display: block; margin: 8px auto 14px; width: 96px !important; height: 96px !important; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.10); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } /* --- Name --------------------------------------------------- */ h1 { margin: 4px 0 12px; text-align: center; color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: 0.2px; } /* --- Bio ---------------------------------------------------- */ .description-parent, .description-parent p { margin: 0; padding: 0; text-align: center; color: var(--text-dim); font-size: 14.5px; line-height: 1.45; } .description-parent { padding-bottom: 14px !important; } /* --- Social icons row -------------------------------------- */ .social-icon-div { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 6px auto 22px; padding: 0 8px; } .social-icon-div .social-link, .social-icon-div a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; text-decoration: none; } .social-icon-div .social-icon, .social-icon-div i { color: var(--text) !important; font-size: 20px; transition: transform 0.15s ease, opacity 0.15s ease; } .social-icon-div a:hover .social-icon { transform: translateY(-2px); } /* --- Footer / credits cleanup ------------------------------- */ .credit-footer, .credit-txt, .credit-icon { color: var(--text-dim) !important; text-align: center; } .credit-footer { margin-top: 18px; opacity: 0.7; } /* --- Responsive --------------------------------------------- */ @media (max-width: 540px) { .container { padding: 12px 12px 60px; } .column { padding: 52px 16px 22px; border-radius: 22px; } #avatar, .rounded-avatar { width: 88px !important; height: 88px !important; } h1 { font-size: 20px; } }