/* roulang page: index */
:root {
--kw: #5c9e3b;
--kw-deep: #2c6335;
--kw-dark: #1f4a2a;
--kw-light: #edf5e5;
--kiwi-cream: #e4f1da;
--sun: #f3b942;
--ink: #27352b;
--ink-soft: #5b6b5e;
--paper: #faf9f4;
--paper-warm: #f6f1e7;
--line: #e2e7de;
--card-bg: #ffffff;
--radius-lg: 18px;
--radius-md: 12px;
--radius-pill: 999px;
--shadow-sm: 0 4px 14px rgba(31, 74, 42, 0.05);
--shadow-md: 0 12px 30px rgba(31, 74, 42, 0.07);
--shadow-hover: 0 16px 36px rgba(31, 74, 42, 0.12);
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.75;
background-color: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--kw-deep);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--kw);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.3;
color: var(--ink);
margin-top: 0;
}
.container-wide {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 22px;
padding-right: 22px;
}
.section {
padding: 80px 0;
}
.section-tight {
padding: 56px 0;
}
.text-soft {
color: var(--ink-soft);
}
.btn {
border-radius: var(--radius-pill);
transition: all 0.25s ease;
font-weight: 600;
padding: 10px 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary.custom {
background-color: var(--kw);
border-color: var(--kw);
color: #fff;
padding: 12px 30px;
border-radius: var(--radius-pill);
}
.btn-primary.custom:hover,
.btn-primary.custom:focus {
background-color: var(--kw-deep);
border-color: var(--kw-deep);
color: #fff;
box-shadow: 0 8px 20px rgba(44, 99, 53, 0.2);
transform: translateY(-1px);
}
.btn-outline.custom-outline {
border: 1.5px solid var(--kw-deep);
color: var(--kw-deep);
background-color: transparent;
}
.btn-outline.custom-outline:hover {
background-color: var(--kw-light);
color: var(--kw-deep);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(44, 99, 53, 0.08);
}
.badge.custom-badge {
background-color: var(--kw-light);
color: var(--kw-deep);
border-radius: 6px;
padding: 6px 12px;
font-weight: 600;
font-size: 13px;
}
.badge.sun-badge {
background-color: rgba(243, 185, 66, 0.22);
color: #8a5a18;
border-radius: 6px;
padding: 6px 12px;
font-weight: 600;
font-size: 13px;
}
.card.custom-card {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background-color: var(--card-bg);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card.custom-card:hover {
border-color: rgba(92, 158, 59, 0.5);
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
}
/* ================== 顶部公告条 ================== */
.top-ticker {
background: var(--kw-dark);
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
padding: 6px 0;
overflow: hidden;
}
.top-ticker .ticker-inner {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.top-ticker .ticker-sep {
color: var(--sun);
margin: 0 6px;
}
/* ================== 导航 ================== */
.site-header {
position: sticky;
top: 0;
z-index: 1040;
background-color: rgba(250, 249, 244, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.navbar.custom-nav {
padding-top: 12px;
padding-bottom: 12px;
min-height: 72px;
}
.brand-logo {
display: flex;
align-items: center;
gap: 10px;
}
.kiwi-brand-mark {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid var(--kw);
background-color: var(--kw-light);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-text strong {
font-size: 19px;
font-weight: 800;
color: var(--kw-dark);
letter-spacing: 0.5px;
}
.brand-text span {
font-size: 11px;
color: var(--kw);
font-weight: 600;
letter-spacing: 1.5px;
}
.custom-nav .navbar-nav .nav-link {
color: var(--ink);
font-weight: 600;
padding: 8px 18px;
border-radius: var(--radius-pill);
font-size: 15px;
position: relative;
}
.custom-nav .navbar-nav .nav-link:hover {
color: var(--kw-deep);
background-color: rgba(237, 245, 229, 0.8);
}
.custom-nav .navbar-nav .nav-link.active {
color: var(--kw-deep);
background-color: transparent;
}
.custom-nav .navbar-nav .nav-link.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 18px;
right: 18px;
height: 2px;
border-radius: 2px;
background: var(--kw);
}
.nav-search-wrap {
width: 230px;
margin-right: 12px;
transition: width 0.3s ease;
}
.nav-search-wrap:focus-within {
width: 275px;
}
.nav-search {
height: 38px;
border-radius: var(--radius-pill);
background-color: #edf1e9;
border: 1px solid transparent;
display: flex;
align-items: center;
padding: 0 8px 0 14px;
gap: 8px;
font-size: 14px;
}
.nav-search .icon {
color: var(--ink-soft);
font-size: 14px;
}
.nav-search input {
background: transparent;
border: none;
outline: none;
flex: 1;
font-size: 14px;
color: var(--ink);
min-width: 0;
}
.nav-search input::placeholder {
color: #8a968d;
}
.nav-search .kbd {
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 11px;
padding: 2px 6px;
color: var(--ink-soft);
font-family: inherit;
}
.icon-btn-ghost {
background: none;
border: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
font-size: 17px;
transition: all 0.2s;
}
.icon-btn-ghost:hover {
background: var(--kw-light);
color: var(--kw-deep);
}
.cta-nav {
background: var(--kw);
border-radius: var(--radius-pill);
color: #fff;
font-weight: 700;
border: none;
padding: 9px 22px;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.cta-nav:hover {
background: var(--kw-deep);
color: #fff;
transform: translateY(-1px);
}
.navbar-toggler.custom-toggler {
border: 1.5px solid var(--line);
border-radius: 10px;
padding: 4px 10px;
color: var(--kw-deep);
background-color: transparent;
}
.navbar-toggler.custom-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(92, 158, 59, 0.1);
}
@media (min-width: 1200px) and (max-width: 1399px) {
.nav-search-wrap {
width: 180px;
}
.nav-search-wrap:focus-within {
width: 220px;
}
.custom-nav .navbar-nav .nav-link {
padding: 8px 15px;
font-size: 14px;
}
}
@media (max-width: 991.98px) {
.nav-search-wrap {
display: none;
}
.mobile-search-holder {
display: block;
margin: 6px 12px 12px;
}
.navbar-collapse {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px 6px;
margin-top: 10px;
box-shadow: var(--shadow-md);
}
.custom-nav .navbar-nav .nav-link.active::after {
left: auto;
right: auto;
width: auto;
bottom: 6px;
}
.btn-group-mobile {
display: flex;
gap: 8px;
padding: 8px 10px;
}
}
@media (min-width: 992px) {
.mobile-only-flex {
display: none !important;
}
}
@media (max-width: 991px) {
.mobile-only-flex {
display: flex;
}
}
/* ================== Hero 区 ================== */
.hero-section {
padding: 30px 0 64px;
background-color: var(--paper-warm);
position: relative;
overflow: hidden;
}
.hero-bg-image {
position: absolute;
inset: 0;
background-image: url('/assets/images/backpic/back-1.webp');
background-size: cover;
background-position: center;
opacity: 0.12;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 2;
}
.hero-copy {
max-width: 640px;
}
.hero-overline {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(92, 158, 59, 0.14);
border: 1px solid rgba(92, 158, 59, 0.3);
color: var(--kw-deep);
border-radius: var(--radius-pill);
padding: 6px 16px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
}
.hero-overline .dot {
width: 7px;
height: 7px;
background: var(--kw);
border-radius: 50%;
}
.hero-copy h1 {
font-size: 44px;
font-weight: 800;
line-height: 1.25;
margin: 20px 0 18px;
letter-spacing: 0.5px;
}
.hero-copy h1 .text-gradient {
color: var(--kw-deep);
position: relative;
}
.hero-copy p {
font-size: 17px;
color: var(--ink-soft);
margin-bottom: 30px;
line-height: 1.9;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-tag-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
padding: 5px 14px;
font-size: 13px;
color: var(--ink-soft);
}
.hero-card-wrap {
display: flex;
justify-content: flex-end;
}
.hero-status-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow-md);
padding: 24px;
max-width: 380px;
width: 100%;
position: relative;
}
.hero-status-card::before {
content: "";
position: absolute;
top: 18px;
left: 18px;
width: 28px;
height: 28px;
border-radius: 50%;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
opacity: 0.6;
}
.status-top {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.status-pill {
background: var(--kw-light);
color: var(--kw-deep);
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 700;
padding: 4px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.status-pill .pulse {
width: 7px;
height: 7px;
background: var(--kw);
border-radius: 50%;
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(92, 158, 59, 0.4);
}
70% {
box-shadow: 0 0 0 8px rgba(92, 158, 59, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(92, 158, 59, 0);
}
}
.hero-status-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: var(--ink);
}
.hero-status-text {
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 18px;
line-height: 1.7;
}
.hero-card-btn {
width: 100%;
background: var(--kw);
color: #fff;
border: none;
border-radius: var(--radius-pill);
padding: 12px 20px;
font-weight: 700;
font-size: 15px;
transition: all 0.25s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.hero-card-btn:hover {
background: var(--kw-deep);
color: #fff;
}
@media (max-width: 767px) {
.hero-section {
padding-top: 20px;
}
.hero-copy h1 {
font-size: 32px;
}
.hero-card-wrap {
justify-content: center;
margin-top: 40px;
}
}
/* ================== 分区标题 ================== */
.section-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 40px;
}
.section-title-wrap {
max-width: 650px;
}
.section-sub-text {
color: var(--ink-soft);
margin-top: 6px;
font-size: 15px;
}
.section-title-main {
font-size: 32px;
font-weight: 800;
position: relative;
padding-left: 18px;
}
.section-title-main::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 5px;
border-radius: 4px;
background: var(--kw);
}
/* ================== 资讯频道 / 简介卡 ================== */
.intro-grid {
display: grid;
grid-template-columns: 1.2fr 0.9fr 0.9fr;
gap: 24px;
}
.intro-card-main {
background: var(--kw-dark);
color: #fff;
border-radius: var(--radius-lg);
padding: 36px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.intro-card-main::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -60px;
bottom: -60px;
background: url('data:image/svg+xml;utf8,');
background-size: 36px 36px;
opacity: 0.5;
}
.intro-card-main .tag {
font-size: 14px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-pill);
display: inline-block;
align-self: flex-start;
padding: 4px 14px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}
.intro-card-main h3 {
font-size: 25px;
color: #fff;
margin-bottom: 16px;
font-weight: 700;
}
.intro-card-main p {
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
line-height: 1.8;
}
.intro-card-item {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
transition: transform 0.25s, box-shadow 0.25s;
}
.intro-card-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.intro-card-item .ico {
width: 50px;
height: 50px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 18px;
color: #fff;
background: var(--kw);
}
.intro-card-item h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.intro-card-item p {
color: var(--ink-soft);
font-size: 14px;
margin-bottom: 0;
}
@media (max-width: 991px) {
.intro-grid {
grid-template-columns: 1fr 1fr;
}
.intro-card-main {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.intro-grid {
grid-template-columns: 1fr;
}
.intro-card-main {
grid-column: span 1;
padding: 26px;
}
}
/* ================== 栏目展示 ================== */
.channel-section {
background: var(--paper-warm);
padding: 80px 0;
}
.channel-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.channel-row {
position: relative;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
border-radius: 20px;
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
}
.channel-row:first-child {
border-left: 6px solid var(--kw);
}
.channel-row:nth-child(2) {
border-left: 6px solid var(--sun);
}
.channel-row:nth-child(3) {
border-left: 6px solid var(--kw-deep);
}
.channel-row:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.channel-row .ch-body {
padding: 28px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.channel-row .ch-tag {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
background: var(--kw-light);
color: var(--kw-deep);
border-radius: 6px;
padding: 4px 12px;
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
}
.channel-row .ch-title {
font-size: 23px;
font-weight: 800;
margin-bottom: 12px;
}
.channel-row .ch-text {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.8;
margin-bottom: 0;
}
.channel-row .ch-link {
margin-top: 18px;
color: var(--kw-deep);
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.channel-row .ch-link i {
transition: transform 0.2s;
}
.channel-row .ch-link:hover i {
transform: translateX(4px);
}
.channel-row .ch-thumb {
min-height: 180px;
background-size: cover;
background-position: center;
position: relative;
}
.channel-row .ch-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, rgba(31, 74, 42, 0.05), rgba(255, 255, 255, 0.1));
pointer-events: none;
}
@media (max-width: 767px) {
.channel-row {
grid-template-columns: 1fr;
}
.channel-row .ch-thumb {
min-height: 160px;
order: -1;
}
}
/* ================== 流程步骤 ================== */
.steps-panel {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 16px 40px;
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
.steps-panel::before {
content: "";
position: absolute;
top: 60px;
left: 15%;
right: 15%;
border-top: 2px dashed var(--line);
pointer-events: none;
z-index: 0;
}
.step-node {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 12px 24px;
}
.step-num {
width: 58px;
height: 58px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--kw);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
color: var(--kw-deep);
box-shadow: 0 0 0 6px rgba(237, 245, 229, 0.8);
margin-bottom: 18px;
}
.step-num small {
font-size: 11px;
margin-left: 2px;
}
.step-icon {
font-size: 26px;
color: var(--kw);
margin-bottom: 12px;
}
.step-node h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.step-node p {
font-size: 14px;
color: var(--ink-soft);
max-width: 280px;
margin: 0 auto;
line-height: 1.75;
}
@media (max-width: 767px) {
.section {
padding: 60px 0;
}
.channel-section {
padding: 60px 0;
}
.steps-panel {
grid-template-columns: 1fr;
gap: 0;
padding: 10px 22px;
}
.steps-panel::before {
display: none;
}
.step-node {
border-bottom: 1px dashed var(--line);
padding: 28px 8px;
}
.step-node:last-child {
border-bottom: none;
}
}
/* ================== 资讯列表 CMS ================== */
.news-section {
background: var(--paper);
padding: 80px 0;
}
.news-left-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.3s, transform 0.3s;
display: block;
color: inherit;
height: 100%;
position: relative;
}
.news-left-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
color: inherit;
}
.news-cover-wrap {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--kw-light);
position: relative;
}
.news-cover-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
.news-left-card:hover .news-cover-wrap img {
transform: scale(1.04);
}
.news-body {
padding: 22px 26px 26px;
}
.news-body h3 {
font-size: 20px;
font-weight: 700;
margin: 12px 0;
line-height: 1.4;
}
.news-body h3 a {
color: var(--ink);
}
.news-body h3 a:hover {
color: var(--kw-deep);
}
.news-excerpt {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.75;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 16px;
font-size: 13px;
color: #8a968d;
}
.news-list {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 14px 22px;
box-shadow: var(--shadow-sm);
height: 100%;
}
.news-item {
display: flex;
gap: 14px;
padding: 18px 4px;
border-bottom: 1px solid var(--line);
transition: background-color 0.2s;
}
.news-item:last-child {
border-bottom: none;
}
.news-item-img {
width: 92px;
height: 68px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
}
.news-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item-info {
flex: 1;
min-width: 0;
}
.news-item-info .badge {
margin-bottom: 5px;
}
.news-item-info .title {
font-size: 15px;
font-weight: 600;
line-height: 1.45;
margin: 2px 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--ink);
}
.news-item-info .title a {
color: inherit;
}
.news-item-info .title a:hover {
color: var(--kw-deep);
}
.news-item-info .meta {
font-size: 12px;
color: #8a968d;
}
.empty-tip {
padding: 40px 20px;
text-align: center;
color: var(--ink-soft);
background: var(--kw-light);
border-radius: 14px;
font-size: 15px;
grid-column: 1 / -1;
}
/* ================== 数据点 ================== */
.stats-band {
background: var(--kw-dark);
border-radius: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow: hidden;
margin-top: 20px;
}
.stat-cell {
color: #fff;
padding: 38px 24px;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.stat-cell:first-child {
border-left: none;
}
.stat-cell .num {
font-size: 34px;
font-weight: 800;
color: var(--sun);
}
.stat-cell .lbl {
font-size: 14px;
color: rgba(255, 255, 255, 0.64);
margin-top: 6px;
}
@media (max-width: 767px) {
.stats-band {
grid-template-columns: 1fr;
}
.stat-cell {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 28px 14px;
}
.stat-cell:first-child {
border-top: none;
}
}
/* ================== 体验说明 / 案例卡 ================== */
.testimonial-strip {
border-radius: 22px;
border: 1px solid var(--line);
overflow: hidden;
background: #fff;
}
.testimonial-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.t-card {
padding: 40px;
}
.t-card-left {
border-right: 1px solid var(--line);
}
.t-rq {
font-size: 48px;
color: var(--kw);
line-height: 1;
margin-bottom: 14px;
opacity: 0.6;
}
.t-user {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.t-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--kw-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--kw-deep);
font-weight: 800;
font-size: 16px;
}
.t-user-info p {
margin: 0;
font-weight: 700;
font-size: 15px;
}
.t-user-info span {
color: var(--ink-soft);
font-size: 12px;
}
@media (max-width: 767px) {
.testimonial-row {
grid-template-columns: 1fr;
}
.t-card {
padding: 28px;
}
.t-card-left {
border-right: none;
border-bottom: 1px solid var(--line);
}
}
/* ================== FAQ ================== */
.faq-section {
background: var(--paper-warm);
}
.accordion.custom-accordion .accordion-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px !important;
margin-bottom: 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion.custom-accordion .accordion-button {
background: #fff;
color: var(--ink);
font-weight: 600;
font-size: 16px;
padding: 18px 24px;
border-radius: 16px !important;
box-shadow: none;
transition: color 0.2s, background-color 0.2s;
}
.accordion.custom-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235C9E3B' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 0 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
transition: transform 0.3s;
}
.accordion.custom-accordion .accordion-button:not(.collapsed) {
background-color: var(--kw-light);
color: var(--kw-deep);
}
.accordion.custom-accordion .accordion-button:not(.collapsed)::after {
transform: rotate(45deg);
}
.accordion.custom-accordion .accordion-button:focus {
box-shadow: 0 0 0 0.2rem rgba(92, 158, 59, 0.08);
}
.accordion.custom-accordion .accordion-body {
background: var(--kw-light);
color: var(--ink);
padding: 8px 28px 24px;
font-size: 15px;
line-height: 1.8;
}
/* ================== CTA ================== */
.cta-section {
background-color: var(--kw-dark);
position: relative;
overflow: hidden;
padding: 74px 0;
}
.cta-section::before {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 280px;
height: 280px;
background: url('data:image/svg+xml;utf8,');
background-size: 40px 40px;
}
.cta-box-inner {
text-align: center;
position: relative;
z-index: 2;
}
.cta-box-inner h2 {
font-size: 34px;
color: #fff;
font-weight: 800;
margin-bottom: 14px;
}
.cta-box-inner p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
margin-bottom: 28px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.btn-kiwi-light {
background: #fff;
color: var(--kw-dark);
border-radius: var(--radius-pill);
padding: 13px 36px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
border: 2px solid transparent;
transition: all 0.25s;
}
.btn-kiwi-light:hover {
background: var(--kw-light);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.btn-kiwi-ghost {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-pill);
padding: 13px 36px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.25s;
}
.btn-kiwi-ghost:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: #fff;
}
/* ================== 页脚 ================== */
.site-footer {
background: #16241b;
padding: 54px 0 26px;
color: rgba(255, 255, 255, 0.72);
}
.site-footer .footer-brand-name {
color: #fff;
font-size: 20px;
font-weight: 800;
gap: 10px;
display: flex;
align-items: center;
}
.site-footer .footer-desc {
font-size: 14px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.6);
margin-top: 18px;
max-width: 380px;
}
.footer-title {
color: #fff;
font-size: 16px;
font-weight: 700;
margin-bottom: 18px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--sun);
}
.footer-contact p {
margin-bottom: 8px;
font-size: 14px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 40px;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
}
@media (max-width: 767px) {
.site-footer {
padding-top: 40px;
}
.cta-section {
padding: 56px 0;
}
.cta-box-inner h2 {
font-size: 26px;
}
}
/* ================== 部分装饰 ================== */
.bg-dot-pattern {
background-image: url('data:image/svg+xml;utf8,');
background-size: 28px 28px;
}
.img-radius {
border-radius: 18px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* roulang page: article */
:root {
--kiwi: #5C9E3B;
--kiwi-deep: #2C6335;
--kiwi-dark: #1F4A2A;
--kiwi-soft: #EDF5E5;
--kiwi-hover: #4E852F;
--amber: #F3B942;
--amber-deep: #D9952B;
--ink: #27352B;
--muted: #5B6B5E;
--cream: #FAF9F4;
--paper: #F5EFE2;
--line: #E2E7DE;
--line-warm: #E5DCC8;
--shadow-sm: 0 4px 12px rgba(31, 74, 42, 0.05);
--shadow-md: 0 12px 30px rgba(31, 74, 42, 0.08);
--shadow-lg: 0 16px 40px rgba(31, 74, 42, 0.12);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-full: 999px;
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
font-size: 16px;
line-height: 1.75;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--kiwi-deep);
text-decoration: none;
transition: color 0.25s ease;
}
a:hover {
color: var(--kiwi);
}
button,
input,
select,
textarea {
font-family: inherit;
}
.container-wide {
max-width: 1280px;
margin: 0 auto;
padding-left: 32px;
padding-right: 32px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.3;
color: var(--ink);
}
.btn {
border-radius: var(--radius-full);
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.6rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.btn-kiwi {
background: var(--kiwi);
border-color: var(--kiwi);
color: #fff;
height: 44px;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.btn-kiwi:hover {
background: var(--kiwi-deep);
border-color: var(--kiwi-deep);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-kiwi:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.btn-kiwi:focus-visible {
outline: 3px solid rgba(92, 158, 59, 0.35);
outline-offset: 2px;
}
.btn-outline-kiwi {
border: 1.5px solid var(--kiwi-deep);
color: var(--kiwi-deep);
background: transparent;
height: 44px;
}
.btn-outline-kiwi:hover {
background: var(--kiwi-soft);
color: var(--kiwi-dark);
transform: translateY(-2px);
border-color: var(--kiwi);
}
.icon-btn {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: #EDF1E9;
color: var(--kiwi-dark);
border: 1px solid transparent;
font-size: 1.05rem;
transition: 0.25s ease;
}
.icon-btn:hover {
background: var(--kiwi-soft);
border-color: var(--kiwi);
color: var(--kiwi-deep);
transform: translateY(-1px);
}
.site-header {
position: sticky;
top: 0;
z-index: 1040;
background: rgba(250, 249, 244, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(226, 231, 222, 0.9);
}
.custom-nav {
min-height: 72px;
padding-top: 0;
padding-bottom: 0;
flex-wrap: wrap;
}
.brand-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
margin-right: 12px;
}
.kiwi-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-full);
background: var(--kiwi-soft);
box-shadow: inset 0 0 0 1px rgba(92, 158, 59, 0.25);
}
.kiwi-brand-mark svg {
width: 30px;
height: 30px;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.brand-text strong {
font-size: 18px;
font-weight: 800;
color: var(--kiwi-dark);
letter-spacing: 0.02em;
}
.brand-text span {
font-size: 11px;
color: var(--kiwi-deep);
font-weight: 600;
letter-spacing: 0.18em;
}
.navbar-nav {
gap: 4px;
}
.nav-link {
color: #3C4A40;
font-size: 15px;
font-weight: 600;
padding: 8px 14px;
border-radius: var(--radius-full);
position: relative;
white-space: nowrap;
}
.nav-link:hover {
color: var(--kiwi-dark);
background: var(--kiwi-soft);
}
.nav-link.active {
color: var(--kiwi-dark);
}
.nav-link.active::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
width: 18px;
height: 3px;
border-radius: var(--radius-full);
background: var(--kiwi);
}
.nav-search-wrap {
display: flex;
align-items: center;
margin-right: 12px;
}
.nav-search {
width: 250px;
height: 38px;
border-radius: var(--radius-full);
background: #EDF1E9;
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px 0 12px;
transition: width 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
border: 1px solid transparent;
}
.nav-search .icon {
color: #6F7E70;
font-size: 0.86rem;
display: inline-flex;
}
.nav-search input {
border: 0;
background: transparent;
outline: none;
font-size: 13px;
color: var(--ink);
width: 100%;
min-width: 0;
}
.nav-search input::placeholder {
color: #8B978A;
font-size: 13px;
}
.nav-search .kbd {
font-size: 11px;
color: #7B8876;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
padding: 2px 6px;
white-space: nowrap;
line-height: 1.4;
}
.nav-search:focus-within {
width: 290px;
background: #fff;
border-color: var(--kiwi);
box-shadow: 0 0 0 3px rgba(92, 158, 59, 0.12), var(--shadow-sm);
}
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}
.custom-toggler {
border: 1px solid var(--line);
border-radius: 12px;
width: 44px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--kiwi-dark);
background: #fff;
font-size: 1.3rem;
padding: 0;
}
.custom-toggler:focus {
box-shadow: 0 0 0 0.25rem rgba(92, 158, 59, 0.2);
}
.article-mast {
position: relative;
background:
radial-gradient(circle at 1px 1px, rgba(92, 158, 59, 0.10) 1.2px, transparent 1.6px),
linear-gradient(180deg, #F1EEDF 0%, var(--cream) 100%);
background-size: 24px 24px, auto;
border-bottom: 1px solid var(--line-warm);
padding: 32px 0 0;
}
.breadcrumb-strip {
padding: 8px 0 0;
}
.breadcrumb-list {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
font-size: 13.5px;
color: var(--muted);
padding-bottom: 26px;
margin-bottom: 0;
}
.breadcrumb-list li {
display: inline-flex;
align-items: center;
}
.breadcrumb-list li+li::before {
content: " / ";
color: #A6B0A4;
margin: 0 8px;
}
.breadcrumb-list a {
color: var(--muted);
transition: color 0.2s ease;
}
.breadcrumb-list a:hover {
color: var(--kiwi-deep);
}
.breadcrumb-list .current {
color: var(--kiwi-dark);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 280px;
}
.article-section {
padding: 48px 0 80px;
}
.article-shell {
max-width: 980px;
margin: 0 auto;
}
.article-card {
background: #FFFCF5;
border: 1px solid var(--line-warm);
border-radius: var(--radius-lg);
padding: clamp(28px, 5vw, 52px);
box-shadow: var(--shadow-md);
position: relative;
}
.article-card::before {
content: "";
position: absolute;
left: 28px;
right: 28px;
top: 0;
height: 4px;
border-radius: 0 0 12px 12px;
background: linear-gradient(90deg, var(--kiwi), var(--amber), transparent);
opacity: 0.65;
}
.article-eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.cat-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--kiwi-soft);
border: 1px solid rgba(92, 158, 59, 0.18);
color: var(--kiwi-deep);
font-size: 13px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--radius-full);
}
.cat-badge i {
font-size: 0.88rem;
}
.metadata-source {
font-size: 13px;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-title {
font-size: clamp(1.55rem, 3vw, 2.35rem);
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 18px;
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
font-size: 13.5px;
color: var(--muted);
padding-bottom: 22px;
border-bottom: 1px dashed #DCD2BD;
margin-bottom: 28px;
}
.article-meta-item {
display: inline-flex;
align-items: center;
gap: 7px;
}
.article-meta-item i {
font-size: 0.95rem;
color: var(--kiwi);
}
.author-mini {
display: inline-flex;
align-items: center;
gap: 8px;
}
.author-mini .avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--kiwi-soft);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--kiwi-deep);
font-size: 0.72rem;
font-weight: 700;
border: 1px solid rgba(92, 158, 59, 0.2);
}
.article-content {
font-size: 16.5px;
line-height: 1.95;
color: #2C3A30;
word-break: break-word;
}
.article-content p {
margin: 0 0 1.55em;
}
.article-content a {
color: var(--kiwi-deep);
border-bottom: 1px solid rgba(92, 158, 59, 0.3);
text-decoration: none;
}
.article-content a:hover {
color: var(--kiwi);
border-bottom-color: var(--kiwi);
}
.article-content h2 {
font-size: 1.5rem;
font-weight: 800;
margin: 2em 0 0.85em;
padding-left: 15px;
position: relative;
line-height: 1.4;
}
.article-content h2::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.12em;
width: 4px;
border-radius: var(--radius-full);
background: linear-gradient(180deg, var(--kiwi), var(--kiwi-deep));
}
.article-content h3 {
font-size: 1.22rem;
font-weight: 700;
margin: 1.6em 0 0.7em;
color: var(--kiwi-dark);
}
.article-content h4 {
font-size: 1.05rem;
font-weight: 700;
margin: 1.5em 0 0.6em;
}
.article-content ul,
.article-content ol {
margin: 0 0 1.6em;
padding-left: 1.5em;
}
.article-content li {
margin-bottom: 0.5em;
line-height: 1.8;
}
.article-content ul li::marker {
color: var(--kiwi);
}
.article-content blockquote {
margin: 2em 0;
padding: 20px 24px 20px 26px;
background: #F6F1E4;
border-left: 4px solid var(--kiwi);
border-radius: 0 16px 16px 0;
color: #48564A;
font-size: 0.98em;
}
.article-content blockquote p:last-child {
margin-bottom: 0;
}
.article-content img {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin: 1.4em 0;
border: 1px solid rgba(226, 231, 222, 0.7);
}
.article-content figure {
margin: 1.8em 0;
}
.article-content figure figcaption {
font-size: 13px;
color: var(--muted);
text-align: center;
margin-top: -0.6em;
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 1.8em 0;
font-size: 0.94em;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-sm);
}
.article-content th {
background: var(--kiwi-soft);
color: var(--kiwi-dark);
font-weight: 700;
padding: 12px 14px;
text-align: left;
}
.article-content td {
padding: 11px 14px;
border-bottom: 1px solid var(--line);
}
.article-content iframe,
.article-content video,
.article-content embed {
margin: 1.6em 0;
border-radius: var(--radius-md);
max-width: 100%;
border: 0;
}
.article-content code {
background: #F1EDDF;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.92em;
color: var(--kiwi-deep);
}
.article-divider {
border: 0;
border-top: 1px dashed #DCD2BD;
margin: 32px 0 26px;
}
.article-tags-area {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.tag-label {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-cloud a {
display: inline-block;
background: var(--kiwi-soft);
border: 1px solid rgba(92, 158, 59, 0.16);
color: var(--kiwi-deep);
font-size: 13px;
padding: 4px 12px;
border-radius: var(--radius-full);
transition: 0.25s ease;
}
.tag-cloud a:hover {
background: var(--kiwi);
border-color: var(--kiwi);
color: #fff;
transform: translateY(-1px);
}
.article-bottom-links {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
border-top: 1px dashed var(--line-warm);
padding-top: 24px;
}
.pager-block {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.pager-item {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--line);
color: var(--muted);
border-radius: var(--radius-full);
padding: 8px 14px;
font-size: 13px;
transition: 0.25s ease;
}
.pager-item:hover {
color: var(--kiwi-dark);
border-color: var(--kiwi);
background: var(--kiwi-soft);
}
.after-article-panel {
margin-top: 40px;
background: var(--kiwi-dark);
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 1.96px);
background-size: 22px 22px;
border-radius: var(--radius-lg);
padding: 34px 40px;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.after-article-panel h2 {
color: #fff;
font-size: 1.4rem;
margin-bottom: 8px;
}
.after-article-panel p {
color: rgba(255, 255, 255, 0.72);
font-size: 14.5px;
margin: 0;
max-width: 520px;
}
.after-article-panel .btn {
background: #fff;
border-color: #fff;
color: var(--kiwi-dark);
white-space: nowrap;
height: 46px;
padding-left: 1.8rem;
padding-right: 1.8rem;
}
.after-article-panel .btn:hover {
background: var(--amber);
border-color: var(--amber);
color: var(--kiwi-dark);
}
.recommend-section {
padding: 16px 0 70px;
}
.section-heading-main {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 26px;
gap: 20px;
}
.section-title-wrap {
display: flex;
flex-direction: column;
gap: 4px;
}
.section-kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--kiwi);
text-transform: uppercase;
}
.section-title {
font-size: 1.7rem;
font-weight: 800;
color: var(--ink);
}
.section-link-more {
font-size: 14px;
font-weight: 600;
color: var(--kiwi-deep);
border-bottom: 1px solid rgba(92, 158, 59, 0.3);
}
.related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.rel-card {
background: #FFFDF8;
border: 1px solid var(--line-warm);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
transition: 0.3s ease;
box-shadow: var(--shadow-sm);
}
.rel-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(92, 158, 59, 0.5);
}
.rel-thumb {
width: 32%;
min-width: 110px;
background: var(--kiwi-soft);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rel-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rel-card:hover .rel-thumb img {
transform: scale(1.04);
}
.rel-body {
padding: 18px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.rel-cat {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--kiwi-soft);
color: var(--kiwi-deep);
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-full);
align-self: flex-start;
}
.rel-body h3 {
font-size: 15.5px;
line-height: 1.6;
font-weight: 700;
color: var(--ink);
margin: 0;
}
.rel-body p {
font-size: 13px;
color: var(--muted);
margin: 0;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rel-date {
font-size: 12px;
color: #8B978A;
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
.content-missing {
background: #FFFDF8;
border: 1px solid var(--line-warm);
border-radius: var(--radius-lg);
padding: 80px 40px;
text-align: center;
box-shadow: var(--shadow-sm);
}
.content-missing .missing-icon {
width: 72px;
height: 72px;
margin: 0 auto 20px;
background: var(--kiwi-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--kiwi);
font-size: 2rem;
}
.content-missing h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.content-missing p {
color: var(--muted);
margin-bottom: 24px;
}
.site-footer {
background: var(--kiwi-dark);
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 1.8px);
background-size: 20px 20px;
color: rgba(255, 255, 255, 0.7);
padding: 64px 0 0;
margin-top: auto;
}
.footer-brand-name {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 800;
color: #fff;
letter-spacing: 0.02em;
}
.footer-desc {
margin-top: 16px;
font-size: 14px;
line-height: 1.9;
color: rgba(255, 255, 255, 0.6);
max-width: 340px;
}
.footer-title {
color: #fff;
font-size: 15px;
font-weight: 700;
margin-bottom: 18px;
position: relative;
padding-bottom: 10px;
}
.footer-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 22px;
background: var(--amber);
border-radius: 2px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
transition: 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer-links a:hover {
color: var(--amber);
transform: translateX(3px);
}
.footer-bottom {
margin-top: 48px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding: 20px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
gap: 8px;
}
@media (max-width: 1199.98px) {
.nav-search {
width: 210px;
}
.nav-search:focus-within {
width: 240px;
}
.nav-actions .icon-btn:not(:first-child) {
display: none;
}
}
@media (max-width: 991.98px) {
.container-wide {
padding-left: 20px;
padding-right: 20px;
}
.navbar-collapse {
background: var(--cream);
border-radius: 0 0 18px 18px;
padding: 14px 6px 20px;
border-bottom: 1px solid var(--line);
margin-top: 4px;
}
.navbar-nav {
gap: 0;
margin: 0 0 12px;
}
.nav-link {
padding: 10px 12px;
font-size: 15px;
border-radius: 10px;
}
.nav-link.active::after {
display: none;
}
.nav-search-wrap {
margin: 0 0 12px;
}
.nav-search,
.nav-search:focus-within {
width: 100%;
background: #fff;
border: 1px solid var(--line);
}
.nav-actions {
display: flex;
justify-content: stretch;
gap: 10px;
width: 100%;
}
.nav-actions .icon-btn:first-child {
display: inline-flex;
}
.nav-actions .btn-kiwi {
flex: 1;
}
.article-mast {
padding-top: 20px;
}
.article-section {
padding-bottom: 56px;
}
.article-bottom-links {
flex-direction: column;
align-items: flex-start;
}
.after-article-panel {
padding: 28px 24px;
}
.related-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
body {
font-size: 15px;
}
.container-wide {
padding-left: 16px;
padding-right: 16px;
}
.custom-nav {
min-height: 64px;
}
.brand-logo {
gap: 6px;
}
.kiwi-brand-mark {
width: 36px;
height: 36px;
}
.brand-text strong {
font-size: 16px;
}
.brand-text span {
font-size: 10px;
}
.article-section {
padding: 28px 0 48px;
}
.article-card {
padding: 24px 20px;
border-radius: 18px;
}
.article-title {
font-size: 1.45rem;
line-height: 1.45;
}
.article-meta {
gap: 10px 16px;
font-size: 12.5px;
}
.article-content {
font-size: 15.5px;
line-height: 1.9;
}
.article-content h2 {
font-size: 1.3rem;
}
.breadcrumb-list .current {
max-width: 150px;
}
.after-article-panel {
flex-direction: column;
align-items: flex-start;
padding: 24px 20px;
}
.after-article-panel h2 {
font-size: 1.2rem;
}
.section-title {
font-size: 1.45rem;
}
.related-grid {
grid-template-columns: 1fr;
}
.rel-card {
flex-direction: column;
}
.rel-thumb {
width: 100%;
height: 140px;
min-width: 0;
}
.rel-thumb img {
width: 100%;
height: 100%;
}
.footer-link-column {
width: 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
/* roulang page: category1 */
:root {
--kiwi: #5C9E3B;
--kiwi-strong: #6FAE44;
--kiwi-deep: #1F4A2A;
--kiwi-dark-2: #2C6335;
--kiwi-soft: #EDF5E5;
--kiwi-soft-2: #E4F1DA;
--kiwi-warm: #F3B942;
--page-bg: #FAF9F4;
--text-main: #27352B;
--text-sub: #5B6B5E;
--line: #E2E7DE;
--radius-lg: 20px;
--radius-md: 16px;
--shadow-soft: 0 12px 30px rgba(31, 74, 42, 0.06);
--shadow-hover: 0 16px 36px rgba(31, 74, 42, 0.12);
--font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
background: var(--page-bg);
color: var(--text-main);
font-size: 16px;
line-height: 1.75;
margin: 0;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-main);
line-height: 1.3;
font-weight: 700;
}
p {
margin-bottom: 1.2em;
}
a {
color: var(--kiwi-deep);
text-decoration: none;
transition: color .2s ease;
}
a:hover {
color: var(--kiwi-deep);
text-decoration: none;
}
img {
max-width: 100%;
}
.container-wide {
max-width: 1240px;
padding-left: 24px;
padding-right: 24px;
margin-left: auto;
margin-right: auto;
}
.section-space {
padding-top: 72px;
padding-bottom: 72px;
}
.site-header {
position: sticky;
top: 0;
z-index: 1040;
background: rgba(250, 249, 244, 0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.custom-nav {
min-height: 76px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
padding: 6px 0;
}
.kiwi-brand-mark {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.brand-text {
display: inline-flex;
flex-direction: column;
line-height: 1.15;
gap: 1px;
}
.brand-text strong {
font-size: 18px;
font-weight: 800;
color: var(--kiwi-deep);
letter-spacing: .02em;
}
.brand-text span {
font-size: 12px;
color: var(--text-sub);
letter-spacing: .08em;
font-weight: 500;
}
.custom-toggler {
border: 1px solid var(--line);
background: #fff;
width: 44px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--kiwi-deep);
font-size: 20px;
margin-left: auto;
}
.custom-toggler:hover {
background: var(--kiwi-soft);
}
.navbar-collapse {
align-items: center;
}
.custom-nav .navbar-nav {
gap: 4px;
}
.custom-nav .nav-link {
font-size: 15px;
color: var(--text-main);
font-weight: 500;
padding: 10px 15px;
border-radius: 999px;
position: relative;
transition: color .2s ease, background .2s ease;
}
.custom-nav .nav-link:hover {
color: var(--kiwi-deep);
background: var(--kiwi-soft);
}
.custom-nav .nav-link.active {
color: var(--kiwi-deep);
font-weight: 600;
background: rgba(237, 245, 229, 0.6);
}
.custom-nav .nav-link.active::after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 2px;
border-radius: 999px;
background: var(--kiwi);
}
.nav-search-wrap,
.nav-search-mobile {
display: flex;
align-items: center;
background: #EDF1E9;
border-radius: 999px;
padding: 0 12px;
height: 38px;
transition: border .2s ease, box-shadow .2s ease, width .2s ease;
}
.nav-search-wrap {
width: 240px;
margin-right: 6px;
}
.nav-search-wrap:focus-within {
width: 280px;
border-color: var(--kiwi);
box-shadow: 0 0 0 3px rgba(92, 158, 59, 0.16);
}
.nav-search-mobile {
width: 100%;
margin: 12px 0 6px;
}
.nav-search {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.nav-search .icon {
color: var(--text-sub);
font-size: 14px;
}
.nav-search input {
border: 0;
background: transparent;
outline: none;
flex: 1;
min-width: 0;
color: var(--text-main);
font-size: 13px;
padding: 0;
}
.nav-search input::placeholder {
color: #93A296;
}
.nav-search .kbd {
font-size: 11px;
color: #677A6B;
background: rgba(255, 255, 255, 0.7);
padding: 2px 7px;
border-radius: 6px;
line-height: 1.4;
white-space: nowrap;
}
.navbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-kiwi,
.btn-outline-kiwi,
.btn-white-kiwi {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
line-height: 1;
padding: 12px 22px;
transition: all .25s ease;
border: 0;
}
.btn-kiwi {
background: var(--kiwi);
color: #fff;
}
.btn-kiwi:hover {
background: var(--kiwi-dark-2);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(44, 99, 53, 0.16);
}
.btn-outline-kiwi {
background: transparent;
color: var(--kiwi-deep);
border: 1.5px solid var(--kiwi-deep);
}
.btn-outline-kiwi:hover {
background: var(--kiwi-soft);
color: var(--kiwi-deep);
}
.btn-white-kiwi {
background: #fff;
color: var(--kiwi-deep);
}
.btn-white-kiwi:hover {
background: var(--kiwi-soft);
color: var(--kiwi-deep);
transform: translateY(-1px);
}
.navbar-actions .btn-kiwi {
padding: 10px 18px;
font-size: 13px;
}
.category-hero {
background:
radial-gradient(circle at 82% 18%, rgba(243, 185, 66, 0.09) 0, transparent 26%),
linear-gradient(135deg, rgba(237, 245, 229, 0.97) 0%, rgba(250, 249, 244, 0.96) 100%),
url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
border-bottom: 1px solid var(--line);
padding: 52px 0 58px;
}
.breadcrumb-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-sub);
margin-bottom: 28px;
}
.breadcrumb-nav a {
color: var(--text-sub);
}
.breadcrumb-nav a:hover {
color: var(--kiwi-deep);
}
.breadcrumb-nav .sep {
color: #A8B5AA;
}
.category-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 46px;
align-items: center;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(92, 158, 59, 0.24);
color: var(--kiwi-dark-2);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
.hero-kicker i {
font-size: 14px;
}
.category-hero h1 {
font-size: clamp(30px, 3.1vw, 44px);
font-weight: 800;
color: var(--kiwi-deep);
letter-spacing: .02em;
margin-bottom: 16px;
}
.category-hero h1 span {
color: var(--kiwi);
font-weight: 700;
}
.hero-desc {
color: #516457;
font-size: 16px;
margin-bottom: 22px;
max-width: 640px;
}
.hero-meta-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
.hero-meta-list span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-sub);
background: rgba(255, 255, 255, 0.7);
border-radius: 999px;
padding: 5px 12px;
border: 1px solid var(--line);
}
.hero-meta-list i {
color: var(--kiwi);
}
.hero-action {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-status-card {
background: #fff;
border: 1px solid rgba(92, 158, 59, 0.18);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: 24px;
position: relative;
overflow: hidden;
}
.hero-status-card::after {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(237, 245, 229, 0.7) 0%, rgba(237, 245, 229, 0) 70%);
}
.status-head {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--line);
padding-bottom: 16px;
margin-bottom: 16px;
}
.status-icon {
width: 42px;
height: 42px;
background: var(--kiwi-soft);
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--kiwi-deep);
font-size: 20px;
}
.status-head strong {
font-size: 16px;
color: var(--kiwi-deep);
}
.status-head small {
display: block;
color: var(--text-sub);
font-size: 13px;
font-weight: 400;
}
.status-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
color: var(--text-sub);
border-bottom: 1px dashed var(--line);
}
.status-line:last-child {
border-bottom: 0;
}
.status-line b {
color: var(--text-main);
font-weight: 600;
text-align: right;
}
.status-tag {
color: var(--kiwi-deep) !important;
font-weight: 600;
}
.channel-ticker {
background: var(--kiwi-deep);
color: #d5f1ca;
padding: 16px 0;
}
.ticker-inner {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-size: 14px;
}
.ticker-inner i {
color: var(--kiwi-warm);
margin-right: 6px;
}
.feed-area {
background: var(--page-bg);
}
.feed-eyebrow {
color: var(--kiwi);
font-weight: 700;
letter-spacing: .12em;
font-size: 13px;
margin-bottom: 8px;
text-transform: uppercase;
}
.feed-main-title {
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 800;
margin-bottom: 8px;
}
.feed-sub-text {
color: var(--text-sub);
max-width: 74%;
margin-bottom: 30px;
}
.feed-cards-wrap {
display: flex;
flex-direction: column;
gap: 18px;
}
.feed-feature {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: box-shadow .3s ease, transform .3s ease;
}
.feed-feature:hover {
transform: translateY(-2px);
border-color: rgba(92, 158, 59, 0.36);
box-shadow: var(--shadow-hover);
}
.feed-media {
min-height: 240px;
background: var(--kiwi-soft-2);
}
.feed-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-content {
padding: 26px 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tag-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.badge-kiwi {
display: inline-flex;
align-items: center;
background: var(--kiwi-soft);
color: var(--kiwi-deep);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border: 1px solid rgba(92, 158, 59, 0.16);
}
.badge-warm {
background: #FBEFDA;
color: #7B5B1F;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.feature-title {
font-size: 22px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
color: var(--text-main);
}
.feature-title a {
color: inherit;
}
.feature-title a:hover {
color: var(--kiwi-deep);
}
.feature-desc {
color: var(--text-sub);
font-size: 14px;
margin-bottom: 18px;
}
.item-meta {
display: flex;
align-items: center;
gap: 10px;
color: #849387;
font-size: 13px;
flex-wrap: wrap;
}
.item-meta i {
color: var(--kiwi);
}
.topic-line {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 20px 22px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: background .25s ease, border .25s ease, box-shadow .25s ease, transform .25s ease;
}
.topic-line:hover {
border-color: rgba(92, 158, 59, 0.3);
background: #FDFFFB;
transform: translateX(4px);
box-shadow: var(--shadow-soft);
}
.topic-index {
font-size: 15px;
font-weight: 800;
color: var(--kiwi);
background: var(--kiwi-soft);
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.topic-main {
flex: 1;
min-width: 0;
}
.topic-title {
font-size: 16px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 4px;
}
.topic-title a {
color: inherit;
}
.topic-title a:hover {
color: var(--kiwi-deep);
}
.topic-desc {
color: var(--text-sub);
font-size: 14px;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.topic-foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.topic-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.topic-tag {
background: #F4F2EA;
border-radius: 999px;
color: var(--text-sub);
font-size: 12px;
padding: 2px 10px;
}
.topic-read {
color: var(--kiwi-dark-2);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.topic-read i {
margin-left: 4px;
transition: transform .2s ease;
}
.topic-line:hover .topic-read i {
transform: translateX(3px);
}
.sidebar-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.side-panel {
background: #fff;
border-radius: 20px;
border: 1px solid var(--line);
padding: 24px;
box-shadow: var(--shadow-soft);
}
.side-panel-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
}
.side-panel-title i {
color: var(--kiwi);
font-size: 18px;
}
.side-desc {
color: var(--text-sub);
font-size: 14px;
margin-bottom: 16px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-link {
display: inline-flex;
background: var(--kiwi-soft);
color: var(--kiwi-deep);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
transition: background .2s ease, border .2s ease;
}
.chip-link:hover {
background: #fff;
border-color: var(--kiwi);
color: var(--kiwi-deep);
}
.status-card-icon {
background: var(--kiwi-soft);
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--kiwi-deep);
font-size: 18px;
width: 40px;
height: 40px;
margin-bottom: 14px;
}
.quick-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
color: var(--text-main);
font-size: 14px;
}
.quick-nav-link:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.quick-nav-link:hover {
color: var(--kiwi-deep);
}
.quick-nav-link span {
display: inline-flex;
align-items: center;
gap: 10px;
}
.quick-nav-link i {
color: var(--kiwi);
}
.quote-band {
background: var(--kiwi-soft-2);
border-block: 1px solid rgba(92, 158, 59, 0.16);
}
.quote-band-inner {
padding: 46px 0;
position: relative;
}
.quote-mark {
font-size: 30px;
color: var(--kiwi);
margin-bottom: 12px;
line-height: 1;
}
.quote-article {
max-width: 880px;
}
.quote-article p {
font-size: 18px;
color: var(--kiwi-dark-2);
font-weight: 500;
line-height: 1.9;
margin-bottom: 0;
}
.quote-article :is(strong) {
color: var(--kiwi-deep);
}
.quote-summary-grid {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.quote-summary-grid span {
background: #FDFDFB;
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
color: var(--text-sub);
}
.faq-wrap {
background: var(--page-bg);
}
.faq-heading {
max-width: 720px;
margin-bottom: 34px;
}
details.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 0;
margin-bottom: 14px;
overflow: hidden;
transition: border .2s ease, background .2s ease;
}
details.faq-item[open] {
border-color: rgba(92, 158, 59, 0.35);
background: #FBFEF9;
}
details.faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-weight: 600;
color: var(--text-main);
font-size: 16px;
}
details.faq-item summary::-webkit-details-marker {
display: none;
}
details.faq-item summary:hover {
color: var(--kiwi-deep);
}
.faq-toggle {
color: var(--kiwi);
font-size: 20px;
transition: transform .25s ease;
flex: 0 0 20px;
}
details.faq-item[open] .faq-toggle {
transform: rotate(45deg);
}
.faq-body {
padding: 0 22px 20px 22px;
color: var(--text-sub);
font-size: 15px;
}
.quick-access {
position: relative;
background: var(--kiwi-deep);
color: #EAF4E5;
overflow: hidden;
padding: 58px 0;
}
.quick-access::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1px);
background-size: 28px 28px;
opacity: .22;
pointer-events: none;
}
.quick-access-inner {
position: relative;
z-index: 1;
max-width: 860px;
margin: auto;
text-align: center;
}
.quick-access h2 {
color: #fff;
font-size: 30px;
font-weight: 800;
margin-bottom: 14px;
}
.quick-access p {
color: #C7E0BF;
margin-bottom: 26px;
}
.quick-access-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.site-footer {
background: var(--kiwi-deep);
color: rgba(255,255,255,.82);
padding-top: 60px;
padding-bottom: 30px;
}
.site-footer .container-wide .row {
margin-bottom: 34px;
}
.footer-brand-name {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
color: #fff;
font-weight: 700;
margin-bottom: 14px;
}
.footer-desc {
color: rgba(255,255,255,.7);
font-size: 14px;
margin-bottom: 14px;
}
.footer-title {
color: #F1FCEA;
font-size: 14px;
font-weight: 600;
margin-bottom: 14px;
letter-spacing: .04em;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links li {
font-size: 14px;
}
.footer-links a {
color: rgba(255,255,255,.72);
transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover {
color: #fff;
padding-left: 3px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.14);
padding-top: 24px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: rgba(255,255,255,.65);
font-size: 13px;
}
@media (max-width: 991.98px) {
.custom-nav {
padding-top: 10px;
padding-bottom: 10px;
}
.custom-nav .navbar-toggler {
order: 3;
}
.custom-nav .brand-logo {
order: 1;
}
.custom-nav .navbar-collapse {
order: 4;
width: 100%;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 16px 14px;
margin-top: 12px;
box-shadow: var(--shadow-soft);
}
.custom-nav .navbar-nav {
width: 100%;
margin-bottom: 6px;
}
.custom-nav .nav-link {
border-radius: 12px;
padding: 11px 14px;
}
.category-hero-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.category-hero {
padding: 42px 0 48px;
}
.feed-sub-text {
max-width: 100%;
}
.feed-feature {
grid-template-columns: 1fr;
}
.feed-media {
min-height: 210px;
}
.feed-content {
padding: 24px;
}
.container-wide {
padding-left: 20px;
padding-right: 20px;
}
.section-space {
padding-top: 60px;
padding-bottom: 60px;
}
.nav-search-wrap {
display: none !important;
}
.navbar-actions {
display: none !important;
}
}
@media (max-width: 767.98px) {
.hero-status-card {
padding: 20px;
}
.quick-access-actions .btn {
width: 100%;
}
}
@media (max-width: 575.98px) {
.category-hero h1 {
font-size: 28px;
}
.feature-title {
font-size: 19px;
}
.topic-line {
padding: 16px;
gap: 12px;
}
.topic-index {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 13px;
}
.topic-title {
font-size: 15px;
}
.topic-desc {
font-size: 13px;
}
.side-panel {
padding: 20px;
}
.footer-bottom {
flex-direction: column;
gap: 8px;
}
.feed-content {
padding: 18px;
}
.status-line {
font-size: 13px;
}
}
/* roulang page: category2 */
:root {
--kiwi: #5C9E3B;
--kiwi-dark: #2C6335;
--kiwi-deep: #1F4A2A;
--kiwi-pale: #EDF5E5;
--kiwi-pale-2: #E4F1DA;
--sun: #F3B942;
--bg: #FAF9F4;
--text: #27352B;
--text-soft: #5B6B5E;
--line: #E2E7DE;
--radius: 20px;
--radius-sm: 14px;
--shadow: 0 12px 30px rgba(31, 74, 42, 0.06);
--shadow-hover: 0 16px 36px rgba(31, 74, 42, 0.12);
--transition: all .28s ease;
--header-h: 72px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", "sans-serif";
font-size: 16px;
line-height: 1.75;
background: var(--bg);
color: var(--text);
margin: 0;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
vertical-align: middle;
}
a {
color: var(--kiwi-deep);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--kiwi);
}
button,
input {
font-family: inherit;
}
.container-wide {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
.section-pad {
padding: 88px 0;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--kiwi-pale);
color: var(--kiwi-deep);
border: 1px solid rgba(92, 158, 59, .22);
font-size: 14px;
font-weight: 600;
border-radius: 999px;
padding: 6px 18px;
margin-bottom: 16px;
}
.section-title {
font-size: 34px;
line-height: 1.25;
font-weight: 800;
color: var(--kiwi-deep);
margin: 0 0 12px;
letter-spacing: -.01em;
}
.section-sub {
font-size: 16px;
line-height: 1.75;
color: var(--text-soft);
max-width: 690px;
}
/* ===== Buttons ===== */
.btn {
border-radius: 999px;
font-weight: 700;
padding: .66rem 1.5rem;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-width: 1.5px;
transition: var(--transition);
}
.btn-kiwi {
background: var(--kiwi);
border-color: var(--kiwi);
color: #fff;
}
.btn-kiwi:hover,
.btn-kiwi:focus {
background: var(--kiwi-dark);
border-color: var(--kiwi-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(44, 99, 53, .22);
}
.btn-lg {
padding: .9rem 2.1rem;
font-size: 16px;
}
.btn-outline-kiwi {
background: transparent;
border-color: var(--kiwi-dark);
color: var(--kiwi-deep);
}
.btn-outline-kiwi:hover {
background: var(--kiwi-pale);
border-color: var(--kiwi-dark);
color: var(--kiwi-deep);
transform: translateY(-2px);
}
.btn-white {
background: #fff;
border-color: #fff;
color: var(--kiwi-deep);
}
.btn-white:hover {
background: var(--kiwi-pale);
border-color: var(--kiwi-pale);
color: var(--kiwi-deep);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}
.btn-outline-white {
background: transparent;
border-color: rgba(255, 255, 255, .7);
color: #fff;
}
.btn-outline-white:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
transform: translateY(-2px);
}
.btn-text-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--kiwi-dark);
font-weight: 700;
padding: 0;
border: 0;
background: transparent;
}
.btn-text-link:hover {
color: var(--kiwi);
gap: 11px;
}
/* ===== Header + Nav shared ===== */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(250, 249, 244, .93);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.site-header .container-wide {
max-width: 1320px;
}
.custom-nav {
min-height: var(--header-h);
padding-top: 0;
padding-bottom: 0;
}
.brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
margin-right: 32px;
line-height: 1.1;
}
.kiwi-brand-mark {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--kiwi-pale-2);
box-shadow: 0 0 0 4px rgba(92, 158, 59, .08);
}
.brand-text {
display: inline-flex;
flex-direction: column;
gap: 0;
}
.brand-text strong {
font-size: 17px;
color: var(--kiwi-deep);
font-weight: 800;
letter-spacing: .01em;
}
.brand-text span {
font-size: 11px;
color: var(--kiwi-dark);
font-weight: 600;
letter-spacing: .12em;
}
.custom-nav .navbar-nav {
gap: 4px;
}
.custom-nav .nav-link {
font-size: 15px;
font-weight: 600;
color: var(--text);
padding: .7rem 1.1rem !important;
border-radius: 999px;
white-space: nowrap;
position: relative;
}
.custom-nav .nav-link:hover {
color: var(--kiwi-dark);
background: var(--kiwi-pale);
}
.custom-nav .nav-link.active {
color: var(--kiwi-deep);
font-weight: 700;
}
.custom-nav .nav-link.active::after {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
width: 18px;
height: 3px;
margin-left: -9px;
border-radius: 99px;
background: var(--kiwi);
}
.nav-search-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.nav-search {
width: 250px;
height: 40px;
display: flex;
align-items: center;
gap: 8px;
background: #EDF1E9;
border: 1.5px solid transparent;
border-radius: 999px;
padding: 0 12px;
transition: var(--transition);
flex-shrink: 0;
}
.nav-search:focus-within {
border-color: var(--kiwi);
width: 270px;
background: #fff;
box-shadow: 0 0 0 4px rgba(92, 158, 59, .1);
}
.nav-search .icon {
color: var(--text-soft);
font-size: 15px;
display: inline-flex;
}
.nav-search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-size: 13px;
color: var(--text);
outline: 0;
}
.nav-search input::placeholder {
color: #7B887B;
}
.nav-search .kbd {
font-size: 11px;
color: #8A958B;
border: 1px solid #D6DDD2;
border-radius: 6px;
padding: 1px 5px;
background: #fff;
line-height: 1.4;
white-space: nowrap;
}
.icon-action-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
color: var(--text-soft);
border: 1px solid transparent;
font-size: 17px;
}
.icon-action-btn:hover {
background: var(--kiwi-pale);
color: var(--kiwi-dark);
border-color: var(--line);
}
.custom-toggler {
border: 0;
font-size: 26px;
color: var(--kiwi-deep);
outline: none;
padding: 4px 8px;
}
.custom-toggler:focus {
box-shadow: none;
}
.mobile-nav-tools {
padding: 18px 0 6px;
border-top: 1px solid var(--line);
margin-top: 10px;
}
.nav-search-mobile {
width: 100%;
}
/* ===== Footer shared ===== */
.site-footer {
background: var(--kiwi-deep);
color: #F0F3EC;
padding: 64px 0 26px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
width: 480px;
height: 480px;
right: -160px;
top: -220px;
background: radial-gradient(circle, rgba(92, 158, 59, .20), transparent 70%);
pointer-events: none;
}
.site-footer .container-wide {
position: relative;
z-index: 1;
}
.footer-brand-name {
display: flex;
align-items: center;
gap: 10px;
font-size: 19px;
font-weight: 800;
color: #fff;
}
.footer-desc {
font-size: 14px;
line-height: 1.8;
color: rgba(240, 243, 236, .65);
margin-top: 16px;
max-width: 340px;
padding-right: 6px;
}
.footer-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 16px;
letter-spacing: .06em;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: rgba(240, 243, 236, .68);
font-size: 14px;
}
.footer-links a:hover {
color: var(--sun);
padding-left: 4px;
}
.footer-bottom {
margin-top: 42px;
border-top: 1px solid rgba(255, 255, 255, .12);
padding-top: 22px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
font-size: 13px;
color: rgba(240, 243, 236, .5);
}
/* ===== ===== Guide hero ===== ===== */
.guide-hero {
position: relative;
background: linear-gradient(105deg, rgba(20, 58, 30, .97), rgba(44, 99, 53, .91), rgba(79, 121, 60, .85)), url('/assets/images/backpic/back-1.webp');
background-size: cover;
background-position: center 30%;
color: #fff;
padding: 92px 0 96px;
overflow: hidden;
}
.guide-hero::after {
content: "";
position: absolute;
border-radius: 50%;
width: 520px;
height: 520px;
bottom: -260px;
right: -110px;
border: 68px solid rgba(243, 185, 66, .22);
background: transparent;
pointer-events: none;
}
.guide-hero .container-wide {
position: relative;
z-index: 2;
}
.guide-hero-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 48px;
align-items: center;
}
.guide-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
color: rgba(255, 255, 255, .88);
margin-bottom: 20px;
backdrop-filter: blur(6px);
}
.guide-hero h1 {
font-size: 44px;
line-height: 1.2;
font-weight: 800;
margin: 0 0 18px;
color: #fff;
letter-spacing: -.02em;
text-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
.guide-hero h1 .text-sunny {
color: var(--sun);
}
.guide-hero .hero-lead {
font-size: 17px;
line-height: 1.85;
color: rgba(255, 255, 255, .82);
max-width: 560px;
margin-bottom: 24px;
}
.guide-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
margin-bottom: 32px;
color: rgba(255, 255, 255, .78);
font-size: 14px;
}
.guide-hero-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.guide-hero-meta i {
color: var(--sun);
}
.guide-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* status card */
.guide-status-card {
background: rgba(255, 255, 255, .96);
border-radius: 24px;
padding: 32px;
color: var(--text);
box-shadow: 0 20px 44px rgba(0, 0, 0, .15);
border: 1px solid rgba(255, 255, 255, .5);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.guide-status-card::after {
content: "";
position: absolute;
width: 130px;
height: 130px;
background: rgba(243, 185, 66, .15);
border-radius: 50%;
top: -48px;
right: -42px;
}
.status-card-top {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
color: var(--kiwi-dark);
position: relative;
z-index: 1;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--kiwi);
box-shadow: 0 0 0 3px rgba(92, 158, 59, .2);
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%,
100% {
box-shadow: 0 0 0 3px rgba(92, 158, 59, .16);
}
50% {
box-shadow: 0 0 0 6px rgba(92, 158, 59, .28);
}
}
.status-kiwi-icon {
margin: 22px auto 14px;
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--kiwi-pale);
}
.status-title {
font-size: 20px;
font-weight: 800;
color: var(--kiwi-deep);
line-height: 1.3;
text-align: center;
}
.status-sub {
font-size: 14px;
color: var(--text-soft);
text-align: center;
margin: 8px 0 18px;
line-height: 1.7;
}
.status-list {
background: var(--kiwi-pale);
border-radius: 16px;
padding: 16px 18px;
list-style: none;
margin: 0 0 22px;
}
.status-list li {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: 14px;
color: var(--text);
padding: 5px 0;
line-height: 1.5;
}
.status-list li i {
color: var(--kiwi);
font-size: 16px;
margin-top: 2px;
}
.btn-ghost-card {
display: block;
text-align: center;
border: 1.5px solid var(--kiwi);
color: var(--kiwi-dark);
font-weight: 700;
font-size: 15px;
border-radius: 999px;
padding: 11px 16px;
background: transparent;
transition: var(--transition);
}
.btn-ghost-card:hover {
background: var(--kiwi);
color: #fff;
transform: translateY(-2px);
}
/* ===== Overview ===== */
.guide-overview {
background: linear-gradient(180deg, var(--bg), #F4F7ED);
}
.overview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 42px;
}
.overview-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 26px;
transition: var(--transition);
box-shadow: 0 4px 16px rgba(31, 74, 42, .03);
position: relative;
overflow: hidden;
}
.overview-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--kiwi);
opacity: 0;
transition: var(--transition);
}
.overview-card:hover {
transform: translateY(-4px);
border-color: rgba(92, 158, 59, .45);
box-shadow: var(--shadow-hover);
}
.overview-card:hover::before {
opacity: 1;
}
.overview-icon {
width: 50px;
height: 50px;
background: var(--kiwi-pale);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
color: var(--kiwi-dark);
margin-bottom: 18px;
}
.overview-card h3 {
font-size: 17px;
font-weight: 700;
color: var(--kiwi-deep);
margin-bottom: 8px;
}
.overview-card p {
font-size: 14px;
color: var(--text-soft);
line-height: 1.7;
margin: 0;
}
/* ===== Modules ===== */
.guide-modules {
background: var(--bg);
}
.modules-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 46px;
}
.module-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(31, 74, 42, .04);
transition: var(--transition);
}
.module-card:hover {
box-shadow: var(--shadow-hover);
border-color: rgba(92, 158, 59, .4);
transform: translateY(-3px);
}
.module-full .module-img-wrap {
min-height: 320px;
height: 100%;
}
.module-img-wrap {
position: relative;
overflow: hidden;
background: var(--kiwi-pale);
min-height: 260px;
}
.module-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.module-card:hover .module-img-wrap img {
transform: scale(1.035);
}
.module-full-body {
padding: 44px 44px 44px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.module-top-line {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.module-no {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--kiwi-pale);
color: var(--kiwi-deep);
border: 1.5px solid var(--kiwi);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
}
.module-tag {
background: rgba(243, 185, 66, .2);
border-radius: 999px;
color: #7C5610;
font-size: 13px;
font-weight: 600;
padding: 2px 12px;
}
.module-card h3 {
font-size: 24px;
font-weight: 800;
line-height: 1.4;
color: var(--kiwi-deep);
margin: 0 0 12px;
}
.module-card p {
color: var(--text-soft);
font-size: 15px;
line-height: 1.85;
margin-bottom: 14px;
}
.module-points {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.module-points li {
padding: 6px 0 6px 26px;
color: var(--text);
font-size: 14px;
position: relative;
}
.module-points li:before {
content: "\F26A";
font-family: "bootstrap-icons", sans-serif;
position: absolute;
left: 0;
top: 5px;
color: var(--kiwi);
font-size: 17px;
}
.module-half .module-img-wrap {
min-height: 230px;
height: 230px;
}
.module-half-body {
padding: 28px 28px 30px;
}
.module-half-body h3 {
font-size: 19px;
}
/* ===== FAQ ===== */
.guide-faq {
background: linear-gradient(180deg, #F4F7ED, var(--bg));
}
.faq-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 42px;
align-items: flex-start;
}
.faq-intro {
position: sticky;
top: 110px;
}
.faq-intro .section-title {
font-size: 30px;
}
.faq-extra-card {
background: #fff;
border-radius: var(--radius);
border: 1px solid var(--line);
padding: 22px;
margin-top: 22px;
box-shadow: 0 6px 22px rgba(31, 74, 42, .04);
}
.faq-extra-card p {
font-size: 14px;
margin: 12px 0 0;
color: var(--text-soft);
}
.guide-accordion .accordion-item {
border-radius: 18px !important;
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 4px 14px rgba(31, 74, 42, .03);
}
.guide-accordion .accordion-button {
background: #fff;
color: var(--text);
font-weight: 700;
font-size: 16px;
padding: 20px 22px;
box-shadow: none;
gap: 16px;
line-height: 1.6;
}
.guide-accordion .accordion-button:not(.collapsed) {
background: var(--kiwi-pale);
color: var(--kiwi-deep);
}
.guide-accordion .accordion-button:focus {
box-shadow: none;
border-color: var(--kiwi);
}
.guide-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C9E3B'%3e%3cpath fill-rule='evenodd' d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3e%3c/svg%3e") !important;
background-size: 1.05rem;
flex-shrink: 0;
}
.guide-accordion .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231F4A2A'%3e%3cpath fill-rule='evenodd' d='M3 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 8Z'/%3e%3c/svg%3e") !important;
}
.guide-accordion .accordion-body {
padding: 10px 24px 24px;
color: var(--text-soft);
font-size: 15px;
line-height: 1.85;
}
/* ===== Tip ===== */
.guide-tip {
padding: 18px 0 0;
}
.tip-box {
background: #fff;
border: 1px dashed rgba(92, 158, 59, .45);
border-radius: var(--radius);
padding: 22px 26px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
box-shadow: 0 6px 18px rgba(31, 74, 42, .03);
}
.tip-box i {
color: var(--sun);
font-size: 26px;
}
.tip-box strong {
color: var(--kiwi-deep);
}
.tip-box span {
color: var(--text-soft);
font-size: 14px;
}
/* ===== CTA ===== */
.guide-cta {
background: var(--kiwi-deep);
position: relative;
color: #fff;
overflow: hidden;
}
.guide-cta::after {
content: "";
position: absolute;
right: -100px;
bottom: -100px;
width: 330px;
height: 330px;
border-radius: 50%;
border: 56px solid rgba(92, 158, 59, .22);
pointer-events: none;
}
.cta-container {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.cta-container h2 {
font-size: 32px;
line-height: 1.35;
font-weight: 800;
margin: 0 0 10px;
}
.cta-container p {
color: rgba(255, 255, 255, .73);
font-size: 15px;
margin: 0;
max-width: 560px;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* ===== Responsive ===== */
@media (min-width: 1400px) {
.container-wide {
max-width: 1280px;
}
}
@media (max-width: 1199.98px) {
.nav-search {
width: 210px;
}
.nav-search:focus-within {
width: 230px;
}
.guide-hero h1 {
font-size: 36px;
}
.overview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 991.98px) {
.site-header .navbar-collapse {
background: rgba(250, 249, 244, .98);
padding: 12px 4px 14px;
border-radius: 16px;
border: 1px solid var(--line);
box-shadow: 0 20px 44px rgba(31, 74, 42, .08);
margin-top: 10px;
}
.custom-nav .navbar-nav {
align-items: stretch;
}
.custom-nav .nav-link {
border-radius: 12px;
}
.custom-nav .nav-link.active::after {
display: none;
}
.custom-nav .nav-link.active {
background: var(--kiwi-pale);
}
.guide-hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.guide-hero h1 {
font-size: 36px;
}
.guide-hero-actions .btn {
width: auto;
}
.faq-layout {
grid-template-columns: 1fr;
gap: 28px;
}
.faq-intro {
position: static;
top: auto;
}
.module-full-body {
padding: 30px;
}
.module-full .module-img-wrap {
min-height: 230px;
height: auto;
}
}
@media (max-width: 767.98px) {
.container-wide {
padding-left: 20px;
padding-right: 20px;
}
.section-pad {
padding: 56px 0;
}
.section-title {
font-size: 26px;
}
.guide-hero {
padding: 56px 0;
}
.guide-hero h1 {
font-size: 30px;
line-height: 1.3;
}
.guide-hero .hero-lead {
font-size: 15px;
}
.module-full .module-img-wrap,
.module-img-wrap {
min-height: 190px;
height: 200px;
}
.module-half .module-img-wrap {
min-height: 190px;
height: 200px;
}
.module-card h3 {
font-size: 20px;
}
.overview-grid {
gap: 18px;
margin-top: 30px;
}
.cta-container h2 {
font-size: 26px;
}
.brand-text strong {
font-size: 15px;
}
.brand-text span {
font-size: 10px;
}
.site-footer {
padding: 50px 0 24px;
}
.module-full-body {
padding: 22px;
}
.module-half-body {
padding: 22px;
}
}
@media (max-width: 575.98px) {
.guide-hero-grid {
gap: 28px;
}
.guide-hero h1 {
font-size: 26px;
}
.guide-hero-actions .btn {
width: 100%;
margin-left: 0;
}
.overview-grid {
grid-template-columns: 1fr;
}
.guide-hero-meta {
gap: 8px 14px;
font-size: 13px;
}
.brand-text strong {
font-size: 15px;
}
.header-search-row {
display: none;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.section-tag {
font-size: 13px;
}
.modules-head {
margin-bottom: 28px;
}
}
/* roulang page: category3 */
:root {
--kiwi: #5C9E3B;
--kiwi-2: #6FAE44;
--kiwi-deep: #2C6335;
--kiwi-dark: #1F4A2A;
--kiwi-light: #EDF5E5;
--kiwi-soft: #E4F1DA;
--kiwi-yellow: #F3B942;
--bg-warm: #FAF9F4;
--surface: #FFFFFF;
--text-main: #27352B;
--text-sub: #5B6B5E;
--border: #E2E7DE;
--line-soft: #EDF0E9;
--footer-bg: #1F4A2A;
--radius-card: 20px;
--radius-md: 14px;
--radius-pill: 999px;
--shadow-card: 0 12px 30px rgba(31, 74, 42, 0.06);
--shadow-hover: 0 18px 40px rgba(31, 74, 42, 0.12);
--container-width: 1200px;
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
--transition: all .25s ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg-warm);
color: var(--text-main);
font-family: var(--font);
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
margin: 0;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
button,
input {
font-family: inherit;
}
h1,
h2,
h3,
h4 {
line-height: 1.25;
color: var(--text-main);
margin: 0 0 .6em;
}
ul,
ol {
list-style: none;
}
.container-wide {
max-width: var(--container-width);
width: 92%;
margin-left: auto;
margin-right: auto;
}
.section {
padding: 84px 0;
}
.section-white {
background: #FFFFFF;
}
.section-soft {
background: var(--kiwi-light);
}
@media (max-width: 1024px) {
.section {
padding: 64px 0;
}
}
@media (max-width: 768px) {
.section {
padding: 48px 0;
}
}
/* ===== Header ===== */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(250, 249, 244, .92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
transition: box-shadow .3s;
}
.site-header.scrolled {
box-shadow: 0 10px 28px rgba(31, 74, 42, .07);
}
.custom-nav {
min-height: 72px;
padding: .75rem 0;
gap: .75rem;
position: relative;
}
.brand-logo {
display: inline-flex;
align-items: center;
gap: .6rem;
min-width: 0;
margin-right: .5rem;
}
.kiwi-brand-mark {
line-height: 0;
display: inline-flex;
flex: 0 0 auto;
}
.brand-text strong {
display: block;
font-size: 19px;
font-weight: 800;
line-height: 1.05;
color: var(--text-main);
letter-spacing: .01em;
}
.brand-text span {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
color: var(--kiwi);
margin-top: 2px;
}
.custom-toggler {
border: none;
background: transparent;
color: var(--kiwi-dark);
font-size: 26px;
line-height: 1;
padding: .35rem .5rem;
border-radius: 12px;
}
.custom-toggler:focus {
box-shadow: 0 0 0 3px rgba(92, 158, 59, .18);
}
.navbar-nav {
gap: .1rem;
align-items: center;
}
.custom-nav .nav-link {
font-weight: 600;
font-size: 15px;
color: var(--text-sub);
padding: 8px 2px 8px 0;
margin: 0 18px;
position: relative;
white-space: nowrap;
}
.custom-nav .nav-link:hover {
color: var(--kiwi-dark);
}
.custom-nav .nav-link.active {
color: var(--kiwi-dark);
}
.custom-nav .nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 3px;
background: var(--kiwi);
border-radius: 999px;
}
.nav-search-wrap {
display: flex;
align-items: center;
gap: .45rem;
margin-left: .5rem;
}
.nav-search {
display: flex;
align-items: center;
width: 240px;
height: 40px;
background: var(--kiwi-light);
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 0 12px;
transition: var(--transition);
overflow: hidden;
}
.nav-search:focus-within {
border-color: rgba(92, 158, 59, .5);
background: #FFFFFF;
box-shadow: 0 0 0 4px rgba(92, 158, 59, .1);
width: 280px;
}
.nav-search .icon {
color: var(--text-sub);
margin-right: 8px;
font-size: 15px;
display: inline-flex;
}
.nav-search input {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
font-size: 14px;
color: var(--text-main);
outline: none;
}
.nav-search input::placeholder {
color: #85917F;
}
.nav-search .kbd {
font-size: 11px;
letter-spacing: .05em;
color: var(--text-sub);
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 6px;
padding: 1px 6px;
margin-left: 6px;
font-weight: 600;
white-space: nowrap;
}
.nav-search.w-100 {
width: 100%;
}
.nav-search.w-100:focus-within {
width: 100%;
}
.nav-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: var(--radius-pill);
background: var(--kiwi-light);
color: var(--kiwi-dark);
font-size: 17px;
}
.nav-icon-btn:hover {
background: var(--kiwi-soft);
color: var(--kiwi);
transform: translateY(-1px);
}
.btn-kiwi {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
background: var(--kiwi);
border: 1px solid var(--kiwi);
color: #fff;
font-weight: 700;
font-size: 15px;
border-radius: var(--radius-pill);
padding: .5rem 1.3rem;
line-height: 1.2;
transition: var(--transition);
white-space: nowrap;
}
.btn-kiwi:hover {
background: var(--kiwi-deep);
border-color: var(--kiwi-deep);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-hover);
}
.btn-kiwi:focus-visible {
outline: 3px solid rgba(92, 158, 59, .35);
outline-offset: 2px;
}
.btn-kiwi-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
background: transparent;
border: 1.5px solid var(--kiwi);
color: var(--kiwi-dark);
font-weight: 700;
font-size: 15px;
border-radius: var(--radius-pill);
padding: .45rem 1.3rem;
line-height: 1.2;
transition: var(--transition);
white-space: nowrap;
}
.btn-kiwi-outline:hover {
background: var(--kiwi-light);
color: var(--kiwi-dark);
transform: translateY(-1px);
}
.btn-kiwi-outline.light {
border-color: rgba(255, 255, 255, .65);
color: #fff;
}
.btn-kiwi-outline.light:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
}
.mobile-search {
display: none;
}
@media (max-width: 991.98px) {
.nav-search-wrap.mobile-search {
display: flex;
width: 100%;
margin: 1rem 0 .25rem;
}
.nav-search-wrap.mobile-search .nav-search {
width: 100%;
}
.navbar-collapse {
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: 22px;
box-shadow: var(--shadow-card);
padding: 1rem;
margin-top: .55rem;
}
.navbar-nav {
gap: .2rem;
width: 100%;
align-items: flex-start;
}
.custom-nav .nav-link {
display: inline-block;
margin: .1rem 0;
padding: .45rem 0;
width: 100%;
}
}
/* ===== Category hero ===== */
.page-category-hero {
position: relative;
padding: 74px 0 76px;
background: var(--kiwi-light);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.page-category-hero.brand-hero {
background: linear-gradient(160deg, rgba(237, 245, 229, .97), rgba(232, 243, 223, .88)), url('/assets/images/backpic/back-3.webp');
background-position: center;
background-size: cover;
}
.category-hero-inner {
position: relative;
z-index: 2;
max-width: 890px;
}
.breadcrumb-nav {
padding: 18px 0;
margin-bottom: 0;
background: transparent;
border-bottom: none;
}
.breadcrumb-nav ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 6px;
align-items: center;
font-size: 14px;
color: var(--text-sub);
flex-wrap: wrap;
}
.breadcrumb-nav a {
color: var(--text-sub);
font-weight: 500;
}
.breadcrumb-nav a:hover {
color: var(--kiwi);
}
.breadcrumb-nav .separator {
opacity: .65;
margin: 0 2px;
}
.breadcrumb-nav .current {
color: var(--kiwi-dark);
font-weight: 700;
}
.kiwi-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--kiwi);
margin-bottom: 14px;
}
.kiwi-kicker::before {
content: "";
display: inline-block;
width: 28px;
height: 2px;
border-radius: 4px;
background: var(--kiwi);
}
.page-category-hero h1 {
font-size: clamp(32px, 4.2vw, 48px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--kiwi-dark);
line-height: 1.18;
margin-bottom: 18px;
}
.category-hero-desc {
color: var(--text-sub);
font-size: 17px;
max-width: 720px;
margin-bottom: 26px;
line-height: 1.8;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.hero-tags span {
background: rgba(255, 255, 255, .8);
border: 1px solid #D6E6CD;
color: var(--kiwi-deep);
border-radius: var(--radius-pill);
padding: 4px 14px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-tags span i {
color: var(--kiwi);
}
/* ===== Section heading ===== */
.section-head {
max-width: 760px;
margin-bottom: 46px;
}
.section-head.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-head .section-kicker {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
letter-spacing: .12em;
color: var(--kiwi);
text-transform: uppercase;
margin-bottom: 12px;
}
.section-head.center .section-kicker {
justify-content: center;
}
.section-head h2 {
font-size: clamp(27px, 2.7vw, 36px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--kiwi-dark);
margin-bottom: 12px;
}
.section-head p {
color: var(--text-sub);
font-size: 16px;
line-height: 1.8;
}
/* ===== Timeline ===== */
.timeline-section {
background: #FFFFFF;
}
.brand-timeline {
position: relative;
margin-top: 24px;
}
.timeline-row {
position: relative;
display: grid;
grid-template-columns: 150px 1fr;
column-gap: 46px;
padding-bottom: 52px;
}
.timeline-row::before {
content: "";
position: absolute;
left: 150px;
top: 18px;
bottom: -10px;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, #C9DFBD, #E6EEDC);
}
.timeline-row:last-child::before {
display: none;
}
.timeline-stamp {
text-align: right;
padding-right: 4px;
color: var(--text-sub);
}
.timeline-date {
font-size: 16px;
font-weight: 800;
color: var(--kiwi-dark);
letter-spacing: .02em;
line-height: 1.4;
margin-bottom: 2px;
}
.timeline-month {
font-size: 14px;
color: #7C8A78;
font-weight: 500;
}
.timeline-dot {
position: absolute;
left: 150px;
top: 0;
width: 28px;
height: 28px;
transform: translateX(-50%);
border-radius: 50%;
background: var(--kiwi-light);
border: 2px solid var(--kiwi);
box-shadow: 0 0 0 5px rgba(92, 158, 59, .08);
z-index: 1;
}
.timeline-dot::after {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background: var(--kiwi);
}
.timeline-content {
min-width: 0;
}
.timeline-content .tl-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.timeline-content .tag {
display: inline-flex;
align-items: center;
background: var(--kiwi-light);
color: var(--kiwi-deep);
border-radius: 7px;
padding: 3px 10px;
font-size: 13px;
font-weight: 600;
}
.timeline-content .tl-time {
font-size: 14px;
color: #7C8A78;
}
.timeline-content h3 {
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 800;
color: var(--kiwi-dark);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.timeline-content p {
color: var(--text-sub);
margin-bottom: 12px;
line-height: 1.85;
max-width: 700px;
}
.timeline-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--kiwi);
font-weight: 700;
font-size: 14px;
}
.timeline-link:hover {
color: var(--kiwi-dark);
}
.timeline-figure {
margin: 16px 0 0;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--kiwi-light);
line-height: 0;
max-width: 100%;
}
.timeline-figure img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform .5s ease;
}
.timeline-figure:hover img {
transform: scale(1.02);
}
@media (max-width: 767px) {
.timeline-row {
display: block;
padding-left: 50px;
padding-bottom: 42px;
}
.timeline-row::before {
left: 17px;
}
.timeline-dot {
left: 17px;
top: 4px;
width: 26px;
height: 26px;
}
.timeline-stamp {
text-align: left;
margin-bottom: 8px;
padding-left: 0;
}
.timeline-date {
font-size: 15px;
}
.timeline-content h3 {
font-size: 20px;
}
.timeline-figure img {
height: 220px;
}
}
/* ===== Value section ===== */
.value-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 50px;
align-items: center;
}
.icon-list {
margin: 28px 0 0;
padding: 0;
}
.icon-list li {
display: flex;
gap: 13px;
align-items: flex-start;
padding: 10px 0;
color: var(--text-main);
}
.icon-list li i {
display: inline-flex;
flex: 0 0 auto;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
background: var(--kiwi-light);
color: var(--kiwi);
border-radius: 50%;
font-size: 14px;
margin-top: 3px;
}
.icon-list li h3 {
font-size: 17px;
margin-bottom: 3px;
font-weight: 800;
color: var(--kiwi-dark);
}
.icon-list li p {
color: var(--text-sub);
font-size: 15px;
margin-bottom: 0;
}
.value-visual {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--border);
line-height: 0;
}
.value-visual img {
width: 100%;
height: 480px;
object-fit: cover;
}
.value-visual-caption {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
background: rgba(240, 247, 236, .92);
border: 1px solid rgba(255, 255, 255, .6);
backdrop-filter: blur(8px);
border-radius: 14px;
padding: 12px 16px;
font-size: 14px;
color: var(--kiwi-dark);
line-height: 1.6;
}
@media (max-width: 991.98px) {
.value-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.value-visual img {
height: 340px;
}
}
/* ===== FAQ ===== */
.faq-section {
background: var(--kiwi-light);
}
.kiwi-accordion {
max-width: 900px;
margin: 0 auto;
}
.kiwi-accordion .accordion-item {
border: 1px solid #D7E5CD;
background: var(--surface);
border-radius: 16px;
margin-bottom: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(31, 74, 42, .04);
}
.kiwi-accordion .accordion-header {
border: none;
}
.kiwi-accordion .accordion-button {
background: #FFFFFF;
color: var(--text-main);
font-weight: 700;
font-size: 16px;
padding: 20px 56px 20px 22px;
border: none;
box-shadow: none;
border-radius: 16px !important;
transition: var(--transition);
}
.kiwi-accordion .accordion-button:hover {
background: #FBFAF5;
}
.kiwi-accordion .accordion-button:not(.collapsed) {
background: var(--kiwi-light);
color: var(--kiwi-deep);
box-shadow: none;
}
.kiwi-accordion .accordion-button:focus {
box-shadow: 0 0 0 3px rgba(92, 158, 59, .14);
z-index: 1;
}
.kiwi-accordion .accordion-button::after {
content: "+";
font-family: inherit;
background: none;
width: auto;
height: auto;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
font-weight: 300;
color: var(--kiwi);
transition: transform .25s ease;
line-height: 1;
}
.kiwi-accordion .accordion-button:not(.collapsed)::after {
transform: translateY(-50%) rotate(45deg);
color: var(--kiwi-deep);
font-weight: 400;
}
.kiwi-accordion .accordion-body {
background: var(--kiwi-light);
color: var(--text-sub);
padding: 0 22px 22px;
border-top: 1px solid rgba(255, 255, 255, .75);
line-height: 1.85;
}
.kiwi-accordion .accordion-button + .accordion-collapse .accordion-body {
padding-top: 18px;
}
/* ===== CTA ===== */
.cta-section {
position: relative;
background-color: var(--kiwi-dark);
background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
background-size: 30px 30px;
padding: 88px 0;
overflow: hidden;
color: #FFFFFF;
}
.cta-section::before {
content: "";
position: absolute;
top: -60px;
right: -80px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(243, 185, 66, .12);
pointer-events: none;
}
.cta-section .cta-inner {
position: relative;
z-index: 2;
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.cta-section h2 {
color: #FFFFFF;
font-weight: 800;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.01em;
margin-bottom: 14px;
}
.cta-section p {
color: rgba(255, 255, 255, .76);
font-size: 16px;
margin-bottom: 28px;
}
.cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-light {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
background: #FFFFFF;
color: var(--kiwi-dark);
border: 1px solid #FFFFFF;
border-radius: var(--radius-pill);
padding: .45rem 1.4rem;
font-weight: 800;
font-size: 15px;
transition: var(--transition);
}
.btn-cta-light:hover {
background: var(--kiwi-yellow);
border-color: var(--kiwi-yellow);
color: var(--kiwi-dark);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}
/* ===== Footer ===== */
.site-footer {
background: var(--footer-bg);
color: rgba(255, 255, 255, .76);
font-size: 15px;
padding: 70px 0 0;
margin-top: 0;
}
.site-footer a {
color: rgba(255, 255, 255, .7);
transition: var(--transition);
}
.site-footer a:hover {
color: #FFFFFF;
opacity: 1;
padding-left: 3px;
}
.footer-brand-name {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 800;
color: #FFFFFF;
gap: 10px;
margin-bottom: 14px;
line-height: 1.2;
}
.footer-desc {
max-width: 360px;
line-height: 1.9;
margin-bottom: 18px;
color: rgba(255, 255, 255, .62);
}
.footer-title {
font-size: 15px;
font-weight: 700;
letter-spacing: .02em;
margin-bottom: 16px;
color: #FFFFFF;
opacity: .9;
}
.footer-links li {
margin-bottom: 9px;
}
.footer-links a {
display: inline-block;
font-size: 14px;
position: relative;
}
.footer-links a::after {
content: "";
display: block;
width: 0;
height: 2px;
background: var(--kiwi);
transition: width .25s ease;
}
.footer-links a:hover::after {
width: 100%;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
margin-top: 46px;
padding: 18px 0;
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
color: rgba(255, 255, 255, .46);
font-size: 13px;
}
@media (max-width: 576px) {
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* ===== focus ===== */
a:focus-visible,
button:focus-visible {
outline: 3px solid rgba(92, 158, 59, .45);
outline-offset: 3px;
border-radius: 8px;
}