summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsoryu-co <bot@soryu.co>2026-05-06 15:10:30 +0000
committersoryu-co <bot@soryu.co>2026-05-06 15:10:30 +0000
commitc99ad2bcc75e330fc66d78452d604747cf2d3443 (patch)
tree8808bdd1e5c6c2fdcd67c0323564abd225cce5c5
parent741a9cec3131a87e923b49934c2179627761e60d (diff)
downloadsoryu-c99ad2bcc75e330fc66d78452d604747cf2d3443.tar.gz
soryu-c99ad2bcc75e330fc66d78452d604747cf2d3443.zip
Drop mission-image ring border; reskin Login hover (no glow)
- The animated SVG already draws its own hairline frame + corner brackets at the viewBox edge. Remove the `box-shadow: 0 0 0 1px` ring (in both the base `.mission-image` rule and the desktop-min-1025px `.mission-screen .mission-image` override) so the image isn't double-framed. Drop-shadow for elevation kept. - Replace the Login button hover effect. The amber drop-shadow halo used the same visual language as the active Mission/MAKIMA nav buttons (which also glow amber underneath); on hover Login now inverts to a deep-night background with amber ink and a hairline ::after rule that slides in from the left along the top edge — reads as 'armed' rather than 'glowing'. Letter-spacing widens slightly on hover (0.18em → 0.22em) for a subtle ink-spread. Added :active and :focus-visible states for keyboard a11y.
-rw-r--r--frontend/src/styles/heisei.css62
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; }