feat: release B2B Trade theme 2.1.0
This commit is contained in:
WorkBuddy
+14
-276
@@ -1,5 +1,5 @@
|
||||
/* ============================================================
|
||||
Fragrance Trade v3.0 — Minimalist Luxury Design System
|
||||
B2B Trade v2.1.0 — Minimalist Store Design System
|
||||
汽车贴膜门店 · 极简高级感 · 黑白灰单色体系
|
||||
============================================================
|
||||
Design Philosophy:
|
||||
@@ -33,6 +33,10 @@
|
||||
--b2b-shadow-sm: 0 1px 0 0 rgba(28, 28, 26, 0.04);
|
||||
--b2b-shadow-md: 0 2px 8px rgba(28, 28, 26, 0.06);
|
||||
--b2b-shadow-lg: 0 8px 32px rgba(28, 28, 26, 0.08);
|
||||
|
||||
/* Local system stacks — never trigger external font requests */
|
||||
--b2b-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
|
||||
--b2b-font-display: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
|
||||
}
|
||||
|
||||
/* ---- Reset & Base ---- */
|
||||
@@ -46,7 +50,7 @@ body {
|
||||
margin: 0;
|
||||
color: var(--b2b-ink-soft);
|
||||
background: var(--b2b-surface);
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
@@ -60,7 +64,7 @@ body {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
color: var(--b2b-ink);
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -146,7 +150,7 @@ img {
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1.75rem;
|
||||
border-radius: 0;
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -272,7 +276,7 @@ img {
|
||||
|
||||
.b2b-wordmark {
|
||||
color: var(--b2b-ink);
|
||||
font-family: "Josefin Sans", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-display);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1em;
|
||||
@@ -341,7 +345,7 @@ img {
|
||||
.b2b-hero h1 {
|
||||
max-width: 780px;
|
||||
margin-bottom: 1.75rem;
|
||||
font-family: "Josefin Sans", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-display);
|
||||
font-size: clamp(2.8rem, 6vw, 5.2rem);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.03em;
|
||||
@@ -406,7 +410,7 @@ img {
|
||||
.trust-metric strong {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--b2b-surface);
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: clamp(1.3rem, 2.2vw, 1.8rem);
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -547,7 +551,7 @@ img {
|
||||
bottom: 0;
|
||||
padding: 1.5rem 1.25rem;
|
||||
color: var(--b2b-surface);
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -611,7 +615,7 @@ img {
|
||||
color: var(--b2b-ink);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -631,247 +635,6 @@ img {
|
||||
color: var(--b2b-ink-soft);
|
||||
}
|
||||
|
||||
/* ---- RFQ / Contact Form ---- */
|
||||
.rfq-section {
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.rfq-direct {
|
||||
margin-top: 2.5rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--b2b-surface);
|
||||
border-left: 2px solid var(--b2b-ink);
|
||||
}
|
||||
|
||||
.rfq-direct h3 {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rfq-form-card {
|
||||
padding: 2rem;
|
||||
background: var(--b2b-surface);
|
||||
border: 1px solid var(--b2b-line);
|
||||
}
|
||||
|
||||
.rfq-form-card label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--b2b-ink);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.rfq-form-card .form-control,
|
||||
.rfq-form-card .form-select {
|
||||
min-height: 46px;
|
||||
padding: 0.625rem 0.875rem;
|
||||
color: var(--b2b-ink);
|
||||
background-color: var(--b2b-surface);
|
||||
border: 1px solid var(--b2b-line);
|
||||
border-radius: 0;
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 180ms ease;
|
||||
}
|
||||
|
||||
.rfq-form-card textarea.form-control {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.rfq-form-card .form-control:focus,
|
||||
.rfq-form-card .form-select:focus {
|
||||
border-color: var(--b2b-ink);
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rfq-form-card .form-control::placeholder {
|
||||
color: var(--b2b-ink-muted);
|
||||
}
|
||||
|
||||
.fragrance-form-status p {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
color: var(--b2b-ink);
|
||||
background: var(--b2b-mist);
|
||||
border-left: 2px solid var(--b2b-ink);
|
||||
}
|
||||
|
||||
.rfq-privacy-note {
|
||||
margin: 1rem 0;
|
||||
color: var(--b2b-ink-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.fragrance-honeypot {
|
||||
position: absolute !important;
|
||||
left: -10000px !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- Quality Grid ---- */
|
||||
.quality-section {
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.quality-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--b2b-line);
|
||||
}
|
||||
|
||||
.quality-card {
|
||||
min-width: 0;
|
||||
min-height: 240px;
|
||||
padding: 2rem 1.75rem;
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.quality-number {
|
||||
display: block;
|
||||
margin-bottom: 2.5rem;
|
||||
color: var(--b2b-ink-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.quality-card h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.quality-card p {
|
||||
color: var(--b2b-ink-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ---- Process Grid ---- */
|
||||
.process-section {
|
||||
background: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 250px;
|
||||
padding: 1.75rem 1.5rem;
|
||||
background: var(--b2b-elevated);
|
||||
border-top: 2px solid var(--b2b-ink);
|
||||
}
|
||||
|
||||
.process-step span {
|
||||
display: block;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--b2b-ink-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.process-step h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.process-step p {
|
||||
color: var(--b2b-ink-soft);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* ---- Project Scenarios ---- */
|
||||
.projects-section {
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--b2b-line);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 300px;
|
||||
padding: 2rem 1.75rem;
|
||||
flex-direction: column;
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
color: var(--b2b-ink-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.project-card h3 {
|
||||
margin: 1.25rem 0 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card p {
|
||||
color: var(--b2b-ink-soft);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.project-card .text-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* ---- Customization Grid ---- */
|
||||
.customization-section {
|
||||
color: var(--b2b-surface);
|
||||
background: var(--b2b-ink);
|
||||
}
|
||||
|
||||
.customization-section h2,
|
||||
.customization-section .section-eyebrow {
|
||||
color: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.customization-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-top: 1px solid rgba(250, 250, 248, 0.12);
|
||||
border-left: 1px solid rgba(250, 250, 248, 0.12);
|
||||
}
|
||||
|
||||
.customization-item {
|
||||
min-width: 0;
|
||||
padding: 1.75rem;
|
||||
border-right: 1px solid rgba(250, 250, 248, 0.12);
|
||||
border-bottom: 1px solid rgba(250, 250, 248, 0.12);
|
||||
}
|
||||
|
||||
.customization-item span {
|
||||
display: block;
|
||||
margin-bottom: 1.25rem;
|
||||
color: rgba(250, 250, 248, 0.4);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.customization-item h3 {
|
||||
margin: 0;
|
||||
color: var(--b2b-surface);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
/* ---- Factory / Store Environment ---- */
|
||||
.factory-proof {
|
||||
background: var(--b2b-surface);
|
||||
@@ -1092,7 +855,7 @@ img {
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-family: "Jost", "Noto Sans SC", Arial, sans-serif;
|
||||
font-family: var(--b2b-font-sans);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -1402,9 +1165,6 @@ textarea:focus-visible {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* LG down — 991px */
|
||||
@@ -1418,14 +1178,6 @@ textarea:focus-visible {
|
||||
padding: 7rem 0 4.5rem;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.factory-gallery {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@@ -1481,9 +1233,6 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.capability-grid,
|
||||
.customization-grid,
|
||||
.quality-grid,
|
||||
.process-grid,
|
||||
.document-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -1505,17 +1254,6 @@ textarea:focus-visible {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.rfq-form-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.quality-card,
|
||||
.process-step {
|
||||
min-height: 0;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.b2b-section.about-intro,
|
||||
.contact-section,
|
||||
|
||||
Reference in New Issue
Block a user