/* ChatNab — the §09 orbit Coded rather than Lottie: it inherits tokens and reuses the real channel files. */ .dg { position: relative; width: 100%; font-family: var(--font-body); color: var(--ink); } .dg svg { display: block; width: 100%; height: auto; overflow: visible; } /* the pip that travels a spoke */ .dg-head { fill: var(--accent-light); stroke: var(--accent-deep); stroke-width: 1.5; } /* §09 — a tilted orbit, not a flat diagram. The ring is drawn as two arcs on two stacked layers so its far side passes BEHIND the mark and its near side in front; nodes take a z-index from their depth, so they cross the mark correctly as the ring turns. */ .dg-orbit { position: relative; aspect-ratio: 1 / 1; max-width: 720px; margin-inline: auto; perspective: 1000px; } .dg-orbit-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dg-orbit-back { z-index: 1; } .dg-orbit-front { z-index: 55; } .dg-orbit-ring { fill: none; stroke: var(--ink-faint); stroke-width: .35; opacity: .45; } .dg-orbit-back .dg-orbit-ring { opacity: .22; } /* the far side reads further away */ .dg-spoke { stroke: var(--accent-bright); stroke-width: .55; stroke-linecap: round; } .dg-orbit-mark, .dg-orbit-node { position: absolute; left: 0; top: 0; will-change: transform; } /* outer = centring (CSS only, never animated); inner = what GSAP scales */ .dg-orbit-mark { left: 50%; top: 50%; z-index: 50; transform: translate(-50%, -50%); } .dg-orbit-mark-inner { display: block; will-change: transform; } .dg-orbit-mark img { width: 100%; height: auto; display: block; } .dg-orbit-node { display: grid; place-items: center; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--r-tile); box-shadow: 0 10px 28px #1C1A1614; } .dg-orbit-node img { width: 58%; height: auto; display: block; } /* ours: inlined so it inherits the page colour, unlike the platform marks */ .dg-orbit-node .dg-orbit-glyph { display: block; width: 58%; color: var(--accent-mid); } .dg-orbit-node .dg-orbit-glyph svg { width: 100%; height: auto; display: block; } /* preview harness only */ .demo { max-width: 1140px; margin: 0 auto; padding: 48px 20px 96px; } .demo h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -.01em; margin: 0 0 4px; } .demo p.note { color: var(--ink-body); margin: 0 0 20px; max-width: 62ch; line-height: 1.5; } .demo section { margin-bottom: 72px; } .demo .ctl { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .demo input[type=range] { flex: 1; accent-color: var(--accent); } .demo button { font: 500 15px/1 var(--font-body); color: var(--ink-inverse); background: var(--accent); border: 0; border-radius: var(--r-pill); padding: 12px 22px; cursor: pointer; } .demo .tval { font-family: var(--font-body); font-size: 13px; color: var(--ink-faint); min-width: 4ch; } @media (prefers-reduced-motion: reduce) { .dg * { animation: none !important; } } /* §09 glass pass (after Matt's mock) -------------------------------------- The node is now a thick glass tile tinted with its channel's colour, with a label chip riding outside the ring. A rendered tile (assets/channel/glass/) replaces the CSS glass automatically when it exists. */ .dg-orbit-ring { stroke: #86F802; stroke-width: .28; opacity: .55; } .dg-orbit-ring--glow { stroke-width: 1.6; opacity: .16; filter: blur(.6px); } .dg-orbit-back .dg-orbit-ring { opacity: .3; } .dg-orbit-back .dg-orbit-ring--glow { opacity: .08; } .dg-orbit-node { background: none; border: 0; box-shadow: none; overflow: visible; } .dg-orbit-tile { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 26%; background: radial-gradient(120% 90% at 30% 12%, #FFFFFF59, #FFFFFF00 46%), linear-gradient(155deg, color-mix(in srgb, var(--tint, #86F802) 62%, #FFFFFF 10%) 0%, color-mix(in srgb, var(--tint, #86F802) 38%, #0B0A08) 100%); border: 1px solid #FFFFFF3D; box-shadow: inset 0 2px 1px #FFFFFF73, /* lit top bevel */ inset 0 -10px 18px #00000059, /* body falls into shade */ inset 0 0 0 4px color-mix(in srgb, var(--tint, #86F802) 30%, transparent), 0 7px 0 -1px color-mix(in srgb, var(--tint, #86F802) 40%, #0B0A08), /* the slab's thickness */ 0 18px 34px -8px color-mix(in srgb, var(--tint, #86F802) 55%, transparent), 0 30px 50px -20px #000000B3; transform: rotateX(14deg) rotateZ(-4deg); } .dg-orbit-tile img { width: 54%; height: auto; display: block; filter: drop-shadow(0 4px 6px #00000066) drop-shadow(0 0 10px #FFFFFF26); } .dg-orbit-node .dg-orbit-glyph { width: 54%; color: #F4FFB8; } .dg-orbit-node.has-render .dg-orbit-tile { background: none; border: 0; box-shadow: none; transform: none; } .dg-orbit-node.has-render .dg-orbit-tile img { width: 128%; max-width: none; filter: none; } .dg-orbit-chip { position: absolute; top: 12%; left: calc(100% + 10px); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 13px 9px 11px; border-radius: 12px; white-space: nowrap; background: #1F1B15B8; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid #FFFFFF1A; box-shadow: inset 0 1px 0 #FFFFFF14, 0 12px 24px -10px #000000A6; font-family: var(--font-body); line-height: 1.2; } .dg-orbit-node.is-left .dg-orbit-chip { left: auto; right: calc(100% + 10px); } .dg-orbit-chip i { grid-row: span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mid); box-shadow: 0 0 8px var(--accent-mid); } .dg-orbit-chip b { font-weight: 500; font-size: 13px; color: var(--ink-night); } .dg-orbit-chip small { font-size: 11px; color: #EDE9E099; } /* the mark stands in its own light */ .dg-orbit-mark::before { content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #86F80247, #86F80200); } .dg-orbit-node.is-front .dg-orbit-chip { top: calc(100% + 12px); left: 50%; right: auto; transform: translateX(-50%); }