* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
background: #0D0B14;
color: #E0D6E8;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a {
color: #C9A84C;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #E8D06A;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
font-size: 28px;
font-weight: 700;
color: #F0E8D0;
margin-bottom: 10px;
letter-spacing: 2px;
}
.section-title .highlight {
color: #C9A84C;
}
.section-subtitle {
color: #9A8AA8;
font-size: 15px;
margin-bottom: 30px;
} .btn {
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(201, 168, 76, 0.3);
}
.btn-gold {
background: linear-gradient(135deg, #C9A84C, #B8922E);
color: #0D0B14;
}
.btn-gold:hover {
background: linear-gradient(135deg, #E8D06A, #C9A84C);
color: #0D0B14;
}
.btn-outline-gold {
background: transparent;
color: #C9A84C;
border: 2px solid #C9A84C;
}
.btn-outline-gold:hover {
background: #C9A84C;
color: #0D0B14;
}
.btn-dark {
background: rgba(255, 255, 255, 0.08);
color: #E0D6E8;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-dark:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.btn-android {
background: #3DDC84;
color: #0D0B14;
}
.btn-android:hover {
background: #4EEA94;
color: #0D0B14;
}
.btn-ios {
background: #8E8E93;
color: #fff;
}
.btn-ios:hover {
background: #AEAEB2;
color: #fff;
}
.btn-gift {
background: linear-gradient(135deg, #7B5EA7, #5C3D8A);
color: #fff;
}
.btn-gift:hover {
background: linear-gradient(135deg, #9A7AC7, #7B5EA7);
color: #fff;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 20px;
} .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(13, 11, 20, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201, 168, 76, 0.15);
padding: 12px 0;
transition: all 0.3s ease;
}
.site-header.scrolled {
background: rgba(13, 11, 20, 0.98);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.site-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 700;
color: #F0E8D0;
flex-shrink: 0;
}
.site-logo .logo-icon {
font-size: 28px;
}
.site-logo .logo-text {
color: #C9A84C;
} .main-nav {
display: flex;
align-items: center;
gap: 8px;
}
.main-nav ul {
display: flex;
list-style: none;
gap: 6px;
align-items: center;
}
.main-nav ul li a {
display: block;
padding: 8px 16px;
color: #B0A8B8;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item a {
color: #C9A84C;
background: rgba(201, 168, 76, 0.08);
} .main-nav ul li a.nav-android {
background: #3DDC84;
color: #0D0B14;
padding: 6px 16px;
border-radius: 50px;
font-weight: 600;
}
.main-nav ul li a.nav-android:hover {
background: #4EEA94;
color: #0D0B14;
}
.main-nav ul li a.nav-ios {
background: #8E8E93;
color: #fff;
padding: 6px 16px;
border-radius: 50px;
font-weight: 600;
}
.main-nav ul li a.nav-ios:hover {
background: #AEAEB2;
color: #fff;
}
.main-nav ul li a.nav-gift {
background: linear-gradient(135deg, #7B5EA7, #5C3D8A);
color: #fff;
padding: 6px 16px;
border-radius: 50px;
font-weight: 600;
}
.main-nav ul li a.nav-gift:hover {
background: linear-gradient(135deg, #9A7AC7, #7B5EA7);
color: #fff;
} .menu-toggle {
display: none;
background: none;
border: none;
color: #F0E8D0;
font-size: 28px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background 0.3s;
}
.menu-toggle:hover {
background: rgba(255, 255, 255, 0.05);
} .hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 100px 20px 80px;
overflow: hidden;
} .hero-slider {
position: absolute;
inset: 0;
z-index: 0;
} .hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.2s ease-in-out;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
z-index: 2;
} .hero-slide::after {
content: '';
position: absolute;
inset: 0;
background: rgba(13, 11, 20, 0.45);
z-index: 1;
} .hero-dots {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 12px;
}
.hero-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.hero-dots .dot.active {
background: #C9A84C;
border-color: #C9A84C;
box-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
transform: scale(1.15);
}
.hero-dots .dot:hover {
background: rgba(201, 168, 76, 0.6);
} .hero-content {
position: relative;
z-index: 5;
text-align: center;
max-width: 820px;
}
.hero-badge {
display: inline-block;
padding: 6px 20px;
border: 1px solid rgba(201, 168, 76, 0.3);
border-radius: 50px;
font-size: 12px;
color: #C9A84C;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 20px;
background: rgba(201, 168, 76, 0.06);
}
.hero-title {
font-size: 52px;
font-weight: 800;
color: #F0E8D0;
line-height: 1.15;
margin-bottom: 16px;
}
.hero-title .gold {
color: #C9A84C;
}
.hero-subtitle {
font-size: 20px;
color: #B0A8B8;
margin-bottom: 12px;
font-weight: 300;
}
.hero-desc {
font-size: 16px;
color: #9A8AA8;
max-width: 640px;
margin: 0 auto 30px;
line-height: 1.8;
}
.hero-btns .btn {
min-width: 150px;
padding: 14px 36px;
font-size: 16px;
} .section-block {
padding: 70px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.section-block:last-of-type {
border-bottom: none;
}
.section-header {
text-align: center;
margin-bottom: 40px;
} .intro-section {
background: linear-gradient(180deg, #0D0B14 0%, #1A1528 100%);
}
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.intro-text p {
color: #B0A8B8;
font-size: 15px;
line-height: 1.9;
margin-bottom: 16px;
}
.intro-text .highlight-text {
color: #C9A84C;
font-weight: 500;
}
.intro-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.intro-tags span {
padding: 4px 16px;
border-radius: 50px;
font-size: 12px;
background: rgba(201, 168, 76, 0.08);
color: #C9A84C;
border: 1px solid rgba(201, 168, 76, 0.1);
} .screenshot-slider {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(201, 168, 76, 0.12);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
background: #1A1528;
aspect-ratio: 16 / 9;
}
.screenshot-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
z-index: 1;
}
.screenshot-slide.active {
opacity: 1;
z-index: 2;
}
.screenshot-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.screenshot-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.screenshot-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.screenshot-dots .dot.active {
background: #C9A84C;
box-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
transform: scale(1.15);
}
.screenshot-dots .dot:hover {
background: rgba(201, 168, 76, 0.6);
} .features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.feature-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 30px 24px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.4s ease;
cursor: pointer;
}
.feature-card:hover {
transform: translateY(-8px);
border-color: rgba(201, 168, 76, 0.3);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
background: rgba(201, 168, 76, 0.03);
}
.feature-icon {
font-size: 40px;
margin-bottom: 12px;
display: block;
}
.feature-card h3 {
color: #F0E8D0;
font-size: 17px;
margin-bottom: 6px;
}
.feature-card p {
color: #9A8AA8;
font-size: 13px;
line-height: 1.6;
} .posts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
}
.post-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.4s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.post-card:hover {
transform: translateY(-4px);
border-color: rgba(201, 168, 76, 0.25);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.post-card .post-thumb {
height: 140px;
background: #1A1528;
overflow: hidden;
flex-shrink: 0;
}
.post-card .post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.post-card:hover .post-thumb img {
transform: scale(1.05);
}
.post-card .post-body {
padding: 14px 16px 18px;
flex: 1;
display: flex;
flex-direction: column;
}
.post-card .post-cat {
display: inline-block;
padding: 2px 12px;
border-radius: 50px;
font-size: 10px;
font-weight: 600;
background: rgba(201, 168, 76, 0.12);
color: #C9A84C;
margin-bottom: 6px;
align-self: flex-start;
flex-shrink: 0;
}
.post-card .post-title {
font-size: 14px;
font-weight: 600;
color: #F0E8D0;
line-height: 1.4;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.post-card .post-title a {
color: #F0E8D0;
}
.post-card .post-title a:hover {
color: #C9A84C;
}
.post-card .post-meta {
font-size: 11px;
color: #6A5A78;
flex-shrink: 0;
margin-top: auto;
}
.view-all-wrap {
text-align: center;
margin-top: 30px;
} .download-cta {
background: linear-gradient(135deg, #1A1528 0%, #0D0B14 100%);
border-top: 1px solid rgba(201, 168, 76, 0.1);
border-bottom: 1px solid rgba(201, 168, 76, 0.1);
}
.download-cta .cta-content {
text-align: center;
padding: 20px 0;
}
.download-cta .cta-title {
font-size: 30px;
font-weight: 700;
color: #F0E8D0;
margin-bottom: 8px;
}
.download-cta .cta-sub {
color: #9A8AA8;
font-size: 15px;
margin-bottom: 20px;
}
.download-cta .btn {
min-width: 150px;
padding: 14px 36px;
font-size: 15px;
}
.download-cta .device-req {
margin-top: 16px;
font-size: 12px;
color: #5A4A68;
} .site-footer {
background: #08070E;
padding: 50px 0 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 28px;
margin-bottom: 30px;
}
.footer-links a {
color: #7A6A88;
font-size: 13px;
transition: color 0.3s;
}
.footer-links a:hover {
color: #C9A84C;
}
.footer-health {
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 20px 24px;
text-align: center;
font-size: 13px;
color: #5A4A68;
line-height: 2;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.03);
}
.footer-info {
text-align: center;
font-size: 12px;
color: #4A3A58;
line-height: 2.2;
}
.footer-info .sep {
color: #3A2A48;
margin: 0 6px;
}
.footer-copy {
text-align: center;
font-size: 12px;
color: #3A2A48;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
} .pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 30px;
}
.pagination a,
.pagination span {
display: inline-block;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
color: #B0A8B8;
background: rgba(255, 255, 255, 0.04);
transition: all 0.3s;
}
.pagination a:hover {
background: rgba(201, 168, 76, 0.12);
color: #C9A84C;
}
.pagination .current {
background: rgba(201, 168, 76, 0.15);
color: #C9A84C;
} .page-banner {
padding: 140px 20px 60px;
text-align: center;
background: #0D0B14;
position: relative;
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}
.page-banner .banner-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(123, 94, 167, 0.12) 0%, transparent 70%);
z-index: 0;
}
.page-banner .banner-content {
position: relative;
z-index: 1;
}
.page-banner h1 {
font-size: 36px;
font-weight: 700;
color: #F0E8D0;
letter-spacing: 4px;
}
.page-banner p {
color: #9A8AA8;
font-size: 15px;
margin-top: 6px;
} .filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 32px;
}
.filter-tabs .tab {
padding: 6px 20px;
border-radius: 50px;
font-size: 13px;
color: #9A8AA8;
background: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-tabs .tab:hover {
color: #F0E8D0;
background: rgba(255, 255, 255, 0.06);
}
.filter-tabs .tab.active {
color: #C9A84C;
border-color: rgba(201, 168, 76, 0.3);
background: rgba(201, 168, 76, 0.06);
} .single-post {
padding: 120px 0 60px;
}
.single-post .post-header {
text-align: center;
margin-bottom: 30px;
}
.single-post .post-header h1 {
font-size: 32px;
color: #F0E8D0;
margin-bottom: 10px;
}
.single-post .post-header .post-meta {
color: #6A5A78;
font-size: 14px;
}
.single-post .post-content {
max-width: 780px;
margin: 0 auto;
color: #C8C0D0;
font-size: 16px;
line-height: 1.9;
}
.single-post .post-content h2,
.single-post .post-content h3 {
color: #F0E8D0;
margin: 28px 0 12px;
}
.single-post .post-content p {
margin-bottom: 16px;
}
.single-post .post-content img {
border-radius: 12px;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.05);
} .tese-section {
padding: 50px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tese-section:last-of-type {
border-bottom: none;
}
.tese-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.tese-grid.reverse .tese-text {
order: 2;
}
.tese-grid.reverse .tese-image {
order: 1;
}
.tese-text h2 {
font-size: 26px;
color: #F0E8D0;
margin-bottom: 12px;
}
.tese-text h2 .gold {
color: #C9A84C;
}
.tese-text p {
color: #B0A8B8;
font-size: 15px;
line-height: 1.8;
}
.tese-image img {
border-radius: 16px;
border: 1px solid rgba(201, 168, 76, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
} .fuli-section {
padding: 60px 0;
}
.fuli-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.fuli-list li {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: all 0.3s ease;
border-radius: 4px;
}
.fuli-list li:hover {
background: rgba(201, 168, 76, 0.04);
border-color: rgba(201, 168, 76, 0.12);
}
.fuli-list li:last-child {
border-bottom: none;
}
.fuli-list .fuli-tag {
display: inline-block;
padding: 2px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
background: rgba(201, 168, 76, 0.10);
color: #C9A84C;
white-space: nowrap;
min-width: 80px;
text-align: center;
flex-shrink: 0;
}
.fuli-list .fuli-label {
font-size: 15px;
font-weight: 600;
color: #F0E8D0;
white-space: nowrap;
min-width: 90px;
flex-shrink: 0;
}
.fuli-list .fuli-desc {
font-size: 14px;
color: #B0A8B8;
flex: 1;
}
.fuli-list .fuli-desc strong {
color: #E8D06A;
font-weight: 700;
} .site-logo-img {
height: 40px;
width: auto;
display: block;
} .post-excerpt {
font-size: 13px;
color: #8A7A98;
line-height: 1.5;
margin-top: 4px;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 0;
} .view-all-wrap .btn-outline-gold[style*="color:#64B4FF"]:hover {
background: rgba(100, 180, 255, 0.08);
border-color: #64B4FF;
color: #64B4FF !important;
} .hero-trust {
animation: fadeInUp 1s ease 0.6s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .tese-slider {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(201, 168, 76, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
background: #1A1528;
aspect-ratio: 16 / 9;
}
.tese-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
z-index: 1;
}
.tese-slide.active {
opacity: 1;
z-index: 2;
}
.tese-slide img,
.tese-slide video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .tese-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
.tese-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.tese-dots .dot.active {
background: #C9A84C;
box-shadow: 0 0 14px rgba(201, 168, 76, 0.3);
transform: scale(1.15);
}
.tese-dots .dot:hover {
background: rgba(201, 168, 76, 0.6);
} img[loading="lazy"] {
opacity: 0;
transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
opacity: 1;
} .single-post .post-content img {
max-width: 100%;
height: auto;
}
.single-post .post-content iframe {
max-width: 100%;
border-radius: 12px;
}
.single-post .post-content table {
width: 100%;
overflow-x: auto;
display: block;
}  @media (max-width: 992px) {
.hero-title {
font-size: 38px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.intro-grid,
.tese-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.tese-grid.reverse .tese-text {
order: 1;
}
.tese-grid.reverse .tese-image {
order: 2;
}
} @media (max-width: 768px) {
.menu-toggle {
display: block;
}
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(13, 11, 20, 0.98);
backdrop-filter: blur(12px);
padding: 16px 20px 24px;
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
flex-direction: column;
gap: 12px;
}
.main-nav.open {
display: flex;
}
.main-nav ul {
flex-direction: column;
width: 100%;
gap: 4px;
}
.main-nav ul li a {
padding: 12px 16px;
font-size: 16px;
width: 100%;
text-align: center;
}
.main-nav ul li a.nav-android,
.main-nav ul li a.nav-ios,
.main-nav ul li a.nav-gift {
display: inline-block;
width: auto;
min-width: 120px;
text-align: center;
}
.hero-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 16px;
}
.hero-desc {
font-size: 14px;
}
.hero-btns .btn {
min-width: 120px;
padding: 12px 24px;
font-size: 14px;
width: 100%;
max-width: 280px;
}
.section-title {
font-size: 22px;
}
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.feature-card {
padding: 20px 16px;
}
.feature-icon {
font-size: 30px;
}
.feature-card h3 {
font-size: 14px;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.download-cta .cta-title {
font-size: 22px;
}
.btn-group .btn {
width: 100%;
max-width: 280px;
padding: 13px 20px;
font-size: 14px;
}
.page-banner h1 {
font-size: 26px;
}
.single-post .post-header h1 {
font-size: 24px;
}
.footer-links {
gap: 8px 16px;
}
.footer-links a {
font-size: 12px;
}
.footer-health {
font-size: 12px;
padding: 16px;
line-height: 1.8;
}
.footer-info {
font-size: 11px;
line-height: 2;
}
.footer-info .sep {
display: none;
}
.footer-info br {
display: block;
}
.filter-tabs .tab {
font-size: 12px;
padding: 5px 14px;
}
.single-post {
padding: 100px 0 40px;
}
.fuli-list li {
flex-wrap: wrap;
gap: 8px 12px;
padding: 14px 16px;
}
.fuli-list .fuli-tag {
font-size: 11px;
min-width: 60px;
padding: 1px 12px;
}
.fuli-list .fuli-label {
font-size: 14px;
min-width: 60px;
}
.fuli-list .fuli-desc {
font-size: 13px;
width: 100%;
flex: none;
padding-left: 0;
}
.site-logo-img {
height: 32px;
}
} @media (max-width: 480px) {
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.feature-card {
padding: 16px 12px;
}
.feature-card p {
font-size: 12px;
}
.hero-title {
font-size: 24px;
}
.fuli-list li {
flex-wrap: wrap;
gap: 4px 10px;
padding: 12px 14px;
}
.fuli-list .fuli-tag {
font-size: 10px;
min-width: 50px;
padding: 1px 10px;
}
.fuli-list .fuli-label {
font-size: 13px;
min-width: 50px;
}
.fuli-list .fuli-desc {
font-size: 12px;
width: 100%;
flex: none;
padding-left: 0;
}
} .rank-math-breadcrumb {
font-size: 13px;
color: #7A6A88;
padding: 10px 0;
line-height: 1.8;
word-break: break-all;
}
.rank-math-breadcrumb a {
color: #B0A8B8;
text-decoration: none;
transition: color 0.3s;
}
.rank-math-breadcrumb a:hover {
color: #C9A84C;
}
.rank-math-breadcrumb .separator {
color: #4A3A58;
margin: 0 6px;
}
.rank-math-breadcrumb .last {
color: #C9A84C;
font-weight: 500;
} @media (max-width: 768px) {
.rank-math-breadcrumb {
font-size: 12px;
padding: 8px 0;
}
}.posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
@media (min-width: 768px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.posts-grid {
grid-template-columns: repeat(4, 1fr);
}
} .features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 992px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
} .intro-grid,
.tese-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: center;
}
@media (min-width: 992px) {
.intro-grid,
.tese-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
} .hero-title {
font-size: 28px;
}
@media (min-width: 768px) {
.hero-title {
font-size: 38px;
}
}
@media (min-width: 992px) {
.hero-title {
font-size: 52px;
}
} .fuli-list li {
flex-wrap: wrap;
gap: 8px 12px;
padding: 14px 16px;
}
@media (min-width: 768px) {
.fuli-list li {
flex-wrap: nowrap;
padding: 14px 20px;
}
} @media (max-width: 767px) {
.menu-toggle {
display: block;
}
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(13, 11, 20, 0.98);
backdrop-filter: blur(12px);
padding: 16px 20px 24px;
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
flex-direction: column;
gap: 12px;
}
.main-nav.open {
display: flex;
}
.main-nav ul {
flex-direction: column;
width: 100%;
gap: 4px;
}
.main-nav ul li a {
padding: 12px 16px;
font-size: 16px;
width: 100%;
text-align: center;
}
}
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.main-nav {
display: flex;
}
} .btn-group .btn {
width: 100%;
max-width: 280px;
}
@media (min-width: 768px) {
.btn-group .btn {
width: auto;
max-width: none;
}
} img {
max-width: 100%;
height: auto;
}.posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
@media (min-width: 768px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.posts-grid {
grid-template-columns: repeat(4, 1fr);
}
} .features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 992px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
} .intro-grid,
.tese-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: center;
}
@media (min-width: 992px) {
.intro-grid,
.tese-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
} .hero-title {
font-size: 28px;
}
@media (min-width: 768px) {
.hero-title {
font-size: 38px;
}
}
@media (min-width: 992px) {
.hero-title {
font-size: 52px;
}
} .fuli-list li {
flex-wrap: wrap;
gap: 8px 12px;
padding: 14px 16px;
}
@media (min-width: 768px) {
.fuli-list li {
flex-wrap: nowrap;
padding: 14px 20px;
}
} @media (max-width: 767px) {
.menu-toggle {
display: block;
}
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(13, 11, 20, 0.98);
backdrop-filter: blur(12px);
padding: 16px 20px 24px;
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
flex-direction: column;
gap: 12px;
}
.main-nav.open {
display: flex;
}
.main-nav ul {
flex-direction: column;
width: 100%;
gap: 4px;
}
.main-nav ul li a {
padding: 12px 16px;
font-size: 16px;
width: 100%;
text-align: center;
}
}
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.main-nav {
display: flex;
}
} .btn-group .btn {
width: 100%;
max-width: 280px;
}
@media (min-width: 768px) {
.btn-group .btn {
width: auto;
max-width: none;
}
} img {
max-width: 100%;
height: auto;
}