/* ════════════════════════════════════════════════════════════════ Shared theme tokens for public bio templates. Driven by the editor's Theme + Effects panels via data-* on and the CSS custom properties the template emits inline. ════════════════════════════════════════════════════════════════ */ body, html { font-family: var(--bio-font, 'Inter', Arial, sans-serif); } /* The static bio path uses nl2br, so it must NOT also get pre-line — that renders every newline twice (the
plus the preserved \n) and doubles the line spacing. Only the typewriter path, which writes a raw text node, needs pre-line; about_card adds this class in that mode. */ .bio-about { white-space: normal; } .bio-about--typed { white-space: pre-line; } /* The template's header paints .bio-background; these layers sit above it. */ .bio-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #000; opacity: var(--overlay-opacity, 0.4); } .bio-texture { position: fixed; inset: 0; z-index: 0; pointer-events: none; } body[data-texture="grain"] .bio-texture { background-image: radial-gradient(rgba(255,255,255,.13) .5px, transparent .5px); background-size: 3px 3px; } body[data-texture="noise"] .bio-texture { background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 5px 5px; } body[data-texture="scanlines"] .bio-texture { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); } /* ── Surface treatment ── Templates opt in by adding .bio-surface to whichever element is their card. That differs per theme (template1 uses .profile-main-card, template2 uses #tilt-container), and padding is deliberately NOT set here so each template keeps its own spacing instead of getting a second helping. */ .bio-surface { border-radius: var(--corner-radius, 16px); transition: border-radius .3s ease, background .3s ease; } body[data-surface="glass"] .bio-surface { background: color-mix(in srgb, var(--content-color, #000) 58%, transparent); backdrop-filter: blur(var(--backdrop-blur, 12px)); -webkit-backdrop-filter: blur(var(--backdrop-blur, 12px)); border: 1px solid rgba(255,255,255,.09); } body[data-surface="frost"] .bio-surface { background: color-mix(in srgb, var(--content-color, #000) 40%, transparent); backdrop-filter: blur(calc(var(--backdrop-blur, 12px) * 1.8)) saturate(1.3); -webkit-backdrop-filter: blur(calc(var(--backdrop-blur, 12px) * 1.8)) saturate(1.3); border: 1px solid rgba(255,255,255,.16); } body[data-surface="metal"] .bio-surface { background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 45%, rgba(255,255,255,.08)), color-mix(in srgb, var(--content-color, #000) 72%, transparent); backdrop-filter: blur(var(--backdrop-blur, 12px)); -webkit-backdrop-filter: blur(var(--backdrop-blur, 12px)); border: 1px solid rgba(255,255,255,.14); } body[data-surface="solid"] .bio-surface { background: var(--content-color, #0e0d12); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.07); } body[data-surface="paper"] .bio-surface { background: var(--content-color, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 30px rgba(0,0,0,.22); } @supports not (background: color-mix(in srgb, #000 50%, transparent)) { body[data-surface="glass"] .bio-surface, body[data-surface="frost"] .bio-surface, body[data-surface="metal"] .bio-surface { background: rgba(0,0,0,.55); } } /* Glow strength follows the slider */ .profile-pic { box-shadow: 0 0 calc(10px + var(--glow-opacity, .5) * 40px) color-mix(in srgb, var(--accent-color, #fff) 70%, transparent); } @supports not (color: color-mix(in srgb, #fff 70%, transparent)) { .profile-pic { box-shadow: 0 0 24px rgba(255,255,255,.33); } } /* ── Ambient motion (all suppressed under prefers-reduced-motion) ── */ @media (prefers-reduced-motion: no-preference) { body[data-motion="pulse"] .bio-surface { animation: bioPulse 2.8s ease-in-out infinite; } body[data-motion="ember"] .profile-pic { animation: bioEmber 3.2s ease-in-out infinite; } body[data-motion="drift"] .bio-background { animation: bioDrift 24s ease-in-out infinite alternate; } body[data-motion="waves"] .bio-background { animation: bioWaves 14s ease-in-out infinite; } body[data-motion="shimmer"] .bio-surface { position: relative; overflow: hidden; } body[data-motion="shimmer"] .bio-surface::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); animation: bioShimmer 3.6s linear infinite; } body[data-motion="vhs"] .bio-texture { animation: bioVhs 5s steps(24) infinite; } body[data-motion="sparkle"] .bio-texture { background-image: radial-gradient(circle, rgba(255,255,255,.9) .9px, transparent 1.3px), radial-gradient(circle, rgba(255,255,255,.5) .6px, transparent 1px); background-size: 54px 54px, 31px 31px; animation: bioSparkle 3s ease-in-out infinite; } body[data-motion="twinkle"] .bio-texture { background-image: radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.4px); background-size: 44px 44px; animation: bioTwinkle 2.4s ease-in-out infinite; } body[data-motion="stars"] .bio-texture { background-image: radial-gradient(circle, rgba(255,255,255,.8) .9px, transparent 1.3px), radial-gradient(circle, rgba(255,255,255,.4) .6px, transparent 1px); background-size: 70px 70px, 40px 40px; animation: bioDriftUp 26s linear infinite; } body[data-motion="hearts"] .bio-texture { background-image: radial-gradient(circle at 50% 62%, var(--accent-color, #ff6ba8) 2px, transparent 2.6px); background-size: 58px 58px; opacity: .5; animation: bioDriftUp 17s linear infinite; } body[data-motion="bubbles"] .bio-texture { background-image: radial-gradient(circle, transparent 2.2px, rgba(255,255,255,.32) 2.4px, transparent 3.2px), radial-gradient(circle, transparent 1.4px, rgba(255,255,255,.22) 1.6px, transparent 2.2px); background-size: 64px 64px, 37px 37px; animation: bioDriftUp 14s linear infinite; } body[data-motion="petals"] .bio-texture { background-image: radial-gradient(ellipse 3px 1.6px at 50% 50%, var(--accent-color, #f6a5c0) 0%, transparent 70%); background-size: 52px 52px; opacity: .55; animation: bioPetals 19s linear infinite; } } @keyframes bioPulse { 0%, 100% { box-shadow: 0 0 18px rgba(255,255,255,.14); } 50% { box-shadow: 0 0 46px color-mix(in srgb, var(--accent-color,#fff) 55%, transparent); } } @keyframes bioEmber { 0%, 100% { box-shadow: 0 0 14px rgba(255,255,255,.2); } 50% { box-shadow: 0 0 34px var(--accent-color, #fff); } } @keyframes bioDrift { from { transform: scale(1.06) translate(-1%, -1%); } to { transform: scale(1.06) translate(1%, 1%); } } @keyframes bioWaves { 0%, 100% { filter: brightness(.68) grayscale(.15) hue-rotate(0deg); } 50% { filter: brightness(.68) grayscale(.15) hue-rotate(16deg); } } @keyframes bioShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes bioVhs { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .72; transform: translateY(1px); } } @keyframes bioSparkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes bioTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } } @keyframes bioDriftUp { from { background-position: 0 0, 0 0; } to { background-position: 0 -560px, 0 -420px; } } @keyframes bioPetals { from { background-position: 0 0; } to { background-position: 120px -600px; } } /* ── Entry gate ── */ body.is-gated { overflow: hidden; } .entry-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--theme-color, #0b0b0f); cursor: pointer; transition: opacity .55s ease, visibility .55s ease; } .entry-gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; } .entry-gate__button { font-family: var(--bio-font, 'Inter', sans-serif); font-size: 1.1em; font-weight: 700; letter-spacing: .16em; text-transform: lowercase; color: var(--text-color, #fff); background: transparent; border: 0; padding: 14px 26px; cursor: pointer; animation: gatePulse 2.4s ease-in-out infinite; } @keyframes gatePulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .entry-gate__button { animation: none; opacity: 1; } }