SIVALICLOUD TECHNOLOGYDesign System
Komponen · Website

CorpHeader

Glass and solid header with mega menu

Buka previewREADME.mdSemua komponen

Sticky 72px header of the Sivali Corp site in its two states: glass over the dark animated hero (rgba(18,18,18,.28), 12px blur, white text) and solid once the page scrolls (rgba(255,255,255,.92), #E5E5E5 rule). Hovering a nav item with children opens the mega menu below it.

Anatomy: lockup (mark 36px + SIVALI CORP, tracked 0.18em) · nav items 15px with 14px side padding, active item in #39399B with a 2px inset underline · EN/ID segmented pill · primary button "Find Partners" (#39399B, hover #393987, radius 10px).

Mega menu: white panel, 260px intro column (title 20px Medium, 14px description, indigo link with arrow) divided by a #E5E5E5 rule from a two-column grid of link cards (title 15px Medium + 13px description, #F5F5F5 on hover, optional 40px logo tile).

On the hero the logo in the header is hidden while the hero lockup animates up into its place (scroll range min(20% of hero, 160px)), then the header logo appears. Below 820px the nav collapses to a 44px menu button.