/* 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: 2.5.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. */ /* * NOT flex. * * This rule made the card a flex row, so the optional heading became a * sibling of the content rather than sitting above it — squeezed into * its own narrow column beside the avatar. The flex layout belongs on * .nfc-author-bio__inner, which is what actually holds the photo and * the text; the outer element is a plain block wrapper. */ .nfc-author-bio { display: block; margin: 2.5rem 0; padding: var(--nfc-author-pad, 20px); border-radius: var(--nfc-author-radius, 10px); } .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__next .nfc-post-navigation__text { align-items: flex-end; } } /* * Flex, not block. * * This rule previously set display:block, which put the arrow on its own * line above the label instead of beside it. It also came later in the * file than the flex rule added with the icons, so it silently won — * the kind of conflict that only shows up once someone looks at the * rendered page. */ .nfc-post-navigation a { display: flex; align-items: center; gap: 0.8rem; 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.2rem; line-height: 1; } .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; } /* * Brand colours. * * Each platform's official colour is set once as a custom property on * the item, then the chosen mode decides where it is applied — as the * background, as the icon colour, or only on hover. Defining the colour * once rather than per-mode keeps the three modes from drifting apart. */ .nfc-social--x { --nfc-brand: #000000; } .nfc-social--facebook { --nfc-brand: #1877f2; } .nfc-social--instagram { --nfc-brand: #e4405f; } .nfc-social--whatsapp { --nfc-brand: #25d366; } .nfc-social--youtube { --nfc-brand: #ff0000; } .nfc-social--tiktok { --nfc-brand: #000000; } .nfc-social--telegram { --nfc-brand: #26a5e4; } /* Always-on brand colour. */ .nfc-social-links--brand .nfc-social-links__item { background: var(--nfc-brand); color: #fff; border-color: transparent; } .nfc-social-links--brand .nfc-social-links__item:hover, .nfc-social-links--brand .nfc-social-links__item:focus-visible { background: var(--nfc-brand); filter: brightness(1.15); } /* Brand colour on hover only. */ .nfc-social-links--brand_hover .nfc-social-links__item:hover, .nfc-social-links--brand_hover .nfc-social-links__item:focus-visible { background: var(--nfc-brand); color: #fff; } /* Brand-coloured glyph on a plain background. */ .nfc-social-links--brand_icon .nfc-social-links__item { background: var(--nfc-social-bg); color: var(--nfc-brand); } .nfc-social-links--brand_icon .nfc-social-links__item:hover, .nfc-social-links--brand_icon .nfc-social-links__item:focus-visible { background: var(--nfc-brand); color: #fff; } /* Instagram's real identity is a gradient, not a flat colour — using the flat pink alone reads as wrong to anyone who knows the brand. */ .nfc-social-links--brand .nfc-social--instagram { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); } /* X and TikTok are pure black, which vanishes on a dark footer. */ html[data-theme="dark"] .nfc-social-links--brand .nfc-social--x, html[data-theme="dark"] .nfc-social-links--brand .nfc-social--tiktok { border-color: rgba(255, 255, 255, 0.3); } /* 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); } /* * The label inherits from its container, not from the page. * * It used --nfc-color-text, which is dark in light mode — but the * newsletter sits inside the footer, which is dark in BOTH modes. So in * light mode it rendered dark-on-dark and effectively disappeared, * while dark mode looked fine because the token happened to flip. A * component inside a dark region has to take its colour from that * region. */ .nfc-newsletter__label { display: block; font-weight: 700; color: inherit; margin-bottom: 0.6rem; font-size: 1rem; } /* In the footer specifically, use the footer's own heading colour so it reads clearly against the footer background whatever that is set to. */ .nfc-site-footer .nfc-newsletter__label { color: var(--nfc-footer-heading, #fff); } .nfc-site-footer .nfc-newsletter__message { color: var(--nfc-footer-text); } .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; white-space: nowrap; } /* Above the buttons rather than beside them, when chosen. On a narrow screen a label sharing the row with six buttons squeezes them. */ .nfc-share--label-above { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .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; /* * min-height, NOT height. * * A fixed height meant any creative taller than the assumed figure * overflowed the container and printed on top of the paragraphs * below it. Ad networks serve a range of sizes into one slot, so the * assumed height is a floor to reserve, never a ceiling to enforce. */ min-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; } /* Belt and braces: nothing inside the slot may exceed its width, which is the other way an oversized creative breaks the article layout. */ .nfc-ad-slot iframe, .nfc-ad-slot ins, .nfc-ad-slot img { max-width: 100% !important; } /* Labels sit inside the padding rather than on top of the creative. */ .nfc-ad-sticky__frame { padding: 26px 0 30px; } .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 { min-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); } /* Google's official Preferred Sources button. Google renders and styles the button itself, so only its placement is ours to control. */ .nfc-preferred-source--official { margin: 0 0 1.25rem; display: flex; } .nfc-preferred-source--align-left { justify-content: flex-start; } .nfc-preferred-source--align-center { justify-content: center; } .nfc-preferred-source--align-right { justify-content: flex-end; } /* Inside the byline row it should sit inline rather than on its own line. */ .nfc-article-meta__items .nfc-preferred-source--official { display: inline-flex; margin: 0; } /* ========================================================================== 23. Comments ========================================================================== */ .nfc-comments { margin: 2.5rem 0; } /* Native
carries the open/closed state, keyboard handling and screen-reader announcement — no script involved. */ .nfc-comments__wrap { border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-cmt-radius); overflow: hidden; } .nfc-comments__summary { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none; user-select: none; background: transparent; color: var(--nfc-color-text); transition: background var(--nfc-transition); } .nfc-comments__summary:hover { filter: brightness(0.97); } /* Hide the browser's default triangle; a styled chevron replaces it. */ .nfc-comments__summary::-webkit-details-marker { display: none; } .nfc-comments__summary::marker { content: ""; } .nfc-comments__icon { display: inline-flex; color: var(--nfc-cmt-accent); flex-shrink: 0; } .nfc-comments__heading { font-weight: 700; font-size: 1rem; color: var(--nfc-color-heading); flex: 1; } .nfc-comments__heading--static { margin: 0; padding: 1rem 1.15rem; background: var(--nfc-cmt-bg); font-size: 1rem; } .nfc-comments__chevron { display: inline-flex; color: var(--nfc-color-muted); transition: transform var(--nfc-transition); flex-shrink: 0; } .nfc-comments__wrap[open] .nfc-comments__chevron { transform: rotate(180deg); } .nfc-comments__inner { padding: 1.25rem 1.15rem 1.5rem; } .nfc-comments__list, .nfc-comments__list .children { list-style: none; margin: 0; padding: 0; } .nfc-comments__list .children { margin-top: 1rem; padding-left: 1.25rem; } .nfc-comment { margin-bottom: 1rem; } .nfc-comment__body { display: flex; gap: 0.85rem; align-items: flex-start; } .nfc-comment__avatar { flex-shrink: 0; line-height: 0; } .nfc-comment__avatar img { width: var(--nfc-cmt-avatar); height: var(--nfc-cmt-avatar); object-fit: cover; margin: 0; } .nfc-comments--avatar-circle .nfc-comment__avatar img { border-radius: 50%; } .nfc-comments--avatar-rounded .nfc-comment__avatar img { border-radius: var(--nfc-radius-sm); } .nfc-comments--avatar-square .nfc-comment__avatar img { border-radius: 0; } .nfc-comment__main { flex: 1; min-width: 0; } .nfc-comment__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } .nfc-comment__author { font-weight: 700; font-size: 0.95rem; color: var(--nfc-color-heading); } .nfc-comment__date { font-size: 0.8rem; color: var(--nfc-color-muted); } .nfc-comment__pending { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nfc-cmt-accent); } .nfc-comment__text { font-size: 0.96rem; line-height: 1.65; } .nfc-comment__text p:last-child { margin-bottom: 0; } .nfc-comment__actions { margin-top: 0.4rem; } .nfc-comment__actions a, .comment-reply-link { font-size: 0.8rem; font-weight: 600; color: var(--nfc-cmt-accent); text-decoration: none; } .nfc-comment__actions a:hover, .comment-reply-link:hover { text-decoration: underline; } /* --- Style variants --- */ .nfc-comments--cards .nfc-comment__body { background: var(--nfc-cmt-bg); padding: 0.9rem 1rem; border-radius: var(--nfc-cmt-radius); } /* Threaded draws a line down the left of a reply chain, so the shape of a conversation is visible without reading it. */ .nfc-comments--threaded .nfc-comments__list .children { border-left: 2px solid var(--nfc-color-border); padding-left: 1rem; margin-left: 0.6rem; } .nfc-comments--minimal .nfc-comment { border-bottom: 1px solid var(--nfc-color-border); padding-bottom: 1rem; } .nfc-comments--minimal .nfc-comment:last-child { border-bottom: 0; } .nfc-comments--bubbles .nfc-comment__main { background: var(--nfc-cmt-bg); padding: 0.8rem 1rem; border-radius: var(--nfc-cmt-radius); position: relative; } /* The little tail that makes a bubble read as speech. */ .nfc-comments--bubbles .nfc-comment__main::before { content: ""; position: absolute; left: -6px; top: 14px; width: 12px; height: 12px; background: var(--nfc-cmt-bg); transform: rotate(45deg); } /* --- Comment form --- */ .nfc-comment-form, .comment-respond { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--nfc-color-border); } .comment-reply-title { font-size: 1rem; margin: 0 0 0.75rem; } .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); background: var(--nfc-color-bg); color: var(--nfc-color-text); font-family: inherit; font-size: 0.95rem; } .comment-form textarea:focus, .comment-form input:focus { outline: 2px solid var(--nfc-cmt-accent); outline-offset: 1px; } .comment-form p { margin-bottom: 0.85rem; } /* Name and email side by side above the tightest breakpoint. */ @media (min-width: 600px) { .comment-form-author, .comment-form-email { display: inline-block; width: calc(50% - 0.4rem); } .comment-form-author { margin-right: 0.7rem; } } .comment-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; } .form-submit input[type="submit"] { background: var(--nfc-cmt-accent); color: #fff; border: 0; padding: 0.75em 1.75em; border-radius: var(--nfc-radius-sm); font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; } .form-submit input[type="submit"]:hover { filter: brightness(0.92); } .comment-form-cookies-consent label, .comment-notes { font-weight: 400; font-size: 0.82rem; color: var(--nfc-color-muted); } .nfc-comments__closed { font-size: 0.9rem; color: var(--nfc-color-muted); font-style: italic; } /* Fallback link for the Preferred Sources button. */ .nfc-ps-fallback-link { display: inline-flex; align-items: center; padding: 0.5em 0.9em; border: 1px solid var(--nfc-ps-border); border-radius: 999px; font-size: var(--nfc-ps-size); font-weight: 600; color: var(--nfc-ps-color); background: var(--nfc-ps-bg); text-decoration: none; } .nfc-ps-fallback-link[hidden] { display: none; } /* ========================================================================== 24. Meta icons, share colours, compact recommendations, panels ========================================================================== */ /* --- Entry meta icons --- */ .nfc-icon { flex-shrink: 0; vertical-align: -0.15em; opacity: 0.7; } .nfc-article-meta__items > * { display: inline-flex; align-items: center; gap: 0.32rem; } /* --- Share button colour modes --- */ .nfc-share--x { --nfc-brand: #000000; } .nfc-share--facebook { --nfc-brand: #1877f2; } .nfc-share--whatsapp { --nfc-brand: #25d366; } .nfc-share--telegram { --nfc-brand: #26a5e4; } .nfc-share--linkedin { --nfc-brand: #0a66c2; } .nfc-share--reddit { --nfc-brand: #ff4500; } .nfc-share--pinterest { --nfc-brand: #e60023; } .nfc-share--email { --nfc-brand: #6b7280; } .nfc-share--copy { --nfc-brand: var(--nfc-color-accent); } /* Default: a brand-coloured glyph on a plain background. Recognisable at a glance without six solid colour blocks competing with the article they sit beside. */ .nfc-share--c-brand_icon .nfc-share__item { color: var(--nfc-brand); } .nfc-share--c-brand_icon .nfc-share__item:hover, .nfc-share--c-brand_icon .nfc-share__item:focus-visible { background: var(--nfc-brand); color: #fff; } .nfc-share--c-brand .nfc-share__item { background: var(--nfc-brand); color: #fff; } .nfc-share--c-brand .nfc-share__item:hover, .nfc-share--c-brand .nfc-share__item:focus-visible { background: var(--nfc-brand); filter: brightness(1.15); } .nfc-share--c-brand_hover .nfc-share__item:hover, .nfc-share--c-brand_hover .nfc-share__item:focus-visible { background: var(--nfc-brand); color: #fff; } /* Pure-black brands need an edge on a dark page. */ html[data-theme="dark"] .nfc-share--c-brand_icon .nfc-share--x, html[data-theme="dark"] .nfc-share--c-brand_icon .nfc-share--tiktok { color: var(--nfc-color-text); } /* --- In-content recommendations: compact --- */ /* * Compact keeps the thumbnail and the title on one aligned row. The * previous default stacked a large image against a large title and took * most of a phone screen, which turns a suggestion into an interruption. */ .nfc-inline-rec--compact { padding: 0.85rem 1rem; } .nfc-inline-rec--compact .nfc-inline-rec__heading { margin-bottom: 0.5rem; font-size: 0.68rem; } .nfc-inline-rec--compact .nfc-inline-rec__item { align-items: center; gap: 0.75rem; } .nfc-inline-rec--compact .nfc-inline-rec__thumb, .nfc-inline-rec--compact .nfc-inline-rec__thumb img { width: 56px; height: 56px; } .nfc-inline-rec--compact .nfc-inline-rec__link { font-size: 0.95rem; line-height: 1.35; /* Two lines maximum: a long headline should not make the box tall again, which is the thing compact exists to prevent. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nfc-inline-rec--compact .nfc-inline-rec__excerpt { display: none; } .nfc-inline-rec--spacious { padding: 1.5rem 1.6rem; } .nfc-inline-rec--spacious .nfc-inline-rec__item { gap: 1.1rem; } /* --- Post navigation --- */ .nfc-post-navigation__item { background: var(--nfc-nav-bg); transition: transform var(--nfc-transition), border-color var(--nfc-transition); } .nfc-post-navigation__item:hover { transform: translateY(-1px); } /* The arrow is vertically centred against the whole text block — label and title together — rather than against the first line of it. */ .nfc-post-navigation__arrow { align-self: center; } .nfc-post-navigation__arrow { display: inline-flex; flex-shrink: 0; color: var(--nfc-color-accent); } .nfc-post-navigation__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .nfc-post-navigation__next { justify-content: flex-end; text-align: right; } /* --- Author box --- */ .nfc-author-box { background: var(--nfc-author-bg); border-radius: var(--nfc-radius); } /* Card meta icons sit slightly smaller and lighter than article ones, since a grid of cards shows many at once. */ .nfc-card__meta > * { display: inline-flex; align-items: center; gap: 0.28rem; } .nfc-card__meta .nfc-icon { opacity: 0.6; } /* ========================================================================== 25. Author social handles ========================================================================== */ .nfc-author-bio__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin-bottom: 0.4rem; } .nfc-author-bio__head .nfc-author-bio__name { margin: 0; } .nfc-author-social { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .nfc-author-social a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; transition: background var(--nfc-transition), color var(--nfc-transition); } .nfc-author-social .nfc-social__icon { width: 15px; height: 15px; } /* Blacked out — the default. Beside a name at this size, six brand colours pull attention away from the author rather than toward them. */ .nfc-author-social--mono a { color: var(--nfc-color-text); background: transparent; opacity: 0.75; } .nfc-author-social--mono a:hover, .nfc-author-social--mono a:focus-visible { opacity: 1; background: var(--nfc-color-border); } .nfc-author-social--brand_icon a { color: var(--nfc-brand); background: transparent; } .nfc-author-social--brand_icon a:hover, .nfc-author-social--brand_icon a:focus-visible { background: var(--nfc-brand); color: #fff; } .nfc-author-social--brand a { background: var(--nfc-brand); color: #fff; } .nfc-author-social--brand a:hover, .nfc-author-social--brand a:focus-visible { filter: brightness(1.15); } .nfc-author-social--muted a { color: var(--nfc-color-muted); } .nfc-author-social--muted a:hover, .nfc-author-social--muted a:focus-visible { color: var(--nfc-brand); } /* Pure-black brands need to remain visible on a dark page. */ html[data-theme="dark"] .nfc-author-social--brand_icon a[style*="#000000"] { color: var(--nfc-color-text); } /* The "By" label, when switched on. */ .nfc-meta__by { color: var(--nfc-color-muted); } /* ========================================================================== 26. Author card designs ========================================================================== */ .nfc-author-bio { margin: 2rem 0; border-radius: var(--nfc-author-radius, 10px); padding: var(--nfc-author-pad, 20px); } .nfc-author-bio__label { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nfc-color-muted); } .nfc-author-bio__inner { display: flex; gap: 1rem; align-items: flex-start; } .nfc-author-bio__avatar { flex-shrink: 0; object-fit: cover; margin: 0; } .nfc-author-bio--circle .nfc-author-bio__avatar { border-radius: 50%; } .nfc-author-bio--rounded .nfc-author-bio__avatar { border-radius: var(--nfc-radius-sm); } .nfc-author-bio--square .nfc-author-bio__avatar { border-radius: 0; } .nfc-author-bio__body { min-width: 0; flex: 1; } .nfc-author-bio__name { margin: 0; font-weight: 700; font-size: 1.02rem; } .nfc-author-bio__name a { color: var(--nfc-color-heading); text-decoration: none; } .nfc-author-bio__count { font-size: 0.8rem; color: var(--nfc-color-muted); } .nfc-author-bio__description { margin: 0.4rem 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--nfc-color-muted); } /* --- Design variants --- */ /* Stacked: photo above, everything centred. */ .nfc-author-bio--stacked .nfc-author-bio__inner { flex-direction: column; align-items: center; text-align: center; } .nfc-author-bio--stacked .nfc-author-bio__head { justify-content: center; } /* Minimal: no panel at all, just the content. */ /* * Layout variants only. * * These used to force background, border and shadow with !important, * which meant the design choice and the background choice fought each * other and neither fully won. Backgrounds are now owned entirely by * the Background Style setting; these control arrangement alone. */ .nfc-author-bio--minimal { padding-inline: 0; } .nfc-author-bio--byline { padding-block: 0.6rem; } .nfc-author-bio--byline .nfc-author-bio__inner { align-items: center; gap: 0.7rem; } .nfc-author-bio--byline .nfc-author-bio__head { margin-bottom: 0; } .nfc-author-bio--byline .nfc-author-bio__name { font-size: 0.95rem; } /* --- Author card alignment --- */ .nfc-author-bio--align-left .nfc-author-bio__inner { flex-direction: row; text-align: left; } .nfc-author-bio--align-left .nfc-author-bio__label { text-align: left; } /* Right places the photo after the text, which is the mirror of left rather than simply right-aligned text against a left-hand photo. */ .nfc-author-bio--align-right .nfc-author-bio__inner { flex-direction: row-reverse; text-align: right; } .nfc-author-bio--align-right .nfc-author-bio__label { text-align: right; } .nfc-author-bio--align-right .nfc-author-bio__head { justify-content: flex-end; } .nfc-author-bio--align-center .nfc-author-bio__inner { flex-direction: column; align-items: center; text-align: center; } .nfc-author-bio--align-center .nfc-author-bio__label, .nfc-author-bio--align-center .nfc-author-bio__head { text-align: center; justify-content: center; } /* The byline design is a single line, so a column layout would defeat its purpose regardless of the alignment chosen. */ .nfc-author-bio--byline .nfc-author-bio__inner { flex-direction: row; } /* ========================================================================== 27. Post navigation options ========================================================================== */ .nfc-post-navigation__item { border-radius: var(--nfc-nav-radius, 10px); } .nfc-post-navigation__arrow { color: var(--nfc-nav-arrow, var(--nfc-color-accent)); } /* Trim long headlines so both links stay the same height. Without this a two-line title beside a five-line one makes the pair look broken. */ .nfc-post-navigation__title { display: -webkit-box; -webkit-line-clamp: var(--nfc-nav-lines, 2); -webkit-box-orient: vertical; overflow: hidden; } .nfc-post-navigation__thumb { flex-shrink: 0; line-height: 0; } .nfc-post-navigation__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--nfc-radius-sm); margin: 0; } /* * Hidden on mobile, but still in the page. * * The markup is rendered and hidden rather than skipped, so the links * stay crawlable and one cached copy of the HTML serves both screen * sizes — which matters on a site running page caching. */ @media (max-width: 781px) { .nfc-post-navigation--hide-mobile { display: none; } } /* Side-by-side layout. */ @media (min-width: 600px) { .nfc-post-navigation--side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } .nfc-post-navigation__spacer { display: none; } @media (min-width: 600px) { /* Holds the empty column so "Next" stays on the right when there is no previous article. */ .nfc-post-navigation--side .nfc-post-navigation__spacer { display: block; } } /* Arrows-only design: compact, no panel, title beside the arrow. */ .nfc-post-navigation--arrows .nfc-post-navigation__item { gap: 0.6rem; } .nfc-post-navigation--arrows .nfc-post-navigation__title { font-size: 0.95rem; } /* ========================================================================== 28. Homepage slider & category sections ========================================================================== */ /* * Scroll-snap carousel. No library, no autoplay. * * Native scroll snapping gives momentum, keyboard support, touch * gestures and screen-reader behaviour for free, and degrades to plain * horizontal scrolling where unsupported. Autoplay is deliberately * absent: it takes control away from the reader, is a recognised * accessibility problem, and on a news site the first slide is the one * that matters anyway. */ .nfc-slider { position: relative; margin: 0 0 2rem; } .nfc-slider__track { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--nfc-radius); } .nfc-slider__track::-webkit-scrollbar { display: none; } .nfc-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; height: var(--nfc-slider-h, 300px); border-radius: var(--nfc-radius); overflow: hidden; background: var(--nfc-color-surface); } /* Slide width and height per breakpoint are emitted inline from the "Slides per view" and height settings, so they are not repeated here — two sources for the same property is how they drift apart. */ .nfc-slide__link { display: block; height: 100%; position: relative; text-decoration: none; color: #fff; } .nfc-slide__image { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } .nfc-slide__body { position: absolute; inset: auto 0 0 0; padding: 1.25rem; /* A gradient rather than a flat overlay, so the top of the image stays fully visible while the text below stays readable. */ background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, transparent 100%); } .nfc-slide__category { display: inline-block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.35rem; color: #fff; background: var(--nfc-color-accent); padding: 0.2em 0.6em; border-radius: 3px; } .nfc-slide__title { margin: 0; font-size: 1.15rem; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 782px) { .nfc-slide__title { font-size: 1.1rem; } } .nfc-slide__meta { display: block; margin-top: 0.35rem; font-size: 0.78rem; opacity: 0.9; } .nfc-slide__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.45; } .nfc-slide__body > * + * { margin-top: 0.3rem; } /* Anchor-link dots: they scroll the track natively, so they work with no script at all. */ .nfc-slider__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.7rem; } .nfc-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nfc-color-border); transition: background var(--nfc-transition), transform var(--nfc-transition); } .nfc-slider__dot:hover, .nfc-slider__dot:focus-visible { background: var(--nfc-color-accent); transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .nfc-slider__track { scroll-behavior: auto; } } /* --- Category sections --- */ .nfc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .nfc-section__head .nfc-section__heading { margin: 0; } .nfc-section__more { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--nfc-color-accent); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .nfc-section__more:hover, .nfc-section__more:focus-visible { text-decoration: underline; } /* --- Slider heading and pause control --- */ .nfc-slider__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .nfc-slider__heading { margin: 0; font-size: 1.4rem; line-height: 1.2; } @media (min-width: 782px) { .nfc-slider__heading { font-size: 1.7rem; } } .nfc-slider__pause { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nfc-color-border); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; color: var(--nfc-color-text); } .nfc-slider__pause:hover, .nfc-slider__pause:focus-visible { border-color: var(--nfc-color-accent); color: var(--nfc-color-accent); } /* Two bars for pause; a triangle once paused, so the control shows what pressing it will do rather than what the state currently is. */ .nfc-slider__pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .nfc-slider.is-paused .nfc-slider__pause-icon { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }