/* ================================================================== nerfguns.net brand layer | Extra child theme TODO 70 (restyle v1) + TODO 65 (.ngn-toc / .ngn-tbl) Palette is the ONLY set of colours allowed on this site (brand-assets/nerfguns.json): bg #3c3c3c dark chrome + body text card #b0aaaa muted borders, secondary surfaces fg #eeeeee text on dark primary #2d4ef4 interactive: links, buttons, active states accent #f97a35 highlight: hovers, rules, callout edges Typography: Crillee Italic Std (file: NerfGunsDotNet) for headings and display ONLY, never body. Inter for body. Both self-hosted as FILES. !important is used deliberately: Extra prints a large critical-CSS block inline in , which would otherwise outrank this stylesheet. ================================================================== */ :root{ --ngn-bg:#3c3c3c; --ngn-card:#b0aaaa; --ngn-fg:#eeeeee; --ngn-primary:#2d4ef4; --ngn-accent:#f97a35; } /* ---------- 1. Fonts, self-hosted files ---------- */ @font-face{ font-family:'NerfGunsDisplay'; src:url('../fonts/nerfgunsdotnet-display.woff2') format('woff2'), url('../fonts/nerfgunsdotnet-display.woff') format('woff'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'InterNGN'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'InterNGN'; src:url('../fonts/inter-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } /* Body face */ body, body.et_extra_layout, input,textarea,select,button, .post-content,.et_pb_text, #main-content, .widget_text{ font-family:'InterNGN',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important; } body,.post-content,#main-content{ color:var(--ngn-bg) !important; } /* Display face: headings and chrome only, never body copy */ h1,h2,h3,h4,h5,h6, .et_pb_module_header, .module-head h1,.module-head h2, .widget-title,.widgettitle, #et-trending-label, .logo_title, .et_pb_promo_title, .et_pb_toggle_title, .entry-title,.post-title, .ngn-toc > p{ font-family:'NerfGunsDisplay','InterNGN',Impact,Haettenschweiler,sans-serif !important; letter-spacing:.015em; font-weight:400 !important; } h1,h2,h3,h4,h5,h6,.entry-title,.post-title{ color:var(--ngn-bg); } /* Crillee is an italic face with a tall x-height; nudge tracking so the all-caps headings Extra renders do not run together. */ h1,.entry-title{ letter-spacing:.02em; } /* ------------------------------------------------------------------ Extra accent swap: #EE2D2B -> #2d4ef4 (brand primary) GENERATED from Extra v4.27.7's own CSS. Do not hand-edit; regenerate with scratchpad/restyle-gen-accent.mjs if Extra is ever updated. ------------------------------------------------------------------ */ /* color: 31 selectors */ .widget_et_recent_tweets .widget_list a, .widget_et_recent_tweets .et-extra-icon, .widget_et_recent_tweets .widget-footer .et-extra-social-icon, .widget_et_recent_tweets .widget-footer .et-extra-social-icon::before, .project-details .project-details-title, .et_filterable_portfolio .filterable_portfolio_filter a.current, .et_extra_layout .et_pb_extra_column_main .et_pb_column .module-head h1, .et_pb_extra_column .module-head h1, #portfolio_filter a.current, .woocommerce div.product div.summary .product_meta a, .woocommerce-page div.product div.summary .product_meta a, .et_pb_widget.woocommerce .product_list_widget li .amount, .et_pb_widget li a:hover, .et_pb_widget.woocommerce .product_list_widget li a:hover, .et_pb_widget.widget_et_recent_videos .widget_list .title:hover, .et_pb_widget.widget_et_recent_videos .widget_list .title.active, .woocommerce .woocommerce-info:before, a, a:visited, .post-content a, .et_pb_pagebuilder_layout .et_pb_blurb_container p a, .et_pb_pagebuilder_layout .et_pb_code a, .et_pb_pagebuilder_layout .et_pb_promo_description a, .et_pb_pagebuilder_layout .et_pb_newsletter_description a, .et_pb_pagebuilder_layout .et_pb_team_member_description>a, .et_pb_pagebuilder_layout .et_pb_pricing li a, .et_pb_pagebuilder_layout .et_pb_slide_content a, .et_pb_pagebuilder_layout .et_pb_tab a, .et_pb_pagebuilder_layout .et_pb_text a, .et_pb_pagebuilder_layout .et_pb_toggle_content a, .et_pb_pagebuilder_layout .et_pb_fullwidth_code a{color:#2d4ef4 !important} /* background-color: 79 selectors */ .single .score-bar, .widget_et_recent_reviews .review-breakdowns .score-bar, .et_pb_extra_module .posts-list article .post-thumbnail, .et_extra_other_module .posts-list article .post-thumbnail, .et_pb_widget .widget_list_portrait, .et_pb_widget .widget_list_thumbnail, .quote-format, .link-format, .audio-format .audio-wrapper, .paginated .pagination li.active, .score-bar, .review-summary-score-box, .post-footer .rating-stars #rating-stars img.star-on, .post-footer .rating-stars #rated-stars img.star-on, .author-box-module .author-box-avatar, .timeline-menu li.active a:before, .woocommerce div.product form.cart .button, .woocommerce div.product form.cart .button.disabled, .woocommerce div.product form.cart .button.disabled:hover, .woocommerce-page div.product form.cart .button, .woocommerce-page div.product form.cart .button.disabled, .woocommerce-page div.product form.cart .button.disabled:hover, .woocommerce div.product form.cart .read-more-button, .woocommerce-page div.product form.cart .read-more-button, .woocommerce div.product form.cart .post-nav .nav-links .button, .woocommerce-page div.product form.cart .post-nav .nav-links .button, .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message, #et-info .et-cart, #et-info .et-top-search .et-search-field, #et-info .et-extra-social-icons .et-extra-icon, #page-container .button, #page-container button, #page-container button[type="submit"], #page-container input[type="submit"], #page-container input[type="reset"], #page-container input[type="button"], .read-more-button, .comment-body .comment_area .comment-content .reply-container .comment-reply-link, .widget_tag_cloud a, .widget_tag_cloud a:visited, .post-nav .nav-links .button, a.read-more-button, a.read-more-button:visited, #footer .widget_tag_cloud a, #footer .widget_tag_cloud a:visited, #footer a.read-more-button, #footer a.read-more-button:visited, #footer .button, #footer button, #footer button[type="submit"], #footer input[type="submit"], #footer input[type="reset"], #footer input[type="button"], .et_pb_button, #page-container .button:hover, #page-container button:hover, #page-container button[type="submit"]:hover, #page-container input[type="submit"]:hover, #page-container input[type="reset"]:hover, #page-container input[type="button"]:hover, .read-more-button:hover, .comment-body .comment_area .comment-content .reply-container .comment-reply-link:hover, .widget_tag_cloud a:hover, .widget_tag_cloud a:visited:hover, .post-nav .nav-links .button:hover, a.read-more-button:hover, a.read-more-button:visited:hover, #footer .widget_tag_cloud a:hover, #footer .widget_tag_cloud a:visited:hover, #footer a.read-more-button:hover, #footer a.read-more-button:visited:hover, #footer .button:hover, #footer button:hover, #footer button[type="submit"]:hover, #footer input[type="submit"]:hover, #footer input[type="reset"]:hover, #footer input[type="button"]:hover, .et_pb_button:hover{background-color:#2d4ef4 !important} /* border-color: 11 selectors */ #et-menu>li>ul, #et-menu li>ul, #et-menu>li>ul>li>ul, .et-top-search-primary-menu-item .et-top-search, .et_pb_module, .module, .page article, .authors-page .page, #timeline-sticky-header, .et_extra_other_module, .woocommerce .woocommerce-info{border-color:#2d4ef4 !important} /* ---------- 3. Deliberate accent (orange) placements ---------- */ a:hover, .post-content a:hover, .et_pb_widget li a:hover{ color:var(--ngn-accent) !important; } /* A heading that happens to be a link is still a heading. Without this the blanket link colour above turns every linked H2/H3 solid blue, which is what Extra's red used to do and is no better in brand colours. */ h1 a,h2 a,h3 a,h4 a,h5 a,h6 a, .entry-title a,.post-title a{ color:inherit !important; /* Extra sets a body font on links, which beat the heading rule and left every LINKED heading (most product headings on the money pages) rendering in the body face while its unlinked neighbours used the display face. Caught by computed style: the h3 resolved to the display font, its child to Arial. */ font-family:inherit !important; font-style:inherit !important; } h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover, .entry-title a:hover,.post-title a:hover{ color:var(--ngn-accent) !important; } blockquote{ border-left-color:var(--ngn-accent) !important; } /* ---------- 3b. Article hero band (Wayne, 2026-08-15) ---------- The hero behind the article title was a sea-green #198F8F radial gradient, which is not in the palette. It is generated per page by Divi from the et_pb_section background stored in POST CONTENT, and arrives as div.et_pb_section.et_pb_section_0{background-image:...!important}, inline on some pages and via the et-cache unified file on others. Content belongs to the writers, so it is corrected here instead of editing 6 pages. 🔴 Scoped to the SIX pages that actually carry it, deliberately NOT applied to div.et_pb_section.et_pb_section_0 globally. A survey of 19 pages found 6 with the teal, 13 with NO section_0 background at all, and zero with a different one. A global rule would paint a band onto those 13 pages, which currently have none. Adding a new page with this hero means adding its page-id here. Colour: brand bg #3c3c3c with a centre glow of brand primary at 35%, which keeps the original's centre-lit shape using only palette colours. Measured white-text contrast: 9.41:1 at the brightest centre point, 11.03:1 at the edge, so AAA across the whole band. This also fixes a real accessibility problem rather than only a brand one: the teal it replaces was 3.91:1, which fails AA for normal text. Flat primary blue was rejected at 5.99:1, AA but not AAA. */ body.page-id-88863 div.et_pb_section.et_pb_section_0, body.page-id-109987 div.et_pb_section.et_pb_section_0, body.page-id-110080 div.et_pb_section.et_pb_section_0, body.page-id-110001 div.et_pb_section.et_pb_section_0, body.page-id-109965 div.et_pb_section.et_pb_section_0, body.page-id-110006 div.et_pb_section.et_pb_section_0{ background-color:var(--ngn-bg) !important; background-image:radial-gradient(circle at center,rgba(45,78,244,.35) 0%,var(--ngn-bg) 70%) !important; } /* ---------- 4. Dark chrome: top bar + footer ---------- */ #top-header{ background-color:var(--ngn-bg) !important; } #top-header, #top-header a, #et-secondary-nav a, #et-trending-label, #et-trending .et-trending-post a{ color:var(--ngn-fg) !important; } #et-trending .et-trending-post a:hover, #et-secondary-nav a:hover{ color:var(--ngn-accent) !important; } #et-trending-label{ color:var(--ngn-accent) !important; } #footer, #footer-bottom{ background-color:var(--ngn-bg) !important; } #footer,#footer p,#footer li,#footer-bottom,#footer-info{ color:var(--ngn-fg) !important; } #footer .widget-title,#footer .widgettitle{ color:var(--ngn-fg) !important; } #footer a{ color:var(--ngn-fg) !important; } #footer a:hover{ color:var(--ngn-accent) !important; } #footer-bottom{ border-top:1px solid rgba(238,238,238,.15); } /* footer credit line: the Elegant Themes credit is replaced in functions.php; if it is ever empty, collapse it rather than leave a gap */ #footer-info:empty{ display:none; } /* ---------- 5. Social icons ---------- */ /* Hover fills use the brand accent for every network, replacing Extra's per-network brand colours (palette rule: 5 colours only). */ .et-extra-icon.et-extra-icon-background-hover:hover, .et-extra-icon.et-extra-icon-background{ background:var(--ngn-accent) !important; } /* TikTok has no glyph in Extra's icon font, and Extra's "twitter" glyph is still the old bird. Both are drawn here as CSS masks in currentColor. */ .et-extra-icon-tiktok:before, .et-extra-icon-twitter:before{ content:"" !important; display:block; width:16px;height:16px; margin:7px auto 0; background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .et-extra-icon-tiktok:before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); } .et-extra-icon-twitter:before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); } /* ---------- 5b. Newsletter signup widget ---------- lp-newsletter prints its own inline