diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx
index dc3d8c5..fa60aa9 100644
--- a/src/features/home/HomePage.tsx
+++ b/src/features/home/HomePage.tsx
@@ -184,10 +184,18 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
const depth = Math.abs(offset);
const direction = Math.sign(offset);
const isActive = depth === 0;
- const xByDepth = [0, 190, 320, 430, 520, 590];
+ const xByDepth = [
+ "0px",
+ "clamp(52px, 13.5vw, 198px)",
+ "clamp(90px, 22.5vw, 334px)",
+ "clamp(122px, 30.5vw, 448px)",
+ "clamp(148px, 37vw, 542px)",
+ "clamp(170px, 42vw, 614px)",
+ ];
const yByDepth = [8, -2, -8, -13, -18, -24];
const scaleByDepth = [1, 1, 1, 1, 1, 1];
- const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
+ const xDistance = xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!;
+ const x = direction < 0 ? `calc(0px - ${xDistance})` : xDistance;
const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
const z = isActive ? 90 : 28 - depth;
const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
@@ -196,7 +204,7 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
"--apple-card-offset": offset,
"--apple-card-depth": depth,
"--apple-card-z": 80 - depth,
- "--apple-card-x": `${x}px`,
+ "--apple-card-x": x,
"--apple-card-y": `${y}px`,
"--apple-card-z-offset": `${z}px`,
"--apple-card-rotate-y": "0deg",
@@ -612,15 +620,24 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
diff --git a/src/features/more/MorePage.tsx b/src/features/more/MorePage.tsx
index d57f66c..bf740ad 100644
--- a/src/features/more/MorePage.tsx
+++ b/src/features/more/MorePage.tsx
@@ -345,11 +345,12 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
key={tool.id}
type="button"
className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
- style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
+ style={{
+ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))",
+ } as CSSProperties}
aria-label={`打开核心工具:${tool.title},${tool.text}`}
onClick={() => openTool(tool)}
>
- {tool.icon}
{categoryLabels[tool.category]}
{tool.title}
@@ -388,7 +389,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
onClick={() => openTool(tool)}
disabled={!tool.ready}
>
- {tool.icon}
{tool.tags.slice(0, 2).map((tag) => (
{tag}
diff --git a/src/styles/pages/home.css b/src/styles/pages/home.css
index cc8e46b..27faf22 100644
--- a/src/styles/pages/home.css
+++ b/src/styles/pages/home.css
@@ -402,21 +402,6 @@
transform: translateZ(20px) scale(1.02);
}
-.omni-home__carousel-card-label {
- position: absolute;
- bottom: 12px;
- left: 14px;
- z-index: 2;
- padding: 4px 12px;
- border-radius: 999px;
- background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
- border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
- color: var(--fg-body, #f3f5f2);
- font-size: 12px;
- font-weight: 900;
- white-space: nowrap;
-}
-
.omni-home__carousel-card:hover {
box-shadow:
0 28px 58px rgb(0 0 0 / 34%),
@@ -2479,3 +2464,536 @@
font-size: 12px;
}
}
+
+/* ===== Home page product polish and responsive hardening ===== */
+.web-shell[data-view="home"] .omni-home {
+ --home-card-radius: 14px;
+ --home-panel-radius: 18px;
+ --home-safe-inline: clamp(16px, 4.6vw, 72px);
+ scroll-padding-top: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__scrim {
+ background:
+ linear-gradient(180deg, rgba(5, 8, 13, 0.82), rgba(5, 8, 13, 0.52) 38%, rgba(5, 8, 13, 0.9)),
+ radial-gradient(circle at 50% 24%, rgba(var(--accent-rgb), 0.1), transparent 36%),
+ linear-gradient(90deg, rgba(5, 8, 13, 0.86), rgba(5, 8, 13, 0.48) 48%, rgba(5, 8, 13, 0.86));
+}
+
+.web-shell[data-view="home"] .omni-home__shell {
+ padding: clamp(28px, 4.4vw, 58px) var(--home-safe-inline) clamp(34px, 4.8vw, 70px);
+}
+
+.web-shell[data-view="home"] .omni-home__hero {
+ width: min(100%, 1240px);
+ gap: clamp(16px, 2vw, 24px);
+}
+
+.web-shell[data-view="home"] .omni-home__copy {
+ gap: 14px;
+}
+
+.web-shell[data-view="home"] .omni-home__copy h1 {
+ max-width: min(100%, 920px);
+ white-space: normal;
+ text-wrap: balance;
+ font-size: clamp(34px, 4vw, 62px);
+ letter-spacing: 0;
+ text-shadow: 0 18px 54px rgb(0 0 0 / 34%);
+}
+
+.web-shell[data-view="home"] .omni-home__copy p {
+ max-width: 680px;
+ color: rgb(235 245 240 / 72%);
+ font-size: clamp(14px, 1.25vw, 18px);
+ line-height: 1.7;
+}
+
+.web-shell[data-view="home"] .omni-home__actions {
+ width: min(100%, 620px);
+ gap: 12px;
+}
+
+.web-shell[data-view="home"] .omni-home__entry {
+ min-height: 64px;
+ border-color: rgb(255 255 255 / 11%);
+ border-radius: 12px;
+ background:
+ linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)),
+ rgb(12 16 17 / 78%);
+ box-shadow:
+ inset 0 1px 0 rgb(255 255 255 / 8%),
+ 0 16px 34px rgb(0 0 0 / 22%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry > span:not(.anticon) {
+ display: grid;
+ gap: 3px;
+ justify-items: center;
+ min-width: 0;
+ line-height: 1.1;
+}
+
+.web-shell[data-view="home"] .omni-home__entry small {
+ color: rgb(235 245 240 / 48%);
+ font-size: 11px;
+ font-weight: 760;
+ line-height: 1;
+ white-space: nowrap;
+}
+
+.web-shell[data-view="home"] .omni-home__entry--primary small {
+ color: rgb(6 16 20 / 62%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry:hover {
+ border-color: rgb(0 255 136 / 34%);
+ background:
+ linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%)),
+ rgb(17 22 22 / 88%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry--primary,
+.web-shell[data-view="home"] .omni-home__entry--primary:hover {
+ border-color: rgb(0 255 136 / 82%);
+ background:
+ linear-gradient(180deg, rgb(88 255 172 / 100%), rgb(0 255 136 / 100%));
+ box-shadow:
+ 0 18px 42px rgb(0 255 136 / 14%),
+ inset 0 1px 0 rgb(255 255 255 / 28%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel {
+ width: min(100%, 1180px);
+ min-height: clamp(380px, 36vw, 560px);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage {
+ width: min(100%, 1180px);
+ height: clamp(360px, 34vw, 530px);
+ overflow: hidden;
+ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
+ mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card {
+ width: clamp(500px, 45vw, 760px);
+ height: clamp(281px, 25.31vw, 428px);
+ border: 1px solid rgb(255 255 255 / 5%);
+ border-radius: var(--home-panel-radius);
+ background:
+ linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 5%)),
+ #07100f;
+ box-shadow:
+ 0 18px 46px rgb(0 0 0 / 30%),
+ inset 0 1px 0 rgb(255 255 255 / 8%),
+ inset 0 0 0 1px rgb(255 255 255 / 2%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card::before {
+ background:
+ linear-gradient(180deg, rgb(2 12 12 / 18%), transparent 34%, rgb(3 9 10 / 30%)),
+ linear-gradient(90deg, rgb(4 10 12 / 38%), transparent 24%, transparent 76%, rgb(4 10 12 / 38%)),
+ radial-gradient(circle at 50% 58%, rgb(0 255 136 / 8%), transparent 54%);
+ opacity: 0.92;
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 3;
+ border-radius: inherit;
+ box-shadow:
+ inset 0 0 0 1px rgb(255 255 255 / 4%),
+ inset 0 -42px 64px rgb(2 8 9 / 32%),
+ inset 0 34px 56px rgb(255 255 255 / 4%);
+ pointer-events: none;
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card.is-active {
+ border-color: rgb(255 255 255 / 7%);
+ box-shadow:
+ 0 26px 70px rgb(0 0 0 / 38%),
+ 0 0 0 1px rgb(255 255 255 / 4%),
+ 0 0 46px rgb(0 0 0 / 18%),
+ inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card:not(.is-active) {
+ filter: saturate(0.62) brightness(0.66) contrast(0.96);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card img,
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card.is-active img {
+ object-fit: contain;
+ transform: translateZ(12px);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card img {
+ filter:
+ saturate(0.72)
+ contrast(0.98)
+ brightness(0.72)
+ hue-rotate(8deg)
+ drop-shadow(0 18px 18px rgb(0 0 0 / 18%));
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card.is-active img {
+ filter:
+ saturate(0.9)
+ contrast(1.03)
+ brightness(0.88)
+ hue-rotate(6deg)
+ drop-shadow(0 22px 22px rgb(0 0 0 / 18%));
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page {
+ padding-inline: var(--home-safe-inline);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page::before {
+ background:
+ linear-gradient(90deg, rgb(5 8 13 / 96%) 0%, rgb(5 8 13 / 80%) 40%, rgb(5 8 13 / 52%) 100%),
+ linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 34%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-visual {
+ border-radius: var(--home-panel-radius);
+ border-color: rgb(255 255 255 / 10%);
+ background:
+ linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)),
+ #0d1111;
+ box-shadow:
+ 0 24px 68px rgb(0 0 0 / 34%),
+ inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-copy h2,
+.web-shell[data-view="home"] .omni-home__experience-copy h2 {
+ text-wrap: balance;
+}
+
+.web-shell[data-view="home"] .omni-home__feature-copy p,
+.web-shell[data-view="home"] .omni-home__experience-copy p {
+ color: rgb(232 238 236 / 74%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page.is-script,
+.web-shell[data-view="home"] .omni-home__feature-page.is-model,
+.web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce {
+ padding-inline: clamp(10px, 1.8vw, 28px);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+.web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+.web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+ border-radius: 12px;
+}
+
+.web-shell[data-view="home"] .omni-home__experience {
+ background:
+ linear-gradient(112deg, rgb(0 255 136 / 10%) 0 1px, transparent 1px 20%),
+ linear-gradient(68deg, rgb(0 255 136 / 7%) 0 1px, transparent 1px 22%),
+ linear-gradient(180deg, #070b10 0%, #05080d 100%);
+}
+
+.web-shell[data-view="home"] .omni-home__experience-route {
+ border-radius: var(--home-card-radius);
+}
+
+.web-shell[data-view="home"] :is(
+ .omni-home__shell,
+ .omni-home__feature-page,
+ .omni-home__toolbox-page,
+ .omni-home__experience
+) {
+ scroll-margin-top: 64px;
+}
+
+.web-shell[data-view="home"] .cookie-consent {
+ right: clamp(14px, 2vw, 24px);
+ bottom: 12px;
+ width: min(560px, calc(100vw - 28px));
+ gap: 10px;
+ padding: 10px 12px;
+ border-color: rgb(0 255 136 / 20%);
+ border-radius: 13px;
+ background:
+ linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 3%)),
+ rgb(13 17 18 / 92%);
+ box-shadow:
+ 0 18px 46px rgb(0 0 0 / 30%),
+ inset 0 1px 0 rgb(255 255 255 / 7%);
+}
+
+.web-shell[data-view="home"] .cookie-consent strong {
+ font-size: 13px;
+}
+
+.web-shell[data-view="home"] .cookie-consent p {
+ margin-top: 4px;
+ overflow: hidden;
+ font-size: 12px;
+ line-height: 1.32;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.web-shell[data-view="home"] .cookie-consent__actions {
+ gap: 8px;
+}
+
+.web-shell[data-view="home"] .cookie-consent__actions a,
+.web-shell[data-view="home"] .cookie-consent__actions button {
+ min-height: 32px;
+ padding-inline: 12px;
+ font-size: 12px;
+}
+
+@media (max-width: 1200px) {
+ .web-shell[data-view="home"] .omni-home__carousel {
+ min-height: clamp(340px, 42vw, 500px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-stage {
+ width: min(100%, 1020px);
+ height: clamp(320px, 39vw, 470px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-card {
+ width: clamp(470px, 57vw, 660px);
+ height: clamp(264px, 32.06vw, 371px);
+ }
+}
+
+@media (max-width: 980px) {
+ .web-shell[data-view="home"] .omni-home {
+ scroll-snap-type: none;
+ overscroll-behavior-y: auto;
+ }
+
+ .web-shell[data-view="home"] .omni-home__shell {
+ min-height: auto;
+ padding-top: clamp(24px, 4vw, 38px);
+ padding-bottom: clamp(34px, 6vw, 58px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__hero {
+ align-content: start;
+ }
+
+ .web-shell[data-view="home"] .omni-home__actions {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .web-shell[data-view="home"] .omni-home__entry {
+ min-height: 58px;
+ padding-inline: 18px;
+ font-size: 15px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__entry small {
+ font-size: 10px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel {
+ width: min(100%, 820px);
+ min-height: clamp(290px, 54vw, 430px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-stage {
+ width: min(100%, 820px);
+ height: clamp(280px, 51vw, 410px);
+ overflow: hidden;
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-deck {
+ transform: scale(0.96);
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-page,
+ .web-shell[data-view="home"] .omni-home__experience {
+ min-height: auto;
+ padding-block: clamp(44px, 7vw, 72px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-copy h2,
+ .web-shell[data-view="home"] .omni-home__experience-copy h2 {
+ font-size: clamp(34px, 7vw, 58px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-copy p,
+ .web-shell[data-view="home"] .omni-home__experience-copy p {
+ font-size: clamp(15px, 2.4vw, 20px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+ .web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+ .web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+ height: auto;
+ min-height: clamp(520px, 78vw, 720px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience {
+ gap: 24px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience-visual {
+ min-height: 260px;
+ }
+}
+
+@media (max-width: 720px) {
+ .web-shell[data-view="home"] .omni-home__copy h1 {
+ font-size: clamp(30px, 9vw, 44px);
+ line-height: 1.08;
+ }
+
+ .web-shell[data-view="home"] .omni-home__copy p {
+ max-width: 520px;
+ font-size: 14px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__actions {
+ grid-template-columns: 1fr;
+ width: min(100%, 420px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__entry {
+ justify-content: center;
+ min-height: 54px;
+ width: 100%;
+ }
+
+ .web-shell[data-view="home"] .omni-home__entry > span:not(.anticon) {
+ gap: 4px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel {
+ min-height: clamp(260px, 70vw, 360px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-stage {
+ height: clamp(248px, 66vw, 340px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-deck {
+ transform: scale(1);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-card {
+ width: min(94vw, 520px);
+ height: min(52.88vw, 292px);
+ min-height: 206px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-stats {
+ position: relative;
+ inset: auto;
+ margin-top: 18px;
+ max-width: none;
+ justify-content: flex-start;
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience-routes {
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience-route {
+ min-height: 84px;
+ padding: 13px 14px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience-route b {
+ font-size: 22px;
+ }
+}
+
+@media (max-width: 480px) {
+ .web-shell[data-view="home"] .omni-home {
+ --home-safe-inline: 14px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__shell {
+ padding-top: 20px;
+ padding-bottom: 32px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__hero {
+ gap: 14px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__copy {
+ gap: 10px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel {
+ min-height: clamp(228px, 68vw, 286px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-stage {
+ height: clamp(218px, 64vw, 274px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-deck {
+ transform: scale(1);
+ }
+
+ .web-shell[data-view="home"] .omni-home__carousel-card {
+ width: 94vw;
+ height: 52.88vw;
+ min-height: 188px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-page,
+ .web-shell[data-view="home"] .omni-home__experience {
+ padding-block: 34px 44px;
+ }
+
+ .web-shell[data-view="home"] :is(
+ .omni-home__shell,
+ .omni-home__feature-page,
+ .omni-home__toolbox-page,
+ .omni-home__experience
+ ) {
+ scroll-margin-top: 60px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+ .web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+ .web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+ min-height: 560px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__experience-routes {
+ grid-template-columns: 1fr;
+ }
+
+ .web-shell[data-view="home"] .cookie-consent {
+ right: 10px;
+ bottom: max(10px, env(safe-area-inset-bottom));
+ grid-template-columns: 1fr;
+ width: calc(100vw - 20px);
+ padding: 12px;
+ }
+
+ .web-shell[data-view="home"] .cookie-consent p {
+ display: -webkit-box;
+ overflow: hidden;
+ text-overflow: initial;
+ white-space: normal;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ }
+
+ .web-shell[data-view="home"] .cookie-consent__actions {
+ justify-content: stretch;
+ }
+
+ .web-shell[data-view="home"] .cookie-consent__actions a,
+ .web-shell[data-view="home"] .cookie-consent__actions button {
+ flex: 1 1 0;
+ }
+}
diff --git a/src/styles/pages/more.css b/src/styles/pages/more.css
index 883e7ac..67dfcf5 100644
--- a/src/styles/pages/more.css
+++ b/src/styles/pages/more.css
@@ -216,10 +216,10 @@
.more-card--featured {
display: grid;
- grid-template-columns: 54px minmax(0, 1fr);
+ grid-template-columns: minmax(0, 1fr);
align-items: start;
justify-items: stretch;
- gap: 16px;
+ gap: 12px;
min-height: 336px;
padding: 20px;
border-color: rgba(var(--accent-rgb), 0.2);
@@ -251,22 +251,6 @@
box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}
-.more-card__featured-icon {
- display: grid;
- place-items: center;
- width: 54px;
- height: 54px;
- border: 1px solid rgba(var(--accent-rgb), 0.24);
- border-radius: var(--radius-xs, 8px);
- background:
- linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
- var(--bg-inset);
- color: var(--accent);
- font-size: 24px;
- flex-shrink: 0;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-}
-
.more-card__featured-body {
display: flex;
flex-direction: column;
@@ -281,7 +265,12 @@
.more-card--featured .more-card__preview {
width: 100%;
min-height: 0;
- aspect-ratio: 16 / 9;
+ aspect-ratio: 4 / 3;
+}
+
+.more-card--featured .more-card__preview-frame img {
+ padding: 8px;
+ object-fit: contain;
}
.more-card--featured.more-card--no-preview {
@@ -449,7 +438,7 @@
}
.more-card__icon {
- display: grid;
+ display: none;
place-items: center;
width: 38px;
height: 38px;
@@ -464,6 +453,7 @@
}
.more-card--recent .more-card__icon {
+ display: grid;
width: 30px;
height: 30px;
font-size: 14px;
@@ -1221,18 +1211,12 @@
}
.more-card--featured {
- grid-template-columns: 44px minmax(0, 1fr);
+ grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding: 16px;
gap: 12px;
}
- .more-card__featured-icon {
- width: 42px;
- height: 42px;
- font-size: 20px;
- }
-
.more-card__featured-body strong {
font-size: 16px;
}
@@ -1312,11 +1296,6 @@
padding: 15px;
}
- .more-card__featured-icon {
- width: 40px;
- height: 40px;
- }
-
.more-card {
gap: 10px;
min-height: 0;
diff --git a/src/styles/pages/script-review-showcase.css b/src/styles/pages/script-review-showcase.css
index e537710..1e0b84f 100644
--- a/src/styles/pages/script-review-showcase.css
+++ b/src/styles/pages/script-review-showcase.css
@@ -684,12 +684,6 @@
}
@container (max-width: 1120px) {
- .omni-script-review-showcase {
- grid-template-columns: 1fr;
- gap: 18px;
- overflow-y: auto;
- }
-
.srs-left-panel {
grid-template-rows: auto auto auto;
gap: 16px;
@@ -711,13 +705,32 @@
}
.srs-results-panel {
- grid-template-rows: auto minmax(320px, auto) auto;
+ grid-template-rows: auto minmax(300px, auto) auto;
}
}
-@media (max-width: 980px) {
- .omni-script-review-showcase {
- padding: 22px;
+@container (max-width: 880px) {
+ .srs-brand-section {
+ gap: 12px;
+ }
+
+ .srs-brand-section h1 {
+ max-width: 100%;
+ font-size: clamp(28px, 8cqw, 44px);
+ }
+
+ .srs-brand-section p {
+ font-size: clamp(14px, 3.2cqw, 17px);
+ line-height: 1.65;
+ }
+
+ .srs-point-card {
+ min-height: 0;
+ border-radius: 10px;
+ }
+
+ .srs-results-panel {
+ gap: 14px;
}
.srs-score-hero {
@@ -729,33 +742,118 @@
display: none;
}
- .srs-chart-body,
.srs-triple-section,
.srs-point-list {
grid-template-columns: 1fr;
}
- .srs-chart-col {
- grid-template-columns: minmax(70px, 92px) minmax(0, 1fr);
- grid-template-rows: auto;
- align-items: center;
- justify-items: stretch;
- }
-
- .srs-chart-bar-wrap {
- min-height: 80px;
- }
-
- .srs-chart-col-label {
- text-align: left;
+ .srs-score-summary {
+ font-size: clamp(13px, 3cqw, 16px);
+ line-height: 1.55;
}
}
-@media (max-width: 560px) {
- .omni-script-review-showcase {
+@container (max-width: 720px) {
+ .srs-chart-card {
padding: 16px;
}
+ .srs-chart-title {
+ letter-spacing: 0.04em;
+ }
+
+ .srs-chart-body {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ padding-top: 14px;
+ }
+
+ .srs-chart-col {
+ grid-template-columns: minmax(94px, 0.36fr) minmax(0, 1fr);
+ grid-template-rows: auto;
+ align-items: center;
+ justify-items: stretch;
+ min-height: 46px;
+ border: 1px solid rgba(255, 255, 255, 0.055);
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.03);
+ padding: 10px;
+ }
+
+ .srs-chart-bar-wrap {
+ grid-column: 2;
+ grid-row: 1;
+ width: 100%;
+ height: 16px;
+ min-height: 16px;
+ }
+
+ .srs-chart-bar-bg,
+ .srs-chart-bar-fill {
+ width: 100%;
+ height: 100% !important;
+ border-radius: 999px;
+ }
+
+ .srs-chart-bar-bg {
+ left: 0;
+ transform: none;
+ }
+
+ .srs-chart-bar-fill {
+ transform-origin: left center;
+ }
+
+ .srs-chart-col:nth-child(1) .srs-chart-bar-fill { width: 80%; }
+ .srs-chart-col:nth-child(2) .srs-chart-bar-fill { width: 80%; }
+ .srs-chart-col:nth-child(3) .srs-chart-bar-fill { width: 100%; }
+ .srs-chart-col:nth-child(4) .srs-chart-bar-fill { width: 80%; }
+ .srs-chart-col:nth-child(5) .srs-chart-bar-fill { width: 66%; }
+ .srs-chart-col:nth-child(6) .srs-chart-bar-fill { width: 53%; }
+
+ .srs-chart-bar-score {
+ top: 50%;
+ right: 8px;
+ left: auto;
+ font-size: 12px;
+ transform: translateY(-50%);
+ }
+
+ .srs-chart-bar-sub,
+ .srs-chart-bar-star {
+ font-size: 10px;
+ }
+
+ .srs-chart-col-label {
+ grid-column: 1;
+ grid-row: 1;
+ text-align: left;
+ }
+
+ .srs-chart-col-name {
+ font-size: 13px;
+ }
+
+ .srs-chart-col-desc {
+ display: none;
+ }
+
+ .srs-triple-section {
+ gap: 12px;
+ }
+
+ .srs-section-card {
+ overflow: visible;
+ }
+
+ .srs-section-item-text {
+ display: block;
+ overflow: visible;
+ -webkit-line-clamp: initial;
+ }
+}
+
+@container (max-width: 560px) {
.srs-flow-card {
grid-template-columns: 1fr;
justify-items: stretch;
@@ -769,4 +867,45 @@
align-items: flex-start;
flex-direction: column;
}
+
+ .srs-score-tags {
+ gap: 6px;
+ }
+
+ .srs-score-tag {
+ min-height: 24px;
+ padding-inline: 9px;
+ }
+
+ .srs-chart-col {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ }
+
+ .srs-chart-bar-wrap,
+ .srs-chart-col-label {
+ grid-column: 1;
+ grid-row: auto;
+ }
+}
+
+@media (max-width: 1120px) {
+ .omni-script-review-showcase {
+ grid-template-columns: 1fr;
+ gap: clamp(16px, 2.8vw, 24px);
+ overflow-y: visible;
+ padding: clamp(20px, 3vw, 34px);
+ }
+}
+
+@media (max-width: 880px) {
+ .omni-script-review-showcase {
+ padding: clamp(16px, 3.8vw, 24px);
+ }
+}
+
+@media (max-width: 560px) {
+ .omni-script-review-showcase {
+ padding: 16px;
+ }
}
diff --git a/src/styles/pages/toolbox.css b/src/styles/pages/toolbox.css
index 4528be7..a425b1d 100644
--- a/src/styles/pages/toolbox.css
+++ b/src/styles/pages/toolbox.css
@@ -889,3 +889,252 @@
animation: none;
}
}
+
+/* ===== Home toolbox polish and responsive hardening ===== */
+.web-shell[data-view="home"] .omni-home__toolbox-page {
+ --toolbox-radius-card: 16px;
+ --toolbox-radius-inner: 12px;
+ background:
+ linear-gradient(180deg, #070b10 0%, #05080d 100%),
+ radial-gradient(ellipse 70% 48% at 58% 42%, rgba(0, 255, 136, 0.045) 0%, transparent 70%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-shell {
+ width: min(100%, 1440px);
+ margin-inline: auto;
+ padding: clamp(34px, 5vw, 64px) clamp(18px, 5vw, 72px);
+ align-items: center;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-left {
+ width: clamp(300px, 28vw, 420px);
+ gap: 14px;
+ padding-top: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 13px;
+ box-shadow: 0 16px 32px rgba(0, 255, 136, 0.12);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon .anticon {
+ font-size: 24px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+ font-size: clamp(24px, 2.3vw, 32px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-title {
+ color: #f7fff9;
+ background: none;
+ -webkit-text-fill-color: currentColor;
+ font-size: clamp(32px, 3.4vw, 46px);
+ letter-spacing: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+ color: rgba(232, 238, 236, 0.68);
+ font-size: clamp(15px, 1.18vw, 17px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item,
+.web-shell[data-view="home"] .omni-home__toolbox-workflow,
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+ border-color: rgba(255, 255, 255, 0.1);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028)),
+ rgba(10, 15, 16, 0.78);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.075),
+ 0 18px 42px rgba(0, 0, 0, 0.2);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item {
+ border-radius: 14px;
+ padding: 14px 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item:hover {
+ border-color: rgba(0, 255, 136, 0.24);
+ transform: translateX(3px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+ width: 42px;
+ height: 42px;
+ border-radius: 11px;
+ font-size: 22px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-name {
+ font-size: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+ font-size: 13px;
+ color: rgba(232, 238, 236, 0.48);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow {
+ margin-top: 4px;
+ border-radius: 14px;
+ padding: 15px 17px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-label {
+ margin-bottom: 10px;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+ gap: 8px;
+ font-size: 13px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-grid {
+ gap: 14px;
+ min-height: clamp(500px, 48vw, 680px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+ border-radius: var(--toolbox-radius-card);
+ transform: translateZ(0);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card:hover {
+ transform: translateY(-4px);
+ border-color: rgba(0, 255, 136, 0.24);
+ box-shadow:
+ 0 22px 54px rgba(0, 0, 0, 0.28),
+ 0 0 0 1px rgba(0, 255, 136, 0.07);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-header {
+ padding: 15px 16px 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-content {
+ padding: 10px 16px;
+ min-height: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+ padding: 7px 16px 14px;
+}
+
+.web-shell[data-view="home"] :is(.toolbox-card1-side, .toolbox-card3-side, .toolbox-card4-side),
+.web-shell[data-view="home"] :is(.toolbox-card1-img, .toolbox-card3-portrait, .toolbox-card4-img),
+.web-shell[data-view="home"] .toolbox-card2-frame {
+ border-radius: var(--toolbox-radius-inner);
+}
+
+@media (max-width: 1160px) {
+ .web-shell[data-view="home"] .omni-home__toolbox-shell {
+ gap: 22px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-left {
+ width: clamp(280px, 32vw, 360px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-grid {
+ min-height: clamp(460px, 58vw, 620px);
+ }
+}
+
+@media (max-width: 980px) {
+ .web-shell[data-view="home"] .omni-home__toolbox-page {
+ min-height: auto;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-shell {
+ min-height: auto;
+ padding-block: clamp(42px, 7vw, 64px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-left {
+ width: min(100%, 760px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-list {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-workflow {
+ width: 100%;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ min-height: auto;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card {
+ min-height: clamp(230px, 34vw, 300px);
+ }
+}
+
+@media (max-width: 680px) {
+ .web-shell[data-view="home"] .omni-home__toolbox-shell {
+ padding-inline: 14px;
+ gap: 18px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+ width: 42px;
+ height: 42px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+ font-size: 22px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-title {
+ font-size: clamp(26px, 7vw, 34px);
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-list,
+ .web-shell[data-view="home"] .omni-home__toolbox-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-item {
+ align-items: center;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card {
+ min-height: 236px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card-header {
+ align-items: flex-start;
+ gap: 10px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+ flex-shrink: 0;
+ }
+}
+
+@media (max-width: 420px) {
+ .web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+ align-items: flex-start;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-workflow-arrow {
+ display: none;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card {
+ min-height: 220px;
+ }
+
+ .web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+ gap: 5px;
+ }
+}
diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css
index eb58736..55bf3bf 100644
--- a/src/styles/themes/dark-green.css
+++ b/src/styles/themes/dark-green.css
@@ -144,6 +144,10 @@
}
.web-shell[data-ui-theme="dark-green"] .notification-center {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ flex: 0 0 auto;
isolation: isolate;
}
@@ -170,10 +174,15 @@
}
.web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
top: calc(100% + 12px);
right: -88px;
+ z-index: 1200;
width: min(420px, calc(100vw - 24px));
- max-height: min(560px, calc(100vh - 92px));
+ height: auto;
+ max-height: min(460px, calc(100dvh - 84px));
border: 1px solid var(--dg-line);
border-radius: 16px;
background: #151719;
@@ -231,9 +240,12 @@
}
.web-shell[data-ui-theme="dark-green"] .notification-center__list {
- max-height: min(486px, calc(100vh - 158px));
+ flex: 1 1 auto;
+ min-height: 0;
+ max-height: min(386px, calc(100dvh - 158px));
padding: 8px;
overflow-y: auto;
+ overscroll-behavior: contain;
}
.web-shell[data-ui-theme="dark-green"] .notification-center__item {
@@ -10466,6 +10478,21 @@
gap: 6px;
}
+ .web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+ right: clamp(-112px, -24vw, -92px);
+ width: min(360px, calc(100vw - 20px));
+ max-height: min(420px, calc(100dvh - 76px));
+ border-radius: 14px;
+ }
+
+ .web-shell[data-ui-theme="dark-green"] .notification-center__panel::before {
+ right: clamp(104px, 25vw, 124px);
+ }
+
+ .web-shell[data-ui-theme="dark-green"] .notification-center__list {
+ max-height: min(344px, calc(100dvh - 150px));
+ }
+
.web-shell[data-ui-theme="dark-green"] :is(.creator-button, .member-button) {
height: 32px;
padding: 0 10px;