/* 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.4.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; /* 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; } /* Dark mode. Higher specificity than :root so it always wins over the Customizer's inline :root color overrides regardless of source order. */ html[data-theme="dark"] { --nfc-color-text: #e8eaed; --nfc-color-bg: #121316; --nfc-color-muted: #9aa0aa; --nfc-color-border: #2c2f36; --nfc-color-surface: #1c1e23; } /* ========================================================================== 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, iframe, embed, object { max-width: 100%; height: auto; display: block; } img { 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. */ .nfc-primary-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0.5rem 1rem 1rem; background: var(--nfc-header-bg); border-bottom: 1px solid var(--nfc-header-border-color); 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; } .nfc-primary-menu li { border-bottom: 1px solid var(--nfc-color-border); } .nfc-primary-menu li:last-child { border-bottom: 0; } .nfc-primary-menu a { display: block; padding: 0.85rem 0.25rem; color: var(--nfc-header-text); font-weight: 600; font-size: 1rem; text-decoration: none; } .nfc-primary-menu a:hover, .nfc-primary-menu a:focus-visible { color: var(--nfc-header-hover); } /* Submenus: indented inline list on mobile, no hover-flyout. */ .nfc-primary-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; } .nfc-primary-menu .sub-menu a { padding: 0.6rem 0.25rem; font-weight: 500; font-size: 0.95rem; color: var(--nfc-color-muted); } /* 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-color-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-color-text); } } /* Header utility buttons (dark mode toggle, search toggle). */ .nfc-dark-mode-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; } .nfc-dark-mode-toggle__icon { position: absolute; inset: 11px; border-radius: 50%; background: var(--nfc-color-text); } html[data-theme="dark"] .nfc-dark-mode-toggle__icon { background: #f5c518; } /* ========================================================================== 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 ========================================================================== */ .nfc-article-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-block: var(--nfc-content-top-pad); } /* 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 prompt. */ .nfc-preferred-source { margin: 0 0 1.5rem; } .nfc-preferred-source a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5em 0.9em; background: var(--nfc-color-surface); border: 1px solid var(--nfc-color-border); border-radius: var(--nfc-radius-sm); color: var(--nfc-color-text); font-size: var(--nfc-size-meta); font-weight: 600; text-decoration: none; transition: border-color var(--nfc-transition), color var(--nfc-transition); } .nfc-preferred-source a:hover, .nfc-preferred-source a:focus-visible { border-color: var(--nfc-color-accent); color: var(--nfc-color-accent); text-decoration: none; } .nfc-preferred-source__icon { color: #f5b301; } /* 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); } .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 ========================================================================== */ .nfc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: 0.82rem; color: var(--nfc-color-muted); } .nfc-breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; } .nfc-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--nfc-color-border); } .nfc-breadcrumbs a { color: var(--nfc-color-muted); text-decoration: none; } .nfc-breadcrumbs a:hover, .nfc-breadcrumbs a:focus-visible { color: var(--nfc-color-accent); } .nfc-archive-header { margin-bottom: 2rem; } .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: 3rem; 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; } .nfc-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .nfc-social-links a { color: var(--nfc-color-muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .nfc-social-links a:hover, .nfc-social-links a:focus-visible { color: var(--nfc-color-accent); } /* ========================================================================== 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: 3rem; } /* --- 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; } }