diff options
Diffstat (limited to 'makima/frontend/public/index.html')
| -rw-r--r-- | makima/frontend/public/index.html | 45 |
1 files changed, 23 insertions, 22 deletions
diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html index 42e0417..70760d9 100644 --- a/makima/frontend/public/index.html +++ b/makima/frontend/public/index.html @@ -110,12 +110,8 @@ display: inline-flex; align-items: center; justify-content: center; - width: 42px; - height: 42px; - border: 1px solid #0f3c78; - border-radius: 50%; - background: #e8f1ff; - box-shadow: 0 0 0 3px rgba(117, 170, 252, 0.45); + width: 32px; + height: 32px; } .masthead h1 { margin: 0; @@ -239,6 +235,7 @@ line-height: 1.4; border: 1px solid rgba(197, 219, 255, 0.4); box-shadow: 0 6px 16px rgba(12, 35, 67, 0.2); + z-index: 4; } .floating-card.top-card { top: 6px; @@ -322,6 +319,7 @@ display: grid; place-items: center; filter: drop-shadow(0 10px 26px rgba(12, 35, 67, 0.32)); + z-index: 1; } .hero-logo::before { content: "data-link// orbital / makima.jp"; @@ -335,6 +333,7 @@ letter-spacing: 0.08em; color: rgba(15, 60, 120, 0.55); text-align: center; + z-index: 3; } .logo-shell { width: 230px; @@ -346,6 +345,18 @@ place-items: center; position: relative; overflow: hidden; + z-index: 1; + } + .logo-shell::before { + content: ""; + position: absolute; + inset: 10px; + border-radius: 50%; + border: 1px solid rgba(117, 170, 252, 0.5); + box-shadow: 0 0 18px rgba(15, 60, 120, 0.25); + opacity: 0; + transform: scale(0.9); + transition: opacity 0.45s ease, transform 0.6s ease; } .logo-shell::after { content: ""; @@ -362,29 +373,18 @@ .logo-svg { width: 160px; height: 160px; - z-index: 1; - transition: transform 0.4s ease, filter 0.4s ease; + z-index: 2; + transition: filter 0.4s ease; } .logo-svg circle { - transition: transform 0.4s ease, opacity 0.4s ease, stroke-width 0.4s ease; + transition: opacity 0.4s ease; } .logo-shell:hover .logo-svg { - transform: scale(1.04); filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45)); } - .logo-shell:hover .logo-svg circle:nth-child(1) { - transform: scale(1.05); - } - .logo-shell:hover .logo-svg circle:nth-child(2) { + .logo-shell:hover::before { + opacity: 1; transform: scale(1.08); - opacity: 0.92; - } - .logo-shell:hover .logo-svg circle:nth-child(3) { - transform: scale(1.12); - opacity: 0.92; - } - .logo-shell:hover .logo-svg circle:nth-child(4) { - transform: scale(1.3); } .halo { position: absolute; @@ -393,6 +393,7 @@ border-radius: 50%; border: 1px dashed rgba(15, 60, 120, 0.5); animation: idle-rotate 28s linear infinite; + z-index: 0; } .logo-shell:hover + .halo { animation: pulse 1.5s ease-in-out infinite; |
