| *, |
| :before, |
| :after { |
| box-sizing: border-box; |
| } |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, |
| 'Apple Color Emoji', 'Segoe UI Emoji'; |
| max-height: 100%; |
| line-height: 1.4; |
| } |
| button, |
| input, |
| select, |
| textarea { |
| font: inherit; |
| } |
| h1, h2, h3, h4, h5, h6, p, ol, ul { |
| margin-top: 1rem; |
| margin-bottom: 1rem; |
| } |
| table { |
| -webkit-border-horizontal-spacing: 0; |
| -webkit-border-vertical-spacing: 0; |
| } |
| code, |
| pre, |
| .linedtextarea .lines div { |
| font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; |
| } |
| pre, |
| .linedtextarea .lines div { |
| font-size: 0.83rem; |
| overflow-x: auto; |
| } |
| /* Trim spaces to be more like plain text spaces in text like "Use <code>go get</code> to ...", but not in Markdown <pre> blocks. */ |
| code { |
| word-spacing: -0.5ch; |
| } |
| pre code { |
| word-spacing: 0 !important; |
| } |
| pre { |
| line-height: 1.4; |
| overflow-x: auto; |
| } |
| pre .comment { |
| color: #007d9c; |
| } |
| pre .highlight, |
| pre .highlight-comment, |
| pre .selection-highlight, |
| pre .selection-highlight-comment { |
| background: #ffff00; |
| } |
| pre .selection, |
| pre .selection-comment { |
| background: #ff9632; |
| } |
| pre .ln { /* line number */ |
| color: #999; |
| } |
| pre ins { |
| /* For styling highlighted code in examples. */ |
| color: rgb(0, 125, 156); |
| font-weight: bold; |
| text-decoration: none; |
| } |
| .ln { |
| user-select: none; |
| |
| /* Ensure 8 characters in the document - which due to floating |
| * point rendering issues, might have a width of less than 1 each - are 8 |
| * characters wide, so a tab in the 9th position indents properly. See |
| * https://github.com/webcompat/web-bugs/issues/17530#issuecomment-402675091 |
| * for more information. */ |
| display: inline-block; |
| width: 8ch; |
| } |
| html, |
| .Site { |
| max-height: 100%; |
| min-height: 100vh; |
| scroll-padding-top: 4.6875rem; |
| } |
| a, |
| a:link, |
| a:visited { |
| color: #007d9c; |
| text-decoration: none; |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| .Site { |
| display: flex; |
| flex-direction: column; |
| margin: 0; |
| } |
| @media print { |
| /* display: flex makes the printer slice text lines in half */ |
| .Site { display: block; } |
| } |
| .bluebg { |
| background: #007d9c; |
| } |
| .SiteContent { |
| flex: 1; |
| } |
| .Site-footer { |
| border-top: 0.0625rem solid #dcdee0; |
| color: #fff; |
| font-size: 0.875rem; |
| } |
| .Site-header { |
| background: #007d9c; |
| border-bottom: none; |
| box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3); |
| top: 0; |
| width: 100%; |
| z-index: 10; |
| } |
| .CaseStudy-aboutBlock { |
| border: 0.0625rem solid #dcdee0; |
| border-radius: 0.25rem; |
| box-sizing: border-box; |
| padding: 3.75rem 2rem 3.75rem; |
| } |
| .CaseStudy-aboutBlockTitle { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: 500; |
| line-height: 3rem; |
| margin-bottom: 0.6875rem; |
| } |
| .CaseStudy-aboutBlockImg { |
| display: block; |
| margin: 0 auto; |
| max-height: 3.125rem; |
| } |
| .CaseStudy-aboutBlockBody { |
| color: #464a4d; |
| font-size: 1rem; |
| } |
| .UseCase-halfColumn { |
| color: #202224; |
| display: inline-block; |
| font-size: 1rem; |
| width: 100%; |
| } |
| @media only screen and (min-width: 48rem) { |
| .UseCase-halfColumn { |
| padding-right: 1.25rem; |
| width: 50%; |
| } |
| } |
| .UseCase-halfColumn > h2 { |
| line-height: 1.55; |
| } |
| @media print { |
| .Site-header { display: none; } |
| } |
| .Header, |
| .Container { |
| margin: 0 auto; |
| } |
| .Container { |
| max-width: 75.75rem; |
| } |
| .Container--padded { |
| padding: 0 1.5rem; |
| } |
| .Footer { |
| background-color: #253443; |
| } |
| .Footer-links { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| padding: 2rem 1.5rem 2.625rem 1.5rem; |
| } |
| .Footer-linkColumn { |
| flex: 0 0 9.5rem; |
| } |
| a.Footer-link { |
| color: #fff; |
| display: flex; |
| flex: 1; |
| font-size: 0.875rem; |
| line-height: 2rem; |
| } |
| a.Footer-link--primary { |
| font-size: 1.125rem; |
| line-height: 1.75rem; |
| margin-bottom: 0.5rem; |
| margin-top: 0.75rem; |
| } |
| .Footer-bottom { |
| align-items: center; |
| border-top: 0.0625rem solid #dcdee0; |
| display: flex; |
| margin: 0 1.5rem; |
| min-height: 4.125rem; |
| } |
| .Footer-gopher { |
| align-self: flex-end; |
| width: 5rem; |
| } |
| .Footer-listRow { |
| display: flex; |
| flex: 1; |
| flex-wrap: wrap; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| text-align: center; |
| } |
| .Footer-listItem { |
| align-items: center; |
| display: flex; |
| flex: 1 100%; |
| justify-content: center; |
| margin: 0.4rem 0; |
| padding: 0 1rem; |
| } |
| .Footer-listItem a:link, |
| .Footer-listItem a:visited { |
| color: #fff; |
| } |
| @media only screen and (min-width: 52rem) { |
| .Footer-listItem { |
| flex: initial; |
| } |
| .Footer-listItem + .Footer-listItem { |
| border-left: 0.0625rem solid #c6c8ca; |
| } |
| } |
| .Footer-feedbackButton { |
| background: none; |
| border: none; |
| color: #fff; |
| font-size: 0.875rem; |
| padding: 0; |
| } |
| .Footer-feedbackButton:hover { |
| cursor: pointer; |
| text-decoration: underline; |
| } |
| .Footer-googleLogo { |
| align-self: flex-end; |
| height: 1.5rem; |
| margin-bottom: 1.3rem; |
| text-align: right; |
| } |
| .Footer-googleLogoImg { |
| height: 1.5rem; |
| } |
| .Container--fullBleed { |
| margin: 0; |
| max-width: none; |
| } |
| .Header-nav { |
| align-items: center; |
| display: flex; |
| height: 3.5rem; |
| justify-content: space-between; |
| } |
| .Header-rightContent { |
| align-items: center; |
| display: flex; |
| height: 100%; |
| justify-content: flex-end; |
| width: 100%; |
| } |
| .Header--dark { |
| border-bottom: none; |
| color: #fff; |
| } |
| .Header-logo { |
| display: block; |
| height: 2rem; |
| margin-right: 2.25rem; |
| width: 5.125rem; |
| } |
| .Header-logo--hidden { |
| display: none; |
| } |
| .Header-logo--hidden { |
| display: none; |
| } |
| .Header-menuItem { |
| display: none; |
| } |
| .Header-menu { |
| align-items: stretch; |
| display: flex; |
| height: 100%; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| @media only screen and (min-width: 57.7rem) { |
| .Header, .PlayPage { |
| padding: 0 1.5rem; |
| } |
| .Header-menuItem { |
| align-items: stretch; |
| display: inline-flex; |
| flex: none; |
| } |
| .Header-menu { |
| justify-content: flex-end; |
| } |
| .Header-navOpen { |
| display: none; |
| } |
| } |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited { |
| align-items: center; |
| border-bottom: 0.1875rem solid transparent; |
| border-top: 0.1875rem solid transparent; /* To ensure the text remains centered. */ |
| color: #202224; |
| display: inline-flex; |
| margin: 0 0.3125rem; |
| padding: 0 0.9375rem; |
| text-align: center; |
| text-decoration: none; |
| width: 100%; |
| } |
| .Header--dark .Header-menuItem a:link, |
| .Header--dark .Header-menuItem a:visited { |
| color: #fff; |
| } |
| .Header-menuItem--active a:link, |
| .Header-menuItem--active a:visited { |
| border-bottom-color: #00add8; |
| font-weight: bold; |
| } |
| .Header-menuItem a:hover { |
| border-bottom-color: #fff; |
| color: #202224; |
| } |
| .Header-navOpen { |
| background: no-repeat center/2rem url('/images/menu-24px.svg'); |
| border: none; |
| height: 2.5rem; |
| margin: auto 1rem; |
| width: 2.5rem; |
| } |
| .Header-navOpen--white { |
| background: no-repeat center/2rem url('/images/menu-24px-white.svg'); |
| } |
| .NavigationDrawer { |
| background: #fff; |
| height: 100%; |
| left: auto; |
| max-width: 27rem; |
| position: fixed; |
| right: 0; |
| top: 0; |
| transform: translateX(100%); |
| transition: transform 100ms ease-in-out; |
| width: 85%; |
| z-index: 20; |
| } |
| .NavigationDrawer.is-active { |
| transform: translateX(0); |
| } |
| .NavigationDrawer-header { |
| align-items: center; |
| display: flex; |
| justify-content: space-between; |
| } |
| .NavigationDrawer-logo { |
| display: block; |
| height: 2rem; |
| margin: 1rem 1rem; |
| width: 5.125rem; |
| } |
| .NavigationDrawer-list { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| .NavigationDrawer-listItem { |
| font-size: 1.125rem; |
| margin: 0 0.5rem; |
| } |
| .NavigationDrawer-listItem a:link, |
| .NavigationDrawer-listItem a:visited { |
| display: block; |
| margin: 0 1rem; |
| padding: 0.5rem; |
| } |
| .NavigationDrawer-listItem--active { |
| background-color: #bfeaf4; |
| border-radius: 0.4rem; |
| } |
| .NavigationDrawer-scrim { |
| display: none; |
| height: 100%; |
| left: 0; |
| position: fixed; |
| top: 0; |
| width: 100%; |
| z-index: 5; |
| } |
| .NavigationDrawer.is-active + .NavigationDrawer-scrim { |
| background-color: rgba(0, 0, 0, 0.32); |
| display: block; |
| } |
| .Article { |
| color: #202224; |
| margin: 0 auto 1.875rem; |
| max-width: 75.75rem; |
| padding: 0 1.5rem; |
| } |
| h1 + h2.subtitle { |
| margin-top: -1rem; |
| font-size: 1.2rem !important; |
| margin-left: 1.25rem; /* note: matches TOC dl */ |
| } |
| .Talks .author { |
| margin-left: 1.25rem; |
| } |
| .Talks .author p { |
| margin: 0; |
| } |
| |
| .Article-author, |
| .Article-date { |
| font-size: 0.875rem; |
| } |
| .Article-date { |
| color: #6e7072; |
| } |
| .Article h1, |
| .Article h2, |
| .Article h3, |
| .Article h4, |
| .Article h5, |
| .Article h6 { |
| color: #202224; |
| } |
| .Article h1 { |
| font-size: 2.25rem; |
| } |
| .Article h2 { |
| font-size: 1.4rem; |
| } |
| .Article h3 { |
| font-size: 1.125rem; |
| } |
| .Article h4, |
| .Article h5, |
| .Article h6 { |
| font-size: 1rem; |
| } |
| .Article p, |
| .Article ul, |
| .Article ol { |
| color: #202224; |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: normal; |
| } |
| .Article ol .Article pre { |
| background-color: #fafafa; |
| border: 0.0625rem solid #dcdee0; |
| border-radius: 0.375rem; |
| color: #202224; |
| font-size: 1rem; |
| overflow-x: auto; |
| padding: 1.5rem; |
| } |
| .Article pre, |
| .Article code { |
| color: #202224; |
| } |
| .Article pre { |
| margin-left: 1.5rem; |
| } |
| .BreadcrumbNav-inner { |
| display: flex; |
| justify-content: start; |
| list-style: none; |
| margin: 0 auto; |
| max-width: 75.75rem; |
| padding: 0 0 1rem; |
| } |
| .BreadcrumbNav-li { |
| align-items: center; |
| display: flex; |
| white-space: nowrap; |
| } |
| a.BreadcrumbNav-link { |
| color: #202224; |
| font-size: 0.875rem; |
| text-decoration: none; |
| } |
| .BreadcrumbNav-li:last-child { |
| padding-right: 0.812rem; |
| white-space: normal; |
| } |
| .BreadcrumbNav-li:not(:last-child):after { |
| background: url('/images/icons/arrow-forward.svg') no-repeat; |
| content: ' '; |
| display: block; |
| height: 1rem; |
| margin: 0 0.8125rem; |
| width: 1rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .BreadcrumbNav-inner { |
| margin-top: 0; |
| } |
| } |
| .SubHero-gridContainer, |
| .WhoUses-gridContainer, |
| .Playground-gridContainer, |
| .WhoUsesHero-gridContainer, |
| .WhoUsesCaseStudyList-gridContainer, |
| .WhyGo-gridContainer, |
| .UseCases-gridContainer, |
| .LearnGo-gridContainer, |
| .Security-gridContainer { |
| display: flex; |
| flex-direction: column; |
| flex-wrap: wrap; |
| margin: 0 auto; |
| max-width: 75.75rem; |
| } |
| .SubHero-gridContainer, |
| .WhoUses-gridContainer, |
| .Playground-gridContainer, |
| .WhoUsesHero-gridContainer, |
| .WhyGo-gridContainer, |
| .UseCases-gridContainer, |
| .LearnGo-gridContainer, |
| .Security-gridContainer { |
| padding: 3rem 1.5rem 1rem; |
| } |
| .WhoUsesHero-gridContainer { |
| align-items: center; |
| } |
| @media only screen and (min-width: 28rem) { |
| .WhoUses-gridContainer, |
| .WhoUsesHero-gridContainer, |
| .WhoUsesCaseStudyList-gridContainer, |
| .WhyGo-gridContainer, |
| .UseCases-gridContainer, |
| .LearnGo-gridContainer, |
| .Security-gridContainer { |
| flex-direction: row; |
| justify-content: space-between; |
| } |
| .WhoUsesHero-gridContainer { |
| align-items: start; |
| } |
| } |
| .WhyGo, |
| .WhoUses { |
| background-color: #fff; |
| } |
| .LearnGo, |
| .UseCases { |
| background-color: #fafafa; |
| } |
| .WhoUses-header, |
| .WhyGo-header, |
| .LearnGo-header { |
| flex: 0 0 100%; |
| text-align: center; |
| } |
| .WhoUses-headerH2, |
| .WhyGo-headerH2, |
| .GettingStartedGo-headerH2, |
| .HomeSection-header, |
| .LearnGo-header h2 { |
| font-size: 1.25rem; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 1.75rem; |
| margin-bottom: 1.5rem; |
| margin-bottom: 0.5rem; |
| margin-top: 0; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .WhoUses-headerH2, |
| .WhyGo-headerH2, |
| .GettingStartedGo-headerH2, |
| .HomeSection-header, |
| .LearnGo-header h2 { |
| font-size: 2.25rem; |
| line-height: 2.625rem; |
| margin-bottom: 1.5rem; |
| } |
| } |
| .GoCarousel { |
| background-color: #fafafa; |
| display: flex; |
| justify-items: center; |
| overflow-x: hidden; |
| position: relative; |
| } |
| .GoCarousel-wrapper { |
| margin: auto; |
| max-width: 62.5rem; |
| overflow: hidden; |
| position: relative; |
| width: 90vw; |
| z-index: 1; |
| } |
| .GoCarousel-slide { |
| border-radius: 0.125rem; |
| cursor: pointer; |
| display: flex; |
| position: relative; |
| transition: all 1s; |
| } |
| .GoCarousel-controlPrev, |
| .GoCarousel-controlNext { |
| background-color: #fff; |
| border-radius: 1.25rem; |
| border-width: 0; |
| box-shadow: 0 0.0625rem 0.1875rem rgba(60, 64, 67, 0.15), |
| 0 0.0625rem 0.125rem rgba(60, 64, 67, 0.3); |
| color: #848688; |
| display: inline-block; |
| font-size: 2.5rem; |
| height: 2rem; |
| line-height: 2.5rem; |
| outline: none; |
| padding: 0 0.375rem 0 0.25rem; |
| position: absolute; |
| transition: transform 100ms; |
| width: 2rem; |
| z-index: 2; |
| } |
| .GoCarousel-controlPrev:focus, |
| .GoCarousel-controlNext:focus { |
| box-shadow: 0 0.0625rem 0.5rem rgba(60, 64, 67, 0.25), |
| 0 0.0625rem 0.25rem rgba(60, 64, 67, 0.4); |
| color: #555759; |
| } |
| .GoCarousel-controlPrev[hidden], |
| .GoCarousel-controlNext[hidden] { |
| display: none; |
| } |
| .GoCarousel-icon { |
| user-select: none; |
| } |
| .GoCarousel-controlPrev, |
| .GoCarousel-controlNext { |
| cursor: pointer; |
| font-size: 1.6875rem; |
| text-align: center; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
| .GoCarousel-controlPrev { |
| left: 1rem; |
| } |
| .GoCarousel-controlNext { |
| right: 1rem; |
| } |
| .GoCarousel-controlPrev:active, |
| .GoCarousel-controlNext:active { |
| transform: translateY(-50%) scale(0.9); |
| } |
| .GoCarousel-controlsContainer { |
| display: block; |
| margin: 0 auto; |
| max-width: 75.75rem; |
| position: relative; |
| width: auto; |
| width: 100%; |
| } |
| .GettingStartedGo-gridContainer { |
| display: flex; |
| flex-direction: column; |
| flex-wrap: wrap; |
| margin: 0 auto; |
| max-width: 75.75rem; |
| padding: 3.75rem 1.5rem 2.625rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .GettingStartedGo-gridContainer { |
| flex-direction: row; |
| } |
| .GoCarousel-controlPrev, |
| .GoCarousel-controlNext { |
| top: 50%; |
| } |
| } |
| .GettingStartedGo-header { |
| border-right: 0; |
| flex: 0 37%; |
| margin-bottom: 2rem; |
| padding-right: 0; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .GettingStartedGo-header { |
| border-right: 0.0133rem solid #f0f1f2; |
| margin-bottom: 0; |
| padding-right: 3.375rem; |
| } |
| } |
| .GettingStartedGo-headerDesc { |
| color: #202224; |
| } |
| .GettingStartedGo-ctas { |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-top: 1rem; |
| } |
| a.GettingStartedGo-primaryCta { |
| background: #007d9c; |
| border-radius: 0.125rem; |
| color: #fff; |
| display: inline-block; |
| margin-right: 1.3125rem; |
| padding: 0.4375rem 1.3125rem; |
| text-decoration: none; |
| } |
| .GettingStartedGo-resourcesSection { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| } |
| @media only screen and (min-width: 38rem) { |
| .GettingStartedGo-resourcesSection { |
| flex-direction: row; |
| } |
| } |
| .GettingStartedGo-resourcesList { |
| flex: 50%; |
| list-style: none; |
| margin: 0; |
| padding-left: 0; |
| padding-right: 2.375rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .GettingStartedGo-resourcesList { |
| padding-left: 3.375rem; |
| padding-right: 0; |
| } |
| } |
| .GettingStartedGo-resourcesHeader { |
| color: #555759; |
| font-size: 0.6875rem; |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| } |
| .GettingStartedGo-resourceItem { |
| margin-bottom: 1rem; |
| } |
| a.GettingStartedGo-resourceItemTitle { |
| color: #202224; |
| font-weight: 500; |
| } |
| .GettingStartedGo-resourceItemDescription { |
| color: #555759; |
| font-size: 0.8125rem; |
| } |
| .WhoUses-header h4, |
| .WhyGo-headerH4, |
| .LearnGo-header h4, |
| .WhoUses-subheader { |
| color: #202224; |
| font-size: 0.875rem; |
| font-style: normal; |
| font-weight: normal; |
| margin-bottom: 1.5rem; |
| margin-top: 0; |
| } |
| @media only screen and (min-width: 38rem) { |
| .WhoUses-header h4, |
| .WhyGo-headerH4, |
| .LearnGo-header h4, |
| .WhoUses-subheader { |
| font-size: 1rem; |
| } |
| } |
| .Hero { |
| color: #fff; |
| } |
| .Hero h1 { |
| font-size: 2.625rem; |
| font-weight: 500; |
| margin: 1rem 0; |
| } |
| .Hero h2 { |
| font-size: 1.5rem; |
| font-weight: normal; |
| max-width: 40rem; |
| } |
| .Hero-gridContainer { |
| column-gap: 1rem; |
| display: grid; |
| grid-template-columns: 3fr minmax(6.25rem, 1fr); |
| margin: 0 auto; |
| max-width: 40rem; |
| padding: 1rem 1.5rem 0; |
| } |
| .Hero-actions { |
| display: flex; |
| flex: 3 1; |
| flex-direction: column; |
| flex-wrap: wrap; |
| grid-column: 1 / 3; |
| margin-top: 1rem; |
| } |
| .Hero-actions > div { |
| display: flex; |
| width: 100%; |
| } |
| .Hero-actions a, |
| .Hero-actions a:visited, |
| .Hero-actions a:hover { |
| color: #fff; |
| margin: 0.5rem 0; |
| max-width: 13.75rem; |
| padding: 1rem 0; |
| text-align: center; |
| text-decoration: underline; |
| } |
| .Hero-actions a.Primary, |
| .Hero-actions a.Secondary { |
| align-items: center; |
| border-radius: 0.25rem; |
| display: flex; |
| flex-wrap: nowrap; |
| font-size: 0.875rem; |
| height: 2.5rem; |
| justify-content: center; |
| line-height: 1.3125rem; |
| margin: 0; |
| text-decoration: none; |
| width: 100%; |
| } |
| .Hero-actions a.Primary { |
| margin: 0 1.3125rem 0 0; |
| } |
| .Hero-actions a.Primary { |
| background-color: #fddd00; |
| border: 0.0625rem solid #fddd00; |
| box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.2); |
| color: #202224; |
| } |
| .Hero-actions a.Secondary { |
| border: 0.0625rem solid #fff; |
| color: #fff; |
| } |
| .DownloadBtn-versionNum { |
| font-size: 0.6875rem; |
| font-weight: 300; |
| } |
| .Hero-gopher { |
| align-items: flex-end; |
| display: flex; |
| grid-column: 2 / 3; |
| grid-row: 1 / 2; |
| justify-content: flex-end; |
| } |
| .Hero-gopherLadder { |
| bottom: 0; |
| height: 15rem; |
| max-width: 8rem; |
| object-fit: cover; |
| object-position: 100% 0; |
| right: 0; |
| width: 100%; |
| } |
| .Hero-blurb { |
| grid-column: 1 / 2; |
| margin: 0 auto; |
| } |
| .Hero-blurb h1 { |
| font-size: 1.375rem; |
| font-weight: 500; |
| margin-top: 0; |
| } |
| .Hero-blurbList { |
| font-size: 0.8125rem; |
| list-style: none; |
| margin-bottom: 0; |
| margin-top: 1rem; |
| padding: 0; |
| } |
| .Hero-blurbList li { |
| line-height: 1.125rem; |
| margin-bottom: 0.5rem; |
| padding-left: 1.5rem; |
| position: relative; |
| } |
| .Hero-blurbList svg { |
| left: 0; |
| margin-right: 0.6875rem; |
| position: absolute; |
| top: 0.3125rem; |
| } |
| .Hero-footnote { |
| flex-direction: column; |
| font-size: 0.8125rem; |
| margin: 0.5rem 0 1.5rem; |
| } |
| .Hero-footnote p { |
| margin: 0; |
| } |
| .Hero-footnote p + p { |
| margin-top: 0.75rem; |
| } |
| .Hero-footnote a { |
| color: #fff; |
| text-decoration: underline; |
| } |
| .SubHero-gridContainer { |
| display: grid; |
| gap: 0 5vw; |
| grid-template-columns: 1fr; |
| } |
| .SubHero-blurb { |
| margin: 0 auto 0; |
| max-width: 25rem; |
| } |
| .SubHero-blurb:not(:last-of-type) { |
| margin: 0 auto 4rem; |
| } |
| .SubHero-blurb h3 { |
| margin-top: 0; |
| text-align: center; |
| } |
| .SubHero-blurb p { |
| margin-bottom: 0; |
| } |
| @media only screen and (min-width: 38rem) { |
| .Hero-blurb { |
| margin: auto; |
| } |
| } |
| @media only screen and (min-width: 48rem) { |
| .Hero-gridContainer { |
| gap: 0 5vw; |
| grid-template-columns: 2.5fr minmax(auto, 16.25rem); |
| max-width: 75.75rem; |
| } |
| .Hero-gopherLadder { |
| height: 23rem; |
| max-width: 11.5rem; |
| } |
| .Hero-actions { |
| align-items: flex-start; |
| flex: 1 1; |
| flex-direction: row; |
| grid-column: 1 / 2; |
| justify-content: initial; |
| } |
| .Hero-actions a, |
| .Hero-actions a:visited, |
| .Hero-actions a:hover { |
| max-width: 17.5rem; |
| } |
| .Hero-actions a.Primary, |
| .Hero-actions a.Secondary { |
| font-size: 1.5rem; |
| height: 4rem; |
| line-height: 1.75rem; |
| } |
| .Hero-actions a.Secondary { |
| margin: 0; |
| } |
| .Hero-footnote { |
| margin: 1rem 0 1.5rem; |
| } |
| .Hero-blurb { |
| grid-column: 1 / 2; |
| margin: 2.5rem auto 0; |
| } |
| .Hero-gopher { |
| grid-row: 1 / 3; |
| } |
| .Hero-blurb h1 { |
| font-size: 2.45rem; |
| font-weight: 500; |
| } |
| .Hero-blurbList { |
| font-size: 1rem; |
| } |
| .SubHero-gridContainer { |
| grid-template-columns: 1fr 1fr 1fr; |
| } |
| .SubHero-blurb { |
| margin: 0 auto; |
| } |
| .DownloadBtn-versionNum { |
| font-size: 1rem; |
| font-weight: 300; |
| } |
| } |
| .WhoUsesHero { |
| background-color: #fafafa; |
| } |
| .WhoUses-subheader { |
| color: #202224; |
| margin-bottom: 0; |
| margin-left: auto; |
| margin-right: auto; |
| max-width: 25rem; |
| } |
| .WhoUsesHero-gridContainer { |
| display: flex; |
| justify-content: space-between; |
| width: 100%; |
| } |
| .WhoUses-heroImg { |
| max-width: 38.75rem; |
| width: 100%; |
| } |
| .WhoUses-heroInnerLeft { |
| margin-bottom: 2rem; |
| margin-right: 0; |
| max-width: 19.625rem; |
| text-align: center; |
| width: 90%; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .WhoUses-heroInnerLeft { |
| margin-right: 2rem; |
| text-align: start; |
| width: 19.625rem; |
| } |
| .WhoUses-subheader { |
| max-width: none; |
| } |
| } |
| .WhoUses-heroInnerLeft h3 { |
| font-size: 1.5rem; |
| font-weight: normal; |
| margin: 1.375rem 0; |
| } |
| .WhoUses-heroInnerLeft p { |
| color: #6e7072; |
| font-size: 0.875rem; |
| margin-bottom: 1.188rem; |
| } |
| .WhoUsesCaseStudyList { |
| align-content: center; |
| display: flex; |
| flex: 0 0 100%; |
| justify-content: space-evenly; |
| list-style: none; |
| } |
| .WhoUsesCaseStudyList-gridContainer { |
| display: grid; |
| gap: 0.8rem; |
| grid-template-columns: repeat(3, minmax(0, 33.333%)); |
| margin: 1.5rem auto 3.75rem; |
| padding: 0; |
| width: 100%; |
| } |
| .WhoUsesCaseStudyList-caseStudy { |
| align-items: center; |
| display: flex; |
| flex: 0 1 50%; |
| height: 3.8512rem; |
| justify-content: center; |
| position: relative; |
| } |
| .WhoUsesCaseStudyList-caseStudy p { |
| display: none; |
| } |
| .WhoUsesCaseStudyList-caseStudyLink:link, |
| .WhoUsesCaseStudyList-caseStudyLink:visited { |
| color: #6e7072; |
| flex-direction: column; |
| text-align: center; |
| text-decoration: none; |
| transition: box-shadow 0.2s ease-in-out; |
| } |
| .WhoUsesCaseStudyList-caseStudyLink:link:hover { |
| box-shadow: 0 -0.0625rem 0.3125rem rgba(128, 134, 139, 0.09), |
| 0 0.1875rem 0.3125rem rgba(128, 134, 139, 0.06), |
| 0 0.0625rem 0.125rem rgba(60, 64, 67, 0.3), |
| 0 0.0625rem 0.1875rem rgba(60, 64, 67, 0.15); |
| } |
| .WhoUsesCaseStudyList-caseStudyLink img { |
| height: auto; |
| } |
| @media only screen and (max-width: 38rem) { |
| .WhoUsesCaseStudyList-caseStudyLink img { |
| max-height: 2rem; |
| max-width: 100%; |
| } |
| } |
| .WhoUsesCaseStudyList-logo { |
| margin: auto; |
| max-height: 4rem; |
| max-width: 9.375rem; |
| width: auto; |
| } |
| .WhoUsesCaseStudyList-caseStudyLink:link, |
| .WhoUsesCaseStudyList-caseStudyLink:visited { |
| border-radius: 0.25rem; |
| box-shadow: #f0f1f2 0 0.0625rem 0.25rem; |
| display: flex; |
| height: 100%; |
| padding: 0 0.3rem; |
| width: 100%; |
| } |
| .WhoUsesCaseStudyList-seeAll { |
| display: inline-block; |
| margin-left: 1rem; |
| } |
| .WhoUsesCaseStudyList-seeAll:hover { |
| text-decoration: none; |
| } |
| @media only screen and (min-width: 32rem) { |
| .WhoUsesCaseStudyList-gridContainer { |
| gap: 1rem 1.125rem; |
| } |
| .WhoUsesCaseStudyList-caseStudyLink { |
| padding: 0 1.5rem; |
| } |
| .WhoUsesCaseStudyList-caseStudy { |
| height: 5.9375rem; |
| } |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .WhoUsesCaseStudyList-gridContainer { |
| grid-template-columns: repeat(4, minmax(0, 25%)); |
| } |
| .WhoUsesCaseStudyList-caseStudyLink:link, |
| .WhoUsesCaseStudyList-caseStudyLink:visited { |
| color: transparent; |
| } |
| .WhoUses-caseStudy a:link:hover, |
| .WhoUses-caseStudy a:visited:hover { |
| box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22); |
| } |
| .WhoUsesCaseStudyList-caseStudyLink:link:hover |
| .WhoUsesCaseStudyList-caseStudyLink:visited:hover { |
| color: #6e7072; |
| transition: all 0.2s ease-in-out; |
| } |
| } |
| @media only screen and (min-width: 66.75rem) { |
| .WhoUsesCaseStudyList-gridContainer { |
| grid-template-columns: repeat(6, 1fr); |
| } |
| .WhoUsesCaseStudyList-caseStudy { |
| flex: 0 1 1fr; |
| } |
| } |
| .FeaturedUsers { |
| margin: 2.375rem auto 3.75rem; |
| } |
| .FeaturedUsers table { |
| border-collapse: collapse; |
| margin-bottom: 1.5rem; |
| } |
| .FeaturedUsers table thead { |
| background-color: #fafafa; |
| } |
| .FeaturedUsers table thead th { |
| color: #555759; |
| font-size: 1rem; |
| font-weight: 500; |
| padding: 0.75rem 0; |
| } |
| .FeaturedUsers table thead th:not(:nth-child(1)) { |
| text-align: left; |
| } |
| .FeaturedUsers table td th:not(:nth-child(1)) { |
| text-align: left; |
| } |
| .FeaturedUsers table tr td, |
| .FeaturedUsers table tr th { |
| padding: 1rem 0.3rem; |
| width: 30%; |
| } |
| .FeaturedUsers table tr td:first-of-type { |
| padding-left: 1rem; |
| } |
| .FeaturedUsers table tr td:first-of-type, |
| .FeaturedUsers table tr th:first-of-type { |
| width: 15%; |
| } |
| .FeaturedUsers table tr td:nth-of-type(2), |
| .FeaturedUsers table tr th:nth-of-type(2) { |
| width: 40%; |
| } |
| .FeaturedUsers table td { |
| color: #202224; |
| font-size: 0.875rem; |
| vertical-align: top; |
| } |
| .FeaturedUsers table td ul { |
| margin-top: 0; |
| padding-left: 1rem; |
| } |
| .FeaturedUsers table td ul li { |
| font-size: 0.875rem; |
| } |
| .FeaturedUsers table thead { |
| color: #555759; |
| font-size: 1rem; |
| font-weight: 500; |
| } |
| .FeaturedUsers table tbody tr { |
| border-bottom: 0.0625rem solid #dcdee0; |
| } |
| .FeaturedUsers table tbody tr td { |
| margin: 0; |
| } |
| .FeaturedUsers table tbody tr td img { |
| width: 5rem; |
| } |
| .FeaturedUsers-moreProjectsBtn { |
| background: transparent; |
| border: none; |
| color: #5dc9e2; |
| cursor: pointer; |
| font-size: 0.875rem; |
| padding: 0.5rem 0; |
| position: relative; |
| } |
| .FeaturedUsers--hiddenDesktop { |
| display: block; |
| height: 3rem; |
| margin-bottom: 1rem; |
| width: auto; |
| } |
| .FeaturedUsers--hiddenMobile, |
| .FeaturedUsers--hiddenMobile { |
| display: none; |
| } |
| @media only screen and (max-width: 48rem) { |
| .FeaturedUsers table tbody tr td:last-of-type { |
| padding-left: 1rem; |
| padding-top: 5rem; |
| } |
| } |
| @media only screen and (min-width: 48rem) { |
| .FeaturedUsers--hiddenMobile, |
| .FeaturedUsers--hiddenMobile { |
| display: table-cell; |
| } |
| .FeaturedUsers table tr td { |
| padding: 1rem 2rem 1rem 0; |
| width: 30%; |
| } |
| .FeaturedUsers--hiddenDesktop { |
| display: none; |
| } |
| } |
| .WhoUsesCaseStudy-librariesWrapper { |
| margin-bottom: 2.25rem; |
| margin-top: 1.875rem; |
| } |
| a.WhoUsesCaseStudy-librariesViewMoreLink { |
| color: #007d9c; |
| font-size: 0.875rem; |
| } |
| .WhoUsesCaseStudy-libraryTitle { |
| font-weight: normal; |
| } |
| .WhoUsesCaseStudy-librariesList { |
| column-gap: 7.375rem; |
| display: grid; |
| grid-template-columns: 1fr; |
| list-style: none; |
| margin: 1.5rem 0 0; |
| padding: 0; |
| } |
| .WhoUsesCaseStudy-librariesList h3 { |
| font-weight: 500; |
| } |
| .WhoUsesCaseStudy-library { |
| margin: 0 0 1.5rem; |
| } |
| .WhoUsesCaseStudy-library p { |
| color: #202224; |
| font-size: 1rem; |
| line-height: 1.1875rem; |
| margin: 0.5rem 0 0; |
| } |
| .WhoUsesCaseStudy-view-more { |
| margin-bottom: 2.5rem; |
| } |
| .WhoUsesCaseStudy-view-more a { |
| color: #202224; |
| font-size: 0.875rem; |
| font-style: normal; |
| font-weight: 500; |
| margin-bottom: 2.5rem; |
| text-align: center; |
| } |
| @media only screen and (min-width: 38rem) { |
| .WhoUsesCaseStudy-librariesList { |
| column-gap: 4rem; |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
| .UseCases-gridContainer { |
| flex-direction: row; |
| justify-content: space-around; |
| margin: -1rem 0 0 -1rem; /* Offset gutters for the leftmost and top cells in the grid. */ |
| } |
| .UseCase { |
| flex: 1 0 15.625rem; |
| margin-top: 1rem; |
| max-width: 15.625rem; |
| padding: 1rem 0 0 1rem; /* Gutter between grid cells. */ |
| } |
| .UseCase-logo { |
| align-items: center; |
| background: linear-gradient(10.64deg, #007d9c 0%, #00a29c 100%); |
| border-radius: 50%; |
| display: flex; |
| height: 3.75rem; |
| justify-content: center; |
| margin: auto; |
| width: 3.75rem; |
| } |
| .UseCase-logo img { |
| height: 2.625rem; |
| width: 2.625rem; |
| } |
| .UseCase-title { |
| text-align: center; |
| } |
| .UseCase-action { |
| font-size: 1.125rem; |
| line-height: 2.5rem; |
| text-align: center; |
| } |
| .WhyGo-gridContainer { |
| align-items: center; |
| justify-content: center; |
| } |
| .WhyGo-reasons { |
| column-gap: 3.313rem; |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| justify-content: space-between; |
| list-style: none; |
| padding-left: 0; |
| row-gap: 2rem; |
| } |
| .WhyGo-forwardArrowIcon, |
| .Solutions-forwardArrowIcon { |
| font-size: 1rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .WhyGo-reasons { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .WhyGo-reasons { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| .WhyGo-reason { |
| border: 0.063rem solid #dcdee0; |
| border-radius: 0.25rem; |
| display: flex; |
| flex: 0 30%; |
| flex-direction: column; |
| height: 100%; |
| justify-content: space-between; |
| margin-bottom: 1.5rem; |
| margin-top: 0; |
| max-width: 40rem; |
| } |
| .WhyGo-reasonDetails { |
| padding: 2rem 2rem 0.188rem; |
| } |
| .WhyGo-reasonFooter { |
| background-color: rgba(246, 248, 248, 0.35); |
| padding: 1rem 2rem 2rem; |
| } |
| .WhyGo-reasonIcon { |
| margin-bottom: 1rem; |
| text-align: left; |
| } |
| .WhyGo-reasonIcon img { |
| height: 2.25rem; |
| } |
| .WhyGo-reasonLearnMoreLink { |
| margin-top: 1.5rem; |
| } |
| .WhyGo-reasonLearnMoreLink a { |
| align-items: center; |
| display: flex; |
| font-size: 0.875rem; |
| text-decoration: none; |
| } |
| .WhyGo-reasonPackages { |
| color: #202224; |
| font-size: 0.875rem; |
| } |
| .WhyGo-reasonPackagesHeader { |
| margin-bottom: 0.688rem; |
| } |
| .WhyGo-reasonPackagesHeader img { |
| height: 0.938rem; |
| margin-right: 0.376rem; |
| padding: 0.063rem 0 0.063rem; |
| vertical-align: bottom; |
| } |
| .WhyGo-reasonPackagesList { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| padding: 0; |
| } |
| .WhyGo-reasonPackage { |
| border: 0.063rem solid #bfeaf4; |
| border-radius: 0.125rem; |
| box-sizing: border-box; |
| color: #007d9c; |
| font-size: 0.688rem; |
| line-height: 0.813rem; |
| list-style: none; |
| margin: 0.125rem 0.5rem 0.5rem 0; |
| padding: 0.188rem 0.188rem; |
| |
| text-align: center; |
| } |
| .WhyGo-reasonShowMoreImgWrapper { |
| align-items: center; |
| background-color: #fafafa; |
| border-radius: 50%; |
| display: flex; |
| height: 14.313rem; |
| margin: 2.5rem auto 1.375rem; |
| width: 14.313rem; |
| } |
| .WhyGo-reasonShowMoreImg { |
| margin-left: 5%; |
| width: 100%; |
| } |
| .WhyGo-reasonShowMoreLink { |
| font-size: 0.875rem; |
| text-align: center; |
| } |
| .WhyGo-reasonShowMoreLink a { |
| border: 0.063rem solid #bfeaf4; |
| border-radius: 0.125rem; |
| box-sizing: border-box; |
| display: inline-block; |
| padding: 0.275rem 1.063rem 0.275rem 0.275rem; |
| text-decoration: none; |
| } |
| .WhyGo-reasonShowMoreLink a i { |
| padding-bottom: 0.063rem; |
| vertical-align: middle; |
| } |
| .WhyGo-reasonText p { |
| color: #202224; |
| font-size: 1rem; |
| font-weight: normal; |
| } |
| .WhyGo-reasonTitle { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: 500; |
| } |
| .WhyGo-gopher { |
| flex: 1; |
| max-width: 28.4375rem; |
| text-align: center; |
| } |
| .WhyGo-gopher img { |
| width: 100%; |
| } |
| |
| .headerWithLink { |
| display: flex; |
| justify-content: space-between; |
| width: 100%; |
| } |
| |
| .headerWithLink h3 { |
| font-weight: 500; |
| margin-bottom: 0; |
| } |
| .headerLink { |
| align-self: center; |
| font-size: 1.125rem; |
| font-weight: 600; |
| margin: 0; |
| } |
| .LearnGo-subHeader { |
| display: flex; |
| justify-content: space-between; |
| width: 100%; |
| } |
| .LearnGo-subHeader h3 { |
| color: #6e7072; |
| font-size: 1rem; |
| font-weight: normal; |
| } |
| .LearnGo-courses { |
| display: flex; |
| flex: 1 0 100%; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: space-around; |
| list-style: none; |
| margin: 0 0 1rem -1rem; /* Offset gutters for the leftmost and top cells in the grid. */ |
| padding-left: 0; |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .LearnGo-courses { |
| justify-content: space-between; |
| } |
| } |
| .LearnGo-courseItem { |
| align-items: center; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| padding: 1rem 0 0 1rem; /* Gutter between grid cells. */ |
| } |
| .LearnGo-courseItem a { |
| color: #202224; |
| } |
| .LearnGo-courseTitle { |
| text-align: center; |
| } |
| .LearnGo-courseImage { |
| align-items: center; |
| background-color: #fff; |
| border-radius: 0.3125rem; |
| box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22); |
| display: flex; |
| height: 11rem; |
| justify-content: center; |
| margin: auto; |
| max-width: 16.5rem; |
| width: 16.5rem; |
| } |
| .LearnGo-courseImage img { |
| max-height: 100%; |
| max-width: 100%; |
| } |
| .GoCarousel-eventsWrapper { |
| margin: auto; |
| max-width: 68rem; |
| overflow: hidden; |
| position: relative; |
| width: 84vw; |
| } |
| .GoCarousel-eventsSlides { |
| display: flex; |
| left: 0; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| top: 0; |
| transition: left 0.2s ease-out; |
| width: 625rem; |
| } |
| .GoCarousel-eventGroup { |
| align-items: flex-start; |
| border-radius: 0.125rem; |
| cursor: pointer; |
| display: flex; |
| margin: 1rem 0; |
| padding: 1rem; |
| position: relative; |
| transition: all 1s; |
| width: 84vw; |
| } |
| .GoCarousel-eventsSlidesingleItem { |
| display: flex; |
| flex: 1; |
| margin-right: 2rem; |
| } |
| .GoCarousel-eventThumbnail { |
| background-color: #fff; |
| border: 0.0625rem solid #dcdee0; |
| border-radius: 0.5rem; |
| display: flex; |
| height: 100%; |
| margin-right: 1.3125rem; |
| width: 6.625rem; |
| } |
| .GoCarousel-eventThumbnail img { |
| align-self: center; |
| height: auto; |
| object-fit: contain; |
| padding: 1rem; |
| width: 100%; |
| } |
| .GoCarousel-eventBody { |
| display: inline-flex; |
| flex: 1; |
| flex-direction: column; |
| height: 100%; |
| min-width: 0; |
| position: relative; |
| } |
| .GoCarousel-eventDate { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| } |
| .GoCarousel-eventDate p { |
| color: #555759; |
| font-size: 0.8125rem; |
| font-style: normal; |
| margin: 0 0 1.5rem 0; |
| } |
| .GoCarousel-eventHeader { |
| color: #555759; |
| font-size: 0.6875rem; |
| font-weight: 500; |
| margin: 0 0 0.875rem; |
| text-transform: uppercase; |
| } |
| .GoCarousel-eventName { |
| margin: 0 0 0.25rem 0; |
| width: 100%; |
| } |
| .GoCarousel-eventName a { |
| -webkit-box-orient: vertical; |
| color: #202224; |
| display: -webkit-box; |
| font-weight: 500; |
| -webkit-line-clamp: 2; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .LearnGo-eventDescription { |
| -webkit-box-orient: vertical; /* See webkit-line-clamp */ |
| display: -webkit-box; /* See webkit-line-clamp */ |
| -webkit-line-clamp: 4; /* Elide flex text. webkit-line-clamp is broadly compatible with browsers. */ |
| } |
| .GoCarousel-viewMore { |
| bottom: 0; |
| font-size: 0.875rem; |
| margin: 0; |
| min-width: 6.25rem; |
| position: absolute; |
| } |
| @media only screen and (min-width: 48rem) { |
| .GoCarousel-eventGroup { |
| width: 42vw; |
| } |
| } |
| @media only screen and (min-width: 66.75rem) { |
| .GoCarousel-eventThumbnail img { |
| display: block; |
| margin: auto; |
| } |
| .GoCarousel-eventDate { |
| flex: 0; |
| flex-direction: row; |
| justify-content: flex-start; |
| min-width: 9rem; |
| } |
| .GoCarousel-eventText { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| min-width: 0; |
| position: relative; |
| } |
| .GoCarousel-viewMore { |
| text-align: left; |
| width: 15.625rem; |
| } |
| .GoCarousel-eventBody { |
| display: flex; |
| flex-direction: column; |
| } |
| .GoCarousel-eventGroup { |
| max-width: 22.66rem; |
| width: 28vw; |
| } |
| } |
| |
| .Learn-hero, |
| .Security-hero { |
| background-color: #fafafa; |
| background-image: radial-gradient( |
| 60.0625rem 60.0625rem, |
| #bfeaf4 50%, |
| #fafafa 50% |
| ); |
| background-position: top -50rem left -9rem; |
| background-repeat: no-repeat; |
| background-size: 75rem 75rem; |
| padding: 0 2.25rem 0; |
| } |
| |
| .Learn-hero .Container, |
| .Security-hero .Container { |
| max-width: 68.125rem; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .Learn-heroInner, |
| .Security-heroInner { |
| display: flex; |
| flex-direction: column-reverse; |
| } |
| |
| .Learn-heroGopher, |
| .Security-heroGopher { |
| display: flex; |
| justify-content: flex-end; |
| padding-top: 1.25rem; |
| } |
| |
| .Learn-heroGopher img, |
| .Security-heroGopher img { |
| height: 13.5625rem; |
| width: auto; |
| } |
| |
| .Learn-heroContent { |
| padding-top: 1.125rem; |
| } |
| |
| .Learn-heroContent a:not(.js-downloadBtn) { |
| text-decoration: underline; |
| } |
| |
| .Learn-heroContent h1, |
| .Security-heroContent h1 { |
| font-size: 1.5rem; |
| font-style: normal; |
| font-weight: normal; |
| line-height: 2rem; |
| } |
| |
| .Learn-heroContent p, |
| .Security-heroContent p { |
| color: #6e7072; |
| font-size: 0.875rem; |
| max-width: 27.1875rem; |
| } |
| |
| .Learn-heroAction, |
| .Security-heroAction { |
| align-items: center; |
| background-color: #007d9c; |
| border-radius: 0.25rem; |
| display: flex; |
| height: 2.5rem; |
| justify-content: center; |
| width: 10.5rem; |
| } |
| |
| .Learn-heroAction a, |
| .Learn-heroAction a:hover, |
| .Learn-heroAction a:visited, |
| .Security-heroAction a, |
| .Security-heroAction a:hover, |
| .Security-heroAction a:visited { |
| color: #ffffff; |
| font-size: 0.875rem; |
| font-weight: 500; |
| text-decoration: none; |
| } |
| |
| .Learn-heroAction span, |
| .Security-heroAction span { |
| font-weight: normal; |
| } |
| |
| /* Learn/Security page grid rules */ |
| |
| .LearnGo-gridContainer, |
| .Security-gridContainer { |
| display: flex; |
| justify-content: center; |
| padding: 0rem 0rem 1rem; |
| } |
| |
| .Learn-cardList, |
| .Security-cardList { |
| column-gap: 3.313rem; |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| justify-content: space-between; |
| list-style: none; |
| padding-left: 0; |
| row-gap: 2rem; |
| } |
| |
| .Learn-card, |
| .Security-card { |
| height: 23.375rem; |
| max-width: 40rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-cardList, |
| .Security-cardList { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .Learn-cardList, |
| .Security-cardList { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| } |
| |
| /* End Learn/Security page grid rules */ |
| |
| /* Learn quickstart grid */ |
| |
| .Learn-hero .Learn-quickstarts { |
| margin: 0; |
| margin-top: 4rem; |
| } |
| |
| .Learn-hero .Learn-quickstart { |
| height: auto; |
| } |
| |
| .Learn-hero .LearnGo-gridContainer { |
| padding: 3rem 0rem 3rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-hero .Learn-cardList { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media only screen and (min-width: 57.7rem) { |
| .Learn-hero .Learn-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .Learn-hero .Learn-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| |
| /* Learn hero section */ |
| |
| @media only screen and (min-width: 57.7rem) { |
| .Learn-hero, |
| .Security-hero { |
| background-position: top -35rem left 30rem; |
| } |
| |
| .Learn-heroInner, |
| .Security-heroInner { |
| flex-direction: row; |
| justify-content: space-between; |
| } |
| |
| .Learn-heroContent, |
| .Security-heroContent { |
| padding-top: 3.75rem; |
| } |
| |
| .Learn-heroGopher, |
| .Security-heroGopher { |
| flex: 1; |
| justify-content: center; |
| padding-top: 2.625rem; |
| } |
| |
| .Learn-heroGopher img, |
| .Security-heroGopher img { |
| height: 21.0625rem; |
| } |
| |
| .Learn-heroAction, |
| .Security-heroAction { |
| height: 4rem; |
| width: 16.5625rem; |
| } |
| |
| .Learn-heroAction a, |
| .Learn-heroAction a:hover, |
| .Learn-heroAction a:visited, |
| .Security-heroAction a, |
| .Security-heroAction a:hover, |
| .Security-heroAction a:visited { |
| font-size: 1.5rem; |
| } |
| |
| .Learn-heroAction span, |
| .Security-heroAction span { |
| font-size: 1rem; |
| } |
| } |
| |
| @media only screen and (min-width: 91rem) { |
| .Learn-hero, |
| .Security-hero { |
| background-position: top -35rem left 50rem; |
| } |
| } |
| |
| .Learn-guided, |
| .Learn-online, |
| .Learn-selfPaced, |
| .Learn-books, |
| .Learn-inPersonTraining, |
| .Learn-meetups { |
| margin-top: 3.75rem; |
| padding: 0 1.5rem; |
| } |
| |
| .Learn-learningResources { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| margin: 3.75rem 0; |
| } |
| |
| .Learn-learningResources h2, |
| .Learn-learningResourcesHeader h3, |
| .Security-sectionHeader h3 { |
| margin: 0; |
| } |
| |
| .Learn-learningResources h2 { |
| font-size: 2rem; |
| font-weight: 500; |
| line-height: 2.3125rem; |
| } |
| |
| .Learn-learningResourcesHeader, |
| .Security-sectionHeader { |
| display: flex; |
| justify-content: center; |
| } |
| |
| .Learn-learningResourcesHeader h3 { |
| font-size: 1.5rem; |
| font-weight: bold; |
| line-height: 2.25rem; |
| } |
| |
| .Learn-selfPaced .Learn-card .Card-content { |
| justify-content: space-between; |
| } |
| |
| .Learn-online .Card-thumbnail { |
| background-position: 1.5rem center; |
| background-repeat: no-repeat; |
| background-size: auto 1.5rem; |
| height: 7.5625rem; |
| } |
| |
| .Learn-selfPaced .Learn-card { |
| height: 20.3125rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-learningResourcesHeader { |
| display: flex; |
| justify-content: flex-start; |
| } |
| |
| .Learn-learningResourcesHeader h2, |
| .Security-sectionHeader h2 { |
| font-size: 2.25rem; |
| line-height: 2.625rem; |
| } |
| } |
| |
| .Learn-cardList.Learn-bookList { |
| grid-template-columns: repeat(1, 1fr); |
| width: 100%; |
| } |
| |
| .Learn-card.Learn-book { |
| height: auto; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-cardList.Learn-bookList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .Learn-card.Learn-book { |
| max-width: 13.125rem; |
| } |
| } |
| |
| @media only screen and (min-width: 57.7rem) { |
| .Learn-cardList.Learn-bookList { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| } |
| |
| @media only screen and (min-width: 72.75rem) { |
| .Learn-cardList.Learn-bookList { |
| grid-template-columns: repeat(5, 1fr); |
| } |
| } |
| |
| .Learn-inPersonList { |
| display: flex; |
| flex: 1 0 100%; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| list-style: none; |
| margin: 1.875rem 0 1.875rem -1rem; /* Offset gutters for the leftmost and top cells in the grid. */ |
| padding-left: 0; |
| } |
| |
| .Learn-inPerson { |
| border-bottom: 0.0625rem solid #dcdee0; |
| flex: 1 1 31.25rem; |
| margin: 0 0 0 1rem; /* Gutter between grid cells. */ |
| max-width: 31rem; |
| padding-bottom: 1.25rem; |
| } |
| |
| .Learn-inPerson:nth-child(1), |
| .Learn-inPerson:nth-child(2) { |
| border-top: 0.0625rem solid #dcdee0; |
| } |
| .Learn-inPersonTitle { |
| font-size: 1.25rem; |
| } |
| .Learn-inPersonBlurb { |
| margin: 0; |
| } |
| |
| .Learn-events { |
| flex: 1 0 100%; |
| list-style: none; |
| margin: 0.5rem 0 1.875rem; |
| padding: 0; |
| width: 100%; |
| } |
| .Learn-eventItem { |
| align-items: flex-start; |
| display: flex; |
| flex-direction: column; |
| padding: 1.875rem 0 0.175rem 0; |
| } |
| .Learn-eventItem + .Learn-eventItem { |
| border-top: 0.0625rem solid #dcdee0; |
| } |
| |
| .Learn-eventThumbnail { |
| align-self: center; |
| display: flex; |
| flex: 0 0 3rem; |
| height: auto; |
| margin-bottom: 1rem; |
| } |
| .Learn-eventThumbnail--noimage { |
| background-color: #fff; |
| } |
| .Learn-eventThumbnail img { |
| height: auto; |
| |
| object-fit: cover; |
| width: 100%; |
| } |
| .Learn-eventAttendees { |
| display: flex; |
| } |
| .Learn-eventAttendeesItem img { |
| border-radius: 100%; |
| height: 2rem; |
| width: 2rem; |
| } |
| .Learn-eventBody { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| max-width: 100%; |
| min-width: 0; |
| } |
| .Learn-eventDate { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| |
| margin-bottom: 1rem; |
| } |
| .Learn-eventDate p { |
| color: #6e7072; |
| margin: 0; |
| } |
| .Learn-eventName { |
| color: #202224; |
| font-size: 1.25rem; |
| font-weight: 500; |
| margin: 0; |
| |
| margin-bottom: 1rem; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .Learn-eventName a { |
| color: #202224; |
| text-decoration: none; |
| } |
| .Learn-eventDescription { |
| -webkit-box-orient: vertical; /* See webkit-line-clamp */ |
| display: -webkit-box; /* See webkit-line-clamp */ |
| -webkit-line-clamp: 4; /* Elide flex text. webkit-line-clamp is broadly compatible with browsers. */ |
| line-height: 24px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .Learn-eventText { |
| margin-bottom: 0.5rem; |
| } |
| .Learn-viewMore { |
| align-items: center; |
| display: flex; |
| font-size: 0.875rem; |
| margin: 0; |
| min-width: 6.25rem; |
| } |
| .Learn-viewMore:hover { |
| text-decoration: none; |
| } |
| .Learn-viewMore span { |
| font-size: 1rem; |
| margin-left: 0.48rem; |
| } |
| @media only screen and (min-width: 33.75rem) { |
| .Learn-eventItem { |
| flex-direction: row; |
| } |
| |
| .Learn-eventBody { |
| max-width: 46.825rem; |
| } |
| .Learn-eventThumbnail { |
| height: 8rem; |
| margin-bottom: 0; |
| margin-right: 1rem; |
| min-width: 8rem; |
| } |
| .Learn-eventThumbnail img { |
| height: 8rem; |
| object-fit: contain; |
| width: 8rem; |
| } |
| .Learn-eventDate { |
| flex: 0; |
| flex-direction: column; |
| justify-content: center; |
| min-width: 9rem; |
| } |
| .Learn-eventText { |
| display: flex; |
| flex-direction: column; |
| min-width: 0; |
| padding-right: 2rem; |
| } |
| .Learn-eventDescription { |
| -webkit-line-clamp: 2; /* see non-media-query definition. */ |
| margin: 0 0 0.5rem; |
| } |
| .Learn-viewMore { |
| align-self: center; |
| text-align: right; |
| } |
| .Learn-eventItem { |
| padding: 1.875rem 0; |
| } |
| } |
| |
| .Learn-tile a { |
| width: 100%; |
| } |
| |
| .Learn-tileList { |
| display: grid; |
| gap: 2rem; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| list-style: none; |
| padding: 0; |
| } |
| @media only screen and (min-width: 38rem) { |
| .Learn-tileList { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
| } |
| @media only screen and (min-width: 48rem) { |
| .Learn-tileList { |
| justify-content: space-between; |
| } |
| .Learn-tileList { |
| column-gap: 3rem; |
| } |
| } |
| .Learn-tile { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| .Learn-tile a { |
| color: #202224; |
| } |
| .Learn-tileTitle { |
| display: block; |
| font-size: 0.75rem; |
| font-style: normal; |
| font-weight: normal; |
| line-height: 0.875rem; |
| margin: 1.5rem auto 0; |
| overflow-wrap: break-word; |
| text-align: center; |
| } |
| .Learn-tileThumbnail { |
| align-items: center; |
| background-color: #fff; |
| border-radius: 0.3125rem; |
| box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22); |
| display: flex; |
| justify-content: center; |
| margin: auto; |
| width: 100%; |
| } |
| .Learn-tileThumbnail img { |
| max-height: 100%; |
| max-width: 100%; |
| } |
| .Learn-tileThumbnail--book img { |
| max-height: 100%; |
| max-width: 100%; |
| } |
| |
| .Solutions-title, |
| .Solutions-useCases, |
| .Solutions-caseStudies { |
| margin: auto; |
| max-width: 75.75rem; |
| } |
| .Solutions-title, |
| .Solutions-useCases, |
| .Solutions-caseStudies { |
| padding: 0 1.5rem; |
| } |
| .SolutionsHeroCarousel-wrapper { |
| max-width: 68rem; |
| width: 76vw; |
| } |
| .SolutionsHeroCarousel-slides { |
| transition: left 0.2s ease-out; |
| } |
| .GoCarousel-controlNext-solutionsHero { |
| right: 0.5rem; |
| } |
| .GoCarousel-controlPrev-solutionsHero { |
| left: 0.5rem; |
| } |
| .SolutionsHeroCarousel-slides { |
| display: flex; |
| left: 0; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| top: 0; |
| width: 625rem; |
| } |
| .SolutionsHeroCarousel-slide { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| max-width: 68rem; |
| padding: 0 0.2rem; |
| position: relative; |
| width: 76vw; |
| } |
| @media only screen and (min-width: 38rem) { |
| .SolutionsHeroCarousel-wrapper, |
| .SolutionsHeroCarousel-slide { |
| width: 82vw; |
| } |
| .GoCarousel-controlPrev-solutionsHero { |
| left: 2rem; |
| } |
| .GoCarousel-controlNext-solutionsHero { |
| right: 2rem; |
| } |
| } |
| .Solutions-headline .Container { |
| display: flex; |
| } |
| .Solutions-useCases, |
| .Solutions-caseStudies { |
| margin-bottom: 6.25rem; |
| } |
| .Solutions-title { |
| padding: 5rem 1.5rem 3rem; |
| } |
| .Solutions-title h1, |
| .WhoUsesSubPage-heroInner--caseStudy h1, |
| .WhoUsesSubPage-heroInner--useCase h1 { |
| font-size: 1.5rem; |
| font-style: normal; |
| font-weight: normal; |
| line-height: 2rem; |
| margin-bottom: 0.5rem; |
| } |
| .WhoUsesSubPage-heroInner--caseStudy h1 { |
| margin-top: 0; |
| } |
| .WhoUsesSubPage-heroInner--useCase h1 { |
| margin-top: 1rem; |
| } |
| .Solutions-title h1 { |
| text-align: center; |
| } |
| .Solutions-title h3 { |
| color: #202224; |
| font-size: 1rem; |
| font-weight: normal; |
| margin-bottom: 0; |
| text-align: center; |
| } |
| .Solutions-headlineText { |
| display: inline-block; |
| } |
| .Solutions-headlineImg { |
| margin-top: 1.5rem; |
| position: relative; |
| width: 100%; |
| } |
| .Solutions-headlineImg img { |
| display: block; |
| width: 100%; |
| } |
| .Solutions-headlineBody { |
| align-items: flex-start; |
| color: #6e7072; |
| display: flex; |
| flex-direction: column; |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-bottom: 1.5rem; |
| } |
| .Solutions-headlineBody a { |
| align-items: center; |
| display: flex; |
| margin-top: 1rem; |
| text-decoration: none; |
| } |
| .Solutions-headlineBody a i, |
| .WhyGo-reasonLearnMoreLink a i, |
| .WhyGo-reasonShowMoreLink a i { |
| margin-left: 0.2rem; |
| text-decoration: none; |
| transition: transform 100ms ease-in-out; |
| } |
| .Solutions-headlineBody a:hover i, |
| .WhyGo-reasonLearnMoreLink a:hover i, |
| .WhyGo-reasonShowMoreLink a:hover i { |
| transform: translateX(0.2rem); |
| } |
| .Solutions-headlineNotification { |
| color: #6e7072; |
| font-size: 0.75rem; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 2.25rem; |
| margin: 1.5rem 0; |
| } |
| .Solutions-headline { |
| background-color: #fafafa; |
| } |
| .Solutions-headline h2 { |
| color: #202224; |
| font-size: 1.5rem; |
| font-style: normal; |
| font-weight: normal; |
| line-height: 2rem; |
| margin-bottom: 1rem; |
| } |
| @media only screen and (min-width: 66.75rem) { |
| .SolutionsHeroCarousel-slide { |
| align-items: center; |
| flex-direction: row-reverse; |
| justify-content: space-between; |
| } |
| .Solutions-headlineText { |
| width: 33%; |
| } |
| .Solutions-headlineImg { |
| height: 100%; |
| margin-bottom: 0; |
| width: 60%; |
| } |
| .Solutions-headlineImg img { |
| max-height: 100%; |
| position: absolute; |
| right: 0; |
| top: 50%; |
| transform: translate(0, -50%); |
| } |
| } |
| .SolutionsTabs-tabList { |
| margin-top: 4rem; |
| width: 100%; |
| } |
| .SolutionsTabs-tabList hr { |
| border: 0.0625rem solid #c6c8ca; |
| margin: -0.0625rem 0 2rem; |
| } |
| .SolutionsTabs-tab { |
| background-color: #fff; |
| border-style: none; |
| color: #202224; |
| cursor: pointer; |
| font-size: 1rem; |
| font-weight: 500; |
| line-height: 2.25rem; |
| margin-right: 1.625rem; |
| outline: none; |
| padding: 0.375rem 0; |
| } |
| .SolutionsTabs-tab:focus { |
| border-bottom: 0.25rem solid #c6c8ca; |
| } |
| .SolutionsTabs-tab:last-of-type { |
| margin-right: 0; |
| } |
| .SolutionsTabs-tab[aria-selected='true'] { |
| border-bottom: 0.25rem solid #007d9c; |
| } |
| @media only screen and (min-width: 48rem) { |
| .SolutionsTabs-tab { |
| font-size: 1.125rem; |
| margin-right: 4rem; |
| } |
| } |
| .Solutions-useCasesHeader h2, |
| .Solutions-caseStudiesHeader h2 { |
| } |
| .Solutions-cardList, |
| .Solutions-caseStudyList { |
| display: grid; |
| grid-gap: 1.5rem; |
| grid-template-columns: repeat(1, 1fr); |
| list-style: none; |
| padding-left: 0; |
| } |
| .Solutions-cardList[hidden] { |
| display: none; |
| } |
| .Solutions-caseStudiesList { |
| margin: 0 0 1rem 0; |
| } |
| .Solutions-card { |
| background: #fff; |
| border: 0.0625rem solid #c6c8ca; |
| border-radius: 0.625rem; |
| box-sizing: border-box; |
| flex: 0 100%; |
| } |
| @media only screen and (min-width: 38rem) { |
| .Solutions-cardList { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .Solutions-card { |
| box-shadow: none; |
| flex: 0 48%; |
| } |
| .Solutions-card:hover { |
| box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22); |
| transition: all 0.2s ease-in-out; |
| } |
| .Solutions-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| @media only screen and (min-width: 62.5rem) { |
| .Solutions-card { |
| box-shadow: none; |
| flex: 0 30%; |
| } |
| } |
| .Solutions-useCaseLogo { |
| height: 5rem; |
| margin: 0 2rem; |
| width: 100%; |
| } |
| .Solutions-card a:link, |
| .Solutions-card a:visited { |
| color: #202224; |
| display: block; |
| text-decoration: none; |
| } |
| .Solutions-useCaseAction { |
| bottom: 1rem; |
| color: #007d9c; |
| font-size: 1rem; |
| font-weight: normal; |
| position: absolute; |
| } |
| .Solutions-useCaseAction { |
| align-items: center; |
| display: flex; |
| } |
| .Solutions-useCaseAction i { |
| margin-left: 0.5rem; |
| } |
| .Solutions-useCaseDescription { |
| color: #6e7072; |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: normal; |
| } |
| .Solutions-useCaseTitle { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: 500; |
| } |
| .Solutions-useCaseBody { |
| flex: 1; |
| justify-content: center; |
| margin-bottom: 2.5rem; |
| } |
| |
| .Solutions-useCaseLogo { |
| display: flex; |
| flex: 1; |
| justify-content: center; |
| margin: 0; |
| } |
| |
| .Solutions-useCaseLogo img { |
| align-self: center; |
| max-height: 4rem; |
| max-width: 11rem; |
| } |
| .Solutions-useCaseLink { |
| height: 100%; |
| padding: 2rem 2rem 3rem; |
| position: relative; |
| } |
| .Solutions-footer { |
| margin: 2rem 0 2.875rem; |
| } |
| .Solutions-footer p { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: normal; |
| } |
| .TestimonialsGo-quotes { |
| display: flex; |
| left: 0; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| top: 0; |
| transition: left 0.2s ease-out; |
| width: 625rem; |
| } |
| .TestimonialsGo-quoteGroup { |
| align-items: flex-start; |
| display: flex; |
| margin: 0 0; |
| max-width: 62.5rem; |
| padding: 3.75rem 2rem 2.25rem; |
| width: 90vw; |
| } |
| .TestimonialsGo-quoteSingleItem { |
| display: flex; |
| flex: 1; |
| } |
| .TestimonialsGo-quoteContainer { |
| display: inline-flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; |
| } |
| .TestimonialsGo-quoteSection { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| } |
| .TestimonialsGo-quoteSection p { |
| color: #202224; |
| font-size: 0.875rem; |
| text-align: center; |
| } |
| .TestimonialsGo-author { |
| color: #202224; |
| font-size: 0.8rem; |
| font-style: normal; |
| font-weight: normal; |
| text-align: right; |
| width: 100%; |
| } |
| .PullQuote-title, |
| .BackgroundQuote-title { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| } |
| .NoWrapSpan { |
| white-space: nowrap; |
| } |
| @media only screen and (min-width: 52rem) { |
| .TestimonialsGo-quote { |
| font-size: 1.3125rem; |
| } |
| .TestimonialsGo-author { |
| font-size: 1rem; |
| } |
| .TestimonialsGo-quoteSection p { |
| font-size: 1.3125rem; |
| line-height: 2.25rem; |
| } |
| } |
| .PullQuote { |
| color: #6e7072; |
| margin-bottom: 2rem; |
| } |
| .PullQuote-body { |
| margin: 1.5rem 0 1rem; |
| } |
| .PullQuote-link, |
| p.PullQuote-body, |
| p.BackgroundQuote-body { |
| color: inherit; |
| } |
| .PullQuote-author, |
| .BackgroundQuote-author { |
| display: flex; |
| flex-wrap: wrap; |
| font-style: normal; |
| font-weight: 500; |
| justify-content: flex-end; |
| margin-left: auto; |
| margin-top: 1rem; |
| } |
| .PullQuote-author { |
| font-size: 0.875rem; |
| } |
| .BackgroundQuote { |
| margin: 1.5rem auto; |
| padding: 2rem 1.5rem; |
| } |
| p.BackgroundQuote-body { |
| font-size: 1.3125rem; |
| line-height: 2.25rem; |
| } |
| .QuoteBlock { |
| border-bottom: 0.25rem solid #007d9c; |
| border-top: 0.25rem solid #007d9c; |
| display: block; |
| float: none; |
| margin-bottom: 1.5rem; |
| margin-left: 0; |
| margin-right: 0; |
| margin-top: 1.5rem; |
| padding-bottom: 0.5rem; |
| width: 100%; |
| } |
| @media only screen and (min-width: 48rem) { |
| .QuoteBlock { |
| float: right; |
| margin-top: 0; |
| width: 46%; |
| } |
| .PullQuote-body { |
| font-size: 1.125rem; |
| line-height: 1.75rem; |
| margin: 1.5rem 0 1rem; |
| } |
| .BackgroundQuote-body { |
| margin-top: 0; |
| } |
| .BackgroundQuote { |
| padding: 3rem 4rem 2rem; |
| } |
| .PullQuote-author { |
| font-size: 1rem; |
| } |
| } |
| .QuoteBlock-body { |
| color: #202224; |
| font-size: 1.125rem; |
| line-height: 2rem; |
| } |
| .QuoteBlock-author { |
| color: #202224; |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 3rem; |
| } |
| .QuoteBlock-link { |
| color: #6e7072; |
| } |
| .LargeMedia { |
| align-items: flex-start; |
| display: flex; |
| padding: 2.125rem 0.5rem; |
| } |
| .LargeMedia + .LargeMedia { |
| border-top: 0.0625rem solid #dcdee0; |
| } |
| .LargeMedia-image { |
| height: 5rem; |
| margin-right: 1rem; |
| object-fit: contain; |
| width: 5rem; |
| } |
| .LargeMedia-body { |
| flex: 1; |
| } |
| |
| .SmallMedia-image { |
| height: 3rem; |
| margin-right: 1rem; |
| object-fit: contain; |
| width: 3rem; |
| } |
| |
| .XLargeMedia-image { |
| height: 8rem; |
| margin-right: 1rem; |
| object-fit: contain; |
| width: 8rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .LargeMedia { |
| align-items: center; |
| } |
| .SmallMedia-image { |
| height: 9rem; |
| margin-right: 5.5rem; |
| width: 9rem; |
| } |
| .LargeMedia-image { |
| height: 12.5rem; |
| margin-right: 5.5rem; |
| width: 12.5rem; |
| } |
| .XLargeMedia-image { |
| height: 18rem; |
| margin-right: 1rem; |
| object-fit: contain; |
| width: 18rem; |
| } |
| } |
| .MediaList { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-around; |
| list-style: none; |
| padding: 0; |
| } |
| .MediaList-item { |
| flex: 0 1 14rem; |
| justify-content: space-around; |
| text-align: center; |
| } |
| .MediaList-itemImage { |
| height: 10rem; |
| object-fit: contain; |
| width: 10rem; |
| } |
| .MediaList-itemTitle { |
| color: #202224; |
| } |
| .MediaList-itemBody { |
| color: #555759; |
| } |
| @media only screen and (min-width: 48rem) { |
| .MediaList { |
| margin-left: -2rem; /* First item of each row should have no left gutter */ |
| } |
| .MediaList-item { |
| flex: 0 0 12rem; |
| margin-left: 2rem; /* Gutter between items */ |
| } |
| } |
| .MediaList-itemBox { |
| background-color: #f8f8f8; |
| box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22); |
| flex: 0 1 33.125rem; |
| justify-content: space-around; |
| margin-top: 2rem; |
| padding: 1.5rem; |
| } |
| .MediaList-itemBoxHeader-top { |
| align-items: center; |
| flex-direction: column; |
| margin: auto; |
| text-align: center; |
| width: 10.75rem; |
| } |
| .MediaList-itemBoxHeader { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| margin: auto; |
| text-align: center; |
| width: 10.75rem; |
| } |
| .MediaList-itemBoxImage { |
| height: 5.125rem; |
| object-fit: contain; |
| width: 5.125rem; |
| } |
| .MediaList-itemBox .MediaList-itemBoxTitle { |
| color: #202224; |
| font-size: 1.5rem; |
| font-weight: normal; |
| margin: 0.5rem 0 0 0; |
| } |
| .MediaList-itemBox .MediaList-itemBoxBody { |
| align-self: flex-end; |
| color: #555759; |
| flex: 1; |
| } |
| .MediaList-itemBox .MediaList-itemBoxBody-top { |
| align-self: flex-start; |
| color: #555759; |
| flex: 1; |
| margin: auto !important; |
| } |
| @media only screen and (min-width: 48rem) { |
| .MediaList-itemBoxHeader { |
| justify-content: flex-end; |
| margin: 0 1rem 1.5rem 0; |
| } |
| .MediaList-itemBox { |
| display: flex; |
| flex: 0 0 33.125rem; |
| margin: 2rem 0 0 2rem; /* Gutter between grid cells. */ |
| min-height: 15.0625rem; |
| } |
| .MediaList-itemBox .MediaList-itemBoxBody { |
| margin: 0 1.3rem 2rem 0; |
| } |
| } |
| .StarItem { |
| align-items: flex-start; |
| display: flex; |
| } |
| .StarItem-icon { |
| align-items: center; |
| background: linear-gradient(10.64deg, #007d9c 0%, #00a29c 100%); |
| border-radius: 50%; |
| display: flex; |
| height: 1.5rem; |
| justify-content: center; |
| margin: 1.1rem 1.25rem 0 0; |
| width: 1.5rem; |
| } |
| .StarItem-image { |
| height: 1.25rem; |
| object-fit: contain; |
| width: 1.25rem; |
| } |
| .StarItem-body { |
| flex: 1; |
| } |
| .StarItem-title { |
| margin: 1rem 0; |
| } |
| |
| .Right { |
| float: right; |
| margin-left: 1rem; |
| } |
| .Left { |
| float: left; |
| margin-right: 1rem; |
| } |
| .SearchForm { |
| align-items: center; |
| background-color: transparent; |
| border-radius: 0.25rem; |
| display: flex; |
| flex: 1; |
| font-size: 1rem; |
| height: 2rem; |
| margin: 0.6875rem 0; |
| max-width: 2rem; |
| transition: max-width 200ms; |
| } |
| .SearchForm--open { |
| background-color: #fff; |
| margin-left: 1.5rem; |
| max-width: 100%; |
| } |
| .SearchForm svg { |
| fill: #fff; |
| } |
| .SearchForm--open svg { |
| fill: #555759; |
| margin-right: 0.5rem; |
| } |
| .SearchForm-input { |
| height: 100%; |
| opacity: 0; |
| padding: 0; |
| transition: width 200ms, padding 200ms, opacity 200ms; |
| width: 0; |
| } |
| .SearchForm--open .SearchForm-input { |
| flex: 1; |
| opacity: 1; |
| padding: 0.5rem; |
| transition: width 200ms, padding 200ms; |
| width: 100%; |
| } |
| .SearchForm-input::placeholder { |
| color: #848688; |
| } |
| .SearchForm-input { |
| background-color: transparent; |
| border: none; |
| box-sizing: border-box; |
| font: inherit; |
| opacity: 0; |
| outline: none; |
| } |
| .SearchForm-submit { |
| background-color: transparent; |
| border: none; |
| box-sizing: border-box; |
| cursor: pointer; |
| display: flex; |
| outline: 0; |
| padding: 0; |
| } |
| .SearchForm svg { |
| box-sizing: border-box; |
| cursor: pointer; |
| margin-left: 0.5rem; |
| width: 1.4375rem; |
| } |
| @media only screen and (min-width: 32rem) { |
| .Header-rightContent { |
| width: 100%; |
| } |
| .SearchForm { |
| background-color: #fff; |
| margin: 0.6rem 1.4rem 0.6rem 0; |
| max-width: none; |
| } |
| .SearchForm-input { |
| opacity: 1; |
| padding: initial; |
| width: 100%; |
| } |
| .SearchForm svg { |
| fill: #555759; |
| margin-right: 0.5rem; |
| } |
| } |
| .Series-list { |
| list-style: none; |
| padding: 0; |
| } |
| .Series-listItem { |
| display: flex; |
| } |
| .Series-listItem a { |
| display: flex; |
| flex: 1; |
| padding: 1.25rem 0; |
| } |
| .Series-listItem + .Series-listItem { |
| border-top: 0.0625rem solid #dcdee0; |
| } |
| .Series-listItemIcon { |
| margin-right: 1rem; |
| } |
| .Series-listItemIcon img { |
| width: 4rem; |
| } |
| .Series-listItemText { |
| flex: 1; |
| } |
| .Series-listItemPrimary { |
| display: block; |
| font-size: 1.125rem; |
| margin: 0; |
| } |
| .Series-listItemSecondary { |
| color: #202224; |
| display: inline-block; |
| margin-bottom: 0; |
| text-decoration: none; |
| } |
| .UseCaseSubNav { |
| background-color: #fff; |
| box-shadow: 0 0.125rem 0.125rem rgba(171, 171, 171, 0.405239); |
| position: fixed; |
| width: 100%; |
| z-index: 10; |
| } |
| .UseCaseSubNav--default { |
| top: 3.5rem; |
| } |
| .UseCaseSubNav-menu { |
| background-color: #fff; |
| box-shadow: 0 0.125rem 0.125rem rgba(171, 171, 171, 0.405239); |
| max-height: 0; |
| overflow: hidden; |
| padding-left: 1rem; |
| position: absolute; |
| transition: max-height 100ms ease-in-out; |
| width: 100%; |
| } |
| .UseCaseSubNav-menuHeader { |
| align-items: center; |
| background: transparent; |
| border: none; |
| color: #555759; |
| cursor: pointer; |
| display: flex; |
| font-size: 0.875rem; |
| justify-content: space-between; |
| outline: none; |
| padding: 0.8125rem 1rem 0.8125rem 1.6875rem; |
| width: 100%; |
| } |
| .UseCaseSubNav-menuIcon { |
| pointer-events: none; |
| transition: transform 100ms ease-in-out; |
| } |
| .UseCaseSubNav-menuIcon--open { |
| transform: rotate(180deg); |
| } |
| .UseCaseSubNav-menu--open { |
| max-height: 25rem; |
| padding-bottom: 2rem; |
| } |
| .UseCase-content { |
| display: flex; |
| flex-direction: row; |
| } |
| .CaseStudy-content { |
| display: grid; |
| gap: 2rem; |
| grid-template-columns: 1fr; |
| } |
| .CaseStudy-contentBody img { |
| width: 100%; |
| } |
| .CaseStudy-contentBody hr { |
| border: 0.0625rem solid #c6c8ca; |
| margin: 2rem 0 2rem; |
| } |
| .CaseStudy-contentAside { |
| flex: 0 0 33.33%; |
| min-width: 18.75rem; |
| } |
| .UseCase-contentAside { |
| display: none; |
| } |
| .UseCase-content { |
| margin-top: 2rem; |
| } |
| .UseCase-contentBody { |
| flex: 0 0 100%; |
| margin-top: 1rem; |
| max-width: 47.8125rem; |
| width: 100%; |
| } |
| .UseCase-contentBody h2:first-of-type, |
| .UseCase-contentBody h3:first-of-type { |
| margin-top: 0; |
| } |
| .UseCase-contentBody h2, |
| .FeaturedUsers h2:first-of-type { |
| margin-bottom: 1.5rem; |
| margin-top: 3rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .CaseStudy-content { |
| grid-template-columns: 2fr 1fr; |
| } |
| .UseCase-contentAside { |
| display: block; |
| flex: 0 0 20%; |
| position: sticky; |
| } |
| .UseCaseSubNav { |
| display: none; |
| } |
| .UseCase-contentBody { |
| flex: 0 0 80%; |
| order: 1; |
| width: 80%; |
| } |
| .CaseStudy-contentAside { |
| order: 2; |
| } |
| .CaseStudy-contentBody { |
| order: 1; |
| } |
| } |
| .UseCaseSubNav-anchorLinks { |
| align-items: flex-start; |
| display: flex; |
| flex-direction: column; |
| } |
| .UseCaseSubNav-anchorLinks--sticky { |
| position: fixed; |
| top: 5.5rem; |
| } |
| a.UseCase-anchorLink { |
| background: transparent; |
| border: none; |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: normal; |
| margin-top: 1rem; |
| padding-left: 0.5rem; |
| position: relative; |
| } |
| a.UseCase-anchorLink:first-of-type { |
| margin-top: 1.5rem; |
| } |
| a.UseCase-anchorLink.selected { |
| font-weight: 500; |
| } |
| a.UseCase-anchorLink.selected::before { |
| background-color: #007d9c; |
| border-radius: 1rem; |
| content: ' '; |
| display: inline-block; |
| height: 0.3rem; |
| left: -0.5rem; |
| position: absolute; |
| top: 0.5rem; |
| width: 0.3rem; |
| } |
| .WhoUsesSubPage-hero--useCase { |
| margin-top: 2.625rem; |
| } |
| .WhoUsesSubPage-heroInner--caseStudy, |
| .WhoUsesSubPage-heroInner--useCase { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| margin-bottom: 1.5rem; |
| position: relative; |
| } |
| .WhoUsesSubPage-heroInner--useCase { |
| background-color: #fafafa; |
| padding-bottom: 2.5rem; |
| padding-top: 3.5rem; |
| } |
| .WhoUsesSubPage-heroInner--caseStudy > div { |
| justify-content: center; |
| } |
| .WhoUsesSubPage-heroContent--caseStudy { |
| display: flex; |
| flex-direction: column-reverse; |
| max-width: 75.75rem; |
| position: relative; |
| z-index: 1; |
| } |
| .WhoUsesSubPage-heroContent--useCase { |
| margin: auto; |
| max-width: 75.75rem; |
| width: 100%; |
| } |
| .WhoUsesSubPage-heroText--caseStudy, |
| .WhoUsesSubPage-heroText--useCase { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| width: 100%; |
| } |
| .WhoUsesSubPage-heroText--caseStudy { |
| padding: 2rem 1.5rem; |
| } |
| .WhoUsesSubPage-heroText--useCase { |
| padding: 0 1.5rem; |
| } |
| .WhoUsesSubPage-heroImg { |
| background: -webkit-linear-gradient(0deg, #fafafa 50vw, #bfeaf4 50vw); |
| display: flex; |
| max-width: 75.75rem; |
| padding-left: 1.5rem; |
| position: relative; |
| width: 100%; |
| z-index: 1; |
| } |
| .WhoUsesSubPage-heroImg img { |
| height: auto; |
| max-height: 10.625rem; |
| min-height: 8rem; |
| width: auto; |
| } |
| @media only screen and (min-width: 38rem) { |
| .Solutions-title h1, |
| .WhoUsesSubPage-heroInner--caseStudy h1, |
| .WhoUsesSubPage-heroInner--useCase h1 { |
| font-size: 2.25rem; |
| line-height: 3rem; |
| } |
| .WhoUsesSubPage-heroImg { |
| background: -webkit-linear-gradient(0deg, #fafafa 40vw, #bfeaf4 40vw); |
| } |
| .WhoUsesSubPage-heroImg img { |
| max-height: 15.625rem; |
| min-height: 10.625rem; |
| } |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .WhoUsesSubPage-hero--useCase { |
| margin-top: 0; |
| } |
| .WhoUsesSubPage-heroInner--caseStudy { |
| background: -webkit-linear-gradient(0deg, #fafafa 70vw, #bfeaf4 70vw); |
| flex-direction: row; |
| } |
| .WhoUsesSubPage-heroContent--caseStudy { |
| align-items: center; |
| flex-direction: row; |
| } |
| .WhoUsesSubPage-heroImg { |
| background: transparent; |
| min-width: 37.75rem; |
| padding: 0; |
| width: 55%; |
| } |
| .WhoUsesSubPage-heroText--caseStudy { |
| width: 45%; |
| } |
| .WhoUsesSubPage-heroImg img { |
| max-height: none; |
| min-height: 18.75rem; |
| width: 100%; |
| } |
| .WhoUsesSubPage-heroInner--useCase h1 { |
| margin-top: 3rem; |
| } |
| } |
| .ToolsBlurbs { |
| display: grid; |
| gap: 2rem 3.4375rem; |
| grid-template-columns: 1fr; |
| margin-top: 1.5rem; |
| } |
| .ToolsBlurbs-blurb { |
| background-color: #fff; |
| border: 0.0625rem solid #dcdee0; |
| border-radius: 0.25rem; |
| padding: 1.5rem 1rem; |
| } |
| .ToolsBlurbs-blurbHeader { |
| align-items: center; |
| display: flex; |
| } |
| .ToolsBlurbs-blurbIcon { |
| height: 1.5rem; |
| margin-right: 1rem; |
| width: 1.5rem; |
| } |
| @media only screen and (min-width: 48rem) { |
| .ToolsBlurbs { |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
| img.PullQuote-image { |
| width: 2.625rem; |
| } |
| |
| .Card { |
| background-color: #fff; |
| border: 0.0625rem solid #c6c8ca; |
| border-radius: 0.25rem; |
| height: 100%; |
| } |
| |
| .Card a, |
| .Card a:visited, |
| .Card a:hover { |
| text-decoration: none; |
| } |
| |
| .Card-inner { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| .Card-thumbnail { |
| background-position: center; |
| background-size: cover; |
| height: 9.5625rem; |
| } |
| |
| .Card-content { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| padding: 1.5rem; |
| } |
| |
| .Card-contentTitle { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: 500; |
| } |
| |
| .Card-contentBody { |
| color: #6e7072; |
| flex: auto; |
| font-size: 0.875rem; |
| margin-top: 1rem; |
| } |
| |
| .Card-contentCta { |
| align-items: center; |
| display: flex; |
| } |
| |
| .Card-contentCta span { |
| margin-right: 0.6875rem; |
| } |
| |
| .Card-selfPacedFooter { |
| display: flex; |
| } |
| |
| .Card-selfPacedCredits { |
| color: #6e7072; |
| flex: 1; |
| font-size: 0.75rem; |
| } |
| |
| .Card-selfPacedRating { |
| width: 5rem; |
| } |
| |
| .Card-starRating { |
| background-image: url('/images/learn/star-rating.png'); |
| background-position: left; |
| background-repeat: no-repeat; |
| height: 1rem; |
| } |
| |
| .Book a, |
| .Book a:visited, |
| .Book a:hover { |
| text-decoration: none; |
| } |
| |
| .Book-inner { |
| align-items: flex-start; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .Book-thumbnail { |
| width: 6.625rem; |
| } |
| |
| .Book-thumbnail img { |
| width: 100%; |
| } |
| |
| .Book-content { |
| flex: 1; |
| margin-left: 1.6875rem; |
| } |
| |
| .Book-title { |
| color: #202224; |
| font-size: 1.125rem; |
| font-weight: 500; |
| margin: 0 0 0.5rem; |
| } |
| |
| .Book-description { |
| color: #6e7072; |
| font-size: 0.875rem; |
| } |
| |
| .Book-cta { |
| align-items: center; |
| display: flex; |
| height: 1.5rem; |
| } |
| |
| .Book-cta span { |
| margin-right: 0.6875rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Book-inner { |
| flex-direction: column; |
| } |
| |
| .Book-thumbnail { |
| width: 100%; |
| } |
| |
| .Book-content { |
| margin: 1rem 0 0; |
| } |
| } |
| |
| #blog h1.small { |
| font-weight: bold; |
| font-size: 1rem; |
| } |
| #blog a.head { |
| color: black; |
| text-decoration: none !important; |
| } |
| #blog a.head:hover { |
| text-decoration: underline; |
| } |
| #blog #content .author { |
| font-style: italic; |
| } |
| #blog #content .Article { |
| margin-bottom: 50px; |
| } |
| #blog #content .date { |
| color: #6e7072; |
| } |
| #blog #content .tags { |
| color: #999; |
| font-size: smaller; |
| } |
| #blog #content .iframe, #content .image { |
| margin: 20px; |
| } |
| #blog #content .title { |
| margin: 20px 0; |
| } |
| #blog #content img { |
| max-width: 100%; |
| } |
| #blog .Article { |
| max-width: 55rem; |
| } |
| #blog .Article[data-slug='/blog/go-fonts'] { |
| font-family: Go, sans-serif; |
| } |
| #blog .Article[data-slug='/blog/go-fonts'] pre, |
| #blog .Article[data-slug='/blog/go-fonts'] code { |
| font-family: 'Go Mono', monospace; |
| } |
| #blog pre, #blog code { |
| font-family: monospace; |
| } |
| #blogindex p.blogtitle a { |
| font-weight: bold; |
| } |
| #blogindex p.blogsummary { |
| margin-block-start: 0px; |
| } |
| #blogindex p.blogtitle { |
| margin-block-end: 0px; |
| } |
| #blogindex div.prevnext { |
| margin-top: 2em; |
| } |
| #blog .Article[data-slug='/blog/'] h1 { |
| margin-top: 1em; |
| } |
| |
| #blog pre .highlight { |
| font-weight: bold; |
| } |
| |
| /* Inline runnable snippets (play.js/initPlayground) */ |
| #blog pre, |
| #content .code pre, |
| #content .playground pre, |
| #content .output pre { |
| margin: 0; |
| padding: 0; |
| background: none; |
| border: none; |
| outline: 0 solid transparent; |
| overflow: auto; |
| } |
| #content .playground .number, |
| #content .code .number { |
| color: #999; |
| } |
| #blog pre, |
| #content .code, |
| #content .playground, |
| #content .output { |
| width: auto; |
| margin: 1.25rem; |
| padding: 0.625rem; |
| border-radius: 0.3125rem; |
| } |
| #blog pre, |
| #content .code, |
| #content .playground { |
| background: #e9e9e9; |
| } |
| #content .output { |
| background: #202020; |
| } |
| #content .output .stdout, |
| #content .output pre { |
| color: #e6e6e6; |
| } |
| #content .output .stderr, |
| #content .output .error { |
| color: rgb(244, 74, 63); |
| } |
| #content .output .system, |
| #content .output .exit { |
| color: rgb(255, 209, 77); |
| } |
| #content .buttons { |
| position: relative; |
| float: right; |
| top: -3.125rem; |
| right: 1.875rem; |
| } |
| #content .output .buttons { |
| top: -3.75rem; |
| right: 0; |
| height: 0; |
| } |
| #content .buttons .kill { |
| display: none; |
| visibility: hidden; |
| } |
| a.error { |
| font-weight: bold; |
| color: white; |
| background-color: darkred; |
| border-bottom-left-radius: 0.25rem; |
| border-bottom-right-radius: 0.25rem; |
| border-top-left-radius: 0.25rem; |
| border-top-right-radius: 0.25rem; |
| padding: 0.125rem 0.25rem 0.125rem 0.25rem; |
| /* TRBL */ |
| } |
| .downloading { |
| background: #f9f9be; |
| padding: 0.625rem; |
| text-align: center; |
| border-radius: 0.3125rem; |
| } |
| .Security-gridContainer, .Security-comingSoon { |
| padding: 3rem 1.5rem 1rem; |
| } |
| .Security-card .Card-content ul { |
| padding-left: 1rem; |
| } |
| .Security-card .Card-content li { |
| margin-bottom: 1rem; |
| list-style: initial; |
| } |
| .Security-card .Card-contentCta { |
| margin-top: 1rem; |
| } |
| .Security-foundations { |
| padding: 2rem 0; |
| } |
| .Security-foundations .Card { |
| border: none; |
| } |
| .Security-foundations .Card-content { |
| padding: 0; |
| } |
| .Security-foundations .Card-contentBody { |
| flex: 0; |
| } |
| .Security-foundations .Card-icon { |
| padding-bottom: 1.5rem; |
| } |
| .Security-comingSoon, |
| .Security-comingSoonTitle, |
| .Security-comingSoonContent, |
| .Security-comingSoonImage { |
| display: flex; |
| justify-content: center; |
| } |
| .Security-comingSoon { |
| flex-direction: column; |
| } |
| .Security-comingSoonTitle { |
| justify-content: center; |
| } |
| .Security-comingSoonTitle h3 { |
| color: #71757B; |
| font-weight: normal; |
| font-size: 1.5rem; |
| } |
| .Security-comingSoonContent ul { |
| padding-left: 1rem; |
| } |
| .Security-comingSoonContent li { |
| margin-bottom: 1rem; |
| } |
| .Security-getStarted { |
| background: #007D9C; |
| } |
| .Security-getStarted, .Security-recentupdates { |
| padding: 2.5rem 0; |
| } |
| .Security-getStarted .Security-sectionHeader { |
| color: #fff; |
| } |
| .Security-getStarted .Security-sectionHeader, |
| .Security-recentupdates .Security-sectionHeader { |
| justify-content: center; |
| margin-bottom: 1.25rem; |
| } |
| .Security-getStarted .Security-sectionHeader h2, |
| .Security-recentupdates .Security-sectionHeader h2 { |
| font-size: 2.25rem; |
| margin: 0; |
| } |
| .Security-getStarted .Security-card { |
| height: auto; |
| } |
| .Security-getStarted .Card-icon { |
| padding: 1.5rem 0 0 1.5rem; |
| } |
| .Security-getStarted .Card-contentTitle { |
| flex: 1; |
| } |
| .Security-getStarted .Card-contentImage { |
| flex: 1; |
| } |
| .Security-comingSoonImage img { |
| width: 100%; |
| max-width: 14.063rem; |
| } |
| .Security-secondary-cta { |
| background-color: #007D9C; |
| } |
| .Security-secondary-cta .Container { |
| display: flex; |
| flex-direction: column; |
| } |
| .Security-secondary-cta-body { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| .Security-secondary-cta-body a { |
| height: 4rem; |
| margin-top: 1.25rem; |
| } |
| .Security-secondary-cta-body a:hover { |
| text-decoration: none; |
| } |
| .Security-secondary-cta-body span { |
| text-align: center; |
| padding: 1.25rem 4.7rem; |
| background-color: #FDDD00; |
| border-radius: 0.25rem; |
| color: #000; |
| } |
| .Security-secondary-cta-body h2 { |
| color: #fff; |
| font-size: 2.25rem; |
| line-height: 2.925rem; |
| font-weight: normal; |
| } |
| .Security-secondary-cta-image { |
| font-size: 0; |
| } |
| .Security-secondary-cta-image img { |
| max-width: 100%; |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .Security-getStarted, .Security-recentupdates { |
| padding: 3.75rem 0 5rem 0; |
| } |
| .Security-getStarted .Security-sectionHeader { |
| margin-bottom: 2.5rem; |
| } |
| .Security-getStarted .Security-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| .Security-comingSoon { |
| flex-direction: row; |
| } |
| .Security-comingSoonTitle { |
| flex-direction: column; |
| justify-content: center; |
| flex: 1 0 12.5rem; |
| align-items: center; |
| } |
| .Security-comingSoonContent { |
| flex-direction: column; |
| justify-content: center; |
| flex: 1 1 auto; |
| } |
| .Security-comingSoonImage { |
| flex: 1 1 12.5rem; |
| } |
| .Security-secondary-cta { |
| background: #beeaf5; |
| background-image: radial-gradient( 60.0625rem 60.0625rem, #007D9C 50%, #beeaf5 50% ); |
| background-position: -13rem 50%; |
| background-size: 75rem 75rem; |
| background-repeat: no-repeat; |
| min-height: 22.5rem; |
| } |
| .Security-secondary-cta .Container { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| } |
| .Security-secondary-cta-image img { |
| max-width: initial; |
| } |
| } |
| .Playground-headerContainer { |
| text-align: center; |
| } |
| .Playground-popout { |
| background: url('/images/play-link.svg') no-repeat; |
| background-position: right center; |
| cursor: pointer; |
| display: block; |
| font-size: 1rem; |
| padding: 0 1.688rem; |
| } |
| .Playground-input, |
| .Playground-output { |
| padding: 0; |
| margin: 0; |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| .Playground-inputContainer { |
| border-top-left-radius: 0.3125rem; |
| border-top-right-radius: 0.3125rem; |
| overflow: hidden; |
| } |
| .PlayPage .Playground-inputContainer { |
| height: 30em; |
| } |
| .PlayPage .Playground-outputContainer { |
| height: 20em; |
| } |
| @media screen and (min-height: 50em) { |
| .PlayPage .Playground-inputContainer { |
| height: 40em; |
| } |
| } |
| .PlayAbout { |
| font-size: 83%; |
| } |
| .Playground-input { |
| width: 100%; |
| height: 100%; |
| border: none; |
| outline: none; |
| padding: 0.625rem 0.625rem 0 0.625rem; |
| min-height: 13rem; |
| resize: none; |
| } |
| .Playground-inputContainer #wrap { |
| height: 100%; |
| } |
| .Playground-outputContainer { |
| border-bottom-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0.3125rem; |
| border-top: none !important; |
| padding: 0.625rem; |
| height: 5rem; |
| margin-bottom: 1rem; |
| overflow: auto; |
| } |
| .Playground-output { |
| padding: 0; |
| border-radius: 0; |
| } |
| .Playground-inputContainer, |
| .Playground-input { |
| background: #ffffdd; |
| } |
| .Playground-runButton { |
| background-color: #ffffdd !important; |
| } |
| .Playground-outputContainer, |
| .Playground-output { |
| background: #f7f9fa; |
| } |
| .Playground-inputContainer, |
| .Playground-input, |
| .Playground-outputContainer, |
| .Playground-output { |
| color: #202224; |
| } |
| .Playground-inputContainer, |
| .Playground-outputContainer { |
| border: 0.0625rem solid #c0c2c3; |
| resize: vertical; |
| } |
| .Playground-controls { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| .Playground-buttons { |
| display: flex; |
| flex: 1; |
| flex-wrap: nowrap; |
| gap: 0.5rem; |
| justify-content: flex-end; |
| } |
| .Playground-selectExample, .Playground-selectGoVersion, .Playground-shareURL { |
| background-color: white; |
| border-radius: 3px; |
| border: 0.0625rem solid #979797; |
| color: inherit; |
| font-family: inherit; |
| font-size: 16px; |
| /* Prevents automatic zoom on mobile devices */ |
| height: 1.75rem; |
| margin: 0 0 0.5rem 0; |
| width: 100%; |
| } |
| .Playground-secondaryButtons { |
| white-space: nowrap; |
| } |
| .Playground-secondaryButtons .Button:not(:first-child) { |
| margin-left: 0.4375rem; |
| } |
| @media only screen and (min-width: 27.8125rem) { |
| .Playground-outputContainer { |
| margin-bottom: 1.688rem; |
| } |
| .Playground-controls { |
| flex-wrap: nowrap; |
| } |
| .Playground-selectExample, .Playground-selectGoVersion, .Playground-shareURL { |
| margin: 0 0.4375rem 0 0; |
| width: auto; |
| } |
| } |
| h1.Playground-title { |
| font-size: 1.5rem; |
| line-height: 1.75rem; |
| display: inline; |
| margin: 0; |
| } |
| h2.Playground-about { |
| font-size: 1rem; |
| line-height: 2rem; |
| vertical-align: bottom; |
| height: 1.75rem; |
| display: inline; |
| margin: 0; |
| margin-left: 1rem; |
| } |
| .PlayPage .Playground-controls { |
| margin-top: 1rem; |
| margin-bottom: 1rem; |
| } |
| .linedtextarea .lines { |
| float: left; |
| overflow: hidden; |
| text-align: right; |
| } |
| .linedtextarea .lines div { |
| padding-right: 5px; |
| color: lightgray; |
| overflow: hidden; |
| } |
| .linedtextarea .lineerror { |
| color: black !important; |
| background: #fdd; |
| } |
| .linedtextarea textarea { |
| height: 100%; |
| width: 100%; |
| float: right; |
| padding: 0; |
| font-size: 0.83rem; |
| } |
| .Button, |
| .Button:link, |
| .Button:visited { |
| align-items: center; |
| background-color: #f7f9fa; |
| border: none; |
| border-radius: 0.1875rem; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| box-sizing: border-box; |
| color: #007d9c; |
| cursor: pointer; |
| display: inline-flex; |
| font: bold 0.875rem Roboto, sans-serif; |
| height: 1.75rem; |
| padding: 0 0.625rem; |
| justify-content: center; |
| min-width: 4.063rem; |
| text-decoration: none; |
| } |
| .Button:active { |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| } |
| .Button--primary, |
| .Button--primary:link, |
| .Button--primary:visited { |
| border: 0.0625rem solid #00add8; |
| } |
| /* Auto-generated table of contents */ |
| .TOC table { |
| margin-top: 1.25rem; |
| margin-bottom: 1.25rem; |
| } |
| .TOC table td { |
| vertical-align: top; |
| } |
| .TOC th { |
| padding-left: 1.25rem; |
| max-width: 50rem; |
| text-align: left; |
| font-weight: normal; |
| } |
| .TOC dl { |
| margin-left: 1.25rem; |
| max-width: 50rem; |
| font-size: 0.875rem; |
| margin-block-end: 0; |
| margin-block-start: 0; |
| } |
| .TOC dd { |
| margin: 0 0 0 1.25rem; |
| font-size: 0.875rem; |
| } |
| .expandAll { |
| cursor: pointer; |
| margin: 1.25rem 0; |
| font-weight: normal; |
| font-size: 0.8em; |
| } |
| .toggleButton { |
| cursor: pointer; |
| } |
| .toggle > .collapsed { |
| display: block; |
| } |
| .toggle > .expanded { |
| display: none; |
| } |
| .toggleVisible > .collapsed { |
| display: none; |
| } |
| .toggleVisible > .expanded { |
| display: block; |
| } |
| /* for doc/go1.html */ |
| table.codetable { |
| margin-left: auto; |
| margin-right: auto; |
| border-style: none; |
| } |
| table.codetable td { |
| padding-right: 0.625rem; |
| } |
| /* for various doc pages */ |
| img.gopher { |
| float: right; |
| margin-left: 0.625rem; |
| margin-bottom: 0.625rem; |
| z-index: -1; |
| } |
| /* for pkg.tmpl */ |
| div.play { |
| padding: 0 1.25rem 2.5rem 1.25rem; |
| } |
| div.play pre, |
| div.play textarea, |
| div.play .lines { |
| padding: 0; |
| margin: 0; |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| div.play .input { |
| padding: 0.625rem; |
| margin-top: 0.625rem; |
| |
| border-top-left-radius: 0.3125rem; |
| border-top-right-radius: 0.3125rem; |
| |
| overflow: hidden; |
| } |
| div.play .input textarea { |
| width: 100%; |
| height: 100%; |
| border: none; |
| outline: none; |
| resize: none; |
| |
| overflow: hidden; |
| } |
| div#playground .input textarea { |
| overflow: auto; |
| resize: auto; |
| } |
| div.play .output { |
| border-top: none !important; |
| |
| padding: 0.625rem; |
| max-height: 12.5rem; |
| overflow: auto; |
| |
| border-bottom-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0.3125rem; |
| } |
| div.play .output pre { |
| padding: 0; |
| border-radius: 0; |
| } |
| div.play .input, |
| div.play .input textarea, |
| div.play .output, |
| div.play .output pre { |
| background: #f7f9fa; |
| color: #202224; |
| } |
| div.play .input, |
| div.play .output { |
| border: 0.0625rem solid #c0c2c3; |
| } |
| div.play .buttons { |
| float: right; |
| padding: 0.625rem 0; |
| text-align: right; |
| } |
| div.play .buttons .Button { |
| margin-left: 0.3125rem; |
| } |
| .output .stderr { |
| color: #933; |
| } |
| .output .system { |
| color: #999; |
| } |
| .permalink { |
| display: none; |
| } |
| :hover > .permalink { |
| display: inline; |
| } |
| #pkg-index h3 { |
| font-size: 1rem; |
| } |
| .pkg-dir { |
| padding: 0 0.625rem; |
| } |
| .pkg-dir table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| .pkg-name { |
| margin-left: 0.625rem; |
| padding-right: 0.625rem; |
| } |
| th.pkg-name { |
| text-align: left; |
| } |
| /* for docs */ |
| .Note { |
| /* For styling "Note" sections. */ |
| background-color: rgb(224, 235, 245); |
| font-size: 0.875rem; |
| margin-top: 1.25rem; |
| margin-bottom: 1.25rem; |
| max-width: 50rem; |
| padding: 0.5rem 0.5rem 0.5rem 0.625rem; |
| } |
| /* Tabs */ |
| .TabSection { |
| background: #fff; |
| border: 0.0625rem solid #dadce0; |
| border-radius: 0.3125rem; |
| box-shadow: none; |
| max-width: 50rem; |
| } |
| .TabSection-tabList { |
| flex-shrink: 0; |
| position: relative; |
| border-bottom: 0.0625rem solid #dadce0; |
| } |
| .TabSection-tab { |
| background: #fff; |
| border: none; |
| line-height: 3rem; |
| padding: 0 1.125rem; |
| position: relative; |
| } |
| .TabSection-tab[aria-selected='true'] { |
| outline: 0; |
| background-color: #e0ebf5; |
| } |
| .TabSection-tab:focus { |
| outline: 0; |
| background-color: #e0ebf5; |
| } |
| .TabSection-tabPanel { |
| font-size: 0.875rem; |
| } |
| /* Tutorial previous and next links */ |
| .Navigation { |
| font-size: 0.875rem; |
| } |
| .Navigation-prev { |
| float: left; |
| font-weight: bold; |
| } |
| .Navigation-next { |
| float: right; |
| font-weight: bold; |
| } |
| /* Table in doc topics. */ |
| .DocTable { |
| border-collapse: collapse; |
| font-size: 0.875rem; |
| margin: 1.25rem; |
| max-width: 50rem; |
| } |
| .DocTable-row { |
| border-bottom: 0.0625rem solid #dadce0; |
| height: 3rem; |
| vertical-align: top; |
| } |
| .DocTable-head { |
| background: #e8eaed; |
| border-bottom: 0.0625rem solid #dadce0; |
| border-top: 0.0625rem solid #dadce0; |
| height: 3rem; |
| } |
| .DocTable-cell { |
| padding: 0.4375rem; |
| } |
| .DocTable-cell pre { |
| font-size: 0.775rem; |
| } |
| .DocTable-cell p, |
| .DocTable-cell pre { |
| margin: 0rem 0rem 0.875rem; |
| } |
| .DocTable-row--highlighted { |
| background: #f0f0f0; |
| border-bottom: 0.0625rem solid #dadce0; |
| height: 3rem; |
| } |
| /* for doc/install */ |
| a#start { |
| background: #e0ebf5; |
| border: 0.0625rem solid #375eab; |
| border-radius: 0.3125rem; |
| color: #222; |
| display: block; |
| padding: 0.625rem; |
| text-align: center; |
| text-decoration: none; |
| } |
| a#start .big { |
| display: block; |
| font-size: 1.25rem; |
| font-weight: bold; |
| } |
| a#start .desc { |
| display: block; |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-top: 0.3125rem; |
| } |
| .download { |
| width: 17.5rem; |
| } |
| table.downloadtable { |
| margin-left: 20px; |
| margin-right: 20px; |
| border-collapse: collapse; |
| } |
| table.downloadtable tr { |
| background-color: #f0f0f0; |
| } |
| table.downloadtable tr:nth-child(2n), table.downloadtable tr.first { |
| background-color: white; |
| } |
| table.downloadtable td, table.downloadtable th { |
| white-space: nowrap; |
| padding: 6px 10px; |
| } |
| table.downloadtable tt { |
| font-size: xx-small; |
| } |
| table.downloadtable tr.highlight td { |
| font-weight: bold; |
| } |
| a.downloadBox { |
| display: block; |
| color: #222; |
| border: 1px solid #375EAB; |
| border-radius: 5px; |
| background: #E0EBF5; |
| width: 280px; |
| float: left; |
| margin-left: 10px; |
| margin-bottom: 10px; |
| padding: 10px; |
| } |
| a.downloadBox:hover { |
| text-decoration: none; |
| } |
| .downloadBox .platform { |
| font-size: large; |
| } |
| .downloadBox .filename { |
| color: #007d9c; |
| font-weight: bold; |
| line-height: 1.5em; |
| } |
| a.downloadBox:hover .filename { |
| text-decoration: underline; |
| } |
| .downloadBox .size { |
| font-size: small; |
| font-weight: normal; |
| } |
| .downloadBox .reqs { |
| font-size: small; |
| font-style: italic; |
| } |
| .downloadBox .checksum { |
| font-size: 5pt; |
| } |
| #manual-nav dl, #pkg-examples dl{ |
| margin-left: 1.25rem; |
| font-size: 0.875rem; |
| margin-block-end: 0; |
| margin-block-start: 0; |
| } |
| #manual-nav dd, #pkg-examples dd { |
| margin: 0 0 0 1.25rem; |
| font-size: 0.875rem; |
| } |