/* ========================================================================== /connection-chart — the site-wide arc diagram Scoped under body.cc-skin, so ?design=current (the Phase-1 ZingChart chord page) is untouched. The page replaced a ZingChart chord diagram. Why an arc diagram instead is argued in App\Support\ConnectionChart and in CLAUDE.md; the short version is that a chord diagram throws away episode ORDER, and order is the whole story here — a season 1 detail paying off in season 5 should look far, and on a circle it looks adjacent. TWO PALETTES, both already established on this site: - the HERO backdrop is bright-on-dark (ConnectionChart::lit) - the CHART itself is dark-on-white (ConnectionChart::ink, i.e. the same five values massive-dynamic.css gives --md-accent per verse) ========================================================================== */ /* --- hero ---------------------------------------------------------------- No photograph: the page's own diagram is its hero image. The media box is the shared .md-hero__media, so it keeps the site's band height and scrim; it only needs a dark ground (the shared default is a pale #bcd3e6, meant to sit under a photo) and the arc drawing inside it. */ .cc-skin .cc-hero__media { background: radial-gradient(120% 130% at 15% 0%, #1d2836 0%, #12161d 55%, #0d1014 100%); } /* Anchored to the band's bottom edge and masked out at the top so the tall cross-season arcs dissolve into the ground instead of colliding with the headline. preserveAspectRatio="none" is deliberate here and ONLY here — this copy is texture, so stretching it to fill the band is fine. The real chart below scales uniformly. */ .cc-skin .cc-hero__arc { position: absolute; inset: auto 0 -6% 0; line-height: 0; opacity: .85; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%); } .cc-skin .cc-hero__arc svg { width: 100%; height: 100%; display: block } .cc-skin .cc-hero__arcline { fill: none; stroke: rgba(120, 176, 232, .22); stroke-width: 1; vector-effect: non-scaling-stroke; } .cc-skin .cc-hero__arcline.is-far { stroke: rgba(150, 205, 255, .42) } @media (max-width: 700px) { .cc-skin .cc-hero__arc { opacity: .6 } } /* --- section rhythm ------------------------------------------------------- */ .cc-skin .cc-section { padding-bottom: 1.25rem } .cc-skin .cc-lede { color: var(--md-body); line-height: 1.7; margin: 0 0 1.25rem; } /* --- the picker ---------------------------------------------------------- A real GET form (see the view). The submit button only disappears once .fr-js is on , so with JS off it stays and the form works. */ .cc-skin .cc-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin: 0 0 1rem; } .cc-skin .cc-picker__label { font-family: var(--md-display); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--md-accent); margin: 0; } .cc-skin .cc-picker__select { flex: 1 1 20rem; min-width: 0; max-width: 32rem; padding: .45rem .6rem; font-family: inherit; font-size: .92rem; color: var(--md-ink); background: #fff; border: 1px solid var(--md-line); border-radius: 4px; } .cc-skin .cc-picker__select:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 1px; } .cc-skin .cc-picker__go { padding: .45rem .9rem; font-family: var(--md-display); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--md-accent); border: 1px solid var(--md-accent); border-radius: 4px; cursor: pointer; } .fr-js .cc-skin .cc-picker__go { display: none } .cc-skin .cc-picker__clear { font-size: .85rem; color: var(--md-muted); border-bottom: 1px solid var(--md-line); text-decoration: none; } .cc-skin .cc-picker__clear:hover { color: var(--md-accent); border-bottom-color: currentColor } .cc-skin .cc-picker__clear.is-hidden { display: none } /* --- readout ------------------------------------------------------------- min-height so swapping between the one-line hint and the two-line selected state can't shift the chart underneath it. */ .cc-skin .cc-readout { min-height: 2.6em; margin: 0 0 .35rem; font-size: .93rem; line-height: 1.4; color: var(--md-body); } .cc-skin .cc-readout strong { color: var(--md-ink) } /* --- the chart ----------------------------------------------------------- */ .cc-skin .cc-chart { margin: 0 0 1.5rem } .cc-skin .cc-chart__svg { display: block; width: 100%; height: auto; /* uniform scale — the nodes must stay circles */ overflow: visible; touch-action: manipulation; } .cc-skin .cc-band { fill: rgba(42, 53, 64, .035) } .cc-skin .cc-band__label { fill: var(--md-muted); font-family: var(--md-display); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-anchor: middle; } .cc-skin .cc-axis { stroke: rgba(42, 53, 64, .32); stroke-width: 1; vector-effect: non-scaling-stroke } .cc-skin .cc-tick { stroke: rgba(42, 53, 64, .22); stroke-width: 1; vector-effect: non-scaling-stroke } /* ARCS ENCODE REACH, NOT VERSE — the nodes carry the colour. Two variables on one mark is what made the legacy chord unreadable (its ribbon width encoded a value that is 1 on 283 of 322 pairs, i.e. nothing). Here: distance is the arc's shape AND its weight, and everything else is left to the dots. */ .cc-skin .cc-arc { fill: none; stroke: rgba(42, 53, 64, .28); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .18s ease, stroke .18s ease; } .cc-skin .cc-arc.is-far { stroke: rgba(42, 53, 64, .5); stroke-width: 1.3 } .cc-skin .cc-node__hit { fill: transparent; cursor: pointer } .cc-skin .cc-node__dot { transition: r .15s ease, opacity .18s ease; pointer-events: none; } /* An episode with no connections still gets a dot — it is on the chart, it just has nothing above it. The legacy chord gave these three a zero-width segment, i.e. drew them as if they did not exist. */ .cc-skin .cc-node.is-empty .cc-node__dot { fill: none !important; stroke: rgba(42, 53, 64, .45); stroke-width: 1.2 } /* --- selected / filtered state ------------------------------------------- Everything not on the selected episode drops back rather than disappearing, so the shape of the whole run stays legible behind the answer. */ .cc-skin .cc-chart.is-filtered .cc-arc { opacity: .07 } .cc-skin .cc-chart.is-filtered .cc-node__dot { opacity: .22 } .cc-skin .cc-chart.is-filtered .cc-arc.is-on { opacity: 1; stroke: var(--cc-sel, var(--md-accent)); stroke-width: 1.8; } .cc-skin .cc-chart.is-filtered .cc-node.is-on .cc-node__dot { opacity: 1; r: 3.8 } .cc-skin .cc-chart.is-filtered .cc-node.is-sel .cc-node__dot { opacity: 1; r: 6; stroke: #fff; stroke-width: 2; paint-order: stroke; } /* Hover preview, which must out-rank the filtered dimming above so you can still explore while one episode is selected. */ .cc-skin .cc-chart .cc-arc.is-hot { opacity: 1; stroke: var(--cc-hot, var(--md-accent)); stroke-width: 1.8 } .cc-skin .cc-chart .cc-node.is-hot .cc-node__dot { opacity: 1; r: 5.5 } .cc-skin .cc-chart .cc-node.is-near .cc-node__dot { opacity: 1; r: 4 } @media (prefers-reduced-motion: reduce) { .cc-skin .cc-arc, .cc-skin .cc-node__dot { transition: none } } /* --- legend --------------------------------------------------------------- */ .cc-skin .cc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .5rem; font-size: .8rem; color: var(--md-muted); } .cc-skin .cc-legend__item { display: inline-flex; align-items: center; gap: .5rem } .cc-skin .cc-legend__arc { display: inline-block; width: 30px; height: 9px; flex: none; border-top: 1px solid rgba(42, 53, 64, .38); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .cc-skin .cc-legend__arc.is-far { border-top-color: rgba(42, 53, 64, .7); border-top-width: 1.5px } /* --- the chip list -------------------------------------------------------- */ .cc-skin .cc-partners:empty { display: none } .cc-skin .cc-partners { margin-top: 1.75rem } /* A compact accent eyebrow — the site's sub-heading treatment (a bare h3 falls through to the legacy Freelancer rules and out-weighs the 22.4px section header above it). */ .cc-skin .cc-partners__head { font-family: var(--md-display); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--md-accent); margin: 0 0 .75rem; } .cc-skin .cc-partners__none { color: var(--md-body); line-height: 1.7; margin: 0 } .cc-skin .cc-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } /* The extra .cc-chips out-specifies the generic in-content link rule `.md-skin .col-lg a` (0,2,1), which would otherwise paint these accent and underline them — the same specificity trap the connections chip index hit. */ .cc-skin .cc-chips .cc-chip { display: inline-flex; align-items: baseline; gap: .45rem; max-width: 100%; padding: .3rem .6rem .3rem .5rem; border: 1px solid var(--md-line); border-left: 3px solid var(--cc-chip, var(--md-accent)); border-radius: 3px; background: #fff; color: var(--md-ink); text-decoration: none; font-size: .86rem; line-height: 1.35; transition: border-color .15s ease, box-shadow .15s ease; } .cc-skin .cc-chips .cc-chip:hover, .cc-skin .cc-chips .cc-chip:focus-visible { border-color: var(--cc-chip, var(--md-accent)); border-left-color: var(--cc-chip, var(--md-accent)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--md-ink); text-decoration: none; } .cc-skin .cc-chip__code { font-family: var(--md-display); font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: var(--cc-chip, var(--md-accent)); flex: none; } .cc-skin .cc-chip__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-skin .cc-chip__n { flex: none; padding: 0 .35rem; border-radius: 999px; background: rgba(42, 53, 64, .08); font-size: .72rem; color: var(--md-muted); } /* --- season matrix -------------------------------------------------------- */ .cc-skin .cc-matrix__scroll { overflow-x: auto } .cc-skin .cc-matrix { border-collapse: collapse; font-variant-numeric: tabular-nums; } .cc-skin .cc-matrix th { font-family: var(--md-display); font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--md-muted); padding: .4rem .6rem; text-align: center; } .cc-skin .cc-matrix th[scope="row"] { text-align: right } .cc-skin .cc-matrix td { width: 4.2rem; padding: .55rem .6rem; text-align: center; font-size: .95rem; color: var(--md-ink); border: 1px solid #fff; /* --cc-fill is the cell's share of the largest cell, set inline. */ background: color-mix(in srgb, var(--md-accent) calc(var(--cc-fill, 0%) * 0.5), #fff); } .cc-skin .cc-matrix .cc-matrix__blank { background: none; border-color: transparent } .cc-skin .cc-matrix .is-diag { font-weight: 700 } .cc-skin .cc-matrix__note { margin: .9rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--md-muted); } /* --- narrow -------------------------------------------------------------- THE CHART GETS A MIN-WIDTH AND SCROLLS below md. Scaled to a 303px column the 1000x470 viewBox is 142px tall with the 100 nodes 3px apart, which is a texture rather than something you can tap. 620px keeps a node ~6px from its neighbour — still tight, but pointable, and the picker + chip list below are the real controls at this width anyway. The scroll container is the page's own, so the document itself never overflows. */ @media (max-width: 767.98px) { .cc-skin .cc-chart__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cc-skin .cc-chart__svg { min-width: 620px } } @media (max-width: 575.98px) { .cc-skin .cc-picker__label { flex: 1 0 100% } .cc-skin .cc-picker__select { flex: 1 1 100%; max-width: none } .cc-skin .cc-chip__title { max-width: 11rem } .cc-skin .cc-matrix td { width: auto; padding: .45rem .5rem; font-size: .88rem } }