/* ========================================================================== KahunaCart homepage layer -------------------------------------------------------------------------- The sections that exist only on the homepage: the proof band, the inversion graphic, the capability explorer, the latency chart, the stack diagram in the platform card, the admin mock's motion, and the developers terminal. Loaded after css/kahuna.css and written to the same rules: plain CSS on `kc-` classes over `--ks-` tokens, light only, never a `--kc-*` property (the storefront owns that prefix). Motion. Every animation here is gated three ways so nothing can be missed: the finished state is the default; the "before" state only applies once js/kahuna-home.js has put `kc-js` on ; and all of it sits inside `prefers-reduced-motion: no-preference`. A scope (`[data-kc-scope]`) gets `kc-go` the first time it scrolls into view, and that class runs the show. Only opacity and transform move, so nothing ever changes layout. ========================================================================== */ /* -------------------------------------------------------------------------- Proof band -------------------------------------------------------------------------- */ .kc-proof { background: var(--ks-lagoon-deep); color: #F6EAD7; } .kc-proof-in { display: grid; grid-template-columns: repeat(6, 1fr); padding: 30px 0; text-align: center; } .kc-proof-item { display: block; padding: 6px 10px; color: inherit; text-decoration: none; border-left: 1px solid rgba(246, 234, 215, 0.14); } .kc-proof-item:first-child { border-left: 0; } .kc-proof-num { display: block; font-family: var(--ks-display); font-weight: 800; font-size: clamp(26px, 2.9vw, 36px); letter-spacing: -0.02em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .kc-proof-lbl { display: block; font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #A8CBCB; margin-top: 6px; line-height: 1.4; } a.kc-proof-item:hover .kc-proof-num { color: #FFD9A8; } a.kc-proof-item:hover .kc-proof-lbl { color: #F6EAD7; } @media (max-width: 960px) { .kc-proof-in { grid-template-columns: repeat(3, 1fr); row-gap: 22px; padding: 26px 0; } .kc-proof-item:nth-child(4) { border-left: 0; } } @media (max-width: 560px) { .kc-proof-in { grid-template-columns: repeat(2, 1fr); } .kc-proof-item:nth-child(4) { border-left: 1px solid rgba(246, 234, 215, 0.14); } .kc-proof-item:nth-child(odd) { border-left: 0; } } /* -------------------------------------------------------------------------- The inversion -------------------------------------------------------------------------- Two figures side by side, each a card holding a little "admin screen". The tiles inside are laid out on a grid whose rows never change size, so the picture is the same height before, during and after the animation. -------------------------------------------------------------------------- */ .kc-inv { background: var(--ks-sand); border-top: 1px solid var(--ks-line); border-bottom: 1px solid var(--ks-line); } .kc-inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 880px) { .kc-inv-grid { grid-template-columns: 1fr; } } .kc-inv-side { margin: 0; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 20px; padding: 22px 22px 20px; display: flex; flex-direction: column; } .kc-inv-grav { border-color: var(--ks-lagoon); box-shadow: 0 0 0 1px var(--ks-lagoon); } .kc-inv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; } .kc-inv-head b { font-family: var(--ks-display); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; } .kc-inv-head span { font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-koa-soft); } .kc-inv-grav .kc-inv-head span { color: var(--ks-lagoon); } .kc-inv-screen { background: var(--ks-sand-soft); border: 1px solid var(--ks-line); border-radius: 12px; padding: 12px; } .kc-inv-bar { display: flex; align-items: center; gap: 6px; margin: -2px 0 12px; } .kc-inv-bar i { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--ks-line); } .kc-inv-bar span { margin-left: 6px; font-family: var(--ks-mono); font-size: 10.5px; color: var(--ks-koa-soft); background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 999px; padding: 1px 10px; } .kc-inv-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 10px; padding: 10px 6px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; } .kc-inv-tile svg { width: 22px; height: 22px; stroke: var(--ks-koa-soft); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Left: four big store boxes, then a cramped shelf. */ .kc-inv-big { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 78px; gap: 10px; } .kc-inv-hosted .kc-inv-tile { font-size: 14px; } .kc-inv-shelf { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 8px; border: 1px dashed var(--ks-line); border-radius: 8px; min-height: 36px; } .kc-inv-shelf-lbl { font-family: var(--ks-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ks-koa-soft); margin-right: 4px; flex: none; } .kc-inv-mini { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border: 1px solid var(--ks-line); border-radius: 6px; background: var(--ks-sand); color: var(--ks-koa-soft); font-size: 11px; font-weight: 600; white-space: nowrap; } .kc-inv-mini small { font-family: var(--ks-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ks-amber); } .kc-inv-mini.kc-inv-none { border-style: dashed; background: transparent; } .kc-inv-mini.kc-inv-none span { text-decoration: line-through; opacity: 0.6; } .kc-inv-mini.kc-inv-none small { color: var(--ks-koa-soft); } /* Right: the site's four rooms, then the store as a peer among them. */ .kc-inv-site { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 78px; gap: 10px; } .kc-inv-site .kc-inv-tile svg { stroke: var(--ks-lagoon-deep); } .kc-inv-store { position: relative; margin-top: 10px; padding: 20px 8px 8px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 66px; gap: 8px; background: var(--ks-lagoon-mist); border: 1px solid var(--ks-lagoon); border-radius: 10px; } .kc-inv-store-lbl { position: absolute; top: -9px; left: 10px; padding: 1px 8px; background: var(--ks-lagoon); color: #FCF6EA; border-radius: 999px; font-family: var(--ks-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .kc-inv-store .kc-inv-tile { border-color: #B9D4D2; } .kc-inv-store .kc-inv-tile svg { stroke: var(--ks-lagoon); } .kc-inv-cap { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ks-koa-soft); } .kc-inv-grav .kc-inv-cap { color: var(--ks-koa); } .kc-inv-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--ks-line); } .kc-inv-point b { display: block; font-family: var(--ks-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ks-lagoon-deep); margin-bottom: 4px; } .kc-inv-point span { font-size: 14.5px; color: var(--ks-koa-soft); } @media (max-width: 880px) { .kc-inv-points { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .kc-inv-points { grid-template-columns: 1fr; } .kc-inv-side { padding: 18px 16px 16px; } .kc-inv-site { grid-template-columns: repeat(2, 1fr); } .kc-inv-shelf { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- Capability explorer -------------------------------------------------------------------------- Without JavaScript the tabs are a row of anchor chips and every panel is on the page. `.kc-cap-js` (set by the script) switches to the two-column layout with one panel visible at a time. -------------------------------------------------------------------------- */ .kc-cap-note { margin: 0 0 26px; font-family: var(--ks-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ks-koa-soft); } .kc-cap-note::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; margin-right: 8px; } .kc-cap-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .kc-cap-tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ks-koa-soft); font-family: var(--ks-body); font-size: 14.5px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .kc-cap-tab svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .kc-cap-tab:hover { color: var(--ks-koa); background: var(--ks-sand); } .kc-cap-tab.kc-on, .kc-cap-tab[aria-selected="true"] { color: var(--ks-koa); background: var(--ks-card); border-color: var(--ks-line); box-shadow: inset 3px 0 0 var(--ks-lagoon); } .kc-cap-tab.kc-on svg, .kc-cap-tab[aria-selected="true"] svg { stroke: var(--ks-lagoon); } .kc-cap-panels { display: flex; flex-direction: column; gap: 16px; } .kc-cap-panel { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 28px 30px 26px; } .kc-cap-panel[hidden] { display: none; } .kc-cap-group { margin: 0 0 8px; font-family: var(--ks-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ks-lagoon); } .kc-cap-panel h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; line-height: 1.2; margin: 0 0 20px; max-width: 34ch; } .kc-cap-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; } .kc-cap-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--ks-koa-soft); } .kc-cap-list li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; } .kc-cap-list small { display: inline-block; vertical-align: 1px; margin: 0 2px; padding: 1px 7px; border-radius: 999px; background: var(--ks-sand-deep); color: var(--ks-amber); font-family: var(--ks-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .kc-cap-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 22px 0 0; font-size: 14.5px; font-weight: 600; } .kc-cap-links a { color: var(--ks-lagoon); text-decoration: none; } .kc-cap-links a:hover { text-decoration: underline; } /* With the script. */ .kc-cap-js { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; } .kc-cap-js .kc-cap-tabs { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; } .kc-cap-js .kc-cap-tab { width: 100%; box-sizing: border-box; } .kc-cap-js .kc-cap-panel { min-height: 100%; } @media (max-width: 860px) { .kc-cap-js { grid-template-columns: 1fr; gap: 14px; } .kc-cap-js .kc-cap-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kc-cap-js .kc-cap-tabs::-webkit-scrollbar { display: none; } .kc-cap-js .kc-cap-tab { width: auto; flex: none; white-space: nowrap; border-color: var(--ks-line); background: var(--ks-card); } .kc-cap-js .kc-cap-tab.kc-on, .kc-cap-js .kc-cap-tab[aria-selected="true"] { background: var(--ks-lagoon); color: #FCF6EA; border-color: var(--ks-lagoon); box-shadow: none; } .kc-cap-js .kc-cap-tab.kc-on svg, .kc-cap-js .kc-cap-tab[aria-selected="true"] svg { stroke: #FCF6EA; } .kc-cap-panel { padding: 22px 20px 20px; } .kc-cap-list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Performance chart -------------------------------------------------------------------------- */ .kc-perf-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } @media (max-width: 880px) { .kc-perf-grid { grid-template-columns: 1fr; gap: 34px; } } .kc-perf-link { margin: 26px 0 0; font-size: 15px; font-weight: 600; } .kc-perf-link a { color: var(--ks-lagoon); text-decoration: none; } .kc-perf-link a:hover { text-decoration: underline; } .kc-chart { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 24px 26px 22px; box-shadow: 0 18px 44px rgba(43, 28, 12, 0.08); } .kc-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; } .kc-chart-head b { font-family: var(--ks-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; } .kc-chart-head span { font-size: 13px; color: var(--ks-koa-soft); } .kc-chart-head-2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ks-line); } .kc-chart-head-2 b { font-size: 14px; color: var(--ks-koa-soft); font-weight: 700; } .kc-bars { --kc-lbl: 92px; --kc-val: 84px; } .kc-bar { display: grid; grid-template-columns: var(--kc-lbl) 1fr var(--kc-val); align-items: center; gap: 12px; margin-bottom: 10px; } .kc-bar-lbl { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); } .kc-bar-track { position: relative; display: block; height: 28px; background: var(--ks-sand); border-radius: 6px; overflow: hidden; } .kc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--ks-lagoon); border-radius: 6px; transform-origin: left center; } .kc-bar-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ks-lagoon); } .kc-bar-val { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 700; color: var(--ks-koa); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .kc-bar-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ks-lagoon); letter-spacing: 0.02em; } .kc-bar-axis { position: relative; height: 20px; margin: 4px var(--kc-val) 0 var(--kc-lbl); border-top: 1px solid var(--ks-line); font-family: var(--ks-mono); font-size: 10.5px; color: var(--ks-koa-soft); font-variant-numeric: tabular-nums; } .kc-bar-axis span { position: absolute; top: 4px; transform: translateX(-50%); } .kc-bar-axis span:first-child { transform: none; } .kc-bar-axis span:last-child { transform: translateX(-100%); } .kc-bars-before .kc-bar-track { height: 16px; } .kc-bars-before .kc-bar-fill { background: var(--ks-sand-deep); } .kc-bars-before .kc-bar-val { color: var(--ks-amber); font-size: 12.5px; } .kc-tput { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ks-line); } .kc-tput > b { display: block; font-size: 13px; font-weight: 700; color: var(--ks-koa-soft); margin-bottom: 8px; } .kc-tput ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; } .kc-tput li { display: flex; flex-direction: column; gap: 2px; font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); } .kc-tput-n { font-size: 14px; color: var(--ks-koa-soft); font-variant-numeric: tabular-nums; } .kc-tput-n em { font-style: normal; color: var(--ks-line); } .kc-tput-n b { color: var(--ks-lagoon-deep); font-weight: 700; } .kc-perf-foot { margin: 14px 4px 0; font-family: var(--ks-mono); font-size: 11.5px; line-height: 1.6; color: var(--ks-koa-soft); } @media (max-width: 480px) { .kc-chart { padding: 18px 16px 16px; } .kc-bars { --kc-lbl: 74px; --kc-val: 70px; } .kc-bar { gap: 8px; } .kc-bar-lbl { font-size: 11.5px; } .kc-bar-val { font-size: 12.5px; } .kc-bars-before .kc-bar-axis span:nth-child(3) { display: none; } .kc-tput ul { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Stack diagram (inside the platform card) -------------------------------------------------------------------------- */ .kc-stack { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 22px; position: relative; } .kc-stack-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kc-layer { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(246, 234, 215, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff; } .kc-layer b { font-size: 13.5px; font-weight: 700; line-height: 1.25; } .kc-layer span { font-family: var(--ks-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .kc-layer-theme { background: #F6EAD7; color: var(--ks-koa); border-color: #F6EAD7; } .kc-layer-store { background: var(--ks-lagoon); border-color: rgba(255, 255, 255, 0.35); } .kc-layer-api { background: transparent; border-style: dashed; } @media (max-width: 420px) { .kc-stack-split { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Admin mock additions -------------------------------------------------------------------------- */ .kc-am-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .kc-am-head .kc-am-h { margin: 0; } .kc-am-search { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ks-line); border-radius: 999px; background: var(--ks-sand); color: var(--ks-koa-soft); font-size: 10.5px; white-space: nowrap; } .kc-am-search svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .kc-am-tile .kc-v { white-space: nowrap; } /* The mock at phone width: a slimmer sidebar and tighter rows so the third tile and the amount column stay inside the card. */ @media (max-width: 560px) { .kc-am-body { grid-template-columns: 92px 1fr; } .kc-am-side .kc-it { padding: 6px 10px; font-size: 10.5px; } .kc-am-side .kc-it.kc-on { padding-left: 7px; } .kc-am-main { padding: 12px 10px; } .kc-am-tiles { gap: 6px; margin-bottom: 10px; } .kc-am-tile { padding: 8px; } .kc-am-tile .kc-v { font-size: 12.5px; } .kc-am-tile .kc-k { font-size: 9px; } .kc-am-search { padding: 4px 6px; } .kc-am-search span { display: none; } .kc-am-row { gap: 6px; padding: 7px 4px; font-size: 10.5px; } .kc-pill { padding: 2px 6px; font-size: 9px; } } /* -------------------------------------------------------------------------- Developers: the terminal -------------------------------------------------------------------------- */ .kc-dev-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; } @media (max-width: 880px) { .kc-dev-grid { grid-template-columns: 1fr; gap: 30px; } } .kc-dev .kc-checks li b { color: var(--ks-koa); } .kc-term { background: var(--ks-koa); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(43, 28, 12, 0.18); } .kc-term-top { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #3A281A; border-bottom: 1px solid rgba(246, 234, 215, 0.12); } .kc-term-top i { width: 9px; height: 9px; border-radius: 50%; display: block; background: rgba(246, 234, 215, 0.25); } .kc-term-top i:first-child { background: var(--ks-board); } .kc-term-top span { margin-left: 8px; font-family: var(--ks-mono); font-size: 11px; color: #C9B9A4; } .kc-term-body { margin: 0; padding: 18px 20px 20px; font-family: var(--ks-mono); font-size: 12px; line-height: 1.6; color: #C9B9A4; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; } .kc-term-line { display: block; min-height: 1.6em; } /* Token colours inside a cmd or out line come from codesh's kahuna-koa theme (inline styles). The plain copy of a command, typed by the script, sits in the theme's foreground so the swap to the coloured version does not jump. */ .kc-term-cmd { color: #E8DECF; } .kc-term-out + .kc-term-cmd, .kc-term-out + .kc-term-end { margin-top: 14px; } .kc-term-prompt { color: var(--ks-board); font-weight: 700; } .kc-term-note { color: #A89880; } .kc-term-note + .kc-term-cmd { margin-top: 0; } .kc-term-out + .kc-term-note, .kc-term-cmd + .kc-term-note { margin-top: 14px; display: inline-block; } .kc-term-tag { color: #7CC4B8; font-weight: 700; margin-right: 8px; } .kc-term-tag-warn { color: #FFD9A8; } /* While a command is being typed, `.kc-term-plain` is shown in place of the highlighted `.kc-term-hl` (the script toggles `hidden` on both). The untyped remainder keeps its space, so the line box is its final size throughout. */ .kc-term-rest { visibility: hidden; } .kc-term-cursor { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em; background: #FFF6EA; opacity: 0.85; } .kc-term-typing .kc-term-typed::after { content: ""; display: inline-block; width: 0.55em; height: 1.05em; margin-right: -0.55em; vertical-align: -0.15em; background: #FFF6EA; } .kc-term-wait { visibility: hidden; } @media (max-width: 480px) { .kc-term-body { font-size: 11.5px; padding: 14px 14px 16px; } } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- Everything below is the "before" state and the transition to the finished one. Without the script, or with reduced motion on, none of it applies. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Reveals share the site's timing. Delays come from --i on each piece. */ .kc-inv-tile, .kc-inv-mini, .kc-inv-store, .kc-layer, .kc-am-row { transition: opacity 480ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.3, 1); transition-delay: calc(140ms + var(--i, 0) * 75ms); } .kc-js [data-kc-scope]:not(.kc-go) .kc-inv-tile, .kc-js [data-kc-scope]:not(.kc-go) .kc-inv-mini { opacity: 0; transform: translateY(12px) scale(0.94); } .kc-js [data-kc-scope]:not(.kc-go) .kc-inv-store { opacity: 0; transform: translateY(12px); } .kc-js [data-kc-scope]:not(.kc-go) .kc-layer { opacity: 0; transform: translateX(var(--from, -28px)); } .kc-js [data-kc-scope]:not(.kc-go) .kc-am-row { opacity: 0; transform: translateX(10px); } /* The right-hand figure starts a beat after the left. */ .kc-inv-grav .kc-inv-tile, .kc-inv-grav .kc-inv-store { transition-delay: calc(420ms + var(--i, 0) * 75ms); } /* Bars grow from the axis; the figure beside each counts up in step. */ .kc-bar-fill { transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 120ms); } .kc-bar-now { transition: opacity 400ms ease; transition-delay: calc(900ms + var(--i, 0) * 120ms); } .kc-js [data-kc-scope]:not(.kc-go) .kc-bar-fill { transform: scaleX(0); } .kc-js [data-kc-scope]:not(.kc-go) .kc-bar-now { opacity: 0; } /* A panel change in the explorer. */ .kc-cap-anim { animation: kc-cap-in 320ms ease both; } @keyframes kc-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* The terminal's resting cursor blinks once the transcript is complete. */ .kc-term-done .kc-term-cursor, html:not(.kc-js) .kc-term-cursor { animation: kc-blink 1.1s steps(1) infinite; } @keyframes kc-blink { 50% { opacity: 0; } } }