/* * Template style presets. * * A template stores a preset name in its settings; the public page puts it on as `sp-` * and everything below restyles the ordinary bio markup — cover, avatar, name, bio and link blocks. * * Why here and not per-page custom CSS: custom CSS is a paid-plan feature, so a template that relied * on it would collapse to a flat page for free users. This ships with the theme, so every plan gets * the full design, and improving a preset improves every page using it. * * Rules of the house: * - scope everything to body.sp-*, so a preset costs nothing on pages that don't use it * - decoration goes on pseudo-elements; never require markup that the page may not have * - respect prefers-reduced-motion at the bottom */ /* ============================================================ shared scaffolding ============ */ body[class*="sp-"] { position: relative; } body[class*="sp-"] .biolink_cover_picture { position: relative; overflow: hidden; } /* The link rows: presets restyle the anchor, which is the actual clickable card. */ body[class*="sp-"] .link-block > a, body[class*="sp-"] .link-block .d-flex.align-items-center { transition: transform .18s cubic-bezier(.2,.9,.3,1.5), box-shadow .18s ease, background-color .18s ease, border-color .18s ease; } /* ------------------------------------------------------------ life, shared by every preset -- A preset used to only recolour the page. These rules are what make it feel built rather than listed: the header and each row arrive in sequence, rows have real presence under the finger, and the arrow leans toward where it is taking you. */ body[class*="sp-"] .profile-pic-wrapper, body[class*="sp-"] .biolink_account_name, body[class*="sp-"] .biolink_bio { animation: sp-enter .55s cubic-bezier(.2,.9,.3,1.15) both; } body[class*="sp-"] .biolink_account_name { animation-delay: .06s } body[class*="sp-"] .biolink_bio { animation-delay: .12s } body[class*="sp-"] .link-block { animation: sp-enter .5s cubic-bezier(.2,.9,.3,1.15) both; } body[class*="sp-"] .link-block:nth-of-type(1) { animation-delay: .16s } body[class*="sp-"] .link-block:nth-of-type(2) { animation-delay: .21s } body[class*="sp-"] .link-block:nth-of-type(3) { animation-delay: .26s } body[class*="sp-"] .link-block:nth-of-type(4) { animation-delay: .31s } body[class*="sp-"] .link-block:nth-of-type(5) { animation-delay: .36s } body[class*="sp-"] .link-block:nth-of-type(6) { animation-delay: .41s } body[class*="sp-"] .link-block:nth-of-type(7) { animation-delay: .46s } body[class*="sp-"] .link-block:nth-of-type(n+8) { animation-delay: .5s } /* Rows read as objects: taller, weightier type, and something to press. */ body[class*="sp-"] .link-block > a { padding: .95rem 1rem !important; font-weight: 600; letter-spacing: -.01em; } body[class*="sp-"] .link-block > a .title { font-size: 1rem; line-height: 1.25; } body[class*="sp-"] .link-block > a:active { transform: scale(.985); } /* The arrow moves toward the destination on hover. */ body[class*="sp-"] .link-block > a .fa-arrow-right { transition: transform .22s cubic-bezier(.2,.9,.3,1.6); opacity: .55; } body[class*="sp-"] .link-block > a:hover .fa-arrow-right { transform: translateX(4px); opacity: 1; } /* The name gets room to be the loudest thing on the page. */ body[class*="sp-"] .biolink_account_name { font-size: clamp(1.5rem, 6vw, 2rem) !important; letter-spacing: -.035em; line-height: 1.05; } body[class*="sp-"] .biolink_bio { font-size: .95rem; opacity: .82; } @keyframes sp-enter { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } /* ------------------------------------------------------------ every block, not just links ----- A preset only ever styled .link-block, so a page mixing in an image, socials, a heading or a sign-up box fell back to stock styling in the middle of the design — and images are the most used block on the platform. These cover the rest. The shared wrapper .infinite_blok carries everything that is not a link, image or group. */ /* headings and paragraphs take the page's own text colour */ body[class*="sp-"] .infinite_blok h1, body[class*="sp-"] .infinite_blok h2, body[class*="sp-"] .infinite_blok h3, body[class*="sp-"] .infinite_blok h4, body[class*="sp-"] .biolink-paragraph, body[class*="sp-"] .infinite_blok p { color: inherit; } body[class*="sp-"] .infinite_blok { color: var(--sp-ink, inherit); } /* images: same corner treatment and lift as the links beside them */ body[class*="sp-"] .image-block img, body[class*="sp-"] .image-block picture { border-radius: 18px; display: block; } body[class*="sp-"] .image-block .aspect-ratio-box, body[class*="sp-"] .image-block a { border-radius: 18px; overflow: hidden; position: relative; display: block; transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s ease; } body[class*="sp-"] .image-block a:hover { transform: translateY(-3px); } body[class*="sp-"] .image-block .image_text { font-weight: 650; letter-spacing: -.01em; padding: .5rem .65rem; } /* grouped links inherit the same card treatment */ body[class*="sp-"] .group-block > a, body[class*="sp-"] .group-block .link_block { border-radius: 16px; transition: transform .18s cubic-bezier(.2,.9,.3,1.5), box-shadow .18s ease; } body[class*="sp-"] .group-block > a:hover { transform: translateY(-2px); } /* social icons pick up the page's colour instead of staying stock */ body[class*="sp-"] .social-icon, body[class*="sp-"] .infinite_blok .fa-fw { transition: transform .18s cubic-bezier(.2,.9,.3,1.6), opacity .18s ease; } body[class*="sp-"] .social-icon:hover { transform: translateY(-3px) scale(1.1); } /* collectors and embeds: rounded to match, and their button follows the page's buttons */ body[class*="sp-"] .infinite_blok input[type="text"], body[class*="sp-"] .infinite_blok input[type="email"], body[class*="sp-"] .infinite_blok input[type="tel"], body[class*="sp-"] .infinite_blok input[type="search"] { border-radius: 14px; border: 1px solid rgba(127,127,127,.35); background: rgba(255,255,255,.10); color: inherit; padding: .8rem 1rem; } body[class*="sp-"] .infinite_blok input::placeholder { color: currentColor; opacity: .55; } body[class*="sp-"] .infinite_blok .btn-primary { border-radius: 14px; border: 0; font-weight: 650; } body[class*="sp-"] iframe { border-radius: 18px; } /* ---- dark presets: readable inputs and icons on a dark ground ---- */ body.sp-space .infinite_blok, body.sp-smartdark .infinite_blok, body.sp-spotlight .infinite_blok, body.sp-liquid .infinite_blok, body.sp-cyber .infinite_blok, body.sp-ember .infinite_blok, body.sp-chrome .infinite_blok, body.sp-prism .infinite_blok, body.sp-glass .infinite_blok, body.sp-neon .infinite_blok, body.sp-holo .infinite_blok, body.sp-wave .infinite_blok, body.sp-typeset .infinite_blok, body.sp-orbit .infinite_blok, body.sp-lava .infinite_blok, body.sp-aurora .infinite_blok, body.sp-sunset .infinite_blok { color: rgba(255,255,255,.92); } /* ---- light presets ---- */ body.sp-shopfront .infinite_blok, body.sp-kinetic .infinite_blok, body.sp-cassette .infinite_blok, body.sp-receipt .infinite_blok, body.sp-brutalist .infinite_blok, body.sp-editorial .infinite_blok, body.sp-mono .infinite_blok, body.sp-pastel .infinite_blok { color: rgba(20,19,15,.88); } body.sp-shopfront .infinite_blok input, body.sp-kinetic .infinite_blok input, body.sp-cassette .infinite_blok input, body.sp-receipt .infinite_blok input, body.sp-brutalist .infinite_blok input, body.sp-editorial .infinite_blok input, body.sp-mono .infinite_blok input, body.sp-pastel .infinite_blok input { background: rgba(255,255,255,.85); border-color: rgba(20,19,15,.20); } /* square corners where the design calls for them */ body.sp-brutalist .image-block img, body.sp-brutalist .image-block a, body.sp-brutalist .infinite_blok input, body.sp-brutalist iframe, body.sp-typeset .image-block img, body.sp-typeset .image-block a, body.sp-typeset .infinite_blok input, body.sp-typeset iframe, body.sp-receipt .image-block img, body.sp-receipt .image-block a { border-radius: 0 !important; } body.sp-brutalist .image-block a { border: 2.5px solid #111; box-shadow: 5px 6px 0 #111; } /* ------------------------------------------------------------ the itsbio credit -------------- The credit sits in a pill whose link keeps the browser's default link colour, so on a dark page it disappears — dark text on a dark background. Every preset page needs it legible, since it is how people find out what built the page. Dark presets get light text on a light pane; the light presets below flip it. */ body[class*="sp-"] #branding > div { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: rgba(255,255,255,.92) !important; border-radius: 99px !important; padding: .55rem 1rem !important; transition: background .2s ease, border-color .2s ease; } body[class*="sp-"] #branding > div:hover { background: rgba(255,255,255,.16) !important; } body[class*="sp-"] #branding a, body[class*="sp-"] #branding a:hover { color: inherit !important; text-decoration: none !important; opacity: 1; } body[class*="sp-"] #branding b, body[class*="sp-"] #branding strong { color: inherit !important; } /* presets on a light ground need the opposite treatment */ body.sp-shopfront #branding > div, body.sp-kinetic #branding > div, body.sp-cassette #branding > div, body.sp-receipt #branding > div, body.sp-brutalist #branding > div, body.sp-editorial #branding > div, body.sp-mono #branding > div, body.sp-pastel #branding > div { background: rgba(20,19,15,.07) !important; border-color: rgba(20,19,15,.14); color: rgba(20,19,15,.78) !important; } body.sp-shopfront #branding > div:hover, body.sp-kinetic #branding > div:hover, body.sp-cassette #branding > div:hover, body.sp-receipt #branding > div:hover, body.sp-brutalist #branding > div:hover, body.sp-editorial #branding > div:hover, body.sp-mono #branding > div:hover, body.sp-pastel #branding > div:hover { background: rgba(20,19,15,.12) !important; } /* ============================================================ 1. SPACE ====================== */ body.sp-space { background: radial-gradient(120% 90% at 50% 0%, #1b2456 0%, #0a0e24 45%, #05070f 100%) !important; } /* nebula + stars, one layer each */ body.sp-space::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(28% 24% at 26% 18%, rgba(109,40,217,.55), transparent 65%), radial-gradient(26% 22% at 76% 34%, rgba(43,43,245,.5), transparent 65%), radial-gradient(24% 20% at 48% 72%, rgba(192,38,211,.4), transparent 68%); filter: blur(40px); animation: sp-drift 16s ease-in-out infinite alternate; } body.sp-space::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 62% 12%, #fff, transparent), radial-gradient(1.6px 1.6px at 34% 46%, #fff, transparent), radial-gradient(1px 1px at 82% 38%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 72%, #fff, transparent), radial-gradient(1.4px 1.4px at 70% 84%, #fff, transparent), radial-gradient(1px 1px at 90% 62%, #fff, transparent), radial-gradient(1.2px 1.2px at 46% 90%, #fff, transparent); animation: sp-twinkle 4s ease-in-out infinite; } /* Falling stars, across the whole page. These used to hang off the cover strip at the top, which is only ~120px tall, so they fell out of sight almost immediately. They now live on a fixed, full-height layer and cross the viewport. */ body.sp-space .link-body::before, body.sp-space .link-body::after { content: ''; position: fixed; z-index: 1; pointer-events: none; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 12px 3px rgba(190,220,255,.85); } /* the streak trailing behind each head */ body.sp-space .link-body::before { top: -6%; left: 18%; background: linear-gradient(215deg, rgba(255,255,255,.95), rgba(255,255,255,0)); width: 180px; height: 2px; border-radius: 99px; transform-origin: right center; filter: drop-shadow(0 0 6px rgba(170,200,255,.9)); animation: sp-fall 5.5s linear infinite; } body.sp-space .link-body::after { top: -14%; left: 64%; background: linear-gradient(215deg, rgba(255,255,255,.9), rgba(255,255,255,0)); width: 150px; height: 2px; border-radius: 99px; transform-origin: right center; filter: drop-shadow(0 0 6px rgba(170,200,255,.85)); animation: sp-fall 7s linear 2.4s infinite; } body.sp-space .biolink_cover_picture { background: transparent !important; min-height: 120px; } body.sp-space .profile-pic-wrapper img { box-shadow: 0 0 34px rgba(124,58,237,.8); animation: sp-bob 6s ease-in-out infinite; } body.sp-space .biolink_account_name { color: #fff !important; text-shadow: 0 2px 18px rgba(160,190,255,.6); } body.sp-space .biolink_bio { color: #c3cdf5 !important; } body.sp-space .link-block > a { background: rgba(255,255,255,.07) !important; color: #e8ecff !important; border: 1px solid rgba(190,210,255,.22) !important; border-radius: 99px !important; backdrop-filter: blur(10px); } body.sp-space .link-block > a:hover { background: rgba(255,255,255,.14) !important; transform: translateY(-2px); box-shadow: 0 0 22px rgba(140,170,255,.45); } /* ============================================================ 2. SMART DARK ================= */ body.sp-smartdark { background: #0d0d0d !important; } body.sp-smartdark .biolink_cover_picture { display: none !important; } body.sp-smartdark .biolink_account_name { color: #fff !important; letter-spacing: -.03em; } body.sp-smartdark .biolink_bio { color: #a3a3a3 !important; } body.sp-smartdark .link-block > a { background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #232323 !important; border-radius: 0 !important; padding-left: .75rem !important; } body.sp-smartdark .link-block > a:hover { background: #151515 !important; padding-left: 1.15rem !important; } /* the first row is the one you want pushed */ body.sp-smartdark .link-block:first-of-type > a { background: #cbff3c !important; color: #14130f !important; border-radius: 12px !important; border-bottom: 0 !important; } body.sp-smartdark .link-block:first-of-type > a:hover { background: #d8ff63 !important; } /* ============================================================ 3. SHOPFRONT ================== */ body.sp-shopfront { background: #fbfaf6 !important; } body.sp-shopfront .biolink_cover_picture { background: linear-gradient(120deg, #2b2bf5, #6d28d9) !important; min-height: 130px; } body.sp-shopfront .biolink_cover_picture::before { content: ''; position: absolute; inset: -25%; filter: blur(26px); background: radial-gradient(36% 40% at 30% 34%, rgba(203,255,60,.75), transparent 62%), radial-gradient(38% 42% at 74% 46%, rgba(255,93,115,.6), transparent 64%); animation: sp-drift 12s ease-in-out infinite alternate; } body.sp-shopfront .biolink_account_name { color: #14130f !important; font-weight: 800; } body.sp-shopfront .link-block > a { background: #fff !important; color: #14130f !important; border: 2px solid #14130f !important; border-radius: 13px !important; } body.sp-shopfront .link-block > a:hover { transform: translate(-2px,-3px); box-shadow: 4px 5px 0 #14130f; } body.sp-shopfront .link-block:first-of-type > a { background: #cbff3c !important; } /* ============================================================ 4. KINETIC ==================== */ body.sp-kinetic { background: #cbff3c !important; overflow-x: hidden; } body.sp-kinetic::before, body.sp-kinetic::after { content: 'NEW DROP FRIDAY ★ NEW DROP FRIDAY ★ NEW DROP FRIDAY ★ NEW DROP FRIDAY ★ '; position: fixed; left: -20%; width: 140%; z-index: 0; pointer-events: none; font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 20px; white-space: nowrap; background: #14130f; color: #cbff3c; padding: 5px 0; animation: sp-march 14s linear infinite; } body.sp-kinetic::before { top: 12%; transform: rotate(-4deg); } body.sp-kinetic::after { bottom: 8%; transform: rotate(3deg); background: #fff; color: #14130f; border-top: 2px solid #14130f; border-bottom: 2px solid #14130f; animation-duration: 19s; animation-direction: reverse; } body.sp-kinetic .biolink_cover_picture { display: none !important; } body.sp-kinetic .biolink_account_name { color: #14130f !important; font-weight: 800; } body.sp-kinetic .link-block > a { background: #fff !important; color: #14130f !important; border: 2px solid #14130f !important; border-radius: 99px !important; font-weight: 700; } body.sp-kinetic .link-block > a:hover { transform: translate(-2px,-3px); box-shadow: 4px 5px 0 #14130f; } body.sp-kinetic .link-block:first-of-type > a { background: #14130f !important; color: #cbff3c !important; } /* ============================================================ 5. AURORA ===================== */ body.sp-aurora { background: linear-gradient(180deg, #04121f 0%, #062033 55%, #0b3247 100%) !important; } body.sp-aurora::before { content: ''; position: fixed; left: -30%; right: -30%; top: 0; height: 45vh; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, #34d399, #22d3ee, #a78bfa, transparent); filter: blur(34px); opacity: .7; animation: sp-wave 13s ease-in-out infinite; } body.sp-aurora::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.3px 1.3px at 16% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 68% 8%, #fff, transparent), radial-gradient(1.3px 1.3px at 42% 22%, #fff, transparent), radial-gradient(1.3px 1.3px at 86% 18%, #fff, transparent); animation: sp-twinkle 4.4s ease-in-out infinite; } body.sp-aurora .biolink_cover_picture { background: transparent !important; min-height: 110px; } body.sp-aurora .biolink_account_name { color: #eafff8 !important; } body.sp-aurora .biolink_bio { color: #9fd8cc !important; } body.sp-aurora .link-block > a { background: rgba(255,255,255,.07) !important; color: #d8fff4 !important; border: 1px solid rgba(126,242,208,.25) !important; border-radius: 16px !important; backdrop-filter: blur(14px); } body.sp-aurora .link-block > a:hover { transform: translateY(-3px); background: rgba(255,255,255,.14) !important; } /* ============================================================ 6. SPOTLIGHT ================== */ body.sp-spotlight { background: #0b0b0b !important; } body.sp-spotlight::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; } body.sp-spotlight::after { content: ''; position: fixed; top: -30%; left: 50%; width: 150%; height: 120%; z-index: 0; pointer-events: none; transform: translateX(-50%); background: conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(255,255,255,.12) 18deg, transparent 40deg); animation: sp-sweep 8s ease-in-out infinite alternate; } body.sp-spotlight .biolink_cover_picture { display: none !important; } body.sp-spotlight .biolink_account_name { color: #fff !important; } body.sp-spotlight .biolink_bio { color: #8f8f8f !important; } body.sp-spotlight .link-block > a { background: #111 !important; color: #fff !important; border: 1.5px solid #2a2a2a !important; border-radius: 14px !important; } body.sp-spotlight .link-block > a:hover { border-color: #cbff3c !important; transform: translateX(4px); } /* ============================================================ 7. CASSETTE =================== */ body.sp-cassette { background: #d9cdb8 !important; } body.sp-cassette .biolink_cover_picture { background: linear-gradient(180deg, #2b2721, #15120f) !important; min-height: 110px; border-bottom: 3px solid #0e0c0a; } /* two turning reels */ body.sp-cassette .biolink_cover_picture::before, body.sp-cassette .biolink_cover_picture::after { content: ''; position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border: 4px solid #c9bfa8; border-radius: 50%; background: #1d1a16; box-shadow: inset 0 0 0 6px #1d1a16, inset 0 0 0 9px #c9bfa8; animation: sp-spin 3.4s linear infinite; } body.sp-cassette .biolink_cover_picture::before { left: 32%; } body.sp-cassette .biolink_cover_picture::after { right: 32%; animation-duration: 4.6s; } body.sp-cassette .biolink_account_name { color: #1d1a16 !important; font-weight: 800; } body.sp-cassette .biolink_bio { color: #5a5145 !important; } body.sp-cassette .link-block > a { background: #c9bfa8 !important; color: #1d1a16 !important; border: 2px solid #0e0c0a !important; border-radius: 6px !important; box-shadow: 0 3px 0 #0e0c0a; font-weight: 700; } body.sp-cassette .link-block > a:hover { transform: translateY(2px); box-shadow: 0 1px 0 #0e0c0a; } body.sp-cassette .link-block:first-of-type > a { background: #cbff3c !important; } /* ============================================================ 8. RECEIPT ==================== */ body.sp-receipt { background: #e8e6df !important; } body.sp-receipt .biolink_cover_picture { display: none !important; } body.sp-receipt .biolink_account_name, body.sp-receipt .biolink_bio, body.sp-receipt .link-block > a { font-family: ui-monospace, Menlo, Consolas, monospace !important; } body.sp-receipt .biolink_account_name { color: #14130f !important; letter-spacing: -.01em; } body.sp-receipt .biolink_bio { color: #8a8578 !important; } body.sp-receipt .link-block > a { background: #fffdf7 !important; color: #14130f !important; border: 0 !important; border-bottom: 1.5px dashed #c9c4b5 !important; border-radius: 0 !important; font-weight: 700; } body.sp-receipt .link-block > a:hover { padding-left: 1.15rem !important; background: #fff !important; } /* ============================================================ 9. LIQUID ===================== */ body.sp-liquid { background: #0d0b1a !important; } body.sp-liquid::before, body.sp-liquid::after { content: ''; position: fixed; z-index: 0; pointer-events: none; filter: blur(30px); opacity: .85; background: linear-gradient(140deg, #ff5d73, #c026d3, #2b2bf5, #22d3ee); background-size: 300% 300%; animation: sp-morph 11s ease-in-out infinite, sp-shift 9s ease infinite; } body.sp-liquid::before { width: 62vw; height: 62vw; top: 4%; left: -18%; } body.sp-liquid::after { width: 50vw; height: 50vw; bottom: 4%; right: -16%; animation-direction: reverse; } body.sp-liquid .biolink_cover_picture { background: transparent !important; min-height: 90px; } body.sp-liquid .biolink_account_name { color: #fff !important; } body.sp-liquid .biolink_bio { color: #d6d2ea !important; } body.sp-liquid .link-block > a { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 18px !important; backdrop-filter: blur(14px); } body.sp-liquid .link-block > a:hover { transform: translateY(-3px); background: rgba(255,255,255,.18) !important; } /* ============================================================ keyframes ===================== */ @keyframes sp-drift { from { transform: translate(-4%,-3%) } to { transform: translate(4%,3%) } } @keyframes sp-twinkle { 0%,100% { opacity: .4 } 50% { opacity: 1 } } @keyframes sp-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } } @keyframes sp-meteor { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(34deg) } 8% { opacity: 1 } 60% { opacity: 1 } 100% { opacity: 0; transform: translate3d(320px,320px,0) rotate(34deg) } } /* crosses the whole viewport rather than a short hop */ @keyframes sp-fall { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(34deg) } 6% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0; transform: translate3d(70vw, 110vh, 0) rotate(34deg) } } @keyframes sp-march { to { transform: translateX(-50%) rotate(-4deg) } } @keyframes sp-wave { 0%,100% { transform: translateY(0) skewY(-3deg) } 50% { transform: translateY(26px) skewY(4deg) } } @keyframes sp-sweep { from { transform: translateX(-50%) rotate(-8deg) } to { transform: translateX(-50%) rotate(8deg) } } @keyframes sp-spin { to { transform: rotate(360deg) } } @keyframes sp-shift { 0%,100% { background-position: 0 50% } 50% { background-position: 100% 50% } } @keyframes sp-morph { 0%,100% { border-radius: 58% 42% 40% 60% / 54% 46% 54% 46% } 33% { border-radius: 38% 62% 63% 37% / 41% 59% 41% 59% } 66% { border-radius: 62% 38% 35% 65% / 60% 40% 60% 40% } } /* Anyone who asked their device to calm down gets the design without the movement. */ @media (prefers-reduced-motion: reduce) { body[class*="sp-"], body[class*="sp-"]::before, body[class*="sp-"]::after, body[class*="sp-"] .biolink_cover_picture::before, body[class*="sp-"] .biolink_cover_picture::after, body[class*="sp-"] .profile-pic-wrapper img, body[class*="sp-"] .profile-pic-wrapper, body[class*="sp-"] .biolink_account_name, body[class*="sp-"] .biolink_bio, body[class*="sp-"] .link-block { animation: none !important; } } /* ═══════════════════════════════════ more looks ═══════════════════════════════════ Each preset owns a whole page. Added so the catalogue stops sharing nine designs between thirty templates. */ /* ---- 10. BRUTALIST: paper, heavy rules, offset shadows ---- */ body.sp-brutalist { background: #F2F2E9 !important; } body.sp-brutalist::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(20,19,15,.07) 1px, transparent 1px); background-size: 100% 30px; } body.sp-brutalist .biolink_cover_picture { background: #2B2BF5 !important; min-height: 96px; border-bottom: 3px solid #111; } body.sp-brutalist .profile-pic-wrapper img { border-radius: 0 !important; border: 3px solid #111 !important; } body.sp-brutalist .biolink_account_name { color: #111 !important; text-transform: uppercase; letter-spacing: .01em !important; } body.sp-brutalist .biolink_bio { color: #111 !important; text-transform: uppercase; font-size: .8rem !important; letter-spacing: .06em; } body.sp-brutalist .link-block > a { background: #F2F2E9 !important; color: #111 !important; border: 2.5px solid #111 !important; border-radius: 0 !important; box-shadow: 5px 6px 0 #111; } body.sp-brutalist .link-block > a:hover { transform: translate(-2px,-3px); box-shadow: 8px 9px 0 #111; } /* ---- 11. EDITORIAL: paper, serif, hairlines ---- */ body.sp-editorial { background: #F7F3EC !important; } body.sp-editorial .biolink_cover_picture { background: #2B2118 !important; min-height: 84px; } body.sp-editorial .biolink_account_name { color: #2B2118 !important; font-family: Georgia, 'Times New Roman', serif !important; } body.sp-editorial .biolink_bio { color: #6B5B4B !important; font-family: Georgia, serif !important; font-style: italic; } body.sp-editorial .link-block > a { background: transparent !important; color: #2B2118 !important; border: 0 !important; border-bottom: 1px solid #D8CFC0 !important; border-radius: 0 !important; font-family: Georgia, serif !important; font-weight: 400 !important; } body.sp-editorial .link-block > a:hover { padding-left: 1.5rem !important; background: rgba(255,255,255,.6) !important; } /* ---- 12. SUNSET: slatted sun, grid horizon ---- */ body.sp-sunset { background: linear-gradient(180deg, #2B0F4D 0%, #7B1F6A 42%, #FF6B6B 74%, #FFB457 100%) !important; } body.sp-sunset::before { content: ''; position: fixed; top: 8%; left: 50%; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #FFE36E, #FF5D73); box-shadow: 0 0 80px 18px rgba(255,120,120,.5); -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px); mask-image: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px); } body.sp-sunset::after { content: ''; position: fixed; bottom: 0; left: -50%; right: -50%; height: 38vh; z-index: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,93,115,.5) 0 1px, transparent 1px 46px), repeating-linear-gradient(180deg, rgba(255,93,115,.5) 0 1px, transparent 1px 34px); transform: perspective(240px) rotateX(68deg); transform-origin: bottom; animation: sp-road 2.6s linear infinite; } body.sp-sunset .biolink_cover_picture { background: transparent !important; min-height: 150px; } body.sp-sunset .biolink_account_name { color: #fff !important; text-shadow: 0 2px 16px rgba(43,15,77,.75); } body.sp-sunset .biolink_bio { color: #FFE3EF !important; } body.sp-sunset .link-block > a { background: rgba(43,15,77,.55) !important; color: #FFE36E !important; border: 1px solid rgba(255,227,110,.55) !important; border-radius: 99px !important; backdrop-filter: blur(8px); } body.sp-sunset .link-block:first-of-type > a { background: #FFE36E !important; color: #2B0F4D !important; border-color: #FFE36E !important; } /* ---- 13. CYBER: neon skyline, rain ---- */ body.sp-cyber { background: linear-gradient(180deg, #05060F, #0B0F24 60%, #10132B) !important; } body.sp-cyber::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(104deg, rgba(180,220,255,.14) 0 1px, transparent 1px 11px); animation: sp-rain .6s linear infinite; } body.sp-cyber::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, #22D3EE, #F472B6, transparent); animation: sp-slide 3.6s linear infinite; } body.sp-cyber .biolink_cover_picture { background: transparent !important; min-height: 110px; } body.sp-cyber .biolink_account_name { color: #E6F9FF !important; text-shadow: 0 0 16px rgba(34,211,238,.65); } body.sp-cyber .biolink_bio { color: #9FB6C9 !important; } body.sp-cyber .link-block > a { background: rgba(34,211,238,.07) !important; color: #C9F6FF !important; border: 1px solid rgba(34,211,238,.35) !important; border-radius: 6px !important; } body.sp-cyber .link-block > a:hover { box-shadow: 0 0 20px rgba(34,211,238,.5); border-color: #22D3EE !important; } /* ---- 14. EMBER: sparks rising from a hearth ---- */ body.sp-ember { background: radial-gradient(110% 80% at 50% 105%, #7C2D12 0%, #2A1006 45%, #140803 100%) !important; } body.sp-ember::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 100%, rgba(255,120,40,.35), transparent 70%); animation: sp-breathe 3.4s ease-in-out infinite; } body.sp-ember::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 18% 90%, #FFB457, transparent), radial-gradient(2px 2px at 38% 96%, #FF8C3C, transparent), radial-gradient(2px 2px at 62% 92%, #FFB457, transparent), radial-gradient(2px 2px at 82% 97%, #FF8C3C, transparent); animation: sp-rise 6s linear infinite; } body.sp-ember .biolink_cover_picture { background: transparent !important; min-height: 100px; } body.sp-ember .biolink_account_name { color: #FFE9D6 !important; } body.sp-ember .biolink_bio { color: #D8A688 !important; } body.sp-ember .link-block > a { background: rgba(255,180,87,.08) !important; color: #FFDCB8 !important; border: 1px solid rgba(255,180,87,.3) !important; border-radius: 99px !important; } body.sp-ember .link-block > a:hover { background: rgba(255,180,87,.16) !important; box-shadow: 0 0 22px rgba(255,140,60,.35); } /* ---- 15. MONO: quiet, typographic ---- */ body.sp-mono { background: #FFFFFF !important; } body.sp-mono .biolink_cover_picture { display: none !important; } body.sp-mono .biolink_account_name { color: #111 !important; font-size: clamp(1.8rem,7vw,2.4rem) !important; } body.sp-mono .biolink_bio { color: #6b7280 !important; } body.sp-mono .link-block > a { background: transparent !important; color: #111 !important; border: 0 !important; border-bottom: 1.5px solid #ECECEC !important; border-radius: 0 !important; } body.sp-mono .link-block > a:hover { background: #FAFAFA !important; padding-left: 1.4rem !important; } /* ---- 16. PASTEL: soft, rounded, friendly ---- */ body.sp-pastel { background: linear-gradient(170deg, #FFF1F2 0%, #EEF2FF 55%, #ECFEFF 100%) !important; } body.sp-pastel::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(50px); opacity: .7; background: radial-gradient(24% 22% at 22% 22%, #FBCFE8, transparent 65%), radial-gradient(24% 22% at 78% 34%, #C7D2FE, transparent 65%), radial-gradient(22% 20% at 50% 82%, #A7F3D0, transparent 68%); animation: sp-drift 15s ease-in-out infinite alternate; } body.sp-pastel .biolink_cover_picture { background: transparent !important; min-height: 90px; } body.sp-pastel .biolink_account_name { color: #3F3D56 !important; } body.sp-pastel .biolink_bio { color: #6B7280 !important; } body.sp-pastel .link-block > a { background: rgba(255,255,255,.75) !important; color: #3F3D56 !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 20px !important; box-shadow: 0 6px 20px rgba(63,61,86,.09); backdrop-filter: blur(8px); } body.sp-pastel .link-block > a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(63,61,86,.16); } /* ---- 17. CHROME: liquid metal ---- */ body.sp-chrome { background: #0C0C0E !important; } body.sp-chrome::before { content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none; filter: blur(34px); opacity: .8; background: conic-gradient(from 0deg, #C0C6D4, #6B7280, #E5E7EB, #4B5563, #C0C6D4); animation: sp-spin 22s linear infinite; } body.sp-chrome .biolink_cover_picture { background: transparent !important; min-height: 100px; } body.sp-chrome .biolink_account_name { color: transparent !important; background: linear-gradient(180deg, #fff 20%, #9CA3AF 60%, #fff 95%); -webkit-background-clip: text; background-clip: text; } body.sp-chrome .biolink_bio { color: #C7CBD3 !important; } body.sp-chrome .link-block > a { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important; color: #F3F4F6 !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 14px !important; backdrop-filter: blur(12px); } body.sp-chrome .link-block > a:hover { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.1)) !important; } @keyframes sp-road { to { background-position: 0 0, 0 34px } } @keyframes sp-rain { to { background-position: -44px 100px } } @keyframes sp-slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } @keyframes sp-breathe { 0%,100% { opacity: .65 } 50% { opacity: 1 } } @keyframes sp-rise { from { transform: translateY(0); opacity: .9 } to { transform: translateY(-70vh); opacity: 0 } } /* ═══════════════════════════════════ PRISM ═══════════════════════════════════ The other presets only repaint a single column of identical buttons. This one rebuilds the page: a bento grid of unequal tiles, glass with a lit edge, cards that lean toward the pointer, light that follows it, and blocks that arrive as you reach them. Same markup — the layout is done entirely in CSS. */ body.sp-prism { background: #07070C !important; } /* the room: a deep mesh, a spotlight that follows the pointer, and film grain */ body.sp-prism::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(30% 26% at 22% 18%, rgba(139,92,246,.55), transparent 64%), radial-gradient(28% 24% at 78% 30%, rgba(34,211,238,.42), transparent 66%), radial-gradient(26% 22% at 46% 84%, rgba(244,114,182,.40), transparent 68%); filter: blur(60px); animation: sp-drift 18s ease-in-out infinite alternate; } body.sp-prism::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(38% 30% at var(--px, 50%) var(--py, 30%), rgba(190,210,255,.16), transparent 70%); transition: background-position .2s ease; } /* header: display type cut out of light, floating over the mesh */ body.sp-prism .biolink_cover_picture { background: transparent !important; min-height: 92px; } body.sp-prism .profile-pic-wrapper img { border: 2px solid rgba(255,255,255,.22) !important; box-shadow: 0 18px 48px -12px rgba(139,92,246,.85), 0 0 0 6px rgba(255,255,255,.04); animation: sp-bob 7s ease-in-out infinite; } body.sp-prism .biolink_account_name { font-size: clamp(2rem, 9vw, 3.1rem) !important; letter-spacing: -.045em !important; font-weight: 800; color: transparent !important; background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55) 100%); -webkit-background-clip: text; background-clip: text; } body.sp-prism .biolink_bio { color: #A9B0D0 !important; font-size: .98rem; } /* ---- the bento grid: same blocks, unequal tiles ---- */ body.sp-prism #itsbio-blocks { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 4px; } body.sp-prism #itsbio-blocks > .link-block, body.sp-prism #itsbio-blocks > .image-block { max-width: none !important; flex: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; grid-column: span 1; } /* the rhythm: wide, pair, wide, pair … so the page never reads as a list */ body.sp-prism #itsbio-blocks > .link-block:nth-of-type(4n+1) { grid-column: span 2; } body.sp-prism #itsbio-blocks > .link-block:nth-of-type(4n) { grid-column: span 2; } body.sp-prism .link-block > a { height: 100%; display: flex !important; align-items: center; background: linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.04)) !important; color: #EEF0FF !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 20px !important; padding: 1.15rem 1.1rem !important; backdrop-filter: blur(16px); position: relative; overflow: hidden; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; box-shadow: 0 12px 30px -14px rgba(0,0,0,.9); transition: transform .12s ease-out, border-color .25s ease, box-shadow .25s ease; } /* a lit edge that follows the pointer across the card */ body.sp-prism .link-block > a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px 120px at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.20), transparent 70%); opacity: 0; transition: opacity .25s ease; } body.sp-prism .link-block > a:hover::after { opacity: 1; } body.sp-prism .link-block > a:hover { border-color: rgba(190,210,255,.45) !important; box-shadow: 0 22px 50px -18px rgba(139,92,246,.9); } body.sp-prism .link-block > a .title { font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; } /* the wide tiles get more presence */ body.sp-prism #itsbio-blocks > .link-block:nth-of-type(4n+1) > a { min-height: 104px; } body.sp-prism #itsbio-blocks > .link-block:nth-of-type(4n+1) .title { font-size: 1.25rem; } /* ---- arrive on scroll rather than all at once ---- */ body.sp-prism .sp-watch { opacity: 0; transform: translateY(22px) scale(.985); animation: none !important; } body.sp-prism .sp-watch.sp-seen { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.2,.9,.3,1), transform .55s cubic-bezier(.2,.9,.3,1.1); } @media (max-width: 420px) { body.sp-prism #itsbio-blocks { grid-template-columns: 1fr; } body.sp-prism #itsbio-blocks > .link-block { grid-column: span 1 !important; } } @media (prefers-reduced-motion: reduce) { body.sp-prism .sp-watch { opacity: 1; transform: none; } body.sp-prism .link-block > a { transform: none !important; } } /* ═══════════════════════════════════ GLASS ═══════════════════════════════════ The translucent look Apple uses: heavily blurred, saturated glass with a bright specular top edge, a soft shadowed underside, and generous squircle radii. Glass is only convincing when there is something behind it worth refracting, so the page lays down a vivid, slowly moving wallpaper first and floats everything above it. The specular highlight tracks the pointer (see presets.js). */ body.sp-glass { background: #0A0A12 !important; } /* THE WALLPAPER MUST SIT DIRECTLY BEHIND THE PANES. backdrop-filter samples whatever is painted behind the element — and the page's own background layer (.link-body, which carries the template's colour inline) sits between the body and the blocks. Painting the wallpaper on the body left the glass sampling flat dark grey, which is why it looked like grey plastic instead of glass. So the colour goes on .link-body itself. */ body.sp-glass .link-body { background: radial-gradient(38% 32% at 18% 12%, #8B5CF6 0%, transparent 60%), radial-gradient(36% 30% at 82% 20%, #2563EB 0%, transparent 62%), radial-gradient(40% 34% at 70% 72%, #EC4899 0%, transparent 60%), radial-gradient(34% 30% at 20% 82%, #06B6D4 0%, transparent 62%), radial-gradient(30% 26% at 50% 46%, #A78BFA 0%, transparent 64%), #12081F !important; background-attachment: fixed !important; } /* a little grain over the colour so the gradients do not band */ body.sp-glass::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .30; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } body.sp-glass .biolink_cover_picture { background: transparent !important; min-height: 84px; } /* the avatar sits in a glass ring */ body.sp-glass .profile-pic-wrapper img { border: 1px solid rgba(255,255,255,.45) !important; box-shadow: 0 20px 50px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 8px rgba(255,255,255,.06); } body.sp-glass .biolink_account_name { color: #fff !important; font-weight: 700; text-shadow: 0 2px 22px rgba(0,0,0,.35); } body.sp-glass .biolink_bio { color: rgba(255,255,255,.78) !important; } /* ---- the glass itself ------------------------------------------------------------------ Built in layers, the way a real pane behaves: the element — tint + the refracted backdrop ::before — the rim, which bends light harder than the face (edge lensing) ::after — the specular sheen that follows the pointer plus stacked inset shadows for a bevel with a lit top and a dark underside. */ body.sp-glass .link-block > a { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.045)) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.26) !important; border-radius: 28px !important; padding: 1.2rem 1.3rem !important; -webkit-backdrop-filter: blur(22px) saturate(230%) brightness(1.12); backdrop-filter: blur(22px) saturate(230%) brightness(1.12); /* bevel: lit along the top, shadowed underneath, with a faint inner rim all round */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.75), inset 0 -1.5px 1px rgba(0,0,0,.28), inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.18), 0 16px 40px -16px rgba(0,0,0,.8); transition: transform .34s cubic-bezier(.2,.9,.25,1.35), background .34s ease, border-color .34s ease, box-shadow .34s ease; } /* the face of the pane actually bends the backdrop */ body.sp-refracts.sp-glass .link-block > a { -webkit-backdrop-filter: url(#sp-glass-refract) blur(16px) saturate(230%) brightness(1.12); backdrop-filter: url(#sp-glass-refract) blur(16px) saturate(230%) brightness(1.12); } /* the rim bends it harder — this is what makes an edge look like thick glass rather than a border */ body.sp-refracts.sp-glass .link-block > a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; -webkit-backdrop-filter: url(#sp-glass-edge) blur(6px) saturate(180%); backdrop-filter: url(#sp-glass-edge) blur(6px) saturate(180%); /* only the outer few pixels: the middle of the pane keeps the gentler distortion */ -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 10px; } /* specular sheen, tracking the pointer, with a faint colour split at its edge */ body.sp-glass .link-block > a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(160px 100px at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.42), transparent 70%), linear-gradient(115deg, rgba(120,180,255,.16) 0%, transparent 38%, rgba(255,140,200,.14) 100%); opacity: .7; transition: opacity .34s ease; } body.sp-glass .link-block > a:hover::after { opacity: 1; } body.sp-glass .link-block > a:hover { background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.09)) !important; border-color: rgba(255,255,255,.55) !important; transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1.5px 1px rgba(0,0,0,.3), inset 1px 0 0 rgba(255,255,255,.24), inset -1px 0 0 rgba(255,255,255,.24), 0 26px 54px -18px rgba(0,0,0,.85); } /* glass compresses under a press, the way iOS controls do */ body.sp-glass .link-block > a:active { transform: scale(.97) translateY(-1px); transition-duration: .09s; } body.sp-glass .link-block > a .title { font-size: 1.02rem; font-weight: 590; letter-spacing: -.012em; } body.sp-glass .link-block > a .fa-arrow-right { opacity: .7; } /* the first row reads as the primary action, in brighter glass */ body.sp-glass .link-block:first-of-type > a { background: linear-gradient(155deg, rgba(255,255,255,.26), rgba(255,255,255,.12)) !important; border-color: rgba(255,255,255,.58) !important; } @supports not (backdrop-filter: blur(1px)) { /* Older browsers get solid, tinted panes rather than a muddy see-through mess. */ body.sp-glass .link-block > a { background: rgba(28,28,40,.82) !important; } } /* ═══════════════════════════════ MOTION SET ═══════════════════════════════ Six designs built around movement rather than colour: the background never sits still, the name does something, and the links themselves animate. */ /* ---- 20. NEON: glow that breathes, links that light up ---- */ body.sp-neon { background: #08010F !important; } body.sp-neon .link-body { background: radial-gradient(40% 34% at 20% 18%, rgba(236,72,153,.30), transparent 62%), radial-gradient(38% 32% at 80% 30%, rgba(34,211,238,.28), transparent 64%), radial-gradient(44% 36% at 50% 90%, rgba(168,85,247,.30), transparent 62%), #08010F !important; background-attachment: fixed !important; } body.sp-neon::before { content: ''; position: fixed; inset: -30%; z-index: 0; pointer-events: none; filter: blur(60px); background: conic-gradient(from 0deg, #EC4899, #A855F7, #22D3EE, #EC4899); opacity: .28; animation: sp-spin 26s linear infinite; } body.sp-neon .biolink_account_name { color: #fff !important; text-shadow: 0 0 8px rgba(236,72,153,.9), 0 0 26px rgba(168,85,247,.75), 0 0 60px rgba(34,211,238,.5); animation: sp-neon-breathe 3.4s ease-in-out infinite; } body.sp-neon .biolink_bio { color: #D9C7FF !important; } body.sp-neon .link-block > a { background: rgba(12,2,22,.62) !important; color: #FDF4FF !important; border: 1.5px solid rgba(236,72,153,.5) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(168,85,247,.18), 0 0 22px -6px rgba(236,72,153,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.sp-neon .link-block > a:hover { border-color: rgba(34,211,238,.95) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 34px -4px rgba(34,211,238,.85), inset 0 0 22px rgba(168,85,247,.28); transform: translateY(-2px); } /* ---- 21. HOLO: iridescent foil that shifts as it moves ---- */ body.sp-holo { background: #0B0B14 !important; } body.sp-holo .link-body { background: linear-gradient(135deg, #12071F, #071726 40%, #1A0A22 75%, #06131F) !important; background-attachment: fixed !important; } body.sp-holo::before { content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none; filter: blur(48px); opacity: .5; background: conic-gradient(from 90deg, #ff9ad5, #9ad5ff, #b6ffb0, #ffe89a, #ff9ad5); animation: sp-spin 30s linear infinite reverse; } body.sp-holo .biolink_account_name { color: transparent !important; background: linear-gradient(100deg, #ff9ad5, #9ad5ff, #b6ffb0, #ffe89a, #ff9ad5); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: sp-holo-shift 7s linear infinite; } body.sp-holo .biolink_bio { color: #BFC6E0 !important; } body.sp-holo .link-block > a { position: relative; overflow: hidden; background: rgba(255,255,255,.06) !important; color: #F2F5FF !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); } /* the foil sweep */ body.sp-holo .link-block > a::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255,154,213,.35) 42%, rgba(154,213,255,.35) 50%, rgba(182,255,176,.35) 58%, transparent 70%); transform: translateX(-120%); animation: sp-foil 5.5s ease-in-out infinite; } body.sp-holo .link-block > a:hover::after { animation-duration: 1.6s; } /* ---- 22. WAVE: a moving tide, links that rock ---- */ body.sp-wave { background: #041B2D !important; } body.sp-wave .link-body { background: linear-gradient(180deg, #052B44 0%, #06405F 45%, #0A5B72 100%) !important; background-attachment: fixed !important; } body.sp-wave::before { content: ''; position: fixed; left: -50%; right: -50%; bottom: -10%; height: 55vh; z-index: 0; pointer-events: none; background: radial-gradient(60% 100% at 50% 100%, rgba(125,211,252,.42), transparent 70%); animation: sp-tide 9s ease-in-out infinite; } body.sp-wave .biolink_account_name { color: #EAF8FF !important; animation: sp-sway 5s ease-in-out infinite; } body.sp-wave .biolink_bio { color: #A8D8EC !important; } body.sp-wave .link-block > a { background: rgba(255,255,255,.10) !important; color: #EAF8FF !important; border: 1px solid rgba(186,230,253,.30) !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body.sp-wave .link-block:nth-of-type(odd) > a { animation: sp-rock 6s ease-in-out infinite; } body.sp-wave .link-block:nth-of-type(even) > a { animation: sp-rock 6s ease-in-out infinite reverse; } body.sp-wave .link-block > a:hover { background: rgba(255,255,255,.20) !important; animation-play-state: paused; } /* ---- 23. TYPESET: the page writes itself ---- */ body.sp-typeset { background: #0E0E0E !important; } body.sp-typeset .link-body { background: #0E0E0E !important; } body.sp-typeset::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px); animation: sp-scan 7s linear infinite; } body.sp-typeset .biolink_account_name { color: #F5F5F5 !important; font-family: ui-monospace, Menlo, monospace !important; border-right: .1em solid #CBFF3C; white-space: nowrap; overflow: hidden; width: fit-content; margin-inline: auto; animation: sp-caret .8s step-end infinite; } body.sp-typeset .biolink_bio { color: #9A9A9A !important; font-family: ui-monospace, Menlo, monospace !important; } body.sp-typeset .link-block > a { background: transparent !important; color: #F5F5F5 !important; border: 1px solid #2A2A2A !important; border-radius: 4px !important; font-family: ui-monospace, Menlo, monospace !important; letter-spacing: -.02em; position: relative; overflow: hidden; } body.sp-typeset .link-block > a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #CBFF3C; transition: width .32s cubic-bezier(.2,.9,.3,1); z-index: -1; } body.sp-typeset .link-block > a:hover { color: #0E0E0E !important; border-color: #CBFF3C !important; } body.sp-typeset .link-block > a:hover::before { width: 100%; } /* ---- 24. ORBIT: things drift, links levitate ---- */ body.sp-orbit { background: #060A18 !important; } body.sp-orbit .link-body { background: radial-gradient(36% 30% at 24% 22%, rgba(56,189,248,.30), transparent 62%), radial-gradient(34% 28% at 78% 34%, rgba(129,140,248,.30), transparent 64%), radial-gradient(40% 32% at 50% 88%, rgba(45,212,191,.24), transparent 64%), #060A18 !important; background-attachment: fixed !important; } body.sp-orbit::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 16% 26%, rgba(186,230,253,.9), transparent), radial-gradient(2px 2px at 74% 18%, rgba(199,210,254,.9), transparent), radial-gradient(4px 4px at 42% 68%, rgba(153,246,228,.8), transparent), radial-gradient(2px 2px at 86% 74%, rgba(186,230,253,.85), transparent); animation: sp-float-slow 14s ease-in-out infinite alternate; } body.sp-orbit .biolink_account_name { color: #EAF2FF !important; animation: sp-bob 6s ease-in-out infinite; } body.sp-orbit .biolink_bio { color: #A5B4D4 !important; } body.sp-orbit .link-block > a { background: rgba(255,255,255,.08) !important; color: #EAF2FF !important; border: 1px solid rgba(186,230,253,.24) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.sp-orbit .link-block:nth-of-type(1) > a { animation: sp-levitate 5.4s ease-in-out infinite; } body.sp-orbit .link-block:nth-of-type(2) > a { animation: sp-levitate 6.2s ease-in-out .3s infinite; } body.sp-orbit .link-block:nth-of-type(3) > a { animation: sp-levitate 5.8s ease-in-out .6s infinite; } body.sp-orbit .link-block:nth-of-type(4) > a { animation: sp-levitate 6.6s ease-in-out .9s infinite; } body.sp-orbit .link-block:nth-of-type(n+5) > a { animation: sp-levitate 6s ease-in-out 1.2s infinite; } /* ---- 25. LAVA: molten, slow, hypnotic ---- */ body.sp-lava { background: #14060B !important; } body.sp-lava .link-body { background: radial-gradient(120% 90% at 50% 110%, #7F1D1D 0%, #3B0764 45%, #14060B 100%) !important; background-attachment: fixed !important; } body.sp-lava::before, body.sp-lava::after { content: ''; position: fixed; z-index: 0; pointer-events: none; filter: blur(46px); opacity: .75; background: linear-gradient(150deg, #F97316, #DB2777, #7C3AED); background-size: 260% 260%; animation: sp-morph 13s ease-in-out infinite, sp-shift 11s ease infinite; } body.sp-lava::before { width: 70vw; height: 70vw; top: -12%; left: -22%; } body.sp-lava::after { width: 58vw; height: 58vw; bottom: -10%; right: -18%; animation-direction: reverse; } body.sp-lava .biolink_account_name { color: transparent !important; background: linear-gradient(100deg, #FDBA74, #FB7185, #C084FC, #FDBA74); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: sp-holo-shift 8s linear infinite; } body.sp-lava .biolink_bio { color: #F5D0C5 !important; } body.sp-lava .link-block > a { background: rgba(20,6,11,.55) !important; color: #FFE8DE !important; border: 1px solid rgba(251,113,133,.35) !important; border-radius: 20px !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } body.sp-lava .link-block > a:hover { border-color: rgba(253,186,116,.8) !important; box-shadow: 0 0 30px -8px rgba(251,113,133,.8); } @keyframes sp-neon-breathe { 0%,100% { text-shadow: 0 0 8px rgba(236,72,153,.9), 0 0 26px rgba(168,85,247,.75), 0 0 60px rgba(34,211,238,.5) } 50% { text-shadow: 0 0 14px rgba(236,72,153,1), 0 0 40px rgba(168,85,247,.95), 0 0 84px rgba(34,211,238,.7) } } @keyframes sp-holo-shift { to { background-position: 300% 0 } } @keyframes sp-foil { 0% { transform: translateX(-120%) } 55%,100% { transform: translateX(120%) } } @keyframes sp-tide { 0%,100% { transform: translateY(0) scaleY(1) } 50% { transform: translateY(-18px) scaleY(1.12) } } @keyframes sp-sway { 0%,100% { transform: translateX(0) } 50% { transform: translateX(6px) } } @keyframes sp-rock { 0%,100% { transform: translateY(0) rotate(-.4deg) } 50% { transform: translateY(-4px) rotate(.4deg) } } @keyframes sp-scan { to { background-position: 0 40px } } @keyframes sp-caret { 50% { border-color: transparent } } @keyframes sp-float-slow { from { transform: translate(-6px,-4px) } to { transform: translate(6px,6px) } } @keyframes sp-levitate { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } } @media (prefers-reduced-motion: reduce) { body.sp-neon .biolink_account_name, body.sp-holo .biolink_account_name, body.sp-wave .biolink_account_name, body.sp-lava .biolink_account_name, body.sp-orbit .biolink_account_name, body.sp-typeset .biolink_account_name, body.sp-holo .link-block > a::after, body.sp-wave .link-block > a, body.sp-orbit .link-block > a { animation: none !important; } } /* ---- Showcase: the design owns its frame, same as it does for images and links ---- */ body[class*="sp-"] .showcase-block .showcase-body { border-radius: 18px; overflow: hidden; transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s ease; } body[class*="sp-"] .showcase-block .showcase-card:hover { transform: translateY(-2px); } body[class*="sp-"] .showcase-service { border-color: currentColor; } /* square corners where the design calls for them */ body.sp-brutalist .showcase-block .showcase-body, body.sp-typeset .showcase-block .showcase-body, body.sp-receipt .showcase-block .showcase-body { border-radius: 0; } body.sp-brutalist .showcase-block .showcase-body { border: 2.5px solid #111; box-shadow: 5px 6px 0 #111; } body.sp-brutalist .showcase-service { border-radius: 0; border-width: 2px; }