@primer/react-brand/esm/AnchorNav/AnchorNav.module-33_8-9r9.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX{padding:var(--base-size-12) var(--base-size-16);z-index:91;display:flex;position:sticky;top:0;left:0;right:0}.Primer_Brand__AnchorNav-module__AnchorNav--no-bg-scroll___xg4JR{height:100vh;overflow:hidden}.Primer_Brand__AnchorNav-module__AnchorNav--hide-until-sticky___028xm:not(.Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL){opacity:0;visibility:hidden;transition:visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default), opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__AnchorNav-module__AnchorNav--hide-until-sticky___028xm.Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL{opacity:1;visibility:visible}.Primer_Brand__AnchorNav-module__AnchorNav--with-default-background-color___zvSjy{background-color:var(--brand-color-canvas-default)}.Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL{position:fixed;box-shadow:0 3px 6px #8c959f26,0 1px 1px #0000001a}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8{transform-style:preserve-3d;z-index:91}.Primer_Brand__AnchorNav-module__AnchorNav-link-container___CDgv3{width:100%;display:flex;position:relative}.Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN{z-index:91;width:100%;max-width:1280px;max-height:calc(100vh - var(--base-size-12) * 2);position:relative}.Primer_Brand__AnchorNav-module__AnchorNav--with-default-background-color___zvSjy .Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN{background-color:var(--brand-color-canvas-default)}@media screen and (width<=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX:not(.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8) .Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN{justify-content:space-between;align-items:center;display:flex}.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX{background-color:var(--brand-color-canvas-default)}.Primer_Brand__AnchorNav-module__AnchorNav-inner-container--expanded___sba8G{height:auto}.Primer_Brand__AnchorNav-module__AnchorNav-link-container___CDgv3{padding-left:var(--base-size-16);display:none}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-link-container___CDgv3{flex-direction:column;display:flex}}@media screen and (width>=40rem) and (width<=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv:not(.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer--no-offset___gqZlb){top:var(--base-size-8);position:absolute;right:0}}@media screen and (width>=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX{padding:var(--base-size-12) var(--base-size-40);height:75px}.Primer_Brand__AnchorNav-module__AnchorNav--with-default-background-color___zvSjy,.Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL{background-color:var(--brand-color-canvas-default)}.Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN{align-items:center;margin:0 auto;display:flex}}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX{place-items:center flex-start;width:100%;height:48px;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX{animation:1s Primer_Brand__AnchorNav-module__fade-in___cNMRW;animation-timing-function:var(--brand-animation-easing-glide);margin:0 0 2px}@media screen and (width<=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX{padding:0 0 0 var(--base-size-16);position:absolute;left:0}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:before{content:"";background-color:var(--brand-AnchorNav-link-underline-default);width:2px;height:50%;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);opacity:1;transform-origin:0;position:absolute;left:0;transform:scale(0)}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-link--is-active___nScJf:before{transform:scale(1)}}@media screen and (width>=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX{margin:0 1px;position:relative}.Primer_Brand__AnchorNav-module__AnchorNav-link--center___7C2CE{justify-content:center}.Primer_Brand__AnchorNav-module__AnchorNav-link--start___70uQQ{width:auto;margin-right:var(--base-size-48);justify-content:flex-start}}.Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7{font-weight:var(--brand-text-weight-400);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);font-family:var(--brand-heading-fontFamily);letter-spacing:var(--brand-heading-letterSpacing-200);color:var(--brand-color-text-default);transition:color var(--brand-animation-easing-glide) var(--brand-animation-duration-faster);position:relative}.Primer_Brand__AnchorNav-module__AnchorNav--with-default-background-color___zvSjy .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7{background-color:var(--brand-color-canvas-default)}@media screen and (width<=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7{background-color:var(--brand-color-canvas-default)}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-link-label--is-active___kVuw2{color:var(--brand-color-focus)}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:not(.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX[data-active=true]){visibility:hidden}.Primer_Brand__AnchorNav-module__AnchorNav--stuck___SgtFL .Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX[data-active=false][data-first=true],.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX .Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX[data-active=false][data-first=true]{visibility:visible}.Primer_Brand__AnchorNav-module__AnchorNav-inner-container--expanded___sba8G .Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX{text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;display:flex;position:relative;top:auto;left:auto;right:auto;visibility:visible!important}}@media screen and (width>=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7{white-space:nowrap}.Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after{content:"";background-color:var(--brand-AnchorNav-link-underline-default);width:100%;height:2px;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast), background-color var(--brand-animation-duration-fast);opacity:1;transform-origin:50%;position:absolute;bottom:-6px;left:0;transform:scale(0)}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:hover .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after,.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:focus .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after,.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX[data-active=true] .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after{opacity:1;transform:scaleX(.8)}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:active .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after{background-color:var(--brand-AnchorNav-link-underline-pressed);transform:scaleX(.9)}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX[data-active=true] .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after{background-color:var(--brand-AnchorNav-link-underline-pressed);opacity:1}.Primer_Brand__AnchorNav-module__AnchorNav-link___0gyOX:focus-visible .Primer_Brand__AnchorNav-module__AnchorNav-link-label___8TkI7:after{opacity:0}}.Primer_Brand__AnchorNav-module__AnchorNav-menu-button___cWLpd{display:none}@media screen and (width<=63.25rem){.Primer_Brand__AnchorNav-module__AnchorNav-menu-button___cWLpd{all:unset;cursor:pointer;padding:var(--base-size-8) var(--base-size-16);height:var(--base-size-32);z-index:2;border-radius:var(--brand-borderRadius-small);align-items:center;padding-left:0;display:inline-flex}.Primer_Brand__AnchorNav-module__AnchorNav-menu-button-arrow___d_Ib_{padding:0 calc(var(--base-size-12) / 2);width:32px;height:32px;color:var(--brand-color-text-default)}.Primer_Brand__AnchorNav-module__AnchorNav-menu-button___cWLpd:focus-visible{border-color:var(--brand-color-focus);box-shadow:0 0 0 2px var(--brand-color-focus);outline:none}.Primer_Brand__AnchorNav-module__AnchorNav-overlay--expanded___LV__U{z-index:-3;width:100%;height:100dvh;animation:.5s Primer_Brand__AnchorNav-module__fade-in___cNMRW;animation-timing-function:var(--brand-animation-easing-glide);cursor:pointer;background:#00000080;position:absolute;top:0;left:0;right:0;transform:translateZ(-1px)}}.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv{gap:var(--base-size-8);display:flex}.Primer_Brand__AnchorNav-module__AnchorNav-action___mzhZ7{z-index:1;white-space:nowrap;padding-inline:var(--base-size-24);margin-left:auto;display:flex}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-action___mzhZ7{align-self:flex-start}@media screen and (width<=40rem){.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX{padding:0}.Primer_Brand__AnchorNav-module__AnchorNav-action___mzhZ7{display:none}.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv{flex-direction:column}.Primer_Brand__AnchorNav-module__AnchorNav--expanded___4Uge8 .Primer_Brand__AnchorNav-module__AnchorNav-action___mzhZ7{width:100%;margin-top:var(--base-size-8);display:flex}.Primer_Brand__AnchorNav-module__AnchorNav-inner-container___t_JyN{padding:var(--base-size-12) var(--base-size-16);overflow-y:auto}}@media screen and (width>=40rem){.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer___GrYsv{gap:var(--base-size-16)}.Primer_Brand__AnchorNav-module__AnchorNav__actionsContainer--multiple___pToLt{margin-inline-start:var(--base-size-16)}}@keyframes Primer_Brand__AnchorNav-module__fade-in___cNMRW{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX,.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX:before,.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX:after,.Primer_Brand__AnchorNav-module__AnchorNav___fA9HX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}