diff --git a/index_ibm.html b/index_ibm.html index 4cb4b6a..303114e 100644 --- a/index_ibm.html +++ b/index_ibm.html @@ -155,15 +155,35 @@ section { padding: 120px 0; position: relative; z-index: 1; } font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; } -.logo-mark { - width: 32px; height: 32px; border-radius: 6px; - background: var(--accent); display: flex; align-items: center; - justify-content: center; font-family: 'IBM Plex Mono', 'SF Mono', monospace; - font-size: 0.8125rem; font-weight: 700; color: #fff; - transition: transform 0.3s var(--ease-out); +.logo-pixel { + display: grid; grid-template-columns: repeat(4, 6px); gap: 2px; + flex-shrink: 0; } -[data-theme="dark"] .logo-mark { color: #000; } -.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); } +.logo-pixel .px { + width: 6px; height: 6px; border-radius: 2px; + background: var(--accent); + animation: pxLogo 2.5s ease-in-out infinite; +} +.logo-pixel .px:nth-child(odd) { animation-name: pxLogoBlink; } +.logo-pixel .px:nth-child(1){animation-delay:0s} +.logo-pixel .px:nth-child(2){animation-delay:0.15s} +.logo-pixel .px:nth-child(3){animation-delay:0.3s} +.logo-pixel .px:nth-child(4){animation-delay:0.45s} +.logo-pixel .px:nth-child(5){animation-delay:0.6s} +.logo-pixel .px:nth-child(6){animation-delay:0.75s} +.logo-pixel .px:nth-child(7){animation-delay:0.9s} +.logo-pixel .px:nth-child(8){animation-delay:1.05s} +.logo-pixel .px:nth-child(9){animation-delay:1.2s} +.logo-pixel .px:nth-child(10){animation-delay:0.1s} +.logo-pixel .px:nth-child(11){animation-delay:0.25s} +.logo-pixel .px:nth-child(12){animation-delay:0.4s} +.logo-pixel .px:nth-child(13){animation-delay:0.55s} +.logo-pixel .px:nth-child(14){animation-delay:0.7s} +.logo-pixel .px:nth-child(15){animation-delay:0.85s} +.logo-pixel .px:nth-child(16){animation-delay:1s} +@keyframes pxLogo{0%,100%{opacity:0.3;transform:scale(0.85)}50%{opacity:1;transform:scale(1.1)}} +@keyframes pxLogoBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}} +.logo:hover .logo-pixel { filter: drop-shadow(0 0 6px var(--accent-glow)); } .nav { display: flex; align-items: center; gap: 40px; } .nav a { font-size: 0.8125rem; color: var(--text-sec); @@ -794,7 +814,12 @@ h1 {