/* ========================================================= ThoughtSpot case study — "blueprint" edition Extends case-study.css (ink/paper/hard-shadow folio system). New layer: technical-diagram language — graph-paper panels · dashed wires + packets · iso plates · mono leader labels · ONE electric blue (+ rare purple). Org identity (hero + merge demo only): A Northwind = blue · B Bharat = coral · C EuroMart = mint ========================================================= */ :root { --org-a: #83d7ff; --org-b: #ffb37a; --org-c: #8ce0a8; --bp: #2947ff; --bp-deep: #1e37d1; --bp-lite: #5d76ff; --bp-soft: #dfe7ff; --bp-purple: #7c5cff; --bp-purple-soft: #ece5ff; --bp-dash: rgb(16 20 23 / 0.38); --ease-spring: cubic-bezier(0.34, 1.42, 0.5, 1); --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --ts-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --ts-display: "MD Nichrome Test", "Arial Narrow", Impact, sans-serif; } /* the shared shell makes the scroll container (overflow auto), which breaks viewport position:sticky for the scrub scenes. clip keeps horizontal clipping WITHOUT creating a scroll container. */ body.case-body { overflow: clip visible; } .ts-nowrap { white-space: nowrap; } /* ========================================================= BEATS — one idea per viewport ========================================================= */ .ts-beat { margin: clamp(84px, 18vh, 200px) 0; } .ts-beat.slim { margin: clamp(40px, 8vh, 90px) 0; } #design, #impact { margin-top: clamp(90px, 18vh, 200px); } .ts-beat > .cs-label { margin-bottom: clamp(14px, 2vh, 22px); } .ts-beat > *:first-child { margin-top: clamp(4px, 1vh, 10px); } .ts-beat > .cs-statement + .cs-para { margin-top: clamp(20px, 3.5vh, 40px); } .ts-beat > .cs-para + .bp-mergeidea, .ts-beat > .cs-para + .bp-addr { margin-top: clamp(20px, 3.5vh, 40px); } /* ========================================================= BLUEPRINT PRIMITIVES ========================================================= */ /* graph-paper panel */ .bp-panel { position: relative; padding: clamp(20px, 2.8vw, 36px); border: 3px solid var(--ink); border-radius: clamp(16px, 2vw, 26px); background: linear-gradient(rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 100%, #fdfcf2; box-shadow: 7px 7px 0 var(--ink); } /* figure caption, corner-bracket style */ .bp-fig { display: block; margin-bottom: clamp(16px, 2.4vh, 26px); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; letter-spacing: 0.09em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-cap { display: block; margin-top: clamp(14px, 2vh, 20px); font-family: var(--ts-mono); font-size: 13px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(16 20 23 / 0.62); } .bp-cap.center { text-align: center; } /* mono leader label (+ dashed stub) */ .bp-leader { display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: lowercase; color: rgb(16 20 23 / 0.68); text-align: center; } .bp-leader i { width: 0; height: 16px; border-left: 2px dashed var(--bp-dash); } .bp-leader.bottom { flex-direction: column-reverse; } /* data packet */ .pkt { position: absolute; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 3.5px; background: var(--bp); opacity: 0; } /* iso cube (SVG) */ .bp-cube { display: block; width: clamp(100px, 10vw, 136px); overflow: visible; } .bp-cube.sm { width: clamp(78px, 8vw, 106px); } .bp-cube polygon { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .bp-cube .c-top { fill: var(--bp); } .bp-cube .c-left { fill: var(--bp-deep); } .bp-cube .c-right { fill: var(--bp-lite); } .bp-cube .c-glyph { fill: #fff; font-family: var(--ts-mono); font-size: 30px; font-weight: 900; } /* red count badge (the pins' notification trick) */ .bp-badge { position: absolute; top: -10px; right: -10px; z-index: 2; padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--red); color: #fff; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; letter-spacing: 0.03em; text-transform: lowercase; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); } /* small h3 head used inside scrub scenes */ .bp-h3 { margin: 0; font-family: var(--ts-display); font-size: clamp(26px, 3.4vw, 50px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-sub { max-width: 52ch; margin-top: 10px !important; } .slimhead { margin-bottom: clamp(18px, 3vh, 34px); } /* ========================================================= HERO · the system in one picture ========================================================= */ .bp-hero { margin-top: clamp(28px, 4.5vh, 52px); width: min(100%, 1320px); } .bp-hero-flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 0; padding: clamp(6px, 1vw, 14px) 0 clamp(30px, 3vw, 44px); } .bp-hero-src, .bp-hero-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; } .bp-hero-out { display: flex; flex-direction: column; gap: 12px; } .bp-hero-out > .bp-leader { margin-bottom: 2px; } /* mini liveboard cards */ .bp-mini { display: flex; flex-direction: column; gap: 7px; width: clamp(150px, 15vw, 196px); padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: 13px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-mini-src { transform: rotate(-1.4deg); } .bp-mini-tag { width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: lowercase; } .bp-mini-org[data-org="a"] .bp-mini-tag { background: var(--org-a); } .bp-mini-org[data-org="b"] .bp-mini-tag { background: var(--org-b); } .bp-mini-org[data-org="c"] .bp-mini-tag { background: var(--org-c); } .bp-mini-title { font-family: var(--ts-display); font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-mini-rows { display: flex; flex-direction: column; gap: 5px; } .bp-mini-rows i { height: 7px; border-radius: 4px; background: rgb(16 20 23 / 0.14); } .bp-mini-rows i.b { background: var(--bp); width: 62%; } .bp-mini-rows i:nth-child(2) { width: 84%; } .bp-mini-kpi { font-family: var(--ts-mono); font-size: clamp(12px, 1.2vw, 15px); font-weight: 900; } /* wires */ .bp-wire { position: relative; height: 0; min-width: clamp(40px, 5vw, 90px); border-top: 2.5px dashed var(--bp-dash); margin: 0 clamp(8px, 1vw, 16px); } .bp-wire .pkt { top: 0; translate: 0 -50%; } .r.in .bp-wire .pkt, .in .bp-jwire .pkt { animation: bp-run 2.8s ease-in-out infinite; } .in .bp-jwire.jw2 .pkt { animation-delay: 0.5s; } .in .bp-jwire.jw3 .pkt { animation-delay: 1s; } @keyframes bp-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 96%, 100% { left: calc(100% - 12px); opacity: 0; } } /* junction: one vertical line, three branch wires */ .bp-junction { position: relative; align-self: stretch; margin-left: clamp(8px, 1vw, 16px); } .bp-junction::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; border-left: 2.5px dashed var(--bp-dash); } .bp-jwire { position: absolute; left: 0; right: -2px; border-top: 2.5px dashed var(--bp-dash); } .bp-jwire.jw1 { top: 14%; } .bp-jwire.jw2 { top: 50%; } .bp-jwire.jw3 { top: 86%; } .bp-jwire .pkt { top: 0; translate: 0 -50%; } .bp-hero-core .cs-anno { z-index: 3; } /* ========================================================= HERO STATS ========================================================= */ .ts-herostats { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); margin-top: clamp(20px, 3vh, 32px); } .ts-stat-chip { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-0.6deg); } .ts-stat-chip:nth-child(2) { transform: rotate(0.8deg); background: var(--bp-soft); } .ts-stat-chip:nth-child(3) { transform: rotate(-0.4deg); } .ts-stat-chip b { font-family: var(--ts-display); font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; text-transform: uppercase; line-height: 1; } .ts-stat-chip small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: rgb(16 20 23 / 0.6); text-transform: lowercase; } /* ========================================================= §01 · "just ask" demo ========================================================= */ .ts-ask { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); padding: clamp(20px, 2.8vw, 34px); border: 3px solid var(--ink); border-radius: clamp(16px, 2vw, 26px); background: linear-gradient(rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 100%, #fdfcf2; box-shadow: 7px 7px 0 var(--ink); } .ts-askbar { display: flex; align-items: center; gap: 12px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .ts-askbar-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: var(--bp-soft); font-size: 14px; } .ts-ask.is-thinking .ts-askbar-ic { animation: ts-ic-spin 900ms var(--ease-play) infinite; } @keyframes ts-ic-spin { to { transform: rotate(360deg); } } .ts-askbar-text { font-family: var(--ts-display); font-size: clamp(17px, 1.9vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1.05; min-height: 1.05em; } .ts-askbar-caret { width: 3px; height: 1.1em; background: var(--bp); animation: ts-caret 1s steps(1) infinite; } @keyframes ts-caret { 50% { opacity: 0; } } .ts-ask-chips { display: flex; flex-wrap: wrap; gap: 10px; } .ts-ask-chip { padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12px; font-weight: 800; color: var(--ink); cursor: pointer; transition: transform 300ms var(--ease-play), box-shadow 300ms var(--ease-play), background 200ms ease, color 200ms ease; } .ts-ask-chip:hover { transform: translateY(-2px) rotate(-1deg); background: var(--bp-soft); } .ts-ask-chip.is-active { background: var(--bp); color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } /* flow strip */ .ts-ask-flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: clamp(8px, 1.2vw, 16px); padding: clamp(12px, 1.6vw, 18px); border: 2px dashed var(--bp-dash); border-radius: 14px; } .ts-ask-node { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fffdf5; text-align: center; transition: background 240ms ease, color 240ms ease, transform 320ms var(--ease-play); } .ts-ask-node b { font-family: var(--ts-display); font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; text-transform: uppercase; line-height: 1; } .ts-ask-node small { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); white-space: nowrap; } .ts-ask.is-thinking .n1 { background: var(--bp-soft); transform: scale(1.04); } .ts-ask.is-thinking .n2 { animation: ts-node-flash 1.2s ease 200ms; } .ts-ask.is-thinking .n3 { animation: ts-node-flash 1.2s ease 500ms; } @keyframes ts-node-flash { 0%, 100% { background: #fffdf5; } 35% { background: var(--bp-soft); transform: scale(1.05); } } .ts-ask-wire { position: relative; height: 0; border-top: 2.5px dashed var(--bp-dash); } .ts-ask-wire i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; translate: 0 -50%; border: 2px solid var(--ink); border-radius: 3.5px; background: var(--bp); opacity: 0; } .ts-ask.is-thinking .w1 i { animation: ts-wire-run 700ms var(--ease-soft) 60ms; } .ts-ask.is-thinking .w2 i { animation: ts-wire-run 700ms var(--ease-soft) 420ms; } @keyframes ts-wire-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } } /* answer card */ .ts-ask-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 2vw, 22px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.5deg); } .ts-ask-q { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .ts-ask-kpi { font-family: var(--ts-display); font-size: clamp(30px, 3.6vw, 54px); font-weight: 700; text-transform: uppercase; line-height: 1; } .ts-ask-chart { display: flex; align-items: flex-end; gap: 6px; height: clamp(64px, 8vw, 96px); padding: 8px; border: 2px solid var(--ink); border-radius: 12px; background: #fdfcf2; } .ts-ask-chart i { flex: 1; height: var(--h, 20%); border: 2px solid var(--ink); border-bottom-width: 0; border-radius: 4px 4px 0 0; background: var(--bp-soft); transition: height 560ms var(--ease-play), background 240ms ease; } .ts-ask-chart i.hot { background: var(--bp-purple); } .ts-ask-note { font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.68); } .ts-ask-card.is-swapping .ts-ask-kpi, .ts-ask-card.is-swapping .ts-ask-note, .ts-ask-card.is-swapping .ts-ask-q { animation: ts-swap-in 460ms var(--ease-play) both; } .ts-ask-cap { font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } /* ========================================================= §01 · legend (glossary chips) ========================================================= */ .ts-gloss { margin: 0; } .ts-gloss-hint { display: block; margin-bottom: 12px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; letter-spacing: 0.09em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .ts-gloss-row { display: flex; flex-wrap: wrap; gap: 10px; } .ts-gloss-chip { position: relative; padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-display); font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); cursor: pointer; transition: transform 300ms var(--ease-play), box-shadow 300ms var(--ease-play), background 200ms ease; } .ts-gloss-chip:hover, .ts-gloss-chip:focus-visible, .ts-gloss-chip.is-open { background: var(--bp-soft); transform: translate(1px, 1px) rotate(-1deg); box-shadow: 2px 2px 0 var(--ink); } .ts-gloss-tip { position: absolute; left: 0; top: calc(100% + 10px); z-index: 8; width: max(230px, 100%); padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--paper); font-family: "General Sans", Inter, Helvetica, Arial, sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; text-align: left; opacity: 0; transform: translateY(-6px) rotate(-1deg); pointer-events: none; transition: opacity 220ms ease, transform 300ms var(--ease-play); } .ts-gloss-chip:hover .ts-gloss-tip, .ts-gloss-chip:focus-visible .ts-gloss-tip, .ts-gloss-chip.is-open .ts-gloss-tip { opacity: 1; transform: none; } /* ========================================================= §01 · SCRUB SCENE — the embedded stack (fig_01) ========================================================= */ .bp-embed { position: relative; height: 250vh; } .bp-embed-pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(60px, 8vh, 90px) 0 clamp(20px, 4vh, 40px); } .bp-embed-stage { position: relative; display: grid; grid-template-columns: minmax(140px, 180px) 1fr minmax(150px, 230px); align-items: center; gap: clamp(10px, 2vw, 26px); min-height: clamp(380px, 52vh, 560px); } /* left rail — layer index */ .bp-rail-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .bp-rail-list li { position: relative; padding-left: 18px; font-family: var(--ts-mono); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: lowercase; color: rgb(16 20 23 / 0.38); transition: color 300ms ease; } .bp-rail-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; translate: 0 -50%; border: 2px solid currentColor; border-radius: 50%; transition: background 300ms ease; } .bp-embed.s1 .bp-rail-list li[data-s="1"], .bp-embed.s2 .bp-rail-list li[data-s="2"], .bp-embed.s3 .bp-rail-list li[data-s="3"] { color: var(--bp); } .bp-embed.s1 .bp-rail-list li[data-s="1"]::before, .bp-embed.s2 .bp-rail-list li[data-s="2"]::before, .bp-embed.s3 .bp-rail-list li[data-s="3"]::before { background: var(--bp); } /* the iso stack */ .bp-iso-stage { position: relative; height: 100%; min-height: inherit; } .bp-plate { position: absolute; left: 50%; top: 50%; width: clamp(240px, 26vw, 330px); height: clamp(170px, 18vw, 230px); margin: calc(clamp(170px, 18vw, 230px) / -2) 0 0 calc(clamp(240px, 26vw, 330px) / -2); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 10px 10px 0 rgb(16 20 23 / 0.08); transform: translate3d(0, var(--ty, 0px), 0) rotateX(56deg) rotateZ(-42deg); } .bp-plate.p-app { --ty: calc(-30px - var(--p, 0) * 105px); z-index: 3; } .bp-plate.p-ts { --ty: 0px; z-index: 2; background: var(--bp); } .bp-plate.p-db { --ty: calc(30px + var(--p, 0) * 105px); z-index: 1; background: var(--bp-soft); } .bp-plate-face { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 10px; } .bp-plate-dot { display: flex; gap: 5px; } .bp-plate-dot i { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fdfcf2; } .bp-ui-row { height: 10px; border-radius: 6px; background: rgb(16 20 23 / 0.16); } .bp-ui-row.lt { background: rgb(16 20 23 / 0.2); } .p-db .bp-ui-row.lt { background: rgb(41 71 255 / 0.3); } .bp-ui-row.w60 { width: 60%; } .bp-ui-row.w70 { width: 70%; } .bp-ui-row.w50 { width: 50%; } .bp-ui-row.w45 { width: 45%; } .bp-ui-row.w40 { width: 40%; } .p-ts .bp-ui-row { background: rgb(255 253 245 / 0.55); } .bp-ui-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bp-ui-grid i { border: 2px dashed rgb(16 20 23 / 0.3); border-radius: 8px; } .bp-ui-chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 8px; border: 2px solid rgb(255 253 245 / 0.8); border-radius: 10px; } .bp-ui-chart i { flex: 1; height: var(--h, 40%); border-radius: 3px 3px 0 0; background: #fffdf5; } /* side leaders */ .bp-leader.side { position: absolute; right: 0; flex-direction: row; gap: 10px; max-width: clamp(150px, 18vw, 230px); text-align: left; opacity: 0; translate: 10px 0; transition: opacity 400ms ease, translate 500ms var(--ease-play); } .bp-leader.side i { flex: 0 0 auto; width: 30px; height: 0; margin-top: 0.55em; border-left: 0; border-top: 2px dashed var(--bp-dash); order: -1; } .bp-leader.side.l1 { top: 6%; } .bp-leader.side.l2 { top: 47%; } .bp-leader.side.l3 { bottom: 8%; } .bp-embed.s1 .bp-leader.l1, .bp-embed.s2 .bp-leader.l2, .bp-embed.s3 .bp-leader.l3 { opacity: 1; translate: 0 0; } .bp-embed .bp-cap.center { margin-top: clamp(10px, 2vh, 22px); } /* ========================================================= §01 · split — one vs hundreds ========================================================= */ .ts-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; margin: clamp(14px, 2.4vh, 24px) 0 clamp(34px, 5vh, 60px); } .ts-split-side { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2.2vw, 26px); border: 2.5px solid var(--ink); border-radius: clamp(14px, 1.8vw, 22px); background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .ts-split-side.tse { transform: rotate(0.4deg); padding-bottom: clamp(34px, 4vw, 44px); } .ts-split-side.tsa { background: #f2f5ff; transform: rotate(-0.5deg); } .ts-split-tag { width: fit-content; padding: 4px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: lowercase; } .ts-split-side h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(20px, 2vw, 30px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .ts-split-side p { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: rgb(16 20 23 / 0.78); } .ts-split-viz { display: flex; align-items: center; gap: 14px; min-height: clamp(90px, 10vw, 130px); padding: 12px; border: 2px dashed var(--bp-dash); border-radius: 12px; } .ts-split-side p em { font-style: normal; background: linear-gradient(transparent 62%, var(--bp-soft) 62%); } .ts-hub { flex: 0 0 auto; display: grid; place-items: center; width: clamp(44px, 4.6vw, 58px); height: clamp(44px, 4.6vw, 58px); border: 2.5px solid var(--ink); border-radius: 50%; background: var(--bp); color: #fff; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-display); font-size: 13px; font-weight: 700; line-height: 1.05; text-align: center; text-transform: uppercase; padding: 4px; } .ts-dots { display: grid; grid-template-columns: repeat(3, 14px); gap: 10px; } .ts-dots i { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; background: #fffdf5; } .ts-tiles { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; } .ts-tiles i { width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 3.5px; background: #fffdf5; } .ts-tiles i:nth-child(3n) { background: var(--bp-soft); } .ts-tiles i:nth-child(7n) { background: var(--bp); } .ts-tiles i:nth-child(11n) { background: var(--bp-purple-soft); } /* named org tiles */ .ts-tiles.named s { padding: 5px 8px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-decoration: none; text-transform: lowercase; white-space: nowrap; } .ts-tiles.named s:nth-child(2n) { background: var(--bp-soft); } .ts-tiles.named s:nth-child(5n) { background: var(--bp); color: #fff; } .ts-split.in .ts-tiles.named s { animation: ts-tile-in 420ms var(--ease-play) both; animation-delay: calc(var(--ti, 0) * 22ms + 120ms); } .ts-split.in .ts-tiles i { animation: ts-tile-in 420ms var(--ease-play) both; animation-delay: calc(var(--ti, 0) * 22ms + 200ms); } @keyframes ts-tile-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } } .ts-tiles-more { align-self: center; margin-left: 4px; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; color: rgb(16 20 23 / 0.55); text-transform: lowercase; white-space: nowrap; } /* ========================================================= §02 · SCRUB SCENE — the chaos (no button) ========================================================= */ .bp-chaos { position: relative; height: 320vh; } .bp-chaos-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; } .bp-chaos-center { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; z-index: 1; width: min(92%, 640px); } .bp-chaos-kicker { font-family: var(--ts-mono); font-size: clamp(12.5px, 1.15vw, 14px); font-weight: 900; letter-spacing: 0.09em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-chaos-title { margin: 0; font-family: var(--ts-display); font-size: clamp(52px, 7.5vw, 118px); font-weight: 700; text-transform: uppercase; line-height: 0.94; } .bp-chaos-sub { max-width: 40ch; font-family: var(--ts-mono); font-size: clamp(12.5px, 1.2vw, 14.5px); font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(16 20 23 / 0.62); } /* orbiting artifacts */ .bp-art { position: absolute; z-index: 2; width: clamp(170px, 17vw, 230px); opacity: 0; transform: translate(var(--px, 0), var(--py, 0)) scale(0.5) rotate(var(--pr, 0deg)); transition: opacity 500ms ease, transform 750ms var(--ease-play); } .bp-art > *:not(.bp-badge):not(.bp-art-line) { animation: bp-float 6.5s ease-in-out infinite alternate; } .bp-art[data-s="2"] > *:not(.bp-badge):not(.bp-art-line) { animation-duration: 7.4s; animation-delay: -2s; } .bp-art[data-s="3"] > *:not(.bp-badge):not(.bp-art-line) { animation-duration: 5.8s; animation-delay: -1s; } .bp-art[data-s="4"] > *:not(.bp-badge):not(.bp-art-line) { animation-duration: 8s; animation-delay: -4s; } .bp-art[data-s="5"] > *:not(.bp-badge):not(.bp-art-line) { animation-duration: 6s; animation-delay: -3s; } .bp-art[data-s="6"] > *:not(.bp-badge):not(.bp-art-line) { animation-duration: 7s; animation-delay: -5s; } @keyframes bp-float { from { translate: 0 -5px; } to { translate: 0 6px; } } /* dashed pull-line toward centre */ .bp-art-line { position: absolute; top: 50%; width: clamp(40px, 6vw, 110px); border-top: 2px dashed rgb(16 20 23 / 0.28); transform: rotate(var(--la, 0deg)); } .a-menu { left: 4%; top: 11%; --px: 60px; --py: 60px; --pr: -6deg; } .a-menu .bp-art-line { left: 100%; --la: 24deg; } /* the tag labels the missing row, so it needs its own lane below the menu: reserve badge-height padding on the art box and hang the tag in it, and let it ride the same float as the menu so the two never drift into each other */ .a-menu { padding-bottom: 42px; } .a-menu .bp-badge { top: auto; right: 6px; bottom: 0; animation: bp-float 6.5s ease-in-out infinite alternate; } .a-ticket { right: 5%; top: 9%; --px: -60px; --py: 60px; --pr: 5deg; } .a-ticket .bp-art-line { right: 100%; --la: -22deg; } .a-term { left: 3%; bottom: 17%; --px: 70px; --py: -50px; --pr: 4deg; width: clamp(200px, 20vw, 260px); } .a-term .bp-art-line { left: 100%; --la: -20deg; } .a-csv { left: 4%; top: 47%; --px: 80px; --py: 0px; --pr: -4deg; width: auto; } .a-csv .bp-art-line { left: 100%; --la: 0deg; } .a-ping { right: 4%; bottom: 20%; --px: -70px; --py: -50px; --pr: -5deg; } .a-ping .bp-art-line { right: 100%; --la: 18deg; } .a-wait { right: 4%; top: 44%; --px: -80px; --py: 0px; --pr: 3deg; width: clamp(160px, 14vw, 200px); } .a-wait .bp-art-line { right: 100%; --la: 0deg; } /* mid-edge artifacts need real side margin; below 1240px they'd sit on the title */ @media (max-width: 1240px) and (min-width: 901px) { .a-csv, .a-wait { display: none; } } .bp-chaos.s1 .bp-art[data-s="1"], .bp-chaos.s2 .bp-art[data-s="2"], .bp-chaos.s3 .bp-art[data-s="3"], .bp-chaos.s4 .bp-art[data-s="4"], .bp-chaos.s5 .bp-art[data-s="5"], .bp-chaos.s6 .bp-art[data-s="6"] { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--pr, 0deg)); } /* stats row */ .bp-chaos.s6 .bp-art[data-s="6"] { opacity: 1; } /* artifact pieces */ .ts-menu { width: 100%; max-width: 210px; display: flex; flex-direction: column; padding: 8px; gap: 4px; border: 2px solid var(--ink); border-radius: 12px; background: #fffdf5; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.5); } .ts-menu-row { padding: 7px 11px; border-radius: 8px; background: rgb(16 20 23 / 0.05); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; } .ts-menu-row.missing { background: none; border: 2px dashed rgb(41 71 255 / 0.55); color: rgb(41 71 255 / 0.75); font-style: italic; } .bp-ticket { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fffdf5; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.5); } .bp-ticket b { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; color: var(--bp); } .bp-ticket span { font-size: 13px; font-weight: 600; line-height: 1.4; } .ts-term { width: 100%; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); overflow: hidden; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.35); } .ts-term-bar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1.5px solid rgb(255 248 223 / 0.25); } .ts-term-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 248 223 / 0.45); } .ts-term code { display: block; padding: 8px 10px; font-family: var(--ts-mono); font-size: 12px; font-weight: 700; line-height: 1.7; color: rgb(255 248 223 / 0.85); } .bp-file { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.5); white-space: nowrap; } .bp-file i { width: 16px; height: 20px; border: 2px solid var(--ink); border-radius: 3px 7px 3px 3px; background: var(--bp-soft); } .bp-file b { font-family: var(--ts-mono); font-size: 13px; font-weight: 900; } .bp-file span { font-family: var(--ts-mono); font-size: 12px; font-weight: 700; color: rgb(16 20 23 / 0.6); } .ts-chatmsg { width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px 12px 12px 3px; background: #fffdf5; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.5); } .ts-chatmsg-who { display: block; margin-bottom: 4px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; color: rgb(16 20 23 / 0.55); text-transform: lowercase; } .ts-chatmsg p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; } .ts-wait { width: 100%; } .ts-wait-bar { position: relative; width: 100%; height: 30px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; overflow: hidden; box-shadow: 4px 4px 0 rgb(16 20 23 / 0.5); } .ts-wait-bar i { position: absolute; inset: 0; width: 49%; background: repeating-linear-gradient(-45deg, var(--bp-soft) 0 8px, #eef1ff 8px 16px); border-right: 2px solid var(--ink); } .ts-wait-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; } /* ========================================================= §02 · relay — the one-lane pipe (fig_02) ========================================================= */ .ts-conc { margin: clamp(14px, 2.4vh, 24px) 0; } /* ========================================================= SRE ticket burden — every publish lands on one desk ========================================================= */ .bp-sre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 52px); padding: clamp(10px, 2vh, 26px) 0 clamp(6px, 1.4vh, 16px); } .bp-sre-cap { display: block; margin-bottom: 12px; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-sre-in { position: relative; } .bp-sre-tickets { position: relative; display: flex; flex-direction: column; gap: 9px; } .bp-tkt { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 2.5px solid var(--ink); border-radius: 11px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; transform: rotate(-0.6deg); } .bp-tkt:nth-child(2) { transform: rotate(0.5deg); } .bp-tkt:nth-child(3) { transform: rotate(-0.3deg); } .bp-tkt b { flex: 0 0 auto; padding: 3px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow, #ffd94a); font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em; } .bp-tkt.ghost { opacity: 0.5; transform: rotate(0.8deg) scale(0.97); } .bp-tkt.ghost2 { opacity: 0.25; transform: rotate(-0.9deg) scale(0.94); } .bp-sre-in .bp-badge { margin-top: 14px; position: static; display: inline-flex; } /* funnel wires */ .bp-sre-funnel { position: relative; display: flex; flex-direction: column; gap: 16px; width: clamp(40px, 6vw, 90px); } .bp-sre-wire { position: relative; height: 2.5px; background: none; border-top: 2.5px dashed var(--bp-dash); } .bp-sre-wire .pkt { top: 0; translate: 0 -50%; } .in .bp-sre .bp-sre-wire .pkt { animation: bp-run 2.4s ease-in-out infinite; } .in .bp-sre .bp-sre-wire.w2 .pkt { animation-delay: 0.5s; } .in .bp-sre .bp-sre-wire.w3 .pkt { animation-delay: 1s; } /* the overwhelmed team */ .bp-sre-team { display: flex; flex-direction: column; gap: 14px; } .bp-sre-desk { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 22px); border: 2.5px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--bp); } .bp-sre-desk b { font-family: var(--ts-display); font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-sre-desk small { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; line-height: 1.55; color: rgb(255 255 255 / 0.7); } .bp-avatars.solo.dark { display: flex; gap: 8px; } .bp-avatars.solo.dark i { width: 22px; height: 22px; border: 2px solid rgb(255 255 255 / 0.5); border-radius: 50%; background: none; opacity: 0.5; } .bp-avatars.solo.dark i.me { opacity: 1; border-color: var(--bp); background: var(--bp); } .bp-sre-toll { display: flex; flex-direction: column; gap: 7px; } .bp-sre-toll span { display: flex; align-items: baseline; gap: 9px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .bp-sre-toll span b { color: var(--red); font-family: var(--ts-display); font-size: 16px; font-weight: 700; } .bp-relay { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.6vw, 36px); padding: clamp(10px, 1.6vw, 20px) 0 clamp(38px, 4vw, 54px); } .bp-relay-src { position: relative; display: flex; align-items: center; } .bp-relay-srclab { display: block; padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); font-family: var(--ts-display); font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .bp-relay-wires { position: relative; width: clamp(26px, 3vw, 44px); align-self: stretch; } .bp-relay-wires .rw { position: absolute; left: 0; right: 0; border-top: 2.5px dashed var(--bp-dash); } .bp-relay-wires .rw1 { top: 22%; transform: rotate(14deg); } .bp-relay-wires .rw2 { top: 50%; } .bp-relay-wires .rw3 { top: 78%; transform: rotate(-14deg); } .bp-relay-mid { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(120px, 12vw, 160px); } .bp-relay-lane { position: absolute; left: 0; right: 0; top: 50%; border-top: 2.5px dashed var(--bp-dash); } .bp-relay-lane .pkt { top: 0; translate: 0 -50%; } .bp-relay-mid .bp-cube { position: relative; z-index: 2; } .bp-relay-mid > .bp-leader.bottom { position: absolute; top: calc(50% + clamp(44px, 4.6vw, 60px)); left: 50%; translate: -50% 0; white-space: nowrap; } .ts-conc.is-firing .bp-relay-lane .p1 { animation: bp-land 3s var(--ease-soft) infinite; } .ts-conc.is-firing .bp-relay-lane .p2 { animation: bp-bounce 3s var(--ease-soft) infinite; } .ts-conc.is-firing .bp-relay-lane .p3 { animation: bp-bounce 3s var(--ease-soft) infinite 0.14s; } @keyframes bp-land { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 55% { left: calc(100% - 12px); opacity: 1; } 68%, 100% { left: calc(100% - 12px); opacity: 0; } } @keyframes bp-bounce { 0% { left: 0; opacity: 0; rotate: 0deg; } 8% { opacity: 1; } 38% { left: 42%; opacity: 1; rotate: 0deg; } 54% { left: 22%; rotate: 28deg; opacity: 0.85; } 70%, 100% { left: 16%; rotate: 40deg; opacity: 0; } } .bp-relay-out { display: flex; flex-direction: column; gap: 8px; } .ts-conc-res { padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; white-space: nowrap; } .ts-conc-res.ok { background: var(--bp); color: #fff; } .ts-conc-res.bad { background: #fffdf5; color: var(--red); } /* ========================================================= §02 · scale wall (fig_03) ========================================================= */ .ts-scale { margin: clamp(14px, 2.4vh, 24px) 0; } /* two worlds of scale — internal UI vs embedded swarm */ .bp-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(12px, 2vw, 26px); margin: clamp(18px, 3vh, 34px) 0; } .bp-scale-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.2vw, 28px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .bp-scale-card.ok { transform: rotate(-0.4deg); } .bp-scale-card.wall { background: var(--bp-purple-soft); transform: rotate(0.4deg); overflow: hidden; } .bp-scale-tag { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-scale-h { margin: 0 0 4px; font-family: var(--ts-display); font-size: clamp(19px, 2vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1.04; } /* internal — orgs join into one shared warehouse */ .bp-cdw-shared { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; } .bp-cdw-orgs { display: flex; flex-direction: column; gap: 6px; } .bp-cdw-orgs span { padding: 5px 11px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; } .bp-cdw-join { flex: 0 0 auto; width: clamp(22px, 3vw, 44px); border-top: 2.5px dashed var(--bp-dash); } .bp-cdw-one { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--bp-soft); } .bp-cdw-one b { font-family: var(--ts-display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1; } .bp-cdw-one small { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } /* embedded — a distinct warehouse per client */ .bp-cdw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 6px; } .bp-cdw-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; } .bp-cdw-cell b { font-family: var(--ts-display); font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-cdw-cell span { font-family: var(--ts-mono); font-size: 10px; font-weight: 800; text-transform: lowercase; color: var(--bp-purple); } .bp-cdw-cell.ghost { border-style: dashed; background: none; } .bp-cdw-cell.ghost span { color: rgb(16 20 23 / 0.5); } .bp-scale-verdict { margin-top: auto; width: fit-content; padding: 5px 11px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; } .bp-scale-verdict.good { background: var(--bp-soft); } .bp-scale-verdict.bad { background: var(--ink); color: var(--paper); } .bp-scale-div { display: flex; align-items: center; justify-content: center; } .bp-scale-div span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0 10px 10px; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: var(--red); border-left: 2.5px dashed var(--red); } @media (max-width: 720px) { .bp-scale { grid-template-columns: 1fr; } .bp-scale-div span { writing-mode: horizontal-tb; transform: none; border-left: 0; border-top: 2.5px dashed var(--red); padding: 8px 0 0; text-align: center; width: 100%; } } .ts-scale-frame { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px); padding: clamp(18px, 2.4vw, 30px); border: 3px solid var(--ink); border-radius: clamp(14px, 1.8vw, 22px); background: linear-gradient(rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgb(41 71 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 100%, #fdfcf2; box-shadow: 7px 7px 0 var(--ink); overflow: visible; /* the 4,500 bar is DESIGNED to escape */ } .ts-scale-frame .bp-fig { margin-bottom: 4px; } .ts-scale-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; align-items: center; gap: clamp(12px, 1.8vw, 22px); } .ts-scale-lab { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; line-height: 1.5; text-transform: lowercase; color: rgb(16 20 23 / 0.65); } .ts-scale-track { position: relative; } .ts-scale-bar { position: relative; display: flex; align-items: center; height: clamp(40px, 4.4vw, 54px); width: var(--w, 10%); min-width: fit-content; padding-left: 12px; padding-right: 14px; border: 2.5px solid var(--ink); border-radius: 10px; transform-origin: left center; scale: 0 1; transition: scale 900ms var(--ease-play); } .ts-scale.in .ts-scale-bar { scale: 1 1; } .ts-scale.in .ts-scale-row:nth-child(3) .ts-scale-bar { transition-delay: 220ms; } .ts-scale.in .ts-scale-row:nth-child(4) .ts-scale-bar { transition-delay: 460ms; } .ts-scale-bar b { font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 22px); font-weight: 700; text-transform: uppercase; white-space: nowrap; } .ts-scale-bar.old { background: repeating-linear-gradient(-45deg, rgb(16 20 23 / 0.1) 0 8px, transparent 8px 16px); } .ts-scale-bar.old b { color: rgb(16 20 23 / 0.72); } .ts-scale-bar.mid { background: var(--bp); } .ts-scale-bar.mid b { color: #fff; } .ts-scale-bar.big { background: repeating-linear-gradient(-45deg, var(--bp) 0 14px, var(--bp-purple) 14px 28px); box-shadow: 4px 4px 0 var(--ink); z-index: 2; } .ts-scale-bar.big b { color: #fff; text-shadow: 1px 1px 0 var(--ink); } .ts-scale-bar.big::after { content: "→"; position: absolute; right: 10px; color: #fff; font-family: var(--ts-display); font-size: 20px; font-weight: 700; } .ts-scale-cap { display: block; margin-top: 14px; font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.62); } /* ========================================================= §02 · brief · quote · ribbon ========================================================= */ .ts-brief { position: relative; width: min(100%, 820px); margin-top: clamp(24px, 4vh, 44px); padding: clamp(22px, 3vw, 36px); border: 3px solid var(--ink); border-radius: 20px; background: var(--bp); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-0.6deg); } .ts-brief-tag { display: inline-block; margin-bottom: 14px; padding: 5px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; } .ts-brief p { margin: 0; max-width: 26ch; color: #fff; font-family: var(--ts-display); font-size: clamp(26px, 3.2vw, 52px); font-weight: 700; text-transform: uppercase; line-height: 1.04; } .ts-brief p em { font-style: normal; background: linear-gradient(transparent 58%, var(--bp-deep) 58%); } .ts-quote { position: relative; width: min(100%, 760px); margin: clamp(14px, 2.4vh, 24px) 0; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.6deg); } .ts-quote::before { content: "“"; position: absolute; top: -26px; left: 14px; color: var(--bp); font-family: var(--ts-display); font-size: 76px; font-weight: 700; line-height: 1; } .ts-quote p { margin: 0; font-family: var(--ts-display); font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; text-transform: uppercase; line-height: 1.12; } .ts-quote p em { font-style: normal; background: linear-gradient(transparent 62%, var(--bp-soft) 62%); } .ts-quote-who { display: block; margin-top: 12px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .ts-ribbon { margin: clamp(14px, 2.4vh, 24px) 0; } .ts-ribbon-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: clamp(14px, 2vw, 22px) clamp(12px, 1.8vw, 20px) clamp(12px, 1.6vw, 18px); border: 2.5px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .ts-ribbon-track::before { content: ""; position: absolute; top: calc(clamp(14px, 2vw, 22px) + 7px); left: 8%; right: 8%; border-top: 2.5px dashed var(--bp-dash); } .ts-ribbon-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .ts-ribbon-stop i { width: 16px; height: 16px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--bp-soft); margin-bottom: 4px; } .ts-ribbon-stop:last-child i { background: var(--bp); } .ts-ribbon-stop b { font-family: var(--ts-display); font-size: clamp(14px, 1.5vw, 20px); font-weight: 700; text-transform: uppercase; line-height: 1; } .ts-ribbon-stop small { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } /* ========================================================= §02 · mail-merge concept (fig_04) ========================================================= */ .bp-mergeidea { width: min(100%, 900px); margin: clamp(14px, 2.4vh, 24px) 0; } .bp-mi-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: clamp(10px, 1.6vw, 20px); } .bp-mi-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 1.6vw, 18px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-mi-card.out { transform: rotate(0.6deg); } .bp-mi-cap { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-mi-card p { margin: 0; font-family: var(--ts-display); font-size: clamp(14px, 1.5vw, 20px); font-weight: 700; text-transform: uppercase; line-height: 1.5; } .bp-mi-rows { display: flex; flex-direction: column; gap: 6px; } .bp-mi-rows span { padding: 5px 10px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fdfcf2; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; } .bp-mi-op { font-family: var(--ts-display); font-size: clamp(24px, 2.6vw, 40px); font-weight: 700; color: var(--bp); } .bp-mi-stack { position: relative; padding: 6px 8px 0 0; } .bp-mi-stack i { content: ""; position: absolute; inset: 0 0 8px 8px; border: 2px solid rgb(16 20 23 / 0.35); border-radius: 10px; background: #fdfcf2; } .bp-mi-stack i:nth-child(1) { translate: 8px -6px; } .bp-mi-stack i:nth-child(2) { translate: 4px -3px; } .bp-mi-stack p { position: relative; margin: 0; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf5; font-family: var(--ts-mono); font-size: 13px; font-weight: 700; text-transform: none; line-height: 1.6; } .bp-mi-stack p b { color: var(--bp); font-weight: 900; } .ts-slot { display: inline-block; padding: 1px 10px; border: 2px dashed var(--bp); border-radius: 8px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 0.72em; font-weight: 900; text-transform: none; vertical-align: 3%; } /* ========================================================= §02 · exploded vault (fig_05) ========================================================= */ /* ========================================================= a connection is a nested address (fig_07) ========================================================= */ .bp-addr { width: min(100%, 860px); margin: clamp(14px, 2.4vh, 24px) 0; } .bp-addr-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(20px, 3.5vw, 56px); padding: clamp(10px, 2vh, 22px) 0; } /* nested containment — building > floor > room > cabinet */ .bp-nest { position: relative; } .bp-nest-box { position: relative; border: 2.5px solid var(--ink); border-radius: 14px; padding: clamp(38px, 5vw, 52px) clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 18px); } .bp-nest-box.b1 { background: rgb(41 71 255 / 0.14); } .bp-nest-box.b2 { background: rgb(41 71 255 / 0.1); } .bp-nest-box.b3 { background: rgb(124 92 255 / 0.12); } .bp-nest-box.b4 { background: rgb(41 71 255 / 0.07); } .bp-nest-box.b2, .bp-nest-box.b3, .bp-nest-box.b4 { margin-top: 12px; } .bp-nest-lab { position: absolute; top: clamp(11px, 1.4vw, 15px); left: clamp(14px, 1.8vw, 20px); display: flex; align-items: baseline; gap: 9px; } .bp-nest-lab b { font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .bp-nest-lab em { font-style: normal; font-family: var(--ts-mono); font-size: 11px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.5); } .bp-nest-val { display: inline-block; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 7px; background: #fffdf5; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; text-transform: lowercase; } .bp-nest-swap { position: absolute; top: clamp(11px, 1.4vw, 15px); right: clamp(14px, 1.8vw, 20px); padding: 3px 9px; border-radius: 999px; background: var(--bp); color: #fff; font-family: var(--ts-mono); font-size: 10px; font-weight: 900; letter-spacing: 0.03em; text-transform: lowercase; } /* the address path + per-org swap */ .bp-addr-side { display: flex; flex-direction: column; gap: 9px; } .bp-addr-cap { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-addr-cap:not(:first-child) { margin-top: 10px; } .bp-addr-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-addr-path .seg { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; } .bp-addr-path .seg.ph { padding: 3px 9px; border: 2px dashed var(--bp); border-radius: 7px; background: var(--bp-soft); color: var(--bp); } .bp-addr-path .sep { color: rgb(16 20 23 / 0.4); font-family: var(--ts-mono); font-weight: 900; } .bp-addr-swap { display: flex; flex-direction: column; gap: 7px; } .bp-addr-swap span { display: flex; align-items: center; gap: 9px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .bp-addr-swap span b { margin-left: auto; padding: 3px 9px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--bp-soft); font-weight: 900; } .bp-addr-dot { width: 11px; height: 11px; flex: 0 0 auto; border: 1.5px solid var(--ink); border-radius: 50%; } .bp-addr-dot.a { background: var(--org-a); } .bp-addr-dot.b { background: var(--org-b); } .bp-addr-dot.c { background: var(--org-c); } @media (max-width: 720px) { .bp-addr-grid { grid-template-columns: 1fr; gap: 26px; } } /* ========================================================= why data models publish (3 reason cards) ========================================================= */ .bp-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(16px, 2.6vh, 28px); } .bp-why-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.2vw, 26px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .bp-why-card:nth-child(1) { transform: rotate(-0.5deg); } .bp-why-card:nth-child(2) { transform: rotate(0.4deg); background: #f2f5ff; } .bp-why-card:nth-child(3) { transform: rotate(-0.3deg); } .bp-why-n { position: absolute; top: 14px; right: 16px; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; color: rgb(16 20 23 / 0.35); } .bp-why-card h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-why-card p { margin: 0; font-size: var(--cs-small); line-height: 1.55; text-wrap: pretty; } .bp-why-ill { display: flex; align-items: center; gap: 10px; height: clamp(56px, 7vw, 74px); padding: 0 4px; } .bp-why-chip { padding: 7px 12px; border: 2px solid var(--ink); border-radius: 9px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; background: #fff; } .bp-why-chip.model { background: var(--bp); color: #fff; } .bp-why-chip.board { background: var(--bp-soft); } .bp-why-link { flex: 1; max-width: 40px; height: 2.5px; border-top: 2.5px dashed var(--bp-dash); } .bp-why-fan { display: flex; gap: 5px; } .bp-why-fan i { width: 12px; height: 30px; border: 2px solid var(--ink); border-radius: 4px; background: var(--bp-soft); } .bp-why-mini { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-why-hub { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--bp); color: #fff; font-family: var(--ts-display); font-weight: 700; } .bp-why-rays { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .bp-why-rays i { width: clamp(24px, 3vw, 40px); height: 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bp-soft); } /* ========================================================= 3-step solution roadmap preview ========================================================= */ .bp-road { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(16px, 2.6vh, 28px); } .bp-road-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2vw, 26px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .bp-road-step:nth-child(5) { background: #f2f5ff; } .bp-road-n { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; color: var(--bp); letter-spacing: 0.06em; } .bp-road-step h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-road-step p { margin: 0; font-size: var(--cs-fine); line-height: 1.5; text-transform: lowercase; } .bp-road-step code { margin-top: auto; width: fit-content; padding: 5px 10px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; } .bp-road-arrow { align-self: center; font-family: var(--ts-display); font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: var(--bp); } @media (max-width: 860px) { .bp-why { grid-template-columns: 1fr; } .bp-road { grid-template-columns: 1fr; } .bp-road-arrow { width: 100%; text-align: center; transform: rotate(90deg); } } /* ========================================================= §02 · chain — name it, plug it in, publish ========================================================= */ .ts-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); margin: clamp(24px, 4vh, 44px) 0; } .ts-chain-step { display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .ts-chain-step[data-layer="1"] { transform: rotate(-0.7deg); } .ts-chain-step[data-layer="2"] { transform: rotate(0.5deg); background: #f2f5ff; } .ts-chain-step[data-layer="3"] { transform: rotate(-0.4deg); background: var(--bp); } .ts-chain-step[data-layer="3"] h4, .ts-chain-step[data-layer="3"] p { color: #fff; } .ts-chain-n { width: fit-content; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffdf5; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; white-space: nowrap; } .ts-chain-step h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; text-transform: uppercase; line-height: 1; } .ts-chain-step p { margin: 0; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.7); } .ts-chain-link { position: relative; align-self: center; width: clamp(26px, 3.4vw, 60px); border-top: 2.5px dashed var(--bp-dash); } .ts-chain.in .ts-chain-link .pkt { animation: bp-run 2.2s ease-in-out infinite; } .ts-chain.in .ts-chain-link:last-of-type .pkt { animation-delay: 1.1s; } .ts-chain-link .pkt { top: 0; translate: 0 -50%; } /* ========================================================= §02 · "half the project" emphasis panel ========================================================= */ .bp-half { position: relative; margin: clamp(20px, 4vh, 44px) 0; padding: clamp(30px, 4.5vw, 64px); border: 3px solid var(--ink); border-radius: clamp(18px, 2.2vw, 30px); background: var(--ink); color: var(--paper); box-shadow: 9px 9px 0 rgb(16 20 23 / 0.35); overflow: hidden; } .bp-half::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(255 248 223 / 0.9) 0 1px, transparent 1.4px); background-size: 26px 26px; opacity: 0.06; pointer-events: none; } .bp-half > * { position: relative; } .bp-half-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .bp-half-title { margin: clamp(16px, 2.4vh, 26px) 0 0; font-family: var(--ts-display); font-size: clamp(38px, 6vw, 84px); font-weight: 700; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.005em; } .bp-half-hl { color: var(--yellow); } .bp-half-lede { margin: clamp(16px, 2.2vh, 24px) 0 0; max-width: 720px; font-size: var(--cs-body); line-height: 1.6; color: rgb(255 248 223 / 0.82); text-wrap: pretty; } .bp-half-lede em { font-style: normal; font-weight: 800; color: var(--paper); background: linear-gradient(transparent 62%, rgb(93 118 255 / 0.5) 62%); } .bp-half-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); margin-top: clamp(24px, 3.5vh, 42px); } .bp-half-cell { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px, 2vw, 26px); border: 2px solid rgb(255 248 223 / 0.22); border-radius: 16px; background: rgb(255 248 223 / 0.04); } .bp-half-cell b { font-family: var(--ts-display); font-size: clamp(16px, 1.7vw, 21px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .bp-half-cell span { font-size: var(--cs-fine); line-height: 1.5; color: rgb(255 248 223 / 0.62); text-wrap: pretty; } /* little motifs — tangle → order */ .bp-half-ill { display: flex; align-items: center; gap: 6px; height: 34px; margin-bottom: 2px; } .bp-half-ill.deps i { width: 12px; height: 12px; border: 2px solid var(--yellow); border-radius: 50%; } .bp-half-ill.deps i:nth-child(2) { margin-left: -2px; } .bp-half-ill.deps i:nth-child(3) { margin-left: -2px; background: var(--yellow); } .bp-half-ill.wires i { width: 22px; height: 2.5px; background: var(--bp-lite); transform: rotate(var(--r, 0deg)); transform-origin: left; } .bp-half-ill.wires i:nth-child(1) { --r: -18deg; } .bp-half-ill.wires i:nth-child(2) { --r: 12deg; } .bp-half-ill.wires i:nth-child(3) { --r: -8deg; } .bp-half-ill.wires i:nth-child(4) { --r: 22deg; } .bp-half-ill.journey i { width: 14px; height: 14px; border: 2px solid var(--yellow); border-radius: 50%; position: relative; } .bp-half-ill.journey i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 8px; border-top: 2px dashed rgb(255 248 223 / 0.5); } .bp-half-foot { margin: clamp(24px, 3.5vh, 40px) 0 0; padding-top: clamp(16px, 2.4vh, 24px); border-top: 2px dashed rgb(255 248 223 / 0.2); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; color: rgb(255 248 223 / 0.7); } .bp-half-next { display: inline-block; font-family: var(--ts-mono); font-weight: 900; text-transform: lowercase; color: var(--yellow); } @media (max-width: 800px) { .bp-half-grid { grid-template-columns: 1fr; } } /* ========================================================= §02 · auto-looping publish visual (dark panel) ========================================================= */ .bp-loop { margin: clamp(16px, 2.6vh, 28px) 0; padding: clamp(22px, 3vw, 40px); border: 3px solid var(--ink); border-radius: clamp(16px, 2vw, 26px); background: var(--ink); box-shadow: 7px 7px 0 rgb(16 20 23 / 0.35); color: var(--paper); } .bp-loop-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2.4vw, 40px); } /* the template card */ .bp-loop-tpl { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.2vw, 26px); border: 2px solid rgb(255 255 255 / 0.22); border-radius: 16px; background: rgb(255 255 255 / 0.04); } .bp-loop-cap { font-family: var(--ts-mono); font-size: 11px; font-weight: 800; text-transform: lowercase; color: rgb(255 255 255 / 0.5); } .bp-loop-title { font-family: var(--ts-display); font-size: clamp(19px, 2vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 4px; } .bp-loop-line { display: flex; align-items: center; gap: 8px; font-family: var(--ts-mono); font-size: clamp(12.5px, 1.3vw, 15px); font-weight: 800; text-transform: lowercase; } .bp-loop-line span { color: rgb(255 255 255 / 0.4); } .bp-loop-line .ts-slot { padding: 3px 10px; border: 2px dashed var(--bp-lite); border-radius: 7px; background: rgb(93 118 255 / 0.18); color: #fff; font-weight: 900; } /* middle — who's asking + wire + cycling org badge */ .bp-loop-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; } .bp-loop-asking { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; color: var(--bp-lite); } .bp-loop-wire { position: relative; width: clamp(40px, 6vw, 90px); border-top: 2.5px dashed rgb(255 255 255 / 0.3); } .bp-loop-wire .pkt { top: 0; translate: 0 -50%; } .bp-loop:not(.is-reduced) .bp-loop-wire .pkt { animation: bp-run 3.9s ease-in-out infinite; } .bp-loop-org-badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2.5px solid rgb(255 255 255 / 0.25); border-radius: 999px; background: rgb(255 255 255 / 0.06); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; transition: border-color 300ms; } /* per-org accent dot */ .bp-loop-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: var(--org-a); transition: background 300ms; } [data-org="a"] .bp-loop-dot, .bp-loop-org-badge[data-org="a"] .bp-loop-dot { background: var(--org-a); } [data-org="b"] .bp-loop-dot, .bp-loop-org-badge[data-org="b"] .bp-loop-dot { background: var(--org-b); } [data-org="c"] .bp-loop-dot, .bp-loop-org-badge[data-org="c"] .bp-loop-dot { background: var(--org-c); } /* the resolved board */ .bp-loop-board { border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); overflow: hidden; box-shadow: 5px 5px 0 rgb(0 0 0 / 0.4); } .bp-loop-bar { display: flex; align-items: center; gap: 9px; padding: 10px 15px; background: var(--org-a); border-bottom: 2.5px solid var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; transition: background 320ms; } .bp-loop-board[data-org="a"] .bp-loop-bar { background: var(--org-a); } .bp-loop-board[data-org="b"] .bp-loop-bar { background: var(--org-b); } .bp-loop-board[data-org="c"] .bp-loop-bar { background: var(--org-c); } .bp-loop-bar .bp-loop-dot { border: 2px solid var(--ink); background: #fff; } .bp-loop-body { display: flex; flex-direction: column; gap: 9px; padding: clamp(15px, 1.8vw, 20px); } .bp-loop-btitle { font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-loop-kpi { font-family: var(--ts-display); font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 0.95; } .bp-loop-chart { display: flex; align-items: flex-end; gap: 5px; height: clamp(48px, 6vw, 68px); } .bp-loop-chart i { flex: 1; height: var(--h); border: 2px solid var(--ink); border-radius: 4px 4px 0 0; background: var(--bp-soft); transition: height 420ms var(--ease-smooth); } .bp-loop-meta { display: flex; flex-wrap: wrap; gap: 7px; } .bp-loop-meta span { padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; } /* crossfade on swap */ .bp-loop [data-loop="kpi"], .bp-loop [data-loop="orgname"], .bp-loop [data-loop="schema"], .bp-loop [data-loop="rows"], .bp-loop-org-badge b { transition: opacity 220ms ease; } .bp-loop.is-swapping [data-loop="kpi"], .bp-loop.is-swapping [data-loop="orgname"], .bp-loop.is-swapping [data-loop="schema"], .bp-loop.is-swapping [data-loop="rows"], .bp-loop.is-swapping .bp-loop-org-badge b { opacity: 0.15; } @media (max-width: 800px) { .bp-loop-stage { grid-template-columns: 1fr; gap: 18px; justify-items: stretch; } .bp-loop-mid { flex-direction: row; justify-content: center; } .bp-loop-wire { width: 40px; } } /* ========================================================= §02 · FLAGSHIP mail-merge demo (dark panel) ========================================================= */ .ts-merge { margin: clamp(14px, 2.4vh, 24px) 0; padding: clamp(18px, 2.4vw, 30px); border: 3px solid var(--ink); border-radius: clamp(16px, 2vw, 26px); background: var(--ink); box-shadow: 7px 7px 0 rgb(16 20 23 / 0.35); color: var(--paper); } .ts-merge-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(16px, 2vh, 24px); } .ts-merge-head p { margin: 0; max-width: 44ch; font-size: 15px; font-weight: 500; line-height: 1.55; color: rgb(255 248 223 / 0.85); } .ts-merge-orgs { display: flex; flex-wrap: wrap; gap: 8px; } .ts-orgbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 2px solid var(--paper); border-radius: 999px; background: transparent; color: var(--paper); font-family: var(--ts-mono); font-size: 12px; font-weight: 800; cursor: pointer; transition: transform 300ms var(--ease-play), background 200ms ease, color 200ms ease, box-shadow 300ms var(--ease-play); } .ts-orgbtn i { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; } .ts-orgbtn[data-org="a"] i { background: var(--org-a); } .ts-orgbtn[data-org="b"] i { background: var(--org-b); } .ts-orgbtn[data-org="c"] i { background: var(--org-c); } .ts-orgbtn:hover { transform: translateY(-2px) rotate(-1deg); } .ts-orgbtn.is-active { background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 rgb(255 248 223 / 0.35); } .ts-merge-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: clamp(12px, 1.8vw, 22px); } .ts-merge-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ts-merge-colcap { display: flex; flex-direction: column; gap: 1px; font-family: var(--ts-display); font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; text-transform: uppercase; color: #9db1ff; } .ts-merge-colcap small { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.55); } .ts-mtemplate { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 2.5px solid var(--paper); border-radius: 14px; background: rgb(255 248 223 / 0.07); } .ts-mtemplate .ts-slot { border-color: var(--ink); } .ts-mtemplate-title { font-family: var(--ts-display); font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; text-transform: uppercase; color: var(--paper); } .ts-mrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--ts-mono); font-size: 13px; font-weight: 800; color: rgb(255 248 223 / 0.7); } .ts-mrow .ts-slot { font-size: 12.5px; } .ts-mtable { flex: 1; display: flex; flex-direction: column; gap: 8px; } .ts-mtr { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 11px 13px; border: 2px solid rgb(255 248 223 / 0.4); border-radius: 12px; background: rgb(255 248 223 / 0.05); transition: border-color 240ms ease, background 240ms ease, transform 320ms var(--ease-play); } .ts-mtr i { width: 12px; height: 12px; border: 1.5px solid var(--paper); border-radius: 50%; } .ts-mtr[data-org="a"] i { background: var(--org-a); } .ts-mtr[data-org="b"] i { background: var(--org-b); } .ts-mtr[data-org="c"] i { background: var(--org-c); } .ts-mtr b { font-family: var(--ts-mono); font-size: 13px; font-weight: 900; color: var(--paper); white-space: nowrap; } .ts-mtr span { font-family: var(--ts-mono); font-size: 12px; font-weight: 700; color: rgb(255 248 223 / 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-mtr.is-active { border-color: #9db1ff; background: rgb(93 118 255 / 0.16); transform: translateX(4px); } .ts-mtr.is-active span { color: rgb(255 248 223 / 0.85); } .ts-mview { --tint: var(--org-a); flex: 1; border: 2.5px solid var(--paper); border-radius: 14px; background: #fffdf5; color: var(--ink); overflow: hidden; box-shadow: 5px 5px 0 rgb(255 248 223 / 0.25); } .ts-mview[data-org="a"] { --tint: var(--org-a); } .ts-mview[data-org="b"] { --tint: var(--org-b); } .ts-mview[data-org="c"] { --tint: var(--org-c); } .ts-mview-bar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 2.5px solid var(--ink); background: var(--tint); transition: background 340ms ease; } .ts-mview-bar i { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; background: #fffdf5; } .ts-mview-org { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; } .ts-mview-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; } .ts-mview-title { font-family: var(--ts-display); font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; text-transform: uppercase; } .ts-mview-kpi { font-family: var(--ts-display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1; } .ts-mview-chart { display: flex; align-items: flex-end; gap: 5px; height: clamp(52px, 6vw, 76px); padding: 7px; border: 2px solid var(--ink); border-radius: 10px; } .ts-mview-chart i { flex: 1; height: var(--h, 50%); border: 1.5px solid var(--ink); border-bottom-width: 0; border-radius: 3px 3px 0 0; background: var(--tint); transition: background 340ms ease, height 500ms var(--ease-play); } .ts-mview-meta { display: flex; flex-wrap: wrap; gap: 6px; } .ts-mview-meta span { padding: 3px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; } .ts-mview.is-swapping .ts-mview-kpi, .ts-mview.is-swapping .ts-mview-meta span, .ts-mview.is-swapping .ts-mview-org { animation: ts-swap-in 460ms var(--ease-play) both; } @keyframes ts-swap-in { 0% { opacity: 0; transform: translateY(9px) scale(0.94); } 100% { opacity: 1; transform: none; } } .ts-flychip { position: fixed; z-index: 90; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; color: var(--ink); pointer-events: none; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); } .ts-merge-foot { display: block; margin-top: clamp(14px, 2vh, 20px); font-family: var(--ts-mono); font-size: 13px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(255 248 223 / 0.6); } .ts-merge-foot em { font-style: normal; color: #9db1ff; } /* ========================================================= reserved chapters ========================================================= */ .ts-next { display: flex; flex-direction: column; gap: 10px; margin: clamp(14px, 2.4vh, 24px) 0; padding: clamp(22px, 3vw, 36px); border: 3px dashed rgb(16 20 23 / 0.4); border-radius: clamp(14px, 1.8vw, 22px); background: rgb(255 253 245 / 0.55); } .ts-next-tag { width: fit-content; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; } .ts-next p { margin: 0; font-family: var(--ts-display); font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .ts-next-sub { font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } /* process dot-run */ .bp-dotrun { display: flex; gap: 8px; margin-top: 14px; } .bp-dotrun i { width: clamp(14px, 2vw, 22px); height: clamp(14px, 2vw, 22px); border-radius: 50%; background: color-mix(in oklab, var(--bp) calc(14% + var(--di, 0) * 6%), var(--bp-purple-soft)); animation: bp-dot-pulse 2.6s ease-in-out infinite; animation-delay: calc(var(--di, 0) * 140ms); } .bp-dotrun i:nth-child(1) { --di: 0; } .bp-dotrun i:nth-child(2) { --di: 1; } .bp-dotrun i:nth-child(3) { --di: 2; } .bp-dotrun i:nth-child(4) { --di: 3; } .bp-dotrun i:nth-child(5) { --di: 4; } .bp-dotrun i:nth-child(6) { --di: 5; } .bp-dotrun i:nth-child(7) { --di: 6; } .bp-dotrun i:nth-child(8) { --di: 7; } .bp-dotrun i:nth-child(9) { --di: 8; } .bp-dotrun i:nth-child(10) { --di: 9; } .bp-dotrun i:nth-child(11) { --di: 10; } .bp-dotrun i:nth-child(12) { --di: 11; } @keyframes bp-dot-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* dashed empty-state art */ .bp-empty { position: relative; margin-top: 16px; height: 90px; } .bp-empty.screens i { position: absolute; top: 0; width: 120px; height: 78px; border: 2.5px dashed rgb(16 20 23 / 0.4); border-radius: 12px; background: rgb(255 253 245 / 0.6); } .bp-empty.screens i:nth-child(1) { left: 0; rotate: -4deg; } .bp-empty.screens i:nth-child(2) { left: 44px; top: 8px; rotate: 2deg; border-color: rgb(41 71 255 / 0.5); } .bp-empty.screens i:nth-child(3) { left: 92px; top: 2px; rotate: 7deg; } .bp-empty.bars { display: flex; align-items: flex-end; gap: 10px; width: 200px; } .bp-empty.bars i { flex: 1; height: var(--h, 40%); border: 2.5px dashed rgb(16 20 23 / 0.4); border-bottom-style: solid; border-radius: 8px 8px 0 0; background: rgb(255 253 245 / 0.6); } .bp-empty.bars i:nth-child(3) { border-color: rgb(41 71 255 / 0.5); } /* ========================================================= responsive ========================================================= */ @media (max-width: 1080px) { .bp-hero-flow { grid-template-columns: 1fr; justify-items: center; gap: 18px; } .bp-wire { width: 0; min-width: 0; height: 40px; border-top: 0; border-left: 2.5px dashed var(--bp-dash); margin: 0; } .bp-wire .pkt { display: none; } .bp-junction { display: none; } .bp-hero-out { flex-direction: row; flex-wrap: wrap; justify-content: center; } .bp-hero-out > .bp-leader { width: 100%; } .bp-hero-core .cs-anno { display: none; } } @media (max-width: 900px) { /* embed scene: no pin, pre-exploded */ .bp-embed { height: auto; } .bp-embed-pin { position: static; min-height: 0; padding: 0; } .bp-embed-stage { grid-template-columns: 1fr; min-height: 0; } .bp-rail-list { flex-direction: row; flex-wrap: wrap; gap: 12px 18px; } .bp-rail-list li { color: var(--bp); } .bp-rail-list li::before { background: var(--bp); } .bp-iso-stage { height: clamp(340px, 60vw, 460px); min-height: 0; } .bp-plate { width: clamp(200px, 56vw, 280px); height: clamp(140px, 40vw, 200px); margin: calc(clamp(140px, 40vw, 200px) / -2) 0 0 calc(clamp(200px, 56vw, 280px) / -2); } .bp-plate.p-app { --ty: -115px; } .bp-plate.p-db { --ty: 115px; } .bp-leader.side { position: static; opacity: 1; translate: 0; max-width: none; margin-top: 6px; } .bp-iso-stage { display: flex; flex-direction: column; } .bp-iso-stage .bp-leader.side { order: 10; } /* chaos: no pin, stacked */ .bp-chaos { height: auto; } .bp-chaos-pin { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px 0; } .bp-chaos-center { position: static; translate: 0; } .bp-art { position: static; opacity: 1; transform: none; width: min(100%, 340px); } .bp-art-line { display: none; } .a-term, .a-wait { width: min(100%, 340px); } /* relay + chain + merge idea stack */ .bp-sre { grid-template-columns: 1fr; justify-items: stretch; gap: 22px; } .bp-sre-funnel { flex-direction: row; width: auto; justify-content: center; gap: 22px; align-self: center; } .bp-sre-wire { width: 2.5px; height: 26px; border-top: 0; border-left: 2.5px dashed var(--bp-dash); } .bp-sre-wire .pkt { display: none; } .bp-relay { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding-bottom: 54px; } .bp-relay-src { flex-direction: column; } .bp-relay-wires { display: none; } .bp-relay-mid { width: 100%; } .bp-relay-out { flex-direction: row; } .bp-mi-flow { grid-template-columns: 1fr; } .bp-mi-op { text-align: center; } .ts-chain { grid-template-columns: 1fr; } .ts-chain-link { width: 0; height: 30px; border-top: 0; border-left: 2.5px dashed var(--bp-dash); justify-self: center; } .ts-chain-link .pkt { display: none; } .ts-split { grid-template-columns: 1fr; } .ts-merge-grid { grid-template-columns: 1fr; } /* vault: tighter labels */ .bp-vault-stage { height: 460px; } .bp-vplate { width: min(74%, 300px); } .bp-vlab.l, .bp-vnote.l { right: calc(100% - 26px); } .bp-vlab.r, .bp-vnote.r { left: calc(100% - 26px); } .bp-vnote { max-width: 120px; white-space: normal; font-size: 11.5px; } } @media (max-width: 560px) { .bp-vault-stage { height: 430px; } .bp-vplate { width: 82%; } .bp-vlab { font-size: 15px; } .bp-vlab.l, .bp-vnote.l { right: calc(100% - 44px); } .bp-vlab.r, .bp-vnote.r { left: calc(100% - 44px); } .ts-scale-row { grid-template-columns: 1fr; gap: 6px; } } /* ========================================================= reduced motion — final states, no loops ========================================================= */ @media (prefers-reduced-motion: reduce) { .bp-embed, .bp-chaos { height: auto; } .bp-legend { height: auto; } .bp-legend-pin { position: static; min-height: 0; padding: 0; } .bp-legend .bp-lyr, .bp-legend .bp-def, .bp-org-frame, .bp-org-tag { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; } .bp-embed-pin, .bp-chaos-pin { position: static; min-height: 0; height: auto; overflow: visible; } .bp-plate.p-app { --ty: -125px; } .bp-plate.p-db { --ty: 125px; } .bp-leader.side, .bp-art, .bp-rail-list li { color: var(--bp); } .r.in .bp-wire .pkt, .in .bp-jwire .pkt, .ts-conc.is-firing .bp-relay-lane .pkt, .ts-chain.in .ts-chain-link .pkt { animation: none; opacity: 1; left: 40%; } .bp-art > * { animation: none !important; } .bp-dotrun i { animation: none; } .ts-ask.is-thinking .ts-askbar-ic, .ts-ask.is-thinking .n2, .ts-ask.is-thinking .n3, .ts-ask.is-thinking .ts-ask-wire i { animation: none; } .ts-split.in .ts-tiles i, .ts-split.in .ts-tiles.named s { animation: none; } .bp-vault .bp-vplate, .bp-vault .bp-vlab, .bp-vault .bp-vnote { transition: none; } .bp-vault .bp-vplate { opacity: 1; } .bp-vault .bp-vplate.v1 { --vy: -150px; } .bp-vault .bp-vplate.v2 { --vy: -50px; } .bp-vault .bp-vplate.v3 { --vy: 50px; } .bp-vault .bp-vplate.v4 { --vy: 150px; } .bp-vault .bp-vlab, .bp-vault .bp-vnote { opacity: 1; } .in .bp-stackflow .bp-flowlink .pkt { animation: none; opacity: 1; left: 40%; } } /* ========================================================= v2 · TSA-first narrative additions supply chain · requests strip · copyfail · whycard · variable map · parameterise flip ========================================================= */ /* ========================================================= v3 · figure cards (two schools) + architecture chain ========================================================= */ .bp-schools { display: grid; gap: clamp(26px, 3.6vh, 44px); } .bp-figcard { position: relative; border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 6px 6px 0 var(--ink); overflow: visible; } .bp-figcard.old { transform: rotate(-0.25deg); } .bp-figcard.new { transform: rotate(0.25deg); } .bp-figcard-stage { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 2.2vw, 30px); min-height: clamp(190px, 25vh, 270px); padding: clamp(28px, 3.6vw, 50px) clamp(20px, 3vw, 44px); border-bottom: 2.5px dashed var(--bp-dash); border-radius: 16px 16px 0 0; background: repeating-linear-gradient(-45deg, rgb(16 20 23 / 0.035) 0 10px, transparent 10px 20px); } .bp-figcard-stage.rings { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; background: repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bp) 9%, transparent) 0 1.5px, transparent 1.5px 30px), #f6f8ff; } .bp-stage-side { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 22px); } .bp-stage-side.end { justify-content: center; } .bp-figcard-text { display: flex; flex-direction: column; gap: 7px; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 44px) clamp(22px, 2.8vw, 32px); } .bp-figcard-text h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0; font-family: var(--ts-display); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-figcard-text h4 small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; letter-spacing: 0.04em; color: rgb(16 20 23 / 0.55); } .bp-figcard-text p { margin: 0; font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.55; max-width: 560px; } .bp-figcard-text p em { font-style: normal; background: linear-gradient(transparent 62%, var(--bp-soft) 62%); } /* stage artifacts — legacy lane */ .bp-doc { position: relative; display: flex; flex-direction: column; gap: 7px; width: clamp(160px, 17vw, 210px); padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.4deg); } .bp-doc b { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; } .bp-doc span { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; color: rgb(16 20 23 / 0.6); text-transform: lowercase; } .bp-doc i { height: 7px; border-radius: 4px; background: rgb(16 20 23 / 0.12); } .bp-doc i.w70 { width: 70%; } .bp-doc i.w40 { width: 40%; } .bp-doc.stale { transform: rotate(1.2deg); } .bp-doc.stale i { background: rgb(16 20 23 / 0.2); } .bp-doc.stale .bp-badge { top: -13px; right: -10px; } .bp-cal { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fdfcf2; box-shadow: 3px 3px 0 var(--ink); transform: rotate(0.8deg); } .bp-cal b { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.05em; } .bp-cal-grid { display: flex; gap: 5px; } .bp-cal-grid s, .bp-cal-grid em { padding: 6px 7px; border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; font-style: normal; text-transform: lowercase; } .bp-cal-grid s { color: rgb(16 20 23 / 0.45); text-decoration-color: var(--red); text-decoration-thickness: 2px; } .bp-cal-grid em { background: var(--ink); color: var(--paper); } /* stage artifacts — thoughtspot lane */ .bp-figwire { position: relative; width: clamp(22px, 2.8vw, 52px); border-top: 2.5px dashed var(--bp-dash); } .bp-figwire.live { border-top-color: var(--bp); } .bp-figwire .pkt { top: 0; translate: 0 -50%; } .in .bp-figcard .bp-figwire .pkt { animation: bp-run 2.2s ease-in-out infinite; } .in .bp-figcard .bp-figwire:nth-of-type(2) .pkt { animation-delay: 1.1s; } .bp-askpill { display: flex; align-items: center; gap: 10px; max-width: clamp(200px, 22vw, 300px); padding: 15px 24px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: clamp(12px, 1.15vw, 15px); font-weight: 900; transform: rotate(-0.6deg); } .bp-ask-ic { color: var(--bp); } .bp-caret { width: 2.5px; height: 16px; background: var(--bp); animation: bp-blink 1.1s steps(2) infinite; } @keyframes bp-blink { 50% { opacity: 0; } } .bp-core { display: grid; place-items: center; width: clamp(46px, 4.4vw, 60px); height: clamp(46px, 4.4vw, 60px); border: 2.5px solid var(--ink); border-radius: 50%; background: var(--bp); color: #fff; font-size: clamp(16px, 1.7vw, 22px); box-shadow: 4px 4px 0 var(--ink); } /* thoughtspot spot mark */ .bp-core.spot { background: var(--ink); padding: 0; overflow: hidden; border-radius: 18px; width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); } .bp-core.spot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* how the magic works · semantic layer + cdw */ .bp-how { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); margin-top: 6px; } .bp-how-chip { flex: 1 1 160px; max-width: 300px; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); } .bp-how-chip b { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; } .bp-how-chip small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; line-height: 1.6; color: rgb(16 20 23 / 0.62); } .bp-how-chip.hot { background: var(--bp-soft); border-color: var(--bp); box-shadow: 3px 3px 0 var(--bp); } .bp-how-chip.hot b { color: var(--bp); } .bp-how-arr { align-self: center; font-family: var(--ts-mono); font-size: 16px; font-weight: 900; color: var(--bp); } /* “so here's the twist” divider between the two figure cards */ .bp-unique { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); padding: clamp(4px, 1.2vh, 14px) clamp(10px, 4vw, 60px); } .bp-unique-rule { flex: 1; height: 0; border-top: 2.5px dashed var(--bp-dash); } .bp-unique-word { flex: 0 0 auto; padding: 8px 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--bp); color: #fff; font-family: var(--ts-mono); font-size: clamp(11px, 1.1vw, 14px); font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); } .bp-answercard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 15px 20px; border: 2.5px solid var(--bp); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 var(--bp); transform: rotate(0.6deg); } .bp-answercard b { font-family: var(--ts-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1; } .bp-answercard small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .bp-answercard .bp-badge { top: -14px; right: -12px; left: auto; } .bp-badge.blue { background: var(--bp); color: #fff; } .bp-answerbars { display: flex; align-items: flex-end; gap: 4px; height: 42px; } .bp-answerbars i { width: 15px; height: var(--h); border: 1.5px solid var(--ink); border-radius: 3px 3px 0 0; background: var(--bp-soft); } .bp-answerbars i.hot { background: var(--bp); } /* architecture chain */ .bp-arch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 48px); padding: clamp(12px, 1.8vw, 28px) clamp(2px, 0.8vw, 14px) clamp(16px, 2.2vw, 32px); } .bp-arch-wire { position: absolute; inset: 0; width: 100%; height: 100%; } .bp-arch-wire polyline { stroke: var(--bp); stroke-width: 2.5px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: 0.5; } .bp-arch-col { position: relative; display: flex; flex-direction: column; align-items: center; } .bp-arch-col.c1 { margin-top: clamp(80px, 10vw, 150px); } .bp-arch-col.c2 { margin-top: clamp(40px, 5vw, 75px); } .bp-arch-node { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 24px) clamp(17px, 2.2vw, 26px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .bp-arch-node b { font-family: var(--ts-display); font-size: clamp(19px, 2vw, 28px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-arch-node small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; line-height: 1.55; color: rgb(16 20 23 / 0.62); } .bp-arch-node.hot { background: #f2f5ff; border-color: var(--bp); box-shadow: 5px 5px 0 var(--bp); } .bp-arch-drop { height: 24px; border-left: 2.5px dashed var(--bp-dash); } .bp-payload { width: fit-content; max-width: 100%; padding: 11px 15px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-0.6deg); } .bp-arch-col.c2 .bp-payload { transform: rotate(0.5deg); } .bp-payload b { display: block; margin-bottom: 5px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: var(--bp); } .bp-payload code { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; line-height: 1.75; text-transform: lowercase; } .bp-payload code em { font-style: normal; background: linear-gradient(transparent 55%, var(--bp-soft) 55%); } .bp-conn-ill { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; } .bp-db { display: flex; flex-direction: column; gap: 4px; } .bp-db i { width: clamp(48px, 4.6vw, 68px); height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bp-soft); } .bp-plugwire { width: clamp(22px, 2.4vw, 38px); border-top: 2.5px dashed var(--bp-dash); } .bp-plug { width: 16px; height: 16px; border: 2.5px solid var(--ink); border-radius: 4px; background: var(--bp); } .bp-model-ill { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 6px 9px; margin: 4px 0 2px; } .bp-model-ill .raw { padding: 4px 9px; border: 1.5px dashed rgb(16 20 23 / 0.45); border-radius: 6px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; color: rgb(16 20 23 / 0.55); } .bp-model-ill .arr { font-family: var(--ts-mono); font-weight: 900; color: var(--bp); } .bp-model-ill .nice { padding: 4px 9px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; } .bp-board-ill { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; } .bp-board-kpi { font-family: var(--ts-display); font-size: clamp(20px, 2vw, 27px); font-weight: 700; line-height: 1; } @media (max-width: 900px) { .bp-arch { grid-template-columns: 1fr; gap: 26px; } .bp-arch-col.c1, .bp-arch-col.c2 { margin-top: 0; } .bp-arch-wire { display: none; } .bp-figwire { width: 100%; max-width: 60px; } .bp-figcard-stage.rings { grid-template-columns: 1fr; justify-items: center; gap: 12px; } .bp-stage-side { flex-direction: column; } .bp-stage-side.end { justify-content: center; } .bp-stage-side .bp-figwire { width: 0; height: 24px; border-top: 0; border-left: 2.5px dashed var(--bp); } .bp-stage-side .bp-figwire .pkt { display: none; } .bp-how-arr { display: none; } } /* ========================================================= pinned legend \u00b7 five words stacked on scroll ========================================================= */ .bp-legend { position: relative; height: 340vh; margin: clamp(30px, 6vh, 60px) 0; } .bp-legend-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 6vh, 60px) 0; } .bp-legend-stage { display: grid; grid-template-columns: minmax(280px, 1fr) 1.05fr; align-items: center; gap: clamp(24px, 4vw, 64px); } /* the tower */ .bp-legend-tower { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(30px, 4vw, 52px) clamp(20px, 2.6vw, 34px); } .bp-lyr { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: clamp(13px, 1.6vw, 19px) clamp(15px, 1.9vw, 23px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); opacity: 0; translate: 0 20px; transition: opacity 420ms var(--ease-play), translate 420ms var(--ease-play); } .bp-lyr b { font-family: var(--ts-display); font-size: clamp(17px, 1.9vw, 25px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-lyr-tag { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; background: var(--paper); } .bp-lyr-ill { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; height: 30px; } .bp-lyr-ill.board i { width: 9px; height: var(--h); border: 1.5px solid var(--ink); border-radius: 2px 2px 0 0; background: var(--bp-soft); } .bp-lyr-ill.board i.hot { background: var(--bp); } .bp-lyr-ill.model { align-items: center; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; gap: 6px; } .bp-lyr-ill.model em { font-style: normal; padding: 3px 7px; border: 1.5px dashed rgb(16 20 23 / 0.45); border-radius: 5px; color: rgb(16 20 23 / 0.55); } .bp-lyr-ill.model s { color: var(--bp); font-weight: 900; text-decoration: none; } .bp-lyr-ill.model u { padding: 3px 7px; border: 1.5px solid var(--ink); border-radius: 5px; background: #fff; text-decoration: none; } .bp-lyr-ill.conn { align-items: center; gap: 5px; } .bp-lyr-ill.conn i { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 3px; background: var(--bp-soft); } .bp-lyr-ill.conn s { color: var(--bp); font-weight: 900; text-decoration: none; } .bp-lyr-ill.conn u { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--bp); } .bp-lyr-ill.wh { gap: 5px; } .bp-lyr-ill.wh i { width: clamp(30px, 3vw, 46px); height: 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bp-soft); } .bp-lyr.l-model { background: #f2f5ff; } .bp-lyr.l-board { z-index: 2; } /* liveboard — tiny tease that other object types exist */ .bp-lyr-hint { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: lowercase; color: rgb(41 71 255 / 0.55); } .bp-lyr-hint::before { content: "⤷ "; color: rgb(41 71 255 / 0.4); } .bp-def-aside { display: block; margin-top: 8px; padding-left: 10px; border-left: 2px solid rgb(41 71 255 / 0.3); font-family: var(--ts-mono); font-size: 11px; font-weight: 800; line-height: 1.5; text-transform: lowercase; color: rgb(41 71 255 / 0.6); max-width: 400px; } /* reveal, bottom-up */ .bp-legend.s1 .l-wh, .bp-legend.s2 .l-conn, .bp-legend.s3 .l-model, .bp-legend.s4 .l-board { opacity: 1; translate: 0 0; } /* active layer pops */ .bp-legend.s1:not(.s2) .l-wh, .bp-legend.s2:not(.s3) .l-conn, .bp-legend.s3:not(.s4) .l-model, .bp-legend.s4:not(.s5) .l-board { border-color: var(--bp); box-shadow: 5px 5px 0 var(--bp); scale: 1.02; } /* org frame wraps everything at the last step */ .bp-org-frame { position: absolute; inset: 0; border: 2.5px dashed var(--bp); border-radius: 20px; opacity: 0; scale: 0.94; transition: opacity 420ms var(--ease-play), scale 420ms var(--ease-play); pointer-events: none; } .bp-org-tag { position: absolute; top: -14px; left: 22px; padding: 5px 13px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--bp); color: #fff; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 3px 3px 0 var(--ink); opacity: 0; translate: 0 6px; transition: opacity 360ms var(--ease-play) 120ms, translate 360ms var(--ease-play) 120ms; } .bp-legend.s5 .bp-org-frame { opacity: 1; scale: 1; } .bp-legend.s5 .bp-org-tag { opacity: 1; translate: 0 0; } /* definition list */ .bp-legend-defs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); } .bp-def { display: grid; grid-template-columns: auto 1fr; gap: 14px; opacity: 0.12; translate: 0 8px; transition: opacity 380ms var(--ease-play), translate 380ms var(--ease-play); } .bp-def-n { font-family: var(--ts-mono); font-size: 12px; font-weight: 900; color: rgb(16 20 23 / 0.4); padding-top: 3px; } .bp-def b { font-family: var(--ts-display); font-size: clamp(18px, 1.9vw, 25px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-def p { margin: 5px 0 0; font-size: clamp(13.5px, 1.25vw, 16px); line-height: 1.5; color: rgb(16 20 23 / 0.7); max-width: 460px; } .bp-legend.s1 .bp-def[data-d="1"], .bp-legend.s2 .bp-def[data-d="2"], .bp-legend.s3 .bp-def[data-d="3"], .bp-legend.s4 .bp-def[data-d="4"], .bp-legend.s5 .bp-def[data-d="5"] { opacity: 1; translate: 0 0; } /* dim the non-active revealed rows a touch */ .bp-legend.s2 .bp-def[data-d="1"], .bp-legend.s3 .bp-def[data-d="1"], .bp-legend.s3 .bp-def[data-d="2"], .bp-legend.s4 .bp-def[data-d="1"], .bp-legend.s4 .bp-def[data-d="2"], .bp-legend.s4 .bp-def[data-d="3"], .bp-legend.s5 .bp-def[data-d="1"], .bp-legend.s5 .bp-def[data-d="2"], .bp-legend.s5 .bp-def[data-d="3"], .bp-legend.s5 .bp-def[data-d="4"] { opacity: 0.4; translate: 0 0; } .bp-def .bp-def-n, .bp-def b { transition: color 300ms; } .bp-legend.s1:not(.s2) .bp-def[data-d="1"] b, .bp-legend.s2:not(.s3) .bp-def[data-d="2"] b, .bp-legend.s3:not(.s4) .bp-def[data-d="3"] b, .bp-legend.s4:not(.s5) .bp-def[data-d="4"] b, .bp-legend.s5 .bp-def[data-d="5"] b { color: var(--bp); } @media (max-width: 900px) { .bp-legend { height: auto; margin: 30px 0; } .bp-legend-pin { position: static; min-height: 0; padding: 0; } .bp-legend-stage { grid-template-columns: 1fr; gap: 26px; } .bp-legend .bp-lyr, .bp-legend .bp-def { opacity: 1 !important; translate: 0 0 !important; } .bp-org-frame { opacity: 1 !important; scale: 1 !important; } .bp-org-tag { opacity: 1 !important; translate: 0 0 !important; } } /* supply chain of an answer (and its broken twin) */ .bp-stackflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); padding: clamp(4px, 0.8vw, 10px) 0 clamp(6px, 1vw, 12px); } .bp-flownode { position: relative; display: flex; flex-direction: column; gap: 7px; padding: clamp(13px, 1.7vw, 19px) clamp(14px, 1.9vw, 22px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-flownode b { font-family: var(--ts-display); font-size: clamp(17px, 1.8vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1; } .bp-flownode small { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; line-height: 1.5; color: rgb(16 20 23 / 0.65); } .bp-nodetag { width: fit-content; padding: 3px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: lowercase; } .bp-flownode.n-conn { transform: rotate(-0.6deg); } .bp-flownode.n-model { transform: rotate(0.5deg); background: #f2f5ff; } .bp-flownode.n-board { transform: rotate(-0.4deg); } .bp-flownode.ghost { background: none; border-style: dashed; border-color: rgb(16 20 23 / 0.45); box-shadow: none; } .bp-flownode.ghost b, .bp-flownode.ghost small { color: rgb(16 20 23 / 0.42); } .bp-flowlink { position: relative; align-self: center; width: clamp(24px, 3vw, 54px); border-top: 2.5px dashed var(--bp-dash); } .bp-flowlink .pkt { top: 0; translate: 0 -50%; } .in .bp-stackflow .bp-flowlink .pkt { animation: bp-run 2.4s ease-in-out infinite; } .in .bp-stackflow .bp-flowlink:last-of-type .pkt { animation-delay: 1.2s; } .bp-flowlink.dead { border-top-style: dotted; border-color: rgb(16 20 23 / 0.3); } /* requests strip (chat bubbles) */ .ts-asks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(12px, 1.8vw, 20px); margin-top: clamp(16px, 2.6vh, 28px); } .ts-asks .ts-chatmsg { position: relative; width: auto; max-width: 250px; } .ts-asks .ts-chatmsg:nth-child(1) { transform: rotate(-1.2deg); } .ts-asks .ts-chatmsg:nth-child(2) { transform: rotate(0.8deg) translateY(9px); } .ts-asks .ts-chatmsg:nth-child(3) { transform: rotate(-0.5deg); } .ts-asks .bp-badge { top: auto; bottom: -12px; } /* copyfail — the copy arriving in the wrong world */ .bp-copyfail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 64px); padding: clamp(16px, 3vh, 40px) clamp(4px, 2vw, 30px) clamp(20px, 3vh, 40px); } .bp-copyfail-op { font-family: var(--ts-mono); font-size: clamp(12px, 1.3vw, 16px); font-weight: 900; color: rgb(16 20 23 / 0.55); white-space: nowrap; } /* export → import → readjust workflow */ .bp-movesteps { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .bp-movestep { display: flex; align-items: center; gap: 9px; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; white-space: nowrap; } .bp-movestep b { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: var(--bp-soft); font-size: 11px; font-weight: 900; } .bp-movestep code { padding: 2px 7px; border: 1.5px solid var(--ink); border-radius: 5px; background: #fff; font-family: var(--ts-mono); font-weight: 900; } .bp-movestep.last { color: var(--red); } .bp-movestep.last b { background: none; border-style: dashed; border-color: var(--red); color: var(--red); } .bp-moveline { width: 2px; height: 12px; margin-left: 10px; background: var(--bp-dash); } .bp-fail { position: relative; width: clamp(230px, 26vw, 320px); } .bp-badrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fdfcf2; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; } .bp-badrow b { color: var(--red); font-weight: 900; white-space: nowrap; } /* why models publish too */ .bp-whycard { max-width: 620px; margin-top: clamp(16px, 2.6vh, 28px); } .bp-whycard .bp-mi-rows span { display: flex; gap: 9px; align-items: baseline; line-height: 1.5; } .bp-whycard .bp-mi-rows span b { color: var(--bp); flex: 0 0 auto; } .bp-whycard .bp-mi-rows span em { font-style: normal; background: linear-gradient(transparent 62%, var(--bp-soft) 62%); } /* variable map */ .bp-varwrap { overflow-x: auto; } .bp-varmap { display: grid; gap: 6px; min-width: 540px; } .bp-varmap-row { display: grid; grid-template-columns: minmax(130px, 1.15fr) repeat(3, 1fr); gap: 6px; } .bp-varmap-cell { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf5; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-varmap-row.head .bp-varmap-cell { background: var(--ink); color: var(--paper); } .bp-varmap-row.head .bp-varmap-cell:first-child { background: none; border: none; } .bp-varmap-dot { width: 10px; height: 10px; flex: 0 0 auto; border: 1.5px solid var(--paper); border-radius: 50%; } .bp-varmap-cell[data-org="a"] .bp-varmap-dot { background: var(--org-a); } .bp-varmap-cell[data-org="b"] .bp-varmap-dot { background: var(--org-b); } .bp-varmap-cell[data-org="c"] .bp-varmap-dot { background: var(--org-c); } .bp-varmap-cell.var { background: var(--bp-soft); border-style: dashed; border-color: var(--bp); font-weight: 900; } /* parameterise flip */ /* parameterise — unified code-diff panel */ .bp-param { width: min(100%, 720px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; margin-bottom: clamp(16px, 2.6vh, 28px); } .bp-param-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 2vw, 22px); background: var(--ink); color: var(--paper); } .bp-param-file { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; } .bp-param-badge { padding: 4px 11px; border-radius: 999px; background: var(--bp); color: #fff; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; white-space: nowrap; } .bp-param-body { padding: clamp(8px, 1.4vw, 14px) 0; } .bp-param-line { display: grid; grid-template-columns: minmax(66px, auto) auto 1fr auto 1fr; align-items: center; gap: clamp(8px, 1.4vw, 16px); padding: clamp(9px, 1.3vw, 13px) clamp(16px, 2.2vw, 26px); font-family: var(--ts-mono); font-size: clamp(12.5px, 1.3vw, 15px); font-weight: 800; text-transform: lowercase; } .bp-param-line:not(:last-child) { border-bottom: 1.5px dashed rgb(16 20 23 / 0.14); } .bp-param-key { font-weight: 900; } .bp-param-eq { color: rgb(16 20 23 / 0.4); } .bp-param-old { justify-self: start; color: rgb(16 20 23 / 0.45); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; } .bp-param-arr { color: var(--bp); font-weight: 900; } .bp-param-new { justify-self: start; padding: 4px 10px; border: 2px dashed var(--bp); border-radius: 8px; background: var(--bp-soft); color: var(--bp); font-weight: 900; } @media (max-width: 620px) { .bp-param-line { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 6px; } .bp-param-key { grid-column: 1 / -1; } .bp-param-eq { display: none; } .bp-param-arr { justify-self: center; } } .bp-flip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 26px); margin-bottom: clamp(16px, 2.6vh, 28px); } .bp-flip-card { flex: 1 1 250px; max-width: 380px; display: flex; flex-direction: column; gap: 9px; padding: clamp(14px, 1.8vw, 20px) clamp(15px, 2vw, 22px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-0.5deg); } .bp-flip-card.after { background: #f2f5ff; transform: rotate(0.5deg); } .bp-fliprow { display: flex; align-items: center; gap: 8px; font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; } .bp-fliprow s { color: rgb(16 20 23 / 0.5); text-decoration-color: var(--red); text-decoration-thickness: 2px; } .bp-flip-op { font-family: var(--ts-display); font-size: clamp(24px, 2.6vw, 40px); font-weight: 700; color: var(--bp); } /* legacy vs thoughtspot */ .bp-vs { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); } .bp-vs-lane { display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, 1.8vw, 22px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; } .bp-vs-lane.old { background: repeating-linear-gradient(-45deg, rgb(16 20 23 / 0.04) 0 10px, transparent 10px 20px), #fffdf5; transform: rotate(-0.3deg); } .bp-vs-lane.new { background: #f2f5ff; transform: rotate(0.3deg); box-shadow: 5px 5px 0 var(--ink); } .bp-vs-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .bp-vsnode { padding: 9px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fffdf5; font-family: var(--ts-mono); font-size: 13px; font-weight: 800; text-transform: lowercase; white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); } .bp-vs-lane.old .bp-vsnode { box-shadow: none; background: #fdfcf2; color: rgb(16 20 23 / 0.72); } .bp-vsnode.key { font-family: var(--ts-display); font-size: clamp(15px, 1.5vw, 21px); font-weight: 700; text-transform: uppercase; background: var(--bp); color: #fff; } .bp-vswire { position: relative; flex: 1 1 22px; min-width: 16px; max-width: 70px; border-top: 2.5px dashed var(--bp-dash); } .bp-vs-lane.old .bp-vswire { border-top-style: dotted; } .bp-vswire .pkt { top: 0; translate: 0 -50%; } .in .bp-vs-lane.new .bp-vswire .pkt { animation: bp-run 2s ease-in-out infinite; } .in .bp-vs-lane.new .bp-vswire:last-of-type .pkt { animation-delay: 1s; } .bp-vs-time { margin-left: auto; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; white-space: nowrap; } .bp-vs-time.slow { background: #fdfcf2; color: var(--red); border-style: dashed; } .bp-vs-time.fast { background: var(--bp); color: #fff; box-shadow: 2px 2px 0 var(--ink); } .bp-vs-div { align-self: center; font-family: var(--ts-display); font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(16 20 23 / 0.45); } /* supply-chain node glyphs */ .bp-nodeviz { display: flex; align-items: flex-end; gap: 4px; margin: 3px 0 1px; min-height: 30px; } .viz-conn { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; } .viz-conn i { width: 38px; height: 8px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--bp-soft); } .viz-conn i:nth-child(2) { width: 30px; } .viz-model { display: grid; grid-template-columns: repeat(3, 22px); gap: 4px; align-items: stretch; } .viz-model i { height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; background: #fffdf5; } .viz-model i:nth-child(2), .viz-model i:nth-child(6) { background: var(--bp-soft); } .viz-model i:nth-child(4) { background: var(--bp); } .viz-board i { width: 11px; border: 1.5px solid var(--ink); border-bottom-width: 0; border-radius: 3px 3px 0 0; background: var(--bp-soft); } .viz-board i:nth-child(1) { height: 12px; } .viz-board i:nth-child(2) { height: 20px; } .viz-board i:nth-child(3) { height: 15px; } .viz-board i:nth-child(4) { height: 27px; background: var(--bp-purple); } .viz-board i:nth-child(5) { height: 22px; } @media (max-width: 900px) { .bp-stackflow { grid-template-columns: 1fr; } .bp-flowlink { width: 0; height: 26px; border-top: 0; border-left: 2.5px dashed var(--bp-dash); justify-self: center; } .bp-flowlink.dead { border-left-style: dotted; } .bp-flowlink .pkt { display: none; } .bp-copyfail-op { width: 100%; text-align: center; } .bp-varmap { min-width: 480px; } .bp-flip-op { width: 100%; text-align: center; } .bp-vs-time { margin-left: 0; } } /* ========================================================= security stack · isometric, scroll to expand, hover to focus ========================================================= */ .bp-sec { position: relative; height: 280vh; margin: clamp(20px, 4vh, 44px) 0; } .bp-sec-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vh, 60px) 0; } /* balanced two-column header */ .bp-sec-head { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(20px, 4vw, 60px); margin-bottom: clamp(10px, 2vh, 22px); } .bp-sec-head .bp-h3 { margin: 0; } .bp-sec-head .bp-sub { margin: 0; max-width: 460px; } .bp-sec-stage { display: grid; grid-template-columns: minmax(210px, 270px) minmax(300px, 1fr) minmax(230px, 300px); align-items: center; gap: clamp(10px, 1.6vw, 28px); margin-top: clamp(40px, 8vh, 96px); } /* left — plain titles with a pointer toward the tower */ .bp-sec-titles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(20px, 3.6vh, 42px); } .bp-sec-title { display: flex; align-items: center; gap: 12px; cursor: pointer; opacity: 0; translate: -10px 0; transition: opacity 460ms var(--ease-play), translate 460ms var(--ease-play); } .bp-sec-txt { flex: 0 0 auto; } /* the pointer line + dot reaching toward the stack */ .bp-sec-point { flex: 1; position: relative; height: 2px; min-width: 40px; background: rgb(41 71 255 / 0.2); transition: background 320ms var(--ease-smooth), transform 320ms var(--ease-smooth); transform-origin: left center; } .bp-sec-point::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; translate: 0 -50%; border-radius: 50%; background: rgb(41 71 255 / 0.28); transition: background 320ms var(--ease-smooth), scale 320ms var(--ease-smooth); } .bp-sec.s2 .bp-sec-title { opacity: 1; translate: 0 0; } .bp-sec.s2 .bp-sec-title:nth-child(2) { transition-delay: 60ms; } .bp-sec.s2 .bp-sec-title:nth-child(3) { transition-delay: 120ms; } .bp-sec.s2 .bp-sec-title:nth-child(4) { transition-delay: 180ms; } .bp-sec.s2 .bp-sec-title:nth-child(5) { transition-delay: 240ms; } .bp-sec-title b { display: block; font-family: var(--ts-display); font-size: clamp(16px, 1.7vw, 22px); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: var(--ink); transition: color 220ms; } .bp-sec-title small { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.45); } .bp-sec-title.is-active b { color: var(--bp); } .bp-sec-title.is-active .bp-sec-point { background: var(--bp); transform: scaleX(1.06); } .bp-sec-title.is-active .bp-sec-point::after { background: var(--bp); scale: 1.55; } .bp-sec-title:not(.is-active):hover b { color: rgb(16 20 23 / 0.6); } /* center — the isometric tower (hero) */ .bp-sec-tower { position: relative; height: clamp(400px, 50vh, 580px); transform-style: preserve-3d; } .bp-splate { position: absolute; left: 50%; top: 50%; width: clamp(220px, 24vw, 300px); height: clamp(140px, 15vw, 190px); margin: calc(clamp(140px, 15vw, 190px) / -2) 0 0 calc(clamp(220px, 24vw, 300px) / -2); border: 2.5px solid rgb(41 71 255 / 0.34); border-radius: 16px; background: rgb(41 71 255 / 0.06); transform: translate3d(0, var(--ty, 0px), 0) rotateX(55deg) rotateZ(-45deg) translateZ(var(--lift, 0px)) scale(var(--sc, 1)); transition: transform 520ms var(--ease-smooth), border-color 340ms ease, background 340ms ease, box-shadow 340ms ease; cursor: pointer; } /* expand: closer spread so the slabs stay a stack, completes by p≈0.66 */ .bp-splate[data-l="1"] { --base: -168px; z-index: 5; } .bp-splate[data-l="2"] { --base: -84px; z-index: 4; } .bp-splate[data-l="3"] { --base: 0px; z-index: 3; } .bp-splate[data-l="4"] { --base: 84px; z-index: 2; } .bp-splate[data-l="5"] { --base: 168px; z-index: 1; } .bp-splate { --ty: calc(var(--base) * min(calc(var(--p, 0) * 1.5), 1)); } /* gate interaction until expanded */ .bp-sec:not(.s2) .bp-splate, .bp-sec:not(.s2) .bp-sec-title { pointer-events: none; } /* active plate: subtle lift, turns solid blue (flat) */ .bp-splate.is-active { --lift: 16px; --sc: 1.03; z-index: 9; border-color: var(--ink); background: var(--bp); } .bp-splate-face { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 9px; } .bp-splate-face.center { align-items: center; justify-content: center; } /* motifs — faint bluish by default, crisp white on the active blue plate */ .bp-splate .bp-plate-dot i { width: 8px; height: 8px; border: 1.5px solid rgb(41 71 255 / 0.5); border-radius: 50%; background: none; } .bp-splate .bp-ui-row { height: 9px; border-radius: 5px; background: rgb(41 71 255 / 0.2); } .bp-splate .bp-ui-row.w60 { width: 60%; } .bp-splate .bp-ui-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .bp-splate .bp-ui-grid i { border: 2px dashed rgb(41 71 255 / 0.35); border-radius: 7px; } .bp-avatars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 13px; } .bp-avatars i { width: 19px; height: 19px; border: 2px solid rgb(41 71 255 / 0.5); border-radius: 50%; background: rgb(41 71 255 / 0.1); } .bp-avatars.solo i { opacity: 0.4; background: none; } .bp-avatars.solo i.me { opacity: 1; border-color: var(--bp); background: rgb(41 71 255 / 0.35); } .bp-cols { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bp-cols span { border: 2px solid rgb(41 71 255 / 0.5); border-radius: 6px; background: rgb(41 71 255 / 0.1); } .bp-cols span.lock { background: repeating-linear-gradient(45deg, rgb(41 71 255 / 0.5) 0 4px, transparent 4px 8px); } .bp-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; } .bp-rows span { flex: 1; border: 2px solid rgb(41 71 255 / 0.5); border-radius: 6px; background: rgb(41 71 255 / 0.1); } .bp-rows span.lock { background: repeating-linear-gradient(45deg, rgb(41 71 255 / 0.5) 0 4px, transparent 4px 8px); } /* active plate — invert motifs to white */ .bp-splate.is-active .bp-plate-dot i { border-color: rgb(255 255 255 / 0.9); } .bp-splate.is-active .bp-ui-row { background: rgb(255 255 255 / 0.55); } .bp-splate.is-active .bp-ui-grid i { border-color: rgb(255 255 255 / 0.65); } .bp-splate.is-active .bp-avatars i { border-color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.3); opacity: 1; } .bp-splate.is-active .bp-avatars.solo i { opacity: 0.5; background: none; } .bp-splate.is-active .bp-avatars.solo i.me { opacity: 1; border-color: #fff; background: #fff; } .bp-splate.is-active .bp-cols span, .bp-splate.is-active .bp-rows span { border-color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.28); } .bp-splate.is-active .bp-cols span.lock, .bp-splate.is-active .bp-rows span.lock { background: repeating-linear-gradient(45deg, #fff 0 4px, transparent 4px 8px); } /* right — quiet one-line description, only on hover */ .bp-sec-desc { position: relative; min-height: clamp(120px, 16vh, 160px); } .bp-desc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding-left: clamp(16px, 1.6vw, 22px); border-left: 2.5px solid var(--bp); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity 300ms var(--ease-play), translate 300ms var(--ease-play), visibility 300ms; } .bp-desc.is-active { opacity: 1; visibility: visible; translate: 0 0; } /* default panel — visible until a layer is hovered */ .bp-desc.bp-desc-default { opacity: 1; visibility: visible; translate: 0 0; border-left-color: rgb(41 71 255 / 0.35); } .bp-desc.bp-desc-default .bp-desc-lab { color: rgb(41 71 255 / 0.7); } .bp-desc.bp-desc-default p { color: rgb(16 20 23 / 0.6); } .bp-sec-desc:has(.bp-desc.is-active) .bp-desc-default { opacity: 0; visibility: hidden; } .bp-desc-lab { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; color: var(--bp); } .bp-desc p { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; text-wrap: pretty; } @media (max-width: 1000px) { /* no pin, pre-expanded, tap to focus */ .bp-sec { height: auto; margin: 30px 0; } .bp-sec-pin { position: static; min-height: 0; padding: 0; } .bp-sec-head { grid-template-columns: 1fr; align-items: start; gap: 14px; } .bp-sec-head .bp-sub { align-self: start; } .bp-sec-stage { grid-template-columns: 1fr; gap: 24px; } .bp-sec-titles { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; } .bp-sec-title { opacity: 1 !important; translate: 0 0 !important; } .bp-sec-point { display: none; } .bp-sec-tower { height: clamp(360px, 78vw, 520px); } .bp-splate { --ty: var(--base); pointer-events: auto !important; } .bp-sec-title { pointer-events: auto !important; } .bp-sec-desc { min-height: 90px; } } @media (prefers-reduced-motion: reduce) { .bp-sec { height: auto; margin: 30px 0; } .bp-sec-pin { position: static; min-height: 0; padding: 0; } .bp-sec-title { opacity: 1 !important; translate: 0 0 !important; } .bp-splate { --ty: var(--base); transition: none; } } /* ========================================================= §03 · THE PROCESS — flows · stories · tenets · flowchart replicas · prototype loop · culture closer ========================================================= */ /* ---------- route map · five moves ---------- */ .bp-proc { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 8px clamp(6px, 0.8vw, 12px); align-items: stretch; padding-bottom: 18px; } .bp-proc-step { position: relative; display: flex; flex-direction: column; gap: 7px; padding: clamp(14px, 1.7vw, 22px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-proc-step:nth-of-type(1) { transform: rotate(-0.5deg); } .bp-proc-step:nth-of-type(3) { transform: rotate(0.4deg); } .bp-proc-step:nth-of-type(4), .bp-proc-step:nth-of-type(5) { background: #f2f5ff; } .bp-proc-step:nth-of-type(5) { transform: rotate(-0.3deg); } .bp-proc-n { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; letter-spacing: 0.06em; color: var(--bp); } .bp-proc-step h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 21px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-proc-step p { margin: 0; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; line-height: 1.5; text-transform: lowercase; color: rgb(16 20 23 / 0.62); } .bp-proc-arrow { align-self: center; font-family: var(--ts-display); font-size: clamp(16px, 1.8vw, 24px); font-weight: 700; color: var(--bp); } .bp-proc-loop { grid-column: 7 / 10; grid-row: 2; position: relative; height: 24px; margin: 0 12px; border: 2.5px dashed rgb(41 71 255 / 0.5); border-top: none; border-radius: 0 0 18px 18px; } .bp-proc-loop span { position: absolute; left: 50%; top: 100%; translate: -50% -55%; white-space: nowrap; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } /* ---------- three questions per flow ---------- */ .bp-qtrio { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(18px, 3vh, 30px); } .bp-q { display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 15px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .bp-q b { font-weight: 900; color: var(--bp); } /* ---------- the five flows ---------- */ .bp-flowdeck { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(10px, 1.4vw, 16px); } .bp-flowcard { display: flex; flex-direction: column; gap: 8px; padding: clamp(15px, 1.8vw, 22px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-flowcard:nth-of-type(odd) { transform: rotate(-0.4deg); } .bp-flowcard:nth-of-type(even) { transform: rotate(0.35deg); } .bp-flowcard:nth-of-type(3) { background: #f2f5ff; } .bp-flowcard-n { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.06em; color: var(--bp); text-transform: lowercase; } .bp-flowcard h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; line-height: 1.04; } .bp-flowcard p { margin: 0; font-size: var(--cs-fine); font-weight: 500; line-height: 1.5; color: rgb(16 20 23 / 0.75); text-wrap: pretty; } .bp-flowcard code { margin-top: auto; width: fit-content; padding: 4px 9px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } /* ---------- user stories ---------- */ .bp-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); } .bp-story { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-story:nth-of-type(1) { transform: rotate(-0.5deg); } .bp-story:nth-of-type(2) { transform: rotate(0.4deg); background: #f2f5ff; } .bp-story:nth-of-type(3) { transform: rotate(-0.3deg); } .bp-story-who { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; } .bp-story-who i { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-lite); } .bp-story p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; text-wrap: pretty; } .bp-story p b { display: block; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bp); margin-bottom: 2px; } .bp-stories-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(14px, 2vh, 22px); padding: 13px 16px; border: 2px dashed var(--bp-dash); border-radius: 12px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(16 20 23 / 0.68); } .bp-stories-foot b { padding: 3px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); font-weight: 900; color: var(--ink); white-space: nowrap; } /* ---------- tenets ---------- */ .bp-tenets { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.8vw, 22px); } .bp-tenet { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border: 3px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 6px 6px 0 var(--ink); } .bp-tenet:nth-of-type(1) { background: var(--ink); color: var(--paper); transform: rotate(-0.5deg); } .bp-tenet:nth-of-type(2) { transform: rotate(0.4deg); } .bp-tenet:nth-of-type(3) { transform: rotate(0.3deg); background: #f2f5ff; } .bp-tenet:nth-of-type(4) { transform: rotate(-0.35deg); } .bp-tenet-n { width: fit-content; padding: 3px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.07em; text-transform: lowercase; } .bp-tenet h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(19px, 2.1vw, 28px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-tenet p { margin: 0; font-size: var(--cs-small); line-height: 1.55; color: rgb(16 20 23 / 0.75); text-wrap: pretty; } .bp-tenet:nth-of-type(1) p { color: rgb(255 248 223 / 0.75); } .bp-tenet-use { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2.6vh, 28px); } .bp-tu-q, .bp-tu-a { padding: 9px 15px; border: 2px solid var(--ink); border-radius: 12px 12px 12px 3px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .bp-tu-a { border-radius: 12px 12px 3px 12px; background: var(--bp); color: #fff; transform: rotate(0.6deg); } .bp-tu-wire { position: relative; flex: 0 1 clamp(24px, 4vw, 64px); height: 0; border-top: 2.5px dashed var(--bp-dash); } /* ---------- variable-first vs publish-first ---------- */ .bp-order { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); } .bp-order-lane { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: clamp(13px, 1.7vw, 20px); border: 2.5px solid var(--ink); border-radius: 14px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-order-lane:nth-of-type(2) { background: #f2f5ff; transform: rotate(0.25deg); } .bp-order-lab { padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; white-space: nowrap; } .bp-order-lane small { flex-basis: 100%; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .bp-order-verdict { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); border: 3px solid var(--ink); border-radius: 14px; background: var(--bp); color: #fff; box-shadow: 5px 5px 0 var(--ink); font-family: var(--ts-mono); font-size: clamp(13px, 1.25vw, 15px); font-weight: 800; line-height: 1.6; text-transform: lowercase; transform: rotate(-0.35deg); } .bp-order-verdict b { color: var(--yellow); font-weight: 900; } /* ---------- flowchart primitives ---------- */ .fc { display: flex; flex-direction: column; } .fc-lane { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 8px; padding: 7px 0; } .fc-node { padding: 9px 13px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: 3px 3px 0 rgb(16 20 23 / 0.22); font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; line-height: 1.35; } .fc-node small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; opacity: 0.8; } .fc-node.start, .fc-node.safe { background: var(--org-c); } .fc-node.end { background: var(--org-c); font-weight: 900; box-shadow: 3px 3px 0 var(--ink); } .fc-node.danger { background: var(--red); color: #fff; } .fc-node.hotink { background: var(--ink); color: var(--paper); } .fc-node.ghost { border-style: dashed; background: none; box-shadow: none; color: rgb(16 20 23 / 0.6); } .fc-dia { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: clamp(96px, 9.5vw, 118px); height: clamp(96px, 9.5vw, 118px); } .fc-dia::before { content: ""; position: absolute; inset: 13%; background: var(--ink); border-radius: 12px; rotate: 45deg; box-shadow: 3px 3px 0 rgb(16 20 23 / 0.22); } .fc-dia span { position: relative; z-index: 1; max-width: 80%; text-align: center; color: var(--paper); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; line-height: 1.3; text-transform: lowercase; } .fc-wire { position: relative; flex: 1 1 clamp(14px, 2vw, 34px); max-width: clamp(24px, 3vw, 48px); height: 0; border-top: 2.5px dashed var(--bp-dash); } .fc-wire b { position: absolute; left: 50%; bottom: 5px; translate: -50% 0; font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; color: rgb(16 20 23 / 0.55); white-space: nowrap; } .fc-wire.no b { color: var(--red); } .fc-wire.yes b { color: var(--bp); } .fc-drop { position: relative; width: 0; height: clamp(20px, 3vh, 32px); margin-left: clamp(48px, 14%, 180px); border-left: 2.5px dashed var(--bp-dash); } .fc-drop b { position: absolute; left: 10px; top: 50%; translate: 0 -50%; font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; color: rgb(16 20 23 / 0.55); white-space: nowrap; } .fc-loop { padding: 7px 13px; border: 2px dashed rgb(41 71 255 / 0.55); border-radius: 999px; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; color: var(--bp); background: rgb(223 231 255 / 0.4); } .fc-mini { display: flex; flex-direction: column; gap: 5px; max-width: 250px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 rgb(16 20 23 / 0.22); } .fc-mini > b { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.03em; } .fc-mini s { text-decoration: none; padding: 4px 8px; border: 1.5px solid var(--ink); border-radius: 7px; background: #fffdf5; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; line-height: 1.35; } .fc-mini s.pre { background: var(--bp-soft); } .fc-mini s.hot { background: var(--yellow); } .fc-mini em { font-style: normal; font-family: var(--ts-mono); font-size: 9.5px; font-weight: 800; line-height: 1.45; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .fc-mini.cyan { background: #eef3ff; } .fc-mini.yellow { background: #fff6d8; } .fc-mini.purple { background: var(--bp-purple-soft); } .fc-sticky { margin-left: auto; max-width: 240px; padding: 10px 13px; border: 2px solid var(--ink); border-radius: 3px 14px 3px 14px; background: var(--yellow); box-shadow: 3px 3px 0 rgb(16 20 23 / 0.3); rotate: -1.6deg; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; line-height: 1.5; text-transform: lowercase; } .fc-sticky b { font-weight: 900; background: rgb(255 255 255 / 0.55); padding: 0 3px; border-radius: 3px; } .fc-fan { display: flex; flex-direction: column; gap: 9px; } .fc-fan-row { display: flex; align-items: center; gap: 8px; } .fc-fan-row .fc-wire { flex: 0 0 clamp(20px, 2.6vw, 40px); } /* fig head + journey toggle */ .fc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; } .fc-jt { display: flex; flex-wrap: wrap; gap: 8px; } .fc-jt-btn { padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 11px; font-weight: 800; color: var(--ink); cursor: pointer; transition: transform 300ms var(--ease-play), box-shadow 300ms var(--ease-play), background 200ms ease, color 200ms ease; } .fc-jt-btn:hover { transform: translateY(-2px) rotate(-1deg); background: var(--bp-soft); } .fc-jt-btn.is-active { background: var(--bp); color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } /* journey dim modes */ .bp-pubflow [data-j] { transition: opacity 320ms ease, filter 320ms ease; } .bp-pubflow[data-mode="short"] [data-j]:not([data-j*="s"]), .bp-pubflow[data-mode="long"] [data-j]:not([data-j*="l"]) { opacity: 0.15; filter: grayscale(1); } .bp-pubflow[data-mode="short"] .fc-node[data-j*="s"], .bp-pubflow[data-mode="short"] .fc-mini[data-j*="s"], .bp-pubflow[data-mode="long"] .fc-node[data-j*="l"], .bp-pubflow[data-mode="long"] .fc-mini[data-j*="l"] { box-shadow: 3px 3px 0 var(--bp); } .bp-pubflow[data-mode="short"] .fc-obs-row.jlong, .bp-pubflow[data-mode="long"] .fc-obs-row.jshort { opacity: 0.3; } /* legend + observations */ .fc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: clamp(12px, 1.8vh, 18px); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .fc-legend i { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; border: 1.5px solid var(--ink); border-radius: 4px; } .fc-legend i.pre { background: var(--bp-soft); } .fc-legend i.var { background: var(--yellow); } .fc-legend i.org { background: var(--bp-purple-soft); } .fc-legend i.go { background: var(--org-c); } .fc-obs { display: flex; flex-direction: column; gap: 9px; margin-top: clamp(14px, 2vh, 22px); padding: 14px 16px; border: 2px dashed var(--bp-dash); border-radius: 12px; } .fc-obs-h { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: rgb(16 20 23 / 0.5); } .fc-obs-row { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; line-height: 1.7; text-transform: lowercase; transition: opacity 320ms ease; } .fc-obs-row b { padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 999px; margin-right: 8px; font-weight: 900; white-space: nowrap; } .fc-obs-row b.short { background: var(--org-c); } .fc-obs-row b.long { background: var(--yellow); } /* ---------- variables matrix ---------- */ .vm-spine { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 8px; margin-bottom: clamp(14px, 2vh, 22px); } .vm-spine-note { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .vm-scroll { overflow-x: auto; padding-bottom: 6px; } .bp-varmatrix { min-width: 780px; display: grid; grid-template-columns: minmax(160px, 1.15fr) 1.5fr 0.9fr 0.85fr 1fr; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff; } .vm-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 11px 13px; border-top: 1.5px solid rgb(16 20 23 / 0.16); } .vm-cell + .vm-cell { border-left: 0; } .vm-cell:not(:nth-child(5n + 1)) { border-left: 1.5px solid rgb(16 20 23 / 0.16); } .vm-cell.vm-h { border-top: 0; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; } .vm-cell.fx { background: #fff6d8; } .vm-name { display: flex; flex-direction: column; gap: 3px; font-family: var(--ts-mono); font-size: 12px; font-weight: 900; text-transform: lowercase; } .vm-name small { font-size: 10px; font-weight: 800; color: rgb(16 20 23 / 0.5); } .vm-badge { width: fit-content; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 9.5px; font-weight: 900; } .vm-chip { padding: 3px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffdf5; font-family: var(--ts-mono); font-size: 10px; font-weight: 800; text-transform: lowercase; white-space: nowrap; } .vm-chip.on { background: var(--bp-soft); } .vm-chip.multi { background: var(--bp); color: #fff; font-weight: 900; } .vm-no { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; color: var(--red); } .vm-dash { font-family: var(--ts-mono); font-size: 11px; font-weight: 800; color: rgb(16 20 23 / 0.3); } /* ---------- three doors ---------- */ .bp-doors { display: grid; grid-template-columns: minmax(190px, 250px) clamp(26px, 4vw, 56px) 1fr; gap: 12px 0; align-items: center; } .bp-door { padding: 13px 15px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); } .bp-door:nth-of-type(1) { transform: rotate(-0.6deg); } .bp-door:nth-of-type(3) { transform: rotate(0.5deg); } .bp-door b { display: block; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: var(--bp); } .bp-door span { display: block; margin-top: 2px; font-family: var(--ts-display); font-size: clamp(14px, 1.5vw, 19px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .bp-door small { display: block; margin-top: 5px; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; line-height: 1.5; text-transform: lowercase; color: rgb(16 20 23 / 0.58); } .bp-door-wire { height: 0; border-top: 2.5px dashed var(--bp-dash); } .bp-doors-loop { grid-column: 3; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 13px; padding: clamp(16px, 2.2vw, 26px); border: 3px solid var(--ink); border-radius: 16px; background: var(--bp-soft); box-shadow: 5px 5px 0 var(--ink); } .bp-doors-loop > b { font-family: var(--ts-display); font-size: clamp(17px, 1.9vw, 25px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-doors-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .bp-doors-exit { padding-top: 11px; border-top: 2px dashed rgb(41 71 255 / 0.5); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; line-height: 1.65; text-transform: lowercase; color: rgb(16 20 23 / 0.68); } .bp-doors-exit b { font-weight: 900; color: var(--ink); } /* ---------- prototype loop ---------- */ .bp-iter-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); } .bp-iter-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .bp-iter-card:nth-of-type(1) { transform: rotate(-0.5deg); } .bp-iter-card:nth-of-type(2) { transform: rotate(0.4deg); background: #f2f5ff; } .bp-iter-card:nth-of-type(3) { transform: rotate(-0.3deg); } .bp-iter-tag { width: fit-content; padding: 4px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; } .bp-iter-card h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .bp-iter-card p { margin: 0; font-size: var(--cs-fine); font-weight: 500; line-height: 1.5; color: rgb(16 20 23 / 0.75); text-wrap: pretty; } .bp-iter-slot { position: relative; height: clamp(130px, 13vw, 175px); border: 2.5px dashed rgb(16 20 23 / 0.4); border-radius: 12px; background: rgb(255 253 245 / 0.6); overflow: hidden; } .bp-iter-slot image-slot { position: absolute; inset: 0; } .bp-iter-card code { width: fit-content; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 7px; background: #fffdf5; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .bp-iter-cycle { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 8px; margin-top: clamp(16px, 2.6vh, 26px); padding: clamp(13px, 1.7vw, 19px) clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .bp-iter-cycle .fc-loop { margin-left: 2px; } .bp-iter-exit { margin-left: auto; padding: 7px 13px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; white-space: nowrap; } /* ---------- §03 responsive ---------- */ @media (max-width: 980px) { .bp-proc { grid-template-columns: 1fr; } .bp-proc-arrow { transform: rotate(90deg); text-align: center; justify-self: center; } .bp-proc-loop { display: none; } } @media (max-width: 900px) { .bp-stories { grid-template-columns: 1fr; } .bp-iter-cards { grid-template-columns: 1fr; } .bp-doors { grid-template-columns: 1fr; } .bp-door-wire { display: none; } .bp-doors-loop { grid-column: 1; grid-row: auto; } } @media (max-width: 720px) { .bp-tenets { grid-template-columns: 1fr; } .fc-dia { width: 86px; height: 86px; } .fc-dia span { font-size: 9.5px; } .fc-sticky { margin-left: 0; rotate: -1deg; } .fc-drop { margin-left: 36px; } .bp-iter-exit { margin-left: 0; } } /* ========================================================= §03c · flowchart rework — solid arrows with heads, yes/no branch colors, simple↔detail views ========================================================= */ .fc-wire { flex: 1 1 clamp(22px, 2.8vw, 46px); max-width: clamp(36px, 4.2vw, 64px); border-top: 3px solid var(--ink); } .fc-wire::after { content: ""; position: absolute; right: -2px; top: -6px; width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } .fc-wire b { bottom: 6px; color: rgb(16 20 23 / 0.7); } .fc-wire.yes { border-top-color: var(--bp); } .fc-wire.yes::after { border-left-color: var(--bp); } .fc-wire.yes b { color: var(--bp); } .fc-wire.no b { color: var(--red); } .fc-drop { height: clamp(28px, 3.6vh, 44px); border-left: 3px solid var(--ink); } .fc-drop::after { content: ""; position: absolute; left: -6px; bottom: -2px; width: 0; height: 0; border-top: 9px solid var(--ink); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; } .fc-drop b { color: rgb(16 20 23 / 0.7); } .fc-drop.yes { border-left-color: var(--bp); } .fc-drop.yes::after { border-top-color: var(--bp); } .fc-drop.yes b { color: var(--bp); } .bp-door-wire { position: relative; border-top: 3px solid var(--ink); } .bp-door-wire::after { content: ""; position: absolute; right: -2px; top: -6px; width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } /* depth views */ .fc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .fc-panel .fc-view { display: none; } .fc-panel[data-depth="simple"] .fc-view.simple { display: flex; flex-direction: column; } .fc-panel[data-depth="detail"] .fc-view.detail { display: flex; flex-direction: column; } .fc-panel[data-depth="simple"] .fc-jt.journeys, .fc-panel[data-depth="simple"] .fc-legend, .fc-panel[data-depth="simple"] .fc-obs { display: none; } .fc-view.simple .fc-lane { padding: 10px 0; } .fc-view.simple .fc-node { font-size: 13px; padding: 11px 15px; } .fc-view.simple .fc-node small { font-size: 10px; } .fc-view.simple .fc-dia { width: clamp(88px, 8.5vw, 106px); height: clamp(88px, 8.5vw, 106px); } .fc-view.detail { padding-top: 4px; } .fc-view.detail .vm-scroll { order: 0; } .vm-simple-note { padding-top: 8px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(16 20 23 / 0.58); } /* ========================================================= §03d · flowchart legibility fixes ========================================================= */ .fc-dia::before { inset: 6%; } .fc-dia span { max-width: 64%; font-size: 9.5px; } .fc-wire.grow { flex: 1 1 clamp(20px, 2.6vw, 40px); max-width: none; } .fc-vwire { position: relative; width: 0; height: clamp(16px, 2.2vh, 26px); margin-left: 24px; border-left: 3px solid var(--ink); } .fc-vwire::after { content: ""; position: absolute; left: -6px; bottom: -2px; width: 0; height: 0; border-top: 9px solid var(--ink); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; } .bp-doors-steps { flex-direction: column; align-items: flex-start; gap: 6px; } /* ========================================================= §03e · depth switcher — a control outside the diagram ========================================================= */ .fc-switch { display: flex; justify-content: flex-end; margin-bottom: 12px; } .fc-seg { display: inline-flex; border: 2.5px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; } .fc-seg button { appearance: none; border: 0; margin: 0; padding: 8px 18px; background: none; color: var(--ink); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.02em; cursor: pointer; transition: background 200ms ease, color 200ms ease; } .fc-seg button + button { border-left: 2.5px solid var(--ink); } .fc-seg button:hover { background: var(--bp-soft); } .fc-seg button.is-active { background: var(--bp); color: #fff; } /* ========================================================= §03f · lane-wrap fixes — no dangling arrowheads ========================================================= */ .fc-lane { flex-wrap: nowrap; } .fc-lane .fc-node, .fc-lane .fc-mini { min-width: 0; } .fc-node { flex-shrink: 1; } .fc-wire { flex: 1 1 clamp(18px, 2.2vw, 40px); min-width: 18px; } .fc-sticky { flex-shrink: 1; } /* fan wires: give labels their own room, keep them off the diamond */ .fc-wire.fan { flex: 0 0 clamp(74px, 8vw, 110px); max-width: none; } .fc-wire.fan b { bottom: 6px; } @media (max-width: 720px) { /* small screens: lanes become columns with vertical connectors */ .fc-lane { flex-wrap: wrap; } } /* ========================================================= §03g · fix nowrap squeeze — let node text wrap, not clip ========================================================= */ .fc-node { min-width: 0; overflow-wrap: break-word; text-wrap: balance; } .fc-mini { min-width: 0; flex-shrink: 1; } .fc-mini s { overflow-wrap: break-word; white-space: normal; } .fc-mini > b { overflow-wrap: break-word; } @media (max-width: 1100px) { .fc-view.detail .fc-node { font-size: 11px; padding: 8px 10px; } .fc-view.detail .fc-mini { padding: 8px 10px; } .fc-view.detail .fc-mini s { font-size: 9.5px; padding: 3px 6px; } .fc-view.detail .fc-mini > b { font-size: 10px; } .fc-view.detail .fc-sticky { display: none; } .fc-view.detail .fc-dia { width: 82px; height: 82px; } .fc-view.detail .fc-dia span { font-size: 9px; } } /* keep the "update" label clear of the diamond tip */ .fc-wire.yes b { translate: -42% 0; } /* ========================================================= §03h · no mid-word breaks — words stay whole in nodes ========================================================= */ .fc-node { overflow-wrap: normal; word-break: keep-all; text-wrap: balance; } /* ========================================================= §04 · THE DESIGN — variables walkthrough ========================================================= */ .vd-day { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; } .vd-persona { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.2vw, 28px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.35deg); } .vd-persona p { margin: 0; font-size: var(--cs-small); font-weight: 500; line-height: 1.55; text-wrap: pretty; } .vd-persona p b { background: var(--yellow); padding: 0 4px; border-radius: 4px; } .vd-persona-tag { width: fit-content; padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; } .vd-todo { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.2vw, 26px); border: 3px solid var(--ink); border-radius: 16px; background: var(--bp-soft); box-shadow: 5px 5px 0 var(--ink); transform: rotate(0.4deg); } .vd-todo-h { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .vd-todo-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 11px; background: #fffdf5; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .vd-todo-item i { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font-style: normal; font-size: 12px; font-weight: 900; } .vd-todo-item.done { opacity: 0.85; text-decoration: line-through; text-decoration-thickness: 2px; } .vd-todo-item.done i { background: var(--yellow); } .vd-todo-item.active { background: #fff; box-shadow: 3px 3px 0 var(--bp); border-color: var(--bp); } .vd-todo-item em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--bp); white-space: nowrap; } .vd-day.return .vd-persona { transform: rotate(0.35deg); } .vd-day.return .vd-todo { transform: rotate(-0.3deg); } .vd-shotframe { position: relative; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 6px 6px 0 var(--ink); } .vd-shotframe img { display: block; width: 100%; height: auto; border-radius: 13px; } .vd-walk { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; } .vd-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; } .vd-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; text-align: left; padding: 13px 15px; border: 2.5px solid var(--ink); border-radius: 13px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 300ms var(--ease-play), box-shadow 300ms var(--ease-play), background 200ms ease; } .vd-step:hover { transform: translateY(-2px); background: var(--bp-soft); } .vd-step.is-active { background: var(--ink); color: var(--paper); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--bp); } .vd-step b { grid-row: 1 / 3; font-family: var(--ts-display); font-size: 22px; font-weight: 700; color: var(--bp); } .vd-step.is-active b { color: var(--bp-lite); } .vd-step span { font-family: var(--ts-display); font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: 1.05; } .vd-step em { grid-column: 2; font-style: normal; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .vd-step.is-active em { color: rgb(255 248 223 / 0.6); } .vd-pane { display: none; } .vd-pane.is-active { display: flex; flex-direction: column; gap: 12px; } .vd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .vd-chips-lab { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; color: rgb(16 20 23 / 0.55); } .vd-chip { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; color: var(--ink); cursor: pointer; transition: transform 300ms var(--ease-play), box-shadow 300ms var(--ease-play), background 200ms ease, color 200ms ease; } .vd-chip:hover { transform: translateY(-2px) rotate(-1deg); background: var(--bp-soft); } .vd-chip.is-active { background: var(--bp); color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } .vd-shot { display: none; } .vd-shot.is-active { display: block; animation: vd-in 360ms var(--ease-play); } @keyframes vd-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } .vd-shot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 5px 5px 0 var(--ink); } .vd-note { margin: 10px 0 0; padding: 11px 14px; border: 2px dashed var(--bp-dash); border-radius: 11px; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; line-height: 1.65; text-transform: lowercase; color: rgb(16 20 23 / 0.72); } .vd-note b { color: var(--ink); background: var(--yellow); padding: 0 4px; border-radius: 3px; } .vd-note a { color: var(--bp); } @media (max-width: 900px) { .vd-day { grid-template-columns: 1fr; } .vd-walk { grid-template-columns: 1fr; } .vd-rail { position: static; flex-direction: row; flex-wrap: wrap; } .vd-step { flex: 1 1 140px; } } /* ========================================================= §04b · primer cards + scroll-driven walkthrough ========================================================= */ .vd-primer { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(12px, 1.8vw, 22px); align-items: start; } .vd-prim-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.3deg); } .vd-prim-card.scope { background: #f2f5ff; transform: rotate(0.3deg); } .vd-prim-h { font-family: var(--ts-display); font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .vd-prim-list { display: flex; flex-direction: column; gap: 7px; } .vd-prim-row { display: grid; grid-template-columns: minmax(118px, auto) 1fr; align-items: baseline; gap: 10px; padding: 7px 11px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; } .vd-prim-row.hot { background: var(--yellow); } .vd-prim-row b { font-family: var(--ts-mono); font-size: 11.5px; font-weight: 900; text-transform: lowercase; white-space: nowrap; } .vd-prim-row em { font-style: normal; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; line-height: 1.45; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .vd-prim-note { margin: 0; padding: 10px 13px; border: 2px dashed var(--bp-dash); border-radius: 10px; font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(16 20 23 / 0.68); } .vd-prim-note em { font-style: normal; color: var(--bp); } .vd-scrolly { display: block; } .vd-stops { display: flex; flex-direction: column; } .vd-stop { min-height: 62vh; display: flex; align-items: center; padding: 4vh 0; } .vd-stop:first-child { padding-top: 0; } .vd-stop-card { display: flex; flex-direction: column; gap: 9px; padding: clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); opacity: 0.45; transform: rotate(-0.3deg); transition: opacity 320ms ease, box-shadow 320ms ease, transform 320ms var(--ease-play); } .vd-stop:nth-child(even) .vd-stop-card { transform: rotate(0.3deg); } .vd-stop.is-current .vd-stop-card { opacity: 1; box-shadow: 6px 6px 0 var(--bp); } .vd-stop-k { width: fit-content; padding: 3px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .vd-stop-card h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(19px, 2vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .vd-stop-card p { margin: 0; font-size: var(--cs-small); font-weight: 500; line-height: 1.55; text-wrap: pretty; color: rgb(16 20 23 / 0.78); } .vd-stop-card p b { background: var(--yellow); padding: 0 4px; border-radius: 3px; font-weight: 700; } .vd-stop-inline { display: none; } .vd-stage { position: sticky; top: clamp(70px, 9vh, 110px); } .vd-sshot { position: absolute; inset: 0; opacity: 0; transition: opacity 380ms ease; } .vd-sshot.is-active { position: relative; opacity: 1; } .vd-sshot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 6px 6px 0 var(--ink); } @media (max-width: 900px) { .vd-primer { grid-template-columns: 1fr; } .vd-scrolly { grid-template-columns: 1fr; } .vd-stage { display: none; } .vd-stop { min-height: 0; padding: 12px 0; } .vd-stop-card { opacity: 1; } .vd-stop-inline { display: block; } .vd-stop-inline img { display: block; width: 100%; height: auto; margin-top: 6px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 var(--ink); } } /* ========================================================= §04c · type switcher · scroll-timed dimming · default beat ========================================================= */ .vd-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(16px, 2.4vh, 26px); padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .vd-switch button { appearance: none; border: 2px solid var(--ink); margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--ts-mono); font-size: 11.5px; font-weight: 800; text-transform: lowercase; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-play); } .vd-switch button:hover { transform: translateY(-2px); background: var(--bp-soft); } .vd-switch button.is-active { background: var(--bp); color: #fff; transform: none; } .vd-scroll-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.25fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; } .vd-stops { display: flex; flex-direction: column; } .vd-stop { min-height: 66vh; display: flex; align-items: center; padding: 3vh 0; } .vd-stop:first-child { padding-top: 0; } .vd-stop-card { display: flex; flex-direction: column; gap: 9px; padding: clamp(16px, 2vw, 24px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); opacity: 0.32; transform: rotate(-0.3deg); transition: opacity 300ms ease, box-shadow 300ms ease; } .vd-stop:nth-child(even) .vd-stop-card { transform: rotate(0.3deg); } .vd-stop.is-current .vd-stop-card { opacity: 1; box-shadow: 6px 6px 0 var(--bp); } .vd-copy { display: flex; flex-direction: column; gap: 9px; } .vd-scrolly[data-flow="table"] .vd-copy[data-flow="scoped"], .vd-scrolly[data-flow="scoped"] .vd-copy[data-flow="table"] { display: none; } .vd-stop-k { width: fit-content; padding: 3px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .vd-copy h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(19px, 2vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1.02; } .vd-copy p { margin: 0; font-size: var(--cs-small); font-weight: 500; line-height: 1.55; text-wrap: pretty; color: rgb(16 20 23 / 0.78); } .vd-copy p b { background: var(--yellow); padding: 0 4px; border-radius: 3px; font-weight: 700; } .vd-stop-inline { display: none; } .vd-stage { position: sticky; top: clamp(70px, 9vh, 110px); } .vd-sshot { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms ease; } .vd-sshot.is-active { position: relative; opacity: 1; } .vd-sshot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 6px 6px 0 var(--ink); } /* default beat */ .vd-default { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(18px, 2.6vw, 34px); align-items: center; padding: clamp(20px, 2.6vw, 34px); border: 3px solid var(--ink); border-radius: 20px; background: var(--ink); color: var(--paper); box-shadow: 7px 7px 0 var(--bp); } .vd-default-copy { display: flex; flex-direction: column; gap: 14px; } .vd-default-title { margin: 0; font-family: var(--ts-display); font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; text-transform: uppercase; line-height: 0.98; } .vd-default-hl { color: var(--yellow); } .vd-default-lede { margin: 0; font-size: var(--cs-small); line-height: 1.55; color: rgb(255 248 223 / 0.82); text-wrap: pretty; } .vd-default-lede b { color: #fff; background: rgb(41 71 255 / 0.55); padding: 0 4px; border-radius: 3px; } .vd-default-seed { margin-top: 4px; padding: 15px 17px; border: 2px dashed rgb(255 248 223 / 0.4); border-radius: 14px; } .vd-default-seed-k { display: inline-block; margin-bottom: 6px; padding: 3px 11px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; } .vd-default-seed p { margin: 0; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; line-height: 1.65; text-transform: lowercase; color: rgb(255 248 223 / 0.78); } .vd-default-seed p b { color: var(--yellow); } .vd-default-shot { display: flex; flex-direction: column; gap: 9px; } .vd-default-shot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 5px 5px 0 var(--bp); } .vd-default-cap { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.6); } @media (max-width: 900px) { .vd-scroll-grid { grid-template-columns: 1fr; } .vd-stage { display: none; } .vd-stop { min-height: 0; padding: 12px 0; } .vd-stop-card { opacity: 1; } .vd-stop-inline { display: block; } .vd-inline { display: none; width: 100%; height: auto; margin-top: 8px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 4px 4px 0 var(--ink); } .vd-scrolly[data-flow="table"] .vd-inline[data-flow="table"], .vd-scrolly[data-flow="scoped"] .vd-inline[data-flow="scoped"] { display: block; } .vd-default { grid-template-columns: 1fr; } } /* §04d · 2-type sticky toggle · no blue shadows · clean shots */ .vd-switch { position: sticky; top: clamp(60px, 7vh, 90px); z-index: 6; align-items: center; gap: 10px; width: fit-content; } .vd-switch-lab { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; text-transform: lowercase; color: rgb(16 20 23 / 0.5); padding-right: 2px; } .vd-stage { top: clamp(120px, 15vh, 168px); } .vd-sshot img { box-shadow: 4px 4px 0 rgb(16 20 23 / 0.18); border-color: rgb(16 20 23 / 0.16); } .vd-stop.is-current .vd-stop-card { box-shadow: 5px 5px 0 var(--ink); } .vd-default { box-shadow: 7px 7px 0 rgb(16 20 23 / 0.28); } .vd-default-shot img { box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35); } .vd-default-shot img { border-color: rgb(255 255 255 / 0.14); } /* §04e · default beat — tighter, less text */ .vd-default { align-items: center; gap: clamp(20px, 3vw, 40px); } .vd-default-copy { gap: 18px; } .vd-default-title { font-size: clamp(34px, 4.2vw, 60px); } .vd-default-lede { font-size: var(--cs-small); line-height: 1.5; } .vd-default-fs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; } .vd-fs-chip { padding: 9px 15px; border-radius: 999px; font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; } .vd-fs-chip b { font-weight: 900; } .vd-fs-chip.bad { background: rgb(255 255 255 / 0.08); color: rgb(255 248 223 / 0.62); border: 2px dashed rgb(255 248 223 / 0.3); } .vd-fs-chip.bad b { color: var(--red); } .vd-fs-chip.good { background: var(--yellow); color: var(--ink); border: 2px solid var(--yellow); } .vd-fs-arrow { font-family: var(--ts-display); font-size: 20px; font-weight: 700; color: rgb(255 248 223 / 0.5); } .vd-default-shot { position: relative; } .vd-default-flag { position: absolute; left: -14px; bottom: 26px; max-width: 210px; padding: 10px 13px; border: 2px solid var(--ink); border-radius: 3px 14px 14px 14px; background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 rgb(0 0 0 / 0.4); rotate: -2deg; font-family: var(--ts-mono); font-size: 11px; font-weight: 800; line-height: 1.45; text-transform: lowercase; } .vd-default-flag b { font-weight: 900; } @media (max-width: 900px) { .vd-default-flag { position: static; max-width: none; rotate: 0deg; margin-top: 10px; } } /* §04f · switcher below the screen · true cross-fade (no disappear) */ .vd-switch { position: static; top: auto; z-index: auto; margin: 14px 0 0; } .vd-stage-wrap { position: sticky; top: clamp(70px, 9vh, 110px); display: flex; flex-direction: column; } .vd-stage { position: relative; } /* stack all shots; cross-fade via opacity only so one is always visible */ .vd-stage .vd-sshot { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms ease; } .vd-stage .vd-sshot:first-child { position: relative; } .vd-stage .vd-sshot.is-active { opacity: 1; z-index: 1; } @media (max-width: 900px) { .vd-stage-wrap { position: static; } .vd-switch { justify-content: flex-start; } } /* §04g · default beat — cropped field + explained pills */ .vd-default-fs { flex-direction: column; align-items: stretch; gap: 12px; } .vd-fs-chip { display: flex; flex-direction: column; gap: 4px; padding: 13px 17px; border-radius: 14px; text-transform: none; } .vd-fs-chip b { font-family: var(--ts-mono); font-size: 13px; font-weight: 900; text-transform: lowercase; } .vd-fs-chip span { font-size: 13px; font-weight: 500; line-height: 1.45; } .vd-fs-chip.bad { border-radius: 14px; } .vd-fs-chip.bad span { color: rgb(255 248 223 / 0.6); } .vd-fs-chip.good span { color: rgb(16 20 23 / 0.72); } .vd-default-shot.cropped { align-self: center; } .vd-default-shot.cropped img { border: 3px solid rgb(255 255 255 / 0.14); border-radius: 14px; box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35); background: #fff; } .vd-default-shot.cropped .vd-default-flag { position: static; margin-top: 14px; rotate: -1.2deg; max-width: none; } /* §04h · switcher on top of screen · remove stray divider line */ .vd-switch { margin: 0 0 14px; } /* the caption after this walkthrough had a faint separator — none wanted */ .vd-scrolly + .bp-cap { border: 0; } /* §04i · default to multi-scope · first shot no longer forced relative */ .vd-stage .vd-sshot:first-child { position: absolute; } .vd-stage .vd-sshot.is-active { position: relative; } /* tighten gap between switcher and screenshot */ .vd-switch { margin: 0 0 10px; } .vd-stage-wrap { top: clamp(20px, 4vh, 44px); } /* §04j · tight switcher-to-screen · kill trailing overlap line */ .vd-stage-wrap { display: flex; flex-direction: column; gap: 10px; top: clamp(16px, 3vh, 34px); } .vd-stage-wrap .vd-switch { margin: 0; } .vd-stage-wrap .vd-stage { margin: 0; } /* separate the sticky screen from the closing caption so its footer edge never bleeds under it */ .vd-scrolly .bp-cap { margin-top: clamp(48px, 10vh, 120px); position: relative; z-index: 3; background: var(--paper); } /* ========================================================= §04k · default-value beat — editorial rebuild ========================================================= */ .vd-def2 { display: flex; flex-direction: column; gap: clamp(22px, 3vh, 38px); padding: clamp(24px, 3vw, 44px); border: 3px solid var(--ink); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 rgb(16 20 23 / 0.28); } .vd-def2-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px 40px; padding-bottom: clamp(18px, 2.4vh, 28px); border-bottom: 2px solid rgb(255 248 223 / 0.16); } .vd-def2-title { margin: 0; font-family: var(--ts-display); font-size: clamp(38px, 5vw, 72px); font-weight: 700; text-transform: uppercase; line-height: 0.92; } .vd-def2-hl { color: var(--yellow); } .vd-def2-lede { margin: 0 0 6px; font-size: var(--cs-small); line-height: 1.5; color: rgb(255 248 223 / 0.82); text-wrap: pretty; } .vd-def2-body { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(20px, 2.8vw, 40px); align-items: center; } .vd-def2-states { display: flex; flex-direction: column; gap: 0; } .vd-def2-state { display: flex; flex-direction: column; gap: 5px; padding: clamp(15px, 1.8vw, 20px); border: 2px solid var(--ink); border-radius: 16px; } .vd-def2-state.bad { background: rgb(255 255 255 / 0.05); border: 2px dashed rgb(255 248 223 / 0.32); } .vd-def2-state.good { background: var(--yellow); color: var(--ink); box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35); } .vd-def2-tag { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: lowercase; opacity: 0.7; } .vd-def2-state b { font-family: var(--ts-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; text-transform: uppercase; line-height: 1; } .vd-def2-state.bad b { color: var(--red); } .vd-def2-desc { font-size: 13.5px; line-height: 1.45; text-wrap: pretty; } .vd-def2-state.bad .vd-def2-desc { color: rgb(255 248 223 / 0.62); } .vd-def2-state.good .vd-def2-desc { color: rgb(16 20 23 / 0.72); } .vd-def2-conn { align-self: center; margin: 4px 0; padding: 5px 14px; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.04em; color: var(--yellow); position: relative; } .vd-def2-conn::before, .vd-def2-conn::after { content: ""; position: absolute; left: 50%; width: 2px; height: 10px; background: rgb(255 248 223 / 0.3); } .vd-def2-conn::before { top: -10px; } .vd-def2-conn::after { bottom: -10px; } .vd-def2-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; } .vd-def2-shot img { display: block; width: 100%; height: auto; border: 3px solid rgb(255 255 255 / 0.14); border-radius: 16px 16px 0 0; background: #fff; box-shadow: 6px 6px 0 rgb(0 0 0 / 0.4); } .vd-def2-shot figcaption { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.55); } .vd-def2-shot figcaption b { color: var(--yellow); } .vd-def2-foot { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border: 2px dashed rgb(255 248 223 / 0.28); border-radius: 14px; } .vd-def2-foot-k { flex: none; padding: 3px 11px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; } .vd-def2-foot p { margin: 0; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; line-height: 1.6; text-transform: lowercase; color: rgb(255 248 223 / 0.66); } .vd-def2-foot p b { color: var(--yellow); } @media (max-width: 900px) { .vd-def2-head { grid-template-columns: 1fr; align-items: start; } .vd-def2-body { grid-template-columns: 1fr; } .vd-def2-foot { flex-direction: column; gap: 8px; } } /* ========================================================= §04l · kill stale stage offset · tight switcher · bold screens ========================================================= */ /* .vd-stage carried an old sticky top:120px; now relative it shoved the screen down */ .vd-stage-wrap { gap: 8px; top: clamp(14px, 3vh, 30px); } .vd-stage-wrap .vd-stage { position: relative; top: auto; margin: 0; } .vd-stage-wrap .vd-switch { margin: 0; } /* screens get the same black stroke + hard shadow as the cards (gray was too muted) */ .vd-stage .vd-sshot img { border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); border-radius: 14px; } .vd-inline { border: 3px solid var(--ink) !important; box-shadow: 5px 5px 0 var(--ink) !important; } .vd-def2-shot img { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--yellow); } /* ========================================================= §04m · screen vertically centered in viewport · switch 36px above ========================================================= */ .vd-stage-wrap { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; gap: 0; overflow: visible; } .vd-stage-wrap .vd-stage { position: relative; top: auto; margin: 0; } /* switch pinned 36px above the centered screen, out of flow so the screen stays centered */ .vd-stage .vd-switch { position: absolute; left: 0; bottom: calc(100% + 36px); margin: 0; z-index: 5; } @media (max-width: 900px) { .vd-stage-wrap { position: static; height: auto; display: block; } .vd-stage { display: block; } .vd-stage .vd-sshot { display: none; } .vd-stage .vd-switch { position: static; bottom: auto; margin: 0 0 14px; } } /* ========================================================= §04n · purpose × scope combinations · assembled break ========================================================= */ .vd-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); } .vd-combo { display: flex; flex-direction: column; gap: 9px; padding: clamp(15px, 1.8vw, 22px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .vd-combo:nth-child(odd) { transform: rotate(-0.3deg); } .vd-combo:nth-child(even) { transform: rotate(0.3deg); } .vd-combo.hot { background: var(--yellow); } .vd-combo.wild { background: var(--bp-purple-soft); } .vd-combo header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .vd-combo header b { font-family: var(--ts-display); font-size: clamp(16px, 1.7vw, 21px); font-weight: 700; text-transform: uppercase; line-height: 1; } .vd-combo-mode { flex: none; padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--ts-mono); font-size: 9.5px; font-weight: 900; text-transform: lowercase; } .vd-combo-mode.multi { background: var(--bp); color: #fff; } .vd-combo-does { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; text-wrap: pretty; } .vd-combo-scopes { display: flex; flex-wrap: wrap; gap: 5px; } .vd-combo-scopes span { padding: 3px 9px; border: 1.5px solid rgb(16 20 23 / 0.3); border-radius: 999px; font-family: var(--ts-mono); font-size: 9.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.32); text-decoration: line-through; } .vd-combo-scopes span.on { border-color: var(--ink); background: #fff; color: var(--ink); text-decoration: none; } .vd-combo-use { margin: 0; padding-top: 9px; border-top: 1.5px dashed rgb(16 20 23 / 0.22); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; color: rgb(16 20 23 / 0.78); } .vd-combo-use em { font-style: normal; font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.03em; color: var(--bp); } .vd-combo-use b { font-weight: 800; } .vd-combo-use code, .vd-combo code { font-family: var(--ts-mono); font-size: 11px; font-weight: 800; background: rgb(16 20 23 / 0.08); padding: 0 4px; border-radius: 4px; } .vd-combos-why { display: flex; align-items: baseline; gap: 14px; margin-top: clamp(14px, 2vh, 22px); padding: clamp(15px, 1.9vw, 22px); border: 2.5px solid var(--ink); border-radius: 16px; background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--bp); } .vd-combos-why-k { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .vd-combos-why p { margin: 0; font-size: clamp(13.5px, 1.3vw, 15.5px); line-height: 1.55; text-wrap: pretty; color: rgb(255 248 223 / 0.86); } .vd-combos-why p b { color: #fff; } .vd-combos-why p em { font-style: normal; color: var(--yellow); font-weight: 700; } /* assembled break */ .vd-assembled { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 48px); border: 3px solid var(--ink); border-radius: 22px; background: var(--bp); color: #fff; box-shadow: 8px 8px 0 var(--ink); } .vd-assembled-k { width: fit-content; padding: 4px 13px; border: 2px solid #fff; border-radius: 999px; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.04em; } .vd-assembled-title { margin: 0; font-family: var(--ts-display); font-size: clamp(30px, 4.4vw, 60px); font-weight: 700; text-transform: uppercase; line-height: 0.94; max-width: 20ch; } .vd-assembled-hl { color: var(--yellow); } .vd-assembled-lede { margin: 0 0 6px; font-size: var(--cs-small); line-height: 1.55; max-width: 62ch; color: rgb(255 255 255 / 0.9); text-wrap: pretty; } .vd-assembled-row { display: flex; flex-wrap: wrap; gap: 10px; } .vd-stamp { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf5; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; transform: rotate(-0.8deg); } .vd-stamp:nth-child(even) { transform: rotate(0.9deg); } .vd-stamp i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bp); color: #fff; font-size: 11px; font-style: normal; } .vd-stamp em { font-style: normal; font-weight: 800; font-size: 10px; color: rgb(16 20 23 / 0.55); } @media (max-width: 900px) { .vd-combos { grid-template-columns: 1fr; } .vd-combos-why { flex-direction: column; gap: 9px; } } @media (min-width: 901px) and (max-width: 1150px) { .vd-combos { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= §04o · parameterise — table vs connection · reveal ========================================================= */ /* generalise the flow show/hide for the table/connection switcher */ .vd-scrolly[data-flow="table"] .vd-copy[data-flow="conn"], .vd-scrolly[data-flow="conn"] .vd-copy[data-flow="table"], .vd-scrolly[data-flow="conn"] .vd-copy[data-flow="scoped"] { display: none; } /* difference cards */ .pp-diff { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); } .pp-diff-card { display: flex; flex-direction: column; gap: 9px; padding: clamp(17px, 2vw, 26px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.3deg); } .pp-diff-card.conn { background: var(--bp-purple-soft); transform: rotate(0.3deg); } .pp-diff-k { width: fit-content; padding: 3px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.04em; } .pp-diff-card h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; text-transform: uppercase; line-height: 1; } .pp-diff-card p { margin: 0; font-size: var(--cs-small); line-height: 1.5; text-wrap: pretty; color: rgb(16 20 23 / 0.78); } .pp-diff-card p b { font-weight: 800; background: rgb(255 255 255 / 0.6); padding: 0 4px; border-radius: 4px; } .pp-diff-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .pp-diff-fields span { padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; } .pp-diff-rule { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding: clamp(14px, 1.7vw, 20px); border: 2.5px dashed var(--bp-dash); border-radius: 14px; } .pp-diff-rule b { flex: none; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.05em; color: var(--bp); } .pp-diff-rule p { margin: 0; font-family: var(--ts-mono); font-size: clamp(12px, 1.15vw, 14px); font-weight: 800; line-height: 1.7; text-transform: lowercase; color: rgb(16 20 23 / 0.72); } .pp-diff-rule em { font-style: normal; color: var(--ink); background: var(--yellow); padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--ink); } /* reveal */ .pp-reveal { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 48px); border: 3px solid var(--ink); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 var(--bp); } .pp-reveal-k { width: fit-content; padding: 4px 13px; border: 2px solid var(--yellow); border-radius: 999px; color: var(--yellow); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.04em; } .pp-reveal-title { margin: 0; font-family: var(--ts-display); font-size: clamp(30px, 4.4vw, 60px); font-weight: 700; text-transform: uppercase; line-height: 0.94; } .pp-reveal-hl { color: var(--yellow); } .pp-reveal-lede { margin: 0 0 6px; font-size: var(--cs-small); line-height: 1.55; max-width: 64ch; color: rgb(255 248 223 / 0.86); text-wrap: pretty; } .pp-reveal-lede b { color: #fff; } .pp-reveal-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .pp-chain-node { display: flex; flex-direction: column; gap: 2px; padding: 10px 15px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf5; color: var(--ink); box-shadow: 3px 3px 0 var(--bp); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; } .pp-chain-node em { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--bp); } .pp-chain-link { width: clamp(18px, 3vw, 40px); height: 0; border-top: 3px solid rgb(255 248 223 / 0.5); } .pp-chain-eq { margin: 0 4px; font-family: var(--ts-display); font-size: 26px; font-weight: 700; color: var(--yellow); } .pp-chain-out { padding: 10px 16px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; } @media (max-width: 900px) { .pp-diff { grid-template-columns: 1fr; } .pp-diff-rule { flex-direction: column; gap: 8px; } .vd-scrolly[data-flow="conn"] .vd-inline[data-flow="conn"] { display: block; } } /* ========================================================= §04p · light primer hint (before screens) · trimmer combos ========================================================= */ .vd-hint { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(12px, 1.8vw, 22px); } .vd-hint-col { display: flex; flex-direction: column; gap: 10px; padding: clamp(15px, 1.8vw, 22px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .vd-hint-col:nth-child(2) { background: #f2f5ff; } .vd-hint-k { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: lowercase; color: var(--bp); } .vd-hint-chips { display: flex; flex-wrap: wrap; gap: 7px; } .vd-hint-chips span { padding: 6px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; } .vd-hint-chips span.hot { background: var(--yellow); } .vd-hint-chips span.wild { background: var(--bp-purple-soft); } /* payoff cards now lead with scopes, no long "does" line */ .vd-combo .vd-combo-use { border-top: none; padding-top: 0; } .vd-combo .vd-combo-scopes { margin-bottom: 2px; } @media (max-width: 760px) { .vd-hint { grid-template-columns: 1fr; } } } /* ========================================================= §04q · parameterise storyboard · flowing arrows · mapping ========================================================= */ /* full-screen entry pair */ .pp-entries { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vh, 22px); } .pp-entry { margin: 0; display: flex; flex-direction: column; gap: 9px; } .pp-entry img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 6px 6px 0 var(--ink); } .pp-entry figcaption { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .pp-entry figcaption b { color: var(--ink); } .pp-entry figcaption em { font-style: normal; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bp-soft); font-weight: 900; } /* flowing storyboard */ .pp-board { display: flex; flex-direction: column; gap: 0; } .pp-board-row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 1.4vw, 18px); } .pp-step { position: relative; flex: 1 1 0; max-width: 340px; margin: 0; display: flex; flex-direction: column; gap: 9px; } .pp-step img { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 4px 4px 0 var(--ink); } .pp-step-n { position: absolute; top: -13px; left: -11px; z-index: 2; display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--yellow); font-family: var(--ts-mono); font-size: 13px; font-weight: 900; box-shadow: 2px 2px 0 var(--ink); } .pp-step figcaption { font-size: var(--cs-fine); font-weight: 500; line-height: 1.45; text-wrap: pretty; color: rgb(16 20 23 / 0.75); } .pp-step figcaption b { font-weight: 800; color: var(--ink); } .pp-step figcaption em { font-style: normal; font-family: var(--ts-mono); font-size: 11px; font-weight: 800; background: var(--yellow); padding: 0 4px; border-radius: 4px; } /* arrows */ .pp-arrow { flex: 0 0 auto; align-self: center; margin-top: -18px; width: clamp(20px, 3vw, 44px); height: 3px; background: var(--ink); position: relative; } .pp-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 11px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .pp-board-turn { display: flex; justify-content: center; } .pp-arrow-down { position: relative; width: 3px; height: clamp(26px, 4vh, 46px); background: var(--ink); margin: 8px 0; } .pp-arrow-down::after { content: ""; position: absolute; left: -5px; bottom: -2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 11px solid var(--ink); } /* mapping explainer */ .pp-mapping { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(16px, 2.2vw, 30px); align-items: center; margin-top: clamp(18px, 2.6vh, 30px); padding: clamp(18px, 2.2vw, 28px); border: 3px solid var(--ink); border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--bp); } .pp-mapping-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pp-map-field { padding: 8px 13px; border: 2px solid #fff; border-radius: 10px; background: #fffdf5; color: var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; } .pp-map-bind { font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.6); } .pp-map-var { padding: 8px 13px; border: 2px solid var(--ink); border-radius: 10px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 12.5px; font-weight: 900; text-transform: lowercase; box-shadow: 3px 3px 0 rgb(0 0 0 / 0.35); } .pp-map-res { flex-basis: 100%; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: var(--bp-lite); padding-top: 2px; } .pp-map-orgs { display: flex; flex-wrap: wrap; gap: 6px; } .pp-map-orgs b { padding: 5px 11px; border: 1.5px solid rgb(255 248 223 / 0.4); border-radius: 999px; font-family: var(--ts-mono); font-size: 11px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.9); } .pp-mapping-copy { display: flex; flex-direction: column; gap: 9px; } .pp-mapping-k { width: fit-content; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .pp-mapping-copy p { margin: 0; font-size: var(--cs-small); line-height: 1.55; text-wrap: pretty; color: rgb(255 248 223 / 0.86); } .pp-mapping-copy p b { color: #fff; } .pp-mapping-copy p em { font-style: normal; color: var(--yellow); font-weight: 700; } /* field-count cards */ .pp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); align-items: start; } .pp-field { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.7vw, 20px); border: 2.5px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 4px 0 var(--ink); } .pp-field:nth-child(2) { background: #f2f5ff; } .pp-field img { display: block; width: 100%; height: auto; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; } .pp-field figcaption { display: flex; flex-direction: column; gap: 6px; } .pp-field figcaption b { font-family: var(--ts-display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; text-transform: uppercase; } .pp-field-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pp-field-chips span { padding: 3px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; } .pp-field-chips span.more { background: var(--bp); color: #fff; } .pp-field figcaption em { font-style: normal; font-family: var(--ts-mono); font-size: 11px; font-weight: 800; line-height: 1.5; text-transform: lowercase; color: rgb(16 20 23 / 0.58); } @media (max-width: 820px) { .pp-board-row { flex-wrap: wrap; } .pp-arrow, .pp-board-turn { display: none; } .pp-step { flex: 1 1 45%; max-width: none; } .pp-mapping { grid-template-columns: 1fr; } .pp-fields { grid-template-columns: 1fr; } } /* ========================================================= §04p · publish sequence — one big screen at a time ========================================================= */ .pub-seq { display: flex; flex-direction: column; gap: clamp(30px, 5vh, 64px); } .pub-shot { position: relative; margin: 0; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vh, 22px); } .pub-shot-frame { position: relative; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 8px 8px 0 var(--ink); } .pub-shot-frame img { display: block; width: 100%; height: auto; border-radius: 15px; } .pub-shot-n { position: absolute; top: -22px; left: -18px; z-index: 3; display: grid; place-items: center; width: clamp(44px, 5vw, 58px); height: clamp(44px, 5vw, 58px); border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: clamp(16px, 1.9vw, 21px); font-weight: 900; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg); } .pub-shot figcaption { max-width: 60ch; font-size: var(--cs-small); line-height: 1.5; font-weight: 500; text-wrap: pretty; color: rgb(16 20 23 / 0.78); } .pub-shot figcaption b { font-weight: 800; color: var(--ink); } .pub-shot figcaption em { font-style: normal; font-family: var(--ts-mono); font-size: 0.82em; font-weight: 800; background: var(--yellow); padding: 1px 6px; border-radius: 5px; } .pub-seq-arrow { display: flex; justify-content: center; margin: clamp(-14px, -2vh, -8px) 0; } .pub-seq-arrow i { position: relative; width: 3px; height: clamp(30px, 5vh, 54px); background: var(--ink); } .pub-seq-arrow i::after { content: ""; position: absolute; left: -6px; bottom: -2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 13px solid var(--ink); } @media (max-width: 640px) { .pub-shot-n { top: -16px; left: -10px; } } .pub-seq.compact .pub-shot-frame { max-width: 720px; margin: 0 auto; } .pub-seq.compact .pub-shot figcaption { max-width: 720px; margin: 0 auto; } .pub-seq.compact .pub-shot-n { left: calc(50% - min(360px, 50%) - 18px); } .pub-seq-row { display: flex; gap: clamp(16px,2.4vw,28px); align-items: flex-start; } .pub-seq-row .pub-shot { flex: 1 1 0; min-width: 0; } .pub-seq-row .pub-shot-frame, .pub-seq-row .pub-shot figcaption { max-width: none; margin: 0; } .pub-seq.compact .pub-seq-row { max-width: 820px; margin: 0 auto; } .pub-seq.compact .pub-seq-row .pub-shot-n { left: -18px; } .pub-shot.narrow .pub-shot-frame, .pub-shot.narrow figcaption { max-width: 640px; margin: 0 auto; } .pub-shot.narrow .pub-shot-n { left: calc(50% - min(320px, 50%) - 18px); } @media (max-width: 720px) { .pub-seq-row { flex-direction: column; } } @media (max-width: 620px) { .pub-seq.compact .pub-shot-n { left: -18px; } .pub-shot.narrow .pub-shot-n { left: -18px; } } /* §04q · bottom-up branch */ .pub-nest { position: relative; margin: clamp(6px,1.4vh,14px) 0; padding: clamp(20px,2.6vw,34px) clamp(16px,2.2vw,28px) clamp(16px,2vw,24px); border: 2.5px dashed var(--ink); border-radius: 20px; background: #f2f5ff; } .pub-nest-tag { position: absolute; top: -14px; left: clamp(16px,2.2vw,28px); padding: 4px 13px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--bp); color: #fff; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.02em; box-shadow: 3px 3px 0 var(--ink); } .pub-caveat { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,2.2vw,28px); align-items: center; margin-top: clamp(18px,2.6vh,30px); padding: clamp(20px,2.6vw,34px); border: 3px solid var(--ink); border-radius: 20px; background: var(--ink); color: var(--paper); box-shadow: 7px 7px 0 var(--yellow); } .pub-caveat-loop { display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--ts-mono); font-size: 10.5px; font-weight: 800; text-transform: lowercase; color: rgb(255 248 223 / 0.7); } .pub-caveat-loop b { display: grid; place-items: center; width: 58px; height: 58px; border: 2.5px solid var(--yellow); border-radius: 999px; background: rgb(255 255 255 / 0.05); color: var(--yellow); font-size: 26px; } .pub-caveat-copy { display: flex; flex-direction: column; gap: 8px; } .pub-caveat-k { width: fit-content; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--ts-mono); font-size: 10.5px; font-weight: 900; text-transform: lowercase; } .pub-caveat-copy p { margin: 0; font-size: var(--cs-small); line-height: 1.55; text-wrap: pretty; color: rgb(255 248 223 / 0.9); } .pub-caveat-copy p b { color: #fff; } .pub-caveat-copy p em { font-style: normal; color: var(--yellow); font-weight: 700; } .pub-doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,22px); margin-top: clamp(18px,2.6vh,30px); } .pub-door { position: relative; padding: clamp(18px,2.2vw,26px); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .pub-door:nth-child(2) { background: #f2f5ff; } .pub-door-k { display: block; margin-bottom: 8px; font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; color: var(--bp); } .pub-door h4 { margin: 0 0 6px; font-family: var(--ts-display); font-size: clamp(17px,1.8vw,22px); font-weight: 700; text-transform: uppercase; line-height: 1; } .pub-door p { margin: 0; font-size: var(--cs-fine); line-height: 1.5; color: rgb(16 20 23 / 0.72); text-wrap: pretty; } .pub-door p b { color: var(--ink); font-weight: 800; } @media (max-width: 720px) { .pub-caveat { grid-template-columns: 1fr; text-align: center; } .pub-caveat-loop { flex-direction: row; } .pub-doors { grid-template-columns: 1fr; } } /* ========================================================= §05 · impact — the landing ========================================================= */ .imp-lead { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,44px); align-items: center; margin-top: clamp(6px,1.4vh,14px); padding: clamp(24px,3.2vw,46px); border: 3px solid var(--ink); border-radius: 22px; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); } .imp-lead-fig { display: flex; flex-direction: column; align-items: center; line-height: 0.82; } .imp-lead-fig b { font-family: var(--ts-display); font-size: clamp(70px,11vw,164px); font-weight: 700; color: var(--ink); } .imp-lead-fig span { font-family: var(--ts-display); font-size: clamp(26px,3.4vw,52px); font-weight: 700; text-transform: uppercase; color: var(--ink); } .imp-lead-copy { display: flex; flex-direction: column; gap: 12px; } .imp-lead-copy .imp-lead-k { width: fit-content; padding: 4px 13px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--yellow); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; } .imp-lead-copy p { margin: 0; font-family: var(--ts-display); font-size: clamp(20px,2.4vw,32px); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .imp-lead-copy small { font-size: var(--cs-small); line-height: 1.55; font-weight: 500; color: rgb(16 20 23 / 0.72); text-transform: none; text-wrap: pretty; } .imp-lead-copy small b { font-weight: 800; } /* 30x ratio bars */ .imp-ratio { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(18px,2.6vh,28px); padding: clamp(20px,2.6vw,32px); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .imp-bar { display: grid; grid-template-columns: minmax(120px,180px) 1fr; align-items: center; gap: 14px; } .imp-bar-lab { font-family: var(--ts-mono); font-size: 12.5px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.66); } .imp-bar-track { position: relative; height: clamp(34px,4vh,46px); } .imp-bar-fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 10px; font-family: var(--ts-display); font-size: clamp(15px,1.6vw,20px); font-weight: 700; color: var(--ink); } .imp-bar.created .imp-bar-fill { width: 8%; min-width: 74px; background: #e7ebff; } .imp-bar.used .imp-bar-fill { width: 100%; background: var(--bp); color: #fff; } .imp-ratio-note { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } .imp-ratio-note b { color: var(--bp); } /* recognition quote cards */ .imp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,22px); } .imp-quote { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px,2.6vw,30px); border: 2.5px solid var(--ink); border-radius: 18px; background: #fffdf5; box-shadow: 5px 5px 0 var(--ink); } .imp-quote:nth-child(2) { background: var(--bp-soft); } .imp-quote-mark { font-family: var(--ts-display); font-size: 46px; line-height: 0.6; color: var(--bp); } .imp-quote p { margin: 0; font-family: var(--ts-editorial, Georgia, serif); font-style: italic; font-weight: 600; font-size: clamp(19px,2vw,25px); line-height: 1.4; color: var(--ink); text-wrap: pretty; } .imp-quote-who { font-family: var(--ts-mono); font-size: 12px; font-weight: 800; text-transform: lowercase; color: rgb(16 20 23 / 0.6); } @media (max-width: 720px) { .imp-quotes { grid-template-columns: 1fr; } } /* reflection cards (quiet) */ .imp-reflect { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.6vw,20px); } .imp-refl { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px,2vw,24px); border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); } .imp-refl-k { font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; letter-spacing: 0.03em; color: var(--bp); } .imp-refl h4 { margin: 0; font-family: var(--ts-display); font-size: clamp(16px,1.7vw,20px); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .imp-refl p { margin: 0; font-size: clamp(13px,1.3vw,15px); line-height: 1.55; color: rgb(16 20 23 / 0.72); text-wrap: pretty; } .imp-refl p b { color: var(--ink); font-weight: 800; } @media (max-width: 820px) { .imp-lead { grid-template-columns: 1fr; text-align: center; } .imp-lead-fig { flex-direction: row; align-items: baseline; gap: 12px; justify-content: center; } .imp-lead-copy .imp-lead-k, .imp-lead-copy p { margin-inline: auto; } .imp-reflect { grid-template-columns: 1fr; } .imp-bar { grid-template-columns: 1fr; gap: 6px; } } /* §04r · destructive flows — unpublish */ .pub-caveat.danger { box-shadow: 7px 7px 0 var(--red); } .pub-caveat.danger .pub-caveat-loop b { border-color: var(--red); color: #ff8a7a; } .pub-caveat.danger .pub-caveat-k { background: var(--red); color: #fff; } .pub-door.danger { background: #fff2f0; } .pub-door.danger .pub-door-k { color: var(--red); } .pub-door .pub-door-tag { position: absolute; top: -13px; right: 14px; padding: 3px 11px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--ts-mono); font-size: 10px; font-weight: 900; text-transform: lowercase; box-shadow: 2px 2px 0 var(--ink); } .pub-door .pub-door-tag.easy { background: var(--bp); color: #fff; } .pub-door .pub-door-tag.hard { background: var(--red); color: #fff; } .ud-close { margin-top: clamp(20px,3vh,34px); padding: clamp(24px,3.2vw,44px); border: 3px solid var(--ink); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 var(--bp); text-align: center; } .ud-close p { margin: 0 auto; max-width: 30ch; font-family: var(--ts-display); font-size: clamp(24px,3.4vw,48px); font-weight: 700; text-transform: uppercase; line-height: 1.02; text-wrap: balance; } .ud-close p em { font-style: normal; color: var(--yellow); } .ud-close small { display: block; margin: 16px auto 0; max-width: 56ch; font-size: var(--cs-small); line-height: 1.55; font-weight: 500; color: rgb(255 248 223 / 0.82); text-transform: none; text-wrap: pretty; } /* roadmap-after-GA strip */ .imp-road { position: relative; margin-top: clamp(18px,2.6vh,28px); padding: clamp(26px,3.4vw,44px) clamp(20px,2.8vw,36px) clamp(22px,2.8vw,36px); border: 3px solid var(--ink); border-radius: 24px; background: var(--ink); box-shadow: 8px 8px 0 var(--bp); overflow-x: auto; } .imp-road-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: clamp(20px,3vh,32px); font-family: var(--ts-mono); font-size: 11px; font-weight: 900; text-transform: lowercase; color: var(--yellow); } .imp-road-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgb(255 214 10 / 0.18); } .imp-road-track { position: relative; display: flex; gap: clamp(18px,2.6vw,34px); min-width: max-content; } .imp-road-track::before { content: ""; position: absolute; top: 15px; left: 8px; right: 8px; border-top: 2.5px dashed rgb(255 248 223 / 0.28); } .imp-road-stop { position: relative; display: flex; flex-direction: column; gap: 8px; width: clamp(190px,20vw,240px); } .imp-road-stop i { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2.5px solid var(--yellow); border-radius: 50%; background: var(--ink); color: var(--yellow); font-family: var(--ts-mono); font-size: 12px; font-weight: 900; } .imp-road-stop b { font-family: var(--ts-display); font-size: clamp(16px,1.7vw,21px); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: #fff; } .imp-road-stop span { font-size: var(--cs-fine); line-height: 1.5; color: rgb(255 248 223 / 0.72); text-wrap: pretty; } .imp-road-stop.ghost i { border-style: dashed; background: none; color: rgb(255 248 223 / 0.6); border-color: rgb(255 248 223 / 0.5); } .imp-road-stop.ghost b { color: rgb(255 248 223 / 0.7); } .imp-road-stop.ghost span { color: rgb(255 248 223 / 0.5); } @media (max-width: 720px) { .imp-road-track { flex-direction: column; gap: 20px; } .imp-road-track::before { display: none; } .imp-road-stop { width: 100%; } } /* ========================================================= The working-files vault: an opt-in slideshow of the detailed flowcharts, so the process chapter stays short by default. ========================================================= */ .ts-vault { width: min(1180px, 100%); margin: clamp(18px, 3vh, 34px) auto clamp(30px, 5vh, 58px); } /* --- the teaser: real charts showing through, fading into a call to open --- */ .ts-vault-peekwrap { position: relative; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 7px 7px 0 var(--ink); overflow: hidden; } /* the live snapshots, scaled down and cropped by the window */ .ts-vault-peek { height: clamp(280px, 34vh, 420px); padding: clamp(18px, 2.4vw, 30px); overflow: hidden; pointer-events: none; transform-origin: top left; } .ts-vault-peek .fc-panel, .ts-vault-peek .bp-panel { margin: 0 0 22px; box-shadow: none; } /* chrome that only makes sense in the opened view */ .ts-vault-peek .fc-switch, .ts-vault-peek .fc-tools, .ts-vault-peek .cs-para, .ts-vault-peek .bp-fignote { display: none; } .ts-vault-peek .r { opacity: 1 !important; transform: none !important; } /* the fade: sharp at the top, unreadable by the bottom */ .ts-vault-veil { position: absolute; inset: auto 0 0 0; display: grid; justify-items: center; gap: 10px; padding: clamp(70px, 14vh, 130px) 20px clamp(22px, 3vh, 34px); background: linear-gradient( 180deg, rgb(255 248 223 / 0) 0%, rgb(255 248 223 / 0.72) 34%, rgb(255 248 223 / 0.95) 60%, var(--paper) 100% ); backdrop-filter: blur(0.5px); } .ts-vault-open { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); font-family: var(--ts-mono, ui-monospace, monospace); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: transform 220ms cubic-bezier(0.22, 1.2, 0.32, 1), box-shadow 220ms ease; } .ts-vault-open:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); } .ts-vault-open:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .ts-vault-open i { transition: transform 220ms ease; } .ts-vault-open:hover i { transform: translateY(3px); } .ts-vault-sub { margin: 0; font-family: var(--ts-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: 0.06em; opacity: 0.55; text-align: center; } /* --- insights below the vault: numbered, stepped, scannable --- */ .ts-vault-learn { width: min(1180px, 100%); margin-inline: auto; } .ts-vault-learn-tag { display: inline-block; margin-bottom: 18px; font-family: var(--ts-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; } .ts-vault-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2.4vw, 30px); margin: 0; padding: 0; list-style: none; counter-reset: lrn; } .ts-vault-learn-grid li { position: relative; padding: 26px 0 0; border-top: 3px solid var(--ink); } /* a stepped baseline so the row reads as a sequence, not a table */ .ts-vault-learn-grid li:nth-child(2) { margin-top: clamp(0px, 2.4vw, 26px); } .ts-vault-learn-grid li:nth-child(3) { margin-top: clamp(0px, 4.8vw, 52px); } .lrn-n { position: absolute; top: -19px; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: var(--ts-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; } .ts-vault-learn-grid li b { display: block; margin: 22px 0 8px; font-family: var(--ts-display, inherit); font-size: clamp(20px, 1.7vw, 27px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } .ts-vault-learn-grid li p { margin: 0; font-size: var(--cs-small); line-height: 1.5; opacity: 0.66; text-wrap: pretty; } /* --- the opened body --- */ .ts-vault-body { border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 7px 7px 0 var(--ink); overflow: hidden; } .ts-vault-body[hidden] { display: none; } .ts-vault.is-open .ts-vault-peekwrap { display: none; } .ts-vault.is-open .ts-vault-body { animation: ts-vault-in 460ms cubic-bezier(0.22, 1.2, 0.32, 1) both; } @keyframes ts-vault-in { from { opacity: 0; transform: translateY(-10px) scale(0.985); } to { opacity: 1; transform: none; } } .ts-vault-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 3px solid var(--ink); background: rgb(16 20 23 / 0.04); font-family: var(--ts-mono, ui-monospace, monospace); font-size: 12px; } .ts-vault-now b { font-size: 14px; } .ts-vault-now em { margin-left: 10px; font-style: normal; opacity: 0.6; } .ts-vault-nav { display: flex; align-items: center; gap: 10px; } .ts-vault-arrow { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background 180ms ease, transform 180ms ease; } .ts-vault-arrow:hover { background: var(--yellow); color: var(--ink); } .ts-vault-arrow:active { transform: scale(0.92); } .ts-vault-dots { display: flex; gap: 6px; } .ts-vault-dots button { width: 9px; height: 9px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; transition: background 200ms ease, transform 200ms ease; } .ts-vault-dots button.on { background: var(--ink); transform: scale(1.25); } .ts-vault-close { border: 2px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .ts-vault-close:hover { background: var(--ink); color: var(--paper); } /* --- the slides --- */ .ts-vault-track { position: relative; padding: clamp(14px, 2.2vw, 26px); } .ts-vault-slide { display: none; } .ts-vault-slide.on { display: block; animation: ts-slide-in 420ms cubic-bezier(0.22, 1.2, 0.32, 1) both; } @keyframes ts-slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } .ts-vault-slide.back.on { animation-name: ts-slide-in-back; } @keyframes ts-slide-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } /* inside the vault every beat is already revealed, no scroll reveal to wait on */ .ts-vault-slide .r { opacity: 1 !important; transform: none !important; } .ts-vault-slide .ts-beat { margin: 0; } @media (max-width: 760px) { .ts-vault-open { grid-template-columns: 1fr; gap: 14px; } .ts-vault-peek { width: 84px; } .ts-vault-cta { justify-self: start; } .ts-vault-bar { font-size: 11px; } .ts-vault-now em { display: none; } }