/* ========================================================================== EVO.AL — Public styles (profile, landing, 404) Minimalist / premium / glassmorphism. Always mobile-first. ========================================================================== */ :root { --ink: #111827; --white: #ffffff; --brand: #2563EB; --brand-600: #1d4ed8; --mist: #F8FAFC; --radius-card: 18px; --radius-lg: 26px; --ease: cubic-bezier(.22, 1, .36, 1); --shadow-sm: 0 2px 8px rgba(17, 24, 39, .06); --shadow-md: 0 10px 30px rgba(17, 24, 39, .10); --shadow-lg: 0 24px 60px rgba(17, 24, 39, .18); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Light theme (default) */ [data-theme="light"] { --bg: var(--mist); --bg-2: #eef2f9; --surface: rgba(255, 255, 255, .72); --surface-solid: #ffffff; --card-bg: rgba(255, 255, 255, .82); --border: rgba(17, 24, 39, .08); --text: #111827; --text-soft: #4b5563; --text-mute: #9aa4b2; --glass-blur: 18px; } /* Dark theme */ [data-theme="dark"] { --bg: #0b1120; --bg-2: #0f172a; --surface: rgba(255, 255, 255, .06); --surface-solid: #151d2e; --card-bg: rgba(255, 255, 255, .055); --border: rgba(255, 255, 255, .10); --text: #f8fafc; --text-soft: #c3ccda; --text-mute: #7c879a; --glass-blur: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The page gradient belongs on the root, not on body, for two reasons. The root's background paints the whole canvas, so an overscroll bounce stays on-theme instead of exposing white (data-theme lives on , so this tracks the toggle). And, critically: a background on body paints in the "in-flow descendants" step, which is *above* every z-index:-2 fixed layer beneath it — putting it there hid the animated backgrounds and uploaded profile images completely. */ background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); background-attachment: fixed; overscroll-behavior-y: none; } body { font-family: var(--font); color: var(--text); /* Must stay transparent — see the note on html above. */ background: transparent; min-height: 100vh; min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.has-bg::before { content: ""; position: fixed; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center; z-index: -2; } body.has-bg::after { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(11, 17, 32, .55), rgba(11, 17, 32, .82)); z-index: -1; } [data-theme="light"] body.has-bg::after { background: linear-gradient(180deg, rgba(248, 250, 252, .55), rgba(248, 250, 252, .85)); } /* ========================================================================== Animated backgrounds (Pro) — transform/opacity only, GPU-composited. ========================================================================== */ .anim-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } /* -- Aurora: three blurred light blobs drifting -- */ .ab-blob { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(70px); opacity: .38; will-change: transform; } .anim-aurora .ab-1 { top: -20%; left: -15%; background: #2563EB; animation: abDrift1 26s ease-in-out infinite alternate; } .anim-aurora .ab-2 { bottom: -25%; right: -15%; background: #7c3aed; animation: abDrift2 32s ease-in-out infinite alternate; } .anim-aurora .ab-3 { top: 30%; left: 40%; width: 40vmax; height: 40vmax; background: #ec4899; opacity: .22; animation: abDrift3 38s ease-in-out infinite alternate; } @keyframes abDrift1 { to { transform: translate(18vw, 12vh) scale(1.15); } } @keyframes abDrift2 { to { transform: translate(-14vw, -10vh) scale(1.2); } } @keyframes abDrift3 { to { transform: translate(-16vw, 8vh) scale(.85); } } /* -- Mesh gradient: one large layer slowly swaying -- */ .anim-mesh::before { content: ""; position: absolute; inset: -50%; background: radial-gradient(40% 40% at 25% 30%, rgba(37, 99, 235, .5), transparent 70%), radial-gradient(35% 35% at 75% 25%, rgba(124, 58, 237, .45), transparent 70%), radial-gradient(45% 45% at 70% 75%, rgba(236, 72, 153, .35), transparent 70%), radial-gradient(35% 35% at 25% 80%, rgba(6, 182, 212, .35), transparent 70%); animation: abMesh 30s ease-in-out infinite alternate; will-change: transform; } @keyframes abMesh { to { transform: translate(6%, -5%) rotate(8deg) scale(1.1); } } /* -- Gradient shift: oversized gradient panning via transform -- */ .anim-gradient-shift::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(120deg, rgba(37, 99, 235, .5), rgba(124, 58, 237, .42), rgba(236, 72, 153, .4), rgba(37, 99, 235, .5)); animation: abPan 22s ease-in-out infinite alternate; will-change: transform; } @keyframes abPan { to { transform: translate(-18%, -12%); } } /* -- Orbs: soft pulsing circles -- */ .ab-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .5), transparent 70%); will-change: transform, opacity; animation: abPulse 9s ease-in-out infinite; } .anim-orbs .ab-1 { width: 45vmin; height: 45vmin; top: 6%; left: 8%; } .anim-orbs .ab-2 { width: 34vmin; height: 34vmin; top: 55%; right: 6%; background: radial-gradient(circle, rgba(124, 58, 237, .5), transparent 70%); animation-delay: -3s; } .anim-orbs .ab-3 { width: 26vmin; height: 26vmin; bottom: 8%; left: 22%; background: radial-gradient(circle, rgba(236, 72, 153, .45), transparent 70%); animation-delay: -6s; } .anim-orbs .ab-4 { width: 20vmin; height: 20vmin; top: 26%; right: 26%; background: radial-gradient(circle, rgba(6, 182, 212, .45), transparent 70%); animation-delay: -1.5s; } @keyframes abPulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.28); opacity: .9; } } /* -- Particles: tiny stars floating upward -- */ .ab-star { position: absolute; bottom: -3vh; width: 5px; height: 5px; border-radius: 50%; background: rgba(147, 197, 253, .8); box-shadow: 0 0 8px 2px rgba(37, 99, 235, .35); will-change: transform, opacity; animation: abFloat linear infinite; opacity: 0; } .anim-particles .ab-s1 { left: 6%; animation-duration: 15s; } .anim-particles .ab-s2 { left: 14%; animation-duration: 21s; animation-delay: -6s; width: 3px; height: 3px; } .anim-particles .ab-s3 { left: 22%; animation-duration: 17s; animation-delay: -11s; } .anim-particles .ab-s4 { left: 30%; animation-duration: 24s; animation-delay: -3s; width: 4px; height: 4px; } .anim-particles .ab-s5 { left: 38%; animation-duration: 16s; animation-delay: -9s; width: 3px; height: 3px; } .anim-particles .ab-s6 { left: 46%; animation-duration: 22s; animation-delay: -14s; } .anim-particles .ab-s7 { left: 54%; animation-duration: 18s; animation-delay: -5s; width: 4px; height: 4px; } .anim-particles .ab-s8 { left: 62%; animation-duration: 25s; animation-delay: -12s; width: 3px; height: 3px; } .anim-particles .ab-s9 { left: 70%; animation-duration: 15s; animation-delay: -8s; } .anim-particles .ab-s10 { left: 78%; animation-duration: 20s; animation-delay: -2s; width: 4px; height: 4px; } .anim-particles .ab-s11 { left: 86%; animation-duration: 17s; animation-delay: -10s; width: 3px; height: 3px; } .anim-particles .ab-s12 { left: 94%; animation-duration: 23s; animation-delay: -7s; } .anim-particles .ab-s13 { left: 10%; animation-duration: 19s; animation-delay: -16s; width: 3px; height: 3px; } .anim-particles .ab-s14 { left: 90%; animation-duration: 26s; animation-delay: -18s; width: 4px; height: 4px; } @keyframes abFloat { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translateY(-108vh); opacity: 0; } } /* -- Waves: two slow-spinning rounded sheets at the bottom -- */ .ab-wave { position: absolute; bottom: -130vmin; left: 50%; width: 160vmin; height: 160vmin; margin-left: -80vmin; border-radius: 43%; background: rgba(37, 99, 235, .28); will-change: transform; animation: abSpin 24s linear infinite; } .anim-waves .ab-w2 { border-radius: 46%; background: rgba(124, 58, 237, .22); animation-duration: 34s; animation-direction: reverse; } @keyframes abSpin { to { transform: rotate(360deg); } } /* -- Nebula: deep cosmic clouds drifting behind twinkling stars -- */ .anim-nebula .ab-neb { position: absolute; border-radius: 50%; filter: blur(65px); opacity: .5; will-change: transform; } .anim-nebula .ab-n1 { width: 62vmax; height: 48vmax; top: -14%; left: -12%; background: radial-gradient(circle, #4338ca, transparent 70%); animation: abNeb1 34s ease-in-out infinite alternate; } .anim-nebula .ab-n2 { width: 52vmax; height: 52vmax; bottom: -20%; right: -14%; background: radial-gradient(circle, #be185d, transparent 70%); animation: abNeb2 42s ease-in-out infinite alternate; } .anim-nebula .ab-n3 { width: 42vmax; height: 42vmax; top: 32%; left: 42%; opacity: .34; background: radial-gradient(circle, #0891b2, transparent 70%); animation: abNeb3 48s ease-in-out infinite alternate; } @keyframes abNeb1 { to { transform: translate(14vw, 10vh) scale(1.2); } } @keyframes abNeb2 { to { transform: translate(-12vw, -8vh) scale(1.15); } } @keyframes abNeb3 { to { transform: translate(-11vw, 12vh) scale(.85); } } .anim-nebula .ab-tw { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(191, 219, 254, .7); opacity: 0; animation: abTwinkle ease-in-out infinite; animation-duration: var(--d); animation-delay: var(--t); will-change: opacity, transform; } @keyframes abTwinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.35); } } /* -- Beams: slow rotating rays of light -- */ .anim-beams::before { content: ""; position: absolute; top: 50%; left: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, .20) 9deg, transparent 21deg, transparent 47deg, rgba(168, 85, 247, .18) 57deg, transparent 70deg, transparent 112deg, rgba(236, 72, 153, .16) 122deg, transparent 135deg, transparent 182deg, rgba(6, 182, 212, .18) 192deg, transparent 205deg, transparent 252deg, rgba(59, 130, 246, .16) 263deg, transparent 276deg, transparent 320deg, rgba(168, 85, 247, .15) 331deg, transparent 345deg, transparent 360deg); animation: abRotate 52s linear infinite; will-change: transform; } /* Fade the rays toward the edges so the text keeps its contrast. */ .anim-beams::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 0%, transparent 30%, color-mix(in srgb, var(--bg) 78%, transparent) 100%); } @keyframes abRotate { to { transform: rotate(360deg); } } /* -- Bokeh: soft blurred lights drifting upward -- */ .anim-bokeh .ab-bk { position: absolute; bottom: -25vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .55), rgba(147, 197, 253, .20) 45%, transparent 72%); filter: blur(var(--b)); opacity: 0; animation: abRise linear infinite; animation-duration: var(--d); animation-delay: var(--t); will-change: transform, opacity; } @keyframes abRise { 0% { transform: translate3d(0, 0, 0) scale(.75); opacity: 0; } 14% { opacity: .85; } 86% { opacity: .6; } 100% { transform: translate3d(4vw, -130vh, 0) scale(1.2); opacity: 0; } } /* -- Retro grid: endless neon grid running to the horizon -- The sheet pivots on its top edge (the horizon), so a positive rotateX tips its lower half toward the viewer and perspective does the rest. Scrolling it by exactly one tile keeps the loop seamless. */ .anim-grid { perspective: 280px; } .anim-grid .ab-grid { position: absolute; left: -100%; right: -100%; top: 42%; bottom: -80%; background-image: linear-gradient(to right, rgba(96, 165, 250, .32) 1px, transparent 1px), linear-gradient(to bottom, rgba(96, 165, 250, .32) 1px, transparent 1px); background-size: 70px 70px; transform-origin: 50% 0; animation: abGrid 3s linear infinite; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%); mask-image: linear-gradient(to bottom, transparent 0%, #000 28%); will-change: transform; } @keyframes abGrid { from { transform: rotateX(78deg) translateY(0); } to { transform: rotateX(78deg) translateY(70px); } } /* Glow sitting on the horizon line. */ .anim-grid::after { content: ""; position: absolute; left: 0; right: 0; top: 10%; height: 34vh; background: radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, .34), transparent 70%); } /* -- Meteors: shooting stars crossing the sky -- */ .anim-meteors .ab-mt { position: absolute; top: var(--y); left: var(--x); width: 150px; height: 2px; border-radius: 999px; background: linear-gradient(270deg, rgba(219, 234, 254, .95), rgba(147, 197, 253, .32) 38%, transparent 78%); opacity: 0; animation: abMeteor linear infinite; animation-duration: var(--d); animation-delay: var(--t); will-change: transform, opacity; } .anim-meteors .ab-mt::before { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(147, 197, 253, .65); } @keyframes abMeteor { 0% { transform: rotate(26deg) translateX(-40vmax); opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 100% { transform: rotate(26deg) translateX(120vmax); opacity: 0; } } /* -- Snow: flakes drifting gently down -- */ .anim-snow .ab-sf { position: absolute; top: -8vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 6px rgba(255, 255, 255, .45); opacity: 0; animation: abSnow linear infinite; animation-duration: var(--d); animation-delay: var(--t); will-change: transform, opacity; } @keyframes abSnow { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translate3d(var(--dx), 112vh, 0); opacity: 0; } } /* Light theme: soften the layers so text stays readable */ [data-theme="light"] .anim-bg { opacity: .5; } /* White sparks disappear on a light page — recolour them to the brand blue. */ [data-theme="light"] .anim-nebula .ab-tw, [data-theme="light"] .anim-snow .ab-sf { background: rgba(37, 99, 235, .75); box-shadow: 0 0 6px rgba(37, 99, 235, .35); } [data-theme="light"] .anim-meteors .ab-mt { background: linear-gradient(270deg, rgba(37, 99, 235, .9), rgba(37, 99, 235, .3) 38%, transparent 78%); } [data-theme="light"] .anim-meteors .ab-mt::before { background: #2563EB; box-shadow: 0 0 10px 3px rgba(37, 99, 235, .45); } [data-theme="light"] .anim-bokeh .ab-bk { background: radial-gradient(circle at 35% 32%, rgba(37, 99, 235, .38), rgba(124, 58, 237, .16) 45%, transparent 72%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* ---------- Loader ---------- */ .loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--bg); transition: opacity .4s var(--ease), visibility .4s; } .loader.is-done { opacity: 0; visibility: hidden; } .loader-ring { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Profile page ========================================================================== */ .profile { width: 100%; max-width: 520px; margin: 0 auto; padding: 28px 20px 60px; min-height: 100dvh; display: flex; flex-direction: column; } .profile-head { text-align: center; position: relative; padding-top: 8px; } .profile-actions { position: absolute; top: 0; right: 0; display: flex; gap: 8px; } .pill-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--text); display: grid; place-items: center; font-size: 15px; transition: transform .25s var(--ease), background .25s; } .pill-btn:hover { transform: translateY(-2px); } .pill-btn:active { transform: scale(.92); } .avatar-ring { position: relative; width: 112px; height: 112px; margin: 6px auto 16px; border-radius: 50%; } .avatar-ring::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, #2563EB, #7c3aed, #ec4899, #f59e0b, #2563EB); animation: ringSpin 6s linear infinite; will-change: transform; z-index: 0; } @keyframes ringSpin { to { transform: rotate(360deg); } } .avatar { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; padding: 3px; background: var(--bg); box-shadow: var(--shadow-md); } .avatar img, .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-solid); color: var(--brand); font-weight: 800; font-size: 42px; } .profile-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; justify-content: center; gap: 7px; } .verified-badge { color: #2563EB; font-size: 17px; filter: drop-shadow(0 1px 3px rgba(37, 99, 235, .35)); } .profile-handle { color: var(--text-mute); font-size: 14px; font-weight: 500; margin-top: 2px; } .profile-bio { color: var(--text-soft); font-size: 15px; margin: 12px auto 0; max-width: 400px; } /* ---------- Links grid — ALWAYS 2 columns ---------- */ .links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; } .link-card { position: relative; display: flex; flex-direction: column; align-items: center; /* centered icon + title */ justify-content: center; text-align: center; gap: 12px; padding: 22px 16px; border-radius: var(--radius-card); /* Solid translucent surface (no per-card backdrop blur) keeps the glass look while staying cheap to paint — dozens of blurred layers caused scroll lag. */ background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate; /* Only transform/opacity animate on interaction → compositor-friendly. */ transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; animation: cardIn .45s var(--ease) both; } /* Soft accent glow that blooms from the centre on hover */ .link-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140px 120px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); opacity: .3; z-index: -1; transition: opacity .3s; } /* Sheen sweep on hover — animates transform only (GPU composited). */ .link-card::after { content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); opacity: 0; z-index: 1; pointer-events: none; transform: translateX(-180%) skewX(-18deg); } .link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .link-card:hover::before { opacity: 1; } @media (hover: hover) { .link-card:hover::after { animation: sheen .7s var(--ease); } } .link-card:active { transform: translateY(-2px) scale(.98); } @keyframes sheen { 0% { transform: translateX(-180%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(320%) skewX(-18deg); opacity: 0; } } .link-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000 14%)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .35s var(--ease); } .link-card:hover .link-icon { transform: scale(1.08) translateY(-1px); } .link-title { font-weight: 600; font-size: 15px; letter-spacing: -.01em; } .link-arrow { position: absolute; top: 14px; right: 14px; color: var(--text-mute); font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s var(--ease); } .link-card:hover .link-arrow { opacity: .8; transform: translateX(0); } .link-card-wide { grid-column: span 2; flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 16px 20px; } .link-card-wide .link-icon { width: 46px; height: 46px; flex: 0 0 auto; font-size: 19px; } .link-card-wide .link-title { font-size: 15.5px; } .link-card-wide::before { background: radial-gradient(160px 120px at 0% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%); } .link-card-wide .link-arrow { position: static; opacity: .55; transform: none; margin-left: auto; } .link-card-wide:hover .link-arrow { opacity: 1; transform: translateX(2px); } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } } .links-grid .link-card:nth-child(1) { animation-delay: .02s; } .links-grid .link-card:nth-child(2) { animation-delay: .06s; } .links-grid .link-card:nth-child(3) { animation-delay: .10s; } .links-grid .link-card:nth-child(4) { animation-delay: .14s; } .links-grid .link-card:nth-child(5) { animation-delay: .18s; } .links-grid .link-card:nth-child(6) { animation-delay: .22s; } .links-grid .link-card:nth-child(n+7) { animation-delay: .26s; } .empty-note { text-align: center; color: var(--text-mute); margin-top: 30px; } /* ---------- Followers total pill ---------- */ .followers-total { display: inline-flex; align-items: center; gap: 7px; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-soft); } .followers-total i { color: var(--brand); font-size: 11px; } .followers-total strong { color: var(--text); font-weight: 800; } /* ---------- Social icon row (under username) ---------- */ .social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 18px; } .social-ico-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; } .social-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 62%, #000 16%)); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 38%, transparent); transition: transform .28s var(--ease), box-shadow .28s; animation: cardIn .45s var(--ease) both; } .social-ico-wrap:hover .social-ico { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 50%, transparent); } .social-ico-wrap:active .social-ico { transform: scale(.92); } .social-followers { font-size: 11px; font-weight: 700; color: var(--text-mute); } .social-row .social-ico-wrap:nth-child(1) .social-ico { animation-delay: .02s; } .social-row .social-ico-wrap:nth-child(2) .social-ico { animation-delay: .06s; } .social-row .social-ico-wrap:nth-child(3) .social-ico { animation-delay: .10s; } .social-row .social-ico-wrap:nth-child(4) .social-ico { animation-delay: .14s; } .social-row .social-ico-wrap:nth-child(n+5) .social-ico { animation-delay: .18s; } /* ---------- Skills news ticker ---------- */ .skills-ticker { margin-top: 22px; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .ticker-track { display: inline-flex; gap: 10px; white-space: nowrap; padding-left: 10px; animation: tickerScroll 22s linear infinite; will-change: transform; } .skills-ticker:hover .ticker-track { animation-play-state: paused; } .skill-pill { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-soft); } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Collapsible link groups ---------- */ .links-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .links-wrap > .links-grid { margin-top: 0; } .link-group { border-radius: var(--radius-card); background: var(--card-bg); border: 1px solid var(--border); overflow: hidden; animation: cardIn .45s var(--ease) both; } .group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; } .group-head::-webkit-details-marker { display: none; } .group-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .group-title i { color: var(--brand); } .group-right { display: inline-flex; align-items: center; gap: 10px; color: var(--text-mute); } .group-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .group-chevron { transition: transform .3s var(--ease); font-size: 13px; } details[open] .group-chevron { transform: rotate(180deg); } .group-body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 8px; } details[open] .group-body { animation: groupOpen .32s var(--ease); } @keyframes groupOpen { from { opacity: 0; transform: translateY(-8px); } } .group-link { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border); transition: transform .25s var(--ease), border-color .25s; } [data-theme="dark"] .group-link { background: rgba(255,255,255,.03); } .group-link:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .gl-ico { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; font-size: 17px; color: #fff; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000 14%)); } .gl-title { flex: 1; font-weight: 600; font-size: 14.5px; } .gl-arrow { color: var(--text-mute); font-size: 12px; } /* ---------- Toolbar ---------- */ .profile-toolbar { display: flex; gap: 10px; justify-content: center; margin-top: 26px; } .tool-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--text); font-size: 13px; font-weight: 600; transition: transform .25s var(--ease), background .25s; } .tool-btn:hover { transform: translateY(-2px); } .tool-btn:active { transform: scale(.95); } .profile-footer { margin-top: auto; padding-top: 34px; text-align: center; } .brand-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-mute); text-transform: uppercase; } .brand-badge .dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } /* ---------- QR modal ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s; } .modal-card { position: relative; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; width: min(340px, 90vw); text-align: center; box-shadow: var(--shadow-lg); animation: pop .35s var(--ease); } .modal-card h3 { font-size: 17px; margin-bottom: 18px; } .modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface); color: var(--text); display: grid; place-items: center; } .qr-holder { width: 220px; height: 220px; margin: 0 auto 14px; background: #fff; border-radius: 16px; padding: 10px; display: grid; place-items: center; } .qr-holder img, .qr-holder canvas, .qr-holder svg { width: 100%; height: 100%; } .qr-url { font-size: 12px; color: var(--text-mute); word-break: break-all; margin-bottom: 16px; } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: scale(.92) translateY(10px); } } /* ---------- Contact form modal ---------- */ .contact-form { text-align: left; display: flex; flex-direction: column; gap: 13px; margin-top: 4px; } .c-field { display: flex; flex-direction: column; gap: 6px; } .c-field > span { font-size: 12.5px; font-weight: 600; color: var(--text-soft); } .c-field input, .c-field textarea { width: 100%; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 14px; transition: border-color .2s, box-shadow .2s; } .c-field input:focus, .c-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); } .c-field textarea { resize: vertical; min-height: 92px; } .contact-form .btn-primary { margin-top: 4px; } /* Honeypot — visually removed but present for bots */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #contactModal .modal-card { width: min(420px, 92vw); } /* ---------- Packages card (opens a pricing modal) ---------- */ .link-card-pkg { font-family: inherit; color: inherit; cursor: pointer; } .link-card-pkg .link-icon { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed 30%)); } /* ---------- Packages modal ---------- */ .pkg-modal-card { width: min(400px, 92vw); text-align: left; } .pkg-modal-card h3 { text-align: center; } .pkg-modal-list { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; } .pkg-modal-row { padding: 14px 16px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border); } .pkg-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pkg-modal-head strong { font-size: 15px; } .pkg-modal-price { font-weight: 800; color: var(--brand); font-size: 15px; white-space: nowrap; } .pkg-modal-row p { margin-top: 6px; font-size: 13px; color: var(--text-mute); line-height: 1.5; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); z-index: 300; max-width: 90vw; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.t-success { background: #16a34a; } .toast.t-error { background: #dc2626; } .toast.t-info { background: var(--brand); } /* ========================================================================== Landing page ========================================================================== */ .landing { } .btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; background: var(--brand); color: #fff; border: none; font-weight: 700; font-size: 15px; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 40%, transparent); transition: transform .25s var(--ease), box-shadow .25s, background .25s; } .btn-primary:hover { transform: translateY(-2px); background: var(--brand-600); box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 48%, transparent); } .btn-primary:active { transform: scale(.97); } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 15px; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transition: transform .25s var(--ease); } .btn-ghost:hover { transform: translateY(-2px); } .lp-nav { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; } .lp-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; } .lp-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text-soft); } .lp-cta:hover { color: var(--text); } .lp-hero { max-width: 760px; margin: 0 auto; text-align: center; padding: 60px 24px 40px; } .lp-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 22px; } .lp-title { font-size: clamp(38px, 8vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; } .lp-title span { background: linear-gradient(120deg, var(--brand), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-sub { color: var(--text-soft); font-size: 18px; margin: 22px auto 0; max-width: 540px; } .lp-sub code { background: var(--surface); padding: 2px 8px; border-radius: 7px; font-size: .92em; border: 1px solid var(--border); } .lp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .lp-stats { display: flex; justify-content: center; gap: 40px; margin-top: 52px; flex-wrap: wrap; } .lp-stat { text-align: center; } .lp-stat strong { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.02em; } .lp-stat span { font-size: 13px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; } .lp-featured { max-width: 1080px; margin: 40px auto 0; padding: 0 24px; } .lp-featured h2, .lp-features + .lp-footer, .lp-featured h2 { } .lp-featured h2 { text-align: center; font-size: 22px; margin-bottom: 22px; letter-spacing: -.02em; } .lp-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .lp-profile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transition: transform .25s var(--ease), border-color .25s; } .lp-profile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .lp-avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--brand), #7c3aed); color: #fff; font-weight: 800; } .lp-avatar img { width: 100%; height: 100%; object-fit: cover; } .lp-profile-meta { flex: 1; min-width: 0; } .lp-profile-meta strong { display: block; font-size: 15px; } .lp-profile-meta small { color: var(--text-mute); font-size: 13px; } .lp-profile > i { color: var(--text-mute); } .lp-features { max-width: 1080px; margin: 60px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .lp-feature { padding: 26px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); } .lp-feature i { font-size: 22px; color: var(--brand); } .lp-feature h3 { font-size: 17px; margin: 14px 0 6px; } .lp-feature p { color: var(--text-soft); font-size: 14px; } /* ---------- Landing pricing ---------- */ .lp-pricing { max-width: 860px; margin: 70px auto 0; padding: 0 24px; text-align: center; } .lp-pricing h2 { font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; letter-spacing: -.025em; } .lp-pricing-sub { color: var(--text-soft); font-size: 15.5px; margin: 10px auto 30px; max-width: 460px; } .lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; text-align: left; } .lp-plan { position: relative; padding: 28px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); display: flex; flex-direction: column; gap: 4px; } .lp-plan-pro { border-color: color-mix(in srgb, #f59e0b 50%, var(--border)); box-shadow: 0 14px 40px color-mix(in srgb, #f59e0b 16%, transparent); } .lp-plan-tag { position: absolute; top: -11px; left: 24px; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 4px 11px; border-radius: 999px; } .lp-plan-name { font-size: 15px; font-weight: 700; color: var(--text-soft); } .lp-plan-price { font-size: 38px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; } .lp-plan-price small { font-size: 13px; font-weight: 500; color: var(--text-mute); } .lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; font-size: 14px; color: var(--text-soft); } .lp-plan ul li { display: flex; align-items: center; gap: 10px; } .lp-plan ul i { color: #16a34a; font-size: 12.5px; flex: 0 0 auto; } .lp-plan .lp-verified { color: #2563EB; font-size: 14px; } .lp-plan .btn-primary, .lp-plan .btn-ghost { justify-content: center; margin-top: auto; } .lp-footer { max-width: 1080px; margin: 60px auto 0; padding: 30px 24px; text-align: center; color: var(--text-mute); font-size: 13px; border-top: 1px solid var(--border); } /* ========================================================================== In-app browser escape interstitial (/l/{id}) ========================================================================== */ .redirect-page { display: grid; place-items: center; min-height: 100dvh; padding: 28px; } .redirect-card { width: min(360px, 100%); text-align: center; } .redirect-spin { position: static; display: inline-block; margin-bottom: 18px; } .redirect-ico { display: grid; place-items: center; margin: 0 auto 18px; width: 60px; height: 60px; border-radius: 17px; font-size: 24px; color: #fff; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 65%, #000 12%)); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 35%, transparent); } .redirect-card h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .redirect-sub { color: var(--text-soft); font-size: 14px; margin-top: 8px; min-height: 20px; } .redirect-manual { margin-top: 20px; animation: cardIn .35s var(--ease) both; } .redirect-hint { color: var(--text-mute); font-size: 12.5px; margin-top: 14px; line-height: 1.5; } .redirect-skip { display: inline-block; margin-top: 22px; color: var(--text-mute); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 404 ========================================================================== */ .error-page { display: grid; place-items: center; min-height: 100dvh; padding: 24px; } .error-box { text-align: center; } .error-code { font-size: clamp(90px, 22vw, 160px); font-weight: 900; letter-spacing: -.05em; background: linear-gradient(120deg, var(--brand), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .error-box h1 { font-size: 26px; margin: 8px 0 10px; } .error-box p { color: var(--text-soft); margin-bottom: 26px; } /* ---------- Small screens ---------- */ @media (max-width: 380px) { .links-grid { gap: 11px; } .link-card { padding: 15px 13px; } .link-icon { width: 42px; height: 42px; font-size: 18px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== Language switcher (EN / SQ) ========================================================================== */ .lp-nav-right { display: inline-flex; align-items: center; gap: 14px; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); } .lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--text-mute); transition: color .18s var(--ease), background .18s var(--ease); } .lang-opt:hover { color: var(--text); } .lang-opt.is-active { color: #fff; background: var(--brand); } /* Floating variant for the 404 / redirect pages */ .lang-switch-float { position: fixed; top: 16px; right: 16px; z-index: 50; }