/* * Landing page only. * * This file is linked from docs/overrides/landing.html rather than listed in * mkdocs.yml's extra_css, so the documentation pages never load it. Instant * navigation diffs between documents, so the link is added when a * reader arrives here and removed when they leave -- which is also why rules * below may safely reach outside the content area, to .md-header and * .md-main. A body class could not do that: instant navigation does not * touch . * * Sizes are in px, not the theme's rem: the theme scales its root font size * up on wide screens, and the landing page is laid out to fixed measures * (the demo window, the five-column row) that should not grow with it. * * The brand tokens are Ink, Signal Blue and Paper; see the brand kit. The * demo window is drawn light in both colour schemes on purpose -- it stands * for a page on github.com, which the reader sees in its own theme. */ :root { --cc-ink: #0b1620; --cc-ink-2: #13212c; --cc-ink-3: #0f1d28; --cc-ink-line: #22323f; --cc-on-ink: #e8eef2; --cc-on-ink-2: #b9c7d1; --cc-on-ink-3: #8fa3b1; --cc-blue: #2c9ccd; --cc-blue-soft: #7fc6e6; --cc-blue-deep: #176b89; --cc-tint: #e3f2f9; --cc-paper: #f4f6f7; --cc-card: #ffffff; --cc-line: #dce3e8; --cc-text: #0e1b24; --cc-muted: #4f6270; --cc-pass: #1a7f4b; --cc-fail: #c8322b; --cc-wait: #9a6a00; /* Literal stacks: the theme defines its font variables below :root, so a var() of them here would resolve to nothing. */ --cc-display: "Bricolage Grotesque", "Instrument Sans", -apple-system, "Segoe UI", sans-serif; --cc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } [data-md-color-scheme="slate"] { --cc-paper: #0e1a23; --cc-card: #13212c; --cc-line: #263744; --cc-text: #e8eef2; --cc-muted: #a3b4c0; --cc-tint: #16303e; --cc-blue-deep: #7fc6e6; } /* ---------------------------------------------------------------- chrome -- */ /* The brand is small and out of the way in the header: nobody arrives caring about it. The search box is what competes with the headline, and a reader who wants search is one click into the docs. */ .md-header .md-search { display: none; } @media screen and (min-width: 76.25em) { .md-header .md-search { display: block; } } /* The hero is a dark band that meets the header, so the theme's gap above the content, and the spacer it draws inside it, go. */ .md-main__inner { margin-top: 0; } .cc-landing .md-content__inner { padding-top: 0; margin-bottom: 0; } .cc-landing .md-content__inner::before { display: none; } /* The "edit this page" pencil points at index.md, which is not what a first-time reader wants to do next. */ .cc-landing .md-content__button { display: none; } .md-main { background: var(--cc-paper); /* The bands below span the window with `margin-inline: calc(50% - 50vw)`. 100vw includes a classic scrollbar, so they can end a few pixels wide; `clip` rather than `hidden`, because `hidden` would make .md-main a scroll container and break the sticky header and in-page anchors. */ overflow-x: clip; } /* ---------------------------------------------------------------- resets -- */ /* The theme styles bare elements inside .md-typeset. These resets use :where() so they stay no stronger than the theme's own rules and every component class below still wins. The FAQ band is left alone: it is ordinary Markdown and should look like the rest of the docs. */ .md-typeset :where(.cc-band:not(.cc-faq)) :is(p, ul, ol, figure, h1, h2, h3, table) { margin: 0; } /* The theme indents lists with [dir=ltr]-prefixed rules, hence [dir] here. */ [dir] .md-typeset :where(.cc-band:not(.cc-faq)) :is(ul, ol) { margin: 0; padding: 0; list-style: none; } [dir] .md-typeset :where(.cc-band:not(.cc-faq)) :is(ul, ol) > li { margin: 0; } .md-typeset :where(.cc-band:not(.cc-faq)) code { padding: 0; background: none; border-radius: 0; box-shadow: none; color: inherit; font-size: inherit; word-break: normal; } .md-typeset :where(.cc-band) svg { max-width: none; } .cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ----------------------------------------------------------------- bands -- */ /* Each band spans the window while its text stays in the content column: the negative margin pulls the edges out, the padding puts the text back. Percentages, not viewport units, for the margin: .md-content is a flex item, and a `-100vw` margin counts towards its min-content width, which once stretched the column to 2754px on a 1440px screen. */ .md-typeset .cc-band { position: relative; margin-inline: calc(50% - 50vw); padding: 104px calc(50vw - 50%); color: var(--cc-text); font-size: 16px; line-height: 1.55; } .md-typeset .cc-band--ink { background: var(--cc-ink); color: var(--cc-on-ink); } .md-typeset .cc-band--white { background: var(--cc-card); } .cc-wrap { position: relative; max-width: 1200px; margin-inline: auto; } /* ------------------------------------------------------------ type scale -- */ .md-typeset .cc-display { font-family: var(--cc-display); font-size: clamp(42px, 6.2vw, 70px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: #ffffff; text-wrap: balance; } .md-typeset .cc-accent { color: var(--cc-blue); } .md-typeset .cc-h2 { font-family: var(--cc-display); font-size: clamp(32px, 4.2vw, 50px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: inherit; text-wrap: balance; } .md-typeset .cc-h2--xl { font-size: clamp(36px, 4.6vw, 54px); } .md-typeset .cc-eyebrow { font-family: var(--cc-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-blue-deep); } .md-typeset .cc-band--ink .cc-eyebrow { color: var(--cc-blue-soft); } .md-typeset .cc-sub { font-size: 18px; line-height: 1.55; color: var(--cc-muted); text-wrap: pretty; } .md-typeset .cc-band--ink .cc-sub { color: var(--cc-on-ink-2); } .md-typeset .cc-sub code, .md-typeset .cc-lede code { font-family: var(--cc-mono); font-size: 0.88em; } .cc-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; } .cc-head--center { align-items: center; margin-inline: auto; text-align: center; } .cc-head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; max-width: none; } .cc-head--split > div { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .md-typeset .cc-mono { font-family: var(--cc-mono); } .md-typeset .cc-b { font-weight: 700; } .md-typeset .cc-dim { color: var(--cc-muted); } /* Terminal colours, tuned for the Ink background. */ .md-typeset .cc-t-fail { color: #ff7a6e; } .md-typeset .cc-t-pass { color: #4fc98b; } .md-typeset .cc-t-blue { color: var(--cc-blue-soft); } .md-typeset .cc-t-num { color: #f2b866; } .md-typeset .cc-t-white { color: #ffffff; } .md-typeset .cc-t-dim { color: var(--cc-on-ink-3); } /* The same meanings, dark enough for the light demo window. */ .md-typeset .cc-t-okd { color: #177245; } .md-typeset .cc-t-bad { color: #a62a24; } .md-typeset .cc-t-wait { color: #7a5500; } /* --------------------------------------------------------------- buttons -- */ .cc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .md-typeset .cc-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 11px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color 150ms, border-color 150ms; } .md-typeset .cc-btn svg { width: 16px; height: 16px; } /* Ink on Signal Blue is 5.9:1; white on it would be 3.1:1. */ .md-typeset .cc-btn--primary, .md-typeset .cc-btn--primary:hover, .md-typeset .cc-btn--primary:focus { background: var(--cc-blue); color: #06131b; } .md-typeset .cc-btn--primary:hover { background: #5bb8e0; } .md-typeset .cc-btn--ghost { border: 1px solid #2a3b48; color: var(--cc-on-ink); } .md-typeset .cc-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } .md-typeset .cc-btn--quiet { height: 48px; border: 1px solid var(--cc-line); background: var(--cc-card); color: var(--cc-text); font-size: 15px; } .md-typeset .cc-btn--quiet:hover { border-color: var(--cc-blue); color: var(--cc-text); } .md-typeset .cc-install { display: inline-flex; align-items: center; gap: 12px; height: 52px; box-sizing: border-box; padding: 0 5px 0 16px; border: 1px solid #2a3b48; border-radius: 11px; background: var(--cc-ink-3); font-family: var(--cc-mono); font-size: 14.5px; color: var(--cc-on-ink); } .cc-install__sigil { color: var(--cc-blue); } .md-typeset .cc-copy { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: #16252f; color: #9db0be; cursor: pointer; } .md-typeset .cc-copy:hover, .md-typeset .cc-copy:focus-visible { color: #ffffff; } .md-typeset .cc-copy svg { width: 16px; height: 16px; } .md-typeset .cc-copy.is-done { color: #4fc98b; } .md-typeset .cc-copy--text { width: auto; height: 32px; padding: 0 10px; background: transparent; font-family: "Instrument Sans", -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 600; color: var(--cc-blue-soft); } /* ------------------------------------------------------------------ hero -- */ .md-typeset .cc-hero { padding-top: 72px; padding-bottom: 0; overflow: hidden; } .md-typeset .cc-hero__graph { position: absolute; top: 0; right: 0; width: 480px; height: 100%; pointer-events: none; } .cc-hero__grid { display: grid; gap: 48px; align-items: center; } @media screen and (min-width: 960px) { .cc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 56px; } } .cc-hero__copy { display: flex; flex-direction: column; gap: 26px; } .md-typeset .cc-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid #22404f; border-radius: 999px; background: #102836; color: var(--cc-blue-soft); font-size: 13.5px; font-weight: 500; } .cc-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-blue); } .md-typeset .cc-lede { font-size: 19px; line-height: 1.55; color: var(--cc-on-ink-2); text-wrap: pretty; } .md-typeset .cc-lede code { color: var(--cc-on-ink); } .md-typeset ul.cc-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 64px; padding: 22px 0 30px; border-top: 1px solid #1a2934; font-size: 14px; color: var(--cc-on-ink-3); } /* -------------------------------------------------------------- terminal -- */ .md-typeset .cc-term { display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0; border-radius: 14px; overflow: hidden; background: var(--cc-ink-3); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); color: #d6e1e8; font-family: var(--cc-mono); text-align: left; } .cc-term__bar { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 16px; background: var(--cc-ink-2); border-bottom: 1px solid var(--cc-ink-line); font-size: 12px; color: var(--cc-on-ink-3); white-space: nowrap; overflow: hidden; } .cc-dots { display: flex; gap: 7px; } .cc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3b48; } .cc-term__body { padding: 18px 20px 22px; font-size: 13px; line-height: 21px; } .cc-line { min-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; } .cc-gap { margin-top: 21px; } .cc-row { display: flex; gap: 2px; white-space: nowrap; } .cc-leader { flex: 1; min-width: 24px; overflow: hidden; } .cc-leader::before { content: "................................................................................"; color: var(--cc-on-ink-3); } .cc-sigil { color: var(--cc-blue); } .cc-caret { display: inline-block; width: 8px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--cc-blue); animation: cc-blink 1s steps(1) infinite; } .cc-caret--ink { width: 2px; height: 22px; vertical-align: -4px; background: #0e1b24; } @keyframes cc-blink { 50% { opacity: 0; } } /* ------------------------------------------------------ timeline states -- */ /* See the comment at the top of index.md. A timeline (.cc-tl) is `is-live` only while the script plays it; otherwise it shows its final frame. */ .cc-tl:not(.is-live) [data-until], .cc-tl.is-live [data-until].is-gone, .cc-tl.is-live [data-from]:not(.is-on) { display: none; } .cc-tl [data-on] { transition: opacity 0.45s ease, transform 0.45s ease; } .cc-tl.is-live [data-on]:not(.is-on) { opacity: 0; transform: translateY(6px); } .cc-tl.is-live .cc-flash.is-on { animation: cc-flash 1.4s ease; } @keyframes cc-flash { from { background: var(--cc-tint); } to { background: transparent; } } /* ------------------------------------------------------ where it runs -- */ .md-typeset .cc-config { width: min(380px, 100%); margin: 52px auto 0; border-radius: 14px; overflow: hidden; background: var(--cc-ink); color: #d6e1e8; box-shadow: 0 16px 40px rgba(11, 22, 32, 0.18); } .md-typeset .cc-config__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: var(--cc-ink-2); font-family: var(--cc-mono); font-size: 12.5px; color: #9db0be; } .cc-config__bar svg { width: 14px; height: 14px; color: var(--cc-blue); } .cc-config__body { padding: 14px 18px 16px; font-family: var(--cc-mono); font-size: 13px; line-height: 21px; white-space: pre; } .md-typeset .cc-fan { display: none; width: 100%; height: 64px; color: #9fc9dc; } .cc-fan path { stroke: currentColor; vector-effect: non-scaling-stroke; } .cc-fan .cc-fan__main { stroke: var(--cc-blue); stroke-width: 2.4; } .md-typeset ul.cc-surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 16px; margin-top: 40px; } @media screen and (min-width: 1100px) { .md-typeset .cc-fan { display: block; } .md-typeset ul.cc-surfaces { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 0; } } .md-typeset .cc-surface { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 20px; border: 1px solid var(--cc-line); border-radius: 14px; background: var(--cc-card); color: var(--cc-text); transition: border-color 150ms, box-shadow 150ms, transform 150ms; } .md-typeset .cc-surface:hover, .md-typeset .cc-surface:focus-visible { border-color: var(--cc-blue); color: var(--cc-text); transform: translateY(-2px); } .md-typeset .cc-surface--main { padding: 19px; border: 2px solid var(--cc-blue); box-shadow: 0 12px 30px rgba(44, 156, 205, 0.16); } .cc-surface__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--cc-ink); color: var(--cc-blue); } .cc-surface--main .cc-surface__icon { background: var(--cc-blue); color: #06131b; } .cc-surface__icon svg { width: 22px; height: 22px; } /* Sits on the card's top edge, like a tab, so it never crowds the icon. */ .cc-surface__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: var(--cc-tint); color: var(--cc-blue-deep); font-size: 11.5px; font-weight: 700; line-height: 1.3; } .md-typeset .cc-surface--main { position: relative; } .cc-surface__kicker { font-size: 12.5px; font-weight: 600; color: var(--cc-muted); } .cc-surface__name { font-family: var(--cc-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; } .cc-surface__desc { flex-grow: 1; font-size: 14.5px; line-height: 1.5; color: var(--cc-muted); } .md-typeset .cc-surface__code { padding: 8px; border-radius: 7px; background: var(--cc-paper); font-family: var(--cc-mono); font-size: 11.5px; overflow-wrap: anywhere; } .cc-surface__go { font-size: 14px; font-weight: 600; color: var(--cc-blue-deep); } .md-typeset .cc-more-link { margin-top: 28px; text-align: center; font-size: 15px; font-weight: 600; } /* On a phone the five cards become a list of rows: the icon, the name and what it is for. The details are one tap away on the guide. */ @media screen and (max-width: 599px) { .md-typeset ul.cc-surfaces { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; } .md-typeset .cc-surface { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "icon kicker"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; } .md-typeset .cc-surface--main { padding: 13px 15px; } .cc-surface__icon { grid-area: icon; width: 40px; height: 40px; } .cc-surface__name { grid-area: name; font-size: 17px; } .cc-surface__kicker { grid-area: kicker; font-size: 13.5px; font-weight: 500; } .cc-surface__desc, .md-typeset .cc-surface__code, .cc-surface__go, .cc-surface__flag { display: none; } } /* ----------------------------------------------------------- Action demo -- */ .cc-demo { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 52px; } .cc-demo:not(.is-ready) .cc-tabs { display: none; } .cc-tabs { display: flex; justify-content: center; gap: 10px; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: none; } .md-typeset .cc-tab { position: relative; flex-shrink: 0; height: 44px; padding: 0 18px; overflow: hidden; border: 1px solid #2a3b48; border-radius: 999px; background: transparent; color: var(--cc-on-ink-2); font-family: var(--cc-mono); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 250ms, color 250ms, border-color 250ms; } .md-typeset .cc-tab:hover { border-color: var(--cc-blue); color: #ffffff; } .md-typeset .cc-tab[aria-selected="true"] { border-color: var(--cc-blue); background: var(--cc-blue); color: #06131b; } .cc-tab__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: rgba(6, 19, 27, 0.45); } .cc-panel { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; } .cc-panel[hidden] { display: none; } /* Without the script every panel is listed, one under the other. */ .cc-demo:not(.is-ready) .cc-panel + .cc-panel { margin-top: 48px; } .cc-panel:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 6px; border-radius: 14px; } .md-typeset .cc-caption { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 14px; color: #9db0be; } .md-typeset .cc-caption strong { font-size: 19px; font-weight: 600; color: #f2f6f8; text-wrap: balance; } .md-typeset .cc-caption code { padding: 2px 7px; border-radius: 5px; background: var(--cc-ink-2); color: var(--cc-blue-soft); font-family: var(--cc-mono); font-size: 13px; } /* The window: a page on github.com, drawn light in either scheme. */ .cc-window { --w-text: #0e1b24; --w-muted: #4f6270; --w-line: #dce3e8; --w-soft: #f4f6f7; display: flex; flex-direction: column; width: 100%; max-width: 1000px; border-radius: 14px; overflow: hidden; background: #ffffff; color: var(--w-text); font-size: 14px; line-height: 1.5; text-align: left; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); } .cc-demo.is-ready .cc-window { min-height: 600px; } .cc-window .cc-dim { color: var(--w-muted); } .cc-window__bar { display: flex; align-items: center; gap: 14px; height: 36px; flex-shrink: 0; padding: 0 16px; background: #eef2f4; border-bottom: 1px solid var(--w-line); } .cc-window__bar .cc-dots i { background: #d5dce1; } .cc-url { flex-grow: 1; height: 22px; padding: 0 10px; border-radius: 6px; background: #ffffff; font-family: var(--cc-mono); font-size: 12px; line-height: 22px; color: #5b6d7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-pr { display: flex; flex-direction: column; gap: 8px; padding: 18px 28px 0; border-bottom: 1px solid var(--w-line); } .md-typeset .cc-pr__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .cc-pr__num { font-weight: 400; color: #6b7c88; } .cc-open { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--cc-pass); color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0; } .cc-editbox { display: flex; align-items: center; flex: 1; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 12px; border: 2px solid var(--cc-blue); border-radius: 8px; font-size: 21px; white-space: pre; } .cc-save { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid #c9d3da; border-radius: 8px; background: var(--w-soft); font-size: 14px; } .md-typeset .cc-pr__meta { font-size: 14px; color: var(--w-muted); } .md-typeset .cc-pr__meta b { color: var(--w-text); } .md-typeset .cc-window .cc-ref { padding: 2px 6px; border-radius: 5px; background: var(--cc-tint); color: #135a74; font-family: var(--cc-mono); font-size: 12.5px; } .md-typeset .cc-window .cc-ref--bad { background: #fce3e0; color: #a62a24; } .md-typeset .cc-pr__tabs { display: flex; gap: 22px; margin-top: 4px; font-size: 14px; color: var(--w-muted); white-space: nowrap; } .cc-pr__tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px 11px; border-bottom: 2px solid transparent; } .cc-pr__tabs .is-active { border-bottom-color: var(--cc-blue); color: var(--w-text); font-weight: 600; } .cc-pr__tabs i { padding: 1px 7px; border-radius: 999px; background: #eef2f4; font-size: 12px; font-style: normal; font-weight: 400; } .cc-window__body { flex-grow: 1; padding: 22px 28px; background: #f7f9fa; } /* Status icons: a filled circle with a glyph, drawn in CSS so the markup stays one empty element per icon. */ .cc-st { position: relative; display: inline-block; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px; } .cc-st::after { content: ""; position: absolute; inset: 0; background: #ffffff; -webkit-mask: var(--glyph) center / 12px no-repeat; mask: var(--glyph) center / 12px no-repeat; } .cc-st--pass { background: var(--cc-pass); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.3 2.3 4.9-5.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .cc-st--fail { background: var(--cc-fail); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } .cc-st--wait { border: 2px dashed var(--cc-wait); box-sizing: border-box; } .cc-st--wait::after { display: none; } /* pr-comments */ .cc-conv { display: flex; flex-direction: column; gap: 14px; } .cc-comment { display: flex; gap: 14px; } .cc-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--cc-ink); } .cc-avatar svg { width: 22px; height: 22px; } .cc-comment__box { flex-grow: 1; min-width: 0; border: 1px solid #d3dce2; border-radius: 10px; background: #ffffff; overflow: hidden; } .md-typeset .cc-comment__head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--w-line); background: #eef2f4; font-size: 13.5px; color: var(--w-muted); } .cc-comment__head b { color: var(--w-text); } .cc-chip { padding: 0 7px; border: 1px solid #c9d3da; border-radius: 999px; font-size: 11.5px; } .cc-chip--end { margin-left: auto; } .cc-comment__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; } .cc-comment__body > div { display: flex; flex-direction: column; gap: 12px; border-radius: 8px; } .md-typeset .cc-report__title { padding-bottom: 8px; border-bottom: 1px solid #e3e9ed; font-size: 19px; font-weight: 700; } .md-typeset .cc-verdict { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .md-typeset .cc-table { width: 100%; border: 1px solid var(--w-line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13.5px; } .md-typeset .cc-table th, .md-typeset .cc-table td { padding: 9px 12px; border-bottom: 1px solid #e8edf0; text-align: left; vertical-align: top; } .md-typeset .cc-table th { background: var(--w-soft); font-weight: 600; } .md-typeset .cc-table tr:last-child td { border-bottom: 0; } .md-typeset .cc-table code { padding: 1px 5px; border-radius: 4px; background: #f1f4f6; font-family: var(--cc-mono); font-size: 12.5px; } .cc-lnk { color: var(--cc-blue-deep); } .cc-window .cc-lnk { color: #176b89; } .md-typeset .cc-fold { font-size: 13.5px; color: var(--w-muted); } .md-typeset .cc-report__foot { font-size: 12.5px; font-style: italic; color: #176b89; } .md-typeset .cc-event { display: flex; align-items: center; gap: 10px; margin-left: 50px; font-size: 14px; color: var(--w-muted); } .cc-event svg { width: 16px; height: 16px; flex-shrink: 0; } .md-typeset .cc-event b { color: var(--w-text); } .md-typeset .cc-event code { font-family: var(--cc-mono); font-size: 12.5px; } .md-typeset .cc-note { margin-left: 50px; font-size: 13.5px; font-weight: 600; color: #176b89; } /* job-summary */ .cc-run { display: flex; padding: 0; } .cc-run__side { display: flex; flex-direction: column; gap: 6px; width: 200px; flex-shrink: 0; box-sizing: border-box; padding: 20px 14px; border-right: 1px solid var(--w-line); background: #ffffff; } .cc-run__side span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; } .cc-run__side .is-active { background: #eef2f4; font-weight: 600; } .cc-run__side .cc-run__label { padding-top: 14px; font-size: 12px; font-weight: 600; color: #5b6d7a; } .cc-run__main { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; min-width: 0; padding: 20px 24px; } .cc-run__meta { display: flex; flex-wrap: wrap; gap: 8px 36px; padding: 12px 16px; border: 1px solid var(--w-line); border-radius: 10px; background: #ffffff; } .md-typeset .cc-run__meta p { display: flex; flex-direction: column; font-size: 13px; color: #5b6d7a; } .cc-run__meta b { font-size: 14px; color: var(--w-text); } .cc-card { border: 1px solid var(--w-line); border-radius: 10px; background: #ffffff; overflow: hidden; } .md-typeset .cc-card__head { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e3e9ed; font-size: 14px; font-weight: 600; } .cc-card__head .cc-dim { font-weight: 400; } .cc-card__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; } .cc-card--pad { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .cc-tree { padding: 12px 14px; border-radius: 8px; background: var(--w-soft); font-family: var(--cc-mono); font-size: 12.5px; line-height: 19px; } .cc-tree > div { min-height: 19px; white-space: pre; } /* The one long line, a Suggest: that lists every commit type, wraps with a hanging indent under its own text instead of scrolling the box. */ .cc-tree > .cc-hang { white-space: pre-wrap; padding-left: 8ch; text-indent: -8ch; } /* pr-title, message, branch */ .cc-stack { display: flex; flex-direction: column; gap: 16px; } .cc-check { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .md-typeset .cc-check p { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cc-check .cc-mono { font-size: 13px; } .md-typeset .cc-squash__label { font-size: 14px; color: var(--w-muted); } .md-typeset .cc-squash__label code { font-family: var(--cc-mono); font-size: 12.5px; } .md-typeset .cc-squash { padding: 12px 14px; border-radius: 8px; background: var(--w-soft); font-family: var(--cc-mono); font-size: 14px; white-space: pre-wrap; } .cc-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; } .cc-mergebtn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 8px; background: #e4e9ed; color: #6b7c88; font-size: 14px; font-weight: 600; } .cc-mergebtn--ready { background: var(--cc-pass); color: #ffffff; } .cc-commit { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef2f4; font-size: 15px; font-weight: 600; } .cc-commit:last-child { border-bottom: 0; } .cc-commit span { flex-grow: 1; min-width: 0; } .md-typeset .cc-commit code { padding: 2px 7px; border: 1px solid var(--w-line); border-radius: 6px; font-family: var(--cc-mono); font-size: 12.5px; font-weight: 400; color: var(--w-muted); } .cc-annot { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #eef2f4; } .cc-annot:last-child { border-bottom: 0; } .md-typeset .cc-annot__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .md-typeset .cc-annot .cc-mono, .md-typeset .cc-finding .cc-mono { font-size: 12.5px; line-height: 1.6; color: #3a2320; overflow-wrap: anywhere; } .cc-annot .cc-mono { margin-left: 26px; } .cc-split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; } .md-typeset .cc-branchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; } .md-typeset .cc-branchrow code { font-size: 15px; } .cc-finding { display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; border-radius: 8px; background: #fcefed; } .md-typeset .cc-finding p:first-child { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .cc-rule { padding: 1px 7px; border-radius: 4px; background: var(--cc-fail); color: #ffffff; font-family: var(--cc-mono); font-size: 12.5px; font-weight: 700; } .md-typeset .cc-term--inline { padding: 14px 16px; border-radius: 10px; box-shadow: none; font-size: 13.5px; line-height: 22px; } .md-typeset .cc-types { font-size: 12.5px; } .md-typeset .cc-types__head { font-size: 13px; font-weight: 600; color: #5b6d7a; } .md-typeset .cc-types ul { display: flex; flex-direction: column; gap: 8px; } .md-typeset .cc-types li { padding: 7px 10px; border-radius: 7px; background: var(--w-soft); font-family: var(--cc-mono); font-size: 14px; color: #33444f; transition: background-color 400ms, color 400ms; } .md-typeset .cc-tl:not(.is-live) .cc-types li[data-hl], .md-typeset .cc-types li.is-hl { background: #ddf3e6; color: #146b3e; font-weight: 700; } .md-typeset .cc-types code { font-family: var(--cc-mono); } /* Below the demo: the workflow and what makes it worth running. */ .cc-action__more { display: grid; gap: 24px; width: 100%; max-width: 1080px; margin: 56px auto 0; } @media screen and (min-width: 900px) { .cc-action__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cc-yaml { border: 1px solid #1f2f3b; border-radius: 14px; background: var(--cc-ink-3); overflow: hidden; } .md-typeset .cc-yaml__bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 16px; background: var(--cc-ink-2); font-family: var(--cc-mono); font-size: 12.5px; color: #9db0be; } .cc-yaml__body { padding: 16px 18px 18px; overflow-x: auto; font-family: var(--cc-mono); font-size: 13px; line-height: 21px; color: #d6e1e8; white-space: pre; } .cc-yaml__body b { color: #ffffff; } .cc-points { display: flex; flex-direction: column; gap: 14px; } .cc-point { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid #1f2f3b; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: #9db0be; } .md-typeset .cc-point__title { font-size: 16px; font-weight: 600; color: #ffffff; } .md-typeset .cc-point code { font-family: var(--cc-mono); font-size: 13px; color: #d6e1e8; } .md-typeset .cc-point__links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 6px 4px 0; font-size: 15px; font-weight: 600; } .md-typeset .cc-band--ink a:not(.cc-btn) { color: var(--cc-blue-soft); } .md-typeset .cc-band--ink a:not(.cc-btn):hover { color: #ffffff; } /* ---------------------------------------------------------------- rules -- */ .md-typeset ul.cc-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 52px; } @media screen and (min-width: 1000px) { .md-typeset ul.cc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .md-typeset .cc-group { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--cc-line); border-radius: 16px; background: var(--cc-card); } .md-typeset .cc-group__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--cc-display); font-size: 23px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } .md-typeset .cc-group__head code { flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: var(--cc-tint); color: var(--cc-blue-deep); font-family: var(--cc-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; } .md-typeset .cc-group__desc { flex-grow: 1; font-size: 14.5px; line-height: 1.5; color: var(--cc-muted); } .md-typeset .cc-group__desc code { font-family: var(--cc-mono); font-size: 12.5px; overflow-wrap: anywhere; } .md-typeset .cc-ex { display: flex; gap: 10px; padding: 8px 10px; border-radius: 7px; font-family: var(--cc-mono); font-size: 13px; overflow-wrap: anywhere; } .md-typeset .cc-ex--bad { background: #fcefed; color: #8e231e; } .md-typeset .cc-ex--ok { background: #e6f4ec; color: #146b3e; } .md-typeset .cc-ex > span:first-child { font-weight: 700; } .md-typeset .cc-group--ink { border-color: var(--cc-ink); background: var(--cc-ink); color: var(--cc-on-ink); } .md-typeset .cc-group--ink .cc-group__desc { color: #9db0be; } .md-typeset .cc-group__code { padding: 10px 12px; border-radius: 8px; background: var(--cc-ink-2); font-family: var(--cc-mono); font-size: 12.5px; line-height: 1.5; color: #d6e1e8; overflow-wrap: anywhere; } .md-typeset .cc-group__link, .md-typeset .cc-group__link:hover { font-size: 14px; font-weight: 600; color: var(--cc-blue-soft); } /* -------------------------------------------------------------- anatomy -- */ .cc-anatomy__grid { display: grid; gap: 48px; align-items: center; } @media screen and (min-width: 960px) { .cc-anatomy__grid { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 72px; } } .cc-anatomy__grid > div:first-child { display: flex; flex-direction: column; gap: 18px; } .md-typeset ol.cc-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; counter-reset: cc-step; } .md-typeset .cc-steps li { display: flex; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--cc-muted); counter-increment: cc-step; } .md-typeset .cc-steps li::before, .cc-mark { content: counter(cc-step); display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--cc-blue); color: #06131b; font-family: "Instrument Sans", -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; } .md-typeset .cc-steps b { color: var(--cc-text); } .cc-diag { display: flex; flex-direction: column; padding: 30px 32px; border-radius: 16px; background: var(--cc-ink); box-shadow: 0 24px 60px rgba(11, 22, 32, 0.2); font-family: var(--cc-mono); font-size: 14.5px; line-height: 2.1; color: #d6e1e8; overflow-x: auto; } .md-typeset .cc-diag p { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .cc-diag .cc-mark { width: 22px; height: 22px; font-size: 12px; } .md-typeset .cc-diag__docs { padding-left: 34px; } /* ---------------------------------------------------------------- proof -- */ .md-typeset .cc-proof { padding-top: 88px; padding-bottom: 88px; } .md-typeset ul.cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .md-typeset .cc-stats li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--cc-text); } .cc-stats b { font-family: var(--cc-display); font-size: clamp(38px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .cc-stats span { font-size: 15.5px; color: var(--cc-muted); } .md-typeset .cc-users { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--cc-line); } .cc-users span { font-size: 14px; color: var(--cc-muted); } .md-typeset .cc-users a { font-family: var(--cc-display); font-size: 23px; font-weight: 700; letter-spacing: -0.015em; color: #5b6d7a; } [data-md-color-scheme="slate"] .md-typeset .cc-users a { color: #a3b4c0; } .md-typeset .cc-users a:hover { color: var(--cc-text); } .md-typeset .cc-users a:last-child { font-family: "Instrument Sans", -apple-system, "Segoe UI", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--cc-blue-deep); } /* -------------------------------------------------------------- pricing -- */ .md-typeset ul.cc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; } .md-typeset .cc-plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--cc-line); border-radius: 16px; } .md-typeset .cc-plan--soon { padding: 27px; border: 2px dashed #9fc9dc; background: #f5fafd; } [data-md-color-scheme="slate"] .md-typeset .cc-plan--soon { border-color: #2e5467; background: #10222d; } .md-typeset .cc-plan__name { font-size: 16px; font-weight: 600; } .md-typeset .cc-plan__price { font-family: var(--cc-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .md-typeset .cc-plan--soon .cc-plan__price { color: var(--cc-muted); } .md-typeset .cc-plan__desc { flex-grow: 1; font-size: 15px; color: var(--cc-muted); } .md-typeset .cc-plan a { font-size: 15px; font-weight: 600; } .md-typeset .cc-plans__note { margin-top: 28px; max-width: 820px; font-size: 15px; color: var(--cc-muted); } /* ------------------------------------------------------------------ FAQ -- */ .md-typeset .cc-faq { padding-top: 96px; padding-bottom: 96px; } .md-typeset .cc-faq .cc-wrap { max-width: 820px; } .md-typeset .cc-faq .cc-h2 { margin: 0 0 28px; } .md-typeset .cc-faq details { margin: 0 0 10px; border: 1px solid var(--cc-line); border-radius: 12px; background: var(--cc-card); box-shadow: none; font-size: 15px; } .md-typeset .cc-faq details > summary { padding: 14px 44px 14px 18px; background: none; font-size: 16px; font-weight: 600; } .md-typeset .cc-faq details > summary::before { display: none; } .md-typeset .cc-faq details > summary::after { top: 16px; right: 14px; } .md-typeset .cc-faq details > p { margin: 0 18px 14px; } /* ------------------------------------------------------------------ CTA -- */ .cc-cta__grid { display: grid; gap: 40px; align-items: center; } @media screen and (min-width: 960px) { .cc-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 60px; } } .cc-cta__grid > div:first-child { display: flex; flex-direction: column; gap: 16px; } .cc-cta__grid .cc-actions { margin-top: 10px; } .md-typeset .cc-h2--xl { color: #ffffff; } .cc-cta__code { padding: 26px 28px; border: 1px solid #1f2f3b; border-radius: 14px; background: var(--cc-ink-3); font-family: var(--cc-mono); font-size: 16px; line-height: 2.1; color: var(--cc-on-ink); overflow-x: auto; white-space: nowrap; } /* -------------------------------------------------------------- sitemap -- */ .md-typeset .cc-sitemap { padding-top: 56px; padding-bottom: 48px; background: #081119; border-top: 1px solid #16242f; } .cc-sitemap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px 24px; font-size: 14.5px; } .cc-sitemap__grid > div { display: flex; flex-direction: column; gap: 11px; } .md-typeset .cc-sitemap p { font-weight: 600; color: #ffffff; } .md-typeset .cc-sitemap a { color: #9db0be; } .md-typeset .cc-sitemap a:hover { color: #ffffff; } /* ---------------------------------------------------------- small screens -- */ @media screen and (max-width: 759px) { .md-typeset .cc-band { padding-top: 64px; padding-bottom: 64px; font-size: 15px; } .md-typeset .cc-hero { padding-top: 40px; padding-bottom: 0; } .md-typeset .cc-hero__graph { display: none; } .md-typeset .cc-lede { font-size: 16.5px; } .cc-actions, .md-typeset .cc-btn, .md-typeset .cc-install { width: 100%; } .md-typeset .cc-btn { justify-content: center; } .md-typeset .cc-install code { flex-grow: 1; } .md-typeset ul.cc-facts { margin-top: 40px; flex-direction: column; } .cc-term__body { padding: 14px 16px 18px; font-size: 12px; line-height: 19px; } .cc-line { min-height: 19px; } .cc-gap { margin-top: 19px; } .md-typeset .cc-sub { font-size: 16px; } .cc-head--center { align-items: flex-start; text-align: left; } /* The demo keeps its story on a phone, with the chrome pared back: no sidebar, no avatar, and the tab strip scrolls sideways. */ .cc-tabs { justify-content: flex-start; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; } .md-typeset .cc-tab { padding: 0 15px; font-size: 13px; } .md-typeset .cc-caption { text-align: left; align-self: stretch; } .md-typeset .cc-caption strong { font-size: 16px; } .cc-demo.is-ready .cc-window { min-height: 640px; } .cc-pr { padding: 14px 16px 0; } .md-typeset .cc-pr__title { font-size: 18px; min-height: 32px; } .cc-editbox { height: 34px; font-size: 16px; } .cc-pr__tabs .cc-wide, .cc-avatar, .cc-run__side { display: none; } .md-typeset .cc-pr__tabs { gap: 16px; font-size: 13px; } .cc-window__body { padding: 16px; } .cc-run__main { padding: 16px; } .md-typeset .cc-event, .md-typeset .cc-note { margin-left: 0; } /* The report table turns into one block per failing scope. */ .md-typeset .cc-table thead { display: none; } .md-typeset .cc-table tr { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid #e8edf0; } .md-typeset .cc-table tr:last-child { border-bottom: 0; } .md-typeset .cc-table td { padding: 1px 0; border: 0; } .cc-tree { font-size: 11.5px; line-height: 18px; } .cc-tree > div { white-space: pre-wrap; overflow-wrap: anywhere; } .cc-split { grid-template-columns: minmax(0, 1fr); } .md-typeset .cc-types ul { flex-direction: row; flex-wrap: wrap; } .cc-annot .cc-mono { margin-left: 0; } .cc-commit { font-size: 14px; padding: 11px 12px; } .cc-diag { padding: 20px; font-size: 12.5px; line-height: 1.9; } .md-typeset .cc-diag p { white-space: normal; align-items: flex-start; } .md-typeset .cc-diag__docs { padding-left: 0; overflow-wrap: anywhere; } .cc-cta__code { font-size: 13.5px; padding: 18px 20px; } .md-typeset .cc-users a { font-size: 19px; } .cc-sitemap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------- reduced motion -- */ /* The script never starts a timeline under reduced motion, so every demo already rests on its final frame; this stops the carets and hover lifts. */ @media (prefers-reduced-motion: reduce) { .cc-caret { animation: none; } .md-typeset .cc-surface, .md-typeset .cc-surface:hover { transition: none; transform: none; } } /* JetBrains Mono draws `==>` as one arrow. The transcripts must show what the terminal printed, character for character. */ .md-typeset .cc-band :is(.cc-term, .cc-diag, .cc-tree, .cc-mono, code, .cc-yaml__body, .cc-config__body, .cc-cta__code, .cc-squash, .cc-install, .cc-tab, .cc-ex, .cc-group__code) { font-variant-ligatures: none; } /* In the dark scheme the cards are already near Ink; an outline keeps the organization card from dissolving into its neighbours. */ [data-md-color-scheme="slate"] .md-typeset .cc-group--ink { border-color: #22404f; } /* --------------------------------------------------- hero, light scheme -- */ /* In the light scheme the hero is light too, so the theme toggle changes what is on screen at the top of the page. The terminal and the install command stay dark: they stand for a terminal, which is dark in either theme. The Action band and the closing band stay Ink in both schemes as a stage for the demo. */ [data-md-color-scheme="default"] .md-typeset .cc-hero { background: #ffffff; color: var(--cc-text); box-shadow: inset 0 -1px 0 var(--cc-line); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-display { color: var(--cc-text); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-accent { /* Signal Blue is 3.1:1 on white, enough for display type (3:1 from 24px). */ color: var(--cc-blue); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-lede { color: var(--cc-muted); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-lede code { color: var(--cc-text); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-pill { border-color: #b9dcec; background: var(--cc-tint); color: #135a74; } [data-md-color-scheme="default"] .md-typeset .cc-hero ul.cc-facts { border-top-color: var(--cc-line); color: var(--cc-muted); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-install { border-color: var(--cc-ink); background: var(--cc-ink); } [data-md-color-scheme="default"] .md-typeset .cc-hero .cc-term { box-shadow: 0 24px 60px rgba(11, 22, 32, 0.22); } /* The history-line motif's nodes are filled with the ground colour so the lines pass behind them; on the light hero that ground is white. */ [data-md-color-scheme="default"] .md-typeset .cc-hero__graph circle { fill: #ffffff; }