八風

@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");

.xlog-page-index,
.xlog-page-post {
 font-family: "LXGW WenKai Screen R", sans-serif;
}
/* Remove or modify this media query */
@media (width > 1024px) {
 .xlog-page-index .xlog-header {
   height: 100vh;
   top: 0; /* Changed from calc(40px - 100vh) */
 }
}

.xlog-header {
 height: 100vh; /* Full viewport height */
 top: 0 !important; /* Override sticky positioning */
 position: relative; /* Change to relative positioning */
 z-index: 0; /* Lower z-index for background elements */
}

.xlog-header .xlog-banner {
 height: 100%;
 position: absolute;
 width: 100%;
 left: 0;
 top: 0;
}

.xlog-header .xlog-banner img[alt=banner] {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(3px) brightness(65%); /* Reduced blur for better visibility */
}

main {
 position: relative;
 z-index: 1; /* Bring content forward */
}


.xlog-site-name {
 /* Default black font */
 color: #000 !important;
 font-family: Candyshop;
 text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
   -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
 font-size: 35px;
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 /* Remove default gradient */
}

.xlog-site-name:hover {
 /* Apply gradient on hover */
 background-image: linear-gradient(
   to right,
   var(--theme-color),
   #ff6b6b,
   #4ecdc4
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.xlog-header .text-gray-500 {
 /* Basic styles for the menu bar */
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(10px);
 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
 padding: 1rem 2rem;
 border-radius: 999px;
 transition: all 0.3s ease;
}

.xlog-header .text-gray-500:hover {
 /* Hover enhancement effect */
 background: rgba(255, 255, 255, 1);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 transform: translateY(-2px);
}

.xlog-header .text-gray-500 a {
 /* Menu item text styles */
 color: var(--grey-8) !important;
 font-weight: 600;
 padding: 0.5rem 1.5rem;
 border-radius: 999px;
 transition: all 0.2s ease;
}

.xlog-header .text-gray-500 a:hover {
 /* Menu item hover effect */
 color: var(--theme-color) !important;
 background: rgba(0, 0, 0, 0.05);
 transform: scale(1.05);
}

/* Dark mode adaptation */
.dark .xlog-header .text-gray-500 {
 background: rgba(30, 30, 30, 0.95);
}

.dark .xlog-header .text-gray-500 a {
 color: var(--grey-2) !important;
}

.dark .xlog-header .text-gray-500 a:hover {
 background: rgba(255, 255, 255, 0.1);
}

.prose p {
 color: var(--grey-7);
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.prose p:hover {
 background-image: linear-gradient(
   to right,
   var(--theme-color),
   #4ecdc4,
   var(--theme-color)
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.dark .prose p {
 color: #fff !important;
}

.dark .prose p:hover {
 background-image: linear-gradient(
   to right,
   #4ecdc4,
   var(--theme-color),
   #4ecdc4
 );
}

/* Unified button styles */
.xlog-header .text-gray-500 {
 background: linear-gradient(
   to right,
   rgba(255, 255, 255, 0.9),
   rgba(255, 255, 255, 0.7)
 );
}

.dark .xlog-header .text-gray-500 {
 background: linear-gradient(
   to right,
   rgba(30, 30, 30, 0.9),
   rgba(30, 30, 30, 0.7)
 );
}


/* Mobile optimization enhancements */
@media (max-width: 768px) {
 .xlog-header {
   height: 75vh; /* Adjust height */
 }

 .xlog-site-name {
   font-size: 24px; /* More suitable for mobile reading */
   margin-top: 15px;
   letter-spacing: 1px; /* Increase letter spacing */
 }

 .xlog-header .logo {
   max-width: 60px; /* Reduce logo size */
   margin-bottom: 10px;
   filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Add shadow */
 }

 .xlog-header .text-gray-500 {
   padding: 0.6rem 1rem; /* More compact padding */
   margin-top: 0.8rem;
   width: 90%; /* Avoid edge sticking */
 }

 .xlog-header .text-gray-500 a {
   padding: 0.3rem 0.6rem;
   font-size: 12px; /* Smaller font size */
 }
}

/* PC adjustments */
.xlog-site-name {
 position: relative;
 z-index: 2; /* Ensure above background */
}

.xlog-header .text-gray-500 {
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Unified animation curve */
}

/* Mobile image optimization */
@media (hover: none) {
 .xlog-header .xlog-banner img[alt=banner] {
   filter: blur(1px) brightness(70%);
 }
}

.dark .xlog-header .logo {
 filter: drop-shadow(0 2px 4px rgba(255,255,255,0.1)) 
         brightness(0.9); /* Dark mode brightness adjustment */
}