/*===================================================== DESIGN TOKENS Central palette/spacing scale used by newer theme components (share buttons, dark mode, TOC, etc). Existing per-section CSS keeps its original hardcoded values untouched. ======================================================*/ :root{ --tss-primary:#0b5ed7; --tss-primary-dark:#083b8a; --tss-primary-light:#eef5ff; --tss-accent:#d50000; --tss-accent-dark:#a30000; --tss-text:#111111; --tss-text-muted:#6b7280; --tss-heading:#0f172a; --tss-bg:#ffffff; --tss-bg-alt:#f8fbff; --tss-border:#e5e7eb; --tss-radius-sm:6px; --tss-radius-md:10px; --tss-radius-lg:16px; --tss-shadow-sm:0 2px 8px rgba(15,23,42,.06); --tss-shadow-md:0 8px 24px rgba(15,23,42,.10); --tss-transition:all .2s ease; } /* Dark mode palette — toggled via [data-theme="dark"] on */ html[data-theme="dark"]{ --tss-primary:#4d8fef; --tss-primary-dark:#2563eb; --tss-primary-light:#132238; --tss-accent:#ff5757; --tss-accent-dark:#ff2e2e; --tss-text:#e5e7eb; --tss-text-muted:#9aa4b2; --tss-heading:#f1f5f9; --tss-bg:#0b0f19; --tss-bg-alt:#131826; --tss-border:#232a3a; } html[data-theme="dark"] body{ background:var(--tss-bg); color:var(--tss-text); } html[data-theme="dark"] .main-header, html[data-theme="dark"] .site-footer, html[data-theme="dark"] .home-post-card, html[data-theme="dark"] .sidebar-widget, html[data-theme="dark"] .related-card, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .dashboard-stat-card, html[data-theme="dark"] .dashboard-table-wrap{ background:var(--tss-bg-alt); border-color:var(--tss-border); color:var(--tss-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .home-post-title a, html[data-theme="dark"] .article-title{ color:var(--tss-heading); } html[data-theme="dark"] a{ color:var(--tss-primary); } html[data-theme="dark"] .desktop-menu > li > a, html[data-theme="dark"] .site-logo, html[data-theme="dark"] .header-search input{ color:var(--tss-text); } html[data-theme="dark"] .header-search input{ background:var(--tss-bg-alt); border-color:var(--tss-border); } /*========================================= PREMIUM HOME NEWS SECTION =========================================*/ .home-section{ padding:70px 0; background:#fff; } /*============================== SECTION HEADER ==============================*/ .home-section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; } .home-section-title{ position:relative; font-size:42px; font-weight:800; line-height:1.15; color:#111; margin:0; padding-left:22px; } .home-section-title:before{ content:""; position:absolute; left:0; top:4px; width:7px; height:48px; background:#d50000; border-radius:30px; } .home-section-link{ color:#111; text-decoration:none; font-size:16px; font-weight:700; transition:.3s; } .home-section-link:hover{ color:#d50000; } /*============================== GRID ==============================*/ .home-post-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } /*============================== CARD ==============================*/ .home-post-card{ background:#fff; border-radius:18px; overflow:hidden; transition:.35s ease; } .home-post-card:hover{ transform:translateY(-8px); box-shadow:0 15px 35px rgba(0,0,0,.12); } /*============================== IMAGE ==============================*/ .home-post-image{ position:relative; display:block; overflow:hidden; border-radius:18px; } .home-post-image img{ width:100%; height:220px; object-fit:cover; display:block; transition:.5s ease; } .home-post-card:hover .home-post-image img{ transform:scale(1.08); } /*============================== IMAGE OVERLAY ==============================*/ .home-post-image:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); } /*============================== DATE ==============================*/ .home-post-meta{ position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; font-size:14px; font-weight:600; } .home-post-meta span{ position:relative; padding-left:14px; } .home-post-meta span:before{ content:""; position:absolute; left:0; top:2px; width:4px; height:18px; border-radius:10px; background:#d50000; } /*============================== CONTENT ==============================*/ .home-post-content{ padding:18px 2px 0; } /*============================== TITLE ==============================*/ .home-post-title{ margin:0; font-size:22px; font-weight:700; line-height:1.45; } .home-post-title a{ color:#222; text-decoration:none; transition:.3s; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .home-post-title a:hover{ color:#d50000; } /*============================== EXCERPT ==============================*/ .home-post-excerpt{ margin-top:10px; font-size:15px; line-height:1.7; color:#666; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .home-post-excerpt{ display:none; } /*==============================* *LATEST SCIENCE* *Uses the same card styling as Space *==============================*/ .latest-grid{ display:grid; grid-template-columns:2fr 1fr; gap:30px; } .latest-sidebar{ display:flex; flex-direction:column; gap:20px; } /*============================== CATEGORY PAGE ==============================*/ .category-page{ padding:70px 0; } .category-description{ max-width:700px; color:#666; line-height:1.8; margin-top:15px; } .pagination-wrapper{ margin-top:50px; display:flex; justify-content:center; } .pagination .nav-links{ display:flex; gap:10px; } .pagination a, .pagination span{ width:45px; height:45px; display:flex; justify-content:center; align-items:center; border-radius:50%; border:1px solid #ddd; text-decoration:none; color:#111; font-weight:700; } .pagination .current, .pagination a:hover{ background:#d50000; color:#fff; border-color:#d50000; } /*============================== RESPONSIVE ==============================*/ @media(max-width:1200px){ .home-post-grid{ grid-template-columns:repeat(2,1fr); } .home-section-title{ font-size:36px; } } @media(max-width:991px){ .latest-grid{ grid-template-columns:1fr; } .latest-feature .home-post-image img{ height:320px; } } @media(max-width:768px){ .home-post-grid{ grid-template-columns:1fr; } .home-post-image img{ height:250px; } .home-post-title{ font-size:24px; } .home-section-title{ font-size:32px; } .home-section-header{ flex-direction:column; align-items:flex-start; gap:15px; } /* Card polish for mobile: give each card a defined edge, soft elevation, breathing room, and consistent rounding so cards read as distinct tappable units. */ .home-post-card{ border:1px solid #eee; box-shadow:0 4px 14px rgba(0,0,0,.06); border-radius:16px; margin-bottom:22px; } .home-post-card:last-child{ margin-bottom:0; } .home-post-image{ border-radius:16px 16px 0 0; } .home-post-image img{ border-radius:16px 16px 0 0; } .home-post-content{ padding:16px 16px 18px; } .home-post-title{ font-size:19px; line-height:1.4; } .latest-small .home-post-title{ font-size:17px; } .home-post-meta{ left:14px; bottom:14px; } .home-post-meta span{ background:rgba(0,0,0,.35); padding:5px 10px 5px 16px; border-radius:20px; backdrop-filter:blur(2px); } .home-post-meta span:before{ left:8px; top:8px; height:11px; } .latest-sidebar{ gap:22px; } }