Add listing page circuit heroes

2026-08-23 08:56:42 -07:00
parent b12030aeb0
commit 435322be15
5 changed files with 659 additions and 1 deletions
@@ -0,0 +1,53 @@
+(() => {
+  const heroes = document.querySelectorAll("[data-section-hero]");
+  if (!heroes.length) return;
+
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (reducedMotion) return;
+
+  heroes.forEach((hero) => {
+    const config = hero.classList.contains("section-hero--projects")
+      ? { pathPad: 22, duration: 2800, durationRange: 2200, delay: 250, delayRange: 1100, start: 250, stagger: 500, edgeOpacity: 0.18, liveOpacity: 0.8, glitch: 9000 }
+      : hero.classList.contains("section-hero--articles")
+        ? { pathPad: 20, duration: 2600, durationRange: 2200, delay: 300, delayRange: 1000, start: 250, stagger: 550, edgeOpacity: 0.15, liveOpacity: 0.78, glitch: 9800 }
+        : { pathPad: 20, duration: 2400, durationRange: 2300, delay: 250, delayRange: 900, start: 200, stagger: 520, edgeOpacity: 0.14, liveOpacity: 0.8, glitch: 7600 };
+
+    hero.querySelectorAll(".section-hero__packet").forEach((packet, index) => {
+      if (typeof packet.animate !== "function") return;
+
+      const length = packet.getTotalLength();
+
+      const animate = () => {
+        const reverse = Math.random() > 0.5;
+        const from = reverse ? -(length + config.pathPad) : config.pathPad;
+        const to = reverse ? config.pathPad : -(length + config.pathPad);
+        const duration = config.duration + Math.random() * config.durationRange;
+        const animation = packet.animate(
+          [
+            { strokeDashoffset: String(from), opacity: config.edgeOpacity },
+            { offset: 0.15, opacity: config.liveOpacity },
+            { offset: 0.85, opacity: config.liveOpacity },
+            { strokeDashoffset: String(to), opacity: hero.classList.contains("section-hero--projects") ? 0.15 : 0.12 },
+          ],
+          { duration, easing: "linear" },
+        );
+
+        if (animation.finished) {
+          animation.finished
+            .then(() => window.setTimeout(animate, config.delay + Math.random() * config.delayRange))
+            .catch(() => {});
+        } else {
+          window.setTimeout(animate, duration + config.delay + Math.random() * config.delayRange);
+        }
+      };
+
+      window.setTimeout(animate, config.start + index * config.stagger);
+    });
+
+    window.setInterval(() => {
+      hero.classList.remove("is-glitching");
+      void hero.offsetWidth;
+      hero.classList.add("is-glitching");
+    }, config.glitch);
+  });
+})();
@@ -41,6 +41,422 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .dek { max-width: 700px; margin-top: 18px; color: var(--muted); }
 .dek p { margin: 0; }

+.section-hero {
+  --section-accent: #00f58b;
+  --section-accent-rgb: 0, 245, 139;
+  --section-accent-soft: #00c974;
+  --section-alt: #00f58b;
+  --section-bg: #050706;
+  --section-copy: #d4ddd8;
+  --section-muted: #8fa39a;
+  --section-trace: #0e5138;
+  --section-trace-soft: #123828;
+  --section-node: #158158;
+  position: relative;
+  width: min(100% - 40px, 1180px);
+  min-height: 175px;
+  margin: 32px auto 0;
+  overflow: hidden;
+  border: 1px solid rgba(var(--section-accent-rgb), .48);
+  background:
+    linear-gradient(rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
+    radial-gradient(circle at 78% 48%, rgba(var(--section-accent-rgb), .085), transparent 260px),
+    var(--section-bg);
+  background-size: 22px 22px, 22px 22px, auto, auto;
+  box-shadow: inset 0 0 36px rgba(var(--section-accent-rgb), .028);
+  isolation: isolate;
+}
+.section-hero--articles {
+  --section-accent: #19d7ff;
+  --section-accent-rgb: 25, 215, 255;
+  --section-accent-soft: #00aee8;
+  --section-alt: #ff37c7;
+  --section-bg: #040608;
+  --section-copy: #d8e0e4;
+  --section-muted: #8fa7b2;
+  --section-trace: #0f536a;
+  --section-trace-soft: #102f3b;
+  --section-node: #157995;
+}
+.section-hero--blog {
+  --section-accent: #ff2a9d;
+  --section-accent-rgb: 255, 42, 157;
+  --section-accent-soft: #d80f7e;
+  --section-alt: #7e36ff;
+  --section-bg: #050307;
+  --section-copy: #ded5dc;
+  --section-muted: #a992a5;
+  --section-trace: #5a173e;
+  --section-trace-soft: #301126;
+  --section-node: #8b235f;
+  background:
+    linear-gradient(rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(var(--section-accent-rgb), .022) 1px, transparent 1px),
+    radial-gradient(circle at 78% 48%, rgba(var(--section-accent-rgb), .09), transparent 250px),
+    radial-gradient(circle at 66% 68%, rgba(126, 54, 255, .05), transparent 220px),
+    var(--section-bg);
+  background-size: 22px 22px, 22px 22px, auto, auto, auto;
+}
+.section-hero::after {
+  content: "";
+  position: absolute;
+  z-index: 10;
+  inset: 0;
+  pointer-events: none;
+  opacity: .22;
+  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px);
+}
+.section-hero__corner {
+  position: absolute;
+  z-index: 12;
+  width: 42px;
+  height: 42px;
+}
+.section-hero__corner::before,
+.section-hero__corner::after {
+  content: "";
+  position: absolute;
+  background: var(--section-accent);
+  box-shadow: 0 0 8px rgba(var(--section-accent-rgb), .28);
+}
+.section-hero__corner::before { width: 32px; height: 2px; }
+.section-hero__corner::after { width: 2px; height: 32px; }
+.section-hero__corner--tl { top: 8px; left: 8px; }
+.section-hero__corner--tr { top: 8px; right: 8px; transform: scaleX(-1); }
+.section-hero__corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
+.section-hero__corner--br { right: 8px; bottom: 8px; transform: scale(-1); }
+.section-hero__content {
+  position: relative;
+  z-index: 4;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
+  gap: 28px;
+  min-height: 175px;
+  padding: 20px 36px;
+}
+.section-hero--articles .section-hero__content { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
+.section-hero--blog .section-hero__content { grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr); }
+.section-hero__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+.section-hero__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 8px;
+  color: var(--section-accent);
+  font: 800 11px/1.2 var(--mono);
+  letter-spacing: .15em;
+  text-transform: uppercase;
+}
+.section-hero--projects .section-hero__eyebrow { margin-bottom: 10px; font-size: .72rem; letter-spacing: .16em; }
+.section-hero--articles .section-hero__eyebrow,
+.section-hero--blog .section-hero__eyebrow { font-size: .7rem; }
+.section-hero--projects .section-hero__eyebrow::before {
+  content: "";
+  width: 28px;
+  height: 2px;
+  background: var(--section-accent);
+  box-shadow: 0 0 7px rgba(var(--section-accent-rgb), .4);
+}
+.section-hero__pulse-dot,
+.section-hero__live-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--section-accent);
+  box-shadow: 0 0 10px rgba(var(--section-accent-rgb), .8);
+  animation: section-hero-blink 1.5s ease-in-out infinite;
+}
+.section-hero__doc-icon {
+  position: relative;
+  width: 19px;
+  height: 23px;
+  flex: 0 0 auto;
+  border: 1px solid var(--section-accent);
+  box-shadow: 0 0 7px rgba(var(--section-accent-rgb), .15);
+}
+.section-hero__doc-icon::before,
+.section-hero__doc-icon::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  height: 1px;
+  background: var(--section-accent);
+}
+.section-hero__doc-icon::before { top: 7px; width: 9px; }
+.section-hero__doc-icon::after { top: 12px; width: 7px; }
+.section-hero__chat-icon {
+  position: relative;
+  width: 24px;
+  height: 18px;
+  flex: 0 0 auto;
+  border: 1px solid var(--section-accent);
+  border-radius: 3px;
+  box-shadow: 0 0 8px rgba(var(--section-accent-rgb), .18);
+}
+.section-hero__chat-icon::before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  width: 13px;
+  height: 1px;
+  background: var(--section-accent);
+  box-shadow: 0 4px 0 var(--section-accent);
+}
+.section-hero__chat-icon::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 4px;
+  border-width: 4px 5px 0 0;
+  border-style: solid;
+  border-color: var(--section-accent) transparent transparent transparent;
+}
+.section-hero h1 {
+  max-width: none;
+  margin: 0;
+  font: 900 clamp(2.65rem, 6vw, 4.8rem)/.82 Arial, Helvetica, sans-serif;
+  font-style: normal;
+  letter-spacing: .035em;
+  text-transform: uppercase;
+}
+.section-hero--articles h1,
+.section-hero--blog h1 { letter-spacing: .04em; }
+.section-hero__slash {
+  margin: 8px 0 0;
+  color: var(--section-accent);
+  font: 500 1.35rem/1.2 var(--mono);
+}
+.section-hero__slash span {
+  font-size: 1.05rem;
+  letter-spacing: .05em;
+  vertical-align: .12em;
+  text-transform: uppercase;
+}
+.section-hero--articles .section-hero__slash span,
+.section-hero--blog .section-hero__slash span { font-size: 1.02rem; }
+.section-hero__intro {
+  max-width: 600px;
+  margin: 10px 0 0;
+  color: var(--section-copy);
+  font: 1rem/1.6 Georgia, "Times New Roman", serif;
+}
+.section-hero--articles .section-hero__intro,
+.section-hero--blog .section-hero__intro { font-size: .98rem; line-height: 1.45; }
+.section-hero__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+.section-hero__chips > span {
+  border: 1px solid rgba(var(--section-accent-rgb), .22);
+  background: rgba(var(--section-accent-rgb), .025);
+  padding: .42rem .58rem;
+  color: var(--section-muted);
+  font: 500 .64rem/1.2 var(--mono);
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+.section-hero--articles .section-hero__chips > span,
+.section-hero--blog .section-hero__chips > span { padding: .38rem .52rem; font-size: .62rem; }
+.section-hero__chips strong { color: var(--section-accent); }
+.section-hero__visual {
+  position: relative;
+  min-height: 135px;
+  align-self: center;
+}
+.section-hero__visual svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 135px;
+  overflow: visible;
+}
+.section-hero__trace,
+.section-hero__trace-soft,
+.section-hero__packet {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+.section-hero__trace { stroke: var(--section-trace); stroke-width: 1.05; }
+.section-hero__trace-soft { stroke: var(--section-trace-soft); stroke-width: .9; }
+.section-hero__packet {
+  stroke: var(--section-accent);
+  stroke-width: 1.3;
+  stroke-linecap: square;
+  stroke-dasharray: 16 9999;
+  opacity: .8;
+  filter: drop-shadow(0 0 4px rgba(var(--section-accent-rgb), .45));
+}
+.section-hero__packet--alt { stroke: var(--section-alt); }
+.section-hero--articles .section-hero__packet--alt { opacity: .5; }
+.section-hero--blog .section-hero__packet--alt { opacity: .58; }
+.section-hero__node {
+  fill: var(--section-bg);
+  stroke: var(--section-node);
+  stroke-width: 1;
+}
+.section-hero__status-card {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 184px;
+  border: 1px solid rgba(var(--section-accent-rgb), .32);
+  background: rgba(3, 10, 15, .8);
+  padding: 9px 11px 8px;
+  backdrop-filter: blur(2px);
+}
+.section-hero--projects .section-hero__status-card { width: 170px; background: rgba(4, 10, 7, .8); }
+.section-hero--articles .section-hero__status-card,
+.section-hero--blog .section-hero__status-card { top: 2px; right: 2px; }
+.section-hero--blog .section-hero__status-card { background: rgba(11, 3, 8, .8); }
+.section-hero__widget-label {
+  display: block;
+  color: var(--section-accent);
+  font: 500 10px/1.2 var(--mono);
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+.section-hero--projects .section-hero__widget-label { font-size: .65rem; letter-spacing: .14em; }
+.section-hero__status-card > strong {
+  display: block;
+  margin-top: 6px;
+  font: 800 18px/1.2 var(--mono);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.section-hero--projects .section-hero__status-card > strong { font-size: 1.15rem; }
+.section-hero__bars { display: flex; gap: 4px; margin-top: 7px; }
+.section-hero__bars i {
+  width: 14px;
+  height: 8px;
+  border: 1px solid var(--section-accent-soft);
+  background: var(--section-accent);
+  box-shadow: 0 0 6px rgba(var(--section-accent-rgb), .35);
+}
+.section-hero__bars i.is-off { background: transparent; box-shadow: none; opacity: .45; }
+.section-hero__status-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 7px;
+  color: var(--section-copy);
+  font: 500 10px/1.2 var(--mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.section-hero__status-line b { color: var(--section-accent); }
+.section-hero__radar,
+.section-hero__signal-core {
+  position: absolute;
+  top: 7px;
+  right: 196px;
+  width: 105px;
+  height: 105px;
+  border: 1px solid rgba(var(--section-accent-rgb), .18);
+  border-radius: 50%;
+}
+.section-hero__radar {
+  background:
+    radial-gradient(circle, transparent 0 24%, rgba(var(--section-accent-rgb), .09) 24.5% 25.5%, transparent 26% 48%, rgba(var(--section-accent-rgb), .07) 48.5% 49.5%, transparent 50%),
+    linear-gradient(90deg, transparent 49.5%, rgba(var(--section-accent-rgb), .14) 50%, transparent 50.5%),
+    linear-gradient(transparent 49.5%, rgba(var(--section-accent-rgb), .14) 50%, transparent 50.5%);
+  opacity: .82;
+}
+.section-hero__radar::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 46%;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(var(--section-accent-rgb), .85), transparent);
+  box-shadow: 0 0 7px rgba(var(--section-accent-rgb), .35);
+  transform-origin: left center;
+  animation: section-hero-sweep 3.4s linear infinite;
+}
+.section-hero__signal-core {
+  top: 9px;
+  right: 205px;
+  width: 102px;
+  height: 102px;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(var(--section-accent-rgb), .22) 0 14%, transparent 15%),
+    radial-gradient(circle, transparent 0 38%, rgba(var(--section-accent-rgb), .08) 39% 40%, transparent 41%),
+    linear-gradient(90deg, transparent 49.5%, rgba(var(--section-accent-rgb), .12) 50%, transparent 50.5%),
+    linear-gradient(transparent 49.5%, rgba(var(--section-accent-rgb), .12) 50%, transparent 50.5%);
+  box-shadow: 0 0 18px rgba(var(--section-accent-rgb), .08);
+}
+.section-hero__signal-core::before {
+  content: "";
+  position: absolute;
+  inset: 20px;
+  background: var(--section-accent);
+  clip-path: polygon(0 44%, 38% 44%, 46% 20%, 57% 76%, 66% 40%, 100% 40%, 100% 58%, 72% 58%, 58% 92%, 47% 48%, 40% 62%, 0 62%);
+  filter: drop-shadow(0 0 5px rgba(var(--section-accent-rgb), .55));
+  animation: section-hero-pulse 1.7s ease-in-out infinite;
+}
+.section-hero__signal-row {
+  position: absolute;
+  right: 18px;
+  bottom: 1px;
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  width: 270px;
+  margin: 0;
+  border-top: 1px solid rgba(var(--section-accent-rgb), .2);
+  padding-top: 7px;
+  color: var(--section-muted);
+  font: 500 .59rem/1.4 var(--mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.section-hero--articles .section-hero__signal-row { right: 22px; width: 255px; }
+.section-hero__signal-row b { color: var(--section-accent); }
+.section-hero__signal-row--stacked {
+  right: 18px;
+  bottom: 2px;
+  display: block;
+  width: 214px;
+  line-height: 1.5;
+  font-size: .64rem;
+}
+.section-hero__glitch-strip {
+  position: absolute;
+  top: 42%;
+  right: 5%;
+  left: 47%;
+  height: 2px;
+  opacity: .22;
+  background: linear-gradient(90deg, transparent 0 8%, var(--section-accent) 8% 20%, transparent 20% 28%, var(--section-alt) 28% 36%, transparent 36% 65%, var(--section-accent) 65% 81%, transparent 81%);
+  animation: section-hero-strip 2.8s steps(3, end) infinite;
+}
+.section-hero.is-glitching { animation: section-hero-glitch .34s steps(2, end); }
+.section-hero--articles.is-glitching { animation-duration: .32s; }
+
+@keyframes section-hero-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
+@keyframes section-hero-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes section-hero-pulse { 0%, 100% { opacity: .42; transform: scaleX(.92); } 50% { opacity: 1; transform: scaleX(1.05); } }
+@keyframes section-hero-strip { 0%, 100% { transform: translateX(0); opacity: .12; } 40% { transform: translateX(8px); opacity: .28; } 65% { transform: translateX(-5px); opacity: .18; } }
+@keyframes section-hero-glitch {
+  0% { transform: translate(0); filter: none; }
+  20% { transform: translate(3px, -1px); filter: contrast(1.3) saturate(1.2); }
+  40% { transform: translate(-5px, 1px); }
+  60% { transform: translate(2px, 0); filter: hue-rotate(7deg); }
+  80% { transform: translate(-2px, -1px); }
+  100% { transform: translate(0); filter: none; }
+}
+
 .circuit-hero {
  --circuit-gold: #c5a059;
  --circuit-cyan: #65f7ff;
@@ -768,6 +1184,21 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .footer-inner { min-height: 105px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
 .site-footer nav { display: flex; gap: 22px; }

+@media (max-width: 760px) {
+  .section-hero { width: calc(100% - 28px); margin-top: 20px; }
+  .section-hero__content { grid-template-columns: 1fr; padding: 24px 22px 20px; }
+  .section-hero h1 { font-size: clamp(42px, 13vw, 68px); }
+  .section-hero__visual { min-height: 125px; }
+  .section-hero--articles .section-hero__visual,
+  .section-hero--blog .section-hero__visual { min-height: 128px; }
+  .section-hero__radar,
+  .section-hero__signal-core { top: 7px; right: auto; left: 0; width: 92px; height: 92px; }
+  .section-hero__status-card { right: 0; }
+  .section-hero__signal-row { right: 0; width: 100%; max-width: 290px; }
+  .section-hero__signal-row--stacked { right: 10px; width: 214px; }
+  .section-hero__glitch-strip { left: 30%; }
+}
+
@media (max-width: 860px) and (min-width: 721px) {
  .circuit-hero { height: 720px; min-height: 720px; }
  .circuit-brand-block { width: 72vw; }
@@ -882,6 +1313,12 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
@media (prefers-reduced-motion: reduce) {
  .circuit-status span,
  .circuit-node-main i,
+  .section-hero,
+  .section-hero__pulse-dot,
+  .section-hero__live-dot,
+  .section-hero__radar::after,
+  .section-hero__signal-core::before,
+  .section-hero__glitch-strip,
  .share-action:hover::after,
  .share-action:focus-visible::after { animation: none; }
 }