478 lines
8.2 KiB
CSS
478 lines
8.2 KiB
CSS
/* Pivoine Docs Icon Styles */
|
|
|
|
.pivoine-docs-icon-wrapper {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
cursor: pointer;
|
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper:not(.is-interactive) {
|
|
cursor: default;
|
|
}
|
|
|
|
.pivoine-docs-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
filter: drop-shadow(0 10px 40px rgba(168, 85, 247, 0.3));
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
/* Background pulse */
|
|
.bg-circle {
|
|
animation: bg-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
/* CLOSED STATE - Petals start small and close to center */
|
|
.outer-petal {
|
|
transform-origin: 128px 128px;
|
|
transform: scale(0.3);
|
|
opacity: 0.5;
|
|
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.middle-petal {
|
|
transform-origin: 128px 128px;
|
|
transform: scale(0.4);
|
|
opacity: 0.6;
|
|
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
|
|
}
|
|
|
|
.inner-petal {
|
|
transform-origin: 128px 128px;
|
|
transform: scale(0.5);
|
|
opacity: 0.7;
|
|
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
|
|
}
|
|
|
|
/* Non-interactive version stays slightly more open */
|
|
.pivoine-docs-icon-wrapper:not(.is-interactive) .outer-petal {
|
|
transform: scale(0.85);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper:not(.is-interactive) .middle-petal {
|
|
transform: scale(0.88);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper:not(.is-interactive) .inner-petal {
|
|
transform: scale(0.9);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* Sparkles twinkle */
|
|
.sparkle {
|
|
animation: twinkle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.sparkle-1 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.sparkle-2 {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.sparkle-3 {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.sparkle-4 {
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
/* Particles orbit */
|
|
.particle {
|
|
animation: orbit 8s linear infinite;
|
|
transform-origin: 128px 128px;
|
|
}
|
|
|
|
.particle-1 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.particle-2 {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.particle-3 {
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.particle-4 {
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
/* Center circle pulse */
|
|
.center-circle {
|
|
animation: center-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Pages subtle movement */
|
|
.page {
|
|
transform-origin: center;
|
|
animation: page-float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.page-1 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.page-2 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.page-3 {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
/* Text lines appear */
|
|
.text-line {
|
|
stroke-dasharray: 30;
|
|
stroke-dashoffset: 30;
|
|
animation: line-appear 2s ease-out forwards;
|
|
}
|
|
|
|
.line-1 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.line-2 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.line-3 {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.line-4 {
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.line-5 {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
/* HOVER - BLOOM OPEN! */
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
|
transform: scale(1.08) translateY(-8px);
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .pivoine-docs-icon {
|
|
filter: drop-shadow(0 20px 60px rgba(168, 85, 247, 0.6));
|
|
}
|
|
|
|
/* Petals bloom open on hover */
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .outer-petal {
|
|
transform: scale(1);
|
|
opacity: 0.85;
|
|
filter: url(#intense-glow);
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .middle-petal {
|
|
transform: scale(1);
|
|
opacity: 0.9;
|
|
filter: url(#intense-glow);
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .inner-petal {
|
|
transform: scale(1);
|
|
opacity: 0.95;
|
|
filter: url(#intense-glow);
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .center-circle {
|
|
animation: center-glow 1s ease-in-out infinite;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .sparkle {
|
|
animation: sparkle-burst 0.8s ease-out infinite;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover .page {
|
|
animation: page-fan 0.8s ease-out forwards;
|
|
}
|
|
|
|
/* Click effects */
|
|
.pivoine-docs-icon-wrapper.is-clicked {
|
|
animation: icon-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-clicked .pivoine-docs-icon {
|
|
animation: icon-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
filter: drop-shadow(0 25px 80px rgba(168, 85, 247, 0.9));
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-clicked .petal {
|
|
animation: petal-explode 0.8s ease-out;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-clicked .center-circle {
|
|
animation: center-burst 0.8s ease-out;
|
|
}
|
|
|
|
/* Ripple effect */
|
|
.ripple-effect {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0) 70%);
|
|
transform: translate(-50%, -50%) scale(0);
|
|
animation: ripple-expand 1s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Label */
|
|
.icon-label {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.label-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: label-shimmer 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes bg-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
@keyframes orbit {
|
|
from {
|
|
transform: rotate(0deg) translateX(80px) rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg) translateX(80px) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes center-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
@keyframes page-float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
@keyframes line-appear {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes center-glow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.8;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
filter: url(#intense-glow);
|
|
}
|
|
}
|
|
|
|
@keyframes sparkle-burst {
|
|
0%,
|
|
100% {
|
|
opacity: 0.8;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.8);
|
|
}
|
|
}
|
|
|
|
@keyframes page-fan {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translateY(-3px) rotate(2deg);
|
|
}
|
|
}
|
|
|
|
@keyframes icon-bounce {
|
|
0% {
|
|
transform: scale(1) translateY(0) rotateZ(0deg);
|
|
}
|
|
30% {
|
|
transform: scale(0.9) translateY(0) rotateZ(0deg);
|
|
}
|
|
60% {
|
|
transform: scale(1.15) translateY(-15px) rotateZ(180deg);
|
|
}
|
|
80% {
|
|
transform: scale(0.95) translateY(0) rotateZ(360deg);
|
|
}
|
|
100% {
|
|
transform: scale(1) translateY(0) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes icon-spin {
|
|
0% {
|
|
transform: perspective(1000px) rotateY(0deg);
|
|
}
|
|
50% {
|
|
transform: perspective(1000px) rotateY(180deg);
|
|
}
|
|
100% {
|
|
transform: perspective(1000px) rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes petal-explode {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.3);
|
|
opacity: 0.8;
|
|
filter: url(#intense-glow);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
filter: url(#petal-glow);
|
|
}
|
|
}
|
|
|
|
@keyframes center-burst {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: scale(1.8);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes ripple-expand {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes label-shimmer {
|
|
0%,
|
|
100% {
|
|
filter: brightness(1);
|
|
}
|
|
50% {
|
|
filter: brightness(1.3);
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
|
transform: scale(1.05) translateY(-4px);
|
|
}
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pivoine-docs-icon-wrapper,
|
|
.pivoine-docs-icon,
|
|
.petal,
|
|
.sparkle,
|
|
.particle,
|
|
.center-circle,
|
|
.page,
|
|
.text-line,
|
|
.ripple-effect,
|
|
.label-text {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Show petals in semi-open state for reduced motion */
|
|
.outer-petal {
|
|
transform: scale(0.85);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.middle-petal {
|
|
transform: scale(0.88);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.inner-petal {
|
|
transform: scale(0.9);
|
|
opacity: 0.95;
|
|
}
|
|
}
|
|
|
|
/* Touch devices */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.pivoine-docs-icon-wrapper.is-interactive:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|