/* ============================================================================= USB Club — HelpScout Docs theme Served from the mothership at https://usb.club/helpscout.css Mirrors the /waitlist page aesthetic: dark "ink" surface, Untitled type, accent blue, and the signature paper-inset field + glossy pill buttons — tuned for long-form readability on support articles. Wire-up (HelpScout → Docs → your site → Customize → Custom Code, in ): Fonts are pulled cross-origin from the same CDN the waitlist uses (https://static.cdn.usb.club). The Beacon contact widget is a sandboxed iframe and cannot be reached from here — set its colour to #249EF6 under HelpScout → Beacon → Appearance to match. ========================================================================== */ /* ---------------------------------------------------------------- Fonts --- */ @font-face { font-family: "Untitled Sans"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-sans-bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Serif"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Serif"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-serif-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Serif"; src: url("https://static.cdn.usb.club/fonts/Untitled/untitled-serif-bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "ISO"; src: url("https://static.cdn.usb.club/fonts/ISOv0.8-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ISO"; src: url("https://static.cdn.usb.club/fonts/ISOv0.8-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- Tokens --- */ :root { --usb-ink: #1c1c1c; /* page background */ --usb-ink-raised: #232323; /* search bar band / subtle raised surfaces */ --usb-paper: #EBEBEB; /* light surface (search field) + body on light */ --usb-fog: #E4E4E4; /* body text / secondary headings */ --usb-mist: #D6D6D6; /* muted body */ --usb-frost: #DDEDFF; /* eyebrow labels */ --usb-charcoal: #303030; /* card / chip surface */ --usb-pill: #2D2D2D; /* pill button face */ --usb-pill-edge: #484848; /* pill inner highlight */ --usb-accent: #249EF6; /* primary blue */ --usb-accent-deep: #2092E4; /* hover blue */ --usb-glow: #4CD7F6; /* highlight */ --usb-silver: #a5a5a5; /* muted / footnote text */ --usb-smoke: #989898; /* pressed text */ --usb-hairline: rgba(255,255,255,0.08); --usb-hairline-2: rgba(255,255,255,0.12); --usb-font-sans: "Untitled Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --usb-font-serif: "Untitled Serif", Georgia, serif; --usb-font-mono: "ISO", ui-monospace, "SF Mono", Menlo, monospace; --usb-radius: 8px; --usb-radius-lg: 12px; --usb-ease: cubic-bezier(0.42, 0, 0.11, 1.02); /* the waitlist "paper-inset" field shadow */ --usb-inset: inset 0 -5px 3px rgba(255,255,255,0.85), inset 0 4px 5px rgba(0,0,0,0.26); /* glossy pill button shadows */ --usb-pill-shadow: 0 4px 6px rgba(0,0,0,0.35), inset 0 4px 7px var(--usb-pill-edge), inset 0 -4px 5.92px rgba(0,0,0,0.35); --usb-pill-shadow-hover: 0 7px 9px rgba(0,0,0,0.55), inset 0 4px 7px var(--usb-pill-edge), inset 0 -4px 5.92px rgba(0,0,0,0.35); --usb-pill-shadow-active: 0 0 0 rgba(0,0,0,0), inset 0 -5px 5px rgba(72,72,72,0.6), inset 0 7px 5.92px rgba(0,0,0,0.36); } /* ----------------------------------------------------------------- Base --- */ /* No page background here — let HelpScout's own HTML background colour show. */ body { color: var(--usb-fog); font-family: var(--usb-font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1px; } ::selection { background: var(--usb-accent); color: #fff; } a { color: var(--usb-accent); text-decoration: none; transition: color 150ms var(--usb-ease); } a:hover, a:focus { color: var(--usb-accent-deep); } h1, h2, h3, h4, h5, h6 { font-family: var(--usb-font-sans); color: #fff; } /* --------------------------------------------------------------- Navbar --- */ .navbar { margin-bottom: 0; } .navbar .navbar-inner { background: transparent; /* override the theme's #fafafa; let the page bg show */ border: none; /* no border below nav/logo */ box-shadow: none; filter: none; min-height: 70px; padding-left: 32px; /* match usb.club's 32px logo gutter */ padding-right: 24px; } /* neutralise the nested .container-fluid padding so our gutters are exact */ .navbar .navbar-inner .container-fluid { padding-left: 0; padding-right: 0; } /* Logo — HelpScout renders the uploaded image at ~75px tall; usb.club shows the wordmark at 24px. Constrain it and seat it top-left exactly like the main site. */ .navbar .brand { float: left; display: flex; align-items: center; /* vertically centre the logo */ height: 70px; margin-left: 0; padding: 0; } .navbar .brand img { height: 26px; width: auto; max-height: none; display: block; } .navbar .brand:hover, .navbar .brand:focus { opacity: 0.75; } /* Nav links — match the "Select your USB" treatment from /classic: Untitled Sans medium, #8E8E8E, brightening to white. */ .navbar .nav { margin: 0; } .navbar .nav > li > a { display: flex; align-items: center; /* vertically centre links against the logo */ height: 70px; padding: 0 14px; color: #8E8E8E; font-family: var(--usb-font-sans); font-weight: 500; font-size: 16px; text-shadow: none; transition: color 150ms var(--usb-ease); } .navbar .nav > li > a:hover, .navbar .nav > li > a:focus, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #fff; background: transparent; box-shadow: none; } /* drop the carets — usb.club's nav has none. !important because HelpScout's JS repositions the active item's caret below the nav via inline styles, which would otherwise win over a plain display:none. */ .caret, .navbar .nav .caret { display: none !important; } /* mobile hamburger */ .navbar .btn-navbar { background: var(--usb-charcoal); border: 1px solid var(--usb-hairline-2); box-shadow: none; } .navbar .btn-navbar .icon-bar { background: var(--usb-fog); box-shadow: none; } /* -------------------------------------------------------- Hero + search --- */ #docsSearch { background: transparent; /* override the theme's #F5F5F5; let the page bg show */ border-bottom: 1px solid var(--usb-hairline); padding: 56px 24px 40px; /* bottom matches #contentArea top for symmetry */ } #docsSearch h1 { color: #fff; font-family: var(--usb-font-sans); font-weight: 600; font-size: 44px; line-height: 1.15; letter-spacing: -1.6px; margin: 0 auto 28px; max-width: 560px; /* match the content column below */ text-align: center; } /* hero search field — 560 column, centred, to line up with the cards */ #searchBar { width: 100%; max-width: 560px; margin: 0 auto; } /* Keep HelpScout's own #searchBar positioning/height (it differs between the centered hero, the sidebar `.sm` variant, and the mobile collapse) — only restyle the field surface to the paper-inset look, and turn the submit into a clean magnifier icon button that sits inside the field's right edge. */ #searchBar input.search-query { width: 100%; box-sizing: border-box; margin: 0; padding: 0 46px 0 16px; /* right gutter leaves room for the icon */ border: none; border-radius: var(--usb-radius); background: var(--usb-paper); color: var(--usb-ink); font-family: var(--usb-font-sans); font-size: 16px; box-shadow: var(--usb-inset); transition: outline-color 150ms var(--usb-ease); } #searchBar input.search-query::placeholder { color: #6b6b6b; } #searchBar input.search-query:focus { outline: 2px solid var(--usb-accent); outline-offset: 1px; box-shadow: var(--usb-inset); } /* submit: transparent, no pill, just the magnifier — across every variant */ #searchBar button, #searchBar.sm button, #searchBar button:hover, #searchBar.sm button:hover, #searchBar button:focus { background: transparent; border: none; box-shadow: none; text-shadow: none; color: #6b6b6b; } #searchBar button:hover { color: var(--usb-accent); } /* always show the glyph (hero hides it by default) and hide the "Search" label */ #searchBar button .icon-search { display: block; color: inherit; } #searchBar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* live search results dropdown */ #serp-dd { background: var(--usb-charcoal); border: 1px solid var(--usb-hairline-2); border-radius: var(--usb-radius); box-shadow: 0 12px 28px rgba(0,0,0,0.5); overflow: hidden; } #serp-dd .result > li > a { color: var(--usb-fog); } #serp-dd .result > li > a:hover, #serp-dd .result > li.active > a, #serp-dd .result > li.active { background: rgba(36,158,246,0.14); color: #fff; } #noResults { color: var(--usb-silver); } /* ------------------------------------------------------------- Content ---- */ #contentArea { padding: 40px 24px 64px; } /* top matches #docsSearch bottom; 24px side gutters */ /* Content panel — HelpScout wraps collection/article bodies in a white .contentWrapper card (background:#fff; color:#222; border; min-height:460px) and paints a divider image on #main-content. Strip both so content sits directly on the ink surface. */ #main-content { background: none; } .contentWrapper { background: transparent; border: none; color: var(--usb-fog); min-height: 0; padding: 8px 0 0; } .contentWrapper h1 { color: #fff; font-family: var(--usb-font-serif); font-weight: 400; letter-spacing: -0.6px; } .contentWrapper p, .contentWrapper p.descrip { color: var(--usb-silver); } .contentWrapper a { color: var(--usb-accent); } .contentWrapper a:hover { color: var(--usb-accent-deep); } /* related-articles block (also white by default) */ .related { background: transparent; border: none; border-top: 1px solid var(--usb-hairline); padding: 24px 0 0; } .related h3 { color: var(--usb-silver); } .related ul > li a { color: var(--usb-accent); } /* neutralise the theme's hanging-indent / oversized list metrics so our flex rows sit right */ .articleList { font-size: 1rem; } .articleList li { margin: 0; padding-left: 0; } .articleList li a { margin-left: 0; } /* sidebar rail (article + collection pages) */ #sidebar, #sidebar a { color: var(--usb-mist); } #sidebar .nav-list a { color: var(--usb-mist); } #sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus, #sidebar .nav-list a:hover { color: #fff; background: transparent; } #sidebar .contactUs { color: var(--usb-silver); } #sidebar .contactUs:hover { color: #fff; } /* ------------------------------------------------------ Collections grid -- */ /* The theme uses `.threeCol .collection`/`.twoCol .collection` (specificity 0,2,0) to paint these cards white — match that specificity so ours wins. */ /* Homepage content column — constrain to 560px like the waitlist. */ .threeCol { max-width: 560px; margin: 0 auto; float: none; } /* Cards use the profile "inset" treatment (a pressed well): #272727, 16px radius, inner top-shadow + bottom highlight. */ .threeCol .collection, .twoCol .collection { box-sizing: border-box; /* keep within the column */ width: 100%; margin: 0 0 24px; /* consistent card gap; override theme's -20px margins */ background: #272727; border: none; border-radius: 16px; padding: 24px 28px; box-shadow: inset 0 7px 22px rgba(0,0,0,0.45), inset 0 -6px 16px rgba(255,255,255,0.20); } .threeCol .collection:last-child, .twoCol .collection:last-child { margin-bottom: 0; } /* Collection head styled as the profile "file tile" (.share-file): near-black rounded pill with an inset shadow, a blurred blue glowbe, and the two text lines stacked beside it. High specificity beats the theme's padding/border. */ .threeCol .collection .collection-head, .twoCol .collection .collection-head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; text-align: left; /* theme centres homepage collection text */ position: relative; /* anchor the stretched link (whole tile clickable) */ margin: 0 0 16px; padding: 16px 20px; /* the file tile's own padding (theme padding removed) */ background: #333333; /* "seen" file-tile variant (lighter grey) */ border: none; border-radius: 999px; box-shadow: inset 0 2px 2px rgba(255,255,255,0.22), inset 0 -2px 3px rgba(0,0,0,0.75); } /* glowbe — blurred blue dot, spanning both text rows */ .collection-head::before { content: ""; grid-row: 1 / 3; align-self: center; width: 13px; height: 13px; margin: 0 7px; border-radius: 50%; background: var(--usb-accent); filter: blur(2.5px); } .collection-head h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: left; line-height: 22px; } .collection-head h2 a { color: #fff; font-family: var(--usb-font-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.4px; } .collection-head h2 a:hover { color: #fff; } /* no hover colour change */ /* stretched link — make the whole tile clickable, not just the heading text */ .collection-head h2 a::after { content: ""; position: absolute; inset: 0; } .collection-head p { grid-column: 2; grid-row: 2; margin: 0; color: var(--usb-silver); font-size: 14px; } .collection-body .popArticles, .articleList { list-style: none; margin: 0; padding: 0; } /* collection-body gutter; drop the theme's per-item bottom margin */ .threeCol .collection .collection-body, .twoCol .collection .collection-body { padding: 0 24px; } .threeCol .popArticles li, .twoCol .popArticles li, .popArticles li { margin-bottom: 0; } .popArticles li a, .articleList li a { display: flex; align-items: center; gap: 8px; color: var(--usb-fog); padding: 8px 0; border-bottom: 1px solid var(--usb-hairline); transition: color 150ms var(--usb-ease); } .popArticles li:last-child a, .articleList li:last-child a { border-bottom: none; } .popArticles li a:hover, .articleList li a:hover { color: var(--usb-accent); } /* Swap HelpScout's doc glyph for the profile "link" icon, embedded as a data URI (no hosting, dodges the font-CDN referer block). */ .icon-article-doc, .popArticles .icon-article-doc, .articleList .icon-article-doc { display: inline-block; width: 18px; height: 18px; flex: none; margin: 0; /* theme pulls it -22px; keep it in the flex row */ opacity: 0.85; background: url("data:image/png;base64,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") no-repeat center / contain; } .icon-article-doc::before { content: ""; display: none; } /* hide the original icon-font glyph */ /* --------------------------------------------------------------- Article -- */ .contentWrapper { color: var(--usb-fog); } #fullArticle .title, #fullArticle h1.title { color: #fff; font-family: var(--usb-font-serif); font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -1px; margin: 0 0 24px; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle dd, #fullArticle table { color: var(--usb-fog); font-family: var(--usb-font-sans); font-size: 17px; line-height: 1.7; } #fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4 { color: #fff; font-family: var(--usb-font-sans); font-weight: 600; letter-spacing: -0.4px; margin: 2em 0 0.6em; line-height: 1.3; } #fullArticle h2 { font-size: 26px; } #fullArticle h3 { font-size: 21px; } #fullArticle h4 { font-size: 18px; } #fullArticle a, #fullArticle strong a, #fullArticle a strong { color: var(--usb-accent); text-decoration: underline; text-underline-offset: 2px; } #fullArticle a:hover { color: var(--usb-accent-deep); } #fullArticle strong, #fullArticle b { color: #fff; } #fullArticle blockquote { border-left: 3px solid var(--usb-accent); background: rgba(255,255,255,0.03); margin: 1.5em 0; padding: 12px 18px; border-radius: 0 var(--usb-radius) var(--usb-radius) 0; color: var(--usb-mist); } #fullArticle blockquote p { margin: 0; } #fullArticle code, #fullArticle kbd { font-family: var(--usb-font-mono); font-size: 0.9em; background: var(--usb-charcoal); color: var(--usb-frost); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--usb-hairline); } #fullArticle pre { background: var(--usb-charcoal); border: 1px solid var(--usb-hairline); border-radius: var(--usb-radius); padding: 16px 18px; overflow-x: auto; } #fullArticle pre code { background: none; border: none; padding: 0; color: var(--usb-fog); } /* Mermaid diagrams — helpscout.js swaps `
` blocks that start with a Mermaid
   keyword into `.mermaid` containers and renders them (themed to the ink palette).
   A bare `
` whose source starts with a keyword is hidden until the swap so
   the raw code doesn't flash. */
#fullArticle pre[data-mermaid-pending] { visibility: hidden; }
#fullArticle .mermaid {
  margin: 1.5em 0;
  padding: 20px;
  background: var(--usb-charcoal);
  border: 1px solid var(--usb-hairline);
  border-radius: var(--usb-radius);
  text-align: center;
  overflow-x: auto;
}
#fullArticle .mermaid svg { max-width: 100%; height: auto; }

#fullArticle hr { border: none; border-top: 1px solid var(--usb-hairline); margin: 2em 0; }

#fullArticle img { border-radius: var(--usb-radius); max-width: 100%; }

#fullArticle table { border-collapse: collapse; width: 100%; }
#fullArticle table th,
#fullArticle table td { border: 1px solid var(--usb-hairline); padding: 10px 14px; text-align: left; }
#fullArticle table th { background: var(--usb-charcoal); color: #fff; font-weight: 600; }

/* in-article anchored headings keep their offset readable */
#fullArticle [id] { scroll-margin-top: 80px; }

/* ----------------------------------------------------- Article footer ----- */
.articleFoot {
  border-top: 1px solid var(--usb-hairline);
  margin-top: 40px;
  padding-top: 24px;
  color: var(--usb-silver);
}
.articleFoot .printArticle a,
.articleFoot .help a { color: var(--usb-silver); }
.articleFoot .printArticle a:hover,
.articleFoot .help a:hover { color: #fff; }
.icon-print, .icon-contact { opacity: 0.8; }

/* "Did this answer your question?" — serif prompt + round glossy face buttons */
.articleRatings {
  color: var(--usb-fog);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 0;
  margin-top: 40px;
  padding: 28px 0 0;
  background: transparent;          /* theme paints this #fff */
  border: none;
  border-top: 1px solid var(--usb-hairline);
  border-radius: 0;
  box-shadow: none;
}
.articleRatings-question {
  color: var(--usb-fog);
  font-family: var(--usb-font-serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}
.articleRatings-actions { display: inline-flex; gap: 10px; }

.rateAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--usb-pill);
  color: var(--usb-silver);
  border: none;
  border-radius: 999px;
  box-shadow: var(--usb-pill-shadow);
  cursor: pointer;
  transition: all 150ms var(--usb-ease);
}
.rateAction:hover  { box-shadow: var(--usb-pill-shadow-hover); }
.rateAction:active { box-shadow: var(--usb-pill-shadow-active); }
.rateAction--positive:hover { color: #2CC683; } /* green smile */
.rateAction--negative:hover { color: #F87171; } /* red frown */

/* the face SVGs ship with no fill (renders black/invisible on ink) */
.rating-face { display: inline-flex; filter: none; }
.rating-face svg { width: 24px; height: 24px; }
.rating-face svg path { fill: currentColor; }

.articleRatings-feedback { color: var(--usb-fog); display: inline-flex; align-items: center; gap: 8px; }
.articleRatings-feedback-tick { color: #2CC683; display: inline-flex; }
.articleRatings-feedback-tick svg path { fill: #2CC683; }
.articleRatings-feedback-message {
  color: var(--usb-fog);
  font-family: var(--usb-font-serif);
  font-weight: 400;
  font-size: 18px;
}
.articleRatings-failure { color: #F87171; }

/* ---------------------------------------------------------------- Footer -- */
footer.center, footer {
  color: var(--usb-silver);
  font-size: 13px;
  border-top: 1px solid var(--usb-hairline);
  margin-top: 48px;
  padding-top: 24px;
}
footer a { color: var(--usb-silver); text-decoration: underline; }
footer a:hover { color: #fff; }

/* Footer "lore" CTA (injected by helpscout.js) — ported from the site footer:
   "Surf the Sneakernet — [Join the Club →] — Carry What Matters". */
@font-face {
  font-family: "Asimov";
  src: url("https://static.cdn.usb.club/fonts/AsimovPrintB.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
.usb-footer-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 36px;
  font-family: "Asimov", var(--usb-font-sans);
  font-size: 24px;
  line-height: 1;
  color: #BEBEBE;
}
@media (max-width: 700px) { .usb-footer-cta { flex-direction: column; } }

.usb-join-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  background: var(--usb-pill);
  color: #CFCFCF;
  font-family: var(--usb-font-mono);
  font-size: 18px;
  line-height: 1.5;
  padding: 12px 18px;
  text-decoration: none;
  box-shadow: var(--usb-pill-shadow);
  transition: all 150ms var(--usb-ease);
}
.usb-join-pill:hover { color: #fff; box-shadow: var(--usb-pill-shadow-hover); }
.usb-join-label {
  display: inline-block;
  transform: scale(0.9);
  transform-origin: center;
  color: var(--usb-silver);
  transition: color 150ms var(--usb-ease);
}
.usb-join-pill:hover .usb-join-label { color: #fff; }

/* ---------------------------------------------------------- Responsive ---- */
@media (max-width: 700px) {
  /* keep the symmetric rhythm, scaled down: hero-bottom == content-top */
  #docsSearch { padding: 40px 24px 32px; }
  #docsSearch h1 { font-size: 28px; letter-spacing: -0.8px; margin-bottom: 22px; }
  #contentArea { padding: 32px 24px 56px; }

  #fullArticle .title { font-size: 26px; }
  #fullArticle, #fullArticle p, #fullArticle li { font-size: 16px; }

  /* tighter cards + tile so the long headings fit a narrow column */
  .threeCol .collection, .twoCol .collection { padding: 18px; }
  .threeCol .collection .collection-head,
  .twoCol .collection .collection-head { padding: 14px 18px; column-gap: 10px; }
  .collection-head h2, .collection-head h2 a { font-size: 19px; }
  .collection-head h2 { line-height: 20px; }
  .collection-head p { font-size: 13px; }
}