html {
overflow-x: hidden;
}
.zen-hero {
position: relative;
min-height: 55vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, #faf9f7 0%, #f8f4ec 40%, #f0f7f5 100%);
margin-bottom: -1px;
}
.zen-hero-bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(3,126,243,0.04) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(160,172,72,0.05) 0%, transparent 50%);
z-index: 1;
}
.zen-hero-bg::after {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 70%;
height: 160%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
transform: rotate(-12deg);
}
.zen-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: var(--zen-spacing-3xl, 50px) var(--zen-spacing-xl, 30px);
}
.zen-hero-title {
font-size: clamp(28px, 5vw, 48px);
font-weight: 700;
color: var(--zen-text-heading, #222);
margin-bottom: var(--zen-spacing-md, 15px);
line-height: 1.25;
letter-spacing: -0.01em;
}
.zen-hero-subtitle {
font-size: clamp(16px, 2.5vw, 22px);
color: var(--zen-text-secondary, #888);
margin-bottom: var(--zen-spacing-xl, 30px);
line-height: 1.6;
letter-spacing: 0.05em;
}
.zen-hero-actions {
display: flex;
gap: var(--zen-spacing-md, 15px);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--zen-spacing-2xl, 40px);
}
.zen-btn {
display: inline-flex;
align-items: center;
padding: 12px 28px;
border-radius: var(--zen-radius-lg, 8px);
text-decoration: none;
font-weight: 600;
font-size: var(--zen-font-size-base, 16px);
transition: all 0.25s ease;
cursor: pointer;
border: 2px solid transparent;
line-height: 1.4;
}
.zen-btn-primary {
background: linear-gradient(135deg, var(--zen-primary, #d4af37) 0%, var(--zen-primary-dark, #b8962f) 100%);
color: white;
box-shadow: 0 3px 14px rgba(212,175,55,0.3);
}
.zen-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(212,175,55,0.42);
text-decoration: none;
color: white;
}
.zen-btn-outline {
background: transparent;
color: var(--zen-primary-dark, #b8962f);
border-color: var(--zen-primary, #d4af37);
}
.zen-btn-outline:hover {
background: var(--zen-primary, #d4af37);
color: white;
transform: translateY(-2px);
text-decoration: none;
}
.zen-hero-stats-inline {
text-align: center;
font-size: clamp(14px, 2vw, 16px);
color: var(--zen-text-muted, #999);
margin-top: var(--zen-spacing-lg, 20px);
letter-spacing: 0.5px;
}
.zen-hero-stats-inline strong {
color: var(--zen-primary, #d4af37);
font-weight: 700;
}
body.dark-mode .zen-hero {
background: linear-gradient(135deg, #1a1a1a 0%, #1e1a17 40%, #171d1c 100%);
}
body.dark-mode .zen-hero-title {
color: var(--zen-primary, #c5a059);
}
body.dark-mode .zen-hero-subtitle {
color: #aaa;
}
body.dark-mode .zen-btn-outline {
border-color: var(--zen-primary, #c5a059);
color: var(--zen-primary, #c5a059);
}
.zen-newcomer-card {
background: linear-gradient(135deg, #fffbf0 0%, #fffef8 50%, #f5faf8 100%);
border: 1px solid rgba(212,175,55,0.2);
border-left: 4px solid var(--zen-primary, #d4af37);
border-radius: var(--zen-radius-lg, 8px);
padding: var(--zen-spacing-xl, 30px) var(--zen-spacing-2xl, 40px);
margin-bottom: var(--zen-spacing-2xl, 40px);
box-shadow: 0 2px 16px rgba(212,175,55,0.08);
}
.newcomer-title {
font-size: var(--zen-font-size-lg, 20px);
font-weight: 600;
color: var(--zen-text-heading, #222);
margin-bottom: var(--zen-spacing-sm, 10px);
}
.newcomer-desc {
color: var(--zen-text-secondary, #888);
margin-bottom: var(--zen-spacing-lg, 20px);
font-size: var(--zen-font-size-sm, 13px);
}
.newcomer-path {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--zen-spacing-md, 15px);
}
.newcomer-path li {
display: flex;
flex-direction: column;
gap: 4px;
}
.newcomer-path li a {
font-weight: 600;
font-size: var(--zen-font-size-base, 16px);
color: var(--zen-primary-dark, #b8962f);
text-decoration: none;
transition: color var(--zen-transition-fast, 0.15s ease);
}
.newcomer-path li a:hover {
color: var(--zen-primary, #d4af37);
text-decoration: underline;
}
.newcomer-path li span {
font-size: var(--zen-font-size-xs, 12px);
color: var(--zen-text-muted, #999);
}
body.dark-mode .zen-newcomer-card {
background: linear-gradient(135deg, rgba(197,160,89,0.06) 0%, rgba(30,30,30,1) 100%);
border-color: rgba(197,160,89,0.2);
}
@media only screen and (min-width: 960px) and (max-width: 1119px) {
.zen-hero-stats-inline {
font-size: 13px;
}
}
@media only screen and (max-width: 959px) {
.zen-hero {
min-height: 45vh;
}
.zen-hero-content {
padding: 35px 20px;
}
.zen-hero-title {
font-size: 30px;
}
.zen-hero-subtitle {
font-size: 18px;
}
.zen-newcomer-card {
padding: 22px 25px;
}
.newcomer-path {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 767px) {
.zen-hero {
min-height: 38vh;
}
.zen-hero-content {
padding: 28px 18px;
}
.zen-hero-title {
font-size: 26px;
}
.zen-hero-subtitle {
font-size: 16px;
margin-bottom: 20px;
}
.zen-hero-actions {
margin-bottom: 25px;
}
.zen-hero-actions .zen-btn {
padding: 10px 20px;
font-size: 14px;
}
.zen-hero-stats-inline {
font-size: 14px;
}
.zen-newcomer-card {
padding: 18px 16px;
margin-bottom: 25px;
}
.newcomer-title {
font-size: 17px;
}
.newcomer-path {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.newcomer-path li a {
font-size: 14px;
}
.site-main {
padding: 15px;
}
.reading-time-badge {
display: none;
}
.entry-content blockquote.sutra-quote,
.entry-content .sutra-text {
padding: 18px 18px 14px 36px;
font-size: 15px;
line-height: 2;
}
.zen-search-hot {
gap: 6px;
margin-top: 8px;
}
.zen-search-hot a {
font-size: 11px;
padding: 2px 8px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.content-list .thumbnail-link {
width: 130px;
}
.zen-newcomer-card {
padding: 20px;
}
.newcomer-path {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 479px) {
.zen-hero {
min-height: 32vh;
}
.zen-hero-title {
font-size: 22px;
}
.zen-hero-subtitle {
font-size: 14px;
margin-bottom: 16px;
}
.zen-hero-actions {
flex-direction: column;
align-items: center;
gap: 10px;
}
.zen-hero-actions .zen-btn {
width: 100%;
max-width: 260px;
justify-content: center;
text-align: center;
}
.zen-hero-stats-inline {
font-size: 13px;
}
.zen-newcomer-card {
padding: 15px 12px;
border-radius: 6px;
border-left-width: 3px;
}
.newcomer-title {
font-size: 15px;
margin-bottom: 6px;
}
.newcomer-desc {
font-size: 12px;
margin-bottom: 12px;
}
.newcomer-path {
grid-template-columns: 1fr;
gap: 8px;
}
.newcomer-path li a {
font-size: 14px;
}
.newcomer-path li span {
font-size: 11px;
}
.site-main {
padding: 12px 10px;
}
.content-list .hentry {
border-radius: 6px;
}
.content-list .entry-title {
font-size: 17px;
margin-bottom: 12px;
}
.entry-content blockquote.sutra-quote,
.entry-content .sutra-text {
padding: 14px 14px 10px 32px;
font-size: 14px;
line-height: 1.95;
letter-spacing: 0.03em;
}
.entry-content blockquote.sutra-quote::before,
.entry-content .sutra-text::before {
top: 12px;
left: 10px;
font-size: 22px;
}
.zen-btn {
padding: 10px 20px;
font-size: 13px;
border-radius: 6px;
}
}
@media (max-width: 768px) {
.zen-hero {
min-height: 42vh;
}
.zen-hero-content {
padding: var(--zen-spacing-xl, 30px) var(--zen-spacing-md, 15px);
}
.zen-hero-stats-inline {
font-size: 13px;
}
.zen-hero-actions .zen-btn {
padding: 10px 22px;
font-size: var(--zen-font-size-sm, 14px);
}
.zen-newcomer-card {
padding: var(--zen-spacing-lg, 20px);
}
.reading-time-badge {
font-size: 11px;
padding: 2px 8px;
}
}