diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx index 2c27050..bffbe73 100644 --- a/src/features/home/HomePage.tsx +++ b/src/features/home/HomePage.tsx @@ -195,10 +195,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]!; @@ -207,7 +215,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", @@ -623,15 +631,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;