/* ============================================================ Editorial News/Magazine theme — SEO-first, lightweight. No framework. System-font fallbacks (no external fetch → fast LCP). Per-domain accent identity is driven by CSS variables injected inline in (--theme-primary/secondary/soft, --font-heading/ body, --radius). Dark mode via html.dark + localStorage 'dm-mode'. ============================================================ */ :root { --gap: 16px; --container: 1200px; --header-h: 60px; --radius: 12px; /* Surfaces (light) */ --c-bg: #fdfdfc; --c-bg2: #f5f4f2; --c-bg3: #eeede9; --c-surface: #ffffff; --c-border: rgba(0, 0, 0, 0.08); --c-text: #1a1818; --c-text2: #374151; --c-text3: #6b7280; --c-text4: #9ca3af; --c-shadow: rgba(0, 0, 0, 0.06); /* Per-domain accent (overridden inline) */ --theme-primary: #1e3a8a; --theme-secondary: #1e40af; --theme-soft: #eef2ff; --font-heading: Lora, Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color-scheme: light; } html.dark { --c-bg: #0d1117; --c-bg2: #161b22; --c-bg3: #1e2431; --c-surface: #161b22; --c-border: rgba(255, 255, 255, 0.08); --c-text: #e6edf3; --c-text2: #b0bac6; --c-text3: #7d8fa0; --c-text4: #4d5f72; --c-shadow: rgba(0, 0, 0, 0.4); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-y: scroll; } body { margin: 0; background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; word-break: break-word; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: var(--c-text); line-height: 1.2; margin: 1.4rem 0 0.6rem; } h1 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 2.8rem); } h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.85rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } a { color: var(--theme-primary); text-decoration: none; } a:hover { text-decoration: underline; } p, ul, ol, blockquote, pre { margin-top: 0; margin-bottom: 1rem; } ul, ol { padding-left: 1.4rem; } img { display: block; max-width: 100%; height: auto; } table { width: 100%; border-collapse: collapse; border-spacing: 0; overflow-x: auto; word-break: keep-all; } th, td { border: 1px solid var(--c-border); padding: 0.5rem 0.75rem; } blockquote { border-left: 4px solid var(--theme-primary); padding: 0.5rem 1rem; color: var(--c-text2); margin: 0 0 1rem; } code, pre { font-family: SFMono-Regular, Menlo, Consolas, monospace; } code { background: var(--c-bg2); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; } pre { background: var(--c-bg3); color: var(--c-text); padding: 1rem; overflow-x: auto; border-radius: var(--radius); } pre code { background: none; padding: 0; } .font-heading { font-family: var(--font-heading); } /* ----- Container ----- */ .container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gap); padding-right: var(--gap); } /* ===== Header / Nav ===== */ .header { position: sticky; top: 0; z-index: 50; background-color: rgba(253, 253, 252, 0.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); transition: background-color 0.2s; } html.dark .header { background-color: rgba(13, 17, 23, 0.97); } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 1rem; } .logo-text { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.1; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 640px) { .logo-text { font-size: 1.6rem; } } .logo-dot { color: var(--theme-primary); } .nav-list { list-style: none; padding: 0; margin: 0; } .nav-list a { color: var(--c-text3); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .nav-list a:hover { color: var(--c-text); } .nav-active { color: var(--theme-primary) !important; } .desktop-nav { display: none; align-items: center; gap: 2rem; } .desktop-right { display: none; align-items: center; gap: 0.75rem; flex-shrink: 0; } .mobile-right { display: flex; align-items: center; gap: 0.5rem; } @media (min-width: 768px) { .desktop-nav { display: flex; } .desktop-right { display: flex; } .mobile-right { display: none; } } .all-cta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--theme-primary); white-space: nowrap; } .dm-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--c-border); background: transparent; cursor: pointer; color: var(--c-text3); transition: border-color 0.2s, color 0.2s; } .dm-btn:hover { border-color: var(--theme-primary); color: var(--theme-primary); } .dm-btn svg { width: 16px; height: 16px; } .dm-btn .ico-sun { display: none; } .dm-btn .ico-moon { display: block; } html.dark .dm-btn .ico-sun { display: block; } html.dark .dm-btn .ico-moon { display: none; } .nav-toggle { padding: 8px; background: none; border: none; cursor: pointer; color: var(--c-text); } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; width: 20px; height: 1px; background-color: var(--c-text); transition: all 0.3s; position: relative; } .hamburger::before { position: absolute; top: -7px; } .hamburger::after { position: absolute; top: 7px; } .nav-toggle-active .hamburger { background: transparent; } .nav-toggle-active .hamburger::before { transform: rotate(45deg); top: 0; } .nav-toggle-active .hamburger::after { transform: rotate(-45deg); top: 0; } .nav-menu { display: none; padding: 16px 20px; background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: 0 8px 32px var(--c-shadow); } .nav-menu-active { display: block !important; } .nav-search-form input { width: 100%; padding: 10px 16px; border-radius: 12px; font-size: 0.9rem; border: 1px solid var(--c-border); background-color: var(--c-bg2); color: var(--c-text); } .nav-mobile-only { display: flex; flex-direction: column; margin-top: 16px; } .nav-mobile-only li a { display: block; padding: 12px 0; font-size: 0.85rem; border-bottom: 1px solid var(--c-border); } .nav-mobile-only li:last-child a { border-bottom: 0; } /* ===== Hero ===== */ .hero { border-bottom: 1px solid var(--c-border); background-color: var(--c-surface); padding: 28px 0 48px; } .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; } @media (min-width: 1024px) { .hero-inner { flex-direction: row; gap: 4rem; } } .hero-text { flex: 1 1 50%; text-align: center; } @media (min-width: 1024px) { .hero-text { text-align: left; } } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.7rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-primary); background-color: var(--c-bg2); border: 1px solid var(--c-border); margin-bottom: 1.25rem; } .hero-pulse { width: 8px; height: 8px; border-radius: 50%; background-color: var(--theme-primary); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-title { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem); margin: 0 0 1.25rem; } .hero-title-accent { display: block; font-style: italic; color: var(--theme-primary); } .hero-lead { font-size: 1.05rem; color: var(--c-text2); margin: 0 0 2rem; max-width: 30rem; } @media (min-width: 1024px) { .hero-lead { margin-left: 0; margin-right: 0; } } .hero-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: 9999px; color: #fff; background-color: var(--theme-primary); font-weight: 700; box-shadow: 0 8px 20px var(--c-shadow); transition: opacity 0.2s, transform 0.2s; } .hero-cta:hover { opacity: 0.9; text-decoration: none; transform: translateY(-2px); } .hero-art { flex: 1 1 50%; width: 100%; } .hero-art img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1.75rem; box-shadow: 0 20px 40px var(--c-shadow); } .hero-art-fallback { display: block; aspect-ratio: 4/3; background-color: var(--c-bg3); border-radius: 1.75rem; } @media (max-width: 1023px) { .hero-art { display: none; } } /* ===== Home split ===== */ .home-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; scroll-margin-top: calc(var(--header-h) + 8px); } @media (min-width: 1024px) { .home-split { grid-template-columns: 60% 40%; gap: 4rem; } } .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--c-border); } .section-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .section-title-sm { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); text-transform: none; } .section-cta { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--theme-primary); } .top-news-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } @media (min-width: 640px) { .top-news-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.5rem; } } .top-news-card { display: flex; flex-direction: column; height: 100%; } .card-media { position: relative; display: block; width: 100%; padding-top: 60%; overflow: hidden; border-radius: 0.75rem; background-color: var(--c-bg2); margin-bottom: 1rem; } .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .top-news-card:hover .card-media img { transform: scale(1.04); } .card-media-fallback { position: absolute; inset: 0; background-color: var(--c-bg3); } .card-body { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; } .card-title { margin: 0 0 0.5rem; font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); font-weight: 700; line-height: 1.3; } .card-title a { color: var(--c-text); } .card-title a:hover { color: var(--theme-primary); text-decoration: none; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text3); margin-bottom: 0.6rem; } .card-meta .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--c-border); flex-shrink: 0; } .card-meta .views { display: inline-flex; align-items: center; gap: 0.2rem; } .card-excerpt { color: var(--c-text2); font-size: 0.9rem; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .latest-list { display: flex; flex-direction: column; } .latest-card { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--c-border); cursor: pointer; } .latest-card:hover .latest-title a { color: var(--theme-primary); } .latest-card:last-child { border-bottom: 0; } .latest-media { flex-shrink: 0; width: 120px; height: 120px; position: relative; overflow: hidden; border-radius: 0.5rem; background-color: var(--c-bg2); } .latest-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .latest-card:hover .latest-media img { transform: scale(1.04); } .latest-media-fallback { position: absolute; inset: 0; background-color: var(--c-bg3); } .latest-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .latest-title { margin: 0 0 0.35rem; font-size: clamp(1rem, 0.92rem + 0.4vw, 1.12rem); font-weight: 700; line-height: 1.35; } .latest-title a { color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .latest-excerpt { color: var(--c-text3); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .latest-date { font-size: 0.7rem; color: var(--c-text4); text-transform: uppercase; letter-spacing: 0.05em; } .home-cta-row { display: flex; justify-content: center; padding-top: 2.5rem; border-top: 1px solid var(--c-border); margin-top: 1rem; } /* ===== Post layout ===== */ .main-post, .main-page { padding-top: 1.5rem; padding-bottom: 3rem; } .breadcrumbs { margin-bottom: 1.1rem; font-size: 0.82rem; color: var(--c-text3); } .breadcrumbs a { color: var(--c-text3); } .breadcrumbs .sep { margin: 0 0.4em; } .post-wrapper { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 0.5rem; } @media (min-width: 1024px) { .post-wrapper { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; } } .post-content-area, .main-content { min-width: 0; } .post-header { margin-bottom: 1.5rem; } .post-title { margin: 0.5rem 0 0.85rem; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.15; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; color: var(--c-text3); font-size: 0.82rem; font-weight: 600; } .post-meta .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--c-border); } .post-meta .read-time::before { content: "\23F1"; margin-right: 4px; } .post-meta .views::before { content: "\1F441"; margin-right: 4px; } .featured-image { margin: 1.75rem 0; border-radius: var(--radius); overflow: hidden; background-color: var(--c-bg2); } .featured-image img { width: 100%; height: auto; display: block; object-fit: cover; } .featured-image figcaption { font-size: 0.82rem; color: var(--c-text3); padding: 6px 10px; text-align: center; } /* TOC */ .toc { margin: 1.5rem 0; padding: 1rem 1.25rem; background-color: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--radius); position: relative; } .toc-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--c-text); } .toc-toggle { position: absolute; top: 0.9rem; right: 1rem; border: none; background: none; cursor: pointer; font-size: 0.8rem; color: var(--c-text3); } .toc-list { margin: 0; padding-left: 1.2rem; } .toc-list li { margin-bottom: 0.3rem; font-size: 0.88rem; } .toc a { color: var(--c-text2); } .toc a:hover { color: var(--theme-primary); } .toc-hidden .toc-list { display: none; } .post-content { color: var(--c-text2); font-size: 1.05rem; line-height: 1.78; } .post-content > *:first-child { margin-top: 0; } .post-content p { margin-bottom: 1.2rem; } .post-content h2, .post-content h3 { scroll-margin-top: calc(var(--header-h) + 12px); color: var(--c-text); } .post-content h2 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.7rem); margin-top: 2.2rem; } .post-content h3 { font-size: 1.2rem; margin-top: 1.8rem; } .post-content a { color: var(--theme-primary); text-decoration: underline; text-underline-offset: 2px; } .post-content img { border-radius: 0.5rem; margin: 1.25rem 0; } /* Sidebar */ .sidebar { position: sticky; top: calc(var(--header-h) + 12px); height: fit-content; } .sidebar-widget, .bottom-related { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.25rem; } .widget-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--c-border); } .sidebar-post-list { list-style: none; padding: 0; margin: 0; } .sidebar-post-item { margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--c-border); } .sidebar-post-item:last-child { border: 0; margin: 0; padding: 0; } .sidebar-post-link { color: var(--c-text); font-size: 0.9rem; line-height: 1.4; display: block; } .sidebar-post-link:hover { color: var(--theme-primary); } .bottom-related-title { text-align: center; margin-bottom: 1rem; } .bottom-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.875rem; } .bottom-related-item { padding: 0.75rem; border: 1px solid var(--c-border); border-radius: 0.5rem; background-color: var(--c-surface); transition: border-color 0.2s; } .bottom-related-item:hover { border-color: var(--theme-primary); } .bottom-related-link { color: var(--c-text); font-size: 0.9rem; font-weight: 600; display: block; } .bottom-related-link:hover { color: var(--theme-primary); text-decoration: none; } /* Internal link chips */ .intext-link-list { margin: 1.6rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .intext-link { padding: 0.45rem 0.85rem; background-color: var(--c-bg2); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 0.375rem; font-size: 0.85rem; } .intext-link::before { content: "\2192"; margin-right: 6px; color: var(--c-text3); } .intext-link:hover { border-color: var(--theme-primary); color: var(--theme-primary); text-decoration: none; } /* Gallery */ .gallery-wrapper { margin: 2rem 0; padding: 1.25rem; background-color: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--radius); } .gallery-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; } .gallery-item { position: relative; padding-top: 100%; border-radius: 0.375rem; overflow: hidden; background-color: var(--c-bg3); cursor: pointer; } .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .gallery-item:hover img { transform: scale(1.05); } /* ===== Ad slots ===== */ .ad-slot-wrap { margin: 1.75rem 0; padding: 1rem; background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; content-visibility: auto; } .ad-slot-wrap::before { content: "Advertisement"; display: block; font-size: 10px; color: var(--c-text4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; opacity: 0.7; } .ad-slot-wrap--sidebar { min-height: 250px; } /* ===== Footer ===== */ .footer { background-color: var(--c-surface); border-top: 1px solid var(--c-border); margin-top: 3rem; padding-top: 2.5rem; } .footer-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; } @media (min-width: 768px) { .footer-layout { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-col-brand { display: flex; flex-direction: column; gap: 0.75rem; } .footer-desc { font-size: 0.82rem; color: var(--c-text3); line-height: 1.6; margin: 0; } .footer-col-title { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text4); margin-bottom: 0.75rem; } .footer-link { display: block; font-size: 0.82rem; color: var(--c-text3); padding: 0.2rem 0; } .footer-link:hover { color: var(--theme-primary); text-decoration: none; } .footer-bottom { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--c-border); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .footer-bottom p { margin: 0; font-size: 0.78rem; color: var(--c-text4); text-align: center; } .footer-bottom strong { color: var(--c-text3); } .footer-tag { letter-spacing: 0.04em; font-size: 0.72rem; } /* ===== Back to top ===== */ .top-link { position: fixed; bottom: 40px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: var(--theme-primary); color: #fff; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.25s; z-index: 40; box-shadow: 0 4px 12px var(--c-shadow); } .top-link svg { width: 16px; height: 16px; } .top-link.visible { visibility: visible; opacity: 0.9; } .top-link:hover { opacity: 1; text-decoration: none; } /* ===== Page (static) ===== */ .page-wrapper { max-width: 760px; margin: 0 auto; } .main-page .post-content { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem 1.75rem; } /* ===== Lightbox ===== */ .lightbox-overlay { position: fixed; inset: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; } .lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } /* ===== Energy / perf ===== */ img { content-visibility: auto; } .ad-slot-wrap, .gallery-item, .featured-image, .hero-art { content-visibility: auto; } /* Lazy ad slots reserve space before injection (avoid CLS). */ .ad-slot-wrap--lazy { min-height: 90px; } .ad-slot-wrap--lazy.ad-slot-wrap--sidebar { min-height: 250px; } /* ===== Section pill (topical category badge) ===== */ .section-pill { display: inline-block; max-width: 100%; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.35; padding: 0.24rem 0.55rem; border-radius: 5px; border: 1px solid var(--theme-primary); color: var(--theme-primary); margin-bottom: 0.55rem; align-self: flex-start; } .section-pill-sm { font-size: 0.55rem; margin-bottom: 0.35rem; padding: 0.18rem 0.42rem; } .post-header .section-pill { margin-bottom: 0.75rem; } /* Card body now starts with pill — ensure spacing. */ .card-body { gap: 0; } /* ===== Post author byline ===== */ .post-author { display: inline-flex; flex-direction: column; line-height: 1.2; } .post-author-name { font-weight: 700; color: var(--c-text); } .post-author-role { font-size: 0.7rem; color: var(--c-text4); } .sidebar-author-widget .sidebar-author-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.15rem; color: var(--c-text); } .sidebar-author-widget .sidebar-author-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--theme-primary); margin: 0 0 0.5rem; } .sidebar-author-widget .sidebar-author-bio { font-size: 0.84rem; color: var(--c-text3); line-height: 1.55; margin: 0; } /* ===== Archive page ===== */ .main-archive { padding-top: 1.5rem; padding-bottom: 3rem; } .archive-header { text-align: center; margin-bottom: 2rem; } .archive-title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin: 0 0 0.5rem; } .archive-sub { color: var(--c-text3); font-size: 0.9rem; margin: 0; } .archive-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } @media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (min-width: 1024px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } } /* ===== Pagination ===== */ .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 2.5rem; } .pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.8rem; background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0.5rem; color: var(--c-text2); font-size: 0.85rem; font-weight: 600; transition: border-color 0.15s, color 0.15s; } .pagination-link:hover { border-color: var(--theme-primary); color: var(--theme-primary); text-decoration: none; } .pagination-link-active { background-color: var(--theme-primary); border-color: var(--theme-primary); color: #fff; } .pagination-link-disabled { opacity: 0.4; cursor: default; } .pagination-ellipsis { display: inline-flex; align-items: center; padding: 0 0.4rem; color: var(--c-text4); } /* ===== Responsive (legacy positioning kept) ===== */ @media (max-width: 1023px) { .sidebar { position: static; } } @media (max-width: 768px) { :root { --gap: 14px; } .hero { padding-top: 20px; padding-bottom: 36px; } .latest-media { width: 96px; height: 96px; } } /* ===== Print ===== */ @media print { .header, .sidebar, .footer, .top-link, .ad-slot-wrap, .hero-cta, .home-cta-row { display: none !important; } .post-wrapper { grid-template-columns: 1fr !important; } body { color: #000; background: #fff; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }