/* * Site chrome shared by every public page: header, mobile menu, footer and the * language picker. Loaded last in , so these rules settle the older * per-page stylesheets at equal specificity. */ :root { --chrome-height: 64px; --chrome-max: 1200px; --chrome-pad: clamp(16px, 4vw, 40px); --chrome-ink: #0b1220; --chrome-muted: #5b6577; --chrome-line: #e6e9ef; --chrome-accent: #315ee9; --chrome-accent-hover: #234dcc; --chrome-focus: #628cff; } /* Header ------------------------------------------------------------------ */ .ts-public-header { --chrome-fg: #fff; --chrome-fg-muted: rgba(255, 255, 255, .72); --chrome-hover: rgba(255, 255, 255, .1); --chrome-bg: rgba(7, 18, 42, .82); --chrome-border: rgba(255, 255, 255, .1); color: var(--chrome-fg); min-height: var(--chrome-height); padding: 0 var(--chrome-pad); position: sticky; top: 0; transition: background-color .2s ease, border-color .2s ease; z-index: 60; } .ts-public-header--light, .ts-public-header:not(.ts-public-header--overlay) { --chrome-fg: var(--chrome-ink); --chrome-fg-muted: var(--chrome-muted); --chrome-hover: rgba(11, 18, 32, .05); --chrome-bg: rgba(255, 255, 255, .86); --chrome-border: var(--chrome-line); } .ts-public-header--overlay { left: 0; position: fixed; right: 0; top: 0; } .ts-public-header.is-scrolled, .ts-public-header.is-open { -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); background: var(--chrome-bg) !important; box-shadow: inset 0 -1px 0 var(--chrome-border) !important; } /* One bar height everywhere; the older home and page styles padded it differently. */ :root { --ts-public-header-height: var(--chrome-height); } :root .ts-public-header { padding: 0 max(var(--chrome-pad), env(safe-area-inset-right)) 0 max(var(--chrome-pad), env(safe-area-inset-left)); } :root .ts-public-header__inner { gap: 8px; height: var(--chrome-height); margin: 0 auto; min-height: 0; width: min(var(--chrome-max), 100%); } .ts-public-brand, .ts-public-brand span { color: var(--chrome-fg) !important; } .ts-public-brand { font-size: 18px !important; margin-inline-end: 24px; } .ts-public-brand > img { height: 34px !important; width: 34px !important; flex-basis: 34px !important; } .ts-public-nav { align-items: center; display: flex; flex: 1; gap: 2px; min-width: 0; } .ts-public-nav a { background: none; border: 0; border-radius: 8px; color: var(--chrome-fg-muted) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0; min-height: 36px; padding: 0 12px; transition: color .15s ease, background-color .15s ease; } .ts-public-nav a:hover, .ts-public-nav a:focus-visible { background: var(--chrome-hover); color: var(--chrome-fg) !important; } .ts-public-nav a[aria-current="page"] { background: none; color: var(--chrome-fg) !important; } .ts-public-nav a:focus-visible, .ts-public-nav-toggle:focus-visible { outline: 2px solid var(--chrome-focus); outline-offset: 2px; } /* Sign in and the workspace button sit at the far end of the bar. */ .ts-public-nav [data-public-sign-in] { margin-inline-start: auto; } .ts-public-nav [data-public-sign-in][hidden] + .ts-public-nav__manager { margin-inline-start: auto; } .ts-public-nav .ts-public-nav__manager { background: var(--chrome-fg) !important; border: 0 !important; border-radius: 8px; box-shadow: none !important; color: #0b1a3a !important; font-weight: 600 !important; margin-inline-start: 8px; min-height: 36px; padding: 0 14px; transform: none !important; } .ts-public-nav .ts-public-nav__manager:hover, .ts-public-nav .ts-public-nav__manager:focus-visible { background: rgba(255, 255, 255, .86) !important; color: #0b1a3a !important; } :is(.ts-public-header--light, .ts-public-header:not(.ts-public-header--overlay)) .ts-public-nav .ts-public-nav__manager { background: var(--chrome-accent) !important; color: #fff !important; } :is(.ts-public-header--light, .ts-public-header:not(.ts-public-header--overlay)) .ts-public-nav .ts-public-nav__manager:hover { background: var(--chrome-accent-hover) !important; } /* Two-line menu button that folds into a cross. Sizes are absolute so the older per-page toggle rules (different margins and offsets) cannot skew it. */ .ts-public-header .ts-public-nav-toggle { background: transparent; border: 0; border-radius: 10px; color: var(--chrome-fg); height: 44px; padding: 0; position: relative; width: 44px; } .ts-public-header .ts-public-nav-toggle span { background: var(--chrome-fg) !important; border-radius: 1px; height: 1.5px; left: 12px; margin: 0; position: absolute; top: 17px; transition: transform .2s ease; width: 20px; } .ts-public-header .ts-public-nav-toggle span:nth-child(2) { display: none; } .ts-public-header .ts-public-nav-toggle span:nth-child(3) { top: 25px; } .ts-public-header .ts-public-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .ts-public-header .ts-public-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); } /* Header language picker (pages without the site footer): a compact globe button after the nav. */ .ts-public-header__inner > .ts-language-control { margin-inline-start: 4px; order: 2; } .ts-public-header__inner > .ts-public-nav-toggle { order: 3; } /* Mobile menu: a full-height sheet under the bar with large targets. */ @media (max-width: 1100px) { .ts-public-header__inner { flex-wrap: nowrap; } .ts-public-brand { margin-inline-end: auto; } .ts-public-header .ts-public-nav-toggle { display: block; flex: 0 0 44px; } .ts-public-nav { background: var(--chrome-bg-solid, #07122a); display: none; flex-direction: column; gap: 0; inset: var(--chrome-height) 0 0 0; max-height: none; overflow-y: auto; padding: 12px var(--chrome-pad) calc(32px + env(safe-area-inset-bottom)); position: fixed; } :is(.ts-public-header--light, .ts-public-header:not(.ts-public-header--overlay)) .ts-public-nav { --chrome-bg-solid: #fff; } .ts-public-nav.is-open { display: flex; } .ts-public-header .ts-public-nav a:not(.ts-public-nav__manager) { border-bottom: 1px solid var(--chrome-border); border-radius: 0; color: var(--chrome-fg) !important; font-size: 20px !important; font-weight: 600 !important; min-height: 60px; padding: 0 4px; width: 100%; } .ts-public-header .ts-public-nav a:hover, .ts-public-header .ts-public-nav a:focus-visible { background: none; } .ts-public-header .ts-public-nav [data-public-sign-in], .ts-public-header .ts-public-nav .ts-public-nav__manager { border: 1px solid var(--chrome-border) !important; border-radius: 10px !important; font-size: 16px !important; justify-content: center; margin: 16px 0 0 !important; min-height: 48px; width: 100%; } .ts-public-header .ts-public-nav .ts-public-nav__manager { border: 0 !important; margin-top: 10px !important; } .ts-public-nav > .ts-language-control { margin-top: 20px; } html.ts-nav-open, html.ts-nav-open body { overflow: hidden; } } /* Footer ------------------------------------------------------------------ */ .ts-footer { background: #fafbfc; border-top: 1px solid var(--chrome-line); color: var(--chrome-muted); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 64px var(--chrome-pad) calc(28px + env(safe-area-inset-bottom)); } .ts-footer__inner { display: grid; gap: 48px; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); margin: 0 auto; max-width: var(--chrome-max); padding: 0; } .ts-footer__lead { align-content: start; display: grid; gap: 14px; justify-items: start; } .ts-footer__lead .ts-brand, .ts-footer__lead .ts-brand span { color: var(--chrome-ink) !important; font-size: 18px !important; } .ts-footer__lead .ts-brand > img { height: 34px !important; width: 34px !important; flex-basis: 34px !important; } .ts-footer__lead p { color: var(--chrome-muted); font-size: 14px; line-height: 1.6; margin: 0; max-width: 30ch; } .ts-footer__plan { align-items: center; border: 1px solid var(--chrome-line); border-radius: 8px; color: var(--chrome-ink) !important; display: inline-flex; font-size: 14px; font-weight: 500; gap: 6px; min-height: 36px; padding: 0 12px; text-decoration: none !important; } .ts-footer__plan:hover { background: #fff; border-color: #d3d8e1; } .ts-footer__grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .ts-footer__grid section { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ts-footer__grid h2 { color: var(--chrome-ink); font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 20px; margin: 0 0 8px; text-transform: none; } .ts-footer__grid a { color: var(--chrome-muted) !important; font-size: 14px; line-height: 20px; padding: 5px 0; text-decoration: none !important; } .ts-footer__grid a:hover, .ts-footer__grid a:focus-visible { color: var(--chrome-ink) !important; } .ts-footer__bottom { align-items: center; border-top: 1px solid var(--chrome-line); display: flex; flex-wrap: wrap; gap: 12px 24px; grid-column: 1 / -1; margin: 0; padding: 24px 0 0; } .ts-footer__bottom p { color: var(--chrome-muted); font-size: 13px; margin: 0; } .ts-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 4px 20px; } .ts-footer__bottom a { color: var(--chrome-muted) !important; font-size: 13px; text-decoration: none !important; } .ts-footer__bottom a:hover, .ts-footer__bottom a:focus-visible { color: var(--chrome-ink) !important; } .ts-footer__bottom > .ts-language-control { margin-inline-start: auto; } .ts-footer a:focus-visible { border-radius: 4px; outline: 2px solid var(--chrome-focus); outline-offset: 2px; } @media (max-width: 860px) { .ts-footer { padding-top: 48px; } .ts-footer__inner { gap: 36px; grid-template-columns: 1fr; } .ts-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-footer__bottom { align-items: flex-start; flex-direction: column; } .ts-footer__bottom > .ts-language-control { margin-inline-start: 0; order: -1; } } /* Language picker ---------------------------------------------------------- */ /* A native select under a readable face: globe, language, chevron. The native popup keeps 100+ languages searchable by typing and accessible everywhere. */ .ts-language-control { color: inherit; flex: 0 0 auto; position: relative; } .ts-language-control label { display: block; min-height: 0; position: relative; } .ts-language-choice { align-items: center; border: 1px solid var(--lang-border, color-mix(in srgb, currentColor 22%, transparent)); border-radius: 8px; color: var(--lang-fg, currentColor); display: inline-flex !important; font-size: 13px !important; font-weight: 500 !important; gap: 8px; inset: auto !important; min-height: 36px; padding: 0 10px; pointer-events: none; position: relative !important; white-space: nowrap; } .ts-language-choice::after { content: none !important; } .ts-language-choice__globe, .ts-language-choice__chevron { flex: none; height: 16px; opacity: .72; width: 16px; } .ts-language-choice__chevron { height: 14px; width: 14px; } .ts-language-control select { appearance: none !important; border: 0 !important; color: transparent !important; cursor: pointer; font-size: 16px; height: 100% !important; inset: 0; min-height: 0 !important; opacity: 0; padding: 0 !important; position: absolute; width: 100% !important; } .ts-language-control option { color: var(--chrome-ink); } .ts-language-control:hover .ts-language-choice { background: color-mix(in srgb, currentColor 7%, transparent); } /* The site footer is light; other page footers (download, receive) pick up their own text colour. */ .ts-footer .ts-language-control { --lang-fg: var(--chrome-ink); --lang-border: var(--chrome-line); } .ts-language-control:focus-within .ts-language-choice { outline: 2px solid var(--chrome-focus); outline-offset: 2px; } .ts-public-header .ts-language-control { --lang-fg: var(--chrome-fg); --lang-border: var(--chrome-border); } .ts-public-header .ts-language-control--icon .ts-language-choice__name { display: none; } @media (max-width: 1100px) { .ts-public-nav .ts-language-control .ts-language-choice { min-height: 48px; width: 100%; } .ts-public-nav .ts-language-control--icon .ts-language-choice__name { display: inline; } } @media (prefers-reduced-motion: reduce) { .ts-public-header, .ts-public-nav a, .ts-public-header .ts-public-nav-toggle span { transition: none; } } .ts-language-choice__code { display: none; } .ts-public-header .ts-language-control--icon .ts-language-choice__code { display: inline; } @media (max-width: 1100px) { .ts-public-nav .ts-language-control--icon .ts-language-choice__code { display: none; } }