/* Theme Name: Newsroom Edition Theme URI: https://example.com/newsroom-edition Author: Your Publication Author URI: https://example.com Description: A lightweight, secure, highly customizable editorial news/magazine theme built for fast mobile reading, AdSense-ready ad placements, SEO/schema support, and non-technical administration entirely through the WordPress Customizer. Original design, inspired only by the usability conventions of major news publications. Version: 1.0.0 Requires at least: 6.2 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: newsroom-edition Tags: news, magazine, blog, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments, accessibility-ready, block-styles, wide-blocks Newsroom Edition WordPress Theme, Copyright 2026 Newsroom Edition is distributed under the terms of the GNU General Public License v2 or later. */ /* ========================================================= DESIGN TOKENS Every value here is overridden live by inc/customizer.php (see newsroom_customizer_css_vars()). Edit values below only to change the theme's DEFAULTS. ========================================================= */ :root{ /* Colors */ --nr-color-primary: #0b3d91; --nr-color-secondary: #1a1a1a; --nr-color-accent: #c8102e; --nr-color-bg: #ffffff; --nr-color-surface: #f5f5f5; --nr-color-text: #1a1a1a; --nr-color-heading: #0d0d0d; --nr-color-muted: #5a5a5a; --nr-color-border: #e2e2e2; --nr-color-link: #0b3d91; --nr-color-nav-bg: #0d0d0d; --nr-color-nav-text: #ffffff; --nr-color-footer-bg: #111111; --nr-color-footer-text: #d8d8d8; --nr-color-breaking-bg: #c8102e; --nr-color-breaking-text:#ffffff; /* Typography */ --nr-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nr-font-heading: Georgia, "Times New Roman", Times, serif; --nr-font-nav: var(--nr-font-body); --nr-font-size-base: 17px; --nr-line-height-base: 1.6; --nr-font-weight-heading: 700; /* Layout */ --nr-container-width: 1200px; --nr-article-width: 760px; --nr-sidebar-width: 320px; --nr-header-height: 84px; --nr-logo-size: 40px; --nr-icon-size: 20px; --nr-border-radius: 4px; --nr-card-spacing: 24px; --nr-article-spacing: 1.4em; --nr-button-size: 44px; --nr-ad-spacing: 32px; --nr-transition: 150ms ease; } /* Dark mode tokens (toggled via [data-nr-theme="dark"] on ) */ html[data-nr-theme="dark"]{ --nr-color-bg: #121212; --nr-color-surface: #1b1b1b; --nr-color-text: #e6e6e6; --nr-color-heading: #ffffff; --nr-color-muted: #a3a3a3; --nr-color-border: #2c2c2c; --nr-color-link: #6ea8ff; --nr-color-footer-bg: #000000; } /* ========================================================= RESET / BASE ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--nr-color-bg); color: var(--nr-color-text); font-family: var(--nr-font-body); font-size: var(--nr-font-size-base); line-height: var(--nr-line-height-base); transition: background var(--nr-transition), color var(--nr-transition); } img{ max-width: 100%; height: auto; display: block; } a{ color: var(--nr-color-link); text-decoration: none; } a:hover{ text-decoration: underline; } h1,h2,h3,h4,h5,h6{ font-family: var(--nr-font-heading); color: var(--nr-color-heading); font-weight: var(--nr-font-weight-heading); line-height: 1.25; margin: 0 0 .5em; } p{ margin: 0 0 var(--nr-article-spacing); } ul,ol{ padding-left: 1.2em; } button{ font-family: inherit; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Accessibility: skip link */ .nr-skip-link{ position: absolute; left: -9999px; top: 0; background: var(--nr-color-primary); color: #fff; padding: 12px 20px; z-index: 100000; border-radius: 0 0 4px 0; } .nr-skip-link:focus{ left: 0; } :focus-visible{ outline: 3px solid var(--nr-color-accent); outline-offset: 2px; } .screen-reader-text{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .screen-reader-text:focus{ position: static !important; width: auto; height: auto; background:#fff; color:#000; padding: 8px 12px; } /* ========================================================= LAYOUT / CONTAINER ========================================================= */ .nr-container{ max-width: var(--nr-container-width); margin-inline: auto; padding-inline: 20px; } .nr-boxed .nr-container{ border-inline: 1px solid var(--nr-color-border); } .nr-grid{ display: grid; gap: var(--nr-card-spacing); } .nr-grid--2{ grid-template-columns: repeat(2,1fr); } .nr-grid--3{ grid-template-columns: repeat(3,1fr); } .nr-grid--4{ grid-template-columns: repeat(4,1fr); } @media (max-width: 900px){ .nr-grid--3, .nr-grid--4{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .nr-grid--2, .nr-grid--3, .nr-grid--4{ grid-template-columns: 1fr; } } .nr-layout{ display: grid; grid-template-columns: 1fr var(--nr-sidebar-width); gap: 40px; align-items: start; } .nr-layout.nr-no-sidebar{ grid-template-columns: 1fr; } @media (max-width: 900px){ .nr-layout{ grid-template-columns: 1fr; } } /* ========================================================= TOP BAR ========================================================= */ .nr-topbar{ background: var(--nr-color-surface); border-bottom: 1px solid var(--nr-color-border); font-size: .82rem; } .nr-topbar .nr-container{ display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 16px; flex-wrap: wrap; } .nr-topbar-left{ display: flex; gap: 14px; align-items: center; color: var(--nr-color-muted); } .nr-topbar-right{ display: flex; gap: 12px; align-items: center; } /* ========================================================= HEADER ========================================================= */ .nr-header{ background: var(--nr-color-bg); border-bottom: 1px solid var(--nr-color-border); } .nr-header-inner{ min-height: var(--nr-header-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nr-header.is-stuck{ position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .nr-header.is-compact .nr-header-inner{ min-height: calc(var(--nr-header-height) * .7); } .nr-logo img{ height: var(--nr-logo-size); width: auto; } .nr-logo-text{ font-family: var(--nr-font-heading); font-weight: 800; font-size: 1.6rem; color: var(--nr-color-heading); } .nr-tagline{ font-size: .75rem; color: var(--nr-color-muted); display:block; } .nr-header-actions{ display: flex; align-items: center; gap: 12px; } .nr-icon-btn{ display: inline-flex; align-items: center; justify-content: center; width: var(--nr-button-size); height: var(--nr-button-size); background: transparent; border: none; cursor: pointer; color: var(--nr-color-text); } .nr-icon-btn svg{ width: var(--nr-icon-size); height: var(--nr-icon-size); } /* ========================================================= PRIMARY NAVIGATION ========================================================= */ .nr-nav{ background: var(--nr-color-nav-bg); } .nr-nav .nr-container{ display:flex; align-items: center; justify-content: space-between; } .nr-primary-menu{ list-style: none; margin: 0; padding: 0; display: flex; font-family: var(--nr-font-nav); } .nr-primary-menu > li{ position: relative; } .nr-primary-menu > li > a{ display: block; padding: 14px 16px; color: var(--nr-color-nav-text); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; } .nr-primary-menu > li:hover > a, .nr-primary-menu > li > a:focus-visible, .nr-primary-menu > li.current-menu-item > a{ background: rgba(255,255,255,.12); } .nr-primary-menu .sub-menu{ list-style:none; margin:0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--nr-color-bg); border: 1px solid var(--nr-color-border); box-shadow: 0 8px 20px rgba(0,0,0,.12); display: none; z-index: 400; } .nr-primary-menu .sub-menu .sub-menu{ top: 0; left: 100%; } .nr-primary-menu li.menu-item-has-children:hover > .sub-menu, .nr-primary-menu li.menu-item-has-children.nr-open > .sub-menu{ display: block; } .nr-primary-menu .sub-menu a{ display:block; padding: 10px 16px; color: var(--nr-color-text); font-size: .9rem; } .nr-primary-menu .sub-menu a:hover{ background: var(--nr-color-surface); } .nr-menu-caret{ font-size: .6em; margin-left: 4px; } .nr-mobile-toggle{ display: none; } @media (max-width: 900px){ .nr-primary-menu{ display: none; } .nr-mobile-toggle{ display: inline-flex; } } /* Mobile menu panel */ .nr-mobile-menu{ display: none; background: var(--nr-color-nav-bg); } .nr-mobile-menu.is-open{ display: block; } .nr-mobile-menu ul{ list-style: none; margin:0; padding: 0; } .nr-mobile-menu a{ display: block; padding: 14px 20px; color: var(--nr-color-nav-text); border-top: 1px solid rgba(255,255,255,.08); } .nr-mobile-menu .sub-menu{ padding-left: 16px; display: none; } .nr-mobile-menu li.nr-open > .sub-menu{ display: block; } .nr-mobile-submenu-toggle{ background: none; border: none; color: var(--nr-color-nav-text); float: right; padding: 14px 20px; cursor: pointer; } /* ========================================================= BREAKING NEWS ========================================================= */ .nr-breaking{ background: var(--nr-color-breaking-bg); color: var(--nr-color-breaking-text); } .nr-breaking .nr-container{ display: flex; align-items: center; gap: 14px; min-height: 42px; overflow: hidden; } .nr-breaking-label{ font-weight: 800; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; background: rgba(0,0,0,.2); padding: 4px 10px; border-radius: var(--nr-border-radius); flex-shrink: 0; } .nr-breaking-track{ overflow: hidden; flex: 1; position: relative; height: 1.4em; } .nr-breaking-track ul{ list-style: none; margin:0; padding:0; position: absolute; inset: 0; } .nr-breaking-track li{ display: none; } .nr-breaking-track li.is-active{ display: block; } .nr-breaking-track a{ color: var(--nr-color-breaking-text); font-weight: 600; } .nr-breaking.is-static .nr-breaking-track li{ display: block; margin-bottom: 4px; } /* ========================================================= CARDS / ARTICLE TEASERS ========================================================= */ .nr-card{ background: var(--nr-color-bg); border: 1px solid var(--nr-color-border); border-radius: var(--nr-border-radius); overflow: hidden; display: flex; flex-direction: column; } .nr-card-media{ position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--nr-color-surface); } .nr-card-media img{ width: 100%; height: 100%; object-fit: cover; } .nr-card-body{ padding: 14px 16px 18px; display:flex; flex-direction: column; gap: 8px; flex: 1; } .nr-kicker{ display: inline-block; color: var(--nr-color-accent); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .nr-card-title{ font-size: 1.05rem; margin: 0; } .nr-card-title a{ color: inherit; text-decoration: none; } .nr-card-title a:hover{ text-decoration: underline; } .nr-card-excerpt{ color: var(--nr-color-muted); font-size: .92rem; margin: 0; } .nr-meta{ font-size: .78rem; color: var(--nr-color-muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .nr-meta a{ color: inherit; } /* Hero / featured story */ .nr-hero{ display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--nr-card-spacing); margin-bottom: 40px; } .nr-hero-main .nr-card-media{ aspect-ratio: 16/10; } .nr-hero-main .nr-card-title{ font-size: 1.9rem; } .nr-hero-side{ display: flex; flex-direction: column; gap: 16px; } @media (max-width: 900px){ .nr-hero{ grid-template-columns: 1fr; } .nr-hero-main .nr-card-title{ font-size: 1.5rem; } } .nr-section{ margin: 48px 0; } .nr-section-head{ display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--nr-color-primary); margin-bottom: var(--nr-card-spacing); padding-bottom: 8px; } .nr-section-head h2{ font-size: 1.4rem; margin: 0; } .nr-section-head .nr-more-link{ font-size: .85rem; font-weight: 600; } /* ========================================================= SINGLE ARTICLE ========================================================= */ .nr-article-header{ max-width: var(--nr-article-width); margin: 0 auto 24px; } .nr-article-header h1{ font-size: 2.1rem; margin-bottom: .3em; } .nr-deck{ font-size: 1.15rem; color: var(--nr-color-muted); margin-bottom: 1em; } .nr-byline{ display:flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--nr-color-muted); } .nr-byline img{ width: 32px; height: 32px; border-radius: 50%; } .nr-article-figure{ max-width: var(--nr-container-width); margin: 0 auto 24px; } .nr-article-figure img{ width: 100%; border-radius: var(--nr-border-radius); } .nr-article-figure figcaption{ font-size: .8rem; color: var(--nr-color-muted); padding-top: 6px; } .nr-article-body{ max-width: var(--nr-article-width); margin: 0 auto; font-size: 1.08rem; } .nr-article-body > *{ margin-bottom: var(--nr-article-spacing); } .nr-article-body h2{ font-size: 1.5rem; margin-top: 1.6em; } .nr-article-body h3{ font-size: 1.25rem; margin-top: 1.4em; } .nr-article-body blockquote{ border-left: 4px solid var(--nr-color-primary); margin: 1.6em 0; padding: .4em 0 .4em 1.2em; font-style: italic; color: var(--nr-color-muted); } .nr-article-tools{ max-width: var(--nr-article-width); margin: 0 auto 24px; display: flex; gap: 10px; border-top: 1px solid var(--nr-color-border); border-bottom: 1px solid var(--nr-color-border); padding: 10px 0; } .nr-share-btn{ width: var(--nr-button-size); height: var(--nr-button-size); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nr-color-surface); color: var(--nr-color-text); } .nr-share-btn svg{ width: 18px; height: 18px; } .nr-tags{ max-width: var(--nr-article-width); margin: 24px auto; display: flex; gap: 8px; flex-wrap: wrap; } .nr-tag{ background: var(--nr-color-surface); padding: 5px 12px; border-radius: 999px; font-size: .8rem; color: var(--nr-color-text); } .nr-author-box{ max-width: var(--nr-article-width); margin: 32px auto; display: flex; gap: 16px; background: var(--nr-color-surface); padding: 20px; border-radius: var(--nr-border-radius); } .nr-author-box img{ width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; } .nr-author-box h3{ font-size: 1rem; margin-bottom: 4px; } .nr-author-box p{ font-size: .9rem; color: var(--nr-color-muted); margin-bottom: 6px; } .nr-post-nav{ max-width: var(--nr-article-width); margin: 32px auto; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--nr-color-border); padding-top: 16px; } .nr-post-nav > div{ max-width: 48%; } .nr-post-nav small{ color: var(--nr-color-muted); text-transform: uppercase; font-size: .72rem; } /* ========================================================= BREADCRUMBS ========================================================= */ .nr-breadcrumbs{ font-size: .8rem; color: var(--nr-color-muted); margin: 16px 0; } .nr-breadcrumbs a{ color: var(--nr-color-muted); } .nr-breadcrumbs a:hover{ color: var(--nr-color-link); } /* ========================================================= ADVERTISEMENT SLOTS ========================================================= */ .nr-ad-slot{ margin: var(--nr-ad-spacing) auto; text-align: center; max-width: 100%; overflow: hidden; } .nr-ad-label{ display:block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nr-color-muted); margin-bottom: 6px; } .nr-ad-slot--mobile-only{ display: none; } .nr-ad-slot--desktop-only{ display: block; } @media (max-width: 780px){ .nr-ad-slot--mobile-only{ display: block; } .nr-ad-slot--desktop-only{ display: none; } } /* ========================================================= SIDEBAR / WIDGETS ========================================================= */ .nr-widget{ margin-bottom: 36px; } .nr-widget h2, .nr-widget .widget-title{ font-size: 1.05rem; border-bottom: 2px solid var(--nr-color-border); padding-bottom: 8px; margin-bottom: 14px; } .nr-widget ul{ list-style: none; margin:0; padding:0; } .nr-widget li{ padding: 10px 0; border-bottom: 1px solid var(--nr-color-border); } .nr-widget li:last-child{ border-bottom: none; } .nr-newsletter{ background: var(--nr-color-surface); padding: 28px; border-radius: var(--nr-border-radius); text-align: center; } .nr-newsletter form{ display: flex; gap: 10px; max-width: 460px; margin: 16px auto 0; } .nr-newsletter input[type="email"]{ flex: 1; padding: 0 14px; height: var(--nr-button-size); border: 1px solid var(--nr-color-border); border-radius: var(--nr-border-radius); } .nr-newsletter button{ height: var(--nr-button-size); padding: 0 20px; background: var(--nr-color-primary); color: #fff; border: none; border-radius: var(--nr-border-radius); cursor: pointer; font-weight: 700; } /* ========================================================= FOOTER ========================================================= */ .nr-footer{ background: var(--nr-color-footer-bg); color: var(--nr-color-footer-text); margin-top: 60px; } .nr-footer a{ color: var(--nr-color-footer-text); } .nr-footer-columns{ display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; padding: 48px 0 24px; } .nr-footer-columns h3{ color: #fff; font-size: 1rem; margin-bottom: 14px; } .nr-footer-columns ul{ list-style: none; margin:0; padding:0; } .nr-footer-columns li{ margin-bottom: 8px; font-size: .88rem; } .nr-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; } .nr-social-icons{ display: flex; gap: 10px; } .nr-social-icons a{ width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 50%; } .nr-social-icons svg{ width: 16px; height: 16px; } @media (max-width: 780px){ .nr-footer-columns{ grid-template-columns: repeat(2,1fr); } } /* ========================================================= SEARCH OVERLAY ========================================================= */ .nr-search-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 900; display: none; padding: 80px 20px; } .nr-search-overlay.is-open{ display: block; } .nr-search-overlay form{ max-width: 700px; margin: 0 auto; display: flex; gap: 10px; } .nr-search-overlay input[type="search"]{ flex: 1; font-size: 1.4rem; padding: 12px 16px; border: none; border-radius: var(--nr-border-radius); } .nr-search-close{ position: absolute; top: 24px; right: 24px; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; } /* ========================================================= COMMENTS ========================================================= */ .nr-comments{ max-width: var(--nr-article-width); margin: 40px auto; } .comment-list{ list-style: none; margin:0; padding:0; } .comment-list .children{ list-style: none; margin: 0 0 0 32px; padding: 0; } .comment-body{ border-bottom: 1px solid var(--nr-color-border); padding: 16px 0; } .comment-author img{ border-radius: 50%; vertical-align: middle; margin-right: 8px; } .comment-form input, .comment-form textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--nr-color-border); border-radius: var(--nr-border-radius); margin-bottom: 12px; font-family: inherit; } .comment-form .form-submit input{ width: auto; background: var(--nr-color-primary); color: #fff; border: none; cursor: pointer; padding: 10px 24px; font-weight: 700; } /* ========================================================= UTILITIES ========================================================= */ .nr-visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); } .nr-pagination{ display:flex; gap:8px; justify-content:center; margin: 32px 0; } .nr-pagination a, .nr-pagination span{ padding: 8px 14px; border: 1px solid var(--nr-color-border); border-radius: var(--nr-border-radius); } .nr-pagination .current{ background: var(--nr-color-primary); color:#fff; border-color: var(--nr-color-primary); }