/* Solutions = T.O.N.I Consulting (rebuilt 18 Oct). Dark network hero, practices on paper with live demos, the Ask T.O.N.I console, transformation and software, the engagement track, FAQ. */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .crumb a { color: var(--fg-2); text-decoration: none; } .pk { color: #FF0A7A; } /* ---------- hero: the T.O.N.I network ---------- */ .tn-hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: center; background: radial-gradient(70% 70% at 72% 50%, oklch(0.2 0.07 358) 0%, var(--ink-0) 68%); } .tn-gl { position: absolute; inset: 0; cursor: grab; } .tn-gl.grab { cursor: grabbing; } .tn-gl canvas { display: block; width: 100%; height: 100%; } .tn-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--ink-0) 0%, rgb(13 13 13 / .7) 30%, transparent 55%), linear-gradient(0deg, var(--ink-0) 0%, transparent 24%); z-index: 1; } .tn-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .tn-labels span { position: absolute; left: 0; top: 0; padding: 6px 11px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); background: rgb(13 13 13 / .72); backdrop-filter: blur(6px); font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; transition: color .3s, border-color .3s, background .3s; will-change: transform, opacity; } .tn-labels span.core { padding: 9px 15px; font: 700 13px/1 var(--f-display); letter-spacing: .02em; text-transform: none; color: #fff; background: #FF0A7A; border-color: #FF0A7A; box-shadow: 0 0 40px rgb(255 10 122 / .6); } .tn-labels span.hot { color: #fff; border-color: #FF0A7A; background: rgb(255 10 122 / .22); } .tn-copy { position: relative; z-index: 2; padding-top: calc(var(--hd) + 40px); padding-bottom: 80px; pointer-events: none; } .tn-copy > * { pointer-events: auto; max-width: 36rem; } .tn-h1 { font: 900 clamp(2.8rem, 5.2vw, 5.6rem)/.92 var(--f-display); letter-spacing: -0.045em; max-width: 11ch; } .tn-h1 .pk { display: block; } .tn-lead { margin-top: 26px; max-width: 32rem !important; } .tn-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; } .tn-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF0A7A; box-shadow: 0 0 0 0 rgb(255 10 122 / .6); animation: tnPing 1.8s infinite; } @keyframes tnPing { 70% { box-shadow: 0 0 0 10px rgb(255 10 122 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 10 122 / 0); } } .tn-chips { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .tn-chips button { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: background .25s, border-color .25s; } .tn-chips button:hover, .tn-chips button:focus-visible, .tn-chips button.on { background: #FF0A7A; border-color: #FF0A7A; } .tn-hint { position: absolute; right: var(--pad); bottom: 28px; z-index: 2; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .no-net .tn-hint, .no-net .tn-labels { display: none; } .no-net .tn-hero::after { background: linear-gradient(0deg, var(--ink-0) 0%, transparent 30%); } /* ---------- practices on paper ---------- */ .tn-prac { background: #F5F5F5; color: #0d0d0d; padding-block: clamp(90px, 13vh, 150px); } .tn-prac .eyebrow { color: #686B6B; } .tn-prac .cs-h2 { color: #0d0d0d; } .tn-prac .cs-body { color: #4a4b4c; margin-top: 18px; } .tn-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px; border-bottom: 1px solid #d6d6d6; } .tn-tabs button { position: relative; text-align: left; padding: 18px 16px 20px 0; background: none; border: 0; cursor: pointer; font: 700 clamp(.95rem, 1.4vw, 1.2rem)/1.2 var(--f-display); color: #838383; transition: color .3s; } .tn-tabs button b { display: block; margin-bottom: 8px; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: #E6007E; } .tn-tabs button::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -1px; height: 3px; background: #E6007E; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.16, 1, .3, 1); } .tn-tabs button[aria-selected="true"] { color: #0d0d0d; } .tn-tabs button[aria-selected="true"]::after { transform: none; } .tn-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 48px; animation: tnIn .6s cubic-bezier(.16, 1, .3, 1); } .tn-panel[hidden] { display: none; } @keyframes tnIn { from { opacity: 0; transform: translateY(18px); } } .tn-pcopy h3 { font: 800 clamp(1.7rem, 3vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -0.03em; } .tn-pcopy p { margin-top: 16px; color: #4a4b4c; line-height: 1.7; max-width: 52ch; } .tn-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; } .tn-list li { display: flex; gap: 12px; align-items: center; font-weight: 600; } .tn-list li::before { content: ""; width: 8px; height: 8px; background: #E6007E; flex: none; } .tn-demo { position: relative; background: #0d0d0d; color: #fff; border-radius: 18px; padding: 18px; min-height: 380px; box-shadow: 0 40px 80px -30px rgb(13 13 13 / .45); overflow: hidden; } .tn-dhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / .1); font: 700 .9rem/1 var(--f-display); } .tn-dhead em { font: 400 9px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-style: normal; } /* CRM kanban */ .tn-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; min-height: 270px; } .tn-cols > div { background: #161616; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .tn-cols h4 { font: 400 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 2px 2px 6px; } .tn-card { background: #222; border: 1px solid rgb(255 255 255 / .08); border-radius: 8px; padding: 8px; font-size: .74rem; line-height: 1.3; animation: tnCard .5s cubic-bezier(.16, 1, .3, 1); } .tn-card b { display: block; font: 700 .78rem/1.2 var(--f-display); } .tn-card span { color: var(--fg-3); font-size: .68rem; } .tn-card.won { border-color: #FF0A7A; background: rgb(255 10 122 / .16); } @keyframes tnCard { from { opacity: 0; transform: translateY(-10px) scale(.94); } } .tn-dfoot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1); font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .tn-dfoot b { font: 800 1.3rem/1 var(--f-display); letter-spacing: -0.02em; color: #FF0A7A; text-transform: none; } /* automation flow */ .tn-flow ol { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; position: relative; } .tn-flow ol::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: rgb(255 255 255 / .1); } .tn-flow li { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 0; border-radius: 10px; transition: background .4s; } .tn-flow li i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1c1c1c; border: 1px solid rgb(255 255 255 / .14); font-style: normal; position: relative; z-index: 1; transition: background .4s, border-color .4s, box-shadow .4s; } .tn-flow li b { font: 600 .9rem/1.3 var(--f-body); } .tn-flow li small { font: 400 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .tn-flow li.on { background: rgb(255 10 122 / .1); } .tn-flow li.on i { background: #FF0A7A; border-color: #FF0A7A; box-shadow: 0 0 24px rgb(255 10 122 / .7); } .tn-log { margin-top: 12px; height: 52px; overflow: hidden; font: 400 11px/1.6 var(--f-mono); color: var(--fg-3); } .tn-log p { margin: 0; animation: tnCard .4s ease; } .tn-log p b { color: #FF0A7A; font-weight: 400; } /* Claude chat */ .tn-msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; min-height: 300px; } .tn-msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.5; animation: tnCard .4s ease; } .tn-msg.u { align-self: flex-end; background: #FF0A7A; border-bottom-right-radius: 4px; } .tn-msg.a { align-self: flex-start; background: #1c1c1c; border: 1px solid rgb(255 255 255 / .08); border-bottom-left-radius: 4px; } .tn-src { display: flex; flex-wrap: wrap; gap: 6px; } .tn-src span { font: 400 9px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); color: var(--fg-2); animation: tnCard .4s ease; } .tn-src span::before { content: "✓ "; color: #FF0A7A; } .tn-caret::after { content: "▍"; color: #FF0A7A; animation: tnBlink 1s steps(1) infinite; } @keyframes tnBlink { 50% { opacity: 0; } } /* training tracks */ .tn-train ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; } .tn-train li { display: grid; grid-template-columns: 1fr; gap: 4px; } .tn-train li b { font: 700 .95rem/1.2 var(--f-display); } .tn-train li span { font-size: .78rem; color: var(--fg-3); } .tn-train li i { display: block; height: 6px; margin-top: 4px; border-radius: 6px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; } .tn-train li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #a0004d, #FF0A7A); border-radius: 6px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .tn-train.go li i::after { transform: none; } .tn-train.go li:nth-child(2) i::after { transition-delay: .12s; } .tn-train.go li:nth-child(3) i::after { transition-delay: .24s; } .tn-train.go li:nth-child(4) i::after { transition-delay: .36s; } .tn-train.go li:nth-child(5) i::after { transition-delay: .48s; } /* data dashboard */ .tn-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .tn-kpis div { background: #161616; border-radius: 10px; padding: 10px 12px; } .tn-kpis small { display: block; font: 400 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .tn-kpis b { display: block; margin-top: 8px; font: 800 clamp(1rem, 1.6vw, 1.35rem)/1 var(--f-display); letter-spacing: -0.02em; } .tn-kpis span { font: 400 10px/1 var(--f-mono); } .tn-kpis .up { color: #4ade80; } .tn-kpis .dn { color: #FF0A7A; } .tn-bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin-top: 12px; padding: 10px; background: #161616; border-radius: 10px; } .tn-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #a0004d, #FF0A7A); height: 4%; transition: height .9s cubic-bezier(.16, 1, .3, 1); } .tn-bars i:nth-child(odd) { opacity: .75; } .tn-chan { margin-top: 12px; display: grid; gap: 7px; } .tn-chan p { display: grid; grid-template-columns: 70px 1fr 38px; gap: 10px; align-items: center; margin: 0; font-size: .74rem; color: var(--fg-2); } .tn-chan i { display: block; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; } .tn-chan i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #FF0A7A; border-radius: 6px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .tn-dash.go .tn-chan i::after { transform: none; } .tn-chan b { font: 400 10px/1 var(--f-mono); text-align: right; color: #fff; } .tn-alert { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(255 10 122 / .35); background: rgb(255 10 122 / .08); font-size: .78rem; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .6s .9s, transform .6s .9s; } .tn-dash.go .tn-alert { opacity: 1; transform: none; } /* ---------- Claude Code ---------- */ .cc { position: relative; padding-block: clamp(90px, 13vh, 150px); background: radial-gradient(55% 70% at 75% 55%, rgb(217 119 87 / .22) 0%, transparent 65%), #120d0c; overflow: hidden; } .cc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .cc .cs-body { margin-top: 18px; } .cc-list { color: var(--fg); grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: .92rem; } .cc-list li::before { background: #D97757; } .cc-term { margin: 26px 0 26px; height: 236px; padding: 16px 18px; border-radius: 14px; background: #0a0a0a; border: 1px solid rgb(217 119 87 / .35); font: 400 12.5px/1.75 var(--f-mono); color: #e8e2dd; overflow: hidden; box-shadow: 0 30px 70px -40px rgb(217 119 87 / .6); } .cc-term p { margin: 0; white-space: pre-wrap; } .cc-term b { color: #D97757; font-weight: 400; } .cc-term p.hi { color: #D97757; } .cc-term p.ok { color: #9a9490; } .cc-stage { position: relative; height: clamp(420px, 62vh, 620px); cursor: pointer; } .cc-stage canvas { display: block; width: 100%; height: 100%; } .cc-flat { width: 70%; margin: 18% auto 0; display: block; image-rendering: pixelated; } .cc-bubble { position: absolute; left: 0; top: 0; padding: 10px 14px; border-radius: 14px; background: #fff; color: #141414; font: 700 .92rem/1.2 var(--f-display); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2; } .cc-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; } .cc-bubble.on { opacity: 1; } .cc-hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); } .cc-note { margin-top: 30px; font: 400 10px/1.5 var(--f-mono); letter-spacing: .08em; color: var(--fg-3); } /* ---------- Ask T.O.N.I ---------- */ .tn-ask { padding-block: clamp(90px, 13vh, 150px); background: radial-gradient(60% 80% at 80% 50%, oklch(0.18 0.06 358) 0%, var(--ink-0) 70%); } .tn-ask-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .tn-ask .cs-body { margin-top: 18px; } .tn-form { margin-top: 28px; display: grid; gap: 14px; justify-items: start; } .tn-form textarea { width: 100%; resize: vertical; padding: 16px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .2); background: #141414; color: #fff; font: 400 1rem/1.5 var(--f-body); } .tn-form textarea:focus { outline: 2px solid #FF0A7A; outline-offset: 2px; } .tn-try { display: flex; flex-wrap: wrap; gap: 8px; } .tn-try button { font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); background: none; border: 1px dashed rgb(255 255 255 / .25); border-radius: 999px; padding: 9px 12px; cursor: pointer; } .tn-try button:hover { color: #fff; border-color: #FF0A7A; } .tn-term { background: #0b0b0b; border: 1px solid rgb(255 255 255 / .12); border-radius: 18px; padding: 18px; min-height: 420px; box-shadow: 0 0 0 1px rgb(255 10 122 / .08), 0 40px 90px -40px rgb(255 10 122 / .45); } .tn-out { margin-top: 14px; font: 400 .9rem/1.6 var(--f-body); display: grid; gap: 10px; } .tn-idle { color: var(--fg-3); font-family: var(--f-mono); font-size: .8rem; } .tn-line { font: 400 .78rem/1.6 var(--f-mono); color: var(--fg-3); animation: tnCard .35s ease; } .tn-line b { color: #FF0A7A; font-weight: 400; } .tn-rec { border: 1px solid rgb(255 255 255 / .1); border-left: 3px solid #FF0A7A; border-radius: 10px; padding: 14px 16px; background: #141414; animation: tnCard .45s ease; } .tn-rec small { font: 400 9px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FF0A7A; } .tn-rec h4 { font: 800 1.15rem/1.2 var(--f-display); margin: 6px 0 6px; } .tn-rec p { color: var(--fg-2); font-size: .86rem; } .tn-out .btn { justify-self: start; margin-top: 6px; animation: tnCard .45s ease; } /* ---------- transformation + software ---------- */ .tn-build { padding-block: clamp(90px, 13vh, 150px); border-top: 1px solid var(--rule-soft); } .tn-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; } .tn-bcard { position: relative; min-height: 460px; border-radius: 20px; overflow: hidden; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; } .tn-bcard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .tn-bcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(13 13 13 / .96) 0%, rgb(13 13 13 / .55) 55%, rgb(13 13 13 / .1) 100%); } .tn-bcard:hover::before { transform: scale(1.06); } .tn-bcard h3 { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display); letter-spacing: -0.03em; } .tn-bcard p { margin-top: 12px; color: var(--fg-2); max-width: 46ch; line-height: 1.6; } .tn-bcard ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .tn-bcard li { font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); background: rgb(13 13 13 / .5); } /* ---------- engagement track ---------- */ .tn-steps { padding-block: clamp(90px, 13vh, 150px); background: #F5F5F5; color: #0d0d0d; } .tn-steps .eyebrow { color: #686B6B; } .tn-steps .cs-h2 { color: #0d0d0d; } .tn-track { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .tn-track::before, .tn-track::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: #d6d6d6; } .tn-track::after { background: #E6007E; transform: scaleX(var(--k, 0)); transform-origin: 0 50%; } .tn-track li { position: relative; padding-top: 48px; } .tn-track li b { position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F5F5F5; border: 2px solid #d6d6d6; font: 400 11px/1 var(--f-mono); color: #838383; z-index: 1; transition: background .4s, border-color .4s, color .4s; } .tn-track li.on b { background: #E6007E; border-color: #E6007E; color: #fff; } .tn-track h3 { font: 800 1.35rem/1.15 var(--f-display); letter-spacing: -0.02em; } .tn-track p { margin-top: 10px; color: #4a4b4c; line-height: 1.6; font-size: .95rem; } /* ---------- sectors + FAQ ---------- */ .tn-sectors { padding-block: 56px; border-bottom: 1px solid var(--rule-soft); } .tn-sectors .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .tn-sec-h { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); } .tn-sec-links { display: flex; flex-wrap: wrap; gap: 10px; } .tn-sec-links a { padding: 14px 20px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; text-decoration: none; color: var(--fg); font: 700 1rem/1 var(--f-display); transition: background .25s, border-color .25s; } .tn-sec-links a:hover { background: #FF0A7A; border-color: #FF0A7A; } .sv-faq { padding-block: clamp(80px, 12vh, 140px); } .sv-faq .faq { margin-top: 32px; } .sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; } .sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; } .sv-faq summary::after { content: "+"; color: #FF0A7A; font-size: 1.4em; line-height: 1; transition: transform .3s; } .sv-faq details[open] summary::after { transform: rotate(45deg); } .sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; } @media (max-width: 899px) { .tn-hero { align-items: end; } .tn-gl { inset: 0 0 35% 0; opacity: .5; } .tn-labels { display: none; } .tn-tabs { grid-template-columns: repeat(2, 1fr); } .tn-tabs button:last-child { grid-column: 1 / -1; } .tn-panel, .tn-ask-grid, .tn-bgrid, .cc-grid { grid-template-columns: 1fr; } .cc-list { grid-template-columns: 1fr; } .cc-stage { height: 360px; order: -1; } .tn-track { grid-template-columns: 1fr; gap: 28px; } .tn-track::before, .tn-track::after { left: 18px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .tn-track::after { transform: scaleY(var(--k, 0)); transform-origin: 50% 0; } .tn-track li { padding: 0 0 0 58px; } .tn-bcard { min-height: 380px; } .tn-hint { display: none; } .tn-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .tn-panel, .tn-card, .tn-msg, .tn-line, .tn-rec { animation: none; } .tn-live { animation: none; } } /* the hero is a grid: make its content box span the full width so the copy starts at the page margin, not centred */ .pm-hero > .wrap, .ex-hero > .wrap, .tn-hero > .wrap { width: 100%; box-sizing: border-box; } /* ---------- polish pass 24 Oct: defects, phone, craft (additive) ---------- */ /* tabs and steps carry no numbers: tabs keep the magenta underline; steps keep the dot, which fills with one square pixel */ .tn-tabs button { padding-top: 22px; min-height: 64px; } .tn-tabs button:hover { color: #0d0d0d; } .tn-tabs button:focus-visible { outline-offset: -2px; } .tn-track li b::after { content: ""; width: 8px; height: 8px; background: #d6d6d6; transition: background-color .4s cubic-bezier(.16, 1, .3, 1); } .tn-track li.on b::after { background: #fff; } .crumb a { padding-block: 14px; margin-block: -14px; } /* buttons rendered as