diff --git a/assets/css/base.css b/assets/css/base.css
new file mode 100644
index 0000000..1ff7afa
--- /dev/null
+++ b/assets/css/base.css
@@ -0,0 +1,74 @@
+:root {
+ color-scheme: light;
+ --bg: #f5f8ff;
+ --panel: #ffffff;
+ --text: #17233d;
+ --muted: #63708a;
+ --line: #e5ebf5;
+ --blue: #246bfe;
+ --blue-dark: #1554d1;
+ --green: #19b982;
+ --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;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ min-height: 100%;
+ scroll-behavior: smooth;
+}
+
+body {
+ min-width: 320px;
+ min-height: 100svh;
+ margin: 0;
+ color: var(--text);
+ background:
+ 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 {
+ color: inherit;
+ text-decoration: none;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+h1,
+h2,
+p {
+ margin-top: 0;
+}
+
+h1 {
+ max-width: 620px;
+ margin-bottom: 22px;
+ font-size: clamp(2.8rem, 6vw, 5.55rem);
+ line-height: 1.03;
+ letter-spacing: 0;
+}
+
+h2 {
+ margin-bottom: 0;
+ font-size: clamp(1.9rem, 3vw, 3rem);
+ line-height: 1.08;
+ letter-spacing: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ scroll-behavior: auto !important;
+ transition-duration: 0.01ms !important;
+ }
+}
diff --git a/styles.css b/assets/css/components.css
similarity index 63%
rename from styles.css
rename to assets/css/components.css
index 4631f25..5523382 100644
--- a/styles.css
+++ b/assets/css/components.css
@@ -1,76 +1,7 @@
-:root {
- 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;
-}
-
-* {
- box-sizing: border-box;
-}
-
-html {
- min-height: 100%;
- scroll-behavior: smooth;
-}
-
-body {
- min-width: 320px;
- min-height: 100svh;
- margin: 0;
- color: var(--text);
- background:
- 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 {
- color: inherit;
- text-decoration: none;
-}
-
-.site-header {
- position: sticky;
- top: 0;
- z-index: 20;
- display: flex;
- align-items: center;
- 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 {
+.status-row {
display: flex;
align-items: center;
}
@@ -100,31 +31,18 @@ a {
font-weight: 650;
}
-.nav-links a {
+.nav-links a,
+.record a {
transition: color 160ms ease;
}
.nav-links a:hover,
-.nav-links a:focus-visible {
+.nav-links a:focus-visible,
+.record a:hover,
+.record 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 12px;
color: var(--blue);
@@ -134,20 +52,6 @@ a {
text-transform: uppercase;
}
-h1,
-h2,
-p {
- margin-top: 0;
-}
-
-h1 {
- max-width: 620px;
- margin-bottom: 22px;
- font-size: clamp(2.8rem, 6vw, 5.55rem);
- line-height: 1.03;
- letter-spacing: 0;
-}
-
.subtitle {
max-width: 580px;
margin-bottom: 30px;
@@ -227,9 +131,7 @@ h1 {
position: relative;
min-height: 460px;
overflow: hidden;
- background:
- linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
- #fff;
+ background: var(--panel);
border: 1px solid rgba(222, 232, 248, 0.9);
border-radius: 28px;
box-shadow: var(--shadow);
@@ -245,7 +147,6 @@ h1 {
}
.hero-visual img {
- display: block;
width: 100%;
height: 100%;
min-height: 460px;
@@ -301,18 +202,6 @@ h1 {
font-weight: 800;
}
-.services-section {
- padding: 10px 0 86px;
-}
-
-.section-heading {
- display: flex;
- align-items: end;
- justify-content: space-between;
- gap: 24px;
- margin-bottom: 22px;
-}
-
.section-note {
max-width: 420px;
margin-bottom: 0;
@@ -321,19 +210,6 @@ h1 {
text-align: right;
}
-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(4, minmax(0, 1fr));
- gap: 20px;
-}
-
.service-card {
position: relative;
display: block;
@@ -357,7 +233,6 @@ h2 {
linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
content: "";
- transition: opacity 180ms ease;
}
.service-card:hover,
@@ -374,7 +249,6 @@ h2 {
}
.service-card img {
- display: block;
width: 100%;
height: 100%;
min-height: 280px;
@@ -426,72 +300,18 @@ h2 {
line-height: 1.55;
}
-.record {
- justify-content: center;
- gap: 16px;
- padding: 24px 0 34px;
- color: #7a8598;
- font-size: 0.88rem;
- border-top: 1px solid var(--line);
-}
-
-.record a {
- transition: color 160ms ease;
-}
-
-.record a:hover,
-.record a:focus-visible {
- color: var(--blue);
-}
-
@media (max-width: 960px) {
- .nav-links {
- display: none;
- }
-
- .hero {
- grid-template-columns: 1fr;
- min-height: auto;
- }
-
- .hero-visual {
- min-height: 390px;
- }
-
+ .hero-visual,
.hero-visual img {
min-height: 390px;
}
- .services {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- .section-heading {
- align-items: flex-start;
- flex-direction: column;
- }
-
.section-note {
text-align: left;
}
}
@media (max-width: 560px) {
- .site-header,
- .hero,
- .services-section,
- .record {
- width: min(100% - 28px, 1180px);
- }
-
- .site-header {
- min-height: 64px;
- }
-
- h1 {
- font-size: clamp(2.55rem, 13vw, 4rem);
- }
-
.button {
width: 100%;
}
@@ -526,28 +346,8 @@ h2 {
min-height: 34px;
}
- .services {
- grid-template-columns: 1fr;
- }
-
.service-card,
.service-card img {
min-height: 230px;
}
-
- .record {
- align-items: center;
- flex-direction: column;
- gap: 6px;
- text-align: center;
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- scroll-behavior: auto !important;
- transition-duration: 0.01ms !important;
- }
}
diff --git a/assets/css/layout.css b/assets/css/layout.css
new file mode 100644
index 0000000..ccf83cc
--- /dev/null
+++ b/assets/css/layout.css
@@ -0,0 +1,116 @@
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ display: flex;
+ align-items: center;
+ 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);
+}
+
+.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;
+}
+
+.services-section {
+ padding: 10px 0 86px;
+}
+
+.section-heading {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 24px;
+ margin-bottom: 22px;
+}
+
+.services {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 20px;
+}
+
+.record {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ padding: 24px 0 34px;
+ color: #7a8598;
+ font-size: 0.88rem;
+ border-top: 1px solid var(--line);
+}
+
+@media (max-width: 960px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero {
+ grid-template-columns: 1fr;
+ min-height: auto;
+ }
+
+ .services {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .section-heading {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+}
+
+@media (max-width: 560px) {
+ .site-header,
+ .hero,
+ .services-section,
+ .record {
+ width: min(100% - 28px, 1180px);
+ }
+
+ .site-header {
+ min-height: 64px;
+ }
+
+ h1 {
+ font-size: clamp(2.55rem, 13vw, 4rem);
+ }
+
+ .services {
+ grid-template-columns: 1fr;
+ }
+
+ .record {
+ flex-direction: column;
+ gap: 6px;
+ text-align: center;
+ }
+}
diff --git a/assets/service-frp.jpg b/assets/images/service-frp.jpg
similarity index 100%
rename from assets/service-frp.jpg
rename to assets/images/service-frp.jpg
diff --git a/assets/service-gemini.jpg b/assets/images/service-gemini.jpg
similarity index 100%
rename from assets/service-gemini.jpg
rename to assets/images/service-gemini.jpg
diff --git a/assets/service-git.jpg b/assets/images/service-git.jpg
similarity index 100%
rename from assets/service-git.jpg
rename to assets/images/service-git.jpg
diff --git a/assets/workspace-hero.jpg b/assets/images/workspace-hero.jpg
similarity index 100%
rename from assets/workspace-hero.jpg
rename to assets/images/workspace-hero.jpg
diff --git a/script.js b/assets/js/main.js
similarity index 100%
rename from script.js
rename to assets/js/main.js
diff --git a/assets/sumi-hero.png b/assets/sumi-hero.png
deleted file mode 100644
index 4fbc4a7..0000000
Binary files a/assets/sumi-hero.png and /dev/null differ
diff --git a/index.html b/index.html
index 81f58cd..6baf47f 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,9 @@
sumi.work - 服务入口
-
+
+
+