-
-
-
+
+
+ sumi.work
+
+
+
+
+
+
+
+
-
-
-
- FRP 面板
- 内网穿透管理
-
+
+
diff --git a/script.js b/script.js
index a1cb675..df4dbf6 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,15 @@
const year = document.querySelector("#year");
+const header = document.querySelector("[data-header]");
if (year) {
year.textContent = new Date().getFullYear();
}
+
+if (header) {
+ const updateHeader = () => {
+ header.classList.toggle("is-scrolled", window.scrollY > 8);
+ };
+
+ updateHeader();
+ window.addEventListener("scroll", updateHeader, { passive: true });
+}
diff --git a/styles.css b/styles.css
index fe68667..4bb488f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,19 +1,17 @@
:root {
- color-scheme: dark;
- --bg-1: #6679e2;
- --bg-2: #7856b8;
- --card: rgba(255, 255, 255, 0.16);
- --card-strong: rgba(255, 255, 255, 0.22);
- --card-line: rgba(255, 255, 255, 0.24);
- --text: #ffffff;
- --muted: rgba(255, 255, 255, 0.74);
- --soft: rgba(255, 255, 255, 0.1);
- --green: #35d69d;
- --blue: #76c8ff;
- --coral: #ff9b83;
- --gold: #ffd35d;
- --mint: #7ff0cf;
- --shadow: 0 32px 90px rgba(32, 27, 81, 0.34);
+ color-scheme: light;
+ --bg: #f5f8ff;
+ --panel: #ffffff;
+ --panel-soft: #f7faff;
+ --text: #17233d;
+ --muted: #63708a;
+ --line: #e5ebf5;
+ --blue: #246bfe;
+ --blue-dark: #1554d1;
+ --green: #19b982;
+ --orange: #ff8a3d;
+ --purple: #7864f6;
+ --shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", sans-serif;
@@ -25,6 +23,7 @@
html {
min-height: 100%;
+ scroll-behavior: smooth;
}
body {
@@ -33,35 +32,8 @@ body {
margin: 0;
color: var(--text);
background:
- radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2), transparent 28rem),
- radial-gradient(circle at 80% 20%, rgba(87, 224, 207, 0.14), transparent 24rem),
- linear-gradient(135deg, var(--bg-1), var(--bg-2));
- overflow-x: hidden;
-}
-
-body::before,
-body::after {
- position: fixed;
- z-index: -1;
- pointer-events: none;
- content: "";
-}
-
-body::before {
- inset: 0;
- background-image:
- linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
- background-size: 58px 58px;
- mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%);
-}
-
-body::after {
- width: 42rem;
- height: 42rem;
- right: -14rem;
- bottom: -18rem;
- background: radial-gradient(circle, rgba(255, 210, 105, 0.18), transparent 68%);
+ radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
+ linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
}
a {
@@ -69,251 +41,432 @@ a {
text-decoration: none;
}
-.shell {
- display: grid;
- grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
- gap: clamp(22px, 4vw, 42px);
- align-items: stretch;
- width: min(980px, calc(100% - 40px));
- min-height: 100svh;
- margin: 0 auto;
- padding: clamp(34px, 8vh, 110px) 0 92px;
-}
-
-.hero-panel,
-.services {
- position: relative;
- border: 1px solid var(--card-line);
- background:
- linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1)),
- var(--card);
- box-shadow: var(--shadow);
- backdrop-filter: blur(22px);
-}
-
-.hero-panel {
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 20;
display: flex;
- min-height: 470px;
- flex-direction: column;
- justify-content: center;
- padding: clamp(32px, 5vw, 54px);
- border-radius: 28px;
- overflow: hidden;
-}
-
-.hero-panel::after {
- position: absolute;
- right: -80px;
- bottom: -100px;
- width: 260px;
- height: 260px;
- border: 1px solid rgba(255, 255, 255, 0.22);
- border-radius: 999px;
- content: "";
-}
-
-.brand-area {
- display: flex;
- gap: 18px;
align-items: center;
- margin-bottom: 26px;
+ justify-content: space-between;
+ width: min(1180px, calc(100% - 40px));
+ min-height: 72px;
+ margin: 0 auto;
+ transition:
+ background 180ms ease,
+ border-color 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.site-header.is-scrolled {
+ width: 100%;
+ padding: 0 max(20px, calc((100% - 1180px) / 2));
+ background: rgba(255, 255, 255, 0.88);
+ border-bottom: 1px solid rgba(229, 235, 245, 0.9);
+ box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
+ backdrop-filter: blur(18px);
+}
+
+.brand,
+.nav-links,
+.hero-actions,
+.status-row,
+.record {
+ display: flex;
+ align-items: center;
+}
+
+.brand {
+ gap: 10px;
+ color: #14233f;
+ font-size: 1.04rem;
+ font-weight: 850;
}
.brand-mark {
display: grid;
- width: 68px;
- height: 68px;
+ width: 34px;
+ height: 34px;
place-items: center;
- flex: 0 0 auto;
- color: #573e91;
- font-size: 2.2rem;
- background: linear-gradient(135deg, #ffe26b, #ffc23f);
- border-radius: 20px;
- box-shadow: 0 18px 38px rgba(255, 198, 63, 0.3);
+ color: #fff;
+ background: linear-gradient(135deg, var(--blue), #48a8ff);
+ border-radius: 9px;
+ box-shadow: 0 10px 24px rgba(36, 107, 254, 0.24);
+}
+
+.nav-links {
+ gap: 30px;
+ color: #3f4b62;
+ font-size: 0.95rem;
+ font-weight: 650;
+}
+
+.nav-links a {
+ transition: color 160ms ease;
+}
+
+.nav-links a:hover,
+.nav-links a:focus-visible {
+ color: var(--blue);
+}
+
+.hero,
+.services-section,
+.record {
+ width: min(1180px, calc(100% - 40px));
+ margin-inline: auto;
+}
+
+.hero {
+ display: grid;
+ grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
+ gap: clamp(34px, 6vw, 84px);
+ align-items: center;
+ min-height: calc(100svh - 72px);
+ padding: 54px 0 74px;
}
.eyebrow {
- margin: 0 0 8px;
- color: rgba(255, 255, 255, 0.68);
- font-size: 0.76rem;
- font-weight: 800;
+ margin: 0 0 12px;
+ color: var(--blue);
+ font-size: 0.78rem;
+ font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
+h1,
+h2,
+p {
+ margin-top: 0;
+}
+
h1 {
- margin: 0;
- font-size: clamp(3.4rem, 8vw, 6rem);
- line-height: 0.95;
+ max-width: 620px;
+ margin-bottom: 22px;
+ font-size: clamp(2.8rem, 6vw, 5.55rem);
+ line-height: 1.03;
letter-spacing: 0;
}
.subtitle {
- margin: 0 0 28px;
- color: rgba(255, 255, 255, 0.84);
- font-size: clamp(1.08rem, 2.2vw, 1.35rem);
- font-weight: 700;
+ max-width: 580px;
+ margin-bottom: 30px;
+ color: var(--muted);
+ font-size: clamp(1.06rem, 1.6vw, 1.24rem);
+ line-height: 1.8;
+}
+
+.hero-actions {
+ flex-wrap: wrap;
+ gap: 14px;
+ margin-bottom: 28px;
+}
+
+.button {
+ display: inline-flex;
+ min-height: 48px;
+ align-items: center;
+ justify-content: center;
+ padding: 0 22px;
+ border: 1px solid transparent;
+ border-radius: 8px;
+ font-weight: 800;
+ transition:
+ transform 160ms ease,
+ box-shadow 160ms ease,
+ background 160ms ease;
+}
+
+.button:hover,
+.button:focus-visible {
+ transform: translateY(-2px);
+}
+
+.button.primary {
+ color: #fff;
+ background: var(--blue);
+ box-shadow: 0 14px 30px rgba(36, 107, 254, 0.24);
+}
+
+.button.primary:hover,
+.button.primary:focus-visible {
+ background: var(--blue-dark);
+}
+
+.button.secondary {
+ color: var(--blue);
+ background: #fff;
+ border-color: #dbe6ff;
}
.status-row {
- display: inline-flex;
width: fit-content;
- align-items: center;
gap: 9px;
- margin-bottom: 28px;
- padding: 12px 16px;
- color: #fff;
- background: rgba(17, 28, 52, 0.22);
- border: 1px solid rgba(53, 214, 157, 0.72);
+ padding: 10px 14px;
+ color: #2f456b;
+ background: rgba(255, 255, 255, 0.8);
+ border: 1px solid #dce7f8;
border-radius: 999px;
+ box-shadow: 0 12px 32px rgba(57, 83, 132, 0.08);
}
.status-row strong {
+ color: #143055;
font-weight: 850;
}
-.status-row span:last-child {
- color: rgba(255, 255, 255, 0.68);
-}
-
.status-dot {
width: 10px;
height: 10px;
background: var(--green);
border-radius: 999px;
- box-shadow: 0 0 0 7px rgba(53, 214, 157, 0.14);
+ box-shadow: 0 0 0 6px rgba(25, 185, 130, 0.13);
}
-.intro {
- max-width: 34rem;
- margin: 0;
- color: var(--muted);
- font-size: 1rem;
- line-height: 1.8;
+.hero-visual {
+ position: relative;
+ min-height: 460px;
+ padding: 20px;
+ background:
+ linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
+ #fff;
+ border: 1px solid rgba(222, 232, 248, 0.9);
+ border-radius: 28px;
+ box-shadow: var(--shadow);
+}
+
+.hero-visual::before {
+ position: absolute;
+ inset: auto 38px 32px auto;
+ width: 190px;
+ height: 190px;
+ background: linear-gradient(135deg, rgba(36, 107, 254, 0.16), rgba(25, 185, 130, 0.12));
+ border-radius: 999px;
+ content: "";
+}
+
+.visual-topbar {
+ display: flex;
+ gap: 8px;
+ padding: 10px 8px 18px;
+}
+
+.visual-topbar span {
+ width: 10px;
+ height: 10px;
+ background: #d5dfef;
+ border-radius: 999px;
+}
+
+.visual-screen {
+ position: relative;
+ min-height: 370px;
+ padding: clamp(22px, 4vw, 34px);
+ overflow: hidden;
+ background:
+ linear-gradient(140deg, #ffffff 0%, #edf5ff 100%);
+ border: 1px solid #e0e9f7;
+ border-radius: 22px;
+}
+
+.screen-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 28px;
+ color: #4e607b;
+ font-weight: 780;
+}
+
+.screen-heading strong {
+ color: var(--green);
+}
+
+.screen-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 16px;
+ max-width: 360px;
+}
+
+.screen-grid span {
+ min-height: 92px;
+ background: #fff;
+ border: 1px solid #e0e9f7;
+ border-radius: 16px;
+ box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
+}
+
+.screen-grid span:nth-child(1) {
+ border-top: 4px solid var(--blue);
+}
+
+.screen-grid span:nth-child(2) {
+ border-top: 4px solid var(--green);
+}
+
+.screen-grid span:nth-child(3) {
+ border-top: 4px solid var(--orange);
+}
+
+.screen-grid span:nth-child(4) {
+ border-top: 4px solid var(--purple);
+}
+
+.screen-chart {
+ position: absolute;
+ right: 34px;
+ bottom: 34px;
+ display: flex;
+ align-items: end;
+ gap: 10px;
+ height: 96px;
+}
+
+.screen-chart i {
+ display: block;
+ width: 18px;
+ background: linear-gradient(180deg, #74a5ff, var(--blue));
+ border-radius: 999px 999px 6px 6px;
+}
+
+.screen-chart i:nth-child(1) {
+ height: 42px;
+}
+
+.screen-chart i:nth-child(2) {
+ height: 72px;
+}
+
+.screen-chart i:nth-child(3) {
+ height: 58px;
+}
+
+.screen-chart i:nth-child(4) {
+ height: 92px;
+}
+
+.services-section {
+ padding: 10px 0 86px;
+}
+
+.section-heading {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 24px;
+ margin-bottom: 22px;
+}
+
+h2 {
+ margin-bottom: 0;
+ font-size: clamp(1.9rem, 3vw, 3rem);
+ line-height: 1.08;
+ letter-spacing: 0;
}
.services {
display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 16px;
- align-content: center;
- padding: clamp(22px, 3vw, 30px);
- border-radius: 28px;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 18px;
}
.service-card {
position: relative;
display: flex;
- min-height: 168px;
+ min-height: 206px;
flex-direction: column;
- justify-content: flex-end;
- padding: 22px;
+ padding: 24px;
overflow: hidden;
- background: rgba(255, 255, 255, 0.15);
- border: 1px solid rgba(255, 255, 255, 0.16);
- border-radius: 22px;
+ background: var(--panel);
+ border: 1px solid var(--line);
+ border-radius: 18px;
+ box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
transition:
transform 180ms ease,
- background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
-.service-card::before {
+.service-card::after {
position: absolute;
- inset: 0;
- opacity: 0;
+ right: -34px;
+ bottom: -34px;
+ width: 112px;
+ height: 112px;
+ border-radius: 999px;
+ opacity: 0.12;
content: "";
- transition: opacity 180ms ease;
}
.service-card:hover,
.service-card:focus-visible {
- transform: translateY(-5px);
- background: var(--card-strong);
- border-color: rgba(255, 255, 255, 0.36);
- box-shadow: 0 20px 44px rgba(32, 27, 81, 0.2);
+ transform: translateY(-6px);
+ border-color: rgba(36, 107, 254, 0.28);
+ box-shadow: 0 22px 52px rgba(57, 83, 132, 0.16);
outline: none;
}
-.service-card:hover::before,
-.service-card:focus-visible::before {
- opacity: 1;
-}
-
-.accent-blue::before {
- background: linear-gradient(135deg, rgba(118, 200, 255, 0.22), transparent 62%);
-}
-
-.accent-coral::before {
- background: linear-gradient(135deg, rgba(255, 155, 131, 0.24), transparent 62%);
-}
-
-.accent-gold::before {
- background: linear-gradient(135deg, rgba(255, 211, 93, 0.24), transparent 62%);
-}
-
-.accent-mint::before {
- background: linear-gradient(135deg, rgba(127, 240, 207, 0.24), transparent 62%);
-}
-
-.accent-gemini::before {
- background:
- radial-gradient(circle at 18% 20%, rgba(118, 200, 255, 0.3), transparent 28%),
- radial-gradient(circle at 76% 24%, rgba(255, 155, 131, 0.26), transparent 34%),
- linear-gradient(135deg, rgba(186, 140, 255, 0.26), transparent 64%);
-}
-
-.service-card-wide {
- min-height: 168px;
-}
-
-.service-card-wide .service-icon {
- margin-bottom: auto;
-}
-
-.service-icon,
-.service-title,
-.service-desc {
- position: relative;
-}
-
.service-icon {
- display: grid;
- width: 48px;
- height: 48px;
- place-items: center;
+ display: inline-flex;
+ width: fit-content;
+ min-width: 48px;
+ min-height: 36px;
+ align-items: center;
+ justify-content: center;
+ padding: 0 12px;
margin-bottom: auto;
- font-size: 1.62rem;
- background: rgba(255, 255, 255, 0.13);
- border: 1px solid rgba(255, 255, 255, 0.15);
- border-radius: 15px;
+ border-radius: 10px;
+ font-size: 0.82rem;
+ font-weight: 900;
}
.service-title {
- margin-top: 26px;
- font-size: 1.16rem;
+ margin-top: 42px;
+ color: #14233f;
+ font-size: 1.18rem;
font-weight: 900;
}
.service-desc {
- margin-top: 7px;
- color: rgba(255, 255, 255, 0.72);
- font-size: 0.92rem;
- font-weight: 650;
+ margin-top: 8px;
+ color: var(--muted);
+ font-size: 0.94rem;
+ line-height: 1.55;
+}
+
+.accent-blue .service-icon,
+.accent-blue::after {
+ color: var(--blue);
+ background: rgba(36, 107, 254, 0.1);
+}
+
+.accent-green .service-icon,
+.accent-green::after {
+ color: var(--green);
+ background: rgba(25, 185, 130, 0.12);
+}
+
+.accent-orange .service-icon,
+.accent-orange::after {
+ color: var(--orange);
+ background: rgba(255, 138, 61, 0.12);
+}
+
+.accent-purple .service-icon,
+.accent-purple::after {
+ color: var(--purple);
+ background: rgba(120, 100, 246, 0.12);
}
.record {
- position: fixed;
- right: 28px;
- bottom: 22px;
- left: 28px;
- display: flex;
- align-items: center;
justify-content: center;
gap: 16px;
- color: rgba(255, 255, 255, 0.58);
- font-size: 0.86rem;
+ padding: 24px 0 34px;
+ color: #7a8598;
+ font-size: 0.88rem;
+ border-top: 1px solid var(--line);
}
.record a {
@@ -322,50 +475,82 @@ h1 {
.record a:hover,
.record a:focus-visible {
- color: rgba(255, 255, 255, 0.92);
+ color: var(--blue);
}
-@media (max-width: 820px) {
- .shell {
- grid-template-columns: 1fr;
- width: min(620px, calc(100% - 28px));
- padding-top: 26px;
+@media (max-width: 960px) {
+ .nav-links {
+ display: none;
}
- .hero-panel {
+ .hero {
+ grid-template-columns: 1fr;
min-height: auto;
}
+
+ .hero-visual {
+ min-height: 390px;
+ }
+
+ .services {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
}
-@media (max-width: 520px) {
- .shell {
- padding-bottom: 110px;
+@media (max-width: 560px) {
+ .site-header,
+ .hero,
+ .services-section,
+ .record {
+ width: min(100% - 28px, 1180px);
}
- .brand-area {
- align-items: flex-start;
- flex-direction: column;
- }
-
- .brand-mark {
- width: 58px;
- height: 58px;
- border-radius: 17px;
+ .site-header {
+ min-height: 64px;
}
h1 {
- font-size: clamp(3rem, 16vw, 4.1rem);
+ font-size: clamp(2.55rem, 13vw, 4rem);
+ }
+
+ .button {
+ width: 100%;
+ }
+
+ .status-row {
+ align-items: flex-start;
+ flex-direction: column;
+ border-radius: 14px;
+ }
+
+ .hero-visual {
+ min-height: auto;
+ padding: 14px;
+ border-radius: 22px;
+ }
+
+ .visual-screen {
+ min-height: 310px;
+ }
+
+ .screen-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .screen-grid span {
+ min-height: 54px;
+ }
+
+ .screen-chart {
+ display: none;
}
.services {
grid-template-columns: 1fr;
}
- .service-card {
- min-height: 132px;
- }
-
.record {
+ align-items: center;
flex-direction: column;
gap: 6px;
text-align: center;
@@ -376,6 +561,7 @@ h1 {
*,
*::before,
*::after {
+ scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
Private Service Gateway
-sumi.work
+
+
- Private Service Gateway
+一个更清爽的 sumi.work 服务入口
++ 聚合常用内部服务与外部工具，保持入口清晰、状态明确、访问路径简单。 +
+ + + +
+
+ HTTPS 已启用
+ 安全连接 · 在线
服务入口 · HTTPS 已启用
- -
-
- 安全连接
- 在线
-
-
- - 一个简洁的内部服务导航页。常用入口集中展示，减少记忆路径，打开即用。 -
+
+
-
-
- Git 服务
- 代码仓库
-
+
Quick Access
+