feat(frontend): update portal layout and API environments

frontend/site/AGENTS.md

@@ -11,6 +11,8 @@ Build app UI in `src/`. Keep `.openai/hosting.json`, `worker/index.js`, `scripts
 ## 和气门户设计约束
 
 - 本项目是品牌化管理入口门户，不承载统一登录、运营数据或业务编辑。
+- 门户使用常规三行布局：头部展示 Logo、名称与口号，中间为广告语与滚动图 Banner，底部为三个管理系统入口。
+- Banner 保持紧凑，不占满页面剩余高度；三张轮播图分别对应平台、气站和配送场景。
 - 桌面端优先一屏完成，移动端允许自然纵向滚动。
 - 视觉语言延续三套管理系统登录页的半写实等距插画，并使用平台蓝、气站橙、配送青绿区分入口。
 - 三个入口始终在新标签页打开，分别指向 `p.heqiapp.com`、`z.heqiapp.com` 与 `d.heqiapp.com`。

frontend/site/src/App.jsx

@@ -1,9 +1,34 @@
+import { useEffect, useState } from "react";
 import {
   ArrowRight,
   ArrowSquareOut,
   ShieldCheck,
 } from "@phosphor-icons/react";
 
+const slides = [
+  {
+    eyebrow: "平台协同",
+    title: "一屏统筹，安全连接每一程",
+    description: "连接智能瓶阀、气站运营与配送履约，让治理更清晰、协同更高效。",
+    image: "/assets/banner-platform.png",
+    position: "center center",
+  },
+  {
+    eyebrow: "智慧气站",
+    title: "让每一次供气更稳、更安心",
+    description: "以数字化能力贯通站点经营、安全服务与履约管理。",
+    image: "/assets/banner-gas-station.png",
+    position: "center center",
+  },
+  {
+    eyebrow: "高效配送",
+    title: "从调度到送达，全程清晰可追溯",
+    description: "智能连接配送资源与服务现场，让每一程都有迹可循。",
+    image: "/assets/banner-delivery.png",
+    position: "center center",
+  },
+];
+
 const portals = [
   {
     number: "01",
@@ -37,64 +62,104 @@ function PortalLink({ portal }) {
       rel="noreferrer"
       aria-label={`进入${portal.title}，将在新标签页打开`}
     >
-      <div className="portal__heading">
-        <span className="portal__number" aria-hidden="true">
-          {portal.number}
-        </span>
-        <span className="portal__divider" aria-hidden="true" />
-        <div>
-          <h2>{portal.title}</h2>
-          <p>{portal.description}</p>
-        </div>
-      </div>
+      <span className="portal__number" aria-hidden="true">
+        {portal.number}
+      </span>
+      <span className="portal__content">
+        <strong>{portal.title}</strong>
+        <small>{portal.description}</small>
+      </span>
       <span className="portal__action">
         进入系统
-        <ArrowRight size={22} weight="bold" aria-hidden="true" />
+        <ArrowRight size={20} weight="bold" aria-hidden="true" />
       </span>
     </a>
   );
 }
 
 export function App() {
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setActiveSlide((current) => (current + 1) % slides.length);
+    }, 5000);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
   return (
     <main className="site-shell">
-      <img
-        className="ecosystem-scene"
-        src="/assets/heqi-ecosystem-hero.jpg"
-        alt=""
-        aria-hidden="true"
-      />
-
       <header className="site-header">
         <a className="brand" href="/" aria-label="和气首页">
           <img src="/assets/heqi-logo.svg" alt="" />
-          <span>和气</span>
+          <span className="brand__name">和气</span>
         </a>
-        <div className="trust-line">
-          <ShieldCheck size={20} weight="regular" aria-hidden="true" />
+        <div className="brand-slogan">
+          <ShieldCheck size={21} weight="regular" aria-hidden="true" />
+          <strong>安全连接每一程</strong>
           <span>安全可靠 · 稳定高效 · 智能互联</span>
         </div>
       </header>
 
-      <section className="hero" aria-labelledby="hero-title">
-        <p className="hero__eyebrow">HEQI SMART GAS PLATFORM</p>
-        <h1 id="hero-title">安全连接每一程</h1>
-        <p className="hero__description">
-          <span>智能瓶阀、气站运营与配送履约</span>
-          <span>的一体化管理入口</span>
-        </p>
+      <section className="banner" aria-roledescription="轮播图" aria-label="和气平台服务介绍">
+        <div
+          className="banner__track"
+          style={{ transform: `translateX(-${activeSlide * 100}%)` }}
+        >
+          {slides.map((slide, index) => (
+            <article
+              className="banner__slide"
+              key={slide.title}
+              aria-hidden={index !== activeSlide}
+            >
+              <img
+                src={slide.image}
+                alt=""
+                style={{ objectPosition: slide.position }}
+              />
+              <div className="banner__shade" />
+              <div className="banner__copy">
+                <p>{slide.eyebrow}</p>
+                <h1>{slide.title}</h1>
+                <span>{slide.description}</span>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="banner__dots" aria-label="选择轮播内容">
+          {slides.map((slide, index) => (
+            <button
+              type="button"
+              key={slide.title}
+              className={index === activeSlide ? "is-active" : ""}
+              onClick={() => setActiveSlide(index)}
+              aria-label={`显示第 ${index + 1} 张：${slide.title}`}
+              aria-current={index === activeSlide ? "true" : undefined}
+            />
+          ))}
+        </div>
       </section>
 
-      <nav className="portal-grid" aria-label="管理系统入口">
-        {portals.map((portal) => (
-          <PortalLink key={portal.href} portal={portal} />
-        ))}
-      </nav>
+      <footer className="site-footer">
+        <div className="footer-heading">
+          <div>
+            <p>MANAGEMENT PORTALS</p>
+            <h2>选择管理系统</h2>
+          </div>
+          <span>
+            <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
+            系统将在新标签页中打开
+          </span>
+        </div>
 
-      <p className="external-note">
-        <ArrowSquareOut size={17} weight="regular" aria-hidden="true" />
-        系统将在新标签页中打开
-      </p>
+        <nav className="portal-grid" aria-label="管理系统入口">
+          {portals.map((portal) => (
+            <PortalLink key={portal.href} portal={portal} />
+          ))}
+        </nav>
+      </footer>
     </main>
   );
 }

frontend/site/src/styles.css

@@ -4,15 +4,12 @@
   font-family:
     "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
   color: #202936;
-  background: #f7faff;
+  background: #f4f7fb;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   --platform: #1265e8;
-  --platform-deep: #0c4fbd;
   --station: #dc7100;
-  --station-deep: #b85a00;
-  --delivery: #068f8b;
-  --delivery-deep: #08746f;
+  --delivery: #078e89;
 }
 
 * {
@@ -21,54 +18,42 @@
 
 html {
   min-width: 320px;
-  background: #f7faff;
+  background: #f4f7fb;
 }
 
 body {
-  margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  margin: 0;
   color: #202936;
-  background: #f7faff;
+  background: #f4f7fb;
   -webkit-font-smoothing: antialiased;
 }
 
-#root {
-  min-height: 100vh;
+button,
+a {
+  font: inherit;
 }
 
-a {
-  color: inherit;
+#root,
+.site-shell {
+  min-height: 100vh;
 }
 
 .site-shell {
-  position: relative;
-  isolation: isolate;
-  min-height: 100vh;
-  min-height: 100dvh;
-  padding: 38px clamp(28px, 4.6vw, 72px) 30px;
-  overflow: hidden;
-  background: #f7faff;
-}
-
-.ecosystem-scene {
-  position: absolute;
-  inset: 108px 0 0;
-  z-index: -1;
-  width: 100%;
-  height: calc(100% - 108px);
-  object-fit: cover;
-  object-position: center bottom;
-  user-select: none;
-  pointer-events: none;
+  display: grid;
+  grid-template-rows: auto clamp(230px, 32vh, 300px) auto;
+  gap: clamp(18px, 2.4vh, 28px);
+  width: min(100%, 1440px);
+  margin: 0 auto;
+  padding: clamp(22px, 3.2vh, 38px) clamp(24px, 4.5vw, 68px)
+    clamp(24px, 3.4vh, 40px);
 }
 
 .site-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: min(100%, 1320px);
-  margin: 0 auto;
 }
 
 .brand {
@@ -76,401 +61,397 @@ a {
   gap: 12px;
   align-items: center;
   color: #17212d;
-  font-weight: 650;
-  font-size: 27px;
-  line-height: 1;
-  letter-spacing: 0.04em;
   text-decoration: none;
 }
 
 .brand img {
-  width: 43px;
-  height: 43px;
+  width: 44px;
+  height: 44px;
 }
 
-.trust-line {
-  display: inline-flex;
-  gap: 9px;
+.brand__name {
+  font-weight: 700;
+  font-size: 29px;
+  line-height: 1;
+  letter-spacing: 0.08em;
+}
+
+.brand-slogan {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 2px 9px;
   align-items: center;
-  color: #687586;
-  font-size: 14px;
-  line-height: 22px;
-  letter-spacing: 0.02em;
+  color: #27394e;
+  text-align: right;
 }
 
-.hero {
+.brand-slogan svg {
+  grid-row: 1 / 3;
+  color: var(--platform);
+}
+
+.brand-slogan strong {
+  font-size: 15px;
+  line-height: 21px;
+}
+
+.brand-slogan span {
+  color: #7b8796;
+  font-size: 11px;
+  line-height: 17px;
+  letter-spacing: 0.04em;
+}
+
+.banner {
+  position: relative;
+  min-height: 230px;
+  overflow: hidden;
+  background: #dfe8f4;
+  border: 1px solid rgba(103, 126, 154, 0.14);
+  border-radius: 22px;
+  box-shadow: 0 22px 60px rgba(44, 66, 92, 0.12);
+}
+
+.banner__track {
+  display: flex;
+  height: 100%;
+  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.banner__slide {
+  position: relative;
+  min-width: 100%;
+  min-height: 230px;
+  overflow: hidden;
+}
+
+.banner__slide img,
+.banner__shade {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.banner__slide img {
+  object-fit: cover;
+  transform: scale(1.01);
+}
+
+.banner__shade {
+  background:
+    linear-gradient(90deg, rgba(12, 27, 47, 0.74) 0%, rgba(14, 36, 65, 0.42) 40%, rgba(17, 40, 65, 0.04) 72%),
+    linear-gradient(0deg, rgba(8, 27, 48, 0.16), transparent 55%);
+}
+
+.banner__copy {
   position: relative;
   z-index: 1;
-  width: min(100%, 900px);
-  margin: clamp(34px, 4.5vh, 46px) auto 0;
-  text-align: center;
+  display: flex;
+  width: min(54%, 650px);
+  height: 100%;
+  min-height: 230px;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(34px, 5vw, 74px);
+  color: #fff;
 }
 
-.hero__eyebrow {
-  margin: 0 0 12px;
-  color: #6d7f95;
-  font-weight: 620;
+.banner__copy p {
+  margin: 0 0 11px;
+  color: #bcd8ff;
+  font-weight: 650;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.16em;
+}
+
+.banner__copy h1 {
+  margin: 0;
+  font-weight: 700;
+  font-size: clamp(30px, 3.2vw, 46px);
+  line-height: 1.22;
+  letter-spacing: 0.025em;
+  text-wrap: balance;
+}
+
+.banner__copy span {
+  max-width: 520px;
+  margin-top: 17px;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: clamp(14px, 1.25vw, 17px);
+  line-height: 1.8;
+}
+
+.banner__dots {
+  position: absolute;
+  bottom: 24px;
+  left: clamp(34px, 5vw, 74px);
+  z-index: 2;
+  display: flex;
+  gap: 8px;
+}
+
+.banner__dots button {
+  width: 24px;
+  height: 4px;
+  padding: 0;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.46);
+  border: 0;
+  border-radius: 999px;
+  transition:
+    width 180ms ease,
+    background-color 180ms ease;
+}
+
+.banner__dots button.is-active {
+  width: 48px;
+  background: #fff;
+}
+
+.banner__dots button:focus-visible {
+  outline: 3px solid rgba(255, 255, 255, 0.55);
+  outline-offset: 4px;
+}
+
+.site-footer {
+  display: grid;
+  gap: 14px;
+}
+
+.footer-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+.footer-heading p,
+.footer-heading h2 {
+  margin: 0;
+}
+
+.footer-heading p {
+  color: #8793a3;
+  font-weight: 650;
+  font-size: 10px;
+  line-height: 16px;
+  letter-spacing: 0.17em;
+}
+
+.footer-heading h2 {
+  margin-top: 2px;
+  color: #253244;
+  font-weight: 680;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+.footer-heading > span {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  color: #7d8998;
   font-size: 12px;
   line-height: 20px;
-  letter-spacing: 0.2em;
-}
-
-.hero h1 {
-  margin: 0;
-  color: #202936;
-  font-weight: 680;
-  font-size: clamp(48px, 4.2vw, 66px);
-  line-height: 1.16;
-  letter-spacing: 0.035em;
-}
-
-.hero__description {
-  margin: 18px auto 0;
-  color: #637083;
-  font-size: clamp(16px, 1.35vw, 19px);
-  line-height: 30px;
-  letter-spacing: 0.025em;
-}
-
-.hero__description span {
-  display: inline;
 }
 
 .portal-grid {
-  position: relative;
-  z-index: 2;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: clamp(30px, 4vw, 64px);
-  width: min(100%, 1280px);
-  margin: clamp(48px, 6.5vh, 66px) auto 0;
+  gap: 14px;
 }
 
 .portal {
   --accent: var(--platform);
-  --accent-deep: var(--platform-deep);
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 15px;
+  align-items: center;
   min-width: 0;
-  flex-direction: column;
-  gap: 24px;
-  padding: 8px 10px 12px;
-  background: rgba(255, 255, 255, 0.62);
+  min-height: 92px;
+  padding: 17px 18px;
+  color: inherit;
+  background: #fff;
+  border: 1px solid rgba(93, 117, 145, 0.14);
   border-radius: 14px;
+  box-shadow: 0 9px 24px rgba(48, 68, 91, 0.06);
   text-decoration: none;
   outline: none;
   transition:
-    background-color 180ms ease,
+    border-color 180ms ease,
     box-shadow 180ms ease,
     transform 180ms ease;
 }
 
 .portal--station {
   --accent: var(--station);
-  --accent-deep: var(--station-deep);
 }
 
 .portal--delivery {
   --accent: var(--delivery);
-  --accent-deep: var(--delivery-deep);
 }
 
-.portal:hover {
-  background: rgba(255, 255, 255, 0.82);
-  box-shadow: 0 18px 46px rgba(37, 58, 84, 0.12);
-  transform: translateY(-4px);
+.portal:hover,
+.portal:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
+  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 13%, transparent);
+  transform: translateY(-3px);
 }
 
 .portal:focus-visible {
-  background: rgba(255, 255, 255, 0.9);
   box-shadow:
-    0 0 0 4px rgba(18, 101, 232, 0.18),
-    0 18px 46px rgba(37, 58, 84, 0.12);
-}
-
-.portal__heading {
-  display: grid;
-  grid-template-columns: auto 1px minmax(0, 1fr);
-  gap: 20px;
-  align-items: center;
-  min-height: 68px;
+    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
+    0 14px 34px color-mix(in srgb, var(--accent) 13%, transparent);
 }
 
 .portal__number {
   color: var(--accent);
-  font-weight: 660;
-  font-size: clamp(46px, 4vw, 60px);
+  font-weight: 700;
+  font-size: 28px;
   line-height: 1;
-  letter-spacing: -0.035em;
 }
 
-.portal__divider {
-  width: 1px;
-  height: 54px;
-  background: color-mix(in srgb, var(--accent) 35%, transparent);
+.portal__content {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
 }
 
-.portal h2 {
-  margin: 0;
-  color: #202936;
-  font-weight: 650;
-  font-size: clamp(20px, 1.7vw, 25px);
-  line-height: 1.35;
+.portal__content strong {
+  color: #253244;
+  font-size: 17px;
+  line-height: 24px;
 }
 
-.portal p {
-  margin: 7px 0 0;
-  color: #6b7787;
-  font-size: 13px;
-  line-height: 21px;
+.portal__content small {
+  overflow: hidden;
+  color: #7b8796;
+  font-size: 11px;
+  line-height: 18px;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .portal__action {
   display: inline-flex;
-  width: min(100%, 194px);
-  min-height: 50px;
-  gap: 18px;
+  gap: 8px;
   align-items: center;
-  justify-content: center;
-  margin-left: 78px;
-  color: #fff;
-  background: var(--accent);
-  border-radius: 9px;
+  color: var(--accent);
   font-weight: 600;
-  font-size: 15px;
-  line-height: 22px;
-  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 24%, transparent);
-  transition: background-color 180ms ease;
+  font-size: 13px;
+  white-space: nowrap;
 }
 
-.portal:hover .portal__action,
-.portal:focus-visible .portal__action {
-  background: var(--accent-deep);
-}
-
-.external-note {
-  position: absolute;
-  right: clamp(28px, 4.6vw, 72px);
-  bottom: 24px;
-  z-index: 2;
-  display: inline-flex;
-  gap: 7px;
-  align-items: center;
-  margin: 0;
-  color: rgba(60, 76, 94, 0.72);
-  font-size: 12px;
-  line-height: 20px;
-}
-
-@media (max-width: 1020px) {
+@media (max-width: 980px) {
   .site-shell {
-    padding-inline: 28px;
+    grid-template-rows: auto clamp(240px, 34vh, 310px) auto;
   }
 
-  .portal-grid {
-    gap: 20px;
+  .banner__copy {
+    width: 64%;
   }
 
   .portal {
-    padding-inline: 4px;
-  }
-
-  .portal__heading {
-    gap: 13px;
-  }
-
-  .portal__number {
-    font-size: 44px;
-  }
-
-  .portal h2 {
-    font-size: 19px;
-  }
-
-  .portal p {
-    font-size: 12px;
+    grid-template-columns: auto minmax(0, 1fr);
   }
 
   .portal__action {
-    margin-left: 58px;
+    display: none;
   }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 720px) {
   .site-shell {
     display: flex;
     min-height: 100dvh;
     flex-direction: column;
-    padding: 24px 18px 0;
-    overflow: hidden;
-    background: #f7faff;
-  }
-
-  .ecosystem-scene {
-    position: relative;
-    inset: auto;
-    order: 5;
-    width: calc(100% + 36px);
-    height: auto;
-    margin: 34px -18px 0;
-    object-fit: contain;
-  }
-
-  .brand {
-    gap: 9px;
-    font-size: 22px;
+    gap: 18px;
+    padding: 20px 16px 24px;
   }
 
   .brand img {
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
   }
 
-  .trust-line {
+  .brand__name {
+    font-size: 23px;
+  }
+
+  .brand-slogan {
+    display: flex;
+    gap: 7px;
+  }
+
+  .brand-slogan strong {
+    font-size: 13px;
+  }
+
+  .brand-slogan span {
     display: none;
   }
 
-  .hero {
-    margin-top: 48px;
+  .banner,
+  .banner__slide,
+  .banner__copy {
+    min-height: 310px;
   }
 
-  .hero__eyebrow {
-    margin-bottom: 9px;
-    font-size: 10px;
-    letter-spacing: 0.15em;
+  .banner {
+    border-radius: 17px;
   }
 
-  .hero h1 {
-    font-size: clamp(37px, 11vw, 48px);
-    line-height: 1.18;
+  .banner__slide img {
+    object-position: center center !important;
   }
 
-  .hero__description {
-    max-width: 330px;
-    margin-top: 14px;
-    font-size: 15px;
-    line-height: 25px;
+  .banner__shade {
+    background: linear-gradient(0deg, rgba(10, 28, 49, 0.82) 0%, rgba(13, 34, 58, 0.32) 72%, rgba(13, 34, 58, 0.08) 100%);
   }
 
-  .hero__description span {
-    display: block;
+  .banner__copy {
+    width: 100%;
+    justify-content: end;
+    padding: 36px 26px 62px;
+  }
+
+  .banner__copy h1 {
+    font-size: clamp(29px, 9vw, 38px);
+  }
+
+  .banner__copy span {
+    font-size: 14px;
+  }
+
+  .banner__dots {
+    bottom: 25px;
+    left: 26px;
+  }
+
+  .footer-heading > span {
+    display: none;
   }
 
   .portal-grid {
     grid-template-columns: 1fr;
-    gap: 12px;
-    margin-top: 38px;
+    gap: 10px;
   }
 
   .portal {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 16px;
-    align-items: center;
-    padding: 15px;
-    background: rgba(255, 255, 255, 0.84);
-    border: 1px solid rgba(104, 132, 164, 0.14);
-    border-radius: 12px;
-    box-shadow: 0 10px 28px rgba(35, 60, 88, 0.08);
+    min-height: 82px;
+    padding: 15px 17px;
   }
 
   .portal:hover {
     transform: none;
   }
-
-  .portal__heading {
-    grid-template-columns: auto 1px minmax(0, 1fr);
-    gap: 12px;
-    min-height: auto;
-  }
-
-  .portal__number {
-    font-size: 32px;
-  }
-
-  .portal__divider {
-    height: 44px;
-  }
-
-  .portal h2 {
-    font-size: 17px;
-  }
-
-  .portal p {
-    margin-top: 4px;
-    overflow: hidden;
-    font-size: 11px;
-    line-height: 18px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .portal__action {
-    width: 46px;
-    min-height: 46px;
-    margin: 0;
-    border-radius: 50%;
-    font-size: 0;
-  }
-
-  .portal__action svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .external-note {
-    position: static;
-    order: 4;
-    justify-content: center;
-    margin: 18px 0 0;
-    font-size: 11px;
-  }
-}
-
-@media (max-width: 380px) {
-  .site-shell {
-    padding-inline: 14px;
-  }
-
-  .ecosystem-scene {
-    width: calc(100% + 28px);
-    margin-inline: -14px;
-  }
-
-  .portal {
-    padding-inline: 12px;
-  }
-
-  .portal__heading {
-    gap: 9px;
-  }
-
-  .portal__number {
-    font-size: 29px;
-  }
-
-  .portal h2 {
-    font-size: 16px;
-  }
-}
-
-@media (max-height: 790px) and (min-width: 761px) {
-  .site-shell {
-    padding-top: 26px;
-  }
-
-  .hero {
-    margin-top: 38px;
-  }
-
-  .portal-grid {
-    margin-top: 40px;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .portal,
-  .portal__action {
+  .banner__track,
+  .banner__dots button,
+  .portal {
     transition: none;
   }
 }