/* 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: 0.9.4 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; /* 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) { .nfc-header-centered .nfc-site-header__inner { flex-direction: column; gap: 0.75rem; padding-block: 1rem; } .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-stacked .nfc-site-header__inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block: 1rem; } .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-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. */ .nfc-article-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } /* Desktop: narrow sticky share rail beside the article body. */ @media (min-width: 1000px) { .nfc-article-layout { grid-template-columns: 56px minmax(0, 1fr); gap: 2rem; padding-block: 2rem; } } .nfc-article-layout__main { min-width: 0; max-width: var(--nfc-content-width); } @media (min-width: 1000px) { .nfc-article-layout__main { margin-inline: auto; } } /* Share buttons: horizontal row on mobile, vertical sticky rail on desktop. */ .nfc-article-layout__share { order: 2; } @media (min-width: 1000px) { .nfc-article-layout__share { order: 0; } } .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 1.75rem; } .nfc-featured-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--nfc-radius); background: var(--nfc-color-surface); } .nfc-featured-image__caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--nfc-color-muted); } /* Article body typography. */ .nfc-article-content { font-size: calc(var(--nfc-size-content) * 0.94); line-height: var(--nfc-line-content); } @media (min-width: 782px) { .nfc-article-content { font-size: var(--nfc-size-content); } } .nfc-article-content h2 { margin-top: 2em; margin-bottom: 0.5em; } .nfc-article-content h3 { margin-top: 1.75em; margin-bottom: 0.5em; } .nfc-article-content p { margin-bottom: 1.3em; } .nfc-article-content a { color: var(--nfc-color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .nfc-article-content ul, .nfc-article-content ol { padding-left: 1.4em; margin-bottom: 1.3em; } .nfc-article-content li { margin-bottom: 0.5em; } .nfc-article-content img, .nfc-article-content figure { margin: 1.75em 0; border-radius: var(--nfc-radius); } /* Embed figures opt out of the rounded corners above — the radius clips provider chrome that sits flush to the frame edge. */ .nfc-article-content figure.wp-block-embed { border-radius: 0; overflow: visible; } .nfc-article-content figure img { margin: 0; } .nfc-article-content figcaption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--nfc-color-muted); text-align: center; } .nfc-article-content blockquote { margin: 1.75em 0; padding: 0.5em 0 0.5em 1.25em; border-left: 3px solid var(--nfc-color-accent); color: var(--nfc-color-muted); font-style: italic; } .nfc-article-content blockquote p:last-child { margin-bottom: 0; } .nfc-article-content pre { background: var(--nfc-color-surface); padding: 1rem; border-radius: var(--nfc-radius-sm); overflow-x: auto; font-size: 0.9rem; } .nfc-article-content code { background: var(--nfc-color-surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; } .nfc-article-content pre code { background: none; padding: 0; } /* Reading progress bar. */ .nfc-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; pointer-events: none; } .nfc-reading-progress__bar { height: 100%; width: 0; background: var(--nfc-color-accent); transition: width 60ms linear; } /* Table of contents. */ .nfc-toc { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.1rem 1.25rem; margin: 0 0 1.75rem; } .nfc-toc__heading { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } .nfc-toc__list { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; } .nfc-toc__item { margin-bottom: 0.4rem; } .nfc-toc__item--level-3 { margin-left: 1rem; list-style-type: circle; font-size: 0.9rem; } .nfc-toc a { color: var(--nfc-color-text); text-decoration: none; } .nfc-toc a:hover, .nfc-toc a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } /* Author bio. */ .nfc-author-bio { display: flex; gap: 1rem; align-items: flex-start; margin: 2.5rem 0; padding: 1.5rem; background: var(--nfc-color-surface); border-radius: var(--nfc-radius); } .nfc-author-bio__avatar { border-radius: 50%; flex-shrink: 0; width: 56px; height: 56px; } .nfc-author-bio__name { margin: 0 0 0.3rem; font-weight: 700; } .nfc-author-bio__name a { color: var(--nfc-color-text); text-decoration: none; } .nfc-author-bio__description { margin: 0; color: var(--nfc-color-muted); font-size: 0.92rem; line-height: 1.6; } /* Next/previous navigation. */ .nfc-post-navigation { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; } @media (min-width: 600px) { .nfc-post-navigation { grid-template-columns: 1fr 1fr; } .nfc-post-navigation__next { text-align: right; } } .nfc-post-navigation a { display: block; padding: 1rem; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); color: var(--nfc-color-text); text-decoration: none; transition: border-color var(--nfc-transition); } .nfc-post-navigation a:hover, .nfc-post-navigation a:focus-visible { border-color: var(--nfc-color-accent); text-decoration: none; } .nfc-post-navigation__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nfc-color-muted); margin-bottom: 0.3rem; } .nfc-post-navigation__title { font-weight: 700; font-size: 0.95rem; line-height: 1.4; } .nfc-page-links { margin: 1.5rem 0; font-weight: 600; } .nfc-page-links a { padding: 0.25em 0.6em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); margin-right: 0.25rem; text-decoration: none; } /* ========================================================================== 8. Breadcrumbs, archives, 404, pagination ========================================================================== */ /* Breadcrumbs — sits directly beneath the header, filling what was previously dead padding. Separator is real markup rather than a CSS ::after so the character is selectable from the Customizer. */ .nfc-breadcrumbs { background: var(--nfc-crumb-bg); padding-block: var(--nfc-crumb-pad); font-size: var(--nfc-crumb-size); color: var(--nfc-crumb-color); border-bottom: 1px solid var(--nfc-color-border); margin-bottom: 0; } /* When breadcrumbs are present they already provide the visual break under the header, so the content area's own top padding is dropped to avoid stacking two gaps on top of each other. */ .nfc-breadcrumbs + .nfc-main-content { padding-top: 0; } .nfc-breadcrumbs + .nfc-main-content > .nfc-container > .nfc-archive-header, .nfc-breadcrumbs + .nfc-main-content .nfc-article-header { padding-top: 1.25rem; } .nfc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .nfc-breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .nfc-breadcrumbs__sep { color: var(--nfc-crumb-sep); flex-shrink: 0; } /* Single-line mode. The trail stays on one row; the final step (the article title) is the only flexible item, so it absorbs the shortfall and ellipsises rather than wrapping the whole trail onto a second line. Server-side truncation already caps the character count — this handles the remaining overflow at narrow widths. */ .nfc-breadcrumbs--oneline ol { flex-wrap: nowrap; overflow: hidden; } .nfc-breadcrumbs--oneline li { flex-shrink: 0; } .nfc-breadcrumbs--oneline li:last-child { flex-shrink: 1; min-width: 0; } .nfc-breadcrumbs--oneline li:last-child > span, .nfc-breadcrumbs--oneline li:last-child > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nfc-breadcrumbs a { color: var(--nfc-crumb-link); text-decoration: none; } .nfc-breadcrumbs a:hover, .nfc-breadcrumbs a:focus-visible { color: var(--nfc-color-accent); text-decoration: underline; } .nfc-breadcrumbs--center ol { justify-content: center; } .nfc-breadcrumbs--right ol { justify-content: flex-end; } /* Social icons — style variants selectable in the Customizer. */ .nfc-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } .nfc-social-links__item { display: inline-flex; align-items: center; justify-content: center; width: var(--nfc-social-size); height: var(--nfc-social-size); color: var(--nfc-social-color); background: var(--nfc-social-bg); border: 1px solid transparent; text-decoration: none; transition: background var(--nfc-transition), color var(--nfc-transition), border-color var(--nfc-transition); } .nfc-social-links__item:hover, .nfc-social-links__item:focus-visible { background: var(--nfc-social-hover); color: #fff; text-decoration: none; } .nfc-social-links--circle .nfc-social-links__item { border-radius: 50%; } .nfc-social-links--circle_outline .nfc-social-links__item { border-radius: 50%; background: transparent; border-color: currentColor; } .nfc-social-links--square .nfc-social-links__item { border-radius: 0; } .nfc-social-links--rounded .nfc-social-links__item { border-radius: var(--nfc-radius-sm); } .nfc-social-links--plain .nfc-social-links__item { background: transparent; width: auto; height: auto; padding: 0.35rem; } .nfc-social-links--plain .nfc-social-links__item:hover, .nfc-social-links--plain .nfc-social-links__item:focus-visible { background: transparent; color: var(--nfc-social-hover); } .nfc-social__icon { width: 45%; height: auto; min-width: 16px; } .nfc-social-links--plain .nfc-social__icon { width: 20px; } /* Official brand colours, applied on hover so the default state stays visually consistent with the rest of the footer. */ .nfc-social-links--brand .nfc-social--x:hover { background: #000; } .nfc-social-links--brand .nfc-social--facebook:hover { background: #1877f2; } .nfc-social-links--brand .nfc-social--instagram:hover { background: #e4405f; } .nfc-social-links--brand .nfc-social--whatsapp:hover { background: #25d366; } .nfc-social-links--brand .nfc-social--youtube:hover { background: #ff0000; } .nfc-social-links--brand .nfc-social--tiktok:hover { background: #000; } .nfc-social-links--brand .nfc-social--telegram:hover { background: #26a5e4; } /* Dark mode toggle — a real sliding switch rather than a plain icon button. Both icons ship in the markup and CSS decides which is visible, so the correct one is showing from the very first paint with no JavaScript involved and no wrong-icon flash. */ .nfc-dark-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; line-height: 0; } .nfc-dark-toggle__track { position: relative; display: block; width: 52px; height: 28px; border-radius: 999px; background: var(--nfc-toggle-track, #d7dae0); transition: background var(--nfc-transition); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16); } .nfc-dark-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #f5a623; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--nfc-transition), color var(--nfc-transition); } html[data-theme="dark"] .nfc-dark-toggle__track { background: var(--nfc-toggle-track-on, #4a90d9); } html[data-theme="dark"] .nfc-dark-toggle__thumb { transform: translateX(24px); color: #2b3a55; } .nfc-dark-toggle__moon, html[data-theme="dark"] .nfc-dark-toggle__sun { display: none; } html[data-theme="dark"] .nfc-dark-toggle__moon { display: block; } /* Icon-only variant — no track, just the glyph. */ .nfc-dark-toggle--style-icon .nfc-dark-toggle__track { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--nfc-color-border); box-shadow: none; } .nfc-dark-toggle--style-icon .nfc-dark-toggle__thumb { position: static; width: 100%; height: 100%; background: transparent; box-shadow: none; color: var(--nfc-header-text); transform: none; } html[data-theme="dark"] .nfc-dark-toggle--style-icon .nfc-dark-toggle__thumb { transform: none; color: var(--nfc-header-text); } /* Pill variant — wider track, icon stays centred in the thumb. */ .nfc-dark-toggle--style-pill .nfc-dark-toggle__track { width: 64px; height: 30px; } .nfc-dark-toggle--style-pill .nfc-dark-toggle__thumb { width: 24px; height: 24px; } html[data-theme="dark"] .nfc-dark-toggle--style-pill .nfc-dark-toggle__thumb { transform: translateX(34px); } .nfc-dark-toggle--float_right, .nfc-dark-toggle--float_left { position: fixed; bottom: 1.25rem; z-index: 400; padding: 0.4rem; background: var(--nfc-color-surface); border-radius: 999px; box-shadow: var(--nfc-shadow-lg); } .nfc-dark-toggle--float_right { right: 1.25rem; } .nfc-dark-toggle--float_left { left: 1.25rem; } .nfc-dark-toggle--float_right { right: 1.25rem; } .nfc-dark-toggle--float_left { left: 1.25rem; } /* In-content recommendations ("Don't Miss"). Every value below is a variable set from Customizer > In-Content Recommendations. */ .nfc-inline-rec { margin: var(--nfc-inline-margin) 0; padding: var(--nfc-inline-pad); border-radius: var(--nfc-inline-radius); background: var(--nfc-inline-bg); } .nfc-inline-rec--bordered { border: var(--nfc-inline-bw) solid var(--nfc-inline-border); background: transparent; } .nfc-inline-rec--filled { border: 0; } .nfc-inline-rec--accentbar { border-left: var(--nfc-inline-bw) solid var(--nfc-inline-border); border-radius: 0 var(--nfc-inline-radius) var(--nfc-inline-radius) 0; } .nfc-inline-rec--minimal { background: transparent; padding-inline: 0; border-top: 1px solid var(--nfc-color-border); border-bottom: 1px solid var(--nfc-color-border); border-radius: 0; } /* Break out of the reading column when asked. Negative margins rather than a wider width so it still respects the container's own padding on small screens. */ .nfc-inline-rec--full { margin-inline: calc(var(--nfc-inline-pad) * -1); } @media (min-width: 1000px) { .nfc-inline-rec--full { margin-inline: -3rem; } } .nfc-inline-rec__heading { margin: 0 0 0.75rem; font-size: var(--nfc-inline-heading-size); font-weight: 800; letter-spacing: 0.07em; text-transform: var(--nfc-inline-transform); color: var(--nfc-inline-heading-col); } .nfc-inline-rec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .nfc-inline-rec__item { display: flex; align-items: center; gap: 0.9rem; min-width: 0; } .nfc-inline-rec__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .nfc-inline-rec__thumb { flex-shrink: 0; width: var(--nfc-inline-img); line-height: 0; } .nfc-inline-rec__thumb img { width: var(--nfc-inline-img); height: var(--nfc-inline-img); object-fit: cover; margin: 0; } .nfc-inline-rec--img-square .nfc-inline-rec__thumb img { border-radius: 0; } .nfc-inline-rec--img-rounded .nfc-inline-rec__thumb img { border-radius: var(--nfc-radius-sm); } .nfc-inline-rec--img-circle .nfc-inline-rec__thumb img { border-radius: 50%; } .nfc-inline-rec--img-wide .nfc-inline-rec__thumb, .nfc-inline-rec--img-wide .nfc-inline-rec__thumb img { width: calc(var(--nfc-inline-img) * 1.78); } .nfc-inline-rec--img-wide .nfc-inline-rec__thumb img { height: var(--nfc-inline-img); border-radius: var(--nfc-radius-sm); } /* Stacked: thumbnail sits above the text. */ .nfc-inline-rec--layout-stacked .nfc-inline-rec__item { flex-direction: column; align-items: flex-start; } .nfc-inline-rec--layout-stacked .nfc-inline-rec__thumb, .nfc-inline-rec--layout-stacked .nfc-inline-rec__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* Grid: items sit side by side once there's room. */ @media (min-width: 600px) { .nfc-inline-rec--layout-grid .nfc-inline-rec__list { flex-direction: row; flex-wrap: wrap; } .nfc-inline-rec--layout-grid .nfc-inline-rec__item { flex: 1 1 calc(50% - 0.5rem); min-width: 0; } } .nfc-inline-rec__link { font-weight: 700; font-size: var(--nfc-inline-title-size); line-height: 1.4; color: var(--nfc-inline-link); text-decoration: var(--nfc-inline-underline); } .nfc-inline-rec__link:hover, .nfc-inline-rec__link:focus-visible { color: var(--nfc-inline-link-hover); text-decoration: underline; } .nfc-inline-rec__category { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nfc-inline-heading-col); } .nfc-inline-rec__excerpt, .nfc-inline-rec__date { font-size: 0.85em; color: var(--nfc-inline-meta); line-height: 1.5; } .nfc-archive-title { font-size: 1.6rem; margin: 0 0 0.5rem; } @media (min-width: 782px) { .nfc-archive-title { font-size: 2.1rem; } } .nfc-archive-title span { color: var(--nfc-color-accent); } .nfc-archive-description { color: var(--nfc-color-muted); max-width: 65ch; } .nfc-no-results { padding: 2rem 0; color: var(--nfc-color-muted); } .nfc-404 { padding-block: 2rem; text-align: center; } .nfc-404 h1 { font-size: 1.8rem; } .nfc-404 h2 { margin-top: 2.5rem; text-align: left; } .nfc-404 .nfc-card-grid { text-align: left; } .nfc-404 form { max-width: 420px; margin: 1.5rem auto; display: flex; gap: 0.5rem; } .nfc-404 input[type="search"] { flex: 1; padding: 0.65em 0.9em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } /* WordPress core pagination. */ .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 2.5rem 0; } .pagination .page-numbers, .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 0.75em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); color: var(--nfc-color-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--nfc-color-accent); border-color: var(--nfc-color-accent); color: #fff; } .pagination .page-numbers:hover, .nav-links .page-numbers:hover { border-color: var(--nfc-color-accent); text-decoration: none; } /* ========================================================================== 9. Sidebar & widgets ========================================================================== */ .nfc-homepage__secondary .widget, .nfc-sidebar .widget { margin-bottom: 2rem; } .widget-title { font-size: var(--nfc-size-widget-title); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--nfc-color-border); padding-bottom: 0.5rem; margin-bottom: 1rem; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--nfc-color-border); } .widget li:last-child { border-bottom: 0; } .widget a { color: var(--nfc-color-text); text-decoration: none; font-size: 0.95rem; } .widget a:hover, .widget a:focus-visible { color: var(--nfc-color-accent); } /* ========================================================================== 10. Footer ========================================================================== */ .nfc-site-footer { margin-top: 1.5rem; padding: var(--nfc-footer-padding) 0; border-top: 1px solid var(--nfc-color-border); background: var(--nfc-footer-bg); font-size: 0.92rem; color: var(--nfc-footer-text); } .nfc-footer-widgets { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--nfc-color-border); } @media (min-width: 600px) { .nfc-footer-widgets { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .nfc-site-info { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; } @media (min-width: 782px) { .nfc-site-info { flex-direction: row; justify-content: space-between; text-align: left; } } .nfc-copyright, .nfc-privacy-link { margin: 0; } .nfc-copyright a { color: var(--nfc-color-text); font-weight: 600; text-decoration: none; } /* ========================================================================== 11. Modules ========================================================================== */ /* --- Breaking news ticker --- */ .nfc-breaking-ticker { display: flex; align-items: center; gap: 0.75rem; background: var(--nfc-color-accent); color: #fff; padding: 0.55rem 1rem; overflow: hidden; } .nfc-breaking-ticker__label { flex-shrink: 0; font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding-right: 0.75rem; border-right: 1px solid rgba(255, 255, 255, 0.35); } .nfc-breaking-ticker__track { display: flex; gap: 2.5rem; white-space: nowrap; animation: nfc-ticker-scroll 30s linear infinite; font-size: 0.9rem; min-width: 0; } .nfc-breaking-ticker__track a { color: #fff; text-decoration: none; font-weight: 600; } .nfc-breaking-ticker__track a:hover { text-decoration: underline; } @keyframes nfc-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .nfc-breaking-ticker__dismiss { flex-shrink: 0; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } @media (prefers-reduced-motion: reduce) { .nfc-breaking-ticker__track { animation: none; overflow-x: auto; } } /* --- Ajax search --- */ .nfc-ajax-search-panel { position: absolute; right: 1rem; top: 100%; width: 300px; max-width: calc(100vw - 2rem); padding: 1rem; background: var(--nfc-color-bg); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); box-shadow: var(--nfc-shadow-lg); z-index: 300; } .nfc-ajax-search-panel input { width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .nfc-ajax-search-results { list-style: none; margin: 0.75rem 0 0; padding: 0; } .nfc-ajax-search-results li { padding: 0.5rem 0; border-bottom: 1px solid var(--nfc-color-border); font-size: 0.9rem; } .nfc-ajax-search-results li:last-child { border-bottom: 0; } .nfc-ajax-search-results a { color: var(--nfc-color-text); text-decoration: none; } .nfc-ajax-search-results a:hover, .nfc-ajax-search-results a:focus-visible { color: var(--nfc-color-accent); } /* --- Newsletter --- */ .nfc-newsletter { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--nfc-color-border); } .nfc-newsletter__label { display: block; font-weight: 700; color: var(--nfc-color-text); margin-bottom: 0.6rem; font-size: 1rem; } .nfc-newsletter__row { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; } @media (min-width: 600px) { .nfc-newsletter__row { flex-direction: row; } } .nfc-newsletter__row input { flex: 1; padding: 0.7em 0.9em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .nfc-newsletter__row button { padding: 0.7em 1.5em; background: var(--nfc-color-accent); color: #fff; border: 0; border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .nfc-newsletter__row button:disabled { opacity: 0.6; cursor: default; } .nfc-newsletter__message { margin: 0.6rem 0 0; font-size: 0.85rem; } /* --- Sports scoreboard --- */ .nfc-scoreboard { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.1rem; margin: 0 0 1.75rem; text-align: center; } .nfc-scoreboard__competition { margin: 0 0 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nfc-color-muted); font-weight: 700; } .nfc-scoreboard__match { display: flex; align-items: center; justify-content: center; gap: 1rem; font-weight: 700; font-size: 1rem; } @media (min-width: 600px) { .nfc-scoreboard__match { gap: 1.5rem; font-size: 1.15rem; } } .nfc-scoreboard__team { flex: 1; min-width: 0; } .nfc-scoreboard__score { font-size: 1.5rem; color: var(--nfc-color-accent); flex-shrink: 0; } .nfc-scoreboard__vs { color: var(--nfc-color-muted); font-size: 0.85rem; text-transform: uppercase; flex-shrink: 0; } /* --- Review box --- */ .nfc-review-box { background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius); padding: 1.25rem; margin: 0 0 1.75rem; } .nfc-review-box__rating { font-weight: 800; font-size: 1.8rem; color: var(--nfc-color-accent); margin-bottom: 1rem; line-height: 1; } .nfc-review-box__rating-max { font-size: 1rem; color: var(--nfc-color-muted); font-weight: 600; } .nfc-review-box__pros-cons { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 600px) { .nfc-review-box__pros-cons { grid-template-columns: 1fr 1fr; } } .nfc-review-box__heading { font-weight: 700; margin: 0 0 0.5rem; font-size: 0.95rem; } .nfc-review-box__pros ul, .nfc-review-box__cons ul { margin: 0; padding-left: 1.25rem; font-size: 0.92rem; } .nfc-review-box__pros li, .nfc-review-box__cons li { margin-bottom: 0.35rem; } /* --- Related posts --- */ .nfc-related-posts { margin-top: var(--nfc-related-above); margin-bottom: var(--nfc-related-below); } /* Paged sets. Only the active page is visible; the rest stay in the DOM so pagination needs no network requests and still works without JS. */ .nfc-related__page[hidden] { display: none; } .nfc-related__page + .nfc-related__page { margin-top: var(--nfc-grid-gap); } .nfc-related__nav { display: flex; justify-content: center; margin-top: 1.5rem; } .nfc-related__loadmore, .nfc-related__page-btn, .nfc-related__arrow { font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid var(--nfc-color-border); background: transparent; color: var(--nfc-color-text); border-radius: var(--nfc-radius-sm); transition: background var(--nfc-transition), color var(--nfc-transition), border-color var(--nfc-transition); } .nfc-related__loadmore { padding: 0.7em 2em; background: var(--nfc-related-btn-bg); color: var(--nfc-related-btn-text); border-color: transparent; } .nfc-related__loadmore:hover, .nfc-related__loadmore:focus-visible { filter: brightness(0.92); } .nfc-related__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .nfc-related__page-btn { min-width: 40px; height: 40px; padding: 0 0.6em; } .nfc-related__page-btn:hover, .nfc-related__page-btn:focus-visible { border-color: var(--nfc-related-btn-bg); } .nfc-related__page-btn.is-current { background: var(--nfc-related-btn-bg); color: var(--nfc-related-btn-text); border-color: transparent; } .nfc-related__arrows { display: flex; align-items: center; gap: 1rem; } .nfc-related__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .nfc-related__arrow:disabled { opacity: 0.4; cursor: default; } .nfc-related__counter { font-size: var(--nfc-size-meta); color: var(--nfc-color-muted); font-variant-numeric: tabular-nums; } /* --- Ad slots --- */ .nfc-ad-slot { margin: 1.75rem 0; text-align: center; max-width: 100%; overflow: hidden; /* An oversized ad creative must not break page layout. */ } .nfc-ad-slot img, .nfc-ad-slot iframe { margin-inline: auto; } .nfc-ad--mobile-only { display: block; } .nfc-ad--desktop-only { display: none; } @media (min-width: 783px) { .nfc-ad--mobile-only { display: none; } .nfc-ad--desktop-only { display: block; } } /* ========================================================================== 12. Comments & forms ========================================================================== */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, input[type="search"], input[type="text"], input[type="email"] { width: 100%; max-width: 100%; padding: 0.65em 0.85em; border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; background: var(--nfc-color-bg); color: var(--nfc-color-text); } .comment-form textarea { min-height: 9em; } .comment-form .submit, button[type="submit"], input[type="submit"] { padding: 0.7em 1.75em; background: var(--nfc-color-accent); color: #fff; border: 0; border-radius: var(--nfc-radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; } .comment-list { list-style: none; padding: 0; } .comment-list .children { list-style: none; padding-left: 1rem; } @media (min-width: 782px) { .comment-list .children { padding-left: 2rem; } } /* ========================================================================== 13. WordPress core alignment classes ========================================================================== */ .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; } .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; } .aligncenter { margin-inline: auto; } .alignwide, .alignfull { max-width: 100%; } /* Floats are cramped on phones — stack them instead. */ @media (max-width: 600px) { .alignleft, .alignright { float: none; margin: 1rem auto; } } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 0.82rem; color: var(--nfc-color-muted); text-align: center; } .sticky, .gallery-caption, .bypostauthor { /* Required by WordPress theme standards. */ } /* Admin bar offset for sticky header. */ .admin-bar.nfc-sticky-header .nfc-site-header { top: 32px; } @media (max-width: 782px) { .admin-bar.nfc-sticky-header .nfc-site-header { top: 46px; } } /* ========================================================================== 14. Secondary header bar ========================================================================== */ .nfc-secondary-bar { background: var(--nfc-sec-bg); border-bottom: var(--nfc-sec-bw) solid var(--nfc-sec-border); } /* Horizontal scroll rather than wrapping: a category strip that grows to three lines on a phone pushes the actual content off-screen. */ .nfc-secondary-bar__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nfc-secondary-bar__scroll::-webkit-scrollbar { display: none; } /* * width: max-content is the key to making this scroll correctly. * * A flex container that overflows while using auto margins or * justify-content: center pushes its leading items outside the scroll * origin, and the browser cannot scroll back to reach them — they are * clipped permanently. Sizing the list to its content (max-content) * with min-width: 100% means it fills the bar when the items fit, and * grows to exactly its content width when they don't. Centring then * only has spare room to act on in the first case, so it never * displaces anything out of reach. */ .nfc-secondary-menu { display: flex; align-items: center; gap: var(--nfc-sec-gap); list-style: none; margin: 0; padding-inline: var(--nfc-container-pad-mobile); min-height: var(--nfc-sec-height); white-space: nowrap; min-width: 100%; width: max-content; box-sizing: border-box; } @media (min-width: 782px) { .nfc-secondary-menu { padding-inline: var(--nfc-container-pad); } } @media (min-width: 1000px) { /* Once there's room for the full list, honour the container width so the bar lines up with the rest of the site. */ .nfc-secondary-menu { max-width: var(--nfc-max-width); margin-inline: auto; } } /* Separator sits between items as a pseudo-element on the list item, so the character can be changed (or removed) from the Customizer without the markup changing at all. */ .nfc-secondary-menu li { display: flex; align-items: center; gap: var(--nfc-sec-gap); } .nfc-secondary-menu li::after { color: var(--nfc-sec-sep); font-size: 0.9em; line-height: 1; pointer-events: none; } .nfc-secondary-bar--sep-none .nfc-secondary-menu li::after { display: none; } .nfc-secondary-bar--center .nfc-secondary-menu { justify-content: center; } /* Momentum scrolling plus a small end-scroll padding so the final item never sits flush against the edge mid-scroll. */ .nfc-secondary-bar__scroll { scroll-padding-inline: var(--nfc-container-pad-mobile); overscroll-behavior-x: contain; } .nfc-secondary-menu a { display: inline-block; padding: var(--nfc-sec-pad) 0; color: var(--nfc-sec-text); font-family: var(--nfc-sec-font); font-size: var(--nfc-sec-size); font-weight: var(--nfc-sec-weight); letter-spacing: var(--nfc-sec-ls); text-decoration: none; transition: color var(--nfc-transition); } .nfc-secondary-menu a:hover, .nfc-secondary-menu a:focus-visible { color: var(--nfc-sec-hover); text-decoration: none; } /* ========================================================================== 15. Post share buttons ========================================================================== */ .nfc-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; } .nfc-share__heading { font-size: var(--nfc-size-meta); font-weight: 700; color: var(--nfc-color-muted); text-transform: uppercase; letter-spacing: 0.05em; } .nfc-share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .nfc-share__item { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: var(--nfc-share-size); height: var(--nfc-share-size); padding: 0; border: 1px solid transparent; background: var(--nfc-share-bg); color: var(--nfc-share-color); cursor: pointer; text-decoration: none; font-family: inherit; font-size: var(--nfc-size-meta); transition: background var(--nfc-transition), color var(--nfc-transition); } .nfc-share__item:hover, .nfc-share__item:focus-visible { background: var(--nfc-share-hover); color: #fff; text-decoration: none; } .nfc-share__label { display: none; } /* Labelled variant widens the buttons to fit the platform name. */ .nfc-share--labelled .nfc-share__item { width: auto; height: auto; padding: 0.5em 0.9em; } .nfc-share--labelled .nfc-share__label { display: inline; font-weight: 600; } .nfc-share--circle .nfc-share__item { border-radius: 50%; } .nfc-share--rounded .nfc-share__item { border-radius: var(--nfc-radius-sm); } .nfc-share--square .nfc-share__item { border-radius: 0; } .nfc-share--outline .nfc-share__item { background: transparent; border-color: var(--nfc-color-border); border-radius: 50%; } .nfc-share--plain .nfc-share__item { background: transparent; width: auto; height: auto; padding: 0.35rem; } .nfc-share--labelled.nfc-share--circle .nfc-share__item { border-radius: 999px; } /* Floating side rail on desktop only — hidden on mobile, where a fixed rail would sit on top of the article text. */ .nfc-share--at-floating { display: none; } @media (min-width: 1100px) { .nfc-share--at-floating { display: block; position: sticky; top: 6rem; margin: 0; } .nfc-share--at-floating .nfc-share__list { flex-direction: column; } } /* ========================================================================== 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; } /* Ad slots that received no creative collapse rather than leaving their reserved height as blank space. See customizer-output.php for the fuller set of selectors. */ .nfc-ad-slot:empty { display: none; margin: 0; }