| :root { |
| /* Border */ |
| --border: 0.0625rem solid var(--color-border); |
| --border-card: var(--border); |
| --border-code: var(--border); |
| |
| /* Colors */ |
| --gray-1: #202224; |
| --gray-2: #2d2d2d; |
| --gray-3: #555759; |
| --gray-4: #6e7072; |
| --gray-5: #848688; |
| --gray-6: #aaacae; |
| --gray-7: #c6c8ca; |
| --gray-8: #dcdee0; |
| --gray-9: #f0f1f2; |
| --gray-10: #f8f8f8; |
| --turq-light: #5dc9e2; |
| --turq-med: #50b7e0; |
| --turq-dark: #007d9c; |
| --turq-bright: #00769c; |
| --abbey: #3f4042; |
| --blue: #bfeaf4; |
| --blue-light: #f2fafd; |
| --black-1: #000; |
| --black-2: #111111; |
| --deep-cerulian: #007f9f; |
| --green: #3a6e11; |
| --green-light: #5fda64; |
| --pink: #c85e7a; |
| --pink-light: #fdecf1; |
| --purple: #542c7d; |
| --shark: #2b2d2f; |
| --slate: #253443; /* Footer background. */ |
| --tundora: #414141; |
| --white: #fff; |
| --yellow: #fddd00; |
| --yellow-light: #fff8cc; |
| --testimonial: #007f9f; |
| |
| /* Color Intents */ |
| --color-brand-primary: var(--turq-dark); |
| --color-background: var(--white); |
| --color-background-inverted: var(--slate); |
| --color-background-accented: var(--gray-10); |
| --color-background-highlighted: var(--blue); |
| --color-background-highlighted-link: var(--blue-light); |
| --color-background-info: var(--gray-9); |
| --color-background-warning: var(--yellow-light); |
| --color-background-alert: var(--pink-light); |
| --color-background-banner: var(--turq-dark); |
| --color-background-card-footer: var(--gray-10); |
| --color-background-carousel-button: var(--white); |
| --color-background-code: var(--gray-10); |
| --color-background-logo: rgba(248, 248, 248, 0.9); |
| --color-background-playground-input: #ffffdd; |
| --color-background-testimonial: var(--deep-cerulian); |
| --color-border: var(--gray-7); |
| --color-text: var(--gray-1); |
| --color-text-link: var(--turq-dark); |
| --color-text-subtle: var(--gray-4); |
| --color-text-inverted: var(--white); |
| --color-text-alert: #aa536c; |
| --color-code-comment: var(--green); |
| --color-bright-text-link: var(--turq-bright); |
| |
| /* Interactive Colors */ |
| --color-input: var(--color-background); |
| --color-input-text: var(--color-text); |
| --color-button: var(--turq-dark); |
| --color-button-disabled: var(--gray-9); |
| --color-button-text: var(--white); |
| --color-button-text-disabled: var(--gray-3); |
| --color-button-inverted: var(--color-background); |
| --color-button-inverted-disabled: var(--color-background); |
| --color-button-inverted-text: var(--color-brand-primary); |
| --color-button-inverted-text-disabled: var(--color-text-subtle); |
| --color-button-accented: var(--yellow); |
| --color-button-accented-disabled: var(--gray-9); |
| --color-button-accented-text: var(--gray-1); |
| --color-button-accented-text-disabled: var(--gray-3); |
| } |
| [data-theme='dark'] { |
| --border-card: 0.0625rem solid transparent; |
| --border-code: 0.0625rem solid var(--tundora); |
| |
| --color-brand-primary: var(--turq-dark); |
| --color-background: var(--gray-1); |
| --color-background-accented: var(--gray-2); |
| --color-background-highlighted: var(--gray-2); |
| --color-background-highlighted-link: var(--gray-2); |
| --color-background-info: var(--gray-3); |
| --color-background-warning: var(--yellow); |
| --color-background-alert: var(--pink); |
| --color-background-banner: rgba(0, 125, 156, 0.75); |
| --color-background-banner-secondary: rgba(248, 248, 248, 0.9); |
| --color-background-card-footer: var(--gray-1); |
| --color-background-carousel-button: var(--gray-5); |
| --color-background-code: var(--shark); |
| --color-background-logo: rgba(248, 248, 248, 0.9); |
| --color-background-playground-input: var(--slate); |
| --color-background-testimonial: var(--gray-2); |
| --color-button-text-disabled: var(--gray-6); |
| --color-border: var(--gray-4); |
| --color-text: var(--gray-9); |
| --color-text-link: var(--turq-med); |
| --color-text-subtle: var(--gray-7); |
| --color-text-alert: #e67193; |
| --color-code-comment: var(--green-light); |
| --color-bright-text-link: var(--turq-med); |
| } |
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme='light']) { |
| --border-card: 0.0625rem solid transparent; |
| --border-code: 0.0625rem solid var(--tundora); |
| |
| --color-brand-primary: var(--turq-dark); |
| --color-background: var(--gray-1); |
| --color-background-accented: var(--gray-2); |
| --color-background-highlighted: var(--gray-2); |
| --color-background-highlighted-link: var(--gray-2); |
| --color-background-info: var(--gray-3); |
| --color-background-warning: var(--yellow); |
| --color-background-alert: var(--pink); |
| --color-background-banner: rgb(0, 125, 156, 0.75); |
| --color-background-banner-secondary: rgba(248, 248, 248, 0.9); |
| --color-background-card-footer: var(--gray-1); |
| --color-background-carousel-button: var(--gray-5); |
| --color-background-code: var(--shark); |
| --color-background-logo: rgba(248, 248, 248, 0.9); |
| --color-background-playground-input: var(--slate); |
| --color-background-testimonial: var(--gray-2); |
| --color-button-primary: var(--yellow-primary); |
| --color-button-text-disabled: var(--gray-6); |
| --color-border: var(--gray-4); |
| --color-text: var(--gray-9); |
| --color-text-link: var(--turq-med); |
| --color-text-subtle: var(--gray-7); |
| --color-text-alert: #e67193; |
| --color-code-comment: var(--green-light); |
| } |
| } |
| |
| *, |
| :before, |
| :after { |
| box-sizing: border-box; |
| } |
| @media (prefers-color-scheme: dark) { |
| [data-theme='auto'] .DarkMode-img { |
| display: block; |
| } |
| [data-theme='auto'] .LightMode-img { |
| display: none; |
| } |
| } |
| @media (prefers-color-scheme: light) { |
| [data-theme='auto'] .DarkMode-img { |
| display: none; |
| } |
| [data-theme='auto'] .LightMode-img { |
| display: block; |
| } |
| } |
| [data-theme='dark'] .DarkMode-img { |
| display: block; |
| } |
| [data-theme='dark'] .LightMode-img { |
| display: none; |
| } |
| [data-theme='light'] .DarkMode-img { |
| display: none; |
| } |
| [data-theme='light'] .LightMode-img { |
| display: block; |
| } |
| 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: var(--color-text-link); |
| } |
| pre .highlight, |
| pre .highlight-comment, |
| pre .selection-highlight, |
| pre .selection-highlight-comment { |
| background: var(--yellow); |
| color: var(--gray-1); |
| } |
| pre .selection, |
| pre .selection-comment { |
| background: var(--yellow); |
| } |
| 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; |
| } |
| a, |
| a:link, |
| a:visited { |
| color: var(--color-text-link); |
| text-decoration: none; |
| } |
| a:hover, |
| a:focus { |
| 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: var(--color-background-banner); |
| } |
| .SiteContent { |
| background: var(--color-background); |
| flex: 1; |
| } |
| .Site-footer { |
| border-top: var(--border); |
| color: var(--white); |
| font-size: 0.875rem; |
| } |
| .Site-header { |
| background: var(--color-brand-primary); |
| 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 { |
| background-color: var(--color-background-accented); |
| border: var(--border); |
| border-radius: 0.25rem; |
| box-sizing: border-box; |
| padding: 3.75rem 2rem 3.75rem; |
| } |
| .CaseStudy-aboutBlockTitle { |
| color: var(--color-text); |
| 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; |
| } |
| .UseCase-halfColumn { |
| color: var(--color-text); |
| 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, |
| .Site-footer { |
| 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: var(--white); |
| 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: var(--border); |
| 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: var(--white); |
| } |
| @media only screen and (min-width: 52rem) { |
| .Footer-listItem { |
| flex: initial; |
| } |
| .Footer-listItem + .Footer-listItem { |
| border-left: var(--border); |
| } |
| } |
| .go-Footer-listItem { |
| color: var(--white); |
| padding: 0; |
| } |
| .go-Icon { |
| height: 1.125em; |
| vertical-align: text-bottom; |
| width: auto; |
| } |
| .go-Icon--inverted { |
| filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(13%) |
| hue-rotate(245deg) brightness(103%) contrast(107%); |
| @media (forced-colors:active) and (prefers-color-scheme: light) { |
| filter: brightness(500%) saturate(100%) invert(100%) sepia(97%) saturate(13%) |
| hue-rotate(245deg) brightness(103%) contrast(107%); |
| } |
| } |
| .Footer-feedbackButton { |
| background: none; |
| border: none; |
| color: var(--white); |
| 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; |
| } |
| /* Start nav */ |
| .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: var(--white); |
| } |
| .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; |
| position: relative; |
| } |
| .Header-menuItem .js-desktop-menu-hover > i { |
| pointer-events: 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; |
| margin: 0 0.3125rem; |
| } |
| .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: var(--color-text); |
| display: inline-flex; |
| padding: 0 1.5rem; |
| text-align: center; |
| text-decoration: none; |
| width: 100%; |
| } |
| .Header--dark |
| .Header-menuItem:hover |
| > a:not(.forced-closed).js-desktop-menu-hover, |
| .Header--dark |
| .Header-menuItem:focus-within |
| > a:not(.forced-closed).js-desktop-menu-hover { |
| background: var(--color-background); |
| color: var(--color-text-link); |
| border-color: var(--color-background); |
| } |
| .Header--dark .Header-menuItem a:link, |
| .Header--dark .Header-menuItem a:visited { |
| color: var(--white); |
| } |
| .Header-menuItem--active a:link, |
| .Header-menuItem--active a:visited { |
| border-bottom-color: #00add8; |
| font-weight: bold; |
| } |
| .Header-menuItem a:hover { |
| color: var(--color-text); |
| } |
| .Header-menuItem a:not(.forced-closed):hover { |
| border-bottom-color: var(--white); |
| } |
| .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'); |
| } |
| .skip-to-content-link { |
| background: var(--color-background); |
| border-radius: 6px; |
| color: var(--color-text); |
| font-weight: 500; |
| margin: 5px; |
| position: absolute; |
| overflow: hidden; |
| top: 12px; |
| clip: rect(0 0 0 0); |
| left: 8%; |
| } |
| .skip-to-content-link:focus { |
| clip: unset; |
| } |
| .NavigationDrawer { |
| background: var(--color-background); |
| 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-submenuItem { |
| width: 100%; |
| } |
| |
| .NavigationDrawer-submenuItem .NavigationDrawer-header { |
| min-height: 4.0625rem; |
| font-size: 1.375rem; |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| padding: 0.5rem; |
| padding-left: 1.5rem; |
| color: var(--color-text-link); |
| } |
| |
| .NavigationDrawer.is-active { |
| transform: translateX(0); |
| } |
| .NavigationDrawer-header { |
| align-items: center; |
| display: flex; |
| justify-content: space-between; |
| border-bottom: 0.0625rem solid #eeeeee; |
| margin-bottom: 0.5rem; |
| } |
| .NavigationDrawer-listItem.NavigationDrawer-hasSubnav > a i { |
| float: right; |
| margin-right: -0.5rem; |
| } |
| .NavigationDrawer-listItem.NavigationDrawer-hasSubnav |
| .NavigationDrawer-header |
| a { |
| margin-left: 0; |
| } |
| |
| .NavigationDrawer-listItem .material-icons { |
| color: var(--color-text-link); |
| margin-right: 0.5rem; |
| display: inline-block; |
| vertical-align: sub; |
| } |
| |
| .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; |
| color: var(--color-text-subtle); |
| } |
| .NavigationDrawer-listItem > div:not(.NavigationDrawer), |
| .NavigationDrawer-listItem a:link, |
| .NavigationDrawer-listItem a:visited { |
| display: block; |
| margin: 0 1rem; |
| padding: 0.5rem; |
| } |
| @media only screen and (max-width: 57.7rem) { |
| .NavigationDrawer-listItem .Header-socialIcons { |
| padding: 0.5rem 0; |
| } |
| |
| .NavigationDrawer-listItem a.Header-socialIcon { |
| padding: 0 0.5rem; |
| margin: 0; |
| display: inline-block; |
| } |
| } |
| |
| .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; |
| } |
| .Header-submenu { |
| padding: 1.5rem 1.5rem 0; |
| list-style-type: none; |
| background: transparent; |
| visibility: hidden; |
| opacity: 0; |
| display: none; |
| transition: all 0.2s ease; |
| margin-top: 3.5rem; |
| position: absolute; |
| flex-direction: column; |
| flex-wrap: wrap; |
| color: var(--color-text); |
| background-color: var(--color-background); |
| border: 0.0625rem solid var(--color-brand-primary); |
| border-width: 0 0.0625rem 0.0625rem; |
| } |
| .Header-menuItem:hover |
| > .js-desktop-menu-hover:not(.forced-closed) |
| ~ .Header-submenu, |
| .Header-menuItem:focus-within |
| > .js-desktop-menu-hover:not(.forced-closed) |
| ~ .Header-submenu { |
| visibility: visible; |
| opacity: 1; |
| display: flex; |
| } |
| .Header-submenu .Header-submenuItem a:link, |
| .Header-submenu .Header-submenuItem a:visited { |
| margin: 0; |
| padding: 0; |
| border-bottom: none; |
| font-weight: 400; |
| } |
| .Header-submenu p { |
| max-width: 15.5rem; |
| } |
| .Header-submenu a:link:hover, |
| .Header-submenu a:visited:hover { |
| text-decoration: none; |
| border-bottom: 0.125rem solid var(--color-text-link); |
| } |
| |
| .Header-submenu .Header-submenuItem { |
| padding-bottom: 1.5rem; |
| } |
| |
| .Header-submenu .Header-submenuItem p { |
| font-size: 0.875rem; |
| color: var(--color-text-subtle); |
| margin-top: 0.55rem; |
| margin-bottom: 0; |
| } |
| .Header-submenu .Header-submenuItem i { |
| margin-left: 0.25rem; |
| transform: translateY(0.1rem); /* to get bottom alignment w/ text */ |
| font-size: 0.75rem; |
| } |
| .Header-menuItem .Header-submenuItem a:link, |
| .Header-menuItem .Header-submenuItem a:visited { |
| color: var(--color-text-link); |
| display: inline-flex; |
| align-items: baseline; |
| margin-bottom: -0.125rem; |
| } |
| .Header-menu li:nth-child(1) .Header-submenu { |
| width: 18.5rem; |
| left: -1px; |
| } |
| .Header-menu li:nth-child(3) .Header-submenu { |
| left: -12rem; |
| height: 19.275rem; |
| width: 37.25rem; |
| } |
| .Header-menu li:nth-child(5) .Header-submenu { |
| right: -1px; |
| height: 17.65rem; |
| width: 37.25rem; |
| } |
| .Header-socialIcons { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| .Header-menuItem a.Header-socialIcon { |
| flex: 0 1 auto; |
| display: inline-flex; |
| width: auto; |
| } |
| .Header-menuItem a.Header-socialIcon:not(:last-child) { |
| margin-right: 0.75rem; |
| } |
| [data-theme='dark'] .Header-socialIcon img[src$='/github.svg'] { |
| filter: invert(1); |
| } |
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme='light']) .Header-socialIcon img[src$='/github.svg'] { |
| filter: invert(1); |
| } |
| } |
| .Article { |
| color: var(--color-text); |
| 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 { |
| color: var(--color-text); |
| font-size: 0.875rem; |
| } |
| .Article-date { |
| color: var(--color-text-subtle); |
| } |
| .Article h1, |
| .Article h2, |
| .Article h3, |
| .Article h4, |
| .Article h5, |
| .Article h6 { |
| color: var(--color-text); |
| } |
| .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: var(--color-text); |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: normal; |
| } |
| .Article ol .Article pre { |
| background-color: var(--color-background-accented); |
| border: var(--border); |
| border-radius: 0.375rem; |
| color: var(--color-text); |
| font-size: 1rem; |
| overflow-x: auto; |
| padding: 1.5rem; |
| } |
| .Article pre, |
| .Article code { |
| color: var(--color-text); |
| } |
| .Article pre { |
| background: var(--color-background-accented); |
| } |
| .Article pre { |
| padding: 0.5rem 1.75rem; |
| border-radius: 4px; |
| } |
| .CopyPaste { |
| display: flex; |
| align-items: center; |
| padding: 0.5rem 1.75rem; |
| border-radius: 4px; |
| } |
| .TabSection .CopyPaste { |
| margin-right: 2.5rem; |
| } |
| .CopyPaste button { |
| display: flex; |
| padding: unset; |
| background: none; |
| border: none; |
| margin-left: auto; |
| cursor: copy; |
| } |
| .CopyPaste button img.CopyPaste-icon { |
| margin-left: 1.5rem; |
| background-color: unset; |
| } |
| .CopyPaste .CopyPaste-icon-dark { |
| display: none; |
| } |
| [data-theme='dark'] .CopyPaste .CopyPaste-icon { |
| display: none; |
| } |
| [data-theme='dark'] .CopyPaste .CopyPaste-icon-dark { |
| display: block; |
| } |
| .Sidebar { |
| display: none; |
| } |
| .Sidebar a { |
| width: 7.5rem; |
| } |
| .Sidebar h4 { |
| font-style: normal; |
| font-weight: 500; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| } |
| .Sidebar p, .Sidebar-faq .link { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 0.875rem; |
| line-height: 1.5rem; |
| } |
| .Sidebar-faq h4 { |
| font-size: 0.813rem; |
| margin-top: 1.25rem; |
| margin-bottom: 0.375rem; |
| } |
| .Sidebar-faq p { |
| margin-top: 0; |
| margin-bottom: 0.625rem; |
| } |
| .Sidebar-socialLinks { |
| display: flex; |
| align-items: center; |
| } |
| .Sidebar-socialLinks a { |
| display: flex; |
| width: unset; |
| margin-right: 0.675rem; |
| } |
| @media screen and (min-width: 78rem) { |
| .Article-columns { |
| display: flex; |
| gap: 10rem; |
| } |
| .Article-content { |
| flex: 3; |
| } |
| .Sidebar { |
| display: block; |
| flex: 1; |
| } |
| } |
| .Article.Doc img { |
| background-color: var(--white); |
| } |
| .Article p.DownloadBtn { |
| margin-top: 1.5rem; |
| margin-bottom: 0.675rem; |
| } |
| .Article .DocInstall-footer { |
| padding-bottom: 1.5rem; |
| } |
| .BreadcrumbNav-inner { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem 0; |
| justify-content: start; |
| list-style: none; |
| margin: 0 auto; |
| max-width: 75.75rem; |
| padding: 0 0 1rem; |
| } |
| .SiteBreadcrumb { |
| list-style:none; |
| display:flex; |
| align-items:center; |
| padding:0; |
| margin: 1.5rem 0; |
| } |
| .BreadcrumbNav-li { |
| align-items: center; |
| display: flex; |
| white-space: nowrap; |
| } |
| a.BreadcrumbNav-link { |
| font-size: 0.875rem; |
| text-decoration: none; |
| &:hover, &:focus { |
| text-decoration: underline; |
| } |
| } |
| .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; |
| } |
| [data-theme='dark'] .BreadcrumbNav-li:not(:last-child):after { |
| background: url('/images/icons/arrow-forward-dark.svg') no-repeat; |
| content: ' '; |
| display: block; |
| height: 1rem; |
| margin: 0 0.8125rem; |
| width: 1rem; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme='light']) .BreadcrumbNav-li:not(:last-child):after { |
| background: url('/images/icons/arrow-forward-dark.svg') no-repeat; |
| content: ' '; |
| display: block; |
| height: 1rem; |
| margin: 0 0.8125rem; |
| width: 1rem; |
| } |
| } |
| .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: var(--color-background); |
| } |
| .LearnGo, |
| .UseCases { |
| background-color: var(--color-background-accented); |
| } |
| .WhoUses-header, |
| .WhyGo-header, |
| .LearnGo-header { |
| flex: 0 0 100%; |
| text-align: center; |
| } |
| .WhoUses-headerH2, |
| .WhyGo-headerH2, |
| .GettingStartedGo-headerH2, |
| .HomeSection-header, |
| .LearnGo-header h2 { |
| color: var(--color-text); |
| 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: var(--color-background-accented); |
| 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 { |
| 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: var(--gray-2); |
| 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: var(--color-button-text-disabled); |
| } |
| .GoCarousel-controlPrev[hidden], |
| .GoCarousel-controlNext[hidden] { |
| display: none; |
| } |
| .GoCarousel-icon { |
| transform: translate(5%, -10%); |
| 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 var(--color-border); |
| margin-bottom: 0; |
| padding-right: 3.375rem; |
| } |
| } |
| .GettingStartedGo-headerDesc { |
| color: var(--color-text); |
| } |
| .GettingStartedGo-ctas { |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-top: 1rem; |
| } |
| a.GettingStartedGo-primaryCta { |
| background: var(--color-brand-primary); |
| border-radius: 0.125rem; |
| color: var(--white); |
| 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: var(--color-button-text-disabled); |
| font-size: 0.6875rem; |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| } |
| .GettingStartedGo-resourceItem { |
| margin-bottom: 1rem; |
| } |
| a.GettingStartedGo-resourceItemTitle { |
| color: var(--color-text); |
| font-weight: 500; |
| } |
| .GettingStartedGo-resourceItemDescription { |
| color: var(--color-button-text-disabled); |
| font-size: 0.8125rem; |
| } |
| .WhoUses-header h4, |
| .WhyGo-subheader, |
| .LearnGo-header h4, |
| .WhoUses-subheader { |
| color: var(--color-text); |
| 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-subheader, |
| .LearnGo-header h4, |
| .WhoUses-subheader { |
| font-size: 1rem; |
| } |
| } |
| .Hero { |
| color: var(--white); |
| } |
| .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: var(--white); |
| 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: var(--color-button-accented); |
| border: 0.0625rem solid var(--color-button-accented); |
| box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.2); |
| color: var(--black-1); |
| } |
| .Hero-actions a.Secondary { |
| border: 0.0625rem solid var(--white); |
| color: var(--white); |
| } |
| .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: var(--white); |
| 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 0 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: var(--color-background-accented); |
| } |
| .WhoUses-subheader { |
| color: var(--color-text); |
| 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: var(--color-text-subtle); |
| 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: var(--color-text-subtle); |
| 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 { |
| background-color: var(--color-background-logo); |
| border-radius: 0.25rem; |
| box-shadow: var(--color-border) 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: var(--color-text-subtle); |
| 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: var(--color-background-accented); |
| } |
| .FeaturedUsers table thead th { |
| color: var(--color-button-text-disabled); |
| 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: var(--color-text); |
| 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: var(--color-button-text-disabled); |
| font-size: 1rem; |
| font-weight: 500; |
| } |
| .FeaturedUsers table tbody tr { |
| border-bottom: var(--border); |
| } |
| .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 { |
| display: none; |
| vertical-align: middle !important; |
| } |
| @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 { |
| display: table-cell; |
| } |
| .FeaturedUsers table tr td { |
| padding: 2rem 2rem 1rem 0; |
| position: relative; |
| width: 30%; |
| } |
| .FeaturedUsers--hiddenDesktop { |
| display: none; |
| } |
| } |
| .WhoUsesCaseStudy-librariesWrapper { |
| margin-bottom: 2.25rem; |
| margin-top: 1.875rem; |
| } |
| a.WhoUsesCaseStudy-librariesViewMoreLink { |
| color: var(--color-text-link); |
| 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: var(--color-text); |
| font-size: 1rem; |
| line-height: 1.1875rem; |
| margin: 0.5rem 0 0; |
| } |
| .WhoUsesCaseStudy-view-more { |
| margin-bottom: 2.5rem; |
| } |
| .WhoUsesCaseStudy-view-more a { |
| color: var(--color-text); |
| 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, |
| var(--color-text-link) 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; |
| } |
| .Solutions-header { |
| padding: 0 1.5rem; |
| margin: 2.5rem auto; |
| max-width: 75.75rem; |
| } |
| .Solutions-header .SiteBreadcrumb { |
| margin-bottom: 2rem; |
| } |
| .Solutions-useCase__title { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 36px; |
| line-height: 32px; |
| color: var(--color-text); |
| } |
| @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 { |
| background-color: var(--color-background-accented); |
| border: var(--border-card); |
| 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: var(--color-background-card-footer); |
| 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; |
| &:hover, |
| &:focus { |
| text-decoration: underline; |
| } |
| } |
| .WhyGo-reasonPackages { |
| color: var(--color-text); |
| 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 { |
| background: var(--color-background-accented); |
| border: var(--border-card); |
| border-radius: 0.125rem; |
| box-sizing: border-box; |
| color: var(--color-text-link); |
| 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: var(--color-background-accented); |
| 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 { |
| background-color: var(--color-brand-primary); |
| border-radius: 0.125rem; |
| box-sizing: border-box; |
| color: var(--white); |
| 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: var(--color-text); |
| font-size: 1rem; |
| font-weight: normal; |
| } |
| .WhyGo-reasonTitle { |
| color: var(--color-text); |
| 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: var(--color-text-subtle); |
| 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: var(--color-text); |
| } |
| .LearnGo-courseTitle { |
| text-align: center; |
| } |
| .LearnGo-courseImage { |
| align-items: center; |
| background-color: var(--color-background); |
| 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: var(--white); |
| border: var(--border); |
| 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: var(--color-button-text-disabled); |
| font-size: 0.8125rem; |
| font-style: normal; |
| margin: 0 0 1.5rem 0; |
| } |
| .GoCarousel-eventHeader { |
| color: var(--color-button-text-disabled); |
| 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: var(--color-text); |
| 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: var(--color-background-accented); |
| color: var(--color-text); |
| padding: 0 2.25rem 0; |
| } |
| [data-theme='dark'] .Learn-hero .BreadcrumbNav-li:not(:last-child):after, |
| [data-theme='dark'] .Security-hero .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 (prefers-color-scheme: dark) { |
| :root:not([data-theme='light']) |
| .Learn-hero |
| .BreadcrumbNav-li:not(:last-child):after, |
| :root:not([data-theme='light']) |
| .Security-hero |
| .BreadcrumbNav-li:not(:last-child):after { |
| background: url('/images/icons/arrow-forward.svg') no-repeat; |
| } |
| } |
| .Security-hero .Container { |
| max-width: 68.125rem; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .Learn-heroInner, |
| .Security-heroInner { |
| display: flex; |
| flex-direction: column-reverse; |
| } |
| .Learn-heroInner { |
| padding-bottom: 3.25rem; |
| } |
| |
| .Learn-heroGopher, |
| .Security-heroGopher { |
| display: flex; |
| justify-content: flex-start; |
| padding-top: 1.25rem; |
| } |
| |
| .Learn-heroGopher img, |
| .Security-heroGopher img { |
| height: 8.25rem; |
| width: auto; |
| } |
| |
| .Learn-heroContent { |
| padding-top: 1.125rem; |
| } |
| |
| .Learn-heroContent a:not(.js-downloadBtn):not(.BreadcrumbNav-link) { |
| 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: var(--color-text); |
| font-size: 0.875rem; |
| max-width: 27.1875rem; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 1.5rem; |
| } |
| |
| .Learn-heroAction, |
| .Security-heroAction { |
| align-items: center; |
| background-color: var(--color-brand-primary); |
| 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: var(--white); |
| 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; |
| padding: 0rem 0rem 1rem; |
| } |
| |
| .Learn-cardList, |
| .Security-cardList { |
| column-gap: 2.813rem; |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| justify-content: space-between; |
| list-style: none; |
| padding-left: 0; |
| row-gap: 2.813rem; |
| } |
| |
| .Learn-columns { |
| display: flex; |
| max-width: 78.25rem; |
| margin: auto; |
| padding: 0 1.25rem; |
| } |
| |
| .Learn-columns .Learn-sidebar { |
| display: none; |
| margin-top: 3.75rem; |
| width: 25%; |
| height: 100vh; |
| min-height: 12.5rem; |
| overflow: auto; |
| position: sticky; |
| top: 5%; |
| } |
| |
| .Learn-columns .LearnNav { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .Learn-columns .LearnNav a { |
| display: flex; |
| align-items: center; |
| margin-bottom: 0.875rem; |
| text-decoration: none; |
| } |
| |
| .Learn-columns .LearnNav a span { |
| margin-left: 0.75rem; |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| color: var(--color-text-subtle); |
| } |
| |
| .Learn-columns .LearnNav a svg { |
| visibility: hidden; |
| } |
| |
| .Learn-columns .LearnNav a.active svg { |
| visibility: visible; |
| } |
| |
| .Learn-columns .LearnNav a.active span, |
| .Learn-columns .LearnNav a span:hover { |
| color: var(--color-text); |
| font-weight: 500; |
| } |
| |
| .Learn-card, |
| .Security-card { |
| min-height: 13.25rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-cardList, |
| .Security-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| .Learn-card { |
| max-width: 15.875rem; |
| } |
| .Learn-heroGopher img, |
| .Security-heroGopher img { |
| height: 13.25rem; |
| } |
| } |
| @media only screen and (min-width: 72.75rem) { |
| .Learn-columns .Learn-sidebar { |
| display: block; |
| } |
| .Learn-cardList, |
| .Security-cardList { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| .Learn-heroGopher, |
| .Security-heroGopher { |
| display: flex; |
| justify-content: flex-end; |
| padding-top: 3.25rem; |
| } |
| } |
| |
| /* 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: flex-end; |
| align-items: center; |
| } |
| |
| .Security-heroGopher img { |
| height: 21.0625rem; |
| } |
| |
| .Learn-heroAction, |
| .Security-heroAction { |
| height: 2.5rem; |
| width: 10.25rem; |
| } |
| |
| .Security-heroAction a, |
| .Security-heroAction a:hover, |
| .Security-heroAction a:visited { |
| font-size: 1.5rem; |
| } |
| |
| .Learn-heroAction a, |
| .Learn-heroAction a:hover, |
| .Learn-heroAction a:visited { |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 1rem; |
| } |
| |
| .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, |
| .Learn-tutorials { |
| 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 { |
| color: var(--color-text); |
| margin: 0; |
| } |
| |
| .Learn-learningResources h2 { |
| font-size: 2rem; |
| font-weight: 500; |
| line-height: 2.3125rem; |
| } |
| |
| .Learn-learningResourcesHeader, |
| .Security-sectionHeader { |
| color: var(--color-text); |
| display: flex; |
| justify-content: flex-start; |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| |
| .Learn-subHeader h2 { |
| color: var(--color-text); |
| } |
| |
| .Learn-learningResourcesHeader h3 { |
| font-size: 1.5rem; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 2.25rem; |
| } |
| |
| .Learn-learningResourcesHeader p { |
| color: var(--color-text-subtle); |
| font-size: 0.875rem; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 1.375rem; |
| } |
| |
| .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; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .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%; |
| grid-gap: 0; |
| } |
| |
| .Learn-card.Learn-book { |
| height: auto; |
| max-width: 26.5rem; |
| } |
| |
| @media only screen and (min-width: 48rem) { |
| .Learn-cardList.Learn-bookList { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| .Learn-inPersonList { |
| display: grid; |
| list-style: none; |
| padding-left: 0; |
| grid-template-columns: repeat(1, 1fr); |
| } |
| |
| .Learn-inPerson { |
| flex: 1 1 31.25rem; |
| max-width: 36.5rem; |
| padding-bottom: 1.25rem; |
| } |
| |
| .Learn-inPersonTitle { |
| font-size: 1.25rem; |
| } |
| .Learn-inPersonBlurb { |
| color: var(--color-text); |
| line-height: 1.75rem; |
| } |
| |
| .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: var(--border); |
| } |
| |
| .Learn-eventThumbnail { |
| align-self: center; |
| display: flex; |
| flex: 0 0 3rem; |
| height: auto; |
| margin-bottom: 1rem; |
| } |
| .Learn-eventThumbnail--noimage { |
| background-color: var(--color-background); |
| } |
| .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: var(--color-text-subtle); |
| margin: 0; |
| } |
| .Learn-eventName { |
| color: var(--color-text); |
| font-size: 1.25rem; |
| font-weight: 500; |
| margin: 0; |
| |
| margin-bottom: 1rem; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .Learn-eventName a { |
| color: var(--color-text); |
| text-decoration: none; |
| } |
| .Learn-eventDescription { |
| color: var(--color-text); |
| -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)); |
| } |
| .Learn-inPersonBlurb { |
| margin-right: 10rem; |
| } |
| } |
| @media only screen and (min-width: 48rem) { |
| .Learn-tileList { |
| justify-content: space-between; |
| } |
| .Learn-tileList { |
| column-gap: 3rem; |
| } |
| .Learn-inPersonList { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| .Learn-tile { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| .Learn-tile a { |
| color: var(--color-text); |
| } |
| .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: var(--color-background); |
| 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-headline .GoCarousel { |
| background-color: var(--color-background-accented); |
| color: var(--color-text); |
| } |
| .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: var(--color-text); |
| 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: var(--color-text-subtle); |
| 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; |
| &:hover, &:focus { |
| text-decoration: underline; |
| } |
| } |
| .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: var(--color-text-subtle); |
| font-size: 0.75rem; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 2.25rem; |
| margin: 1.5rem 0; |
| } |
| .Solutions-headline { |
| background-color: var(--color-background-accented); |
| } |
| .Solutions-headline h2 { |
| 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: var(--border); |
| margin: -0.0625rem 0 2rem; |
| } |
| .SolutionsTabs-tab { |
| background-color: var(--color-background); |
| border-style: none; |
| color: var(--color-text); |
| 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 var(--color-brand-primary); |
| } |
| @media only screen and (min-width: 48rem) { |
| .SolutionsTabs-tab { |
| font-size: 1.125rem; |
| margin-right: 4rem; |
| } |
| } |
| .Solutions-useCasesHeader h2, |
| .Solutions-caseStudiesHeader h2 { |
| } |
| .MarketingCardList { |
| list-style: none; |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| gap: 1.75rem; |
| padding: unset; |
| } |
| .MarketingCard { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| padding: 0 1.75rem; |
| text-align: left; |
| box-sizing: border-box; |
| width: auto; |
| height: auto; |
| min-height: 24.625rem; |
| background: var(--color-background); |
| border: var(--border); |
| border-radius: 0.25rem; |
| } |
| .MarketingCard a:hover, |
| .MarketingCard a:focus { |
| text-decoration: none; |
| } |
| .MarketingCard-section { |
| margin-top: 2.625rem; |
| } |
| .MarketingCard-section__bottom { |
| position: absolute; |
| bottom: 2.625rem; |
| } |
| .MarketingCard-section__spacer { |
| padding-bottom: 6.25rem; |
| } |
| .MarketingCard-title { |
| color: var(--color-text); |
| font-size: 1.125rem; |
| line-height: 1.5rem; |
| font-weight: 500; |
| font-style: normal; |
| } |
| .MarketingCard-body { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| letter-spacing: 0.1px; |
| color: var(--color-text-subtle); |
| } |
| .MarketingCard-action { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| letter-spacing: 0.1px; |
| color: var(--color-text-link); |
| background: unset; |
| border: none; |
| padding: unset; |
| cursor: pointer; |
| } |
| .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: var(--color-background-accented); |
| border: var(--border-card); |
| border-radius: 0.625rem; |
| box-sizing: border-box; |
| flex: 0 100%; |
| } |
| @media only screen and (min-width: 38rem) { |
| .Solutions-cardList, .MarketingCardList { |
| 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, .MarketingCardList { |
| 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: var(--color-text); |
| display: block; |
| text-decoration: none; |
| } |
| .Solutions-useCaseAction { |
| bottom: 1rem; |
| color: var(--color-text-link); |
| 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: var(--color-text-subtle); |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: normal; |
| } |
| .Solutions-useCaseTitle { |
| color: var(--color-text); |
| 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: var(--color-text); |
| 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: var(--color-text); |
| font-size: 0.875rem; |
| text-align: center; |
| } |
| .TestimonialsGo-author { |
| color: var(--color-text); |
| 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: var(--color-text-subtle); |
| 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; |
| } |
| a.BackgroundQuote-link { |
| color: inherit; |
| } |
| .PullQuote-author { |
| font-size: 0.875rem; |
| } |
| .BackgroundQuote { |
| background-color: var(--color-background-testimonial); |
| color: var(--white); |
| 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 var(--color-brand-primary); |
| border-top: 0.25rem solid var(--color-brand-primary); |
| 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: var(--color-text); |
| font-size: 1.125rem; |
| line-height: 2rem; |
| } |
| .QuoteBlock-author { |
| color: var(--color-text); |
| font-size: 1rem; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 3rem; |
| } |
| .QuoteBlock-link { |
| color: var(--color-text-subtle); |
| } |
| .LargeMedia { |
| align-items: flex-start; |
| display: flex; |
| padding: 2.125rem 0.5rem; |
| } |
| .LargeMedia + .LargeMedia { |
| border-top: var(--border); |
| } |
| .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: var(--color-text); |
| } |
| .MediaList-itemBody { |
| color: var(--color-button-text-disabled); |
| } |
| @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: var(--color-text); |
| font-size: 1.5rem; |
| font-weight: normal; |
| margin: 0.5rem 0 0 0; |
| } |
| .MediaList-itemBox .MediaList-itemBoxBody { |
| align-self: flex-end; |
| color: var(--color-button-text-disabled); |
| flex: 1; |
| } |
| .MediaList-itemBox .MediaList-itemBoxBody-top { |
| align-self: flex-start; |
| color: var(--color-button-text-disabled); |
| 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, |
| var(--color-brand-primary) 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: var(--color-background); |
| margin-left: 1.5rem; |
| max-width: 100%; |
| } |
| .SearchForm svg { |
| fill: var(--color-background); |
| } |
| .SearchForm--open svg { |
| fill: var(--color-button-text-disabled); |
| 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: var(--color-background); |
| margin: 0.6rem 1.4rem 0.6rem 0; |
| max-width: none; |
| } |
| .SearchForm-input { |
| opacity: 1; |
| padding: initial; |
| width: 100%; |
| } |
| .SearchForm svg { |
| fill: var(--color-button-text-disabled); |
| 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: var(--border); |
| } |
| .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: var(--color-text); |
| display: inline-block; |
| margin-bottom: 0; |
| text-decoration: none; |
| } |
| .UseCaseSubNav { |
| background-color: var(--color-background); |
| box-shadow: 0 0.125rem 0.125rem rgba(171, 171, 171, 0.405239); |
| position: fixed; |
| top: 0; |
| width: 100%; |
| z-index: 10; |
| } |
| .UseCaseSubNav--default { |
| top: 3.5rem; |
| } |
| .UseCaseSubNav-menu { |
| background-color: var(--color-background); |
| 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: var(--color-button-text-disabled); |
| 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: var(--border); |
| 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: sticky; |
| top: 2rem; |
| } |
| a.UseCase-anchorLink { |
| background: transparent; |
| border: none; |
| color: var(--color-text); |
| 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: var(--color-text-link); |
| 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: var(--color-background-accented); |
| 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-heroText--caseStudy h1, |
| .WhoUsesSubPage-heroText--useCase h1 { |
| color: var(--color-text); |
| } |
| .WhoUsesSubPage-heroImg { |
| background: -webkit-linear-gradient( |
| 0deg, |
| var(--color-background-accented) 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, |
| var(--color-background-accented) 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, |
| var(--color-background-accented) 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: var(--color-background-accented); |
| border: var(--border); |
| 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; |
| } |
| .FlatCard { |
| border: var(--border); |
| border-radius: 0.25rem; |
| padding: 0 1.5rem; |
| padding-bottom: 0.75rem; |
| width: 100%; |
| min-height: 11.25rem; |
| } |
| .FlatCard-wrapper { |
| display: grid; |
| grid-gap: 2rem; |
| grid-auto-flow: row; |
| grid-template-columns: 1fr 1fr 1fr; |
| margin-top: 1rem; |
| } |
| .FlatCard-column { |
| display: flex; |
| flex-direction: column; |
| gap: 2rem; |
| width: 100%; |
| margin-top: 1rem; |
| } |
| .FlatCard-bottom-spacer { |
| margin-bottom: 4rem; |
| } |
| .FlatCard-column .FlatCard { |
| width: 100%; |
| } |
| .FlatCard h3 { |
| font-style: normal; |
| font-weight: 500; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| } |
| .Masonry { |
| column-count: 1; |
| column-gap: 3.5rem; |
| row-gap: 3.5rem; |
| column-fill: balance; |
| } |
| .BigCard { |
| border: var(--border); |
| border-radius: 0.25rem; |
| padding: 0 1.75rem; |
| padding-bottom: 1rem; |
| margin-bottom: 1.5rem; |
| } |
| .Masonry .BigCard { |
| margin-bottom: unset; |
| margin-top: 1.5rem; |
| min-width: 33%; |
| height: max-content; |
| display: inline-block; |
| -webkit-column-break-inside: avoid; |
| page-break-inside: avoid; |
| break-inside: avoid; |
| width: 100%; |
| } |
| .BigCard h2 { |
| margin-top: 1.5rem; |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1.125rem; |
| line-height: 2rem; |
| border-bottom: var(--border); |
| padding-bottom: 0.5rem; |
| } |
| @media only screen and (min-width: 48rem) { |
| .Masonry { |
| column-count: 2; |
| } |
| } |
| .Card { |
| background-color: var(--white); |
| border: var(--border); |
| border-radius: 0.25rem; |
| height: 100%; |
| } |
| [data-theme='dark'] .Card { |
| background-color: var(--abbey); |
| border: none; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme='light']) .Card { |
| background-color: var(--abbey); |
| border: none; |
| } |
| } |
| .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: var(--color-text); |
| font-size: 1.125rem; |
| font-weight: 500; |
| } |
| |
| .Card-contentBody { |
| color: var(--color-text-subtle); |
| font-size: 0.875rem; |
| margin-top: 1rem; |
| } |
| |
| .Card-lineClamp { |
| overflow: hidden; |
| display: -webkit-box; |
| -webkit-box-orient: vertical; |
| -webkit-line-clamp: 5; |
| } |
| |
| .Card-contentCta { |
| align-items: center; |
| display: flex; |
| margin-top: auto; |
| } |
| |
| .Card-contentCta span { |
| margin-right: 0.6875rem; |
| } |
| |
| .Card-selfPacedFooter { |
| display: flex; |
| } |
| |
| .Card-selfPacedCredits { |
| color: var(--color-text-subtle); |
| 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 { |
| display: flex; |
| align-items: flex-start; |
| } |
| |
| .Book-thumbnail { |
| width: 6.625rem; |
| } |
| |
| .Book-thumbnail img { |
| width: 6.25rem; |
| height: 7.875rem; |
| border-radius: 0.625rem; |
| filter: drop-shadow(0 0.125rem 0.125rem rgba(200, 200, 200, 0.29458)); |
| } |
| |
| .Book-content { |
| margin-left: 2rem; |
| } |
| |
| .Book-eyebrow { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 0.688rem; |
| letter-spacing: 0.063rem; |
| text-transform: uppercase; |
| color: var(--color-text-subtle); |
| margin-top: 0; |
| } |
| |
| .Book-title { |
| color: var(--color-text); |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 1.5rem; |
| margin: 0 0 0.5rem; |
| } |
| |
| .Book-description { |
| color: var(--color-text-subtle); |
| font-size: 0.875rem; |
| } |
| |
| .Book-cta { |
| align-items: center; |
| display: flex; |
| height: 1.5rem; |
| } |
| |
| .Book-cta span { |
| margin-right: 0.6875rem; |
| font-style: normal; |
| font-weight: 400; |
| font-size: 0.875rem; |
| line-height: 1rem; |
| letter-spacing: 0.016rem; |
| } |
| |
| #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: var(--color-text-subtle); |
| } |
| #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; |
| } |
| #blog svg { |
| fill: var(--color-text); |
| } |
| #blog .image > img { |
| background-color: var(--white); |
| } |
| #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: var(--color-background-accented); |
| } |
| #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: var(--color-brand-primary); |
| } |
| .Security-getStarted, |
| .Security-recentupdates { |
| padding: 2.5rem 0; |
| } |
| .Security-getStarted .Security-sectionHeader { |
| color: var(--white); |
| } |
| .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: var(--color-brand-primary); |
| } |
| .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: var(--color-button-accented); |
| border-radius: 0.25rem; |
| color: #000; |
| } |
| .Security-secondary-cta-body h2 { |
| color: var(--white); |
| 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, |
| var(--color-brand-primary) 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 { |
| color: var(--color-text); |
| } |
| .PlayPage .Playground-inputContainer { |
| height: 30em; |
| } |
| .PlayPage .Playground-outputContainer { |
| height: 20em; |
| } |
| @media screen and (min-height: 50em) { |
| .PlayPage .Playground-inputContainer { |
| height: 40em; |
| } |
| } |
| .PlayAbout { |
| color: var(--color-text); |
| 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-output .stderr { |
| color: var(--color-text-alert); |
| } |
| .Playground-output .system { |
| color: var(--color-text-subtle); |
| } |
| .Playground-inputContainer, |
| .Playground-input { |
| background: var(--color-background-playground-input); |
| } |
| .Playground-runButton { |
| background-color: var(--color-background-playground-input) !important; |
| } |
| .Playground-outputContainer, |
| .Playground-output, |
| .Playground-preContainer { |
| background: var(--color-background-code); |
| } |
| .Playground-inputContainer, |
| .Playground-input, |
| .Playground-outputContainer, |
| .Playground-output { |
| color: var(--color-text); |
| } |
| .Playground-inputContainer, |
| .Playground-outputContainer { |
| border: var(--border-code); |
| resize: vertical; |
| } |
| .Playground-preContainer { |
| border-bottom: var(--border-code); |
| } |
| .Playground-preContainer { |
| display: none; |
| } |
| .Playground-input:focus + .Playground-preContainer { |
| display: block; |
| } |
| .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: var(--color-background); |
| border-radius: 3px; |
| border: var(--border); |
| color: var(--color-input-text); |
| 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 { |
| 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 { |
| align-items: start; |
| flex-direction: column; |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| margin-top: 1.5rem; |
| padding: 0 1rem; |
| } |
| @media only screen and (min-width: 57.7rem) { |
| .PlayPage .Playground-controls { |
| align-items: initial; |
| flex-direction: row; |
| margin-bottom: 1.5rem; |
| margin-top: 3rem; |
| padding: 0; |
| } |
| } |
| .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: var(--color-background-accented); |
| border: none; |
| border-radius: 0.1875rem; |
| box-shadow: 0 0.125rem 5px rgba(0, 0, 0, 0.2); |
| box-sizing: border-box; |
| color: var(--color-text-link); |
| 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 0.0625rem 3px rgba(0, 0, 0, 0.2); |
| } |
| .Button--primary, |
| .Button--primary:link, |
| .Button--primary:visited { |
| border: 0.0625rem solid #00add8; |
| } |
| .Playground-button, |
| .WhyGo-reasonLink { |
| color: var(--color-bright-text-link) !important; |
| } |
| /* 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; |
| background-color: var(--color-background-accented); |
| padding: 0.5rem; |
| } |
| h3.toggleButton { |
| font-style: normal; |
| font-weight: 500; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| padding-left: 1rem; |
| display: flex; |
| align-items: center; |
| } |
| #archive h2.toggleButton { |
| background-color: var(--color-background); |
| } |
| .toggleButton span.toggleText { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| color: var(--color-text-link); |
| margin-left: 0.625rem; |
| } |
| .toggleButton-img { |
| display: block; |
| } |
| .toggleButton-img-dark { |
| display: none; |
| } |
| [data-theme='dark'] .toggleButton-img { |
| display: none; |
| } |
| [data-theme='dark'] .toggleButton-img-dark { |
| display: block; |
| } |
| .toggle .collapsed img { |
| transform: rotate(180deg); |
| } |
| .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: var(--color-background-accented); |
| color: var(--color-text); |
| } |
| div.play .input, |
| div.play .output { |
| border: var(--border); |
| } |
| div.play .buttons { |
| float: right; |
| padding: 0.625rem 0; |
| text-align: right; |
| } |
| div.play .buttons .Button { |
| margin-left: 0.3125rem; |
| } |
| |
| /* TODO(rsc): are these selectors stale? It looks like they were not ported to go.dev/play. |
| * See for example .Playground-output .stderr. */ |
| .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: var(--color-background-accented); |
| 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: var(--color-background); |
| border: var(--border); |
| border-radius: 0.3125rem; |
| box-shadow: none; |
| max-width: 50rem; |
| } |
| .TabSection-tabList { |
| flex-shrink: 0; |
| position: relative; |
| border-bottom: var(--border); |
| } |
| .TabSection-tab { |
| background: var(--color-background); |
| border: none; |
| color: var(--color-text); |
| line-height: 3rem; |
| padding: 0 1.125rem; |
| position: relative; |
| border-radius: 0.3125rem; |
| } |
| .TabSection-underline { |
| display: none; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| margin: auto; |
| } |
| .TabSection-tab[aria-selected='true'] .TabSection-underline { |
| display: block; |
| background-color: var(--color-background); |
| } |
| .TabSection-tab[aria-selected='true'] { |
| color: var(--color-text-link); |
| outline: 0; |
| } |
| .TabSection-tab:focus { |
| color: var(--color-text-link); |
| outline: 0; |
| } |
| .TabSection-tabPanel { |
| font-size: 0.875rem; |
| padding: 1rem 0; |
| } |
| /* 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: var(--border); |
| height: 3rem; |
| vertical-align: top; |
| } |
| .DocTable-head { |
| background: var(--color-background-accented); |
| border-bottom: var(--border); |
| border-top: var(--border); |
| 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: var(--border); |
| height: 3rem; |
| } |
| /* for doc/install */ |
| a.btn { |
| background: var(--deep-cerulian); |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1rem; |
| border-radius: 0.3125rem; |
| color: #FFF; |
| 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: 10.25rem; |
| height: 2.5rem; |
| } |
| table.downloadtable { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| table.downloadtable thead { |
| border: 2px solid var(--color-background-accented); |
| } |
| table.downloadtable tr:nth-child(2n), |
| table.downloadtable tr.first, |
| table.downloadtable tr { |
| background-color: var(--color-background); |
| border: 2px solid var(--color-background-accented); |
| } |
| table.downloadtable tr.first[aria-expanded] { |
| cursor: pointer; |
| } |
| table.downloadtable tr.first[aria-expanded] th::after { |
| content: "⌵"; |
| display: inline-block; |
| padding: 0 0.5rem; |
| transform: rotate(180deg); |
| vertical-align: sub; |
| } |
| table.downloadtable tr.first[aria-expanded="true"] th::after { |
| bottom: 0.3125rem; |
| position: relative; |
| transform: rotate(0); |
| } |
| table.downloadtable tr.first[aria-expanded="false"] ~ tr.secondary { |
| display: none; |
| } |
| table.downloadtable tr.first[aria-expanded="true"] ~ tr.secondary { |
| display: table-row; |
| } |
| table.downloadtable tr.first th { |
| text-align: left; |
| font-style: normal; |
| font-weight: 500; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| } |
| table.downloadtable td { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1rem; |
| line-height: 1.5rem; |
| } |
| table.downloadtable td.filename, table.downloadtable tr.first th:nth-child(1) { |
| padding-left: 4.5rem; |
| } |
| 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: flex; |
| flex-direction: column; |
| color: var(--color-text); |
| background: var(--color-background-accented); |
| width: 13.875rem; |
| height: 8.375rem; |
| float: left; |
| padding: 1rem; |
| } |
| a.downloadBox:hover { |
| text-decoration: none; |
| } |
| .downloadBox .platform { |
| font-size: large; |
| margin-bottom: 0.75rem; |
| } |
| .downloadWrapper { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| margin-top: 1rem; |
| } |
| .downloadBox .filename { |
| display: flex; |
| align-items: center; |
| margin-top: auto; |
| } |
| .downloadBox .filename img { |
| margin-right: 0.375rem; |
| } |
| .downloadBox .filename span { |
| color: var(--color-text-link); |
| font-style: normal; |
| font-weight: 400; |
| font-size: 0.75rem; |
| line-height: 0.75rem; |
| } |
| a.downloadBox:hover .filename span { |
| text-decoration: underline; |
| } |
| .downloadBox .size { |
| font-size: small; |
| font-weight: normal; |
| } |
| .downloadBox .reqs { |
| font-style: normal; |
| font-weight: 400; |
| font-size: 0.75rem; |
| line-height: 1rem; |
| color: var(--color-text-subtle); |
| } |
| .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; |
| } |
| .go-Button { |
| align-items: center; |
| background-color: var(--color-button); |
| border: 0.0625rem solid transparent; |
| border-radius: var(--border-radius); |
| color: var(--color-button-text); |
| cursor: pointer; |
| display: inline-flex; |
| font-weight: 500; |
| gap: 0.25rem; |
| } |
| .go-Button:not(.go-Button--inline) { |
| padding: 0.5rem; |
| } |
| .go-Button--inverted, |
| .go-Button--text, |
| .go-Button--inline { |
| background-color: var(--color-button-inverted); |
| color: var(--color-button-inverted-text); |
| } |
| .go-Button--inline { |
| background-color: transparent; |
| } |
| .go-Button--inverted { |
| border: var(--border); |
| } |
| .go-Button:hover { |
| box-shadow: var(--focus-box-shadow); |
| filter: contrast(0.95); |
| } |
| .go-Button--inline:hover { |
| box-shadow: none; |
| text-decoration: underline var(--color-button-inverted-text); |
| } |
| .go-Button:focus { |
| filter: contrast(0.95); |
| } |
| .go-Button--inverted:focus { |
| border-color: var(--color-button-inverted-text); |
| } |
| .go-Button:active { |
| box-shadow: none; |
| filter: contrast(0.85); |
| } |
| .go-Button:disabled { |
| background-color: var(--color-button-disabled); |
| box-shadow: none; |
| color: var(--color-button-text-disabled); |
| cursor: initial; |
| filter: none; |
| text-decoration: none; |
| } |
| .go-Button--accented:disabled { |
| background-color: var(--color-button-accented-disabled); |
| color: var(--color-button-accented-text-disabled); |
| } |
| .go-Button--inverted:disabled, |
| .go-Button--text:disabled, |
| .go-Button--inline:disabled { |
| background-color: var(--color-button-inverted-disabled); |
| color: var(--color-button-inverted-text-disabled); |
| } |
| .go-Button--inline:disabled { |
| background-color: transparent; |
| } |
| .go-Footer-listItem { |
| align-items: center; |
| display: flex; |
| flex: 1 100%; |
| justify-content: center; |
| margin: 0.4rem 0; |
| padding: 0 1rem; |
| } |
| .go-Footer-listItem a:link, |
| .go-Footer-listItem a:visited { |
| color: var(--color-text-inverted); |
| } |
| .go-Footer-listItem .go-Button--text { |
| background-color: transparent; |
| font-size: 1rem; |
| margin: -0.5rem 0; |
| } |
| .go-Footer-listItem [data-value] { |
| display: none; |
| } |
| [data-theme='auto'] .go-Footer-listItem [data-value='auto'], |
| :root:not([data-theme]) .go-Footer-listItem [data-value='auto'] { |
| display: initial; |
| } |
| [data-theme='dark'] .go-Footer-listItem [data-value='dark'] { |
| display: initial; |
| } |
| [data-theme='light'] .go-Footer-listItem [data-value='light'] { |
| display: initial; |
| } |
| .go-Footer-toggleTheme, |
| .go-Footer-keyboard { |
| margin: 0 0 0.5rem 0; |
| } |
| |
| @media only screen and (min-width: 52rem) { |
| .go-Footer-listItem { |
| flex: initial; |
| } |
| .go-Footer-listItem + .go-Footer-listItem { |
| border-left: var(--border); |
| } |
| .go-Footer-toggleTheme { |
| margin: 0 0 0 -0.5rem; |
| } |
| .go-Footer-keyboard { |
| margin: 0; |
| } |
| } |
| |
| .Cookie-notice { |
| align-items: center; |
| background-color: var(--color-background); |
| border-top: var(--border); |
| bottom: 0; |
| color: var(--color-text); |
| display: none; |
| gap: 1rem; |
| justify-content: center; |
| left: 0; |
| padding: 1rem; |
| position: fixed; |
| right: 0; |
| z-index: 100; |
| } |
| |
| .Cookie-notice--visible { |
| display: flex; |
| } |
| |
| @media print { |
| .Cookie-notice, |
| .Cookie-notice--visible { |
| display: none; |
| } |
| } |