/* Theme Name: WrestlingFocus Theme URI: https://example.com/wrestlingfocus Author: Your Name Description: A fast, mobile-first WordPress news theme for pro wrestling coverage — WWE, AEW, TNA, NJPW and more. Original WrestlingFocus visual identity: editable categories, SEO metadata, structured data, related posts, share buttons, PWA support. Version: 1.19.1 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: wrestlingfocus */ /* ========================================================= 1. VARIABLES — central design-token system ========================================================= */ :root{ --wf-primary: #D11F2E; --wf-primary-dark: #A9121F; --wf-secondary: #17181A; --wf-accent-gold: #E0A93B; --wf-accent-blue: #2C5F9E; --wf-accent-purple: #7A4FB5; --wf-accent-green: #3E8E5A; --wf-background: #FFFFFF; --wf-surface: #FFFFFF; --wf-border: #EBEBEB; --wf-header-bg: var(--wf-primary-dark); --wf-text: #17181A; --wf-text-muted: #5B5D61; --wf-text-dim: #8B8D91; --wf-container: 1200px; --wf-radius: 6px; --wf-shadow: 0 1px 3px rgba(0,0,0,.06); --wf-spacing-xs: 4px; --wf-spacing-sm: 8px; --wf-spacing-md: 16px; --wf-spacing-lg: 28px; --wf-spacing-xl: 48px; --wf-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --wf-font-heading: var(--wf-font-body); --wf-font-size-xs: 12px; --wf-font-size-sm: 14px; --wf-font-size-base: 16px; --wf-font-size-lg: 18px; --wf-font-size-xl: clamp(20px, 2.4vw, 24px); --wf-font-size-2xl: clamp(24px, 3.4vw, 34px); --wf-font-size-3xl: clamp(28px, 4.4vw, 44px); --wf-hero-title-size: 23px; --wf-card-title-size: 19px; } /* Font choice from Theme Options (default: system, zero extra requests) */ body.wf-font-inter{ --wf-font-body: 'Inter', system-ui, -apple-system, sans-serif; --wf-font-heading: 'Inter', system-ui, -apple-system, sans-serif; } body.wf-font-poppins{ --wf-font-body: 'Poppins', system-ui, -apple-system, sans-serif; --wf-font-heading: 'Poppins', system-ui, -apple-system, sans-serif; } body.wf-font-roboto{ --wf-font-body: 'Roboto', system-ui, -apple-system, sans-serif; --wf-font-heading: 'Roboto', system-ui, -apple-system, sans-serif; } body.wf-font-oswald{ --wf-font-body: system-ui, -apple-system, sans-serif; --wf-font-heading: 'Oswald', system-ui, -apple-system, sans-serif; } body.wf-font-merriweather{ --wf-font-body: 'Merriweather', Georgia, serif; --wf-font-heading: 'Merriweather', Georgia, serif; } body.wf-font-playfair{ --wf-font-body: system-ui, -apple-system, sans-serif; --wf-font-heading: 'Playfair Display', Georgia, serif; } /* Dark mode — toggled via [data-theme="dark"] on ; header stays brand-colored either way */ html[data-theme="dark"]{ --wf-background: #17181A; --wf-surface: #202224; --wf-border: #2E3033; --wf-text: #EDEAE0; --wf-text-muted: #9B9C9E; --wf-text-dim: #6E7073; } /* ========================================================= 2. RESET ========================================================= */ *, *::before, *::after{ box-sizing: border-box; min-width: 0; } html{ scroll-behavior: smooth; } html, body{ max-width: 100%; overflow-x: hidden; } body{ background: var(--wf-background); color: var(--wf-text); font-family: var(--wf-font-body); font-size: var(--wf-font-size-base); line-height: 1.55; margin: 0; } img, svg, video{ max-width: 100%; height: auto; display: block; } button, input, textarea, select{ font-family: inherit; font-size: inherit; } ul, ol{ margin: 0; padding: 0; } a{ color: var(--wf-primary); text-decoration: none; } a:hover{ color: var(--wf-primary-dark); } /* ========================================================= 3. ACCESSIBILITY ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--wf-primary); outline-offset: 2px; } .screen-reader-text{ position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= 4. TYPOGRAPHY ========================================================= */ h1,h2,h3,h4{ font-family: var(--wf-font-heading); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; color: var(--wf-text); overflow-wrap: break-word; word-break: break-word; } h1{ font-size: var(--wf-font-size-3xl); } h2{ font-size: var(--wf-font-size-2xl); } h3{ font-size: var(--wf-font-size-xl); } p{ margin: 0 0 1em; } /* ========================================================= 5. LAYOUT / CONTAINER / GRID ========================================================= */ .container{ max-width: var(--wf-container); margin-inline: auto; padding-inline: var(--wf-spacing-md); } .wf-layout{ display: grid; grid-template-columns: 2fr 1fr; gap: var(--wf-spacing-lg); align-items: start; margin-top: var(--wf-spacing-lg); } @media (max-width: 880px){ .wf-layout{ grid-template-columns: 1fr; } } .wf-section{ margin-top: var(--wf-spacing-xl); } .wf-section-title{ font-size: var(--wf-font-size-xl); margin-bottom: var(--wf-spacing-md); } .wf-section-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .wf-section-head .wf-section-title{ margin-bottom:0; } .wf-see-all{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:14px; color: var(--wf-text); flex-shrink:0; } .wf-see-all:hover{ color: var(--wf-primary); } .wf-scroll-wrap{ position:relative; margin-top: var(--wf-spacing-md); } .wf-scroll-btn{ width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--wf-border); background:var(--wf-surface); color:var(--wf-text); cursor:pointer; } .wf-scroll-btn:hover{ border-color: var(--wf-primary); color: var(--wf-primary); } .wf-scroll-btn:disabled{ opacity:.35; cursor:default; } /* Overlaid on the photo row itself, per the requested layout */ .wf-scroll-btn--overlay{ position:absolute; top:64px; z-index:3; pointer-events:auto; background: var(--wf-surface); box-shadow: 0 2px 8px rgba(0,0,0,.18); } .wf-scroll-btn--overlay.wf-scroll-prev{ left:-4px; } .wf-scroll-btn--overlay.wf-scroll-next{ right:-4px; } @media (max-width: 768px){ .wf-scroll-btn--overlay{ display:none; } /* touch swipe covers this; "See All" stays in the header */ } .wf-scroll{ display:flex; gap: var(--wf-spacing-lg); overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:2px; } .wf-scroll::-webkit-scrollbar{ display:none; } .wf-scroll__item{ flex:0 0 300px; } @media (max-width: 480px){ .wf-scroll__item{ flex-basis: 78vw; } } .wf-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wf-spacing-lg); } .wf-grid--2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .wf-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .wf-grid, .wf-grid--2{ grid-template-columns: 1fr; } } /* ========================================================= 6. HEADER / NAVIGATION ========================================================= */ .wf-header{ background: var(--wf-header-bg); padding: 14px 0; } .wf-header.is-sticky{ position: sticky; top: 0; z-index: 50; } .wf-header__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height: 40px; } .wf-header__side{ display:flex; align-items:center; gap:6px; width:44px; flex-shrink:0; } .wf-header__side--right{ justify-content:flex-end; } .wf-menu-toggle, .wf-search-toggle, .wf-theme-toggle{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; color:#fff; cursor:pointer; padding:0; border-radius:999px; min-height: 48px; transition: background .15s ease; } .wf-menu-toggle:hover, .wf-search-toggle:hover, .wf-theme-toggle:hover{ background: rgba(255,255,255,.15); } .wf-menu-toggle:active, .wf-search-toggle:active, .wf-theme-toggle:active{ background: rgba(255,255,255,.25); } /* Hamburger — animates into an X when the menu is open */ .wf-hamburger{ position:relative; width:23px; height:16px; display:inline-block; } .wf-hamburger__line{ position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition: transform .25s ease, opacity .2s ease, top .2s ease; } .wf-hamburger__line:nth-child(1){ top:0; } .wf-hamburger__line:nth-child(2){ top:7px; } .wf-hamburger__line:nth-child(3){ top:14px; } #wf-menu-toggle[aria-expanded="true"] .wf-hamburger__line:nth-child(1){ top:7px; transform:rotate(45deg); } #wf-menu-toggle[aria-expanded="true"] .wf-hamburger__line:nth-child(2){ opacity:0; } #wf-menu-toggle[aria-expanded="true"] .wf-hamburger__line:nth-child(3){ top:7px; transform:rotate(-45deg); } /* Theme toggle — sun/moon crossfade purely via CSS, no JS DOM swapping */ .wf-theme-toggle{ position:relative; } .wf-theme-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition: opacity .25s ease, transform .3s ease; } .wf-theme-icon--sun{ opacity:1; transform: rotate(0deg) scale(1); } .wf-theme-icon--moon{ opacity:0; transform: rotate(-70deg) scale(.5); } html[data-theme="dark"] .wf-theme-icon--sun{ opacity:0; transform: rotate(70deg) scale(.5); } html[data-theme="dark"] .wf-theme-icon--moon{ opacity:1; transform: rotate(0deg) scale(1); } .wf-logo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family: var(--wf-font-heading); font-weight:800; font-size:22px; color:#fff; text-align:center; display:block; transition: opacity .15s ease, text-shadow .15s ease; } .wf-logo:hover{ color:#fff; opacity:.82; text-shadow: 0 0 14px rgba(255,255,255,.5); } .wf-logo img{ max-height:36px; display:inline-block; } .wf-nav{ position:fixed; top:0; left:0; height:100vh; width:30%; min-width:280px; max-width:420px; background: var(--wf-primary-dark); overflow-y:auto; z-index:100; transform: translateX(-100%); transition: transform .3s ease; } .wf-nav.is-open{ transform: translateX(0); } @media (max-width: 768px){ .wf-nav{ width:60%; min-width:230px; max-width:340px; } } .wf-nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition: opacity .35s ease, backdrop-filter .35s ease; z-index:99; backdrop-filter: blur(0px); } .wf-nav-backdrop.is-open{ opacity:1; pointer-events:auto; backdrop-filter: blur(3px); } .wf-nav__inner{ padding: 20px 18px 24px; } .wf-nav__logo{ display:block; text-align:center; color:#fff; font-family: var(--wf-font-heading); font-weight:800; font-size: clamp(17px, 4vw, 22px); letter-spacing:.02em; margin-bottom:18px; padding-bottom:16px; border-bottom:2px solid rgba(255,255,255,.2); position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: opacity .15s ease, text-shadow .15s ease; } .wf-nav__logo:hover{ color:#fff; opacity:.82; text-shadow: 0 0 14px rgba(255,255,255,.5); } .wf-nav__logo::after{ content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); width:48px; height:2px; background:#fff; } .wf-nav__logo img{ max-height:34px; margin-inline:auto; } .wf-nav__section{ margin-bottom:14px; } .wf-nav__label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); margin:0 0 6px; padding:0 6px; } .wf-nav__item{ display:flex; align-items:center; gap:12px; width:100%; color:#fff; font-weight:700; font-size:15px; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.1); min-height:46px; background:none; border-left:none; border-right:none; border-top:none; text-align:left; cursor:pointer; font-family:inherit; transition: background .15s ease, padding-left .15s ease; } .wf-nav__item:hover{ background: rgba(255,255,255,.16); padding-left:14px; border-left:3px solid #fff; } .wf-nav__item:last-child{ border-bottom:none; } .wf-nav__item-icon{ display:inline-flex; flex-shrink:0; opacity:.9; } .wf-nav__item-label{ flex:1; min-width:0; } .wf-nav__item-count{ font-size:12px; font-weight:600; color: rgba(255,255,255,.55); } .wf-nav .current-menu-item > a{ color: rgba(255,255,255,.8); } .wf-nav__social{ display:flex; justify-content:center; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15); } .wf-nav__social a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; } .wf-nav__social a:hover{ background:rgba(255,255,255,.2); } /* Nav stays a hamburger-triggered drawer at every screen size — no inline desktop nav row, per explicit layout requirement. */ .wf-search-row{ max-height:0; overflow:hidden; background: var(--wf-primary-dark); transition: max-height .3s ease; } .wf-search-row.is-open{ max-height:88px; } .wf-search{ display:flex; align-items:center; gap:10px; position:relative; max-width:var(--wf-container); margin-inline:auto; padding-inline:16px; } .wf-search-row.is-open .wf-search{ padding-block:14px; } .wf-search__icon{ position:absolute; left:30px; color: var(--wf-text-dim); pointer-events:none; } .wf-search input[type=search]{ width:100%; background:#fff; border:2px solid transparent; color:var(--wf-text); padding:13px 16px 13px 46px; border-radius:999px; min-height:48px; font-size:16px; transition: border-color .15s ease, box-shadow .15s ease; } .wf-search input[type=search]:focus{ outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35); } .wf-search input[type=search]::placeholder{ color: var(--wf-text-dim); } /* ========================================================= 7. BREADCRUMBS ========================================================= */ .wf-breadcrumbs{ font-size: var(--wf-font-size-xs); color: var(--wf-text-dim); margin: var(--wf-spacing-md) 0 var(--wf-spacing-sm); } .wf-breadcrumbs a{ color: var(--wf-text-dim); } .wf-breadcrumbs a:hover{ color: var(--wf-primary); } .wf-breadcrumbs span[aria-hidden]{ margin: 0 6px; } /* ========================================================= 8. TAGS / CATEGORY BADGES ========================================================= */ .wf-tag{ display:inline-block; font-weight:700; font-size:13px; color: var(--wf-primary); } .cat-wwe{ color: var(--wf-primary); } .cat-aew{ color: var(--wf-accent-gold); } .cat-tna{ color: var(--wf-accent-blue); } .cat-njpw{ color: var(--wf-accent-purple); } .cat-aaa{ color: var(--wf-accent-green); } /* ========================================================= 9. FEATURED SECTION (homepage) — rebuilt with plain flexbox, no CSS Grid, no anchor wrapping a whole block. Each clickable piece has its own . New class names (wf-featured*) so there is zero chance of this colliding with any older cached markup. ========================================================= */ .wf-featured{ display:flex; flex-wrap:wrap; gap: var(--wf-spacing-xl); margin-top: var(--wf-spacing-lg); align-items:stretch; } .wf-featured__main{ flex: 1 1 560px; min-width:0; display:flex; flex-direction:column; } .wf-featured__image{ display:block; aspect-ratio:16/9; overflow:hidden; border-radius:15px; background:#eee; } .wf-featured__image img{ width:100%; height:100%; object-fit:cover; } .wf-featured__body{ padding-top:16px; } .wf-featured__body h1{ font-family: var(--wf-font-heading); font-weight: 800; font-size: var(--wf-hero-title-size); line-height: 1.3; margin: 8px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wf-featured__body h1 a{ color: var(--wf-text); } .wf-featured__body p{ color: var(--wf-text-muted); margin: 0 0 10px; font-size: var(--wf-font-size-base); line-height: 1.5; } .wf-featured__body .wf-meta{ margin-bottom: 0; } .wf-featured__list{ flex: 1 1 380px; min-width:0; display:flex; flex-direction:column; overflow-y:auto; padding-right:4px; scrollbar-width:thin; } .wf-featured__item{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--wf-border); } .wf-featured__item:first-child{ padding-top:0; } .wf-featured__item:last-child{ border-bottom:none; } .wf-featured__item-text{ flex:1; min-width:0; } .wf-featured__item-text h3{ font-family: var(--wf-font-heading); font-weight: 700; font-size: calc(var(--wf-card-title-size) - 3px); line-height: 1.3; margin:0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wf-featured__item-text h3 a{ color: var(--wf-text); } .wf-featured__item-text h3 a:hover{ color: var(--wf-primary); } .wf-featured__item-thumb{ display:block; width:145px; height:100px; flex-shrink:0; border-radius:14px; overflow:hidden; background:#eee; } .wf-featured__item-thumb img{ width:100%; height:100%; object-fit:cover; } .wf-meta{ color: var(--wf-text-dim); font-size: var(--wf-font-size-sm); } .wf-meta .wf-tag{ margin-left:6px; } .wf-byline{ display:flex; align-items:center; gap:8px; } .wf-author-avatar{ border-radius:50%; object-fit:cover; flex-shrink:0; vertical-align:middle; } /* Tablet: keep two columns, tighten spacing/sizing */ @media (max-width: 1024px) and (min-width: 769px){ .wf-featured{ gap: var(--wf-spacing-md); } .wf-featured__body h1{ font-size: 22px; } .wf-featured__item-thumb{ width:110px; height:76px; } } /* Mobile: single column, full-width image, compact list */ @media (max-width: 768px){ .wf-featured{ flex-direction:column !important; gap:0 !important; margin-top: var(--wf-spacing-md) !important; } /* Reset flex-basis: 560px/380px were meant as WIDTHS for the desktop row layout. In column mode the main axis is vertical, so those same values would reserve that much HEIGHT instead — taller than the real content — leaving a big empty gap. "auto" makes height follow content again. */ .wf-featured__main{ flex: 1 1 auto !important; margin-bottom:0 !important; } .wf-featured__list{ flex: 1 1 auto !important; height:auto !important; overflow:visible !important; padding-right:0 !important; margin-top:0 !important; padding-top: 12px !important; border-top:1px solid var(--wf-border); } /* Thumbnail stays on the LEFT on mobile regardless of the desktop order */ .wf-featured__item-text{ order:2 !important; } .wf-featured__item-thumb{ order:1 !important; } } @media (max-width: 480px){ .wf-featured__item-thumb{ width:96px; height:68px; } .wf-featured__item-text h3{ font-size:15px; } } /* ========================================================= 10. CARDS (homepage, archive, related, search, sidebar — reused everywhere) ========================================================= */ .wf-card{ background:var(--wf-surface); overflow:hidden; display:flex; flex-direction:column; } .wf-card__img{ aspect-ratio:16/9; overflow:hidden; border-radius:var(--wf-radius); background:#eee; } .wf-card__img img{ width:100%; height:100%; object-fit:cover; transition: transform .2s ease; } .wf-card__img:hover img{ transform: scale(1.03); } .wf-card__body{ padding:14px 0 0; } .wf-card h3{ font-size: var(--wf-card-title-size); margin:0 0 10px; line-height:1.25; } .wf-card h3 a{ color: var(--wf-text); } .wf-card h3 a:hover{ color: var(--wf-primary); } .wf-card p{ color: var(--wf-text-muted); font-size: var(--wf-font-size-sm); margin:0; } /* ========================================================= 11. SIDEBAR ========================================================= */ .wf-widget{ background:var(--wf-surface); border:1px solid var(--wf-border); border-radius:var(--wf-radius); padding:18px; margin-bottom: var(--wf-spacing-md); } .wf-widget h2{ font-size:16px; margin-bottom:14px; } .wf-event{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--wf-border); align-items:baseline; } .wf-event:last-child{ border-bottom:none; } .wf-event__date{ font-weight:600; color: var(--wf-primary); font-size:12px; white-space:nowrap; } .wf-event__name{ font-size:14px; color: var(--wf-text); } .wf-mostread{ list-style:none; margin:0; padding:0; counter-reset: wf-count; } .wf-mostread li{ counter-increment: wf-count; display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--wf-border); } .wf-mostread li:last-child{ border-bottom:none; } .wf-mostread li::before{ content: counter(wf-count); font-weight:800; font-size:18px; color: var(--wf-primary); width:24px; flex-shrink:0; } .wf-mostread a{ color: var(--wf-text); font-size:14px; } .wf-mostread a:hover{ color: var(--wf-primary); } .wf-champ{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--wf-border); } .wf-champ:last-child{ border-bottom:none; } .wf-champ__swatch{ width:10px; height:10px; border-radius:2px; flex-shrink:0; background: var(--wf-primary); } .wf-champ__title{ font-size:12px; color: var(--wf-text-muted); display:block; } .wf-champ__name{ font-size:14px; color: var(--wf-text); } /* Latest Posts list rows (homepage) — thumbnail left, text right */ .wf-postlist{ display:flex; flex-direction:column; } .wf-postlist__item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--wf-border); } .wf-postlist__item:first-child{ padding-top:0; } .wf-postlist__item:last-child{ border-bottom:none; } .wf-postlist__thumb{ width:190px; height:135px; flex-shrink:0; border-radius:10px; overflow:hidden; background:#eee; } .wf-postlist__thumb img{ width:100%; height:100%; object-fit:cover; } .wf-postlist__text{ flex:1; min-width:0; } .wf-postlist__text .wf-tag{ text-transform: uppercase; font-size:12px; display:block; margin-bottom:4px; } .wf-postlist__text h3{ font-size: calc(var(--wf-card-title-size) - 1px); margin:0 0 6px; line-height:1.3; } .wf-postlist__text h3 a{ color: var(--wf-text); } .wf-postlist__text h3 a:hover{ color: var(--wf-primary); } .wf-postlist__text p{ color: var(--wf-text-muted); font-size:14px; margin:0 0 6px; } @media (max-width: 480px){ .wf-postlist__thumb{ width:120px; height:88px; } .wf-postlist__text h3{ font-size:15px; } .wf-postlist__text p{ display:none; } /* keep rows compact on very small screens */ } /* Top Read Posts widget (homepage) */ .wf-topread__item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--wf-border); } .wf-topread__item:last-child{ border-bottom:none; } .wf-topread__rank{ font-family: var(--wf-font-heading); font-weight:800; font-size:20px; color: var(--wf-primary); width:30px; flex-shrink:0; } .wf-topread__thumb{ width:56px; height:56px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#eee; } .wf-topread__thumb img{ width:100%; height:100%; object-fit:cover; } .wf-topread__text{ flex:1; min-width:0; } .wf-topread__text h4{ font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.3; } .wf-topread__text h4 a{ color: var(--wf-text); } .wf-topread__text h4 a:hover{ color: var(--wf-primary); } .wf-topread__views{ font-size:12px; color: var(--wf-text-dim); } .wf-view-all-btn{ display:block; text-align:center; width:100%; padding:12px; margin-top: var(--wf-spacing-md); border:1px solid var(--wf-border); border-radius:8px; font-weight:700; color: var(--wf-text); } .wf-view-all-btn:hover{ border-color: var(--wf-primary); color: var(--wf-primary); } /* ========================================================= 12. SINGLE POST / ARTICLE READING ========================================================= */ .wf-single-wrap{ max-width: 760px; margin: var(--wf-spacing-lg) auto 0; } .wf-single header.entry-header{ margin-bottom: var(--wf-spacing-md); } .wf-single .wf-dek{ font-size: var(--wf-font-size-lg); color: var(--wf-text-muted); line-height:1.5; margin: 8px 0 10px; } .wf-single .entry-thumb{ margin-bottom: var(--wf-spacing-md); border-radius:var(--wf-radius); overflow:hidden; aspect-ratio:16/9; background:#eee; } .wf-single .entry-thumb img{ width:100%; height:100%; object-fit:cover; } .entry-content{ font-size:17px; line-height:1.75; } .entry-content > *{ margin: 0 0 1.2em; } .entry-content h2{ margin-top:1.6em; font-size:24px; } .entry-content h3{ margin-top:1.4em; font-size:20px; } .entry-content ul, .entry-content ol{ padding-left: 1.4em; margin-bottom: 1.2em; } .entry-content li{ margin-bottom: .4em; } .entry-content blockquote{ border-left:3px solid var(--wf-primary); margin:1.5em 0; padding:.2em 0 .2em 1.2em; color:var(--wf-text-muted); font-style:italic; } .entry-content img{ border-radius:var(--wf-radius); } .entry-content figcaption{ font-size: var(--wf-font-size-sm); color: var(--wf-text-dim); margin-top: 6px; } .entry-content table{ display:block; overflow-x:auto; border-collapse:collapse; width:100%; } .entry-content table td, .entry-content table th{ border:1px solid var(--wf-border); padding:8px 10px; } .wf-embed{ position:relative; } .wf-embed iframe, .wf-embed embed, .wf-embed object{ max-width:100%; } /* ========================================================= 13. SHARE BAR ========================================================= */ .wf-share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top: var(--wf-spacing-lg); padding-top: var(--wf-spacing-md); border-top:1px solid var(--wf-border); width:100%; box-sizing:border-box; max-width:100%; } .wf-share__label{ font-weight:700; font-size:13px; color: var(--wf-text-muted); margin-right:4px; } .wf-share__btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; background:var(--wf-surface); border:1px solid var(--wf-border); color:var(--wf-text); flex-shrink:0; padding: 0 14px; font-size: 13px; font-weight: 600; } .wf-share__btn:hover{ border-color: var(--wf-primary); color: var(--wf-primary); } .wf-share__copy-label{ white-space: nowrap; } @media (max-width: 768px){ .wf-share{ flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin-top: var(--wf-spacing-md); padding-top: 10px; } .wf-share__label{ display: none; } .wf-share__btn{ min-width: 38px; width: 38px; height: 38px; padding: 0; flex-shrink: 0; } .wf-share__btn-label{ display: none; } } /* ========================================================= 14. AUTHOR BOX ========================================================= */ .wf-author-box{ margin-top: var(--wf-spacing-lg); padding: var(--wf-spacing-md); background: var(--wf-surface); border:1px solid var(--wf-border); border-radius: var(--wf-radius); } .wf-author-box__title{ font-size:19px; margin:0 0 14px; } .wf-author-box__top{ display:flex; align-items:center; gap:14px; } .wf-author-box__top .wf-author-avatar{ width:64px; height:64px; flex-shrink:0; } .wf-author-box__meta{ display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; } .wf-author-box__name{ font-size:17px; font-weight:800; margin:0; color: var(--wf-text); } .wf-author-box__social{ display:flex; gap:8px; } .wf-author-box__social a{ width:30px; height:30px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background: var(--wf-text); color:#fff; } html[data-theme="dark"] .wf-author-box__social a{ background:#fff; color:#000; } .wf-author-box__social a:hover{ background: var(--wf-primary); color:#fff; } .wf-author-box__bio{ font-size: var(--wf-font-size-sm); color: var(--wf-text-muted); margin:14px 0 0; } @media (max-width: 480px){ .wf-author-box__top .wf-author-avatar{ width:56px; height:56px; } .wf-author-box__name{ font-size:16px; } } /* ========================================================= 15. AD SLOTS — reserved space so ads don't shift layout ========================================================= */ .wf-ad{ display:flex; align-items:center; justify-content:center; overflow:hidden; margin: var(--wf-spacing-md) 0; } .wf-ad-header{ min-height:50px; } .wf-ad-sidebar{ min-height:250px; } .wf-ad-in-content{ min-height:250px; } .wf-ad-after-article{ min-height:250px; } /* ========================================================= 16. FOOTER ========================================================= */ .wf-footer{ background: var(--wf-primary-dark); margin-top: var(--wf-spacing-xl); padding: var(--wf-spacing-xl) 0 24px; color:#f0d9db; font-size: var(--wf-font-size-sm); } /* Always 2 columns — pairs (About + Follow) and (Important Links + Quick Links) side by side, including on mobile. */ .wf-footer__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wf-spacing-lg); text-align:center; } .wf-footer__social{ display:flex; gap:8px; margin-top:12px; justify-content:center; } .wf-footer__social-link{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; flex-shrink:0; } .wf-footer__social-link--facebook{ background:#1877F2; } .wf-footer__social-link--x{ background:#000000; } .wf-footer__social-link--instagram{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .wf-footer__social-link--youtube{ background:#FF0000; } .wf-footer__social-link:hover{ opacity:.85; } /* Mobile: About (+Follow) spans full width on its own row; the remaining columns (Important Links, Quick Links) sit side by side below it. */ @media (max-width: 600px){ .wf-footer__grid{ grid-template-columns: 1fr 1fr; } .wf-footer__grid > div:first-child{ grid-column: 1 / -1; } } @media (max-width: 420px){ .wf-footer__grid{ gap: var(--wf-spacing-md); } .wf-footer{ font-size:13px; } .wf-footer h4{ font-size:14px; } } .wf-footer h4{ color:#fff; font-size:15px; margin-bottom:12px; } .wf-footer ul{ list-style:none; padding-left:0; } .wf-footer li{ margin-bottom:6px; } .wf-footer a{ color:#C7C8CA; } .wf-footer a:hover{ color:#fff; } .wf-footer__bottom{ text-align:center; margin-top: var(--wf-spacing-lg); padding-top: var(--wf-spacing-md); border-top:1px solid rgba(255,255,255,.12); font-size: var(--wf-font-size-xs); } /* ========================================================= 17. PAGINATION / MISC ========================================================= */ .wf-pagination{ display:flex; flex-wrap:wrap; gap:10px; margin-top: var(--wf-spacing-lg); } .wf-pagination a, .wf-pagination span{ min-height:44px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid var(--wf-border); border-radius:var(--wf-radius); color:var(--wf-text); } .wf-pagination .current{ background: var(--wf-primary); color:#fff; border-color: var(--wf-primary); } .wf-empty{ padding: var(--wf-spacing-xl); text-align:center; color: var(--wf-text-muted); } .wf-load-more-wrap{ display:flex; justify-content:flex-start; margin-top: var(--wf-spacing-lg); } .wf-load-more-btn{ min-height:44px; padding:0 28px; border-radius:6px; border:1px solid var(--wf-primary); background:var(--wf-primary); color:#fff; font-weight:700; font-size:14px; cursor:pointer; } .wf-load-more-btn:hover:not(:disabled){ background: var(--wf-primary-dark); border-color: var(--wf-primary-dark); } .wf-load-more-btn:disabled{ opacity:.6; cursor:default; } /* ========================================================= 18. ARCHIVE ========================================================= */ .wf-archive-desc{ color: var(--wf-text-muted); margin-bottom: var(--wf-spacing-md); max-width: 760px; } /* ========================================================= 18b. SHIMMER / SKELETON LOADING ========================================================= */ @keyframes wf-shimmer-sweep{ 0%{ background-position: 150% 0; } 100%{ background-position: -150% 0; } } /* Photos: shimmer placeholder shows while the image loads, then the loaded image simply covers it — costs nothing once loaded. */ .wf-card__img, .wf-featured__image, .wf-postlist__thumb, .wf-featured__item-thumb, .wf-topread__thumb, .entry-thumb{ background-image: linear-gradient(100deg, #e9e9e9 30%, #f6f6f6 50%, #e9e9e9 70%); background-size: 300% 100%; animation: wf-shimmer-sweep 2.6s ease-in-out infinite; } html[data-theme="dark"] .wf-card__img, html[data-theme="dark"] .wf-featured__image, html[data-theme="dark"] .wf-postlist__thumb, html[data-theme="dark"] .wf-featured__item-thumb, html[data-theme="dark"] .wf-topread__thumb, html[data-theme="dark"] .entry-thumb{ background-image: linear-gradient(100deg, #2a2c2e 30%, #383a3d 50%, #2a2c2e 70%); } /* Header + nav drawer: a slow, continuous shimmer sweep. */ .wf-header, .wf-nav__inner{ position:relative; } .wf-header::after, .wf-nav__inner::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); background-size: 300% 100%; animation: wf-shimmer-sweep 2.6s ease-in-out infinite; } .wf-header > *{ position:relative; z-index:1; } .wf-nav__inner > *{ position:relative; z-index:1; } @media (prefers-reduced-motion: reduce){ .wf-card__img, .wf-featured__image, .wf-postlist__thumb, .wf-featured__item-thumb, .wf-topread__thumb, .entry-thumb, .wf-header::after, .wf-nav__inner::before{ animation:none; } } /* ========================================================= 19. PRINT ========================================================= */ @media print{ .wf-header, .wf-nav, .wf-search-row, .wf-share, .wf-ad, .wf-footer, .wf-widget, aside{ display:none !important; } body{ color:#000; } a{ color:#000; text-decoration: underline; } }