diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/styles/heisei.css | 62 |
1 files changed, 52 insertions, 10 deletions
diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index c56791a..e90e492 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -439,9 +439,9 @@ body { background: var(--hz-night); color: var(--hz-ink); } .mission-image { border: 0; border-radius: 2px; - box-shadow: - 0 24px 60px -24px rgba(8, 10, 24, 0.85), - 0 0 0 1px var(--hz-line); + /* SVG already draws its own hairline frame + corner brackets at the + viewBox edge — drop the ring outline so we don't double-frame. */ + box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85); filter: none; /* tactical SVG renders flat */ height: clamp(180px, 36vh, 360px); width: 100%; @@ -482,9 +482,8 @@ body { background: var(--hz-night); color: var(--hz-ink); } object-fit: contain; object-position: center; padding: 0; - box-shadow: - 0 24px 60px -24px rgba(8, 10, 24, 0.85), - 0 0 0 1px var(--hz-line); + /* SVG owns its frame — keep only the soft drop-shadow for elevation */ + box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85); } /* Right-column text: each block owns its own accent rule */ .mission-screen .mission-headline, @@ -656,7 +655,11 @@ body { background: var(--hz-night); color: var(--hz-ink); } box-shadow: 0 0 12px rgba(232, 184, 122, 0.35); } -/* Login keeps a primary-action treatment, but compact for the bar */ +/* Login keeps a primary-action treatment, but compact for the bar. + The hover effect avoids the amber drop-shadow halo (which read as + the same glow language as the active mission/makima nav buttons) + and uses an "inverted ink + chevron rule" treatment instead so it + stays clearly the primary CTA without overlapping signal. */ .cta-right .taisho-cta { background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%); border: 0 !important; @@ -666,12 +669,51 @@ body { background: var(--hz-night); color: var(--hz-ink); } opacity: 1; letter-spacing: 0.18em; border-radius: 2px; + /* Local positioning context for the chevron rule pseudo-element */ + position: relative; + isolation: isolate; + transition: + background 200ms ease, + color 200ms ease, + letter-spacing 240ms ease; } .cta-right .taisho-cta::before { display: none; } + +/* Top-edge tactical chevron rule: hidden by default, slides in on hover. + Uses ::after so it's independent of the existing ::before underline rule. */ +.cta-right .taisho-cta::after { + content: ''; + position: absolute; + inset: 0 0 auto 0; + height: 2px; + background: var(--hz-ink); + transform: scaleX(0); + transform-origin: left center; + transition: transform 220ms ease-out; + pointer-events: none; +} + .cta-right .taisho-cta:hover { - background: linear-gradient(180deg, rgba(232, 184, 122, 1) 0%, rgba(217, 106, 138, 1) 100%); - color: #0b1124; - box-shadow: 0 8px 24px -10px rgba(232, 184, 122, 0.55) !important; + /* Invert: dark plate, light ink — opposite of the resting state. + Reads as "armed / pressed" instead of "glowing". */ + background: #0b1124; + color: var(--hz-amber); + letter-spacing: 0.22em; /* subtle ink-spread */ + /* Explicitly cancel any inherited glow */ + box-shadow: none !important; + filter: none; +} +.cta-right .taisho-cta:hover::after { + transform: scaleX(1); +} +.cta-right .taisho-cta:active { + background: #1a2548; + color: var(--hz-ink); + letter-spacing: 0.20em; +} +.cta-right .taisho-cta:focus-visible { + outline: 1px solid var(--hz-amber); + outline-offset: 2px; } .cta-icon { font-size: 10px; opacity: 0.85; margin-right: 2px; } |