blog-statusbar {
display: none !important;
}
page-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
height: 80px !important;
min-height: 80px !important;
background: rgba(77, 103, 154, 0.16) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
box-shadow: 0 8px 32px rgba(30, 50, 95, 0.12) !important;
backdrop-filter: blur(16px);
}
page-header::before,
page-site-info,
home-hero,
aside-content {
display: none !important;
}
nav {
top: 0 !important;
height: 80px !important;
padding: 0 clamp(18px, 4vw, 56px);
color: #fff !important;
background: transparent !important;
box-shadow: none !important;
}
menus {
display: flex !important;
align-items: center;
min-height: 56px;
padding: 7px 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 22px;
background: rgba(122, 150, 207, 0.24);
box-shadow: 0 16px 34px rgba(52, 75, 125, 0.14);
backdrop-filter: blur(16px);
}
menus .menus_items {
display: flex !important;
align-items: center;
gap: 8px;
}
nav #blog-info {
display: inline-flex;
align-items: center;
gap: 14px;
}
nav #blog-info::before {
content: ‘’;
display: inline-block;
width: 34px;
height: 34px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255,255,255,0.68), rgba(143,181,255,0.24)),
url(‘/images/newnewlogo.png’) center/cover;
box-shadow: 0 12px 28px rgba(87, 112, 176, 0.24);
}
nav a,
nav .site-name,
nav .site-page {
color: #fff !important;
text-shadow: 0 2px 14px rgba(25, 58, 120, 0.34) !important;
}
menus .menus_item > a.site-page {
min-height: 42px;
padding: 0 15px;
border-radius: 14px;
transition: background 180ms ease, transform 180ms ease;
}
menus .menus_item > a.site-page:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-1px);
}
content-inner.layout {
display: block !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
}
page {
width: 100% !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
article-container {
padding: 0 !important;
}
footer {
position: relative;
margin-top: -1px;
padding: 36px 16px 40px;
color: rgba(184, 196, 220, 0.66) !important;
background: #03050a !important;
border-top: 0;
box-shadow: none;
}
footer::before,
footer::after {
display: none !important;
}
footer #footer-wrap {
position: relative;
z-index: 1;
max-width: 980px;
margin: 0 auto;
padding: 0;
color: inherit !important;
text-align: center;
text-shadow: none !important;
}
footer .footer-copyright,
footer .copyright,
footer .framework-info,
footer .footer_custom_text {
color: rgba(184, 196, 220, 0.66) !important;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0;
text-shadow: none !important;
}
footer a {
color: rgba(190, 207, 255, 0.78) !important;
border-bottom: 1px solid rgba(190, 207, 255, 0.18);
text-decoration: none;
}
footer a:hover {
color: #eaf0ff !important;
border-bottom-color: rgba(234, 240, 255, 0.36);
}
daily-quote-widget {
display: block !important;
}
.home-shell {
—blue: #6f95f4;
—blue-deep: #526fc4;
—blue-soft: #8fb5ff;
—aura-pink: #f2a8d8;
—ink: #26334d;
—muted: #78859c;
—line: #e7edf8;
—card-bg: rgba(255,255,255,0.9);
—row-bg: rgba(255,255,255,0.76);
—soft-bg: #eef5ff;
—page-bg: #f4f8ff;
overflow-x: hidden;
min-height: 100vh;
color: var(—ink);
background:
radial-gradient(circle at 10% 16%, rgba(143, 181, 255, 0.2), transparent 28%),
radial-gradient(circle at 86% 38%, rgba(242, 168, 216, 0.18), transparent 24%),
linear-gradient(180deg, #edf4ff 0%, #f8fbff 52%, #ffffff 100%);
}
.home-hero {
position: relative;
min-height: 620px;
padding: 128px 0 82px;
overflow: hidden;
background:
linear-gradient(90deg, rgba(38, 67, 124, 0.7) 0%, rgba(106, 134, 197, 0.36) 34%, rgba(255,255,255,0.12) 72%),
url(‘/images/wallpaper.png’) center 40% / cover no-repeat;
}
.home-hero::after {
content: ‘’;
position: absolute;
inset: auto 0 0;
height: 130px;
background: linear-gradient(180deg, transparent, #edf4ff 78%);
pointer-events: none;
}
.home-hero-inner,
.home-content {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
.hero-copy {
position: relative;
z-index: 1;
max-width: 560px;
padding-top: 36px;
color: #fff;
}
.hero-copy h1 {
margin: 0;
border: 0;
color: #fff;
font-size: clamp(42px, 5.6vw, 64px);
line-height: 1.12;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 16px 36px rgba(20, 61, 132, 0.34);
}
.hero-copy p {
margin: 18px 0 0;
color: rgba(255,255,255,0.94);
font-size: clamp(17px, 2.1vw, 22px);
font-weight: 700;
letter-spacing: 0;
text-shadow: 0 8px 24px rgba(22, 67, 138, 0.28);
}
.hero-subtitle {
display: inline;
max-width: 100%;
min-height: 34px;
line-height: 1.55;
white-space: normal;
overflow-wrap: anywhere;
}
.hero-subtitle::after {
content: ‘’;
}
.hero-subtitle.is-typing::after {
content: ‘|’;
margin-left: 3px;
font-weight: 700;
animation: hero-caret 900ms steps(1) infinite;
}
@keyframes hero-caret {
50% { opacity: 0; }
}
.hero-actions {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 34px;
}
.hero-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 136px;
min-height: 52px;
padding: 0 22px;
border-radius: 14px;
font-weight: 900;
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.hero-actions a:first-child {
color: #fff !important;
background: linear-gradient(135deg, var(—blue-soft), var(—blue-deep));
box-shadow: 0 18px 34px rgba(82, 111, 196, 0.3);
}
.hero-actions a:last-child {
color: var(—blue-deep) !important;
background: rgba(255,255,255,0.9);
box-shadow: 0 18px 36px rgba(44, 90, 150, 0.18);
}
.hero-actions a:hover {
transform: translateY(-2px);
}
.hero-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
width: min(760px, 100%);
margin-top: 70px;
padding: 18px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 18px;
background: rgba(255,255,255,0.54);
box-shadow: 0 22px 48px rgba(57, 80, 134, 0.14);
backdrop-filter: blur(18px);
}
.stat-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: center;
min-width: 0;
}
.stat-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, var(—blue-soft), var(—blue-deep));
}
.stat-item:nth-child(2) .stat-icon { background: linear-gradient(135deg, #69d6c2, #2ea995); }
.stat-item:nth-child(3) .stat-icon { background: linear-gradient(135deg, #a49aff, #756ce0); }
.stat-item:nth-child(4) .stat-icon { background: linear-gradient(135deg, #ffad69, #ef7d4a); }
.stat-label {
display: block;
color: #526176;
font-weight: 800;
line-height: 1.25;
}
.stat-value {
display: block;
margin-top: 2px;
color: #273451;
font-size: 18px;
font-weight: 900;
}
.home-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 28px;
margin-top: -48px;
padding-bottom: 72px;
}
.content-main,
.content-side {
display: grid;
gap: 24px;
align-content: start;
}
.home-card {
border: 1px solid rgba(229, 237, 249, 0.95);
border-radius: 16px;
background: var(—card-bg);
box-shadow: 0 20px 48px rgba(65, 98, 145, 0.12);
backdrop-filter: blur(16px);
}
.section-card {
padding: 22px;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.section-head h2,
.side-title {
margin: 0;
border: 0;
color: #25324b;
font-size: 22px;
font-weight: 900;
letter-spacing: 0;
}
.section-head h2 i,
.side-title i {
margin-right: 10px;
color: var(—blue);
}
.section-more {
color: var(—blue-deep) !important;
font-weight: 800;
}
.motivation-finale {
position: relative;
min-height: max(min(96vh, 900px), min(1320px, calc(100vw * 0.5625 + 168px)));
margin-top: clamp(30px, 5vw, 68px);
overflow: hidden;
color: #fff;
background: #03050a;
border: 0;
box-shadow: none;
isolation: isolate;
}
.motivation-finale::before,
.motivation-finale::after {
content: ‘’;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.motivation-finale::before {
inset: 168px 0 0;
background:
linear-gradient(90deg, rgba(3, 5, 10, 0.24), rgba(3, 5, 10, 0.02) 56%, rgba(3, 5, 10, 0.18)),
linear-gradient(180deg, rgba(3, 5, 10, 0.02), rgba(3, 5, 10, 0.08));
}
.motivation-finale::after {
display: none;
}
.motivation-video {
position: absolute;
inset: 168px 0 0;
width: 100%;
height: calc(100% - 168px);
object-fit: cover;
background: #03050a;
transform: scale(1.02);
transition: opacity 900ms ease, transform 1600ms ease;
}
.motivation-video:not(.is-loaded) {
opacity: 0;
}
.motivation-video.is-loaded {
opacity: 1;
transform: scale(1);
}
.motivation-finale-text {
position: absolute;
top: 132px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: min(1200px, calc(100% - 40px));
min-height: 0;
margin: 0;
padding: 0;
pointer-events: none;
}
.motivation-finale-text::before {
content: ‘EDITORIAL NOTE · 片尾摘录’;
display: block;
width: fit-content;
margin: 0 0 8px 17px;
color: rgba(146, 165, 205, 0.72);
font-family: “Cormorant Garamond”, “Times New Roman”, “Songti SC”, serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.motivation-finale-text p {
display: inline-block;
max-width: min(760px, 62vw);
margin: 0;
padding: 2px 0 2px 17px;
color: rgba(244, 247, 255, 0.88);
font-family: “Noto Serif SC”, “Songti SC”, “STSong”, “Microsoft YaHei”, serif;
font-size: clamp(14px, 1.22vw, 17px);
font-weight: 700;
line-height: 1.72;
letter-spacing: 0;
text-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
box-shadow: inset 2px 0 rgba(188, 206, 255, 0.48);
}
.motivation-finale-text p::before {
content: ‘’;
display: inline-block;
width: 28px;
height: 1px;
margin: 0 12px 0 0;
vertical-align: 0.34em;
background: linear-gradient(90deg, rgba(222, 230, 255, 0.74), rgba(222, 230, 255, 0));
}
.motivation-finale-text p.is-typing::after {
content: ‘’;
display: inline-block;
width: 2px;
height: 1em;
margin-left: 5px;
vertical-align: -0.12em;
background: rgba(210, 222, 255, 0.72);
animation: hero-caret 880ms steps(1) infinite;
}
.motivation-scroll-fade {
position: absolute;
inset: 0 0 auto;
z-index: 3;
height: 168px;
background: #03050a;
clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
pointer-events: none;
}
.motivation-audio-toggle {
position: absolute;
right: clamp(18px, 4vw, 42px);
top: 126px;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
padding: 0 14px;
color: rgba(255, 255, 255, 0.88);
background: #03050a;
box-shadow: none;
font-weight: 900;
cursor: pointer;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.motivation-audio-toggle:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.36);
background: rgba(3, 5, 10, 0.66);
}
.motivation-audio-toggle span {
font-size: 13px;
}
.category-stack {
display: grid;
gap: 12px;
}
.category-row {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 44px 18px;
gap: 14px;
align-items: center;
min-height: 74px;
padding: 10px 14px;
border: 1px solid var(—line);
border-radius: 14px;
color: #2d3850 !important;
background: var(—row-bg);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.category-row:hover {
transform: translateY(-2px);
border-color: rgba(111,149,244,0.24);
box-shadow: 0 16px 32px rgba(58, 100, 168, 0.1);
}
.category-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
color: var(—blue-deep);
background: var(—soft-bg);
}
.category-row:nth-child(2) .category-icon { color: #1baa96; background: #ecfbf7; }
.category-row:nth-child(3) .category-icon { color: #527ee8; background: #eff4ff; }
.category-row:nth-child(4) .category-icon { color: #785ce8; background: #f3efff; }
.category-row:nth-child(5) .category-icon { color: #ff743d; background: #fff2ec; }
.category-title {
display: block;
color: #25324b;
font-size: 17px;
font-weight: 900;
}
.category-desc {
display: block;
margin-top: 4px;
color: var(—muted);
font-weight: 600;
line-height: 1.45;
}
.category-count {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(—blue-deep);
background: var(—soft-bg);
font-weight: 900;
}
.category-row > i {
color: #b4c0d3;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.post-tile {
overflow: hidden;
border: 1px solid #edf2fa;
border-radius: 16px;
background: #fff;
color: #2b3650 !important;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.post-tile:hover {
transform: translateY(-3px);
box-shadow: 0 18px 34px rgba(59, 95, 150, 0.14);
}
.post-cover {
display: block;
width: 100%;
height: 118px;
object-fit: cover;
object-position: center;
background: #eef5ff;
}
.post-body {
padding: 14px;
}
.post-body h3 {
height: 44px;
margin: 0;
border: 0;
color: #25324b;
font-size: 15px;
line-height: 1.45;
font-weight: 900;
overflow: hidden;
}
.post-date {
display: block;
margin-top: 10px;
color: #8a96aa;
font-size: 13px;
font-weight: 700;
}
.profile-card {
padding: 36px 18px 28px;
text-align: center;
}
.profile-avatar {
position: relative;
width: 108px;
height: 108px;
margin: 0 auto 18px;
padding: 5px;
border-radius: 50%;
background: conic-gradient(from 20deg, #5fa4ff, #9f8cff, #e7f4ff, #5fa4ff);
box-shadow: 0 20px 38px rgba(51, 116, 220, 0.18);
}
.profile-avatar::after {
content: ‘’;
position: absolute;
right: 7px;
bottom: 12px;
width: 16px;
height: 16px;
border: 3px solid #fff;
border-radius: 50%;
background: #39d68b;
}
.profile-avatar img {
width: 100%;
height: 100%;
border: 4px solid #fff;
border-radius: inherit;
object-fit: cover;
}
.profile-name {
margin: 0;
color: #25324b;
font-size: 24px;
font-weight: 900;
}
.profile-sub {
margin: 8px 0 22px;
color: #7b879a;
font-weight: 700;
}
.profile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 22px;
}
.profile-stats span {
color: #7b879a;
font-weight: 700;
}
.profile-stats strong {
display: block;
margin-top: 4px;
color: var(—blue-deep);
font-size: 18px;
}
.profile-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
border-radius: 12px;
color: #fff !important;
background: linear-gradient(135deg, var(—blue-soft), var(—blue-deep));
box-shadow: 0 18px 30px rgba(82, 111, 196, 0.24);
font-weight: 900;
}
.profile-links {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 18px;
}
.profile-links a {
color: #7b8da9 !important;
font-size: 18px;
}
.quote-card {
position: relative;
padding: 26px 24px;
overflow: hidden;
}
.quote-card::before,
.quote-card::after {
position: absolute;
color: rgba(111, 149, 244, 0.18);
font-size: 72px;
font-weight: 900;
line-height: 1;
}
.quote-card::before {
content: ‘“’;
top: 12px;
left: 18px;
}
.quote-card::after {
content: ‘”’;
right: 16px;
bottom: -12px;
}
.quote-card p {
position: relative;
z-index: 1;
margin: 0;
color: #34405a;
font-size: 16px;
font-weight: 800;
line-height: 1.75;
text-align: center;
}
.quote-card span {
position: relative;
z-index: 1;
display: block;
margin-top: 12px;
color: var(—blue-deep);
text-align: right;
font-weight: 900;
}
.notice-card {
padding: 22px;
}
.daily-hot-card {
padding: 22px;
}
.daily-hot-image {
display: block;
width: 100%;
height: auto;
margin-top: 16px;
border: 1px solid rgba(143, 181, 255, 0.2);
border-radius: 14px;
object-fit: contain;
background: #eef5ff;
box-shadow: 0 14px 28px rgba(76, 100, 165, 0.1);
}
.daily-hot-link {
display: block;
color: inherit;
text-decoration: none;
}
.daily-hot-text {
margin: 12px 0 0;
color: #6f7d92;
font-size: 13px;
font-weight: 700;
line-height: 1.7;
}
.notice-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
color: #6f7d92;
font-weight: 700;
}
.notice-date {
color: #93a0b2;
font-size: 13px;
}
.notice-tag {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: 0 6px;
border-radius: 6px;
color: #fff;
background: #ff6f75;
font-size: 10px;
font-weight: 900;
}
.programmer-history-card {
padding: 22px;
}
.content-main .programmer-history-card {
padding: 22px;
}
.content-main .programmer-history-card .section-head {
margin-bottom: 0;
}
.programmer-history-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
margin-top: 16px;
}
.content-main .programmer-history-form {
grid-template-columns: 120px 120px minmax(180px, 1fr);
align-items: end;
}
.history-field {
display: grid;
gap: 6px;
color: #7a879e;
font-size: 12px;
font-weight: 800;
}
.history-field input {
width: 100%;
height: 38px;
border: 1px solid rgba(143, 181, 255, 0.28);
border-radius: 12px;
padding: 0 12px;
color: #25324b;
background: rgba(246, 250, 255, 0.86);
font: inherit;
font-weight: 900;
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.history-field input:focus {
border-color: rgba(93, 121, 200, 0.62);
box-shadow: 0 0 0 4px rgba(111, 149, 244, 0.14);
}
.history-actions {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
gap: 10px;
}
.content-main .history-actions {
grid-column: auto;
}
.history-actions button {
height: 38px;
border: 0;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #6f95f4, #5d79c8);
font-weight: 900;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.history-actions button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(93, 121, 200, 0.22);
}
.history-actions button:disabled {
cursor: wait;
opacity: 0.64;
transform: none;
box-shadow: none;
}
.history-actions .history-today-btn {
color: var(—blue-deep);
background: rgba(111, 149, 244, 0.14);
}
.programmer-history-date {
margin-top: 14px;
color: #718098;
font-size: 13px;
font-weight: 800;
}
.programmer-history-list {
display: grid;
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.content-main .programmer-history-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.programmer-history-event {
padding: 12px;
border: 1px solid rgba(143, 181, 255, 0.2);
border-radius: 14px;
background: rgba(247, 250, 255, 0.78);
}
.history-event-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.history-event-title {
color: #25324b !important;
font-weight: 900;
line-height: 1.45;
}
.history-event-title:hover {
color: var(—blue-deep) !important;
}
.history-year {
flex: 0 0 auto;
padding: 2px 7px;
border-radius: 999px;
color: #527ee8;
background: rgba(111, 149, 244, 0.14);
font-size: 12px;
font-weight: 900;
}
.history-event-desc {
margin: 8px 0 0;
color: #6f7d92;
font-size: 13px;
font-weight: 700;
line-height: 1.65;
}
.history-event-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.history-event-meta span {
padding: 2px 7px;
border-radius: 999px;
color: #6f7d92;
background: rgba(143, 181, 255, 0.12);
font-size: 11px;
font-weight: 900;
}
.programmer-history-empty {
margin: 12px 0 0;
color: #7b879c;
font-size: 13px;
font-weight: 800;
line-height: 1.7;
}
[data-theme=’dark’] #blog-statusbar {
background: rgba(15, 20, 38, 0.94) !important;
color: #b6c3e4 !important;
border-bottom-color: rgba(123, 147, 205, 0.18);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
[data-theme=’dark’] #blog-statusbar .sb-sep { color: #4e5a78 !important; }
[data-theme=’dark’] #sb-weather { color: #9fd8c7 !important; }
[data-theme=’dark’] #sb-github,
[data-theme=’dark’] #sb-time { color: #b4c5f0 !important; }
[data-theme=’dark’] #page-header {
background: rgba(15, 22, 43, 0.58) !important;
border-bottom-color: rgba(151, 174, 229, 0.14);
}
[data-theme=’dark’] #menus {
border-color: rgba(166, 190, 246, 0.16);
background: rgba(36, 48, 82, 0.54);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}
[data-theme=’dark’] #nav a,
[data-theme=’dark’] #nav .site-name,
[data-theme=’dark’] #nav .site-page {
color: #eef4ff !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34) !important;
}
[data-theme=’dark’] #menus .menus_item > a.site-page:hover {
background: rgba(151, 180, 246, 0.16);
}
[data-theme=’dark’] .home-shell {
—blue: #8fb5ff;
—blue-deep: #9ab3f2;
—blue-soft: #b6ccff;
—ink: #e7edff;
—muted: #a9b4d0;
—line: rgba(153, 178, 235, 0.16);
—card-bg: rgba(22, 29, 52, 0.86);
—row-bg: rgba(29, 38, 66, 0.72);
—soft-bg: rgba(143, 181, 255, 0.14);
—page-bg: #101527;
background:
radial-gradient(circle at 10% 16%, rgba(111, 149, 244, 0.18), transparent 28%),
radial-gradient(circle at 86% 38%, rgba(242, 168, 216, 0.12), transparent 24%),
linear-gradient(180deg, #0f1426 0%, #151b30 56%, #101527 100%);
}
[data-theme=’dark’] #footer {
color: rgba(184, 196, 220, 0.66) !important;
background: #03050a !important;
border-top: 0;
box-shadow: none;
}
[data-theme=’dark’] #footer #footer-wrap,
[data-theme=’dark’] #footer .footer-copyright,
[data-theme=’dark’] #footer .copyright,
[data-theme=’dark’] #footer .framework-info,
[data-theme=’dark’] #footer .footer_custom_text {
color: rgba(184, 196, 220, 0.66) !important;
}
[data-theme=’dark’] #footer a {
color: rgba(190, 207, 255, 0.78) !important;
border-bottom-color: rgba(190, 207, 255, 0.18);
}
[data-theme=’dark’] .home-hero {
background:
linear-gradient(90deg, rgba(5, 11, 28, 0.82) 0%, rgba(32, 46, 83, 0.58) 36%, rgba(10, 15, 30, 0.18) 72%),
url(‘/images/wallpaper.png’) center 40% / cover no-repeat;
}
[data-theme=’dark’] .home-hero::after {
background: linear-gradient(180deg, transparent, #101527 80%);
}
[data-theme=’dark’] .hero-copy h1,
[data-theme=’dark’] .hero-copy p {
color: #f7f9ff;
text-shadow: 0 18px 38px rgba(0, 0, 0, 0.46);
}
[data-theme=’dark’] .hero-actions a:first-child {
color: #101527 !important;
background: linear-gradient(135deg, #c1d4ff, #8fb5ff);
box-shadow: 0 18px 36px rgba(94, 129, 210, 0.2);
}
[data-theme=’dark’] .hero-actions a:last-child {
color: #d7e4ff !important;
background: rgba(27, 36, 65, 0.86);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}
[data-theme=’dark’] .hero-stats {
border-color: rgba(166, 190, 246, 0.2);
background: rgba(21, 29, 54, 0.62);
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.24);
}
[data-theme=’dark’] .stat-label,
[data-theme=’dark’] .category-desc,
[data-theme=’dark’] .profile-sub,
[data-theme=’dark’] .profile-stats span,
[data-theme=’dark’] .post-date,
[data-theme=’dark’] .notice-row,
[data-theme=’dark’] .notice-date {
color: var(—muted);
}
[data-theme=’dark’] .stat-value,
[data-theme=’dark’] .section-head h2,
[data-theme=’dark’] .side-title,
[data-theme=’dark’] .category-title,
[data-theme=’dark’] .post-body h3,
[data-theme=’dark’] .profile-name,
[data-theme=’dark’] .quote-card p {
color: var(—ink);
}
[data-theme=’dark’] .home-card {
border-color: rgba(166, 190, 246, 0.16);
background: var(—card-bg);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
}
[data-theme=’dark’] .motivation-scroll-fade {
background: #03050a;
}
[data-theme=’dark’] .category-row,
[data-theme=’dark’] .post-tile {
border-color: var(—line);
background: var(—row-bg);
color: var(—ink) !important;
}
[data-theme=’dark’] .category-row:hover {
border-color: rgba(143, 181, 255, 0.28);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}
[data-theme=’dark’] .daily-hot-image {
border-color: rgba(143, 181, 255, 0.16);
background: #151b30;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}
[data-theme=’dark’] .daily-hot-text {
color: #aebbe0;
}
[data-theme=’dark’] .history-field,
[data-theme=’dark’] .programmer-history-date,
[data-theme=’dark’] .history-event-desc,
[data-theme=’dark’] .history-event-meta span,
[data-theme=’dark’] .programmer-history-empty {
color: var(—muted);
}
[data-theme=’dark’] .history-field input {
border-color: rgba(143, 181, 255, 0.18);
color: var(—ink);
background: rgba(20, 28, 50, 0.84);
}
[data-theme=’dark’] .history-actions .history-today-btn,
[data-theme=’dark’] .history-year {
color: #c3d3ff;
background: rgba(143, 181, 255, 0.14);
}
[data-theme=’dark’] .programmer-history-event {
border-color: rgba(143, 181, 255, 0.16);
background: rgba(29, 38, 66, 0.66);
}
[data-theme=’dark’] .history-event-title {
color: var(—ink) !important;
}
[data-theme=’dark’] .history-event-meta span {
background: rgba(143, 181, 255, 0.12);
}
[data-theme=’dark’] .category-icon,
[data-theme=’dark’] .category-count {
background: var(—soft-bg);
}
[data-theme=’dark’] .category-row:nth-child(2) .category-icon { background: rgba(105, 214, 194, 0.14); }
[data-theme=’dark’] .category-row:nth-child(3) .category-icon { background: rgba(143, 181, 255, 0.14); }
[data-theme=’dark’] .category-row:nth-child(4) .category-icon { background: rgba(164, 154, 255, 0.14); }
[data-theme=’dark’] .category-row:nth-child(5) .category-icon { background: rgba(255, 173, 105, 0.14); }
[data-theme=’dark’] .profile-avatar {
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
}
[data-theme=’dark’] .profile-btn {
color: #101527 !important;
background: linear-gradient(135deg, #c1d4ff, #8fb5ff);
}
[data-theme=’dark’] .profile-links a {
color: #aebbe0 !important;
}
[data-theme=’dark’] .quote-card::before,
[data-theme=’dark’] .quote-card::after {
color: rgba(143, 181, 255, 0.2);
}
@media (max-width: 980px) {
.home-content {
grid-template-columns: 1fr;
}
.content-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.notice-card {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
page-header,
nav {
height: 70px !important;
}
nav {
top: 0 !important;
padding: 0 16px;
}
menus {
min-height: 48px;
padding: 4px 8px;
}
.home-hero {
min-height: 560px;
padding-top: 112px;
background-position: 60% 40%;
}
.hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 44px;
}
.home-content {
width: calc(100% - 24px);
margin-top: -34px;
}
.post-grid,
.content-main .programmer-history-list,
.content-side {
grid-template-columns: 1fr;
}
.content-main .programmer-history-form {
grid-template-columns: 1fr;
}
.content-main .history-actions {
grid-column: 1;
}
.category-row {
grid-template-columns: 48px minmax(0, 1fr) 34px;
}
.category-row > i {
display: none;
}
}
@media (max-width: 520px) {
.home-hero-inner {
width: calc(100% - 28px);
}
.hero-copy h1 {
font-size: 38px;
}
.hero-actions a {
flex: 1 1 140px;
}
.hero-stats {
grid-template-columns: 1fr;
}
.motivation-finale {
min-height: 86vh;
}
.motivation-finale-text {
top: 124px;
width: calc(100% - 28px);
}
.motivation-finale-text p {
max-width: calc(100vw - 128px);
font-size: 13px;
line-height: 1.58;
}
.motivation-finale-text::before {
margin-left: 15px;
font-size: 9px;
letter-spacing: 0.14em;
}
.motivation-finale-text p::before {
width: 18px;
margin-right: 9px;
}
.motivation-video,
.motivation-finale::before {
top: 168px;
}
.motivation-video {
height: calc(100% - 168px);
}
.motivation-scroll-fade {
height: 168px;
}
.motivation-audio-toggle {
right: 16px;
top: 120px;
min-height: 38px;
padding: 0 12px;
}
}
</style>





