:root {
--alt-font: "Inter", sans-serif;
--primary-font: "Inter", sans-serif;
/* Crafto accent tokens, re-pointed to the JIEBO orange */
--base-color: #ff6b1a;
/* JIEBO palette (sampled from the approved homepage design) */
--jiebo-navy: #0b2a4a;
--jiebo-navy-deep: #071e36;
--jiebo-navy-soft: #123a5e;
/* --jiebo-orange is the graphic accent: rules, borders, list markers and
decorative fills. At 2.85:1 on white it is fine for a 3px bar and not fine
for text, so anything that carries words or meaning uses
--jiebo-orange-dark instead. */
--jiebo-orange: #ff6b1a;
/* #e85a09 was 3.56:1 on white and 3.24:1 on the orange tint - both under the
4.5:1 that WCAG 2.1 AA needs for the 11.5-14px labels this site uses.
#c2410c clears it everywhere the palette actually renders: 5.18:1 on
white, 4.83:1 on --jiebo-surface, 4.72:1 on --jiebo-orange-tint. */
--jiebo-orange-dark: #c2410c;
--jiebo-orange-tint: #fff2e9;
--jiebo-surface: #f5f7fa;
--jiebo-surface-2: #eef3f9;
--jiebo-border: #e4ebf2;
--jiebo-muted: #5b7189;
/* Reading measure. A 16px Inter line inside this template's grid runs
108-142 characters - .col-lg-8 sits at ~860px and .col-12 at ~1290px -
against a comfortable 45-90. ch scales with font-size, so one value covers
the 14px to 17px copy this site uses. */
--jiebo-measure: 68ch;
--jiebo-measure-wide: 76ch;
/* keep Crafto greys in step with the JIEBO navy */
--dark-gray: #0b2a4a;
--medium-gray: #5b7189;
--very-light-gray: #f5f7fa;
}
body {
font-size: 16px;
line-height: 28px;
}
/* ---------- 2. legacy green-energy helpers -> JIEBO colours ---------- */
.bg-very-light-green {
background-color: var(--jiebo-surface);
}
.bg-light-green {
background-color: var(--jiebo-surface-2);
}
.bg-gradient-green-transparent {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, var(--jiebo-surface-2) 100%);
}
.text-gradient-light-green-white {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, var(--jiebo-surface-2) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.border-color-dark-green {
border-color: var(--jiebo-navy);
}
/* ---------- 3. header ---------- */
header .navbar-brand img {
max-height: 52px;
}
.jiebo-navbar {
box-shadow: 0 1px 0 0 var(--jiebo-border);
}
.jiebo-navbar .navbar-nav .nav-link {
font-size: 16px;
font-weight: 600;
color: var(--jiebo-navy);
}
.jiebo-navbar .navbar-nav .nav-link:hover,
.jiebo-navbar .navbar-nav .nav-item.active .nav-link {
color: var(--jiebo-orange);
}
/* Two template layers style this menu, and both out-rank a plain .jiebo-navbar
rule: css/style.css pins the box at border-radius 5px / width 260px and the
icon at 19px, then demos/green-energy/green-energy.css - loaded before this
file but sitting at (0,5,n) - widens the box to 300px and forces the icons to
40px with a 40px icon column. A 3-class .jiebo-navbar prefix only reaches
(0,3,n) and loses every one of those duels, which is why the brand skin was
silently ignored: the icons kept rendering at 40px (the oversized mega-menu
icon) and the panel kept the template's 5px box. The compound
.jiebo-navbar.navbar .navbar-nav prefix lands at (0,6,n) and is what makes
this layer authoritative - keep it when editing.
The panel cosmetics sit inside a min-width query on purpose: at <=991px
css/responsive.css re-tunes this same menu (border-radius: 0, padding: 0 30px,
width: 100% !important) at (0,5,0), and a raised selector outside the query
would override that and break the collapsed navigation. */
@media (min-width: 992px) {
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
width: 320px;
border-radius: 12px;
border: 1px solid var(--jiebo-border);
box-shadow: 0 18px 40px rgba(11, 42, 74, .10);
padding: 8px;
}
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
/* css/style.css gives every row a border-bottom separator, and this skin
gives every row an 8px radius. Together the straight separator curves
around the rounded corners and the menu reads as a stack of loose
tiles instead of a list. Dropping the border and insetting the rows
turns each one into a pill that only shows up on hover, which is what
the tinted hover state below was already drawing. */
border-bottom: 0;
padding: 12px 14px;
}
}
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
font-size: 15px;
font-weight: 600;
color: var(--jiebo-navy);
border-radius: 8px;
}
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
/* 40px -> 18px. The item label is 15px, so the glyph now sits at label scale
and the product names lead the row instead of the icon shouting over them. */
font-size: 18px;
width: 24px;
margin-right: 10px;
color: var(--jiebo-orange);
text-align: center;
}
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
background-color: var(--jiebo-orange-tint);
color: var(--jiebo-navy);
}
.jiebo-navbar.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover i {
color: var(--jiebo-orange);
}
/* ---------- 4. buttons ---------- */
.btn {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
border-radius: 8px;
}
.btn.btn-switch-text.btn-extra-large > span {
padding: 16px 34px;
font-size: 16px;
}
.btn.btn-switch-text.btn-large > span {
padding: 13px 30px;
font-size: 15px;
}
.btn.btn-switch-text.btn-medium > span {
padding: 11px 24px;
font-size: 14px;
}
.btn.jiebo-btn-outline {
background: transparent;
border: 1px solid var(--jiebo-navy);
color: var(--jiebo-navy);
}
.btn.jiebo-btn-outline:hover {
background: var(--jiebo-navy);
color: var(--white);
}
.btn.jiebo-btn-ghost-light {
background: transparent;
border: 1px solid rgba(255, 255, 255, .55);
color: var(--white);
}
.btn.jiebo-btn-ghost-light:hover {
background: var(--white);
color: var(--jiebo-navy);
}
/* ---------- 5. utility bar (板块 1) ---------- */
.jiebo-utility-bar {
background-color: var(--jiebo-navy-deep);
color: rgba(255, 255, 255, .80);
font-size: 13px;
line-height: 20px;
/* Crafto assumes a 40px top bar: `header .header-top-bar + .navbar { top: 40px }`.
main.js reads the real height at runtime, so keep 20px line + 10px padding = 40px. */
padding-top: 10px;
padding-bottom: 10px;
}
.jiebo-utility-bar a {
color: rgba(255, 255, 255, .80);
}
.jiebo-utility-bar a:hover {
color: var(--white);
}
.jiebo-utility-bar .jiebo-utility-item + .jiebo-utility-item::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background: rgba(255, 255, 255, .28);
margin: 0 14px;
vertical-align: -1px;
}
.jiebo-utility-flag {
width: 16px;
height: 12px;
border-radius: 2px;
object-fit: cover;
}
/* ---------- 6. hero (板块 3) ---------- */
/* The hero was pure white and its content sat flush against the section edges,
so the product panel had nothing to lift off and `overflow-hidden` clipped
its shadow. It is now a tinted band with breathing room: the panel reads as a
card, and the band separates cleanly from the white navbar above and the
white trust bar below. Everything stays inside the existing JIEBO palette —
--jiebo-surface-2 for the base and the same rgba(255,107,26,..) accent used
by the dark value section — and the warm radial sits behind the product card
because that is where the visual weight is. */
.jiebo-hero {
background-color: var(--jiebo-surface-2);
background-image:
radial-gradient(760px 560px at 76% 40%, rgba(255, 107, 26, .15) 0%, rgba(255, 107, 26, 0) 70%),
linear-gradient(180deg, #e8f0f8 0%, var(--jiebo-surface-2) 54%, #f3f8fc 100%);
/* the markup carries Bootstrap's `.p-0` (padding: 0 !important); a band this
visible needs vertical room or the card sits flush with both edges */
padding: 70px 0 78px !important;
}
.jiebo-hero-badge {
display: inline-block;
background: var(--jiebo-orange-tint);
color: var(--jiebo-orange-dark);
font-size: 13px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 6px;
}
.jiebo-hero h1 {
font-size: 54px;
line-height: 60px;
font-weight: 700;
letter-spacing: -1.5px;
color: var(--jiebo-navy);
margin-bottom: 16px;
}
.jiebo-hero-sub {
font-size: 20px;
line-height: 30px;
font-weight: 700;
/* --jiebo-orange-dark, not --jiebo-orange: on the tinted band the brighter
orange only reaches ~2.8:1 against the background, this one clears 3:1
for large text and matches the hero badge */
color: var(--jiebo-orange-dark);
margin-bottom: 18px;
}
.jiebo-hero-copy {
font-size: 16px;
line-height: 28px;
color: var(--jiebo-muted);
max-width: 560px;
}
.jiebo-hero-points {
list-style: none;
padding: 0;
margin: 0;
}
.jiebo-hero-points li {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: var(--jiebo-navy);
margin-right: 26px;
margin-bottom: 10px;
}
.jiebo-hero-points li i {
color: var(--jiebo-orange);
font-size: 15px;
margin-right: 8px;
}
.jiebo-hero-panel {
/* No card. The product is a transparent-background PNG now, so boxing it in a
white rectangle only made it look smaller - and a transparent PNG on a white
card is indistinguishable from the old white-background JPEG, i.e. the
cut-out would have been invisible. The product floats directly on the band
instead and `.jiebo-hero-media img` lifts it with a silhouette shadow.
Markup stays identical, so demo-green-energy.html and the generated
front-page.php keep matching. */
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
height: 100%;
display: flex;
flex-direction: column;
}
.jiebo-hero-panel-tag {
align-self: flex-start;
background: var(--jiebo-navy);
border: 1px solid var(--jiebo-navy);
color: var(--white);
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 6px;
}
/* the two colour chips in the hero panel footer. Crafto's width scale has no
`w-16px`/`h-16px` (it jumps 15px -> 20px) and no `me-8px`, so the previous
utility-class only version collapsed to 0x0 with no gap and rendered as a
stray 2px border dot. */
.jiebo-swatch {
display: inline-block;
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid var(--jiebo-border);
}
.jiebo-swatch + .jiebo-swatch {
margin-left: 8px;
}
.jiebo-hero-media {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 10px 0 6px;
}
.jiebo-hero-media img {
/* 360 -> 500: with the card gone the product IS the right-hand side, so it gets
the room. 500px tall is ~470px wide in a 520px column (the cut-out is
699x746, ratio .937), i.e. +38% linear / ~+92% area versus before. */
max-height: 500px;
width: auto;
max-width: 100%;
object-fit: contain;
/* drop-shadow follows the alpha silhouette, so it can never draw the rectangle
a box-shadow would. This is the payoff of the transparent PNG. */
filter: drop-shadow(0 20px 24px rgba(11, 42, 74, .18)) drop-shadow(0 3px 6px rgba(11, 42, 74, .06));
}
.jiebo-hero-model {
border-top: 1px solid var(--jiebo-border);
padding-top: 16px;
}
.jiebo-hero-model strong {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--jiebo-navy);
letter-spacing: -.4px;
margin-bottom: 2px;
}
.jiebo-hero-model span {
font-size: 13.5px;
line-height: 22px;
color: var(--jiebo-muted);
}
/* ---------- 7. company definition + trust bar (板块 4) ---------- */
.jiebo-define-bar {
background: var(--jiebo-surface);
border-left: 4px solid var(--jiebo-orange);
border-radius: 0 10px 10px 0;
padding: 22px 26px;
font-size: 16px;
line-height: 28px;
color: var(--jiebo-navy-soft);
}
.jiebo-stat {
display: flex;
align-items: center;
gap: 14px;
}
.jiebo-stat-icon {
flex: 0 0 auto;
/* The glyph is exactly 2x the old 19px. The badge grows with it (52 -> 64px)
because a 38px square glyph has a corner radius of ~26.9px against a 26px
circle - at 52px the corners would touch, if not clip, the border. */
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--jiebo-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--jiebo-orange);
font-size: 38px;
}
.jiebo-stat-icon i {
line-height: 1;
}
.jiebo-stat-num {
font-size: 32px;
line-height: 34px;
font-weight: 700;
letter-spacing: -1px;
color: var(--jiebo-navy);
}
.jiebo-stat-num small {
font-size: 20px;
font-weight: 700;
}
.jiebo-stat-label {
font-size: 13.5px;
line-height: 20px;
color: var(--jiebo-muted);
display: block;
}
/* ---------- 8. section heading helper ---------- */
.jiebo-kicker {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--jiebo-orange);
margin-bottom: 10px;
}
.jiebo-kicker::before {
content: "";
width: 26px;
height: 3px;
border-radius: 2px;
background: var(--jiebo-orange);
margin-right: 10px;
}
.jiebo-h2 {
font-size: 38px;
line-height: 46px;
font-weight: 700;
letter-spacing: -1px;
color: var(--jiebo-navy);
margin-bottom: 14px;
}
.jiebo-section-copy {
font-size: 16px;
line-height: 28px;
color: var(--jiebo-muted);
margin-bottom: 0;
}
.jiebo-title-rule {
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--jiebo-orange);
margin-top: 20px;
}
/* ---------- 9. category / product cards (板块 5 & 6) ---------- */
.jiebo-card {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 3px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: all .3s ease;
}
.jiebo-card:hover {
border-color: #cfdbe7;
box-shadow: 0 16px 36px rgba(11, 42, 74, .10);
transform: translateY(-3px);
}
.jiebo-card-media {
position: relative;
background: var(--jiebo-surface);
}
.jiebo-card-thumb {
position: relative;
width: 100%;
padding-top: 100%;
border-radius: 3px;
overflow: hidden;
background: var(--jiebo-surface-2);
background-size: cover;
background-position: center;
}
/* real ![]()
inside a ratio box: keeps the cover crop, gains alt text for SEO/a11y */
.jiebo-card-thumb > img,
.jiebo-factory-tile > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jiebo-card-market {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
background: var(--jiebo-navy);
color: var(--white);
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
}
.jiebo-card-body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.jiebo-card h3 {
font-size: 19px;
line-height: 26px;
font-weight: 700;
letter-spacing: -.4px;
color: var(--jiebo-navy);
margin-bottom: 8px;
}
.jiebo-card p {
font-size: 14.5px;
line-height: 24px;
color: var(--jiebo-muted);
margin-bottom: 14px;
}
.jiebo-card-spec {
font-size: 13px;
line-height: 21px;
color: var(--jiebo-muted);
border-top: 1px dashed var(--jiebo-border);
padding-top: 12px;
margin-bottom: 14px;
}
.jiebo-card-spec strong {
color: var(--jiebo-navy);
font-weight: 600;
}
.jiebo-card-link {
margin-top: auto;
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 700;
color: var(--jiebo-orange);
}
.jiebo-card-link i {
margin-left: 6px;
transition: transform .3s ease;
}
.jiebo-card:hover .jiebo-card-link i {
transform: translateX(4px);
}
.jiebo-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.jiebo-chip {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .3px;
color: var(--jiebo-navy);
background: var(--jiebo-surface);
border: 1px solid var(--jiebo-border);
border-radius: 4px;
padding: 3px 9px;
}
.jiebo-chip.is-accent {
color: var(--jiebo-orange-dark);
background: var(--jiebo-orange-tint);
border-color: #ffd9c2;
}
/* ---------- 10. dark value section (板块 7) ---------- */
.jiebo-dark-section {
background: var(--jiebo-navy);
color: rgba(255, 255, 255, .80);
}
.jiebo-dark-section .jiebo-h2,
.jiebo-dark-section h2,
.jiebo-dark-section h3 {
color: var(--white);
}
.jiebo-dark-section .jiebo-section-copy,
.jiebo-dark-section p {
color: rgba(255, 255, 255, .74);
}
.jiebo-value-card {
background: rgba(255, 255, 255, .055);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
padding: 28px 24px 26px;
height: 100%;
transition: all .3s ease;
}
.jiebo-value-card:hover {
background: rgba(255, 255, 255, .09);
border-color: rgba(255, 107, 26, .55);
}
.jiebo-value-icon {
width: 50px;
height: 50px;
border-radius: 10px;
background: rgba(255, 107, 26, .16);
color: var(--jiebo-orange);
font-size: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.jiebo-value-card h3 {
font-size: 18px;
line-height: 25px;
font-weight: 700;
letter-spacing: -.3px;
margin-bottom: 10px;
}
.jiebo-value-card p {
font-size: 14.5px;
line-height: 24px;
margin-bottom: 0;
}
/* ---------- 11. factory / capability (板块 8) ---------- */
.jiebo-factory-tile {
position: relative;
border-radius: 10px;
overflow: hidden;
background: var(--jiebo-surface-2);
height: 100%;
min-height: 320px;
background-size: cover;
background-position: center;
}
.jiebo-factory-tile::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 62%;
background: linear-gradient(to top, rgba(7, 30, 54, .82) 0%, rgba(7, 30, 54, 0) 100%);
}
.jiebo-factory-tile span {
position: absolute;
left: 16px;
bottom: 14px;
z-index: 2;
color: var(--white);
font-size: 14px;
font-weight: 600;
letter-spacing: .2px;
}
.jiebo-fact-box {
background: var(--jiebo-surface);
border-radius: 10px;
padding: 18px 20px;
}
.jiebo-fact-box small {
display: block;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--jiebo-muted);
margin-bottom: 6px;
}
.jiebo-fact-box strong {
font-size: 17px;
line-height: 24px;
font-weight: 700;
color: var(--jiebo-navy);
letter-spacing: -.3px;
}
.jiebo-cert-chip {
display: inline-flex;
align-items: center;
border: 1px solid var(--jiebo-border);
background: var(--white);
border-radius: 8px;
padding: 9px 16px;
font-size: 14px;
font-weight: 700;
letter-spacing: .5px;
color: var(--jiebo-navy);
}
.jiebo-list-check {
list-style: none;
padding: 0;
margin: 0;
}
.jiebo-list-check li {
position: relative;
padding-left: 24px;
font-size: 15px;
line-height: 26px;
color: var(--jiebo-muted);
margin-bottom: 6px;
}
.jiebo-list-check li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--jiebo-orange);
}
/* ---------- 12. applications (板块 9) ---------- */
.jiebo-app-card {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px;
padding: 20px 18px;
height: 100%;
display: flex;
align-items: center;
gap: 14px;
transition: all .3s ease;
}
.jiebo-app-card:hover {
border-color: #cfdbe7;
box-shadow: 0 12px 28px rgba(11, 42, 74, .08);
}
.jiebo-app-icon {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 9px;
background: var(--jiebo-surface);
color: var(--jiebo-orange);
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.jiebo-app-card h3 {
font-size: 15.5px;
line-height: 22px;
font-weight: 700;
color: var(--jiebo-navy);
margin-bottom: 2px;
letter-spacing: -.2px;
}
.jiebo-app-card p {
font-size: 13px;
line-height: 20px;
color: var(--jiebo-muted);
margin-bottom: 0;
}
.jiebo-app-group-title {
font-size: 15px;
font-weight: 700;
line-height: 1.45;
letter-spacing: .3px;
color: var(--jiebo-navy);
display: flex;
align-items: center;
/* applied to both (home page) and
(applications page),
so neutralise the default heading margins either way */
margin-top: 0;
margin-bottom: 18px;
}
.jiebo-app-group-title i {
color: var(--jiebo-orange);
margin-right: 9px;
font-size: 16px;
}
/* ---------- 13. OEM / ODM process (板块 10 replacement) ---------- */
.jiebo-step {
position: relative;
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px;
padding: 24px 22px;
height: 100%;
}
.jiebo-step-num {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--jiebo-navy);
color: var(--white);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.jiebo-step h3 {
font-size: 17px;
line-height: 24px;
font-weight: 700;
letter-spacing: -.3px;
color: var(--jiebo-navy);
margin-bottom: 8px;
}
.jiebo-step p {
font-size: 14px;
line-height: 23px;
color: var(--jiebo-muted);
margin-bottom: 0;
}
.jiebo-video-panel {
position: relative;
border-radius: 12px;
overflow: hidden;
min-height: 260px;
background-size: cover;
background-position: center;
height: 100%;
}
/* ---------- 14. resources (板块 11) ---------- */
.jiebo-resource-card {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px;
padding: 26px 24px;
height: 100%;
display: flex;
flex-direction: column;
transition: all .3s ease;
}
.jiebo-resource-card:hover {
border-color: #cfdbe7;
box-shadow: 0 14px 32px rgba(11, 42, 74, .09);
transform: translateY(-3px);
}
.jiebo-resource-icon {
width: 46px;
height: 46px;
border-radius: 9px;
background: var(--jiebo-surface);
color: var(--jiebo-orange);
font-size: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.jiebo-resource-card h3 {
font-size: 17px;
line-height: 24px;
font-weight: 700;
letter-spacing: -.3px;
color: var(--jiebo-navy);
margin-bottom: 8px;
}
.jiebo-resource-card p {
font-size: 14px;
line-height: 23px;
color: var(--jiebo-muted);
margin-bottom: 16px;
}
/* ---------- 15. FAQ (板块 12) ---------- */
.jiebo-faq .accordion-item {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px !important;
margin-bottom: 12px;
overflow: hidden;
}
.jiebo-faq .accordion-item.active-accordion {
background: var(--jiebo-surface);
}
.jiebo-faq .accordion-header {
border-bottom: 0 !important;
}
.jiebo-faq .accordion-title {
padding: 20px 24px;
}
.jiebo-faq .accordion-title span {
font-size: 16.5px !important;
font-weight: 700 !important;
color: var(--jiebo-navy);
line-height: 26px;
}
.jiebo-faq .accordion-title i {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--jiebo-orange);
font-size: 18px;
}
.jiebo-faq .accordion-body {
border-bottom: 0 !important;
padding: 0 24px 22px;
}
.jiebo-faq .accordion-body p {
font-size: 15px;
line-height: 26px;
color: var(--jiebo-muted);
margin-bottom: 0;
}
/* ---------- 16. bottom CTA + footer (板块 13) ---------- */
.jiebo-cta {
background: var(--jiebo-navy);
color: var(--white);
}
.jiebo-cta h2 {
font-size: 40px;
line-height: 48px;
font-weight: 700;
letter-spacing: -1.2px;
color: var(--white);
margin-bottom: 12px;
}
.jiebo-cta p {
color: rgba(255, 255, 255, .76);
font-size: 16.5px;
line-height: 28px;
margin-bottom: 0;
}
.jiebo-footer {
background: var(--jiebo-navy-deep);
color: rgba(255, 255, 255, .70);
}
.jiebo-footer h3,
.jiebo-footer h4 {
color: var(--white);
font-size: 15px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
margin-bottom: 18px;
}
.jiebo-footer a {
color: rgba(255, 255, 255, .70);
}
.jiebo-footer a:hover {
color: var(--white);
}
.jiebo-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.jiebo-footer ul li {
font-size: 14px;
line-height: 24px;
margin-bottom: 5px;
}
.jiebo-footer .jiebo-footer-about {
font-size: 14px;
line-height: 24px;
color: rgba(255, 255, 255, .66);
}
.jiebo-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
}
.jiebo-footer-bottom p,
.jiebo-footer-bottom a {
font-size: 13.5px;
color: rgba(255, 255, 255, .60);
}
.jiebo-footer-bottom a:hover {
color: var(--white);
}
.jiebo-footer-logo img {
max-height: 46px;
width: auto;
}
/* ---------- 17. responsive ---------- */
@media (max-width: 1399px) {
.jiebo-hero h1 {
font-size: 46px;
line-height: 52px;
}
}
@media (max-width: 1199px) {
.jiebo-hero {
padding: 62px 0 68px !important;
}
.jiebo-hero h1 {
font-size: 40px;
line-height: 46px;
}
.jiebo-h2 {
font-size: 32px;
line-height: 40px;
}
.jiebo-cta h2 {
font-size: 33px;
line-height: 41px;
}
.jiebo-navbar .navbar-nav .nav-link {
font-size: 15px;
padding: 10px 10px;
}
}
@media (max-width: 991px) {
.jiebo-hero {
padding: 52px 0 58px !important;
/* below 992px the two hero columns stack, so the product card ends up in
the lower half - move the warm radial down with it */
background-image:
radial-gradient(560px 500px at 68% 76%, rgba(255, 107, 26, .15) 0%, rgba(255, 107, 26, 0) 70%),
linear-gradient(180deg, #e8f0f8 0%, var(--jiebo-surface-2) 54%, #f3f8fc 100%);
}
.jiebo-hero h1 {
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
}
.jiebo-hero-sub {
font-size: 17px;
line-height: 26px;
}
.jiebo-hero-media {
/* Below 992px the two hero columns stack, so the product gets the full
container width instead of a ~520px column. The size has to grow with it:
the old flat 240px left the product as a small floating object in a ~950px
wide row at 768-991px. */
min-height: 300px;
}
.jiebo-hero-media img {
max-height: 360px;
}
.jiebo-utility-bar {
font-size: 12px;
}
.jiebo-utility-bar .jiebo-utility-item + .jiebo-utility-item::before {
margin: 0 8px;
}
.jiebo-faq .accordion-title {
padding: 16px 18px;
}
.jiebo-faq .accordion-body {
padding: 0 18px 18px;
}
}
@media (max-width: 767px) {
body {
font-size: 15px;
line-height: 26px;
}
.jiebo-hero {
padding: 40px 0 46px !important;
}
.jiebo-hero-media {
/* Phones: the 360px tablet size would eat most of the fold, but 240px made the
product read as a thumbnail. 280px is ~65% of a 390px viewport's width. */
min-height: 240px;
}
.jiebo-hero-media img {
max-height: 280px;
}
.jiebo-hero h1 {
font-size: 30px;
line-height: 36px;
}
.jiebo-h2 {
font-size: 26px;
line-height: 34px;
}
.jiebo-cta h2 {
font-size: 27px;
line-height: 35px;
}
.jiebo-define-bar {
padding: 18px;
font-size: 15px;
line-height: 26px;
}
.jiebo-stat {
flex-direction: column;
text-align: center;
gap: 8px;
}
.jiebo-factory-tile {
min-height: 170px;
}
}
/* ============================================================
17. sub pages (about / products / contact)
============================================================ */
.jiebo-page-hero {
background: var(--jiebo-navy-deep);
padding: 70px 0 60px;
}
.jiebo-page-hero h1 {
color: var(--white);
font-size: 40px;
line-height: 1.18;
margin-bottom: 14px;
}
.jiebo-page-hero .jiebo-page-lead {
color: rgba(255, 255, 255, .78);
font-size: 17px;
line-height: 28px;
max-width: 780px;
}
.jiebo-crumbs {
list-style: none;
padding: 0;
margin: 0 0 18px;
font-size: 13px;
color: rgba(255, 255, 255, .60);
}
.jiebo-crumbs li {
display: inline-block;
}
.jiebo-crumbs li + li::before {
content: "/";
margin: 0 8px;
color: rgba(255, 255, 255, .35);
}
.jiebo-crumbs a {
color: rgba(255, 255, 255, .70);
}
.jiebo-crumbs a:hover {
color: var(--jiebo-orange);
}
.jiebo-spec-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.jiebo-spec-table th,
.jiebo-spec-table td {
border-bottom: 1px solid var(--jiebo-border);
padding: 12px 14px;
text-align: left;
vertical-align: top;
}
.jiebo-spec-table th {
width: 210px;
color: var(--jiebo-navy);
font-weight: 600;
background: var(--jiebo-surface);
}
.jiebo-spec-table tr:last-child th,
.jiebo-spec-table tr:last-child td {
border-bottom: none;
}
.jiebo-contact-card {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px;
padding: 26px 26px 22px;
height: 100%;
}
.jiebo-contact-card h2,
.jiebo-contact-card h3 {
font-size: 19px;
margin-bottom: 10px;
}
.jiebo-contact-card p {
color: var(--jiebo-muted);
font-size: 15px;
line-height: 25px;
}
.jiebo-contact-value {
font-size: 17px;
font-weight: 600;
color: var(--jiebo-navy);
word-break: break-word;
}
.jiebo-checklist {
list-style: none;
padding: 0;
margin: 0;
}
.jiebo-checklist li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
line-height: 25px;
color: var(--jiebo-muted);
}
.jiebo-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 8px;
border-left: 2px solid var(--jiebo-orange);
border-bottom: 2px solid var(--jiebo-orange);
transform: rotate(-45deg);
}
.jiebo-note {
background: var(--jiebo-surface);
border-left: 3px solid var(--jiebo-orange);
border-radius: 0 8px 8px 0;
padding: 16px 20px;
font-size: 14px;
line-height: 24px;
color: var(--jiebo-muted);
}
@media (max-width: 767px) {
.jiebo-page-hero {
padding: 50px 0 40px;
}
.jiebo-page-hero h1 {
font-size: 28px;
}
.jiebo-spec-table th {
width: 130px;
}
}
/* ============================================================
18. blog list / post detail / sidebar / pagination
============================================================ */
.jiebo-post-meta {
font-size: 13px;
color: var(--jiebo-muted);
letter-spacing: .2px;
}
.jiebo-post-meta a {
color: var(--jiebo-muted);
border-bottom: 1px solid var(--jiebo-border);
}
.jiebo-post-meta a:hover {
color: var(--jiebo-orange);
border-color: var(--jiebo-orange);
}
.jiebo-post-cat {
display: inline-block;
background: var(--jiebo-orange-tint);
color: var(--jiebo-orange-dark);
font-size: 12px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
border-radius: 3px;
padding: 3px 9px;
}
.jiebo-post-card {
background: var(--white);
border: 1px solid var(--jiebo-border);
border-radius: 10px;
overflow: hidden;
height: 100%;
transition: box-shadow .3s ease, transform .3s ease;
}
.jiebo-post-card:hover {
box-shadow: 0 14px 34px rgba(11, 42, 74, .10);
transform: translateY(-3px);
}
.jiebo-post-card .jiebo-post-thumb {
position: relative;
display: block;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
background: var(--jiebo-surface-2);
}
.jiebo-post-card .jiebo-post-thumb img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jiebo-post-card .jiebo-post-body {
padding: 22px 24px 24px;
}
.jiebo-post-card h3 {
font-size: 19px;
line-height: 27px;
margin: 10px 0 10px;
}
.jiebo-post-card h3 a {
color: var(--jiebo-navy);
}
.jiebo-post-card h3 a:hover {
color: var(--jiebo-orange);
}
.jiebo-post-card p {
font-size: 15px;
line-height: 25px;
color: var(--jiebo-muted);
}
.jiebo-post-wide {
display: flex;
flex-wrap: wrap;
}
.jiebo-post-wide .jiebo-post-thumb {
padding-top: 0;
min-height: 240px;
width: 42%;
}
.jiebo-post-wide .jiebo-post-body {
width: 58%;
}
@media (max-width: 767px) {
.jiebo-post-wide .jiebo-post-thumb,
.jiebo-post-wide .jiebo-post-body {
width: 100%;
padding-top: 56.25%;
}
.jiebo-post-wide .jiebo-post-body {
padding-top: 22px;
}
}
/* ---- article typography ---- */
.jiebo-article {
font-size: 17px;
line-height: 30px;
color: #29405a;
}
.jiebo-article > p:first-of-type {
font-size: 19px;
line-height: 32px;
color: var(--jiebo-navy);
}
.jiebo-article h2 {
font-size: 27px;
line-height: 36px;
color: var(--jiebo-navy);
margin: 44px 0 16px;
}
.jiebo-article h3 {
font-size: 21px;
line-height: 30px;
color: var(--jiebo-navy);
margin: 32px 0 12px;
}
.jiebo-article p {
margin-bottom: 20px;
}
.jiebo-article ul,
.jiebo-article ol {
margin: 0 0 22px;
padding-left: 22px;
}
.jiebo-article li {
margin-bottom: 10px;
}
.jiebo-article ul li::marker {
color: var(--jiebo-orange);
}
.jiebo-article img {
border-radius: 10px;
margin: 10px 0 8px;
}
.jiebo-article figure {
margin: 26px 0;
}
.jiebo-article figcaption {
font-size: 13px;
color: var(--jiebo-muted);
margin-top: 8px;
}
.jiebo-article blockquote {
border-left: 3px solid var(--jiebo-orange);
background: var(--jiebo-surface);
border-radius: 0 8px 8px 0;
padding: 20px 24px;
margin: 26px 0;
font-size: 18px;
line-height: 29px;
color: var(--jiebo-navy);
}
.jiebo-article blockquote p:last-child {
margin-bottom: 0;
}
.jiebo-article .jiebo-spec-table {
margin: 8px 0 26px;
}
.jiebo-article a {
color: var(--jiebo-orange-dark);
border-bottom: 1px solid rgba(255, 107, 26, .35);
}
.jiebo-article a:hover {
border-color: var(--jiebo-orange);
}
.jiebo-author-box {
background: var(--jiebo-surface);
border-radius: 10px;
padding: 24px 26px;
}
.jiebo-author-box .jiebo-author-name {
font-size: 17px;
font-weight: 600;
color: var(--jiebo-navy);
}
.jiebo-author-box p {
font-size: 15px;
line-height: 25px;
color: var(--jiebo-muted);
}
/* ---- sidebar ---- */
.jiebo-widget + .jiebo-widget {
margin-top: 34px;
}
.jiebo-widget-title {
font-size: 17px;
color: var(--jiebo-navy);
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--jiebo-border);
}
.jiebo-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.jiebo-widget ul li {
padding: 9px 0;
border-bottom: 1px dashed var(--jiebo-border);
font-size: 15px;
line-height: 23px;
}
.jiebo-widget ul li:last-child {
border-bottom: none;
}
.jiebo-widget ul li a {
color: var(--jiebo-muted);
}
.jiebo-widget ul li a:hover {
color: var(--jiebo-orange);
}
.jiebo-widget .jiebo-widget-count {
float: right;
color: #9fb1c4;
font-size: 13px;
}
.jiebo-filter-chip {
display: inline-block;
border: 1px solid var(--jiebo-border);
background: var(--white);
color: var(--jiebo-muted);
font-size: 13px;
border-radius: 20px;
padding: 6px 15px;
margin: 0 8px 8px 0;
}
.jiebo-filter-chip:hover,
.jiebo-filter-chip.is-active {
background: var(--jiebo-navy);
border-color: var(--jiebo-navy);
color: var(--white);
}
.jiebo-tag-cloud a {
display: inline-block;
font-size: 13px;
color: var(--jiebo-muted);
background: var(--jiebo-surface);
border-radius: 4px;
padding: 4px 10px;
margin: 0 6px 8px 0;
}
.jiebo-tag-cloud a:hover {
background: var(--jiebo-navy);
color: var(--white);
}
/* ---- pagination ---- */
.jiebo-pagination {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jiebo-pagination li a,
.jiebo-pagination li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border: 1px solid var(--jiebo-border);
border-radius: 6px;
background: var(--white);
color: var(--jiebo-navy);
font-size: 15px;
}
.jiebo-pagination li a:hover {
border-color: var(--jiebo-orange);
color: var(--jiebo-orange);
}
.jiebo-pagination li.is-active span {
background: var(--jiebo-navy);
border-color: var(--jiebo-navy);
color: var(--white);
}
.jiebo-pagination li.is-disabled span {
color: #b8c5d3;
background: var(--jiebo-surface);
}
/* ---------- 19. inline meta helpers (blog cards, posts, sidebars) ---------- */
/* A middot placed between two inline meta items (date / author / read time).
Kept as a class so the blog markup does not depend on the template's
mx-* spacing utilities, which change between Crafto builds. */
.jiebo-meta-sep {
display: inline-block;
line-height: 1;
color: #c2ccd8;
margin-left: 3px;
margin-right: 3px;
}
/* Hairline under a meta row (article header, card footer, widget heading). */
.jiebo-meta-rule {
border-bottom: 1px solid var(--jiebo-border);
}
/* Sidebar widget heading written as an