/* KYMA header navigation polish: grouped nav + secondary account surfaces only. */ /* Reuse the existing desktop grouped-nav breakpoint without changing responsive structure. */ @media(min-width:901px){ /* One calm outer surface carries the depth instead of three individual buttons. */ .siteHeader .navMenuGroup{ border-color:rgba(203,167,211,.42); background:rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 4px 12px rgba(96,65,108,.05); } .siteHeader .navMenuGroup .navPill{ border-color:transparent; background:transparent; box-shadow:none; color:var(--kyma-text-secondary,#6f5a74); transform:none; } /* Existing 1px border box is reused as a very quiet separator; dimensions stay unchanged. */ .siteHeader .navMenuGroup .navPill + .navPill{ border-left-color:rgba(203,167,211,.24); } /* The old underline remains in layout but becomes visually redundant inside the segment surface. */ .siteHeader .navMenuGroup .navPage::after{ opacity:0; } .siteHeader .navMenuGroup .navPage:hover{ border-color:transparent; background:rgba(247,236,250,.58); box-shadow:none; color:#684b70; transform:none; } .siteHeader .navMenuGroup .navPage:active{ border-color:rgba(185,120,198,.18); background:rgba(238,218,243,.66); box-shadow:inset 0 1px 2px rgba(96,65,108,.07); transform:none; } .siteHeader .navMenuGroup .navPage.active, .siteHeader .navMenuGroup .navPage.active:hover, .siteHeader .navMenuGroup .navPage.active:active{ border-color:rgba(185,120,198,.28); background:rgba(238,218,243,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.54); color:#56345e; transform:none; } /* Notice is currently a static span, so keep it in the same family without implying interaction. */ .siteHeader .navMenuGroup .noticePill, .siteHeader .navMenuGroup .noticePill:hover{ border-color:transparent; border-left-color:rgba(203,167,211,.24); background:transparent; box-shadow:none; color:#948298; opacity:.66; transform:none; } /* Login / signed-in name stay related to the nav, but one visual tier quieter. */ .siteHeader .accountLogin, .siteHeader .accountName{ border-color:rgba(203,167,211,.36); background:rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 3px 10px rgba(96,65,108,.04); color:#78647d; transform:none; } .siteHeader .accountLogin:hover, .siteHeader .accountName:hover{ border-color:rgba(197,139,207,.56); background:rgba(247,236,250,.68); box-shadow:0 4px 12px rgba(96,65,108,.055); color:#684b70; transform:none; } .siteHeader .accountLogin:active, .siteHeader .accountName:active{ border-color:rgba(197,139,207,.48); background:rgba(242,228,246,.72); box-shadow:inset 0 1px 2px rgba(96,65,108,.07); transform:none; } .siteHeader .accountDropdown{ border-color:rgba(203,167,211,.42); background:rgba(255,255,255,.965); box-shadow:0 12px 28px rgba(80,49,90,.10); } .siteHeader .accountDropdown .accountAdmin, .siteHeader .accountDropdown .accountLogout{ background:transparent; box-shadow:none; color:#7b687f; transform:none; } .siteHeader .accountDropdown .accountLogout{ color:#8d7b91; } .siteHeader .accountDropdown .accountAdmin:hover, .siteHeader .accountDropdown .accountLogout:hover{ background:rgba(247,236,250,.68); box-shadow:none; color:#65486c; transform:none; } } /* Schedule / clips: a clearer orchid segmented menu that keeps the shared header geometry. */ @media(min-width:901px){ body.scheduleOpen .siteHeader .navMenuGroup, body.clipsOpen .siteHeader .navMenuGroup{ gap:4px; min-height:48px; padding:4px; border:1px solid rgba(193,132,204,.52); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,238,250,.92)); box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(104,64,114,.10); } body.scheduleOpen .siteHeader .navMenuGroup .navPill, body.clipsOpen .siteHeader .navMenuGroup .navPill{ min-height:38px; padding:8px 16px; border:1px solid transparent; border-radius:13px; color:#74547b; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease; } body.scheduleOpen .siteHeader .navMenuGroup .navPill + .navPill, body.clipsOpen .siteHeader .navMenuGroup .navPill + .navPill{ border-left-color:transparent; } body.scheduleOpen .siteHeader .navMenuGroup .navPage:hover, body.clipsOpen .siteHeader .navMenuGroup .navPage:hover{ border-color:rgba(194,135,205,.28); background:rgba(246,231,249,.86); color:#604067; box-shadow:inset 0 1px 0 rgba(255,255,255,.88); } body.scheduleOpen .siteHeader .navMenuGroup .navPage.active, body.scheduleOpen .siteHeader .navMenuGroup .navPage.active:hover, body.clipsOpen .siteHeader .navMenuGroup .navPage.active, body.clipsOpen .siteHeader .navMenuGroup .navPage.active:hover{ border-color:rgba(181,111,195,.52); background:linear-gradient(180deg,#f5e4f8,#ead3ef); color:#55315d; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 4px 10px rgba(123,72,135,.12); } body.scheduleOpen .siteHeader .navMenuGroup .noticePill, body.clipsOpen .siteHeader .navMenuGroup .noticePill{ border-color:transparent; background:rgba(255,255,255,.28); color:#a08ba5; opacity:.72; } } @media(max-width:900px){ body.scheduleOpen .siteHeader .navMenuGroup .navPill, body.clipsOpen .siteHeader .navMenuGroup .navPill{ border-color:rgba(193,132,204,.34); background:rgba(255,255,255,.82); box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(104,64,114,.07); color:#74547b; } body.scheduleOpen .siteHeader .navMenuGroup .navPage.active, body.clipsOpen .siteHeader .navMenuGroup .navPage.active{ border-color:rgba(181,111,195,.48); background:linear-gradient(180deg,#f5e4f8,#ead3ef); color:#55315d; } body.scheduleOpen .siteHeader .navMenuGroup .noticePill, body.clipsOpen .siteHeader .navMenuGroup .noticePill{ background:rgba(255,255,255,.48); color:#a08ba5; opacity:.68; } } .siteHeader .navMenuGroup .navPage:disabled, .siteHeader .navMenuGroup .navPage:disabled:hover, .siteHeader .navMenuGroup .navPage:disabled:active{ border-color:transparent; background:transparent; box-shadow:none; color:#9b8a9f; cursor:default; opacity:.52; transform:none; }