/* ========================================================================= ScholarCareer — Main Stylesheet (Mobile-First) Written mobile-first: unprefixed rules target small screens; min-width media queries layer on tablet/desktop enhancements. Sections: 1. Design Tokens 6. Post Grid / Cards 11. Author Box & Share 2. Reset & Base 7. Single Post 12. Footer 3. Accessibility 8. TOC & Post Nav 13. Pagination & Misc 4. Layout & Containers 9. Sidebar & Widgets 14. Reading Progress/Top 5. Header & Navigation 10. Comments ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design Tokens ------------------------------------------------------------------------- */ :root { /* Brand (all overridable from Appearance > Customize > Theme Colors) */ --sc-primary: #0f766e; --sc-primary-dark: #0b5c56; --sc-primary-light: #e6f5f4; --sc-accent: #4f46e5; --sc-link: var(--sc-primary); /* Header / Footer */ --sc-header-bg: #111827; --sc-header-bg-2: #1f2937; --sc-header-text: #f8fafc; --sc-header-icon: #f8fafc; --sc-footer-bg: #111827; --sc-footer-text: #cbd5e1; /* Neutrals */ --sc-ink: #111827; --sc-body: #374151; --sc-muted: #6b7280; --sc-border: #e5e7eb; --sc-surface: #ffffff; --sc-surface-alt: #f8fafc; --sc-widget-bg: var(--sc-surface); --sc-meta-box-bg: var(--sc-surface-alt); --sc-badge-bg: var(--sc-primary-light); --sc-badge-text: var(--sc-primary-dark); --sc-button-text: #ffffff; --sc-mobile-sidebar-bg: var(--sc-surface); --sc-mobile-sidebar-text: var(--sc-ink); --sc-verified: #1d9bf0; /* Typography */ --sc-font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sc-font: var(--sc-font-fallback); --sc-fs-base: 17px; --sc-content-fs: 20px; --sc-lh-base: 1.7; /* Spacing scale */ --sc-space-1: 4px; --sc-space-2: 8px; --sc-space-3: 12px; --sc-space-4: 16px; --sc-space-5: 24px; --sc-space-6: 32px; --sc-space-8: 48px; /* Shape & elevation */ --sc-radius-sm: 6px; --sc-radius: 10px; --sc-radius-lg: 16px; --sc-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --sc-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); --sc-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* Layout */ --sc-container: 1200px; --sc-header-height: 64px; --sc-header-height-desktop: 72px; --sc-logo-height: 40px; --sc-bottom-nav-height: 60px; } /* Dark mode: toggled via .dark-mode on , see js/theme.js */ html.dark-mode { --sc-ink: #f1f5f9; --sc-body: #cbd5e1; --sc-muted: #94a3b8; --sc-border: #2a3444; --sc-surface: #1a2130; --sc-surface-alt: #10141c; --sc-primary-light: #12332f; --sc-widget-bg: #1a2130; --sc-meta-box-bg: #10141c; --sc-mobile-sidebar-bg: #1a2130; --sc-mobile-sidebar-text: #f1f5f9; --sc-badge-bg: #12332f; --sc-badge-text: #5eead4; /* Header always switches to a dark background with light text/icons in dark mode, regardless of the custom header colors chosen in the Customizer (those apply to light mode only). A class selector on outranks the plain :root rule the Customizer prints, so this always wins without needing !important. */ --sc-header-bg: #0d121b; --sc-header-bg-2: #171e2b; --sc-header-text: #f1f5f9; --sc-header-icon: #f1f5f9; } html.dark-mode .post-thumb img, html.dark-mode .author-avatar img { opacity: 0.92; } /* ------------------------------------------------------------------------- 2. Reset & Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; overflow-y: visible; width: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; width: 100%; overflow-x: clip; overflow-y: visible; font-family: var(--sc-font); font-size: var(--sc-fs-base); line-height: var(--sc-lh-base); color: var(--sc-body); background: var(--sc-surface-alt); padding-top: var(--sc-header-height); padding-bottom: var(--sc-bottom-nav-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; } body.sc-header-static { padding-top: 0; } body.sc-no-bottom-nav { padding-bottom: 0; } @media (min-width: 900px) { body { padding-top: var(--sc-header-height-desktop); } body.sc-header-static { padding-top: 0; } } img, iframe, video, table, embed, object { max-width: 100%; } img { height: auto; display: block; } svg { flex-shrink: 0; } a { color: var(--sc-link); text-decoration: none; font-weight: 600; } a:hover, a:focus { color: var(--sc-primary-dark); } .single-post .post-content a { text-decoration: underline; text-underline-offset: 2px; } button { font-family: inherit; } hr { border: none; border-top: 1px solid var(--sc-border); margin: var(--sc-space-6) 0; } /* ------------------------------------------------------------------------- 3. Accessibility ------------------------------------------------------------------------- */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .skip-link { position: fixed; top: -60px; left: 8px; z-index: 999; background: var(--sc-ink); color: #fff; padding: 10px 18px; border-radius: var(--sc-radius-sm); font-weight: 700; transition: top 0.15s ease; } .skip-link:focus { top: 8px; clip: auto; width: auto; height: auto; overflow: visible; white-space: normal; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; } /* So clicking the comment-count link in the post meta scrolls the comments section into view below the fixed header, not behind it. */ #comments { scroll-margin-top: calc(var(--sc-header-height) + var(--sc-space-5)); } body.sc-header-static #comments { scroll-margin-top: var(--sc-space-5); } @media (min-width: 900px) { #comments { scroll-margin-top: calc(var(--sc-header-height-desktop) + var(--sc-space-5)); } body.sc-header-static #comments { scroll-margin-top: var(--sc-space-5); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------- 4. Layout & Containers ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--sc-container); margin-inline: auto; padding-inline: var(--sc-space-4); } .content-area { display: block; width: 100%; max-width: var(--sc-container); margin-inline: auto; padding: var(--sc-space-4); } .content-area .main-content { width: 100%; min-width: 0; } .content-area .sidebar { width: 100%; margin-top: var(--sc-space-5); } @media (min-width: 640px) { .container, .content-area { padding-inline: var(--sc-space-5); } } /* Desktop: CSS Grid two-column layout. Grid rows stretch every item to the same height by default — this is what actually gives the sticky sidebar column somewhere to travel before it locks at the bottom. */ @media (min-width: 900px) { .content-area { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sc-space-6); padding: var(--sc-space-6) var(--sc-space-5); } .content-area .sidebar { margin-top: 0; } .content-area.sidebar-left { grid-template-columns: 300px minmax(0, 1fr); } .content-area.sidebar-left .sidebar { grid-column: 1; grid-row: 1; } .content-area.sidebar-left .main-content { grid-column: 2; grid-row: 1; } /* Single posts can turn the sidebar off entirely (Customize > Single Post Settings) — collapse back to one full-width column. */ .content-area.sidebar-none { grid-template-columns: minmax(0, 1fr); } } /* Edge-to-edge layout: content fills the full browser width */ body.sc-wide-content .container, body.sc-wide-content .content-area, body.sc-wide-content .top-bar, body.sc-wide-content .footer-widgets, body.sc-wide-content .footer-menu, body.sc-wide-content .footer-bottom { max-width: none; } /* ------------------------------------------------------------------------- 5. Typography ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--sc-ink); line-height: 1.3; margin: 1.4em 0 0.6em; } h1 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); } h2 { font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem); } h3 { font-size: 1.2rem; } h4 { font-size: 1.05rem; } h5 { font-size: 1rem; } h6 { font-size: 0.9375rem; } p { margin: 0 0 1.1em; } .author-box p { margin-bottom: 0.4em; } blockquote { font-style: italic; border-left: 4px solid var(--sc-primary); margin: 1.5em 0; padding: 0.75em 1.25em; background: var(--sc-surface-alt); color: var(--sc-muted); border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0; } @media (min-width: 900px) { body { font-size: var(--sc-fs-base); line-height: var(--sc-lh-base); } } /* ------------------------------------------------------------------------- 6. Header & Navigation ------------------------------------------------------------------------- */ .custom-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--sc-header-bg); box-shadow: var(--sc-shadow-sm); } /* Premium hairline accent along the bottom edge of the header, desktop only */ @media (min-width: 900px) { .custom-header { box-shadow: 0 1px 0 rgba(255,255,255,0.06), var(--sc-shadow); border-bottom: 1px solid rgba(255,255,255,0.06); } body.sc-header-style-glass .custom-header { border-bottom-color: rgba(255,255,255,0.1); } } /* Header background style variants, chosen from Appearance > Customize */ body.sc-header-style-gradient .custom-header { background: linear-gradient(115deg, var(--sc-header-bg) 0%, var(--sc-header-bg-2) 100%); } body.sc-header-style-glass .custom-header { background: color-mix(in srgb, var(--sc-header-bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); } body.sc-header-static .custom-header { position: relative; } body.sc-header-static { padding-top: 0 !important; } .top-bar { display: flex; align-items: center; justify-content: space-between; height: var(--sc-header-height); max-width: var(--sc-container); margin-inline: auto; padding-inline: var(--sc-space-4); gap: var(--sc-space-2); } @media (min-width: 640px) { .top-bar { padding-inline: var(--sc-space-5); } } @media (min-width: 900px) { .top-bar { height: var(--sc-header-height-desktop); gap: var(--sc-space-5); } } .menu-toggle, .search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; color: var(--sc-header-icon); font-size: 1.1rem; cursor: pointer; border-radius: var(--sc-radius-sm); transition: background 0.15s ease, transform 0.15s ease; } .menu-toggle:hover, .search-toggle:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); } .menu-toggle:active, .search-toggle:active { transform: translateY(0); } .site-logo { display: flex; align-items: center; justify-content: center; line-height: 1.1; text-align: center; min-width: 0; flex: 1; } @media (min-width: 900px) { .site-logo { flex: 0 0 auto; justify-content: flex-start; text-align: left; padding-right: var(--sc-space-5); margin-right: var(--sc-space-2); border-right: 1px solid rgba(255,255,255,0.1); } } .site-title-link { color: inherit; display: inline-block; max-width: 100%; overflow: hidden; } .site-logo a:hover, .site-logo a:focus { color: inherit; background: transparent; } .custom-logo-link { display: flex; align-items: center; } .custom-logo { max-height: var(--sc-logo-height, 40px); width: auto; display: block; } .site-title { font-size: 1.2rem; font-weight: 900; color: var(--sc-header-text); letter-spacing: 0.3px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-tagline { font-size: 0.75rem; font-weight: 400; color: var(--sc-header-text); opacity: 0.75; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 480px) { .site-title { font-size: 1.3rem; } .site-tagline { font-size: 0.8rem; } } .header-actions { display: flex; align-items: center; gap: var(--sc-space-1); flex-shrink: 0; } @media (min-width: 900px) { .header-actions { padding-left: var(--sc-space-4); margin-left: var(--sc-space-2); border-left: 1px solid rgba(255,255,255,0.1); } } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--sc-header-icon); font-size: 1.05rem; cursor: pointer; background: transparent; border: none; border-radius: var(--sc-radius-sm); } .theme-toggle:hover { background: rgba(255,255,255,0.1); } html.dark-mode .theme-toggle i::before { content: "\f185"; } /* sun icon when dark mode is active */ /* Desktop nav: hidden on mobile, shown inline in the top bar from tablet-landscape up, filling the space between logo and header actions */ .desktop-menu { display: none; } @media (min-width: 900px) { .desktop-menu { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; } .menu-toggle { display: none; } } .desktop-nav-menu { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 0; } .desktop-nav-menu li { position: relative; } .desktop-nav-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 9px 12px; color: var(--sc-header-text); opacity: 0.88; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.1px; border-radius: var(--sc-radius-sm); position: relative; transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease; } .desktop-nav-menu > li > a i:first-child { color: var(--sc-header-icon); font-size: 0.85em; opacity: 0.85; } /* Animated underline on hover/active — premium touch */ .desktop-nav-menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .desktop-nav-menu > li > a:hover, .desktop-nav-menu > li > a:focus { background: rgba(255,255,255,0.08); opacity: 1; color: var(--sc-header-text); } .desktop-nav-menu > li > a:hover::after, .desktop-nav-menu > li > a:focus::after, .desktop-nav-menu > li.current-menu-item > a::after, .desktop-nav-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } .desktop-nav-menu > li.current-menu-item > a, .desktop-nav-menu > li.current-menu-ancestor > a { opacity: 1; } /* Chevron indicator for items that have a submenu */ .desktop-nav-menu li.menu-item-has-children > a::before { content: "\f078"; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.62em; margin-left: 2px; opacity: 0.7; order: 3; transition: transform 0.2s ease; } .desktop-nav-menu li.menu-item-has-children:hover > a::before, .desktop-nav-menu li.menu-item-has-children:focus-within > a::before { transform: rotate(180deg); } .desktop-nav-menu .sub-menu { list-style: none; margin: 0; padding: 6px; position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 230px; background: var(--sc-surface); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-lg); border: 1px solid var(--sc-border); border-top: 2px solid var(--sc-primary); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } body.sc-dropdown-none .desktop-nav-menu .sub-menu { transition: none; } .desktop-nav-menu li:hover > .sub-menu, .desktop-nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(4px); } .desktop-nav-menu .sub-menu li { position: relative; } .desktop-nav-menu .sub-menu a { display: flex; align-items: center; gap: 8px; color: var(--sc-body); padding: 8px 10px; border-radius: var(--sc-radius-sm); font-weight: 500; font-size: 0.875rem; } .desktop-nav-menu .sub-menu a i:first-child { color: var(--sc-primary); width: 16px; text-align: center; } .desktop-nav-menu .sub-menu a:hover { background: var(--sc-primary-light); color: var(--sc-primary-dark); } /* Nested (3rd-level) submenus flow out to the side */ .desktop-nav-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-top: 0; margin-left: 4px; } .desktop-nav-menu .sub-menu li.menu-item-has-children > a::after { content: "\f054"; /* fa-chevron-right */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6em; margin-left: auto; opacity: 0.55; } /* Search box (toggled via inline display by theme.js) */ .search-box { display: none; background: var(--sc-surface); border-top: 1px solid var(--sc-border); } .search-box form { display: flex; gap: var(--sc-space-2); max-width: var(--sc-container); margin-inline: auto; padding: var(--sc-space-3) var(--sc-space-4); } .search-box input[type="search"] { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); font-size: 1rem; } .search-box input[type="search"]:focus { outline: none; border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sc-primary-light); } .search-box button { background: var(--sc-primary); color: var(--sc-button-text); border: none; padding: 0 20px; border-radius: var(--sc-radius-sm); font-weight: 600; cursor: pointer; } .search-box button:hover { background: var(--sc-primary-dark); } /* Mobile off-canvas sidebar menu */ .sidebarr { position: fixed; top: 0; left: 0; width: min(300px, 86vw); height: 100%; background: var(--sc-mobile-sidebar-bg); color: var(--sc-mobile-sidebar-text); z-index: 200; padding: 0 var(--sc-space-5) var(--sc-space-5); overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.22,.9,.32,1), box-shadow 0.3s ease; box-shadow: none; } .sidebarr.active { transform: translateX(0); box-shadow: var(--sc-shadow-lg); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); z-index: 190; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* Branded header pinned to the top of the mobile sidebar */ .sidebarr-brand { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-3); background: var(--sc-mobile-sidebar-bg); padding: var(--sc-space-4) 0; margin-bottom: var(--sc-space-2); border-bottom: 1px solid var(--sc-border); z-index: 2; } .sidebarr-brand .custom-logo { max-height: 32px; width: auto; } .sidebarr-brand-title { font-weight: 800; font-size: 1.05rem; color: var(--sc-mobile-sidebar-text); } .close-sidebarr { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--sc-mobile-sidebar-text); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .close-sidebarr:hover { background: var(--sc-surface-alt); transform: rotate(90deg); } .sidebarr-menu { list-style: none; margin: 0; padding: 0; } .sidebarr-menu a { display: flex; align-items: center; gap: 10px; padding: 13px 6px; color: var(--sc-mobile-sidebar-text); font-weight: 600; font-size: 0.98rem; border-bottom: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); transition: color 0.15s ease, background 0.15s ease; } .sidebarr-menu a i:first-child { color: var(--sc-primary); width: 20px; text-align: center; flex-shrink: 0; font-size: 0.95em; } .sidebarr-menu a:hover { color: var(--sc-primary); background: var(--sc-primary-light); } .sidebarr-menu li.menu-item-has-children > a { position: relative; } .sidebarr-menu li.menu-item-has-children > a::after { content: "\f078"; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.68rem; margin-left: auto; color: var(--sc-muted); transition: transform 0.25s ease; } .sidebarr-menu li.open > a::after { transform: rotate(180deg); } .sidebarr-menu .sub-menu { list-style: none; margin: 0; padding-left: var(--sc-space-4); max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .sidebarr-menu .sub-menu a { font-size: 0.9rem; font-weight: 500; padding: 11px 6px; } .sidebarr-menu .sub-menu a i:first-child { font-size: 0.8em; opacity: 0.85; } .sidebarr-menu li.open > a { color: var(--sc-primary); } html.no-scroll, html.no-scroll body { overflow: hidden; } /* Bottom nav (mobile only) */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--sc-surface); border-top: 1px solid var(--sc-border); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08); height: var(--sc-bottom-nav-height); } @media (min-width: 900px) { .bottom-nav { display: none; } } .bottom-nav .menu-items { list-style: none; display: flex; margin: 0; padding: 0; height: 100%; } .bottom-nav .menu-items li { flex: 1; min-width: 0; } .bottom-nav .menu-items a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 3px; padding: 8px 2px; font-size: 0.66rem; font-weight: 600; color: var(--sc-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-nav .menu-items a i { font-size: 1.05rem; } .bottom-nav .menu-items a:hover, .bottom-nav .menu-items a:focus { color: var(--sc-primary); } /* ------------------------------------------------------------------------- 7. Post Grid / Cards — LIST view on mobile, GRID view on desktop ------------------------------------------------------------------------- */ .section-title { position: relative; display: flex; align-items: center; gap: var(--sc-space-3); background: var(--sc-primary-light); color: var(--sc-primary-dark); padding: var(--sc-space-3) var(--sc-space-4); border-radius: var(--sc-radius-sm); border-left: 4px solid var(--sc-primary); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin: var(--sc-space-6) 0 var(--sc-space-4); } .section-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sc-primary) 0%, transparent 100%); opacity: 0.35; } .homepage-grid .section-title:first-child { margin-top: 0; } /* Per-section mobile view override — set from Customize > Homepage Sections > "Section N — Mobile View". Grid keeps the section on 2 columns on mobile instead of the default single-column list. */ .post-grid.mobile-grid-2 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sc-space-3) !important; } .post-grid.mobile-grid-2 .post-card { flex-direction: column !important; } .post-grid.mobile-grid-2 .post-thumb { flex: none !important; width: 100% !important; } .post-grid.mobile-grid-2 .post-thumb img { aspect-ratio: 4 / 3 !important; } .post-grid.mobile-grid-2 .post-card .post-title { font-size: 0.98rem !important; -webkit-line-clamp: 3 !important; } .post-grid.mobile-grid-2 .post-card .post-excerpt, .post-grid.mobile-grid-2 .post-card .read-more { display: none !important; } /* Discover Feed layout — large full-width image on top, title + meta below, single column, like Google Discover on Chrome mobile. Desktop (900px+) falls back to the standard 3-column grid card. */ @media (max-width: 899px) { .post-grid.mobile-discover { grid-template-columns: 1fr !important; gap: var(--sc-space-5) !important; } .mobile-discover .post-card { flex-direction: column !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid var(--sc-border) !important; padding-bottom: var(--sc-space-4); } .mobile-discover .post-thumb { flex: none !important; width: 100% !important; border-radius: var(--sc-radius-lg) !important; align-self: auto !important; } .mobile-discover .post-thumb img { aspect-ratio: 16 / 9 !important; height: auto !important; } .mobile-discover .post-card .post-content { padding: var(--sc-space-3) 0 0 !important; } .mobile-discover .post-card .post-title { font-size: 1.15rem !important; -webkit-line-clamp: 3 !important; order: 1; } .mobile-discover .post-meta { order: 2; margin-top: 4px !important; } .mobile-discover .post-card .post-excerpt, .mobile-discover .post-card .read-more { display: none !important; } } /* Desktop: Discover Feed sections use the same 3-column grid as every other section — this rule just guarantees it even if a narrower custom container width is set. */ @media (min-width: 900px) { .post-grid.mobile-discover { grid-template-columns: repeat(3, 1fr) !important; } } /* Related Posts: 2-column grid on mobile/tablet (not the default list), unless "List" layout is chosen in Customize > Single Post Settings */ @media (max-width: 1199.98px) { .related-posts .post-grid:not(.related-layout-list) { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sc-space-3) !important; } } /* Desktop: 3 columns by default, matching the theme's main post-grid 3-column breakpoint. */ @media (min-width: 1200px) { .related-posts .post-grid:not(.related-layout-list) { grid-template-columns: repeat(3, 1fr) !important; gap: var(--sc-space-5) !important; } } .related-posts .post-grid:not(.related-layout-list) .post-card { flex-direction: column !important; } .related-posts .post-grid:not(.related-layout-list) .post-thumb { flex: none !important; width: 100% !important; } .related-posts .post-grid:not(.related-layout-list) .post-thumb img { aspect-ratio: 4 / 3 !important; } .related-posts .post-grid:not(.related-layout-list) .post-card .post-title { font-size: 1.05rem !important; -webkit-line-clamp: 4 !important; } .related-posts .post-grid:not(.related-layout-list) .post-card .post-excerpt, .related-posts .post-grid:not(.related-layout-list) .post-card .read-more { display: none !important; } /* Related posts meta: plain date only, no pill box/border */ .related-posts .post-meta { border: none !important; background: none !important; padding: 0 !important; margin-bottom: 4px !important; } .related-posts .post-meta span, .related-posts .post-meta .post-date { background: none !important; border: none !important; padding: 0 !important; } /* Related posts: strip the meta box/pill styling (no border, no background — just a bare publish date) and let the title show more words */ .related-posts .post-card .post-meta { background: none !important; border: none !important; padding: 0 !important; margin-bottom: 6px !important; } .related-posts .post-card .post-meta span, .related-posts .post-card .post-meta .post-date, .related-posts .post-card .post-meta .post-author { background: none !important; border: none !important; padding: 0 !important; } .related-posts .post-card .post-title { -webkit-line-clamp: 4 !important; font-size: 1.02rem !important; } /* Mobile-first default: single-column LIST layout */ .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-3); align-items: stretch; } .post-card { background: var(--sc-surface); border-radius: var(--sc-radius); overflow: hidden; box-shadow: var(--sc-shadow-sm); border: 1px solid var(--sc-border); display: flex; flex-direction: row; align-items: stretch; height: 100%; transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease; } .post-thumb { display: block; overflow: hidden; flex: 0 0 112px; width: 112px; position: relative; background: var(--sc-surface-alt); align-self: stretch; } .post-thumb .image-wrapper { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; } .post-thumb picture { display: block; width: 100%; height: 100%; } .post-thumb img { width: 100%; height: 100%; aspect-ratio: unset; object-fit: cover; object-position: center; display: block; } .post-card .post-content { padding: var(--sc-space-3); display: flex; flex-direction: column; flex: 1; min-width: 0; justify-content: center; } .post-card .post-title { font-size: 1.05rem; margin: 0 0 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card .post-title a { color: var(--sc-ink); font-weight: 700; } .post-card .post-title a:hover { color: var(--sc-primary); } /* Compact "boxed" meta pill row — premium, replaces plain inline text */ .post-meta { font-size: 0.64rem; color: var(--sc-muted); display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .post-meta::-webkit-scrollbar { display: none; } .post-meta span, .post-meta .post-date, .post-meta .post-author { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; background: var(--sc-meta-box-bg); border: 1px solid var(--sc-border); border-radius: 999px; padding: 1px 7px; line-height: 1.6; } .post-meta a { color: inherit; font-weight: 500; } .post-meta a:hover { color: var(--sc-primary); } /* Excerpt + Read More are hidden in compact mobile list rows to keep the list scannable and lightweight; they return in the desktop grid view. */ .post-card .post-excerpt, .post-card .read-more { display: none; } /* Desktop / tablet: switch to GRID card layout */ @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sc-space-4); } .post-card { flex-direction: column; } .post-thumb { flex: none; width: 100%; } .post-thumb img { aspect-ratio: 16 / 9; transition: transform 0.4s cubic-bezier(.22,.9,.32,1); } /* Asymmetric premium framing: image bleeds slightly past the card edge with an offset corner accent — set from Layout & Container in the Customizer. Falls back cleanly to a classic crop when disabled. */ body.sc-card-style-asymmetric .post-thumb { aspect-ratio: 4 / 3; border-radius: 0 0 26px 0; margin: -1px -1px 0 -1px; width: calc(100% + 2px); } body.sc-card-style-asymmetric .post-thumb img { aspect-ratio: 4 / 3; } body.sc-card-style-asymmetric .post-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(15,23,42,0.35) 100%); pointer-events: none; } body.sc-card-style-classic .post-thumb img { aspect-ratio: 16 / 9; } @media (hover: hover) { .post-thumb:hover img { transform: scale(1.06); } } .post-card .post-content { padding: var(--sc-space-4); height: 100%; } /* Uniform card sizing: title clamps to 2 lines and excerpt to 3 lines regardless of length, so every card in a row matches height. */ .post-card .post-title { font-size: 1.05rem; -webkit-line-clamp: 2; min-height: calc(1.4em * 2); } .post-meta { font-size: 0.75rem; } .post-card .post-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.92rem; color: var(--sc-body); margin-bottom: var(--sc-space-3); flex: 1; } .post-card .read-more { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: auto; font-size: 0.85rem; font-weight: 700; color: var(--sc-primary); transition: gap 0.15s ease; } .post-card:hover { box-shadow: var(--sc-shadow); border-color: var(--sc-primary); transform: translateY(-2px); } .post-card:hover .read-more { gap: 8px; } } @media (min-width: 900px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-5); } } .read-more::after { content: "\2192"; } /* ------------------------------------------------------------------------- 8. Single Post ------------------------------------------------------------------------- */ .breadcrumb { font-size: 0.82rem; color: var(--sc-muted); margin-bottom: var(--sc-space-3); overflow-x: auto; white-space: nowrap; } .breadcrumb a { color: var(--sc-muted); font-weight: 500; } .breadcrumb a:hover { color: var(--sc-primary); } article.single-post, article.single-page { background: var(--sc-surface); border-radius: var(--sc-radius); padding: var(--sc-space-4); box-shadow: var(--sc-shadow-sm); border: 1px solid var(--sc-border); } @media (min-width: 640px) { article.single-post, article.single-page { padding: var(--sc-space-6); border-radius: var(--sc-radius-lg); } } .post-category { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin-bottom: var(--sc-space-3); } .post-category a { background: var(--sc-badge-bg); color: var(--sc-badge-text); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; transition: transform 0.15s ease; } .post-category a:hover { transform: translateY(-1px); } .post-title { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.1rem); margin: 0 0 var(--sc-space-3); } article.single-post .post-meta { font-size: 0.82rem; padding-bottom: var(--sc-space-4); margin-bottom: var(--sc-space-4); border-bottom: 1px solid var(--sc-border); } /* Boxed premium meta style (default) */ .single-post-meta-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--sc-meta-box-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: var(--sc-space-3) var(--sc-space-4); margin-bottom: var(--sc-space-4); font-size: 0.85rem; } .single-post-meta-box .meta-item { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-body); } .single-post-meta-box .meta-item i { color: var(--sc-primary); font-size: 0.9em; } .single-post-meta-box .meta-item a { color: var(--sc-body); font-weight: 600; } .single-post-meta-box .meta-item a:hover { color: var(--sc-primary); } .single-post-meta-box .meta-divider { color: var(--sc-border); } /* Plain style: falls back to simple inline text with dividers */ .single-post-meta-plain { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--sc-muted); font-size: 0.85rem; padding-bottom: var(--sc-space-4); margin-bottom: var(--sc-space-4); border-bottom: 1px solid var(--sc-border); } .single-post-meta-plain a { color: var(--sc-muted); font-weight: 600; } .single-post-meta-plain a:hover { color: var(--sc-primary); } .post-content, .entry-content { font-size: var(--sc-content-fs, 20px); } .post-content img, .featured-image, .entry-content img { border-radius: var(--sc-radius); margin: var(--sc-space-4) auto; display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; } .post-content figure, .entry-content figure { margin: var(--sc-space-4) 0; } .post-content figcaption, .entry-content figcaption { font-size: 0.85rem; color: var(--sc-muted); text-align: center; margin-top: var(--sc-space-2); } /* Featured image: premium, centered card treatment */ .post-content .post-thumbnail, .entry-content .post-thumbnail { margin: var(--sc-space-6) auto; text-align: center; } .post-content .post-thumbnail .image-wrapper, .entry-content .post-thumbnail .image-wrapper { border-radius: var(--sc-radius-lg); overflow: hidden; border: 1px solid var(--sc-border); box-shadow: var(--sc-shadow); background: var(--sc-surface-alt); max-width: 600px; margin: 0 auto; } .post-content .post-thumbnail .image-wrapper img, .entry-content .post-thumbnail .image-wrapper img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; object-fit: cover; } .post-content .post-thumbnail .wp-caption-text, .entry-content .post-thumbnail .wp-caption-text { font-size: 0.85rem; font-style: italic; color: var(--sc-muted); text-align: center; line-height: 1.5; margin: var(--sc-space-2) auto 0; padding: 0 var(--sc-space-3); max-width: 90%; } /* Social/video embeds: contained, centered, never wider than the article column. Covers plain oEmbed iframes (YouTube, Vimeo, maps) given a responsive aspect-ratio box, plus block-editor embed wrappers and the common social-widget classes (Twitter/X, Instagram, TikTok, Facebook), which size themselves and just need centering + a hard width cap. */ .post-content .wp-has-aspect-ratio, .entry-content .wp-has-aspect-ratio { position: relative; height: 0; padding-top: 56.25%; max-width: 100%; overflow: hidden; margin: var(--sc-space-5) auto; border-radius: var(--sc-radius-sm); } .post-content .wp-embed-aspect-4-3, .entry-content .wp-embed-aspect-4-3 { padding-top: 75%; } .post-content .wp-embed-aspect-1-1, .entry-content .wp-embed-aspect-1-1 { padding-top: 100%; } .post-content .wp-embed-aspect-9-16, .entry-content .wp-embed-aspect-9-16 { padding-top: 177.78%; } .post-content .wp-has-aspect-ratio iframe, .entry-content .wp-has-aspect-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .post-content iframe, .entry-content iframe { display: block; max-width: 100%; margin: var(--sc-space-5) auto; border: 0; border-radius: var(--sc-radius-sm); } .post-content .wp-block-embed, .entry-content .wp-block-embed, .post-content .twitter-tweet, .entry-content .twitter-tweet, .post-content .instagram-media, .entry-content .instagram-media, .post-content .tiktok-embed, .entry-content .tiktok-embed, .post-content .fb-post, .entry-content .fb-post, .post-content .fb-video, .entry-content .fb-video { max-width: 100% !important; margin: var(--sc-space-5) auto !important; } .post-content .wp-block-embed__wrapper, .entry-content .wp-block-embed__wrapper { display: flex; justify-content: center; } /* Text-only banner style (default look, refined) */ .inline-related-post-box { background: var(--sc-primary-light); border-left: 4px solid var(--sc-primary); border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0; padding: var(--sc-space-3) var(--sc-space-4); margin: var(--sc-space-5) 0; font-size: 0.9rem; } .inline-related-post-box strong { color: var(--sc-primary-dark); } /* Boxed premium style with thumbnail */ .inline-related-post-box.inline-related-boxed { display: flex; align-items: center; gap: var(--sc-space-3); background: var(--sc-surface); border: 1px solid var(--sc-border); border-left: 4px solid var(--sc-primary); border-radius: var(--sc-radius); padding: var(--sc-space-3); box-shadow: var(--sc-shadow-sm); } .inline-related-post-box.inline-related-boxed .inline-related-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--sc-radius-sm); overflow: hidden; } .inline-related-post-box.inline-related-boxed .inline-related-thumb img { width: 100%; height: 100%; object-fit: cover; } .inline-related-post-box.inline-related-boxed .inline-related-text { min-width: 0; } .inline-related-post-box.inline-related-boxed .inline-related-label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; color: var(--sc-primary); text-transform: uppercase; margin-bottom: 2px; } .inline-related-post-box.inline-related-boxed a { color: var(--sc-ink); font-weight: 700; font-size: 0.95rem; } .inline-related-post-box.inline-related-boxed a:hover { color: var(--sc-primary); } .post-tags { margin-top: var(--sc-space-5); font-size: 0.9rem; } .post-tags a { display: inline-block; background: var(--sc-surface-alt); border: 1px solid var(--sc-border); color: var(--sc-body); font-weight: 500; font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; margin: 3px 4px 3px 0; } .post-tags a:hover { background: var(--sc-primary-light); color: var(--sc-primary-dark); } /* ------------------------------------------------------------------------- 9. Table of Contents & Post Navigation ------------------------------------------------------------------------- */ .post-toc { background: var(--sc-surface-alt); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: var(--sc-space-4); margin: 0 0 var(--sc-space-5); font-size: 0.92rem; } .post-toc-title { font-weight: 700; color: var(--sc-ink); margin: 0 0 var(--sc-space-2); font-size: 1rem; } .post-toc ol { margin: 0; padding-left: 1.2em; } .post-toc li { margin-bottom: 4px; } .post-toc .post-toc-level-3 { list-style: circle; margin-left: 1em; } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-3); margin: var(--sc-space-6) 0; } .post-nav a { display: flex; flex-direction: column; gap: 4px; padding: var(--sc-space-3); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-surface-alt); min-width: 0; } .post-nav a:hover { border-color: var(--sc-primary); } .post-nav-next { text-align: right; align-items: flex-end; grid-column: 2; } .post-nav-prev { grid-column: 1; } .post-nav-label { font-size: 0.75rem; font-weight: 700; color: var(--sc-primary); text-transform: uppercase; letter-spacing: 0.03em; } .post-nav-title { font-size: 0.88rem; color: var(--sc-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (max-width: 480px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { text-align: left; align-items: flex-start; grid-column: 1; } } /* ------------------------------------------------------------------------- 10. Sidebar & Widgets ------------------------------------------------------------------------- */ .sidebar-outer { display: flex; flex-direction: column; } @media (min-width: 900px) { /* Let the sidebar column stretch to the same height as the article column (guaranteed by CSS Grid's default row stretch) so there's room below the sidebar for it to travel through before it ever needs to stick in place, and so it has a defined bottom edge for the sticky containment below to release against. Position it relatively so it can serve as the containing block once js/ sticky-sidebar.js switches the inner box to `position: absolute` for the "released, resting at the bottom of its own column" phase. */ .sidebar-outer { height: 100%; position: relative; } /* Baseline (no-JS) behaviour: native sticky, pinned just under the fixed header while the article column scrolls past, releasing on its own once .sidebar-outer runs out of room. js/sticky-sidebar.js progressively enhances this with explicit scroll math so the three phases (scrolls normally at first, gets caught near the header, releases at the bottom of its own column) are guaranteed rather than dependent on the browser's sticky implementation. When the JS is active it sets inline position/top/left/width on .sidebar-inner, which naturally overrides this rule. */ .sidebar-inner { position: sticky; top: calc(var(--sc-header-height-desktop) + var(--sc-space-5)); } /* No fixed header in this mode, so the sidebar only needs a small breathing gap at the top instead of full header clearance. */ body.sc-header-static .sidebar-inner { top: var(--sc-space-5); } body.sc-no-sticky-sidebar .sidebar-inner { position: static !important; } } .widget { position: relative; background: var(--sc-widget-bg); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4) var(--sc-space-4) var(--sc-space-5); margin-bottom: var(--sc-space-4); box-shadow: var(--sc-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; overflow: hidden; } .widget::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sc-primary) 0%, var(--sc-accent) 100%); } .widget:hover { box-shadow: var(--sc-shadow); } .widget-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--sc-ink); margin: 0 0 var(--sc-space-3); padding-bottom: var(--sc-space-3); border-bottom: 1px solid var(--sc-border); } .widget-title i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sc-primary-light); color: var(--sc-primary); font-size: 0.75em; flex-shrink: 0; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 9px 0; } .widget > ul > li, .widget li:not(:last-child) { border-bottom: 1px dashed var(--sc-border); } .widget a { color: var(--sc-body); font-weight: 500; font-size: 0.92rem; transition: color 0.15s ease, padding-left 0.15s ease; } .widget li > a:hover { color: var(--sc-primary); padding-left: 3px; } .widget a:hover { color: var(--sc-primary); } .widget input[type="search"], .widget input[type="text"] { width: 100%; padding: 11px 14px; border: 1px solid var(--sc-border); border-radius: 999px; font-size: 0.95rem; background: var(--sc-surface-alt); } .widget input[type="search"]:focus, .widget input[type="text"]:focus { outline: none; border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sc-primary-light); background: var(--sc-surface); } .widget-search .search-form { position: relative; display: block; } .widget-search button[type="submit"] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--sc-primary); color: var(--sc-button-text); display: flex; align-items: center; justify-content: center; cursor: pointer; } .widget .sc-post-item, .footer-widgets .sc-post-item { display: flex; align-items: center; gap: var(--sc-space-3); padding: var(--sc-space-2) 0; } .widget .sc-thumb, .footer-widgets .sc-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--sc-radius-sm); overflow: hidden; } .sc-list-thumb img, .widget .sc-thumb img, .footer-widgets .sc-thumb img { width: 100%; height: 100%; object-fit: cover; } .sc-title { font-size: 0.9rem; line-height: 1.4; color: var(--sc-ink); font-weight: 600; } .sc-title:hover { color: var(--sc-primary); } /* Discover Feed view for Popular Posts / Category Posts widgets — large full-width image on top, title stacked below, no side-by-side thumb. Selected per-widget from the "Layout" dropdown in the widget. */ .widget .sc-widget-view-discover .sc-post-item, .footer-widgets .sc-widget-view-discover .sc-post-item { display: block; padding: 0 0 var(--sc-space-4); margin-bottom: var(--sc-space-4); border-bottom: 1px solid var(--sc-border); } .widget .sc-widget-view-discover .sc-post-item:last-child, .footer-widgets .sc-widget-view-discover .sc-post-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget .sc-widget-view-discover .sc-thumb, .footer-widgets .sc-widget-view-discover .sc-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--sc-radius); margin-bottom: var(--sc-space-2); } .widget .sc-widget-view-discover .sc-title, .footer-widgets .sc-widget-view-discover .sc-title { display: block; font-size: 0.98rem; } /* ------------------------------------------------------------------------- 11. Comments ------------------------------------------------------------------------- */ .comments-area { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4); margin-top: var(--sc-space-6); } @media (min-width: 640px) { .comments-area { padding: var(--sc-space-5); } } .comments-title { font-size: 1.25rem; margin: 0 0 var(--sc-space-4); } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list li { margin-bottom: var(--sc-space-4); } .comment-list .children { list-style: none; margin: var(--sc-space-3) 0 0; padding-left: var(--sc-space-4); } .comment-body { display: flex; gap: var(--sc-space-3); padding-bottom: var(--sc-space-4); border-bottom: 1px solid var(--sc-border); } .comment-body .avatar { border-radius: 50%; flex-shrink: 0; } .comment-meta { font-size: 0.85rem; margin-bottom: var(--sc-space-1); } .comment-author .fn { font-weight: 700; color: var(--sc-ink); } .comment-metadata { color: var(--sc-muted); font-size: 0.8rem; } .comment-content { font-size: 0.95rem; } .comment-form-container input, .comment-form-container textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); font-family: inherit; font-size: 0.95rem; } .comment-form-container input:focus, .comment-form-container textarea:focus { outline: none; border-color: var(--sc-primary); box-shadow: 0 0 0 3px var(--sc-primary-light); } .comment-form-container label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--sc-space-1); } .comment-form-container .form-submit input, .comment-form-container .submit { width: auto; background: var(--sc-primary); color: var(--sc-button-text); font-weight: 700; border: none; padding: 10px 24px; cursor: pointer; } .comment-form-container .form-submit input:hover { background: var(--sc-primary-dark); } .no-comments { color: var(--sc-muted); font-style: italic; } /* ------------------------------------------------------------------------- 12. Author Box, Share Buttons, Related Posts ------------------------------------------------------------------------- */ .author-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-space-3); background: var(--sc-surface-alt); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-4); margin: var(--sc-space-6) 0; box-shadow: var(--sc-shadow-sm); } @media (min-width: 560px) { .author-box { flex-direction: row; align-items: flex-start; padding: var(--sc-space-5); } } .author-avatar img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; border: 3px solid var(--sc-primary); } .author-box-title { margin: 0 0 4px; font-size: 0.95rem; color: var(--sc-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } .author-name { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 6px; } .author-verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--sc-verified); color: #fff; font-size: 0.6rem; flex-shrink: 0; } .author-credentials { margin: 0 0 6px; font-size: 0.88rem; color: var(--sc-muted); } .author-job-title { font-weight: 600; color: var(--sc-ink); } .author-avatar { position: relative; flex-shrink: 0; } .author-avatar .author-verified-badge-avatar { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--sc-verified); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 2px solid var(--sc-surface-alt); } .author-social-links { list-style: none; display: flex; gap: var(--sc-space-2); margin: var(--sc-space-2) 0; padding: 0; } .author-social-links a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sc-surface); border: 1px solid var(--sc-border); color: var(--sc-body); } .author-social-links a:hover { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); } .author-view-posts { display: inline-block; font-size: 0.85rem; font-weight: 700; margin-top: 4px; } .social-share { margin: var(--sc-space-5) 0; } .social-share p { font-size: 0.92rem; margin-bottom: var(--sc-space-2); } .share-buttons { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin: 0; padding: 0; } .share-buttons a, .share-copy-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--sc-surface-alt); border: 1px solid var(--sc-border); color: var(--sc-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .share-buttons a:hover, .share-copy-link:hover { background: var(--sc-primary-light); color: var(--sc-primary-dark); } .share-copy-link.copied { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); } .related-posts { margin-top: var(--sc-space-8); } /* Related posts reuse the exact same .post-card / .post-grid system as the homepage and archive cards — same image treatment, same uniform sizing, same meta box styling — so nothing on the site ever looks "basic" or inconsistent, per the Layout & Container image style setting. */ .related-posts .post-grid.related-layout-list { display: flex; flex-direction: column; gap: var(--sc-space-3); } .related-layout-list .post-card { flex-direction: row; } .related-layout-list .post-thumb { flex: 0 0 110px; width: 110px; } .related-layout-list .post-thumb img { aspect-ratio: 1/1 !important; } .related-layout-list .post-card .post-excerpt, .related-layout-list .post-card .read-more { display: none; } /* ------------------------------------------------------------------------- 13. Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--sc-footer-bg); color: var(--sc-footer-text); margin-top: var(--sc-space-8); padding-top: var(--sc-space-6); } .footer-about { padding: var(--sc-space-6) var(--sc-space-4) 0; max-width: var(--sc-container); margin-inline: auto; color: var(--sc-footer-text); font-size: 0.92rem; line-height: 1.7; } .footer-about p:last-child { margin-bottom: 0; } @media (min-width: 640px) { .footer-about { padding-inline: var(--sc-space-5); font-size: 0.95rem; max-width: 720px; margin-inline: 0; } } .footer-widgets { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-5); padding-bottom: var(--sc-space-6); padding-inline: var(--sc-space-4); max-width: var(--sc-container); margin-inline: auto; } @media (min-width: 640px) { .footer-widgets { grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-6); padding-inline: var(--sc-space-5); } } .footer-widget:not(:last-child) { margin-bottom: var(--sc-space-4); } .footer-widget .widget-title, .footer-column .widget-title { color: var(--sc-footer-text); border-bottom-color: rgba(255,255,255,0.15); } .footer-widgets a { color: var(--sc-footer-text); font-weight: 500; } .footer-widgets a:hover { color: #fff; } .footer-widgets .sc-title { color: var(--sc-footer-text); } .footer-widgets .sc-title:hover { color: #fff; } .footer-navigation { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--sc-space-4); } .footer-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-space-4); margin: 0; padding: 0; max-width: var(--sc-container); margin-inline: auto; } .footer-menu a { color: var(--sc-footer-text); font-size: 0.9rem; } .footer-menu a:hover { color: #fff; } .footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sc-space-3); border-top: 1px solid rgba(255,255,255,0.1); padding: var(--sc-space-4); font-size: 0.85rem; max-width: var(--sc-container); margin-inline: auto; } @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-copy { color: var(--sc-footer-text); opacity: 0.85; } .footer-social a { color: var(--sc-footer-text); font-weight: 500; margin: 0 var(--sc-space-2); font-size: 0.85rem; display: inline-block; } .footer-social a:hover { color: #fff; } @media (min-width: 640px) { .footer-social a:first-child { margin-left: 0; } } /* ------------------------------------------------------------------------- 14. Pagination & Misc ------------------------------------------------------------------------- */ .ajax-pagination { text-align: center; padding: var(--sc-space-4); margin: var(--sc-space-5) 0 var(--sc-space-8); } .post-count { font-size: 0.85rem; color: var(--sc-muted); margin-bottom: var(--sc-space-3); } .btn-load-more { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-dark) 100%); color: var(--sc-button-text); border: none; padding: 11px 24px; font-size: 0.95rem; font-weight: 700; border-radius: 999px; cursor: pointer; margin: 0 6px; box-shadow: var(--sc-shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease; } .btn-load-more:hover { box-shadow: var(--sc-shadow); transform: translateY(-1px); } .btn-load-more:active { transform: translateY(1px); } .btn-load-more:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-prev { display: none; } .pagination, .page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-space-2); margin: var(--sc-space-6) 0; } .pagination .page-numbers, .page-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-border); background: var(--sc-surface); color: var(--sc-body); font-weight: 600; font-size: 0.9rem; } .pagination .page-numbers.current { background: var(--sc-primary); border-color: var(--sc-primary); color: var(--sc-button-text); } .pagination .page-numbers:hover { border-color: var(--sc-primary); color: var(--sc-primary); } .page-header { margin-bottom: var(--sc-space-5); } .page-title, .search-title { font-size: 1.4rem; margin-top: 0; } .archive-description { color: var(--sc-muted); margin-top: var(--sc-space-2); } .no-posts, .no-results { background: var(--sc-surface); border: 1px dashed var(--sc-border); border-radius: var(--sc-radius); padding: var(--sc-space-6); text-align: center; color: var(--sc-muted); } .no-results .search-form { margin-top: var(--sc-space-4); } /* 404 page */ .error-404 { text-align: center; padding: var(--sc-space-8) 0; } .error-404 h1 { color: var(--sc-primary); } .error-404 .btn-home { display: inline-block; background: var(--sc-primary); color: var(--sc-button-text); font-weight: 600; padding: 12px 28px; border-radius: var(--sc-radius); margin: var(--sc-space-4) 0 var(--sc-space-6); } .error-404 .btn-home:hover { background: var(--sc-primary-dark); } .error-404-search { max-width: 420px; margin-inline: auto; } .error-404-search h2 { font-size: 1.05rem; } /* ------------------------------------------------------------------------- 15. Reading Progress, Back to Top ------------------------------------------------------------------------- */ .reading-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background: var(--sc-accent); z-index: 101; } .back-to-top { position: fixed; right: var(--sc-space-4); bottom: calc(var(--sc-bottom-nav-height) + var(--sc-space-3)); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--sc-primary); color: #fff; font-size: 1rem; cursor: pointer; box-shadow: var(--sc-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 80; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--sc-primary-dark); } body.sc-no-bottom-nav .back-to-top { bottom: var(--sc-space-4); } @media (min-width: 900px) { .back-to-top { bottom: var(--sc-space-5); } }