@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
2 lines (1 loc) • 20.6 kB
CSS
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ{z-index:90;background:var(--brand-SubdomainNavBar-canvas-default);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);border-bottom:1px solid #0000001a;height:75px;font-weight:550;position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container___IgUR_{z-index:90}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container___IgUR_:not(.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--fixed___MRCMj){position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--fixed___MRCMj{position:fixed;top:0;left:0;right:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___AG_fq{padding:4px 28px;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--centered___XNZiG{max-width:1280px;margin:0 auto}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___AG_fq{padding:4px 32px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--search-open___FzHaX{animation:.15s Primer_Brand__SubdomainNavBar-module__fade-out___N4ZdP}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-area___nL2Uc{align-items:center;gap:var(--base-size-8);max-width:340px;color:var(--brand-color-text-default);padding:0;padding:var(--base-size-16) 0;margin:0;list-style-type:none;display:inline-flex}@media screen and (width>=63.25rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-area___nL2Uc{gap:var(--base-size-16)}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_{color:var(--brand-color-text-default);position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-back-arrow___XrY4k{opacity:0;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;color:var(--brand-color-text-muted);position:absolute;left:-27px;transform:translate(5px)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_:hover .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-back-arrow___XrY4k{opacity:1;transform:translate(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title-separator___LZ_qq{color:var(--brand-color-text-muted);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-32);line-height:29px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-logo-mark____d4o_ svg{width:32px;height:32px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title___t_fVh{line-height:var(--base-size-32);padding-right:var(--base-size-16);white-space:nowrap;-webkit-text-decoration:none;text-decoration:none;position:relative;top:1px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-title___t_fVh:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav___jGodL{align-items:center;margin:0;padding:0;list-style-type:none;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{list-style-type:none}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--invisible___x6OZ_{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list--visible___WzNtG{margin:0;padding:0;display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper___XgFWC{z-index:2;background-color:var(--brand-color-canvas-default);width:100vw;height:calc(100vh - 75px);animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;animation-timing-function:var(--brand-animation-easing-default);flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:75px 0 0;overflow-y:auto}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-wrapper--close___1RqhN{display:none}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{align-items:center;width:100%;max-width:150px;margin:0 24px 0 0;padding:0;display:flex}}@media screen and (width>=768px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:100px}}@media screen and (width>=850px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:200px}}@media screen and (width>=1024px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:300px}}@media screen and (width>=1280px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:520px;margin-right:80px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-outer-container--has-actions___nygz4 .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___G_T3a{max-width:465px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item___v4aye{white-space:nowrap}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item___v4aye{animation-name:Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V;animation-duration:.5s;animation-delay:calc(var(--animation-order) * 80ms);animation-fill-mode:both;animation-timing-function:var(--brand-animation-easing-default)}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--visible___3J0tI{visibility:visible;opacity:1;order:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--invisible___J07zI{visibility:hidden;pointer-events:none;order:100}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list-item--overflow___mbCpF{order:99;position:relative;right:0}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);font-family:var(--brand-heading-fontFamily);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-20);line-height:var(--base-size-20);padding:var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);flex-direction:row;-webkit-text-decoration:none;text-decoration:none;display:flex;position:relative}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx{position:relative}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:first-of-type{padding-top:var(--base-size-24)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link--title___o6Xts{font-weight:var(--base-text-weight-medium)}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{font-family:var(--brand-heading-fontFamily);font-weight:var(--base-text-weight-normal);font-size:var(--base-size-16);line-height:var(--base-size-16);padding:var(--base-size-16) var(--base-size-16)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{content:"";background-color:var(--brand-SubdomainNavBar-border-nav-default);opacity:0;width:100%;height:2px;transition:opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);transform-origin:50%;position:absolute;bottom:-6px;left:0;transform:scale(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{opacity:1;transform:scale(.75)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:active .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{background-color:var(--brand-SubdomainNavBar-border-nav-pressed);transform:scale(.75)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{transition:background-color var(--brand-animation-easing-default) .25s;background-color:var(--brand-SubdomainNavBar-canvas-overflow-default);color:var(--brand-SubdomainNavBar-fg-overflow-default)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link-text___FIOYx:after{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:hover{background-color:var(--brand-SubdomainNavBar-canvas-overflow-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-item___gsrhh .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF:focus-visible{box-shadow:inset 0px 0px 0px 2px var(--brand-color-focus);outline:none}}@media screen and (width>=63.25rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-link___ekhaF{padding:var(--base-size-16) var(--base-size-24)}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu[aria-expanded=true]:hover:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu[aria-expanded=true]:focus:after{display:none}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-more-link___2UoCu{cursor:pointer;appearance:none;align-items:center;gap:var(--base-size-4);background-color:#0000;border:none;display:inline-flex}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu___1Fpy3{right:0;top:var(--base-size-48);background-color:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-large);animation:.25s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma,.25s forwards Primer_Brand__SubdomainNavBar-module__enlarge-shadow___iGPSy;animation-timing-function:var(--brand-animation-easing-default);position:absolute;overflow:hidden;box-shadow:0 8px 24px #01040926}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-overflow-menu-list____yMUW{width:max-content;margin:0;padding:0;list-style-type:none;display:grid}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-secondary-nav___cg18b{align-items:center;min-width:0;margin-left:auto;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___luJC1{align-items:center;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{cursor:pointer;appearance:none;border:var(--brand-borderWidth-thick) solid transparent;color:var(--brand-color-text-default);width:calc(48px - var(--brand-borderWidth-thick));height:calc(48px - var(--brand-borderWidth-thick));transition:border .25s var(--brand-animation-easing-default), box-shadow .25s ease;border-radius:var(--brand-borderRadius-medium);background-color:#0000;justify-content:center;align-items:center;display:flex;box-shadow:0 0 0 2px #0000}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R svg,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_ svg{width:24px;height:24px}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{align-self:center;display:inline-block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz{background-color:var(--brand-color-text-default);width:22px;height:2px;margin:var(--base-size-4) auto;border-radius:var(--brand-borderRadius-large);display:block}@media (prefers-reduced-motion:no-preference){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz{transition-timing-function:var(--brand-animation-easing-default);transition-property:opacity,transform;transition-duration:.5s}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:first-of-type{transform-origin:100% 100%}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(3){transform-origin:100% 0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:first-of-type{transform:rotate(-45deg)translateY(-3px)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(2){opacity:0;transform:scale(0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button--close___ofAoR .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button-bar___XSuBz:nth-of-type(3){transform:rotate(45deg)translateY(3px)}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R:hover,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_:hover{border:var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R:active,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_:active{box-shadow:0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-mobile-menu-button___von6y{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_ .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___rah9_{width:48px;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R{margin:0 var(--base-size-16) 0 auto}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area___8f5K5{gap:var(--base-size-16);align-items:center;min-width:0;display:inline-flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area-inner___UBvrS{gap:var(--base-size-8);min-width:0;display:flex}@media screen and (width<=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area___8f5K5{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area--visible___ryXWp{z-index:99;width:100%;height:auto;animation-name:Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both;animation-timing-function:var(--brand-animation-easing-default);display:flex;left:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--search-open___FzHaX .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area--visible___ryXWp{display:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-button-area-inner___UBvrS{flex-direction:column;width:100%;min-width:0;margin:24px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button___12YEw{white-space:nowrap}@media screen and (width>=1024px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-cta-button--secondary___yseqR{display:inline-flex}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-form___gg9BC{width:100%;display:flex}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{z-index:99;position:absolute}@media screen and (width<=767px){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{background:var(--brand-SubdomainNavBar-canvas-search);-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);width:100vw;height:100vh;animation:Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma var(--brand-animation-duration-fast);animation-timing-function:var(--brand-animation-easing-default);top:0;left:0;right:0}}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h{background-color:var(--brand-SubdomainNavBar-canvas-search);position:absolute;inset:0 0 1px}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog___b9d4h .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___luJC1 .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___v1X9R{margin-right:0}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_{background:var(--brand-SubdomainNavBar-canvas-default);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);height:74px;padding:var(--base-size-12) var(--base-size-28);align-items:center;gap:var(--base-size-4);animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;display:flex}@media screen and (width>=48rem){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-dialog-control-area___pG07_{max-width:570px;margin:0 auto}}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-text-input___3vzlg{border-color:#0000}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-container___JOfOM{padding:var(--base-size-24);background-color:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-large);width:80%;max-width:570px;height:70vh;max-height:514px;margin:0 auto;animation:.5s Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma;box-shadow:0 8px 24px #01040926}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results___h8tWb{padding:0 var(--base-size-24) 0 0;height:90%;margin:0;list-style:none;overflow-y:scroll}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-results-heading___QXRP1{font-weight:var(--brand-heading-weight-600);font-size:var(--base-size-20);line-height:var(--base-size-24);margin-bottom:var(--base-size-20);padding:0 var(--base-size-8);color:var(--base-color-scale-black-0);display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item___YGhFd{padding:var(--base-size-16) var(--base-size-8);border-bottom:1px solid #b7bfc7;border-bottom:solid var(--brand-borderWidth-thin,1px) var(--brand-SubdomainNavBar-search-results-border-default,#b7bfc7)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item___YGhFd[aria-selected=true] a{outline:var(--brand-color-focus) auto var(--brand-borderWidth-thick)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK{letter-spacing:var(--brand-heading-letterSpacing-400);font-size:var(--brand-text-size-400)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK a{color:var(--base-color-scale-black-0);margin:0 0 var(--base-size-12);font-size:var(--base-size-16);font-weight:var(--brand-heading-weight-400);font-family:var(--brand-heading-fontFamily);line-height:var(--brand-text-lineHeight-400);-webkit-text-decoration:none;text-decoration:none;display:block}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-container___reflK a:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-result-item-desc____KBS3{color:var(--base-color-scale-black-0)}.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-skip-to-content___bG_Zk{z-index:100;border-radius:0;width:100%;position:absolute;top:75px}@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___OOzma{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes Primer_Brand__SubdomainNavBar-module__fade-out___N4ZdP{0%{opacity:1}to{opacity:0}}@keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___iGPSy{0%{scale:.98;box-shadow:0 8px #01040926}to{scale:1;box-shadow:0 8px 24px #01040926}}@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___thp2V{0%{opacity:0;transform:scale(.6)translateY(-8px)}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ:before,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ:after,.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar___fdyTJ *{scroll-behavior:auto;transition:none;animation:none}}