/* * Site chrome: the top bar, navbar and footer every page shares (marketing pages and /app alike). * * Standalone on purpose. It needs no Bootstrap, Tailwind or icon font, and nothing those (or the React * app's styles) declare can reach it: every rule is scoped under one of the three chrome ids, and the * reset below wipes element and inherited styles before the chrome sets its own. The header therefore * looks the same whatever the rest of the page loads. Only a rule that targets these ids, or uses * !important on a bare element, could still leak in. * * Colors come from palette.css (shared with the marketing pages); sizes and the rest are tokens below. * ChipTracer can reuse this file with its own palette. Dark tokens apply to /app when the OS is dark; * marketing pages opt out with . * * Plain CSS (no SCSS) so it is committed as-is and never depends on a compile step. * Written for old browsers too: no nesting, :where, :is, gap or logical properties. */ /* ---------- Tokens ---------- */ /* Colors come from the shared palette (palette.css: --brand-*, --ink-* as "R G B" channels), so the header and footer re-skin together with the marketing pages. Layouts load palette.css before this file. */ #sc-topbar, #sc-navbar, #sc-footer { --sc-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sc-container: 80rem; --sc-radius: 0.375rem; --sc-text: rgb(var(--ink-700)); --sc-topbar-bg: rgb(var(--ink-800)); --sc-topbar-text: rgb(var(--ink-300)); --sc-topbar-hover: #ffffff; --sc-navbar-bg: #ffffff; --sc-navbar-border: rgb(var(--ink-100)); --sc-navbar-shadow: 0 6px 20px -12px rgb(var(--ink-950) / 0.35); --sc-brand-height: 36px; --sc-logo-filter: none; --sc-nav-link: rgb(var(--ink-700)); --sc-nav-link-hover: rgb(var(--brand-600)); --sc-nav-link-hover-bg: rgb(var(--ink-50)); --sc-focus-ring: rgb(var(--brand-500) / 0.35); --sc-toggler-border: rgb(var(--ink-200)); --sc-menu-bg: #ffffff; --sc-menu-text: rgb(var(--ink-700)); --sc-menu-border: rgb(var(--ink-100)); --sc-menu-shadow: 0 16px 40px -12px rgb(var(--ink-950) / 0.22), 0 2px 6px rgb(var(--ink-950) / 0.05); --sc-menu-hover-bg: rgb(var(--ink-50)); --sc-menu-hover-text: rgb(var(--brand-700)); --sc-menu-heading: rgb(var(--ink-400)); --sc-notice-text: rgb(var(--brand-700)); --sc-notice-bg: rgb(var(--brand-50)); --sc-notice-border: rgb(var(--brand-100)); --sc-primary: rgb(var(--brand-600)); --sc-primary-text: #ffffff; --sc-primary-hover-bg: rgb(var(--brand-700)); --sc-footer-bg: rgb(var(--ink-950)); --sc-footer-text: rgb(var(--ink-300)); --sc-footer-heading: #ffffff; --sc-footer-link: rgb(var(--ink-200)); --sc-footer-link-hover: #ffffff; --sc-footer-accent: rgb(var(--brand-400)); --sc-footer-rule: rgba(255, 255, 255, 0.1); } @media (prefers-color-scheme: dark) { html:not([data-color-mode="light"]) #sc-topbar, html:not([data-color-mode="light"]) #sc-navbar, html:not([data-color-mode="light"]) #sc-footer { --sc-text: rgb(var(--ink-200)); --sc-navbar-bg: rgb(var(--ink-950)); --sc-navbar-border: rgb(var(--ink-800)); --sc-navbar-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.8); --sc-logo-filter: brightness(0) invert(1); --sc-nav-link: rgb(var(--ink-200)); --sc-nav-link-hover: rgb(var(--brand-300)); --sc-nav-link-hover-bg: rgb(var(--ink-900)); --sc-toggler-border: rgb(var(--ink-700)); --sc-menu-bg: rgb(var(--ink-900)); --sc-menu-text: rgb(var(--ink-200)); --sc-menu-border: rgb(var(--ink-800)); --sc-menu-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); --sc-menu-hover-bg: rgb(var(--ink-800)); --sc-menu-hover-text: #ffffff; --sc-notice-text: rgb(var(--brand-200)); --sc-notice-bg: rgb(var(--brand-900)); --sc-notice-border: rgb(var(--brand-800)); } } /* ---------- Isolation reset ---------- */ /* Wipe everything outside CSS could have set. SVG paths are spared from `all` because it would also clear their geometry (d is a CSS property in Chrome); their paint properties are reset individually instead. Icons therefore use only (Icons.cs converts shapes). Keep this to a single :not() so the reset's specificity (1,0,1) stays below the element rules that follow it. */ #sc-topbar, #sc-navbar, #sc-footer, #sc-topbar::before, #sc-navbar::before, #sc-footer::before, #sc-topbar::after, #sc-navbar::after, #sc-footer::after, #sc-topbar *:not(path), #sc-navbar *:not(path), #sc-footer *:not(path), #sc-topbar *::before, #sc-navbar *::before, #sc-footer *::before, #sc-topbar *::after, #sc-navbar *::after, #sc-footer *::after { all: unset; box-sizing: border-box; } #sc-topbar path, #sc-navbar path, #sc-footer path { display: inline; visibility: inherit; opacity: 1; filter: none; clip-path: none; mask: none; } /* Re-establish the inherited text settings a page would normally provide. */ #sc-topbar, #sc-navbar, #sc-footer { display: block; font-family: var(--sc-font-family); font-size: 1rem; font-weight: 400; font-style: normal; font-variant: normal; font-feature-settings: normal; font-variation-settings: normal; font-kerning: auto; line-height: 1.5; color: var(--sc-text); text-align: left; text-transform: none; text-indent: 0; text-shadow: none; letter-spacing: normal; word-spacing: normal; word-break: normal; white-space: normal; visibility: visible; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-color-mode="light"]) #sc-navbar { color-scheme: dark; } } /* Block-level elements (the reset turns everything inline). */ #sc-topbar div, #sc-navbar div, #sc-footer div, #sc-navbar ul, #sc-navbar li, #sc-footer ul, #sc-footer li, #sc-navbar h2, #sc-footer h2, #sc-footer p, #sc-footer address, #sc-navbar hr { display: block; } #sc-topbar a[href], #sc-navbar a[href], #sc-footer a[href], #sc-navbar [role="button"], #sc-navbar button { cursor: pointer; } /* Keyboard focus ring. The :focus rule covers browsers without :focus-visible; the :not() rule hides it again after a mouse click where supported. */ #sc-topbar a:focus, #sc-navbar a:focus, #sc-navbar button:focus, #sc-footer a:focus { outline: 2px solid var(--sc-focus-ring); outline-offset: 2px; } #sc-topbar a:focus:not(:focus-visible), #sc-navbar a:focus:not(:focus-visible), #sc-navbar button:focus:not(:focus-visible), #sc-footer a:focus:not(:focus-visible) { outline: none; } #sc-topbar svg, #sc-navbar svg, #sc-footer svg { display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } #sc-topbar path, #sc-navbar path, #sc-footer path { fill: inherit; stroke: inherit; } #sc-footer img { display: block; max-width: 100%; } /* Shared container. The header runs the full width of the window (the app's full-width screens sit under it, as on the old site); the footer is centered at the marketing pages' content width. */ #sc-topbar .sc-container, #sc-navbar .sc-container, #sc-footer .sc-container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1.25rem; padding-left: 1.25rem; } #sc-footer .sc-container { max-width: var(--sc-container); } @media (min-width: 640px) { #sc-topbar .sc-container, #sc-navbar .sc-container, #sc-footer .sc-container { padding-right: 1.5rem; padding-left: 1.5rem; } } @media (min-width: 1024px) { #sc-topbar .sc-container, #sc-navbar .sc-container, #sc-footer .sc-container { padding-right: 2rem; padding-left: 2rem; } } /* ---------- Top bar ---------- */ #sc-topbar { width: 100%; font-size: 0.8125rem; line-height: 1.25rem; color: var(--sc-topbar-text); background-color: var(--sc-topbar-bg); } #sc-topbar .sc-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 2rem; } #sc-topbar .sc-topbar-contact { display: flex; flex-wrap: wrap; align-items: center; } #sc-topbar .sc-topbar-item { display: inline-flex; align-items: center; margin-right: 1.25rem; white-space: nowrap; } #sc-topbar .sc-topbar-item svg { width: 0.875rem; height: 0.875rem; margin-right: 0.4rem; opacity: 0.8; } #sc-topbar a { color: var(--sc-topbar-text); transition: color 0.15s ease-in-out; } #sc-topbar a:hover { color: var(--sc-topbar-hover); } #sc-topbar .sc-social { display: none; align-items: center; } @media (min-width: 576px) { #sc-topbar .sc-social { display: flex; } } #sc-topbar .sc-social-link { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-left: 0.25rem; } /* Social icons are Font Awesome 4.7 glyph outlines, filled rather than stroked. */ #sc-topbar .sc-icon { display: block; width: 1.1em; height: 0.85em; overflow: visible; fill: currentColor; stroke: none; } /* ---------- Navbar ---------- */ #sc-navbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; background-color: var(--sc-navbar-bg); border-bottom: 1px solid var(--sc-navbar-border); transition: box-shadow 0.2s ease-in-out; } #sc-navbar.sc-scrolled { box-shadow: var(--sc-navbar-shadow); } #sc-navbar .sc-navbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 4.25rem; } #sc-navbar .sc-brand { display: flex; align-items: center; height: 4.25rem; margin-right: 2rem; } #sc-navbar .sc-brand-logo { display: block; height: var(--sc-brand-height); width: auto; filter: var(--sc-logo-filter); } #sc-navbar .sc-toggler { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--sc-nav-link); background-color: transparent; border: 1px solid var(--sc-toggler-border); border-radius: 0.5rem; } #sc-navbar .sc-toggler svg { width: 1.25rem; height: 1.25rem; } #sc-navbar .sc-toggler .sc-icon-close, #sc-navbar .sc-toggler[aria-expanded="true"] .sc-icon-open { display: none; } #sc-navbar .sc-toggler[aria-expanded="true"] .sc-icon-close { display: inline-block; } /* Collapsible menu: hidden on small screens until the toggler opens it. */ #sc-navbar .sc-collapse { display: none; flex-basis: 100%; width: 100%; padding: 0.5rem 0 1.25rem; border-top: 1px solid var(--sc-navbar-border); } #sc-navbar .sc-collapse.sc-show { display: block; } #sc-navbar .sc-collapse.sc-collapsing { display: block; height: 0; overflow: hidden; transition: height 0.3s ease; } #sc-navbar .sc-nav { display: flex; flex-direction: column; list-style: none; } #sc-navbar .sc-dropdown { position: relative; } #sc-navbar .sc-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.25rem; font-size: 1rem; font-weight: 500; color: var(--sc-nav-link); white-space: nowrap; border-radius: var(--sc-radius); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; } #sc-navbar .sc-nav-link:hover, #sc-navbar .sc-nav-link.sc-show { color: var(--sc-nav-link-hover); } #sc-navbar .sc-nav-link svg { width: 1rem; height: 1rem; } #sc-navbar .sc-nav-link .sc-account-icon { margin-right: 0.4rem; } #sc-navbar .sc-chevron { margin-left: 0.3rem; transition: transform 0.15s ease-in-out; } #sc-navbar .sc-nav-link.sc-show .sc-chevron { transform: rotate(180deg); } #sc-navbar .sc-dropdown-menu { display: none; min-width: 15rem; padding: 0.25rem 0 0.5rem 0.75rem; list-style: none; font-size: 0.9375rem; color: var(--sc-menu-text); } #sc-navbar .sc-dropdown.sc-open > .sc-dropdown-menu { display: block; } #sc-navbar .sc-dropdown-item { display: block; padding: 0.5rem 0.75rem; color: var(--sc-menu-text); white-space: nowrap; border-radius: var(--sc-radius); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; } #sc-navbar .sc-dropdown-item:hover, #sc-navbar .sc-dropdown-item:focus { color: var(--sc-menu-hover-text); background-color: var(--sc-menu-hover-bg); } #sc-navbar .sc-dropdown-item-primary, #sc-navbar .sc-dropdown-item-primary:hover, #sc-navbar .sc-dropdown-item-primary:focus { font-weight: 600; color: var(--sc-primary); } #sc-navbar .sc-dropdown-heading { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-menu-heading); } #sc-navbar .sc-dropdown-welcome { padding: 0.5rem 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--sc-menu-text); } #sc-navbar .sc-dropdown-divider { height: 0; margin: 0.375rem 0; border-top: 1px solid var(--sc-menu-border); } #sc-navbar .sc-dropdown-notice { margin: 0.25rem 0.25rem 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--sc-notice-text); background-color: var(--sc-notice-bg); border: 1px solid var(--sc-notice-border); border-radius: var(--sc-radius); } #sc-navbar .sc-nav-cta { padding-top: 0.75rem; } #sc-navbar .sc-btn-primary { display: flex; align-items: center; justify-content: center; padding: 0.625rem 1.125rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.5rem; color: var(--sc-primary-text); text-align: center; white-space: nowrap; background-color: var(--sc-primary); border-radius: var(--sc-radius); box-shadow: 0 1px 2px rgba(10, 20, 40, 0.12); transition: background-color 0.15s ease-in-out; } #sc-navbar .sc-btn-primary:hover { color: var(--sc-primary-text); background-color: var(--sc-primary-hover-bg); } @media (min-width: 992px) { #sc-navbar .sc-navbar-inner { flex-wrap: nowrap; } #sc-navbar .sc-toggler { display: none; } #sc-navbar .sc-collapse, #sc-navbar .sc-collapse.sc-show, #sc-navbar .sc-collapse.sc-collapsing { display: flex; flex: 1 1 auto; flex-basis: auto; align-items: center; justify-content: space-between; width: auto; height: auto; padding: 0; overflow: visible; border-top: 0; } #sc-navbar .sc-nav { flex-direction: row; align-items: center; } #sc-navbar .sc-nav-center { flex: 1 1 auto; justify-content: center; } #sc-navbar .sc-nav-end { justify-content: flex-end; } #sc-navbar .sc-nav > li + li { margin-left: 0.25rem; } #sc-navbar .sc-nav-link { padding: 0.5rem 0.75rem; font-size: 0.9375rem; } #sc-navbar .sc-nav-link:hover, #sc-navbar .sc-nav-link.sc-show { background-color: var(--sc-nav-link-hover-bg); } #sc-navbar .sc-nav-cta { margin-left: 0.75rem; padding-top: 0; } #sc-navbar .sc-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; margin-top: 0.5rem; padding: 0.5rem; background-color: var(--sc-menu-bg); border: 1px solid var(--sc-menu-border); border-radius: 0.75rem; box-shadow: var(--sc-menu-shadow); } #sc-navbar .sc-nav-end .sc-dropdown-menu { right: 0; left: auto; } } @media (prefers-reduced-motion: reduce) { #sc-navbar, #sc-navbar .sc-nav-link, #sc-navbar .sc-chevron, #sc-navbar .sc-dropdown-item, #sc-navbar .sc-btn-primary, #sc-navbar .sc-collapse.sc-collapsing { transition: none; } } /* ---------- Footer ---------- */ #sc-footer { flex-shrink: 0; width: 100%; padding-top: 4rem; font-size: 0.9375rem; color: var(--sc-footer-text); background-color: var(--sc-footer-bg); } #sc-footer a { color: var(--sc-footer-link); transition: color 0.15s ease-in-out; } #sc-footer a:hover { color: var(--sc-footer-link-hover); } #sc-footer .sc-footer-grid { display: flex; flex-wrap: wrap; margin: 0 -1rem; } #sc-footer .sc-footer-col { width: 100%; padding: 0 1rem 2.5rem; } @media (min-width: 640px) { #sc-footer .sc-footer-col { width: 50%; } } @media (min-width: 1024px) { #sc-footer .sc-footer-col { width: 18%; } #sc-footer .sc-footer-col.sc-footer-brand { width: 36%; padding-right: 3rem; } #sc-footer .sc-footer-col.sc-footer-contact { width: 28%; } } #sc-footer .sc-footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); } #sc-footer .sc-footer-tagline { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; color: var(--sc-footer-heading); } #sc-footer .sc-footer-note { margin-top: 0.25rem; } #sc-footer .sc-certs { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; } #sc-footer .sc-cert { display: inline-flex; align-items: center; justify-content: center; height: 4rem; margin: 0 0.75rem 0.75rem 0; padding: 0.375rem 0.5rem; background-color: #ffffff; border-radius: 0.5rem; } #sc-footer .sc-cert img { height: 100%; width: auto; } #sc-footer .sc-footer-heading { margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-footer-heading); } #sc-footer .sc-footer-links li + li { margin-top: 0.625rem; } #sc-footer .sc-footer-contact-item { display: flex; align-items: flex-start; margin-top: 0.75rem; font-style: normal; } #sc-footer .sc-footer-contact-item svg { width: 1rem; height: 1rem; margin: 0.2rem 0.625rem 0 0; color: var(--sc-footer-accent); } #sc-footer .sc-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1.5rem 0 2rem; font-size: 0.8125rem; border-top: 1px solid var(--sc-footer-rule); } #sc-footer .sc-footer-bottom > * { margin: 0.25rem 0; } #sc-footer .sc-footer-legal a { /* Padding gives each link a tap area of about 32px, so the wrapped links on phones are easy to hit. */ display: inline-block; padding: 0.375rem 0; margin-right: 1.25rem; }