/* PackAuth — visual layer: animation, diagrams, dashboard mockups. * * Loaded after site.css. Everything here is decorative-structural: the page * remains fully readable with this file absent, and every animation is * disabled under prefers-reduced-motion. */ /* --- scroll reveal --------------------------------------------------------- */ /* Hidden ONLY when JS is running (the flag is set inline in the head). Without JS, or if this script fails, every section stays fully visible — content is never hidden behind an animation that may not run. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .js .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } /* --- animated pipeline ----------------------------------------------------- */ .flowline { stroke: var(--accent); stroke-width: 2; fill: none; opacity: .35; } .flowdot { fill: var(--accent); } .pipe rect { transition: fill .25s ease, stroke .25s ease; } .pipe-stage:hover rect { fill: color-mix(in srgb, var(--accent) 14%, var(--bg)); stroke: var(--accent); } .pipe-stage { cursor: pointer; } @keyframes dash-run { to { stroke-dashoffset: -28; } } .flowline.animated { stroke-dasharray: 5 9; animation: dash-run 1.1s linear infinite; } /* --- lifecycle track ------------------------------------------------------- */ .lifecycle { margin: 2rem 0 0; } .lc-track { display: grid; grid-auto-flow: column; gap: 3px; overflow-x: auto; padding: .3rem .3rem 1rem; scrollbar-width: thin; } .lc-node { position: relative; min-width: 108px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .55rem; font: 600 11px var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .lc-node:hover { border-color: var(--accent); transform: translateY(-2px); } .lc-node .lc-ord { display: block; font: 700 9px var(--mono); color: var(--ink-3); letter-spacing: .06em; margin-bottom: .18rem; } .lc-node.gate { border-color: color-mix(in srgb, var(--no) 55%, transparent); background: var(--no-bg); } .lc-node.gate .lc-ord { color: var(--no); } .lc-node.win { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: var(--ok-bg); } .lc-node.win .lc-ord { color: var(--ok); } .lc-node.term { border-style: dashed; opacity: .8; } @keyframes lc-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } } .lc-node.live { border-color: var(--accent); animation: lc-pulse 2.4s ease-in-out infinite; } .lc-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; font-size: .82rem; color: var(--ink-3); } .lc-legend span { display: inline-flex; align-items: center; gap: .38rem; } .lc-key { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; } .lc-key.g { background: var(--no-bg); border-color: var(--no); } .lc-key.w { background: var(--ok-bg); border-color: var(--ok); } .lc-key.n { background: var(--bg); } /* --- dashboard mockup ------------------------------------------------------ */ .mock { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lg); margin: 0; } .mock-chrome { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; background: var(--bg-3); border-bottom: 1px solid var(--line); } .mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; } .mock-url { flex: 1; text-align: center; font: 500 11px var(--mono); color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: .18rem .5rem; margin-left: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mock-app { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; } @media (max-width: 720px) { .mock-app { grid-template-columns: 1fr; } .mock-side { display: none; } } .mock-side { background: var(--bg-2); border-right: 1px solid var(--line); padding: .8rem .6rem; } .mock-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .mock-side li { font: 500 12px var(--sans); color: var(--ink-2); padding: .34rem .5rem; border-radius: 5px; display: flex; justify-content: space-between; gap: .4rem; } .mock-side li.on { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--ink); font-weight: 620; } .mock-side li b { font: 700 10px var(--mono); color: var(--no); } .mock-side .mock-brand { font: 680 13px var(--sans); color: var(--ink); padding: .1rem .5rem .7rem; display: flex; align-items: center; gap: .4rem; } .mock-main { padding: 1rem 1.15rem 1.2rem; overflow-x: auto; } .mock-h { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .1rem; } .mock-h h4 { font-size: 1rem; margin: 0; } .mock-h .mock-meta { font: 500 11px var(--mono); color: var(--ink-3); } .mock-sub { font-size: .8rem; color: var(--ink-3); margin: .15rem 0 .9rem; } .mock-table { width: 100%; border-collapse: collapse; font-size: .8rem; min-width: 460px; } .mock-table th { text-align: left; font: 650 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: .4rem .5rem; border-bottom: 1px solid var(--line); } .mock-table td { padding: .48rem .5rem; border-bottom: 1px solid var(--line); color: var(--ink-2); } .mock-table tr:last-child td { border-bottom: 0; } .mock-table td b { color: var(--ink); font-weight: 620; } .chip { display: inline-block; font: 650 10px var(--sans); letter-spacing: .03em; padding: .12rem .42rem; border-radius: 20px; text-transform: uppercase; } .chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.no { background: var(--no-bg); color: var(--no); } .chip.warn { background: var(--warn-bg); color: var(--warn); } .chip.grey { background: var(--bg-3); color: var(--ink-3); } .find-list { display: grid; gap: .5rem; margin-top: 1.1rem; } .find { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: .55rem .7rem; background: var(--bg); } .find.blocking { border-left-color: var(--no); } .find.major { border-left-color: var(--warn); } .find.minor { border-left-color: var(--ink-3); } .find-rule { font: 600 9.5px var(--mono); color: var(--ink-3); } .find-msg { font-size: .82rem; color: var(--ink); font-weight: 560; margin: 0 0 .12rem; } .find-rec { font-size: .76rem; color: var(--ink-3); margin: 0; } @keyframes bar-grow { from { width: 0; } } .mock-bar { height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin-top: .1rem; } .mock-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); animation: bar-grow 1.1s cubic-bezier(.2,.7,.3,1) both; } .mock-bar i.no { background: var(--no); } /* --- swimlane workflow ----------------------------------------------------- */ .swim { margin: 1.8rem 0 0; overflow-x: auto; } .swim svg { width: 100%; min-width: 780px; height: auto; display: block; } .lane rect { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; } .lane-alt rect { fill: var(--bg); } .lane-label { font: 650 11px var(--sans); fill: var(--ink-2); } .step rect { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.5; } .step.acc rect { fill: color-mix(in srgb, var(--accent) 13%, var(--bg)); stroke: var(--accent); } .step.stop rect { fill: var(--no-bg); stroke: var(--no); } .step text { font: 600 10.5px var(--sans); fill: var(--ink); text-anchor: middle; } .hop { stroke: var(--line-2); stroke-width: 1.6; fill: none; } .hop.acc { stroke: var(--accent); } /* --- stakeholder map ------------------------------------------------------- */ .stakemap { margin: 1.8rem 0 0; overflow-x: auto; } .stakemap svg { width: 100%; min-width: 620px; height: auto; display: block; } .sm-core { fill: color-mix(in srgb, var(--accent) 16%, var(--bg)); stroke: var(--accent); stroke-width: 2; } .sm-core-t { font: 680 15px var(--sans); fill: var(--ink); text-anchor: middle; } .sm-core-s { font: 500 10.5px var(--mono); fill: var(--ink-3); text-anchor: middle; } .sm-node rect { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.4; transition: stroke .2s ease; } .sm-node:hover rect { stroke: var(--accent); } .sm-node { cursor: pointer; } .sm-t { font: 620 11.5px var(--sans); fill: var(--ink); text-anchor: middle; } .sm-s { font: 500 9.5px var(--sans); fill: var(--ink-3); text-anchor: middle; } .sm-link { stroke: var(--line-2); stroke-width: 1.4; fill: none; } .sm-link.in { stroke: var(--ok); stroke-dasharray: 3 4; } .sm-link.out { stroke: var(--accent); } /* --- counters -------------------------------------------------------------- */ .grid-4 strong { font-variant-numeric: tabular-nums; } /* --- reduced motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .flowline.animated { animation: none; stroke-dasharray: none; opacity: .3; } .lc-node.live { animation: none; } .mock-bar i { animation: none; } .flowdot { display: none; } } /* Transparent hit targets sit above the SVG labels so a click on the label text still opens the stage detail. */ .pipe-hit rect { fill: transparent; cursor: pointer; } .pipe-hit rect:hover { fill: color-mix(in srgb, var(--accent) 7%, transparent); } /* --- tabs ------------------------------------------------------------------ */ .tabs { margin: 1.8rem 0 0; } .tab-strip { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .1rem; border-bottom: 1px solid var(--line); scrollbar-width: thin; } .tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .42rem; background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .85rem; margin-bottom: -1px; font: 560 .88rem var(--sans); color: var(--ink-3); cursor: pointer; white-space: nowrap; transition: color .18s ease, border-color .18s ease; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 640; } .tab b { font-weight: 700; letter-spacing: -.01em; } .tab-badge { font: 650 9.5px var(--sans); letter-spacing: .03em; text-transform: uppercase; padding: .1rem .38rem; border-radius: 20px; background: var(--bg-3); color: var(--ink-3); } .tab-badge.ok { background: var(--ok-bg); color: var(--ok); } .tab-badge.warn { background: var(--warn-bg); color: var(--warn); } @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } } .tab-panel { padding: 1.3rem .1rem 0; } .js .tab-panel:not([hidden]) { animation: panel-in .3s ease both; } .tab-panel[hidden] { display: none; } /* market panels */ .mk-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; } .mk-head h3 { margin-bottom: .15rem; font-size: 1.1rem; } .mk-chain { font: 500 .8rem var(--mono); color: var(--ink-3); margin: 0; } .mk-nums { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; color: var(--ink-3); } .mk-nums b { color: var(--ink); font-weight: 680; font-size: 1rem; } .mk-nums .mk-block b { color: var(--no); } .mk-rules { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; } .mk-rules li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; border: 1px solid var(--line); border-left: 3px solid var(--no); border-radius: 8px; padding: .5rem .7rem; background: var(--bg); } .mk-rules.plain li { border-left-color: var(--warn); } .mk-rules b { display: block; font-size: .86rem; font-weight: 570; color: var(--ink); } .mk-rules span:not(.chip) { display: block; font: 500 .72rem var(--mono); color: var(--ink-3); margin-top: .12rem; } /* pack panels */ .pk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .pk-list li { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; background: var(--bg); } .pk-list li.planned { opacity: .78; border-style: dashed; } .pk-list b { display: block; font-size: .92rem; } .pk-list span:not(.chip):not(.pk-rules) { display: block; font-size: .8rem; color: var(--ink-3); max-width: 62ch; margin-top: .1rem; } .pk-meta { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; } .pk-rules { font: 600 .74rem var(--mono); color: var(--ink-3); } /* --- annotated artwork ------------------------------------------------------ */ /* minmax(0, …) for the same reason as .split in site.css: a bare fr track takes its minimum from the item's min-content and would push the page sideways. */ .art-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; margin-top: 1.8rem; } @media (max-width: 900px) { .art-wrap { grid-template-columns: minmax(0, 1fr); } } .art { margin: 0; position: relative; } .art svg { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: var(--shadow-lg); } .art figcaption { font-size: .82rem; color: var(--ink-3); margin-top: .7rem; } /* The pin and its list row are the same finding rendered twice. Both carry the same data-pin, and `.on` is applied to the pair — hovering either lights both, so the eye never has to hunt for the counterpart. */ .pin { cursor: pointer; } .pin circle { fill: var(--no); stroke: #fff; stroke-width: 2; transition: stroke .16s ease, stroke-width .16s ease; } .pin text { font: 700 11px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; } .pin.ok circle { fill: var(--ok); } .pin.warn circle { fill: var(--warn); } .pin:focus { outline: none; } .pin.on circle, .pin:focus-visible circle { stroke: var(--accent); stroke-width: 3.5; } @keyframes pin-ping { 0% { r: 11; opacity: .5; } 70% { r: 21; opacity: 0; } 100% { r: 21; opacity: 0; } } .pin-ping { fill: var(--no); opacity: 0; pointer-events: none; } .pin-ping.ok { fill: var(--ok); } .pin-ping.warn { fill: var(--warn); } .js .pin-ping { animation: pin-ping 2.8s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .js .pin-ping { animation: none; } } .art-panel { display: grid; gap: .55rem; align-content: start; } .art-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; width: 100%; text-align: left; font-family: var(--sans); border: 1px solid var(--line); border-left: 3px solid var(--no); border-radius: 9px; padding: .65rem .8rem; background: var(--bg); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .art-item:hover, .art-item.on { border-color: var(--accent); box-shadow: var(--shadow); transform: translateX(2px); } .art-item.ok { border-left-color: var(--ok); } .art-item.warn { border-left-color: var(--warn); } .art-num { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--sans); background: var(--no); color: #fff; } .art-item.ok .art-num { background: var(--ok); } .art-item.warn .art-num { background: var(--warn); } .art-txt b { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); } .art-txt span { display: block; font: 500 .72rem var(--mono); color: var(--ink-3); margin-top: .18rem; } .art-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem; font-size: .78rem; color: var(--ink-3); } .art-legend i { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; margin-right: .32rem; } .art-legend i.n { background: var(--no); } .art-legend i.w { background: var(--warn); } .art-legend i.o { background: var(--ok); } /* pack artwork surfaces */ .pk-face { fill: #fbf7ef; stroke: var(--line-2); stroke-width: 1.5; } .pk-band { fill: #6b3f1d; } .pk-brand { font: 700 19px var(--sans); fill: #fff; text-anchor: middle; } .pk-name { font: 600 11px var(--sans); fill: #f4e6d2; text-anchor: middle; } .pk-txt { font: 500 6.4px var(--sans); fill: #4a4038; } .pk-h { font: 700 7px var(--sans); fill: #2f2721; } .pk-box { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; } .pk-miss { fill: var(--no-bg); stroke: var(--no); stroke-width: 1.4; stroke-dasharray: 4 3; } .pk-miss-t{ font: 600 7px var(--sans); fill: var(--no); text-anchor: middle; } .pk-bar { fill: #2f2721; } .pk-cap { font: 600 9px var(--sans); fill: var(--ink-3); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; } .pk-badge { fill: #1f7a4d; } .pk-badge-t { font: 700 8px var(--sans); fill: #fff; text-anchor: middle; letter-spacing: .06em; } .pk-hint { font: 500 6.2px var(--sans); fill: var(--ink-3); text-anchor: middle; }