/* Social bubbles (Instagram / Facebook / Email) as true 3D glass spheres, drawn with CSS only. They used to be WebGL spheres painted behind the DOM disc, which drifted out of alignment. Now the sphere IS the disc: it can never be offset, costs no GPU frame time and works everywhere. */ .orb[data-orb]:not([data-orb="bundle"]) { --c1: #c9b8ff; /* lit side */ --c2: #8a5cff; /* body */ --c3: #2a1173; /* shadow side */ --rim: #e4dcff; /* back-light rim */ --body: radial-gradient(circle at 36% 30%, var(--c1) 0%, var(--c2) 42%, var(--c3) 100%); position: relative; perspective: 600px; } .orb[data-orb="instagram"]:not([data-orb="bundle"]) { --c1: #ffb36b; --c2: #e1306c; --c3: #4a1186; --rim: #ffc0e0; --body: radial-gradient(circle at 30% 108%, #fdf497 0%, #fdb45c 14%, #fd5949 38%, #d6249f 62%, #6b2bd6 88%, #3a1590 100%); } .orb[data-orb="facebook"]:not([data-orb="bundle"]) { --c1: #7cb8ff; --c2: #1877f2; --c3: #072f78; --rim: #b8dcff; } .orb[data-orb="email"]:not([data-orb="bundle"]) { --c1: #d5c8ff; --c2: #8a5cff; --c3: #2a1173; --rim: #e9e1ff; } /* The sphere */ .orb[data-orb]:not([data-orb="bundle"]) .orb-disc { position: relative !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; isolation: isolate; background: /* soft specular hotspot */ radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .62) 0, rgba(255, 255, 255, .18) 13%, transparent 27%), /* back-light rim on the lower right */ radial-gradient(circle at 74% 86%, color-mix(in srgb, var(--rim) 55%, transparent) 0, transparent 38%), var(--body) !important; box-shadow: inset -12px -16px 26px rgba(8, 2, 30, .55), inset 10px 12px 20px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 34px -14px color-mix(in srgb, var(--c2) 70%, transparent), 0 0 46px -6px color-mix(in srgb, var(--c2) 38%, transparent) !important; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease !important; animation: cf-orb-float 6s ease-in-out infinite !important; } /* Glossy cap reflection across the top */ .orb[data-orb]:not([data-orb="bundle"]) .orb-disc::before { content: ""; position: absolute; inset: 5% 16% 52% 16%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); filter: blur(.5px); pointer-events: none; z-index: 0; } /* Thin glass edge */ .orb[data-orb]:not([data-orb="bundle"]) .orb-disc::after { content: "" !important; position: absolute !important; inset: 0 !important; border: 0 !important; border-radius: 50% !important; background: conic-gradient(from 210deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .28) 82%, rgba(255, 255, 255, .5)); -webkit-mask: radial-gradient(circle, transparent calc(70.7% - 2px), #000 calc(70.7% - 1px)); mask: radial-gradient(circle, transparent calc(70.7% - 2px), #000 calc(70.7% - 1px)); pointer-events: none; z-index: 0; } /* Icon: centred exactly, embossed into the sphere, lifted slightly towards the viewer */ .orb[data-orb]:not([data-orb="bundle"]) .orb-disc svg { position: relative !important; z-index: 2 !important; display: block !important; margin: 0 !important; color: #fff !important; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) drop-shadow(0 6px 10px rgba(0, 0, 0, .25)) !important; transform: translateZ(22px) !important; transition: transform .45s cubic-bezier(.16, 1, .3, 1) !important; } /* Contact shadow on the "floor", breathing with the float */ .orb[data-orb]:not([data-orb="bundle"])::before { content: ""; position: absolute; top: calc(var(--cf-orb-size, 116px) + 6px); left: 50%; width: calc(var(--cf-orb-size, 116px) * .62); height: 12px; margin-left: calc(var(--cf-orb-size, 116px) * -.31); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 55%, rgba(0, 0, 0, .6)), transparent); filter: blur(3px); opacity: .7; pointer-events: none; animation: cf-orb-shadow 6s ease-in-out infinite; } .orb[data-orb]:nth-child(2)::before, .orb[data-orb]:nth-child(2) .orb-disc { animation-delay: -2s !important; } .orb[data-orb]:nth-child(3)::before, .orb[data-orb]:nth-child(3) .orb-disc { animation-delay: -4s !important; } /* Hover / focus: the sphere turns towards the pointer and the icon pops forward */ .orb[data-orb]:not([data-orb="bundle"]):hover .orb-disc, .orb[data-orb]:not([data-orb="bundle"]):focus-visible .orb-disc { transform: rotateX(12deg) rotateY(-14deg) scale(1.06); box-shadow: inset -12px -16px 26px rgba(8, 2, 30, .5), inset 10px 12px 20px rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 26px 40px -14px color-mix(in srgb, var(--c2) 85%, transparent), 0 0 64px -4px color-mix(in srgb, var(--c2) 60%, transparent) !important; } .orb[data-orb]:not([data-orb="bundle"]):hover .orb-disc svg, .orb[data-orb]:not([data-orb="bundle"]):focus-visible .orb-disc svg { transform: translateZ(34px) scale(1.12) !important; } .story #epilogue .orb[data-orb]:hover, .story #epilogue .orb[data-orb]:focus-visible { transform: none; } .orb[data-orb]:not([data-orb="bundle"]) { --cf-orb-size: 116px; } @media (max-width: 600px) { .orb[data-orb]:not([data-orb="bundle"]) { --cf-orb-size: 84px; } } @media (max-width: 480px) { .orb[data-orb]:not([data-orb="bundle"]) { --cf-orb-size: 78px; } } @media (max-width: 360px) { .orb[data-orb]:not([data-orb="bundle"]) { --cf-orb-size: 70px; } } @keyframes cf-orb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes cf-orb-shadow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(.78); opacity: .42; } } @media (prefers-reduced-motion: reduce) { .orb[data-orb]:not([data-orb="bundle"]) .orb-disc, .orb[data-orb]:not([data-orb="bundle"])::before { animation: none !important; } } html[data-theme="light"] .orb[data-orb]:not([data-orb="bundle"]) .orb-disc { box-shadow: inset -12px -16px 26px rgba(8, 2, 30, .4), inset 10px 12px 20px rgba(255, 255, 255, .25), 0 18px 30px -12px color-mix(in srgb, var(--c2) 55%, transparent) !important; }