/* ============================================================= DARK VELOCITY — LinkStack Theme by dark-velocity / matteo ============================================================= */ :root { --bg: #06060a; --bg2: #0d0d16; --surface: rgba(255, 255, 255, 0.032); --surface-hov: rgba(255, 255, 255, 0.058); --border: rgba(255, 255, 255, 0.07); --border-hov: rgba(100, 130, 255, 0.45); --text: #eeeef5; --text-muted: rgba(238, 238, 245, 0.62); /* ≥4.5:1 contrast on dark bg */ --accent: #6382ff; --accent2: #a78bfa; --glow: rgba(99, 130, 255, 0.13); --glow-strong: rgba(99, 130, 255, 0.24); --radius: 16px; --radius-sm: 10px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; color-scheme: dark; } /* ── Body & background ── */ body { font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; background-color: var(--bg); background-size: cover !important; background-position: center center !important; /* NOTE: background-attachment: fixed REMOVED — it caused repaint glitches on scroll (especially with backdrop-filter content above). Default `scroll` is glitch-free. */ background-attachment: scroll !important; color: var(--text); font-size: 17px; line-height: 1.65; min-height: 100vh; overflow-x: hidden; } /* When LinkStack injects a custom background-image inline on , keep the dark color underneath so transparent corners of PNGs still look right */ body[style*="background-image"] { background-color: var(--bg) !important; } /* Ambient gradient orbs — GPU layer, parallax via --parallax-y CSS var set by JS */ body::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* fallback for older Safari */ inset: 0; background: radial-gradient(ellipse 70% 50% at 15% 5%, rgba(99, 130, 255, 0.09) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 85% 90%, rgba(167, 139, 250, 0.07) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 75% 10%, rgba(99, 130, 255, 0.04) 0%, transparent 50%); animation: ambientShift 18s ease-in-out infinite alternate; pointer-events: none; z-index: 0; contain: strict; /* Subtle scroll parallax shift applied by JS via --parallax-y */ transform: translateZ(0) translateY(calc(var(--parallax-y, 0px) * -0.15)); } /* When the user has uploaded a custom background, replace the orb overlay with a readability scrim — keeps text legible over any image (light, busy, photographic). */ body[style*="background-image"]::before { background: radial-gradient(ellipse 70% 50% at 15% 5%, rgba(99, 130, 255, 0.10) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 85% 90%, rgba(167, 139, 250, 0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(6, 6, 10, 0.55) 0%, rgba(6, 6, 10, 0.78) 100%); } @keyframes ambientShift { from { opacity: 0.7; transform: translateZ(0) scale(1); } to { opacity: 1; transform: translateZ(0) scale(1.04) rotate(0.5deg); } } /* Noise grain overlay — static, paint-contained */ body::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* fallback for older Safari */ inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.032; pointer-events: none; z-index: 0; contain: strict; } /* ── Container — centered, responsive, !important to beat LinkStack's Bootstrap ── */ .container { position: relative; z-index: 1; max-width: 620px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 22px !important; padding-right: 22px !important; padding-bottom: 60px !important; text-align: center; contain: layout style; } /* Bootstrap row/column should not break centering on the link page */ .container > .row { margin-left: 0 !important; margin-right: 0 !important; justify-content: center; } .container .column { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Mobile breakpoint */ @media (max-width: 480px) { .container { padding-left: 16px !important; padding-right: 16px !important; } } /* Grid utilities (keep Skeleton compat) */ .column, .columns { float: none; } .u-full-width { width: 100%; } .u-max-full-width { max-width: 100%; } .u-pull-right { float: right; } .u-pull-left { float: left; } .cf::after, .container::after { content: ''; display: table; clear: both; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: 'Syne', sans-serif; line-height: 1.15; } /* Profile name — !important needed because LinkStack adds .dynamic-contrast */ h1, h1.dynamic-contrast { font-size: clamp(2.6rem, 9vw, 4.2rem) !important; font-weight: 800 !important; letter-spacing: -0.025em !important; background: linear-gradient(140deg, #ffffff 0%, var(--accent2) 55%, var(--accent) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; margin-bottom: 0.3em; padding-top: 0.2em; text-align: center; } /* Bio */ p { color: var(--text-muted); font-size: 0.92rem; font-weight: 400; line-height: 1.75; } a { color: inherit; text-decoration: none; } /* Section headings — centered with symmetric accent rules on each side */ .column h2, .column h3, .column h4, .column h5, .container > .row > .column h2, .container > .row > .column h3, .container > .row > .column h4 { font-family: 'Syne', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--accent) !important; margin: 32px auto 14px !important; padding: 0 !important; border-bottom: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; text-align: center !important; line-height: 1.2 !important; max-width: 100% !important; } /* Symmetric accent lines flank the centered text */ .column h2::before, .column h3::before, .column h4::before, .column h5::before { content: ''; flex: 1; height: 1px; max-width: 60px; background: linear-gradient(90deg, transparent, rgba(99, 130, 255, 0.4)); } .column h2::after, .column h3::after, .column h4::after, .column h5::after { content: ''; flex: 1; height: 1px; max-width: 60px; background: linear-gradient(90deg, rgba(99, 130, 255, 0.4), transparent); } /* H1 (profile name) and footer h-tags should NOT get the section style */ h1, .credit-footer h2, .credit-footer h3, .credit-footer h4, .credit-footer h5 { text-transform: none !important; letter-spacing: normal !important; border-bottom: none !important; display: block !important; justify-content: initial !important; } h1::before, h1::after, .credit-footer h2::before, .credit-footer h2::after, .credit-footer h3::before, .credit-footer h3::after, .credit-footer h4::before, .credit-footer h4::after, .credit-footer h5::before, .credit-footer h5::after { display: none !important; content: none !important; } /* ── Avatar — LinkStack uses #avatar.rounded-avatar ── */ #avatar, .rounded-avatar, img[style*="border-radius: 50%"], img[class*="avatar"], .avatar { border-radius: 50% !important; border: 2px solid rgba(99, 130, 255, 0.25) !important; box-shadow: 0 0 0 5px rgba(99, 130, 255, 0.07), 0 0 40px rgba(99, 130, 255, 0.18), 0 0 80px rgba(99, 130, 255, 0.08) !important; animation: avatarFloat 7s ease-in-out infinite; will-change: transform; transition: box-shadow 0.4s ease !important; display: block; margin-left: auto; margin-right: auto; } #avatar:hover, .rounded-avatar:hover, img[style*="border-radius: 50%"]:hover { box-shadow: 0 0 0 5px rgba(99, 130, 255, 0.14), 0 0 50px rgba(99, 130, 255, 0.35), 0 0 90px rgba(99, 130, 255, 0.12) !important; } @keyframes avatarFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } } /* ── Social icon strip — LinkStack uses Font Awesome tags ── */ .social-icon, i.social-icon, .social-link .social-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; font-size: 18px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: rgba(238, 238, 245, 0.85) !important; opacity: 0.85; margin: 0 3px !important; text-decoration: none !important; transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, opacity 0.28s ease !important; filter: none !important; } .social-hover { display: inline-block; margin: 0 2px; } .social-hover:hover .social-icon, .social-hover:focus .social-icon, i.social-icon:hover, .social-link:hover .social-icon { background: var(--surface-hov) !important; border-color: var(--accent) !important; color: #ffffff !important; transform: translateY(-5px) scale(1.10) !important; box-shadow: 0 8px 22px var(--glow-strong) !important; opacity: 1; } /* Hide empty social slots (LinkStack renders ghost icons with no class) */ .social-link:empty, .social-link a:empty, i.social-icon:not([class*="fa-"]) { display: none !important; } /* ── Link buttons / cards ── */ .button { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; font-family: 'Manrope', sans-serif !important; font-size: 0.93rem !important; font-weight: 500 !important; padding: 15px 20px !important; width: 100% !important; display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 9px !important; position: relative !important; overflow: hidden !important; justify-content: center !important; /* center icon + text horizontally */ text-align: center !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; contain: style paint !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease !important; } /* Shimmer sweep on hover — transform-only (GPU composited, no layout) */ .button::after { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0.04) 50%, transparent 80% ); transform: translateX(-170%); transition: transform 0.5s ease; will-change: transform; pointer-events: none; } .button-hover:hover .button::after, .button:hover::after { transform: translateX(275%); } .button-hover:hover .button, .button-hover:focus .button, .button:hover, .button:focus { background: var(--surface-hov) !important; border-color: var(--border-hov) !important; box-shadow: 0 4px 32px var(--glow), 0 2px 8px rgba(0,0,0,0.5) !important; } /* Icon inside button */ .button img, .button .hvr-icon { width: 22px !important; height: 22px !important; object-fit: contain; flex-shrink: 0; border-radius: 5px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .button-hover:hover .button img, .button:hover img { transform: scale(1.18) rotate(-4deg) !important; } /* ── Footer ── */ .credit-footer { text-align: center; padding: 48px 0 32px; position: relative; z-index: 1; } .credit-txt { font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.50); /* increased from 0.18 for WCAG AA */ } .credit-txt-clr { color: var(--accent); transition: color 0.2s ease; } .credit-hover:hover .credit-txt-clr { color: var(--accent2); } /* ── Utility ── */ .spacing { height: 14px; } /* ── Inputs (admin pages) ── */ input, textarea, select { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-sm) !important; font-family: 'Manrope', sans-serif !important; } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px var(--glow) !important; } /* ── Custom scrollbar ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(99, 130, 255, 0.28); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Force dark on light-mode systems (only when no custom background uploaded) */ @media (prefers-color-scheme: light) { body:not([style*="background-image"]) { background-color: var(--bg) !important; color: var(--text) !important; } } /* ── Custom background readability ── When a user uploads a custom background image, bump card opacity / blur / borders so text and icons stay legible over any photo, gradient, or busy pattern. */ body[style*="background-image"] .button { background: rgba(13, 13, 22, 0.62) !important; border-color: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; } body[style*="background-image"] .button:hover, body[style*="background-image"] .button:focus { background: rgba(13, 13, 22, 0.78) !important; border-color: rgba(99, 130, 255, 0.55) !important; } body[style*="background-image"] .social-icon, body[style*="background-image"] i.social-icon { background: rgba(13, 13, 22, 0.55) !important; border-color: rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body[style*="background-image"] .column h2, body[style*="background-image"] .column h3, body[style*="background-image"] .column h4, body[style*="background-image"] .column h5 { /* Ensure section labels remain readable on light backgrounds — slightly stronger color */ color: #a8c0ff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); } body[style*="background-image"] p, body[style*="background-image"] .description-parent { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); color: rgba(238, 238, 245, 0.88) !important; } /* ── will-change: only while animating, released after reveal ── */ .button-entrance:not(.is-visible) { will-change: opacity, transform; } /* ── Respect reduced-motion preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body::before { animation: none; opacity: 0.9; } .button-entrance { opacity: 1 !important; transform: none !important; } h5 { opacity: 1 !important; transform: none !important; } img[style*="border-radius: 50%"], img[class*="avatar"] { animation: none; will-change: auto; } }