/* Theme Name: NextFrame Core Theme URI: https://nextframepublishing.com/nextframe-core Author: NextFrame Publishing Group Author URI: https://nextframepublishing.com Description: In-house publishing theme built for NextFrame Publishing Group's network of news, sports, gaming, culture, and technology sites. Engineered for Google Discover, Google News, Core Web Vitals, and long-term maintainability. Version: 1.7.0 Requires at least: 6.4 Requires PHP: 8.0 Tested up to: 6.6 License: Proprietary — NextFrame Publishing Group internal use only Text Domain: nextframe-core */ /* * ALL theme CSS lives in this single file, deliberately. * * Earlier versions split it into assets/css/critical/*.css (inlined in * ) and assets/css/deferred/base.css (loaded separately). That * split is theoretically faster, but it depends on nested subfolders * surviving the upload to the server intact — and on real hosting, * deeply nested theme files sometimes silently fail to extract. When * that happens BOTH stylesheets vanish and the site renders as raw * unstyled HTML, with no error to explain why. * * style.css at the theme root is the one file WordPress guarantees * exists (it's what makes the theme detectable in the first place), so * putting everything here makes styling impossible to lose. The * performance cost is one render-blocking stylesheet — a fair trade for * a site that is reliably styled everywhere it's installed. * * Mobile-first throughout: base rules target small screens, media * queries scale UP. Breakpoints: 600px (large phone), 782px (tablet / * WP admin bar breakpoint), 1000px (desktop). */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { --nfc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nfc-font-heading: var(--nfc-font-body); --nfc-color-text: #16181d; --nfc-color-heading: #16181d; --nfc-color-bg: #ffffff; --nfc-color-accent: #c4302b; --nfc-color-muted: #666c78; --nfc-color-border: #e4e6eb; --nfc-color-surface: #f7f8fa; /* Header — all overridable from Customizer > Header Design. */ --nfc-header-bg: #ffffff; --nfc-header-text: #16181d; --nfc-header-hover: #c4302b; --nfc-header-border-color: #e4e6eb; --nfc-header-border-width: 1px; --nfc-header-height: 72px; --nfc-header-height-mobile: 60px; --nfc-logo-max-height: 44px; /* Menu / dropdown — independent of the header bar so a dark header can still have a light dropdown panel. */ --nfc-menu-bg: #ffffff; --nfc-menu-text: #16181d; --nfc-menu-hover: #c4302b; --nfc-menu-hover-bg: #f7f8fa; --nfc-submenu-bg: #ffffff; --nfc-submenu-text: #16181d; --nfc-menu-divider: transparent; --nfc-menu-gap: 4px; --nfc-menu-size: 16px; /* Breadcrumbs. */ --nfc-crumb-color: #666c78; --nfc-crumb-link: #666c78; --nfc-crumb-bg: #ffffff; --nfc-crumb-size: 13px; --nfc-crumb-pad: 12px; --nfc-crumb-sep: #c9ced6; /* Featured images. */ --nfc-feat-fit: cover; --nfc-feat-radius: 10px; --nfc-feat-below: 28px; --nfc-feat-cap-size: 13px; --nfc-feat-cap-align: left; --nfc-card-radius: 10px; /* Secondary header bar. */ --nfc-sec-sep: #c9ced6; --nfc-sec-font: var(--nfc-font-body); --nfc-sec-weight: 600; --nfc-sec-ls: 0em; --nfc-sec-pad: 6px; --nfc-sec-width: 100%; /* Social icons. */ --nfc-social-size: 40px; --nfc-social-color: #16181d; --nfc-social-bg: #f7f8fa; --nfc-social-hover: #c4302b; /* Footer. */ --nfc-footer-bg: #f7f8fa; --nfc-footer-text: #666c78; --nfc-footer-padding: 40px; /* Layout. */ --nfc-max-width: 1200px; --nfc-content-width: 760px; --nfc-sidebar-width: 32%; --nfc-grid-columns: 3; --nfc-related-columns: 4; --nfc-grid-gap: 28px; --nfc-space-unit: 1rem; --nfc-container-pad: 24px; --nfc-container-pad-mobile: 16px; --nfc-content-top-pad: 32px; /* Type scale — every one settable in Customizer > Typography. */ --nfc-size-body: 17px; --nfc-size-content: 18px; --nfc-size-h1: 38px; --nfc-size-subheading: 20px; --nfc-size-h2: 29px; --nfc-size-h3: 24px; --nfc-size-h4: 20px; --nfc-size-h5: 18px; --nfc-size-h6: 16px; --nfc-size-card-title: 17px; --nfc-size-meta: 13px; --nfc-size-widget-title: 18px; --nfc-line-content: 1.75; --nfc-radius: 10px; --nfc-radius-sm: 6px; --nfc-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); --nfc-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12); --nfc-transition: 180ms ease; } /* The dark palette itself is emitted by customizer-output.php so every colour is settable. This fallback only covers the case where the Customizer CSS hasn't loaded — it keeps dark mode legible rather than leaving dark text on a dark background. */ html[data-theme="dark"] { --nfc-color-text: #e8eaed; --nfc-color-heading: #ffffff; --nfc-color-bg: #121316; --nfc-color-muted: #9aa0aa; --nfc-color-border: #2c2f36; --nfc-color-surface: #1c1e23; --nfc-header-bg: #1c1e23; --nfc-header-text: #e8eaed; --nfc-menu-bg: #1c1e23; --nfc-menu-text: #e8eaed; --nfc-submenu-bg: #1c1e23; --nfc-submenu-text: #e8eaed; --nfc-footer-bg: #0d0e11; --nfc-crumb-bg: #121316; /* Component fallbacks. The Customizer emits the real values, but if that inline block is ever missing these keep every button and box readable instead of leaving white panels on a black page. */ --nfc-share-bg: #26282e; --nfc-share-color: #e8eaed; --nfc-ps-bg: #1c1e23; --nfc-ps-color: #e8eaed; --nfc-ps-border: #3a3d45; --nfc-inline-bg: #1c1e23; --nfc-inline-link: #e8eaed; --nfc-inline-meta: #9aa0aa; --nfc-toc-bg: #1c1e23; --nfc-toc-text: #e8eaed; --nfc-toc-title: #e8eaed; --nfc-sec-bg: #1c1e23; --nfc-sec-text: #e8eaed; --nfc-sec-border: #2c2f36; } /* Keep the Google mark legible on a dark background without altering its official colours. */ html[data-theme="dark"] .nfc-preferred-source__icon { background: #fff; border-radius: 50%; padding: 3px; } html[data-theme="dark"] body { background: var(--nfc-color-bg); color: var(--nfc-color-text); } /* ========================================================================== 2. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--nfc-font-body); font-size: var(--nfc-size-body); line-height: 1.65; color: var(--nfc-color-text); background: var(--nfc-color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Belt-and-braces against any single element causing horizontal scroll on mobile. */ } h1, h2, h3, h4, h5, h6 { font-family: var(--nfc-font-heading); color: var(--nfc-color-heading); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.5em; overflow-wrap: break-word; /* Long headlines must never overflow on narrow screens. */ } /* Sizes come from Customizer > Typography. Headings are capped with min() against a viewport unit so a large desktop H1 setting can't overflow a phone screen — the setting stays honest on desktop while scaling itself down on small screens. */ h1 { font-size: min(var(--nfc-size-h1), 9vw); } h2 { font-size: min(var(--nfc-size-h2), 7.5vw); } h3 { font-size: min(var(--nfc-size-h3), 6.5vw); } h4 { font-size: var(--nfc-size-h4); } h5 { font-size: var(--nfc-size-h5); } h6 { font-size: var(--nfc-size-h6); } @media (min-width: 782px) { h1 { font-size: var(--nfc-size-h1); } h2 { font-size: var(--nfc-size-h2); } h3 { font-size: var(--nfc-size-h3); } } p { margin: 0 0 1.15em; } a { color: var(--nfc-color-accent); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } img, video { max-width: 100%; height: auto; display: block; } /* * Embeds get max-width but NOT height:auto. * * Social embeds — Instagram, X, Facebook, TikTok — render an iframe with * an explicit height that their own script then adjusts to fit the post * once it has measured the content. Forcing height:auto overrides that * and collapses the frame, which shows up as a cropped embed with the * header visible and the media cut off. Letting the provider control its * own height is the fix. */ iframe, embed, object { max-width: 100%; display: block; } img { border-radius: var(--nfc-radius-sm); } /* WordPress embed blocks. No border-radius or overflow clipping here — both interfere with providers that position elements outside their own frame. */ .wp-block-embed { margin: 1.75em 0; max-width: 100%; } .wp-block-embed__wrapper { max-width: 100%; } .wp-block-embed iframe { max-width: 100%; border-radius: 0; } /* Instagram's own blockquote before its script upgrades it to an iframe. Without a min-height the unstyled fallback collapses to a thin strip while the script loads. */ .instagram-media, .twitter-tweet, .tiktok-embed { max-width: 100% !important; margin-inline: auto !important; } /* Video providers are the exception: these DO want a fluid 16:9 box, because their iframes have fixed pixel dimensions that overflow on a phone otherwise. Scoped to the video variants only so social embeds are untouched. */ .wp-block-embed-youtube .wp-block-embed__wrapper, .wp-block-embed-vimeo .wp-block-embed__wrapper, .wp-block-embed-dailymotion .wp-block-embed__wrapper, .wp-embed-aspect-16-9 .wp-block-embed__wrapper { position: relative; width: 100%; padding-top: 56.25%; } .wp-block-embed-youtube .wp-block-embed__wrapper iframe, .wp-block-embed-vimeo .wp-block-embed__wrapper iframe, .wp-block-embed-dailymotion .wp-block-embed__wrapper iframe, .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--nfc-radius-sm); } /* Long unbroken strings (URLs in content) can force horizontal scroll. */ p, li, h1, h2, h3, td { overflow-wrap: break-word; word-wrap: break-word; } table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; /* Wide tables scroll internally rather than breaking mobile layout. */ } :focus-visible { outline: 2px solid var(--nfc-color-accent); outline-offset: 2px; border-radius: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nfc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.75em 1.25em; background: var(--nfc-color-bg); color: var(--nfc-color-text); box-shadow: var(--nfc-shadow-lg); } .nfc-skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ========================================================================== 3. Layout containers ========================================================================== */ .nfc-container { width: 100%; max-width: var(--nfc-max-width); margin-inline: auto; padding-inline: var(--nfc-container-pad-mobile); } .nfc-main-content { display: block; padding-block: var(--nfc-content-top-pad); } @media (min-width: 782px) { .nfc-container { padding-inline: var(--nfc-container-pad); } } /* ========================================================================== 4. Header & navigation (mobile-first) ========================================================================== */ .nfc-site-header { background: var(--nfc-header-bg); color: var(--nfc-header-text); border-bottom: var(--nfc-header-border-width) solid var(--nfc-header-border-color); } .nfc-sticky-header .nfc-site-header { position: sticky; top: 0; z-index: 200; box-shadow: var(--nfc-shadow); } .nfc-site-header__inner { position: relative; max-width: var(--nfc-max-width); margin-inline: auto; min-height: var(--nfc-header-height-mobile); padding: 0.5rem var(--nfc-container-pad-mobile); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } @media (min-width: 782px) { .nfc-site-header__inner { padding-inline: var(--nfc-container-pad); } } @media (min-width: 1000px) { .nfc-site-header__inner { min-height: var(--nfc-header-height); } } /* Header layout variants (Customizer > Header Design > Header Layout). */ .nfc-header-centered .nfc-site-header__inner, .nfc-header-stacked .nfc-site-header__inner { flex-wrap: wrap; } @media (min-width: 1000px) { /* * Centred header. The utility buttons (dark mode, search) are * absolutely positioned to the right rather than left in the flow — * in a column layout they were being pushed onto a row of their own, * which added roughly 90px of empty header for a single 40px button. */ .nfc-header-centered .nfc-site-header__inner { flex-direction: column; gap: 0.6rem; padding-block: 0.9rem; } .nfc-header-centered .nfc-site-branding { text-align: center; flex: 0 0 auto; } .nfc-header-centered .nfc-site-logo img { margin-inline: auto; } .nfc-header-centered .nfc-dark-toggle, .nfc-header-centered .nfc-ajax-search-toggle { position: absolute; right: var(--nfc-container-pad); top: 50%; transform: translateY(-50%); } .nfc-header-stacked .nfc-site-header__inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 0.9rem; } .nfc-header-stacked .nfc-dark-toggle, .nfc-header-stacked .nfc-ajax-search-toggle { position: absolute; right: var(--nfc-container-pad); top: 50%; transform: translateY(-50%); } .nfc-header-stacked .nfc-primary-nav, .nfc-header-centered .nfc-primary-nav { width: 100%; justify-content: center; } .nfc-header-stacked .nfc-primary-nav { justify-content: flex-start; } } .nfc-site-branding { min-width: 0; /* Allows the title to truncate rather than push the nav off-screen. */ flex: 1; } .nfc-site-logo img { max-height: var(--nfc-logo-max-height); width: auto; } .nfc-site-title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; } .nfc-site-title a { color: var(--nfc-header-text); text-decoration: none; } .nfc-site-tagline { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--nfc-color-muted); line-height: 1.3; } /* Nav wrapper holds the toggle + the menu panel. */ .nfc-primary-nav { display: flex; align-items: center; gap: 0.5rem; } .nfc-nav-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); padding: 0; cursor: pointer; flex-shrink: 0; } .nfc-nav-toggle__icon, .nfc-nav-toggle__icon::before, .nfc-nav-toggle__icon::after { display: block; width: 20px; height: 2px; background: var(--nfc-header-text); border-radius: 2px; position: relative; transition: transform var(--nfc-transition), opacity var(--nfc-transition); } .nfc-nav-toggle__icon::before, .nfc-nav-toggle__icon::after { content: ""; position: absolute; left: 0; } .nfc-nav-toggle__icon::before { top: -6px; } .nfc-nav-toggle__icon::after { top: 6px; } /* Animate to an X when open. */ .nfc-primary-nav.is-open .nfc-nav-toggle__icon { background: transparent; } .nfc-primary-nav.is-open .nfc-nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); } .nfc-primary-nav.is-open .nfc-nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu panel: full-width dropdown below the header row. */ /* Mobile menu panel. Uses its own colour variables rather than inheriting the header's — a dark header with a dark dropdown made submenu text unreadable, which is the bug this separation fixes. */ .nfc-primary-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: var(--nfc-menu-gap); list-style: none; margin: 0; padding: 0.5rem 1rem 1rem; background: var(--nfc-menu-bg); border-bottom: 1px solid var(--nfc-color-border); box-shadow: var(--nfc-shadow-lg); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 150; } .nfc-primary-nav.is-open .nfc-primary-menu { display: flex; } /* Divider lines are off unless enabled in the Customizer — the variable resolves to `transparent` when the setting is off, so the layout never shifts between the two states. */ .nfc-primary-menu > li { border-bottom: 1px solid var(--nfc-menu-divider); } .nfc-primary-menu > li:last-child { border-bottom: 0; } .nfc-primary-menu a { display: block; padding: 0.8rem 0.6rem; color: var(--nfc-menu-text); font-weight: 600; font-size: var(--nfc-menu-size); text-decoration: none; border-radius: var(--nfc-radius-sm); transition: color var(--nfc-transition), background var(--nfc-transition); } .nfc-primary-menu a:hover, .nfc-primary-menu a:focus-visible { color: var(--nfc-menu-hover); background: var(--nfc-menu-hover-bg); text-decoration: none; } /* Submenus: indented inline list on mobile, no hover-flyout. */ .nfc-primary-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0.5rem 0.75rem; background: transparent; } .nfc-primary-menu .sub-menu a { padding: 0.6rem; font-weight: 500; font-size: calc(var(--nfc-menu-size) * 0.94); color: var(--nfc-submenu-text); opacity: 0.92; } /* Desktop nav: horizontal, always visible, no toggle. */ @media (min-width: 1000px) { .nfc-site-header__inner { padding: 0.9rem 1.5rem; } .nfc-site-title { font-size: 1.4rem; } .nfc-nav-toggle { display: none; } .nfc-primary-menu { display: flex; position: static; flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; } .nfc-primary-menu li { border-bottom: 0; position: relative; } .nfc-primary-menu a { padding: 0.25rem 0; font-size: 0.95rem; } /* Desktop submenu flyout. */ .nfc-primary-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; padding: 0.5rem 0; background: var(--nfc-submenu-bg); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); box-shadow: var(--nfc-shadow-lg); z-index: 220; } .nfc-primary-menu li:hover > .sub-menu, .nfc-primary-menu li:focus-within > .sub-menu { display: block; } .nfc-primary-menu .sub-menu a { padding: 0.55rem 1rem; color: var(--nfc-submenu-text); border-radius: 0; } /* Desktop top-level links sit on the header bar, so they take the header's text colour rather than the menu panel's. */ .nfc-primary-menu > li > a { color: var(--nfc-header-text); background: transparent; } .nfc-primary-menu > li > a:hover, .nfc-primary-menu > li > a:focus-visible { color: var(--nfc-header-hover); background: transparent; } .nfc-primary-menu > li { border-bottom: 0; } } /* Header utility buttons (dark mode toggle, search toggle). */ .nfc-ajax-search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--nfc-color-border); border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 0.95rem; color: var(--nfc-color-text); position: relative; } /* ========================================================================== 5. Cards & grids ========================================================================== */ .nfc-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--nfc-grid-gap); } @media (min-width: 600px) { .nfc-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .nfc-card-grid { grid-template-columns: repeat(var(--nfc-grid-columns), minmax(0, 1fr)); } .nfc-card-grid--related { grid-template-columns: repeat(var(--nfc-related-columns), minmax(0, 1fr)); } } .nfc-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .nfc-card__image-link { display: block; overflow: hidden; border-radius: var(--nfc-radius); background: var(--nfc-color-surface); } .nfc-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--nfc-card-radius); transition: transform var(--nfc-transition); } .nfc-card:hover .nfc-card__image { transform: scale(1.03); } .nfc-card__body { display: flex; flex-direction: column; gap: 0.35rem; } .nfc-card__category { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .nfc-card__category a { color: var(--nfc-color-accent); text-decoration: none; } .nfc-card__title { margin: 0; font-size: var(--nfc-size-card-title); line-height: 1.35; font-weight: 700; } .nfc-card__title a { color: var(--nfc-color-text); text-decoration: none; transition: color var(--nfc-transition); } .nfc-card__title a:hover, .nfc-card__title a:focus-visible { color: var(--nfc-color-accent); text-decoration: none; } .nfc-card__meta { margin: 0; font-size: var(--nfc-size-meta); color: var(--nfc-color-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .nfc-card__excerpt { margin: 0; font-size: 0.92em; color: var(--nfc-color-muted); line-height: 1.55; } .nfc-meta__sep { color: var(--nfc-color-border); } /* Featured hero card — full width, larger type. */ .nfc-card--featured .nfc-card__title { font-size: 1.4rem; line-height: 1.25; } @media (min-width: 782px) { .nfc-card--featured .nfc-card__title { font-size: 1.9rem; } } @media (min-width: 1000px) { .nfc-card--featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.75rem; align-items: center; } .nfc-card--featured .nfc-card__title { font-size: 2.1rem; } } /* ========================================================================== 6. Homepage sections ========================================================================== */ .nfc-section { margin-bottom: 2.5rem; } .nfc-section__heading { position: relative; font-size: var(--nfc-size-widget-title); margin: 0 0 1.25rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--nfc-color-border); } .nfc-section__heading::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--nfc-color-accent); } .nfc-card-grid--secondary { margin-top: 1.75rem; } /* Homepage two-column layout — stacks on mobile, splits on desktop. */ .nfc-homepage__columns { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 1000px) { .nfc-homepage__columns { grid-template-columns: minmax(0, 1fr) var(--nfc-sidebar-width); gap: 2.5rem; } .nfc-homepage__columns--full { grid-template-columns: 1fr; } /* Sidebar column stacks its own card grid to a single column. */ .nfc-homepage__secondary .nfc-card-grid { grid-template-columns: 1fr; } } .nfc-homepage__primary, .nfc-homepage__secondary { min-width: 0; /* Prevents grid blowout from wide children. */ } /* Trending list. */ .nfc-trending-list { list-style: none; margin: 0; padding: 0; } .nfc-trending-list__item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--nfc-color-border); } .nfc-trending-list__item:last-child { border-bottom: 0; } .nfc-trending-list__rank { font-weight: 800; font-size: 1.1rem; color: var(--nfc-color-accent); min-width: 1.4em; flex-shrink: 0; } .nfc-trending-list a { color: var(--nfc-color-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.4; } .nfc-trending-list a:hover, .nfc-trending-list a:focus-visible { color: var(--nfc-color-accent); } /* Category list. */ .nfc-category-list { list-style: none; margin: 0; padding: 0; } .nfc-category-list li { border-bottom: 1px solid var(--nfc-color-border); } .nfc-category-list li:last-child { border-bottom: 0; } .nfc-category-list a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0; color: var(--nfc-color-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .nfc-category-list a:hover, .nfc-category-list a:focus-visible { color: var(--nfc-color-accent); } .nfc-category-list__count { color: var(--nfc-color-muted); font-weight: 500; font-size: 0.85em; } /* Load more button. */ .nfc-load-more { display: block; width: 100%; margin: 1.75rem auto 0; padding: 0.85em 2em; background: var(--nfc-color-text); color: var(--nfc-color-bg); border: 0; border-radius: var(--nfc-radius); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--nfc-transition); } @media (min-width: 600px) { .nfc-load-more { width: auto; min-width: 220px; } } .nfc-load-more:hover, .nfc-load-more:focus-visible { background: var(--nfc-color-accent); } .nfc-load-more:disabled { opacity: 0.6; cursor: default; } /* ========================================================================== 7. Single article ========================================================================== */ /* No top padding here — .nfc-main-content already applies the configured content spacing. Having both produced a double gap between the header and the first element on every post. */ /* No bottom padding here. It stacked on top of the last section's own bottom margin and the footer's top margin, producing a gap far larger than any single value suggested. Sections own their own spacing. */ /* * Single column, always. * * This previously declared a two-column grid — a 56px rail for share * buttons beside the article. The share rail markup was removed when * share positioning was rebuilt, but the grid was left behind, so the * article body dropped into the 56px column and rendered as a ~275px * ribbon of text on desktop. Laying out in one column and centring the * body cannot fail that way regardless of what else is or isn't * rendered inside it. * * The floating share rail now positions itself rather than occupying a * grid column, so there is nothing for the layout to depend on. */ .nfc-article-layout { display: block; position: relative; } .nfc-article-layout__main { min-width: 0; width: 100%; max-width: var(--nfc-content-width); margin-inline: auto; } /* Desktop floating share rail. Positioned against the article wrapper and pulled into the margin beside the text, so it never affects the width of the content itself. */ @media (min-width: 1200px) { .nfc-share--at-floating { position: absolute; top: 0; left: 0; width: 56px; } .nfc-share--at-floating .nfc-share__list { position: sticky; top: 6rem; flex-direction: column; } } .nfc-share-buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } @media (min-width: 1000px) { .nfc-share-buttons { flex-direction: column; position: sticky; top: 6rem; margin-bottom: 0; } } .nfc-share-buttons__item { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--nfc-color-surface); color: var(--nfc-color-text); font-weight: 700; font-size: 0.9rem; font-family: inherit; cursor: pointer; text-decoration: none; transition: background var(--nfc-transition), color var(--nfc-transition); flex-shrink: 0; } .nfc-share-buttons__item:hover, .nfc-share-buttons__item:focus-visible { background: var(--nfc-color-accent); color: #fff; text-decoration: none; } /* Article header/meta. */ .nfc-article-meta__category a { color: var(--nfc-color-accent); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; } .nfc-article-meta__category { margin: 0 0 0.4rem; } .nfc-article-title { font-size: min(var(--nfc-size-h1), 9vw); line-height: 1.2; margin: 0 0 0.75rem; } @media (min-width: 782px) { .nfc-article-title { font-size: var(--nfc-size-h1); } } /* Subheading / standfirst under the post title. */ .nfc-article-subheading { font-size: min(var(--nfc-size-subheading), 5.5vw); line-height: 1.5; color: var(--nfc-color-muted); font-weight: 400; margin: 0 0 1rem; } @media (min-width: 782px) { .nfc-article-subheading { font-size: var(--nfc-size-subheading); } } /* Entry meta row. nowrap on the outer flex keeps the author avatar on the same line as the byline text — with wrap enabled the avatar drops onto its own line as soon as the meta text is long enough to fill the row, which is what "author image and name should be in line" is asking to fix. The inner items list still wraps freely, so a long byline flows onto a second line beneath itself rather than pushing the avatar away. */ .nfc-article-meta__row { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.6rem; color: var(--nfc-color-muted); font-size: var(--nfc-size-meta); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--nfc-color-border); } .nfc-article-meta__items { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; } .nfc-meta__avatar { border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0; margin: 0; } .nfc-article-meta__row a { color: var(--nfc-color-text); font-weight: 600; text-decoration: none; } .nfc-article-meta__row a:hover, .nfc-article-meta__row a:focus-visible { color: var(--nfc-color-accent); } /* Google Preferred Sources button. */ .nfc-preferred-source { margin: 0 0 1.5rem; } .nfc-preferred-source a { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55em 1em; border-radius: 999px; color: var(--nfc-ps-color); font-size: var(--nfc-ps-size); font-weight: 600; text-decoration: none; transition: border-color var(--nfc-transition), background var(--nfc-transition), color var(--nfc-transition); } .nfc-preferred-source__icon { display: inline-flex; line-height: 0; flex-shrink: 0; } .nfc-preferred-source--button a { background: var(--nfc-ps-bg); border: 1px solid var(--nfc-ps-border); } /* Chip variant sits inline within the byline row rather than on its own line, so it reads as part of the entry meta. */ .nfc-article-meta__items .nfc-preferred-source { display: inline-flex; margin: 0; } .nfc-preferred-source--chip a { padding: 0.25em 0.7em; background: var(--nfc-ps-bg); border: 1px solid var(--nfc-ps-border); font-size: 0.92em; gap: 0.35rem; } .nfc-preferred-source--chip svg { width: 14px; height: 14px; } .nfc-preferred-source--button a:hover, .nfc-preferred-source--button a:focus-visible { border-color: var(--nfc-color-accent); text-decoration: none; } .nfc-preferred-source--filled a { background: var(--nfc-color-surface); border: 1px solid transparent; } .nfc-preferred-source--filled a:hover, .nfc-preferred-source--filled a:focus-visible { background: var(--nfc-color-accent); color: #fff; text-decoration: none; } .nfc-preferred-source--inline a { padding: 0; background: none; border: 0; text-decoration: underline; } /* Post tags. */ .nfc-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 2rem 0; } .nfc-post-tags__label { font-weight: 700; font-size: var(--nfc-size-meta); } .nfc-post-tags__item { padding: 0.3em 0.75em; background: var(--nfc-color-surface); border-radius: 100px; font-size: var(--nfc-size-meta); color: var(--nfc-color-text); text-decoration: none; } .nfc-post-tags__item:hover, .nfc-post-tags__item:focus-visible { background: var(--nfc-color-accent); color: #fff; text-decoration: none; } .nfc-featured-image-wrap { margin: 0 0 var(--nfc-feat-below); } .nfc-featured-image { width: 100%; border-radius: var(--nfc-feat-radius); background: var(--nfc-color-surface); /* aspect-ratio, object-fit and max-height come from customizer-output.php so "original proportions" can genuinely mean no ratio at all. */ } /* Display styles. Negative margins rather than a wider width, so the image still respects the container's own padding on small screens. */ .nfc-featured--wide { margin-inline: -1rem; } @media (min-width: 1000px) { .nfc-featured--wide { margin-inline: -4rem; } } .nfc-featured--full { margin-inline: calc( 50% - 50vw ); width: 100vw; max-width: 100vw; } .nfc-featured--full .nfc-featured-image { border-radius: 0; } .nfc-featured--full .nfc-featured-image__caption { padding-inline: var(--nfc-container-pad-mobile); } @media (min-width: 782px) { .nfc-featured--full .nfc-featured-image__caption { padding-inline: var(--nfc-container-pad); } } .nfc-featured-image__caption { margin-top: 0.5rem; font-size: var(--nfc-feat-cap-size); color: var(--nfc-color-muted); text-align: var(--nfc-feat-cap-align); line-height: 1.5; } /* Article body typography. */ .nfc-article-content { font-size: calc(var(--nfc-size-content) * 0.94); line-height: var(--nfc-line-content); } @media (min-width: 782px) { .nfc-article-content { font-size: var(--nfc-size-content); } } .nfc-article-content h2 { margin-top: 2em; margin-bottom: 0.5em; } .nfc-article-content h3 { margin-top: 1.75em; margin-bottom: 0.5em; } .nfc-article-content p { margin-bottom: 1.3em; } .nfc-article-content a { color: var(--nfc-color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .nfc-article-content ul, .nfc-article-content ol { padding-left: 1.4em; margin-bottom: 1.3em; } .nfc-article-content li { margin-bottom: 0.5em; } .nfc-article-content img, .nfc-article-content figure { margin: 1.75em 0; border-radius: var(--nfc-radius); } /* Embed figures opt out of the rounded corners above — the radius clips provider chrome that sits flush to the frame edge. */ .nfc-article-content figure.wp-block-embed { border-radius: 0; overflow: visible; } .nfc-article-content figure img { margin: 0; } .nfc-article-content figcaption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--nfc-color-muted); text-align: center; } .nfc-article-content blockquote { margin: 1.75em 0; padding: 0.5em 0 0.5em 1.25em; border-left: 3px solid var(--nfc-color-accent); color: var(--nfc-color-muted); font-style: italic; } .nfc-article-content blockquote p:last-child { margin-bottom: 0; } .nfc-article-content pre { background: var(--nfc-color-surface); padding: 1rem; border-radius: var(--nfc-radius-sm); overflow-x: auto; font-size: 0.9rem; } .nfc-article-content code { background: var(--nfc-color-surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; } .nfc-article-content pre code { background: none; padding: 0; } /* Reading progress bar. */ .nfc-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; pointer-events: none; } .nfc-reading-progress__bar { height: 100%; width: 0; background: var(--nfc-color-accent); transition: width 60ms linear; } /* Table of contents. */ .nfc-toc { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.1rem 1.25rem; margin: 0 0 1.75rem; } .nfc-toc__heading { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } .nfc-toc__list { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; } .nfc-toc__item { margin-bottom: 0.4rem; } .nfc-toc__item--level-3 { margin-left: 1rem; list-style-type: circle; font-size: 0.9rem; } .nfc-toc a { color: var(--nfc-color-text); text-decoration: none; } .nfc-toc a:hover, .nfc-toc a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } /* Author bio. */ .nfc-author-bio { display: flex; gap: 1rem; align-items: flex-start; margin: 2.5rem 0; padding: 1.5rem; background: var(--nfc-color-surface); border-radius: var(--nfc-radius); } .nfc-author-bio__avatar { border-radius: 50%; flex-shrink: 0; width: 56px; height: 56px; } .nfc-author-bio__name { margin: 0 0 0.3rem; font-weight: 700; } .nfc-author-bio__name a { color: var(--nfc-color-text); text-decoration: none; } .nfc-author-bio__description { margin: 0; color: var(--nfc-color-muted); font-size: 0.92rem; line-height: 1.6; } /* Next/previous navigation. */ .nfc-post-navigation { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; } @media (min-width: 600px) { .nfc-post-navigation { grid-template-columns: 1fr 1fr; } .nfc-post-navigation__next { text-align: right; } } .nfc-post-navigation a { display: block; padding: 1rem; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); color: var(--nfc-color-text); text-decoration: none; transition: border-color var(--nfc-transition); } .nfc-post-navigation a:hover, .nfc-post-navigation a:focus-visible { border-color: var(--nfc-color-accent); text-decoration: none; } .nfc-post-navigation__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nfc-color-muted); margin-bottom: 0.3rem; } .nfc-post-navigation__title { font-weight: 700; font-size: 0.95rem; line-height: 1.4; } .nfc-page-links { margin: 1.5rem 0; font-weight: 600; } .nfc-page-links a { padding: 0.25em 0.6em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); margin-right: 0.25rem; text-decoration: none; } /* ========================================================================== 8. Breadcrumbs, archives, 404, pagination ========================================================================== */ /* Breadcrumbs — sits directly beneath the header, filling what was previously dead padding. Separator is real markup rather than a CSS ::after so the character is selectable from the Customizer. */ .nfc-breadcrumbs { background: var(--nfc-crumb-bg); padding-block: var(--nfc-crumb-pad); font-size: var(--nfc-crumb-size); color: var(--nfc-crumb-color); border-bottom: 1px solid var(--nfc-color-border); margin-bottom: 0; } /* When breadcrumbs are present they already provide the visual break under the header, so the content area's own top padding is dropped to avoid stacking two gaps on top of each other. */ .nfc-breadcrumbs + .nfc-main-content { padding-top: 0; } .nfc-breadcrumbs + .nfc-main-content > .nfc-container > .nfc-archive-header, .nfc-breadcrumbs + .nfc-main-content .nfc-article-header { padding-top: 1.25rem; } .nfc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .nfc-breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .nfc-breadcrumbs__sep { color: var(--nfc-crumb-sep); flex-shrink: 0; } /* Single-line mode. The trail stays on one row; the final step (the article title) is the only flexible item, so it absorbs the shortfall and ellipsises rather than wrapping the whole trail onto a second line. Server-side truncation already caps the character count — this handles the remaining overflow at narrow widths. */ .nfc-breadcrumbs--oneline ol { flex-wrap: nowrap; overflow: hidden; } .nfc-breadcrumbs--oneline li { flex-shrink: 0; } .nfc-breadcrumbs--oneline li:last-child { flex-shrink: 1; min-width: 0; } .nfc-breadcrumbs--oneline li:last-child > span, .nfc-breadcrumbs--oneline li:last-child > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nfc-breadcrumbs a { color: var(--nfc-crumb-link); text-decoration: none; } .nfc-breadcrumbs a:hover, .nfc-breadcrumbs a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } .nfc-breadcrumbs--center ol { justify-content: center; } .nfc-breadcrumbs--right ol { justify-content: flex-end; } /* Social icons — style variants selectable in the Customizer. */ .nfc-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .nfc-social-links__item { display: inline-flex; align-items: center; justify-content: center; width: var(--nfc-social-size); height: var(--nfc-social-size); color: var(--nfc-social-color); background: var(--nfc-social-bg); border: 1px solid transparent; text-decoration: none; transition: background var(--nfc-transition), color var(--nfc-transition), border-color var(--nfc-transition); } .nfc-social-links__item:hover, .nfc-social-links__item:focus-visible { background: var(--nfc-social-hover); color: #fff; text-decoration: none; } .nfc-social-links--circle .nfc-social-links__item { border-radius: 50%; } .nfc-social-links--circle_outline .nfc-social-links__item { border-radius: 50%; background: transparent; border-color: currentColor; } .nfc-social-links--square .nfc-social-links__item { border-radius: 0; } .nfc-social-links--rounded .nfc-social-links__item { border-radius: var(--nfc-radius-sm); } .nfc-social-links--plain .nfc-social-links__item { background: transparent; width: auto; height: auto; padding: 0.35rem; } .nfc-social-links--plain .nfc-social-links__item:hover, .nfc-social-links--plain .nfc-social-links__item:focus-visible { background: transparent; color: var(--nfc-social-hover); } .nfc-social__icon { width: 45%; height: auto; min-width: 16px; } .nfc-social-links--plain .nfc-social__icon { width: 20px; } /* Official brand colours, applied on hover so the default state stays visually consistent with the rest of the footer. */ .nfc-social-links--brand .nfc-social--x:hover { background: #000; } .nfc-social-links--brand .nfc-social--facebook:hover { background: #1877f2; } .nfc-social-links--brand .nfc-social--instagram:hover { background: #e4405f; } .nfc-social-links--brand .nfc-social--whatsapp:hover { background: #25d366; } .nfc-social-links--brand .nfc-social--youtube:hover { background: #ff0000; } .nfc-social-links--brand .nfc-social--tiktok:hover { background: #000; } .nfc-social-links--brand .nfc-social--telegram:hover { background: #26a5e4; } /* Dark mode toggle — a real sliding switch rather than a plain icon button. Both icons ship in the markup and CSS decides which is visible, so the correct one is showing from the very first paint with no JavaScript involved and no wrong-icon flash. */ .nfc-dark-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; line-height: 0; } .nfc-dark-toggle__track { position: relative; display: block; width: 52px; height: 28px; border-radius: 999px; background: var(--nfc-toggle-track, #d7dae0); transition: background var(--nfc-transition); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16); } .nfc-dark-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #f5a623; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--nfc-transition), color var(--nfc-transition); } html[data-theme="dark"] .nfc-dark-toggle__track { background: var(--nfc-toggle-track-on, #4a90d9); } html[data-theme="dark"] .nfc-dark-toggle__thumb { transform: translateX(24px); color: #2b3a55; } .nfc-dark-toggle__moon, html[data-theme="dark"] .nfc-dark-toggle__sun { display: none; } html[data-theme="dark"] .nfc-dark-toggle__moon { display: block; } /* Icon-only variant — no track, just the glyph. */ .nfc-dark-toggle--style-icon .nfc-dark-toggle__track { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--nfc-color-border); box-shadow: none; } .nfc-dark-toggle--style-icon .nfc-dark-toggle__thumb { position: static; width: 100%; height: 100%; background: transparent; box-shadow: none; color: var(--nfc-header-text); transform: none; } html[data-theme="dark"] .nfc-dark-toggle--style-icon .nfc-dark-toggle__thumb { transform: none; color: var(--nfc-header-text); } /* Pill variant — wider track, icon stays centred in the thumb. */ .nfc-dark-toggle--style-pill .nfc-dark-toggle__track { width: 64px; height: 30px; } .nfc-dark-toggle--style-pill .nfc-dark-toggle__thumb { width: 24px; height: 24px; } html[data-theme="dark"] .nfc-dark-toggle--style-pill .nfc-dark-toggle__thumb { transform: translateX(34px); } .nfc-dark-toggle--float_right, .nfc-dark-toggle--float_left { position: fixed; bottom: 1.25rem; z-index: 400; padding: 0.4rem; background: var(--nfc-color-surface); border-radius: 999px; box-shadow: var(--nfc-shadow-lg); } .nfc-dark-toggle--float_right { right: 1.25rem; } .nfc-dark-toggle--float_left { left: 1.25rem; } .nfc-dark-toggle--float_right { right: 1.25rem; } .nfc-dark-toggle--float_left { left: 1.25rem; } /* In-content recommendations ("Don't Miss"). Every value below is a variable set from Customizer > In-Content Recommendations. */ .nfc-inline-rec { margin: var(--nfc-inline-margin) 0; padding: var(--nfc-inline-pad); border-radius: var(--nfc-inline-radius); background: var(--nfc-inline-bg); } .nfc-inline-rec--bordered { border: var(--nfc-inline-bw) solid var(--nfc-inline-border); background: transparent; } .nfc-inline-rec--filled { border: 0; } .nfc-inline-rec--accentbar { border-left: var(--nfc-inline-bw) solid var(--nfc-inline-border); border-radius: 0 var(--nfc-inline-radius) var(--nfc-inline-radius) 0; } .nfc-inline-rec--minimal { background: transparent; padding-inline: 0; border-top: 1px solid var(--nfc-color-border); border-bottom: 1px solid var(--nfc-color-border); border-radius: 0; } /* Break out of the reading column when asked. Negative margins rather than a wider width so it still respects the container's own padding on small screens. */ .nfc-inline-rec--full { margin-inline: calc(var(--nfc-inline-pad) * -1); } @media (min-width: 1000px) { .nfc-inline-rec--full { margin-inline: -3rem; } } .nfc-inline-rec__heading { margin: 0 0 0.75rem; font-size: var(--nfc-inline-heading-size); font-weight: 800; letter-spacing: 0.07em; text-transform: var(--nfc-inline-transform); color: var(--nfc-inline-heading-col); } .nfc-inline-rec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .nfc-inline-rec__item { display: flex; align-items: center; gap: 0.9rem; min-width: 0; } .nfc-inline-rec__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .nfc-inline-rec__thumb { flex-shrink: 0; width: var(--nfc-inline-img); line-height: 0; } .nfc-inline-rec__thumb img { width: var(--nfc-inline-img); height: var(--nfc-inline-img); object-fit: cover; margin: 0; } .nfc-inline-rec--img-square .nfc-inline-rec__thumb img { border-radius: 0; } .nfc-inline-rec--img-rounded .nfc-inline-rec__thumb img { border-radius: var(--nfc-radius-sm); } .nfc-inline-rec--img-circle .nfc-inline-rec__thumb img { border-radius: 50%; } .nfc-inline-rec--img-wide .nfc-inline-rec__thumb, .nfc-inline-rec--img-wide .nfc-inline-rec__thumb img { width: calc(var(--nfc-inline-img) * 1.78); } .nfc-inline-rec--img-wide .nfc-inline-rec__thumb img { height: var(--nfc-inline-img); border-radius: var(--nfc-radius-sm); } /* Stacked: thumbnail sits above the text. */ .nfc-inline-rec--layout-stacked .nfc-inline-rec__item { flex-direction: column; align-items: flex-start; } .nfc-inline-rec--layout-stacked .nfc-inline-rec__thumb, .nfc-inline-rec--layout-stacked .nfc-inline-rec__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* Grid: items sit side by side once there's room. */ @media (min-width: 600px) { .nfc-inline-rec--layout-grid .nfc-inline-rec__list { flex-direction: row; flex-wrap: wrap; } .nfc-inline-rec--layout-grid .nfc-inline-rec__item { flex: 1 1 calc(50% - 0.5rem); min-width: 0; } } .nfc-inline-rec__link { font-weight: 700; font-size: var(--nfc-inline-title-size); line-height: 1.4; color: var(--nfc-inline-link); text-decoration: var(--nfc-inline-underline); } .nfc-inline-rec__link:hover, .nfc-inline-rec__link:focus-visible { color: var(--nfc-inline-link-hover); text-decoration: underline; } .nfc-inline-rec__category { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nfc-inline-heading-col); } .nfc-inline-rec__excerpt, .nfc-inline-rec__date { font-size: 0.85em; color: var(--nfc-inline-meta); line-height: 1.5; } .nfc-archive-title { font-size: 1.6rem; margin: 0 0 0.5rem; } @media (min-width: 782px) { .nfc-archive-title { font-size: 2.1rem; } } .nfc-archive-title span { color: var(--nfc-color-accent); } .nfc-archive-description { color: var(--nfc-color-muted); max-width: 65ch; } .nfc-no-results { padding: 2rem 0; color: var(--nfc-color-muted); } .nfc-404 { padding-block: 2rem; text-align: center; } .nfc-404 h1 { font-size: 1.8rem; } .nfc-404 h2 { margin-top: 2.5rem; text-align: left; } .nfc-404 .nfc-card-grid { text-align: left; } .nfc-404 form { max-width: 420px; margin: 1.5rem auto; display: flex; gap: 0.5rem; } .nfc-404 input[type="search"] { flex: 1; padding: 0.65em 0.9em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } /* WordPress core pagination. */ .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 2.5rem 0; } .pagination .page-numbers, .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 0.75em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); color: var(--nfc-color-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--nfc-color-accent); border-color: var(--nfc-color-accent); color: #fff; } .pagination .page-numbers:hover, .nav-links .page-numbers:hover { border-color: var(--nfc-color-accent); text-decoration: none; } /* ========================================================================== 9. Sidebar & widgets ========================================================================== */ .nfc-homepage__secondary .widget, .nfc-sidebar .widget { margin-bottom: 2rem; } .widget-title { font-size: var(--nfc-size-widget-title); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--nfc-color-border); padding-bottom: 0.5rem; margin-bottom: 1rem; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--nfc-color-border); } .widget li:last-child { border-bottom: 0; } .widget a { color: var(--nfc-color-text); text-decoration: none; font-size: 0.95rem; } .widget a:hover, .widget a:focus-visible { color: var(--nfc-color-accent); } /* ========================================================================== 10. Footer ========================================================================== */ .nfc-site-footer { margin-top: 1.5rem; padding: var(--nfc-footer-padding) 0; border-top: 1px solid var(--nfc-color-border); background: var(--nfc-footer-bg); font-size: 0.92rem; color: var(--nfc-footer-text); } .nfc-footer-widgets { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--nfc-color-border); } @media (min-width: 600px) { .nfc-footer-widgets { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .nfc-site-info { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; } @media (min-width: 782px) { .nfc-site-info { flex-direction: row; justify-content: space-between; text-align: left; } } .nfc-copyright, .nfc-privacy-link { margin: 0; } .nfc-copyright a { color: var(--nfc-color-text); font-weight: 600; text-decoration: none; } /* ========================================================================== 11. Modules ========================================================================== */ /* --- Breaking news ticker --- */ .nfc-breaking-ticker { display: flex; align-items: center; gap: 0.75rem; background: var(--nfc-color-accent); color: #fff; padding: 0.55rem 1rem; overflow: hidden; } .nfc-breaking-ticker__label { flex-shrink: 0; font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding-right: 0.75rem; border-right: 1px solid rgba(255, 255, 255, 0.35); } .nfc-breaking-ticker__track { display: flex; gap: 2.5rem; white-space: nowrap; animation: nfc-ticker-scroll 30s linear infinite; font-size: 0.9rem; min-width: 0; } .nfc-breaking-ticker__track a { color: #fff; text-decoration: none; font-weight: 600; } .nfc-breaking-ticker__track a:hover { text-decoration: underline; } @keyframes nfc-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .nfc-breaking-ticker__dismiss { flex-shrink: 0; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } @media (prefers-reduced-motion: reduce) { .nfc-breaking-ticker__track { animation: none; overflow-x: auto; } } /* --- Ajax search --- */ .nfc-ajax-search-panel { position: absolute; right: 1rem; top: 100%; width: 300px; max-width: calc(100vw - 2rem); padding: 1rem; background: var(--nfc-color-bg); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); box-shadow: var(--nfc-shadow-lg); z-index: 300; } .nfc-ajax-search-panel input { width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .nfc-ajax-search-results { list-style: none; margin: 0.75rem 0 0; padding: 0; } .nfc-ajax-search-results li { padding: 0.5rem 0; border-bottom: 1px solid var(--nfc-color-border); font-size: 0.9rem; } .nfc-ajax-search-results li:last-child { border-bottom: 0; } .nfc-ajax-search-results a { color: var(--nfc-color-text); text-decoration: none; } .nfc-ajax-search-results a:hover, .nfc-ajax-search-results a:focus-visible { color: var(--nfc-color-accent); } /* --- Newsletter --- */ .nfc-newsletter { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--nfc-color-border); } .nfc-newsletter__label { display: block; font-weight: 700; color: var(--nfc-color-text); margin-bottom: 0.6rem; font-size: 1rem; } .nfc-newsletter__row { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; } @media (min-width: 600px) { .nfc-newsletter__row { flex-direction: row; } } .nfc-newsletter__row input { flex: 1; padding: 0.7em 0.9em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .nfc-newsletter__row button { padding: 0.7em 1.5em; background: var(--nfc-color-accent); color: #fff; border: 0; border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .nfc-newsletter__row button:disabled { opacity: 0.6; cursor: default; } .nfc-newsletter__message { margin: 0.6rem 0 0; font-size: 0.85rem; } /* --- Sports scoreboard --- */ .nfc-scoreboard { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.1rem; margin: 0 0 1.75rem; text-align: center; } .nfc-scoreboard__competition { margin: 0 0 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nfc-color-muted); font-weight: 700; } .nfc-scoreboard__match { display: flex; align-items: center; justify-content: center; gap: 1rem; font-weight: 700; font-size: 1rem; } @media (min-width: 600px) { .nfc-scoreboard__match { gap: 1.5rem; font-size: 1.15rem; } } .nfc-scoreboard__team { flex: 1; min-width: 0; } .nfc-scoreboard__score { font-size: 1.5rem; color: var(--nfc-color-accent); flex-shrink: 0; } .nfc-scoreboard__vs { color: var(--nfc-color-muted); font-size: 0.85rem; text-transform: uppercase; flex-shrink: 0; } /* --- Review box --- */ .nfc-review-box { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.25rem; margin: 0 0 1.75rem; } .nfc-review-box__rating { font-weight: 800; font-size: 1.8rem; color: var(--nfc-color-accent); margin-bottom: 1rem; line-height: 1; } .nfc-review-box__rating-max { font-size: 1rem; color: var(--nfc-color-muted); font-weight: 600; } .nfc-review-box__pros-cons { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 600px) { .nfc-review-box__pros-cons { grid-template-columns: 1fr 1fr; } } .nfc-review-box__heading { font-weight: 700; margin: 0 0 0.5rem; font-size: 0.95rem; } .nfc-review-box__pros ul, .nfc-review-box__cons ul { margin: 0; padding-left: 1.25rem; font-size: 0.92rem; } .nfc-review-box__pros li, .nfc-review-box__cons li { margin-bottom: 0.35rem; } /* --- Related posts --- */ .nfc-related-posts { margin-top: var(--nfc-related-above); margin-bottom: var(--nfc-related-below); } /* Paged sets. Only the active page is visible; the rest stay in the DOM so pagination needs no network requests and still works without JS. */ .nfc-related__page[hidden] { display: none; } .nfc-related__page + .nfc-related__page { margin-top: var(--nfc-grid-gap); } .nfc-related__nav { display: flex; justify-content: center; margin-top: 1.5rem; } .nfc-related__loadmore, .nfc-related__page-btn, .nfc-related__arrow { font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid var(--nfc-color-border); background: transparent; color: var(--nfc-color-text); border-radius: var(--nfc-radius-sm); transition: background var(--nfc-transition), color var(--nfc-transition), border-color var(--nfc-transition); } .nfc-related__loadmore { padding: 0.7em 2em; background: var(--nfc-related-btn-bg); color: var(--nfc-related-btn-text); border-color: transparent; } .nfc-related__loadmore:hover, .nfc-related__loadmore:focus-visible { filter: brightness(0.92); } .nfc-related__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .nfc-related__page-btn { min-width: 40px; height: 40px; padding: 0 0.6em; } .nfc-related__page-btn:hover, .nfc-related__page-btn:focus-visible { border-color: var(--nfc-related-btn-bg); } .nfc-related__page-btn.is-current { background: var(--nfc-related-btn-bg); color: var(--nfc-related-btn-text); border-color: transparent; } .nfc-related__arrows { display: flex; align-items: center; gap: 1rem; } .nfc-related__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .nfc-related__arrow:disabled { opacity: 0.4; cursor: default; } .nfc-related__counter { font-size: var(--nfc-size-meta); color: var(--nfc-color-muted); font-variant-numeric: tabular-nums; } /* --- Ad slots --- */ /* * NO overflow:hidden here. * * It was here to stop an oversized creative breaking the layout, but * overflow:hidden on an ancestor silently disables position:sticky on * every descendant — so the sticky ad container could never stick. The * clipping is done on the inner wrapper instead, which is not in the * sticky element's ancestor chain. */ .nfc-ad-slot { margin: 1.75rem 0; text-align: center; max-width: 100%; min-height: 0; /* Never reserve height of its own — only the creative sets height. */ } /* * Labels are hidden until JavaScript confirms the slot actually filled. * * Rendering "ADVERTISEMENT / CONTINUE READING BELOW" server-side means * printing them before anyone knows whether an ad will arrive — and an * unfilled slot then leaves two labels wrapped around nothing, which is * exactly what happened. Starting hidden and revealing on confirmation * means the worst case is a missing label, not a phantom ad frame. */ .nfc-ad-label, .nfc-ad-continue { display: none; } .nfc-ad-slot.is-filled .nfc-ad-label, .nfc-ad-slot.is-filled .nfc-ad-continue { display: block; } /* An unfilled slot collapses entirely, including its reserved height. */ .nfc-ad-slot.is-empty { display: none !important; margin: 0 !important; } /* * The container keeps its height from first render. * * An earlier version zeroed it until JavaScript confirmed the ad had * filled — but that meant sticky had no scroll range until the class * landed, and if the creative detection ever failed the ad simply never * became sticky at all. Empty slots are dealt with by collapsing the * whole slot (.is-empty) once the network has had its chance, which is * a single, obvious cause rather than a chain of conditions. */ .nfc-ad-slot img, .nfc-ad-slot iframe { margin-inline: auto; } .nfc-ad--mobile-only { display: block; } .nfc-ad--desktop-only { display: none; } @media (min-width: 783px) { .nfc-ad--mobile-only { display: none; } .nfc-ad--desktop-only { display: block; } } /* ========================================================================== 12. Comments & forms ========================================================================== */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, input[type="search"], input[type="text"], input[type="email"] { width: 100%; max-width: 100%; padding: 0.65em 0.85em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .comment-form textarea { min-height: 9em; } .comment-form .submit, button[type="submit"], input[type="submit"] { padding: 0.7em 1.75em; background: var(--nfc-color-accent); color: #fff; border: 0; border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; } .comment-list { list-style: none; padding: 0; } .comment-list .children { list-style: none; padding-left: 1rem; } @media (min-width: 782px) { .comment-list .children { padding-left: 2rem; } } /* ========================================================================== 13. WordPress core alignment classes ========================================================================== */ .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; } .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; } .aligncenter { margin-inline: auto; } .alignwide, .alignfull { max-width: 100%; } /* Floats are cramped on phones — stack them instead. */ @media (max-width: 600px) { .alignleft, .alignright { float: none; margin: 1rem auto; } } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 0.82rem; color: var(--nfc-color-muted); text-align: center; } .sticky, .gallery-caption, .bypostauthor { /* Required by WordPress theme standards. */ } /* Admin bar offset for sticky header. */ .admin-bar.nfc-sticky-header .nfc-site-header { top: 32px; } @media (max-width: 782px) { .admin-bar.nfc-sticky-header .nfc-site-header { top: 46px; } } /* ========================================================================== 14. Secondary header bar ========================================================================== */ .nfc-secondary-bar { background: var(--nfc-sec-bg); border-bottom: var(--nfc-sec-bw) solid var(--nfc-sec-border); } /* Horizontal scroll rather than wrapping: a category strip that grows to three lines on a phone pushes the actual content off-screen. */ .nfc-secondary-bar__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nfc-secondary-bar__scroll::-webkit-scrollbar { display: none; } /* * width: max-content is the key to making this scroll correctly. * * A flex container that overflows while using auto margins or * justify-content: center pushes its leading items outside the scroll * origin, and the browser cannot scroll back to reach them — they are * clipped permanently. Sizing the list to its content (max-content) * with min-width: 100% means it fills the bar when the items fit, and * grows to exactly its content width when they don't. Centring then * only has spare room to act on in the first case, so it never * displaces anything out of reach. */ .nfc-secondary-menu { display: flex; align-items: center; gap: var(--nfc-sec-gap); list-style: none; margin: 0; padding-inline: var(--nfc-container-pad-mobile); min-height: var(--nfc-sec-height); white-space: nowrap; min-width: 100%; width: max-content; box-sizing: border-box; } @media (min-width: 782px) { .nfc-secondary-menu { padding-inline: var(--nfc-container-pad); } } @media (min-width: 1000px) { /* Once there's room for the full list, honour the container width so the bar lines up with the rest of the site. */ .nfc-secondary-menu { max-width: var(--nfc-max-width); margin-inline: auto; } } /* Separator sits between items as a pseudo-element on the list item, so the character can be changed (or removed) from the Customizer without the markup changing at all. */ .nfc-secondary-menu li { display: flex; align-items: center; gap: var(--nfc-sec-gap); } .nfc-secondary-menu li::after { color: var(--nfc-sec-sep); font-size: 0.9em; line-height: 1; pointer-events: none; } .nfc-secondary-bar--sep-none .nfc-secondary-menu li::after { display: none; } .nfc-secondary-bar--center .nfc-secondary-menu { justify-content: center; } /* Momentum scrolling plus a small end-scroll padding so the final item never sits flush against the edge mid-scroll. */ .nfc-secondary-bar__scroll { scroll-padding-inline: var(--nfc-container-pad-mobile); overscroll-behavior-x: contain; } .nfc-secondary-menu a { display: inline-block; padding: var(--nfc-sec-pad) 0; color: var(--nfc-sec-text); font-family: var(--nfc-sec-font); font-size: var(--nfc-sec-size); font-weight: var(--nfc-sec-weight); letter-spacing: var(--nfc-sec-ls); text-decoration: none; transition: color var(--nfc-transition); } .nfc-secondary-menu a:hover, .nfc-secondary-menu a:focus-visible { color: var(--nfc-sec-hover); text-decoration: none; } /* ========================================================================== 15. Post share buttons ========================================================================== */ .nfc-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; } .nfc-share__heading { font-size: var(--nfc-size-meta); font-weight: 700; color: var(--nfc-color-muted); text-transform: uppercase; letter-spacing: 0.05em; } .nfc-share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .nfc-share__item { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: var(--nfc-share-size); height: var(--nfc-share-size); padding: 0; border: 1px solid transparent; background: var(--nfc-share-bg); color: var(--nfc-share-color); cursor: pointer; text-decoration: none; font-family: inherit; font-size: var(--nfc-size-meta); transition: background var(--nfc-transition), color var(--nfc-transition); } .nfc-share__item:hover, .nfc-share__item:focus-visible { background: var(--nfc-share-hover); color: #fff; text-decoration: none; } .nfc-share__label { display: none; } /* Labelled variant widens the buttons to fit the platform name. */ .nfc-share--labelled .nfc-share__item { width: auto; height: auto; padding: 0.5em 0.9em; } .nfc-share--labelled .nfc-share__label { display: inline; font-weight: 600; } .nfc-share--circle .nfc-share__item { border-radius: 50%; } .nfc-share--rounded .nfc-share__item { border-radius: var(--nfc-radius-sm); } .nfc-share--square .nfc-share__item { border-radius: 0; } .nfc-share--outline .nfc-share__item { background: transparent; border-color: var(--nfc-color-border); border-radius: 50%; } .nfc-share--plain .nfc-share__item { background: transparent; width: auto; height: auto; padding: 0.35rem; } .nfc-share--labelled.nfc-share--circle .nfc-share__item { border-radius: 999px; } /* Floating side rail is desktop-only — on a narrow screen it would sit on top of the article text. Positioning is handled in the article layout section above. */ .nfc-share--at-floating { display: none; } @media (min-width: 1200px) { .nfc-share--at-floating { display: block; margin: 0; } } /* ========================================================================== 16. Table of contents (collapsible) ========================================================================== */ .nfc-toc { width: var(--nfc-toc-width); max-width: 100%; margin: 0 0 1.75rem; padding: 0; border-radius: var(--nfc-radius); overflow: hidden; } .nfc-toc--filled { background: var(--nfc-toc-bg); } .nfc-toc--bordered { border: 1px solid var(--nfc-color-border); } .nfc-toc--accentbar { background: var(--nfc-toc-bg); border-left: 4px solid var(--nfc-color-accent); border-radius: 0 var(--nfc-radius) var(--nfc-radius) 0; } .nfc-toc--minimal { background: transparent; border-top: 1px solid var(--nfc-color-border); border-bottom: 1px solid var(--nfc-color-border); border-radius: 0; } .nfc-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.15rem; cursor: pointer; list-style: none; user-select: none; } /* Hide the browser's default disclosure triangle — we supply our own chevron so it can be styled and animated consistently. */ .nfc-toc__summary::-webkit-details-marker { display: none; } .nfc-toc__summary::marker { content: ""; } .nfc-toc__heading { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--nfc-toc-title); text-transform: uppercase; letter-spacing: 0.04em; } .nfc-toc__chevron { display: inline-flex; color: var(--nfc-toc-title); transition: transform var(--nfc-transition); flex-shrink: 0; } .nfc-toc[open] .nfc-toc__chevron { transform: rotate(180deg); } .nfc-toc__list { margin: 0; padding: 0 1.15rem 1.1rem 2.4rem; font-size: var(--nfc-toc-size); list-style: none; counter-reset: nfc-toc-counter; } .nfc-toc:not(.nfc-toc--collapsible) .nfc-toc__heading { padding: 0.9rem 1.15rem 0.5rem; } .nfc-toc__item { position: relative; margin-bottom: 0.5rem; counter-increment: nfc-toc-counter; } .nfc-toc--numbered .nfc-toc__item::before { content: counter(nfc-toc-counter) "."; position: absolute; left: -1.5rem; color: var(--nfc-color-accent); font-weight: 700; } .nfc-toc__item--level-3 { margin-left: 1rem; font-size: 0.94em; } .nfc-toc a { color: var(--nfc-toc-text); text-decoration: none; } .nfc-toc a:hover, .nfc-toc a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } /* ========================================================================== 17. Footer menu & newsletter button ========================================================================== */ .nfc-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; } .nfc-footer-menu a { color: var(--nfc-footer-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; } .nfc-footer-menu a:hover, .nfc-footer-menu a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } .nfc-newsletter__row button { background: var(--nfc-news-btn-bg); color: var(--nfc-news-btn-text); } /* ========================================================================== 18. Static pages ========================================================================== */ .nfc-page { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; padding-block: var(--nfc-page-top) var(--nfc-content-top-pad); } @media (min-width: 1000px) { .nfc-page--has-sidebar { grid-template-columns: minmax(0, 1fr) var(--nfc-sidebar-width); } } .nfc-page__main { min-width: 0; width: 100%; } /* Width variants. Centred via auto margins so the sidebar variant still lines up correctly when one is present. */ .nfc-page--content:not(.nfc-page--has-sidebar) .nfc-page__main { max-width: var(--nfc-content-width); margin-inline: auto; } .nfc-page--narrow:not(.nfc-page--has-sidebar) .nfc-page__main { max-width: 620px; margin-inline: auto; } .nfc-page--wide .nfc-page__main { max-width: none; } .nfc-page-header { margin-bottom: 1.5rem; } .nfc-page-title { font-size: min(var(--nfc-page-title-size), 9vw); line-height: 1.2; margin: 0 0 0.4rem; } @media (min-width: 782px) { .nfc-page-title { font-size: var(--nfc-page-title-size); } } .nfc-page-meta { margin: 0; font-size: var(--nfc-size-meta); color: var(--nfc-color-muted); } .nfc-page-thumbnail { margin: 0 0 1.75rem; } .nfc-page__sidebar { min-width: 0; } /* A slot with literally no children at all — no labels, no markup — never occupies space. Slots that have labels but received no ad are handled by the .is-empty class, applied once the network has had time to respond. */ .nfc-ad-slot:empty { display: none; margin: 0; } /* ========================================================================== 19. Follow Us channel cards ========================================================================== */ .nfc-follow { margin: 2.5rem 0; } .nfc-follow__heading { margin: 0 0 0.25rem; font-size: var(--nfc-size-widget-title); font-weight: 800; color: var(--nfc-color-heading); } .nfc-follow__sub { margin: 0 0 1rem; font-size: var(--nfc-size-meta); color: var(--nfc-color-muted); } .nfc-follow__list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 600px) { .nfc-follow--grid .nfc-follow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .nfc-follow--grid .nfc-follow__list { grid-template-columns: repeat(var(--nfc-follow-columns), minmax(0, 1fr)); } } /* Compact variant sits inline and wraps, for tight spaces like a sidebar. */ .nfc-follow--compact .nfc-follow__list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .nfc-follow__item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--nfc-follow-radius); text-decoration: none; border: 1px solid var(--nfc-color-border); background: var(--nfc-color-surface); color: var(--nfc-color-text); transition: transform var(--nfc-transition), box-shadow var(--nfc-transition); min-width: 0; } .nfc-follow__item:hover, .nfc-follow__item:focus-visible { transform: translateY(-2px); box-shadow: var(--nfc-shadow-lg); text-decoration: none; } /* Brand mode paints each card in that platform's own colour. --nfc-brand is set per-card inline, since it differs for every one. */ .nfc-follow--brand .nfc-follow__item { background: var(--nfc-brand); border-color: transparent; color: #fff; } .nfc-follow__icon { display: inline-flex; flex-shrink: 0; line-height: 0; } .nfc-follow__text { display: flex; flex-direction: column; min-width: 0; } .nfc-follow__name { font-weight: 700; font-size: 0.98rem; line-height: 1.3; } .nfc-follow__cta { font-size: 0.82rem; opacity: 0.85; line-height: 1.3; } /* Stacked bars run full width with the icon boxed on the left. */ .nfc-follow--list .nfc-follow__item { padding: 1rem 1.15rem; } /* Compact buttons hide the secondary line — there isn't room for it. */ .nfc-follow--compact .nfc-follow__item { padding: 0.5rem 0.85rem; gap: 0.5rem; } .nfc-follow--compact .nfc-follow__cta { display: none; } .nfc-follow--compact .nfc-follow__name { font-size: 0.88rem; } /* Two platforms use pure black as their brand colour, which disappears against a dark page. A hairline border keeps the card's edge readable without altering the official colour. */ html[data-theme="dark"] .nfc-follow--brand .nfc-follow--x, html[data-theme="dark"] .nfc-follow--brand .nfc-follow--tiktok, html[data-theme="dark"] .nfc-follow--brand .nfc-follow--threads { border-color: rgba(255, 255, 255, 0.25); } /* ========================================================================== 20. Featured image blurred backdrop ========================================================================== */ /* * Solves a genuine conflict: filling a fixed frame exactly requires * cropping, and showing the whole image guarantees empty space. Here an * enlarged, blurred copy of the image fills the frame while the real * image sits on top at its true proportions — nothing is cut off, and * there are no blank bars. */ .nfc-featured__frame { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--nfc-feat-radius); background: var(--nfc-feat-backdrop); isolation: isolate; } .nfc-featured__backdrop { position: absolute; /* Inset negatively so the blur's soft edge is pushed outside the frame — otherwise a faded border shows around all four sides. */ inset: calc(var(--nfc-feat-blur) * -2); background-size: cover; background-position: center; filter: blur(var(--nfc-feat-blur)); transform: scale(1.1); z-index: 0; } /* Dimming layer, so the real image reads clearly against its own blur. */ .nfc-featured__frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--nfc-feat-dim)); z-index: 1; pointer-events: none; } .nfc-featured--fit-blurfill .nfc-featured__frame .nfc-featured-image { position: relative; z-index: 2; width: 100%; height: 100%; margin: 0; border-radius: 0; background: transparent; } /* Full-bleed mode already spans the viewport, so the frame should not round its corners. */ .nfc-featured--full .nfc-featured__frame { border-radius: 0; } /* ========================================================================== 21. Image lightbox ========================================================================== */ /* Only images that will actually open get the zoom cursor, so the affordance never lies about what is clickable. */ [data-nfc-lightbox] { cursor: zoom-in; } .nfc-lb-open { overflow: hidden; /* Stop the page scrolling behind the overlay. */ } .nfc-lb { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; background: rgba(0, 0, 0, var(--nfc-lb-dim)); } .nfc-lb[hidden] { display: none; } .nfc-lb__stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 82vh; position: relative; } .nfc-lb__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; cursor: zoom-in; /* No transition on src changes — a fade would make the swap from page copy to full-size copy look like a glitch. */ } .nfc-lb.is-zoomed .nfc-lb__img { max-width: none; max-height: none; cursor: zoom-out; } .nfc-lb.is-zoomed .nfc-lb__stage { max-width: 100%; max-height: 100%; overflow: auto; } .nfc-lb__close, .nfc-lb__nav { position: absolute; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; cursor: pointer; border-radius: 50%; line-height: 1; transition: background var(--nfc-transition); } .nfc-lb__close:hover, .nfc-lb__nav:hover { background: rgba(255, 255, 255, 0.28); } .nfc-lb__close { top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.9rem; } .nfc-lb__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 2rem; } .nfc-lb__nav[hidden] { display: none; } .nfc-lb__nav--prev { left: 0.75rem; } .nfc-lb__nav--next { right: 0.75rem; } .nfc-lb__caption, .nfc-lb__count { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.88rem; text-align: center; max-width: 60ch; } .nfc-lb__caption[hidden], .nfc-lb__count[hidden] { display: none; } .nfc-lb__spinner { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: nfc-lb-spin 0.7s linear infinite; } .nfc-lb__spinner[hidden] { display: none; } @keyframes nfc-lb-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .nfc-lb__spinner { animation: none; } } @media (max-width: 600px) { .nfc-lb__nav { width: 38px; height: 38px; font-size: 1.6rem; } } /* ========================================================================== 22. Sticky ad containers & footer bar ========================================================================== */ .nfc-ad-label, .nfc-ad-continue { display: block; text-align: center; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nfc-color-muted); opacity: 0.75; } .nfc-ad-label { margin-bottom: 0.5rem; } .nfc-ad-continue { margin-top: 0.5rem; } /* * Sticky-in-container. * * The frame is taller than the ad, and the ad sticks inside it — so it * stays on screen while the frame scrolls past, then releases at the * bottom. Ad revenue is paid on viewable impressions, and an in-content * ad on mobile often scrolls past faster than the one second required * to register at all. * * The frame's height is fixed arithmetic on values from the Customizer, * never derived from the creative. A container that sizes itself to a * late-arriving ad IS a layout shift. */ .nfc-ad-slot--sticky { margin: 2rem 0; } /* * Sticky-in-container. This mirrors the standalone demo exactly, which * was verified working on both desktop and mobile before being brought * in here. * * Three things this depends on, each of which silently breaks sticky if * violated: * 1. No overflow / transform / filter on ANY ancestor. * 2. An explicit height on the frame — sticky needs somewhere to move. * 3. Fallbacks inside every var(), because calc() is all-or-nothing * and one missing property discards the whole declaration. */ .nfc-ad-sticky__frame { position: relative; display: block; height: calc(var(--nfc-ad-h, 250px) * var(--nfc-ad-mult, 2.2)); background: var(--nfc-color-surface, #f7f8fa); border-radius: var(--nfc-radius-sm, 6px); padding: 26px 0; box-sizing: border-box; } .nfc-ad-sticky__inner { position: sticky; position: -webkit-sticky; top: var(--nfc-ad-offset, 70px); display: flex; align-items: flex-start; justify-content: center; width: 100%; } /* Clipping belongs on the creative itself. On an ancestor it would disable the sticky positioning above. */ .nfc-ad-sticky__inner > * { max-width: 100%; overflow: hidden; } .nfc-ad-sticky__frame .nfc-ad-label { position: absolute; left: 0; right: 0; top: 8px; margin: 0; } .nfc-ad-sticky__frame .nfc-ad-continue { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; } /* * Sticky STAYS ON for phones. * * An earlier build switched it off below 480px, reasoning that a tall * container would swallow a small viewport. That was the wrong call for * a mobile-first audience: most readers here are on phones, and * viewable-impression time is worth most exactly where the feature was * being disabled. The container is trimmed instead of abandoned. */ @media (max-width: 900px) { .nfc-ad-sticky__frame { height: calc(var(--nfc-ad-h, 250px) * var(--nfc-ad-mult-mobile, 1.9)); } .nfc-ad-sticky__inner { top: var(--nfc-ad-offset-mobile, 60px); } } @media (prefers-reduced-motion: reduce) { .nfc-ad-sticky__inner { position: static; } } /* --- Sticky footer bar --- */ .nfc-sticky-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: none; /* Revealed by script once the reader has scrolled. */ align-items: center; justify-content: center; min-height: var(--nfc-sticky-ad-h); max-height: 30vh; /* Better Ads Standards ceiling, enforced in CSS as well as in the setting, so a large creative cannot push past it. */ padding: 6px; background: var(--nfc-color-bg); border-top: 1px solid var(--nfc-color-border); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12); } .nfc-sticky-ad.is-visible { display: flex; } .nfc-sticky-ad__inner { max-width: 100%; overflow: hidden; line-height: 0; } .nfc-sticky-ad__close { position: absolute; top: -13px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--nfc-color-border); border-radius: 50%; background: var(--nfc-color-bg); color: var(--nfc-color-text); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; } /* Keep the last of the article clear of the bar. */ body.nfc-has-sticky-ad .nfc-site-footer { padding-bottom: calc(var(--nfc-sticky-ad-h) + 1rem); }