feat: release B2B Trade theme 2.1.0
This commit is contained in:
WorkBuddy
Vendored
-355
File diff suppressed because one or more lines are too long
+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,
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
/*
|
||||
- Colorbox Lightbox (only active vendor CSS)
|
||||
- Jarallax and AOS styles removed (unused) — 2026-07-24
|
||||
*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
/** Colorbox Lightbox
|
||||
--------------------------------------------------------------*/
|
||||
/*
|
||||
Colorbox Core Style:
|
||||
The following CSS is consistent between example themes and should not be altered.
|
||||
*/
|
||||
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
|
||||
#cboxWrapper {max-width:none;}
|
||||
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
||||
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
||||
#cboxContent{position:relative;}
|
||||
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
||||
#cboxTitle{margin:0;}
|
||||
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
||||
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
||||
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
||||
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
|
||||
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
||||
|
||||
/*
|
||||
User Style:
|
||||
Change the following styles to modify the appearance of Colorbox. They are
|
||||
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
||||
*/
|
||||
#cboxOverlay{background:#000;}
|
||||
#colorbox{outline:0;}
|
||||
#cboxContent{margin-top:20px;background:#000;}
|
||||
.cboxIframe{background:#fff;}
|
||||
#cboxError{padding:50px; border:1px solid #ccc;}
|
||||
#cboxLoadedContent{border:5px solid #000; background:#fff;}
|
||||
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
|
||||
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
|
||||
#cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
|
||||
|
||||
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
||||
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
||||
|
||||
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
||||
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
||||
|
||||
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
|
||||
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
|
||||
#cboxPrevious:hover{background-position:bottom left;}
|
||||
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
|
||||
#cboxNext:hover{background-position:bottom right;}
|
||||
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
|
||||
#cboxClose:hover{background-position:bottom center;}
|
||||
Reference in New Issue
Block a user