/* ================================================ Space Vanta Theme 1.0 Module: Vision Passage Version: VISION-PASSAGE-002 Purpose: Previous / Next spatial navigation Design: Metallic Spatial Passage Responsibility: 1. Passage positioning 2. Metallic line / directional mark 3. Hover / focus / disabled presentation ================================================ */ /* ================================================= Vision Passage ================================================= */ .sv-vision-space__passage { position: absolute; top: calc(15vh - 11px); width: 46px; height: 22px; display: flex; align-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: rgba(112, 126, 139, 0.72); cursor: pointer; pointer-events: auto; z-index: 6; opacity: 0.76; transition: opacity 240ms ease, transform 240ms ease, color 240ms ease; -webkit-tap-highlight-color: transparent; } /* ================================================= Previous ================================================= */ .sv-vision-space__passage--previous { right: calc(50% + 44px); justify-content: flex-end; gap: 7px; } /* ================================================= Next ================================================= */ .sv-vision-space__passage--next { left: calc(50% + 44px); justify-content: flex-start; gap: 7px; } /* ================================================= Hidden State ================================================= */ .sv-vision-space__passage[hidden] { display: none; } /* ================================================= Passage Line ================================================= */ .sv-vision-space__passage-line { position: relative; display: block; width: 22px; height: 1px; flex: 0 0 22px; background: linear-gradient(90deg, rgba(92, 105, 116, 0.16), rgba(214, 222, 227, 0.76), rgba(126, 166, 188, 0.48), rgba(92, 105, 116, 0.14)); box-shadow: 0 0 2px rgba(205, 216, 222, 0.14); opacity: 0.82; transition: width 240ms ease, opacity 240ms ease, background 240ms ease, box-shadow 240ms ease; } /* ================================================= Metallic Highlight ================================================= */ .sv-vision-space__passage-line::after { content: ""; position: absolute; top: -1px; width: 7px; height: 3px; background: linear-gradient(90deg, rgba(235, 240, 243, 0.12), rgba(240, 244, 246, 0.48), rgba(150, 185, 202, 0.22)); opacity: 0.52; transition: opacity 240ms ease, transform 240ms ease; } /* ================================================= Previous Line Highlight ================================================= */ .sv-vision-space__passage--previous .sv-vision-space__passage-line::after { right: 0; } /* ================================================= Next Line Highlight ================================================= */ .sv-vision-space__passage--next .sv-vision-space__passage-line::after { left: 0; } /* ================================================= Previous Line Direction ================================================= */ .sv-vision-space__passage--previous .sv-vision-space__passage-line { transform: scaleX(-1); } /* ================================================= Direction Mark ================================================= */ .sv-vision-space__passage-mark { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 18px; flex: 0 0 12px; margin: 0; padding: 0; color: rgba(78, 105, 126, 0.72); font-size: 16px; font-weight: 300; line-height: 1; letter-spacing: 0; text-shadow: 0 0 4px rgba(125, 163, 181, 0.08); transition: color 240ms ease, transform 240ms ease, text-shadow 240ms ease; } /* ================================================= Previous Direction Mark ================================================= */ .sv-vision-space__passage--previous .sv-vision-space__passage-mark { transform: translateX(0); } /* ================================================= Next Direction Mark ================================================= */ .sv-vision-space__passage--next .sv-vision-space__passage-mark { transform: translateX(0); } /* ================================================= Hover ================================================= */ .sv-vision-space__passage:hover { opacity: 1; color: rgba(126, 166, 188, 0.92); } /* ================================================= Previous Hover ================================================= */ .sv-vision-space__passage--previous:hover { transform: translateX(-2px); } /* ================================================= Next Hover ================================================= */ .sv-vision-space__passage--next:hover { transform: translateX(2px); } /* ================================================= Hover Line ================================================= */ .sv-vision-space__passage:hover .sv-vision-space__passage-line { opacity: 1; width: 25px; background: linear-gradient(90deg, rgba(103, 117, 128, 0.18), rgba(232, 237, 240, 0.88), rgba(133, 176, 197, 0.66), rgba(103, 117, 128, 0.18)); box-shadow: 0 0 3px rgba(211, 223, 229, 0.18), 0 0 7px rgba(126, 166, 188, 0.08); } /* ================================================= Hover Metallic Highlight ================================================= */ .sv-vision-space__passage:hover .sv-vision-space__passage-line::after { opacity: 0.82; } /* ================================================= Hover Direction Mark ================================================= */ .sv-vision-space__passage--previous:hover .sv-vision-space__passage-mark { color: rgba(92, 127, 149, 0.94); transform: translateX(-2px); text-shadow: 0 0 5px rgba(126, 166, 188, 0.14); } .sv-vision-space__passage--next:hover .sv-vision-space__passage-mark { color: rgba(92, 127, 149, 0.94); transform: translateX(2px); text-shadow: 0 0 5px rgba(126, 166, 188, 0.14); } /* ================================================= Focus ================================================= */ .sv-vision-space__passage:focus { outline: none; } /* ================================================= Focus Visible ================================================= */ .sv-vision-space__passage:focus-visible { opacity: 1; color: rgba(92, 127, 149, 0.94); } /* ================================================= Focus Visible Line ================================================= */ .sv-vision-space__passage:focus-visible .sv-vision-space__passage-line { opacity: 1; box-shadow: 0 0 3px rgba(211, 223, 229, 0.22), 0 0 7px rgba(126, 166, 188, 0.10); } /* ================================================= Disabled ================================================= */ .sv-vision-space__passage[disabled] { opacity: 0.22; color: rgba(94, 105, 114, 0.42); cursor: default; pointer-events: none; } /* ================================================= Disabled Line ================================================= */ .sv-vision-space__passage[disabled] .sv-vision-space__passage-line { opacity: 0.32; box-shadow: none; } /* ================================================= Disabled Mark ================================================= */ .sv-vision-space__passage[disabled] .sv-vision-space__passage-mark { color: rgba(87, 99, 108, 0.38); text-shadow: none; } /* ================================================= Reduced Motion ================================================= */ @media (prefers-reduced-motion: reduce) { .sv-vision-space__passage, .sv-vision-space__passage-line, .sv-vision-space__passage-line::after, .sv-vision-space__passage-mark { transition: none; } } /* ================================================= Mobile ================================================= */ @media (max-width: 767px) { .sv-vision-space__passage { top: calc(13vh - 9px); width: 48px; height: 20px; gap: 6px; } /* --------------------------------------------- Mobile Previous --------------------------------------------- */ .sv-vision-space__passage--previous { right: calc(50% + 37px); } /* --------------------------------------------- Mobile Next --------------------------------------------- */ .sv-vision-space__passage--next { left: calc(50% + 37px); } /* --------------------------------------------- Mobile Line --------------------------------------------- */ .sv-vision-space__passage-line { width: 18px; flex-basis: 18px; } /* --------------------------------------------- Mobile Hover Line --------------------------------------------- */ .sv-vision-space__passage:hover .sv-vision-space__passage-line { width: 21px; } /* --------------------------------------------- Mobile Mark --------------------------------------------- */ .sv-vision-space__passage-mark { width: 11px; height: 17px; flex-basis: 11px; font-size: 15px; } } /* ================================================= Small Mobile ================================================= */ @media (max-width: 420px) { .sv-vision-space__passage { width: 44px; } .sv-vision-space__passage--previous { right: calc(50% + 34px); } .sv-vision-space__passage--next { left: calc(50% + 34px); } .sv-vision-space__passage-line { width: 16px; flex-basis: 16px; } .sv-vision-space__passage:hover .sv-vision-space__passage-line { width: 19px; } }