/* ================================================ Space Vanta Theme 1.0 Module: Header File: public/header/header.css Version: HEADER-FOLLOW-005 Purpose: Global Header Structure Spatial Metallic Follow Surface Responsibilities: - Header container - Header global visual state - Desktop Header visibility - Desktop brand row - Desktop navigation - Desktop dropdown - Header divider - Desktop three-level structure - Global header compression state - Spatial metallic follow surface - SPACE VANTA spatial trace Does NOT handle: - Mobile Header Core layout - Mobile Featured Functions layout - Mobile Header spacing - Mobile Menu internal layout - Find Cube geometry - Find Cube material - Find interaction logic - Vision Aperture geometry - Vision interaction logic - Featured Functions global interaction - Search icon geometry - Cart icon geometry Mobile-specific layout remains in: public/header/mobile.css ================================================ */ /* ================================================= HEADER ================================================= */ .sv-header { position: fixed; top: 0; left: 0; right: 0; z-index: 800; width: 100%; background: var(--sv-bg); color: var(--sv-text); border-bottom: 1px solid var(--sv-border); box-sizing: border-box; transform: translateY(0); transition: background-color .42s ease, border-color .42s ease, box-shadow .42s ease, backdrop-filter .42s ease; } /* ================================================= SPATIAL METALLIC VEIL ================================================= HEADER-FOLLOW-005 FINAL Spatial principle: EDGE - almost transparent - very light mineral reflection TRANSITION - gradually increasing material density CENTER - strongest spatial density - metallic mineral surface - cold silver / blue reflection - SPACE VANTA becomes the visual anchor ================================================= */ .sv-header[data-header-state="blur"], .sv-header[data-header-state="rest"] { background: /* ----------------------------------------- Central mineral density ----------------------------------------- */ linear-gradient(90deg, rgba(226, 232, 236, .012) 0%, rgba(188, 199, 207, .020) 12%, rgba(137, 151, 162, .028) 25%, rgba(181, 193, 202, .045) 36%, rgba(204, 213, 220, .070) 43%, rgba(221, 228, 233, .090) 48%, rgba(226, 232, 236, .100) 50%, rgba(221, 228, 233, .090) 52%, rgba(204, 213, 220, .070) 57%, rgba(181, 193, 202, .045) 64%, rgba(137, 151, 162, .028) 75%, rgba(188, 199, 207, .020) 88%, rgba(226, 232, 236, .012) 100%), /* ----------------------------------------- Metallic silver reflection ----------------------------------------- */ linear-gradient(116deg, transparent 0%, transparent 22%, rgba(226, 232, 237, .012) 31%, rgba(242, 246, 248, .028) 39%, rgba(250, 251, 252, .052) 45%, rgba(235, 241, 245, .038) 50%, rgba(250, 251, 252, .052) 55%, rgba(242, 246, 248, .028) 61%, rgba(226, 232, 237, .012) 69%, transparent 78%, transparent 100%), /* ----------------------------------------- Cold spatial blue ----------------------------------------- */ linear-gradient(108deg, transparent 30%, transparent 42%, rgba(40, 82, 130, .008) 47%, rgba(55, 101, 154, .018) 51%, rgba(75, 125, 176, .028) 55%, rgba(55, 101, 154, .018) 59%, rgba(40, 82, 130, .008) 63%, transparent 68%, transparent 100%), rgba(96, 108, 120, .055); border-bottom: 1px solid rgba(211, 219, 225, .13); box-shadow: 0 1px 0 rgba(235, 240, 244, .055), 0 8px 28px rgba(10, 17, 24, .035); backdrop-filter: blur(6px) saturate(.92); -webkit-backdrop-filter: blur(6px) saturate(.92); } /* ================================================= CENTRAL SPATIAL BLUR FIELD ================================================= The blur is intentionally concentrated around SPACE VANTA. Important: - no full-width blurred rectangle - edges remain visually light - center remains spatially dense - blur fades progressively outward ================================================= */ .sv-header[data-header-state="blur"]::before, .sv-header[data-header-state="rest"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* ----------------------------------------- Very soft central mineral field ----------------------------------------- */ background: radial-gradient(ellipse 38% 125% at 50% 50%, rgba(238, 243, 246, .070) 0%, rgba(230, 237, 241, .055) 28%, rgba(222, 230, 235, .035) 48%, rgba(214, 223, 229, .018) 68%, transparent 100%); /* ----------------------------------------- Central blur ----------------------------------------- */ backdrop-filter: blur(9px) saturate(.90); -webkit-backdrop-filter: blur(9px) saturate(.90); /* ----------------------------------------- Spatial falloff ----------------------------------------- */ -webkit-mask-image: radial-gradient(ellipse 43% 135% at 50% 50%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .58) 27%, rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .18) 67%, rgba(0, 0, 0, .055) 84%, transparent 100%); mask-image: radial-gradient(ellipse 43% 135% at 50% 50%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .58) 27%, rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .18) 67%, rgba(0, 0, 0, .055) 84%, transparent 100%); } /* ================================================= METALLIC MIRROR REFLECTION ================================================= Reflection remains visible outside the central blur field. It should feel like a metal / mineral surface rather than a white glass overlay. ================================================= */ .sv-header[data-header-state="blur"]::after, .sv-header[data-header-state="rest"]::after { content: ""; position: absolute; top: -12%; left: 0; right: 0; bottom: -12%; pointer-events: none; background: /* ----------------------------------------- Silver central reflection ----------------------------------------- */ linear-gradient(116deg, transparent 0%, transparent 23%, rgba(205, 215, 222, .010) 31%, rgba(233, 239, 243, .022) 38%, rgba(249, 250, 251, .050) 44%, rgba(238, 244, 247, .034) 50%, rgba(249, 250, 251, .050) 56%, rgba(233, 239, 243, .022) 62%, rgba(205, 215, 222, .010) 69%, transparent 77%, transparent 100%), /* ----------------------------------------- Secondary mineral reflection ----------------------------------------- */ linear-gradient(104deg, transparent 12%, transparent 34%, rgba(198, 209, 218, .008) 42%, rgba(228, 235, 240, .020) 47%, rgba(245, 248, 250, .032) 50%, rgba(228, 235, 240, .020) 53%, rgba(198, 209, 218, .008) 58%, transparent 66%, transparent 88%), /* ----------------------------------------- Cold blue spatial reflection ----------------------------------------- */ linear-gradient(108deg, transparent 30%, transparent 43%, rgba(42, 84, 132, .006) 49%, rgba(57, 103, 158, .015) 53%, rgba(82, 128, 180, .026) 57%, rgba(57, 103, 158, .015) 61%, rgba(42, 84, 132, .006) 66%, transparent 73%, transparent 100%); opacity: .92; mix-blend-mode: screen; } /* ================================================= RESTING BRAND TRACE ================================================= */ .sv-header__spatial-trace { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 1; letter-spacing: .42em; font-weight: 500; color: rgba(214, 221, 227, .22); /* ----------------------------------------- Metallic text surface ----------------------------------------- */ background: linear-gradient(105deg, rgba(228, 234, 239, .98) 0%, rgba(248, 250, 251, 1) 23%, rgba(173, 195, 214, .98) 42%, rgba(112, 153, 195, 1) 51%, rgba(91, 136, 181, 1) 57%, rgba(225, 233, 240, .99) 77%, rgba(249, 251, 252, .98) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; filter: blur(.08px); text-shadow: 0 0 5px rgba(247, 250, 252, .20), 0 0 11px rgba(107, 151, 190, .12); transition: opacity .70s ease, letter-spacing .70s ease, filter .70s ease; } /* ================================================= SPACE VANTA TRACE FRAME ================================================= The frame is closer to the typography. It should read as: "spatial registration" NOT: "UI button" ================================================= */ .sv-header__spatial-trace::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + 18px); height: calc(100% + 9px); transform: translate(-50%, -50%); pointer-events: none; box-sizing: border-box; border: 1px solid rgba(220, 228, 234, .32); border-radius: 999px; background: linear-gradient(90deg, rgba(205, 215, 222, .010) 0%, rgba(239, 243, 246, .040) 28%, rgba(176, 202, 222, .055) 50%, rgba(239, 243, 246, .040) 72%, rgba(205, 215, 222, .010) 100%); box-shadow: 0 0 6px rgba(219, 228, 235, .075), inset 0 0 4px rgba(231, 238, 243, .025); opacity: .92; } /* ================================================= REST STATE ================================================= */ .sv-header[data-header-state="rest"] .sv-header__spatial-trace { opacity: 1; letter-spacing: .48em; filter: blur(.02px); } .sv-header[data-header-state="rest"] .sv-header__spatial-trace::before { opacity: 1; } /* ================================================= FULL STATE ================================================= */ .sv-header[data-header-state="full"] .sv-header__spatial-trace { opacity: 0; } /* ================================================= MOBILE TRACE FRAME ================================================= */ @media (max-width: 767px) { .sv-header__spatial-trace::before { width: calc(100% + 16px); height: calc(100% + 8px); border-color: rgba(213, 222, 229, .28); } } /* ================================================= REST STATE ================================================= */ .sv-header[data-header-state="rest"] .sv-header__spatial-trace { opacity: 1; letter-spacing: .48em; filter: blur(.02px); } /* ================================================= REST TRACE FRAME ================================================= */ .sv-header[data-header-state="rest"] .sv-header__spatial-trace::before { opacity: 1; } /* ================================================= FULL STATE ================================================= */ .sv-header[data-header-state="full"] .sv-header__spatial-trace { opacity: 0; } /* ================================================= FOLLOW SPACER ================================================= */ .sv-header-follow-spacer { display: block; width: 100%; height: 0; pointer-events: none; } /* ================================================= GLOBAL SPATIAL COMPRESSION ================================================= Existing verified behavior is preserved: blur: - internal header content hidden rest: - internal header content hidden full: - normal header content visible ================================================= */ .sv-header[data-header-state="blur"] .sv-header__desktop, .sv-header[data-header-state="blur"] .sv-header__navigation, .sv-header[data-header-state="blur"] .sv-header__mobile, .sv-header[data-header-state="rest"] .sv-header__desktop, .sv-header[data-header-state="rest"] .sv-header__navigation, .sv-header[data-header-state="rest"] .sv-header__mobile { opacity: 0; visibility: hidden; pointer-events: none; } /* ================================================= DESKTOP BRAND ROW ================================================= */ .sv-header__desktop { display: none; min-height: 104px; padding: 0 var(--sv-desktop-padding); box-sizing: border-box; } /* ================================================= DESKTOP NAVIGATION ================================================= */ .sv-header__navigation { display: none; } /* ================================================= DESKTOP UTILITY ZONE ================================================= */ .sv-header__desktop .sv-header__utility { justify-self: end; } /* ================================================= MOBILE HEADER ================================================= */ .sv-header__mobile { display: block; } /* ================================================= DESKTOP ================================================= */ @media (min-width: 768px) { /* --------------------------------------------- Desktop Visibility --------------------------------------------- */ .sv-header__desktop { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 64px 40px; align-items: center; min-height: 104px; } .sv-header__mobile { display: none; } .sv-header__navigation { position: relative; display: block; } /* --------------------------------------------- Desktop Grid --------------------------------------------- */ .sv-header__logo { grid-column: 1; grid-row: 1; } .sv-header__wordmark { grid-column: 2; grid-row: 1; } .sv-header__locale { grid-column: 1; grid-row: 2; width: 0; height: 0; overflow: visible; } .plugin-isv-multiLanguage { grid-column: 1; grid-row: 2; justify-self: start; width: max-content; } .sv-header__utility { grid-column: 3; grid-row: 2; justify-self: end; } /* --------------------------------------------- Desktop Navigation Divider --------------------------------------------- */ .sv-header__navigation::before { content: ""; position: absolute; top: 0; left: var(--sv-desktop-padding); right: var(--sv-desktop-padding); height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(175, 182, 190, .07) 8%, rgba(195, 201, 208, .20) 25%, rgba(220, 224, 229, .34) 50%, rgba(195, 201, 208, .20) 75%, rgba(175, 182, 190, .07) 92%, transparent 100% ); filter: blur(.35px); opacity: .88; pointer-events: none; } .sv-header__navigation::after { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(225, 229, 233, .12) 20%, rgba(245, 247, 249, .34) 50%, rgba(225, 229, 233, .12) 80%, transparent 100% ); filter: blur(.25px); opacity: .82; pointer-events: none; } .sv-header__nav { width: 100%; } .sv-header__nav>ul { display: flex; align-items: center; justify-content: center; gap: 28px; } .sv-header__nav-item { position: relative; padding: 16px 0; } .sv-header__nav-item>a { display: block; font-size: 13px; line-height: 1.4; white-space: nowrap; } /* --------------------------------------------- Desktop Dropdown --------------------------------------------- */ .sv-header__dropdown { position: absolute; left: 50%; top: 100%; min-width: 260px; padding: 22px; transform: translateX(-50%); background: var(--sv-surface); border: 1px solid var(--sv-border); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; } .sv-header__nav-item:hover>.sv-header__dropdown { opacity: 1; visibility: visible; } .sv-header__dropdown>ul>li+li { margin-top: 12px; } .sv-header__dropdown a { font-size: 13px; } .sv-header__level-3 { margin-top: 8px; margin-left: 14px; } .sv-header__level-3 li+li { margin-top: 7px; } } /* ================================================= MOBILE ================================================= */ @media (max-width: 767px) { .sv-header__desktop { display: none; } .sv-header__navigation { display: none; } /* --------------------------------------------- Mobile Trace Frame --------------------------------------------- */ .sv-header__spatial-trace::before { width: calc(100% + 20px); height: calc(100% + 10px); border-color: rgba(213, 222, 229, .20); } } /* ================================================= REDUCED MOTION ================================================= */ @media (prefers-reduced-motion: reduce) { .sv-header { transition: none; } .sv-header__spatial-trace { transition: none; } }