/*
Theme Name: JNN News Storm Child
Theme URI: https://jnnnews.in/
Description: Production CSS for Johar News Network based on News Storm.
Author: Johar News Network
Template: news-storm
Version: 5.6.5U10R2
Text Domain: jnn-news-storm-child
*/
/*######################################################################
JNN FRAMEWORK MASTER INDEX v1.1
Synchronized v5.6.5U8R1 HORIZONTAL INSET RESTORE LOCK
#######################################################################
PERMANENT RULES
- One ID = one permanent responsibility.
- Master Control titles and variable sequence must match.
- CSS rule order is preserved because cascade order is functional.
- Header variable IDs use HDR.
- Heading variable IDs use HDG to prevent ID collision.
- Widget Grid/Flex activates only through explicit JNN hooks.
- Hero, Editors Choice, Sidebar, Footer and Single Post remain isolated.
PERMANENT COMPONENT NUMBERING
The same component number is used in:
1. Master Index
2. Master Control
3. Actual CSS component rules
01 FRM Framework / Brand
02 HDR Header
03 LOG Logo
04 NAV Hamburger / Navigation
05 SRC Search
06 SUB Subscribe
07 QKM Quick Menu
08 FLS Flash News
09 BRK Breaking News
10 HER Hero Story
11 EDC Editors Choice
12 HOM Home Story / Category Heading
13 HDG Universal Heading Engine
14 CBG Category Badge Engine
15 WDG Fresh Widget Engine
16 SDB Sidebar Engine
17 CAT Category Page
18 PST Single Post
19 MTA Universal Meta
20 SPC Universal Spacing
21 FTR Footer
22 UCD Universal Card Engine
23 RSV Reserved / Future
24 FMD Future Module Deployment Engine
25 SBI Slot Binding & Integration Engine
INFRASTRUCTURE NOT PART OF COMPONENT NUMBERING
SYS-CTL Master Control Panel
SYS-RST Reset
SYS-GLB Global
SYS-UTL Non-home Utility
PRF-DES Desktop Profile
PRF-TAB Tablet Profile
PRF-MOB Mobile Portrait Profile
PRF-LND Mobile Landscape Profile
PRF-SML Small Mobile Profile
SYS-ACC Accessibility Guards
SYS-PRT Print
SYS-REG Update Registry
SYS-EXT Extension Zone
ENGINE SUBMODULES KEEP THEIR OWN PERMANENT IDs
JNN-HRO-001 011
JNN-WDG-001 012
JNN-SDB-001 010
JNN-PST-001 003
JNN-CAT-001
JNN-MTA-001
JNN-SPC-001
JNN-FTR-001
JNN-RSV-001
JNN-RSV-002
JNN-RSV-003
JNN-RSV-004
JNN-RSV-005
JNN-RSV-006
JNN-RSV-007
JNN-RSV-008
JNN-RSV-009
JNN-RSV-010
JNN-FMD-001
JNN-FMD-002
JNN-FMD-003
JNN-FMD-004
JNN-FMD-005
JNN-FMD-006
JNN-FMD-007
JNN-FMD-008
JNN-FMD-009
JNN-FMD-010
JNN-SBI-001
JNN-SBI-002
JNN-SBI-003
JNN-SBI-004
JNN-SBI-005
JNN-SBI-006
JNN-SBI-007
JNN-SBI-008
JNN-SBI-009
JNN-SBI-010
JNN-UVO-001
JNN-UVO-002
JNN-UVO-003
JNN-UVO-004
JNN-UVO-005
JNN-UVO-006
JNN-UVO-007
JNN-UVO-008
JNN-UVO-009
JNN-UVO-010
JNN-PHI-001
JNN-PHI-002
JNN-PHI-003
JNN-PHI-004
JNN-PHI-005
JNN-PHI-006
JNN-PHI-007
JNN-PHI-008
JNN-PHI-009
JNN-PHI-010
SEARCH RULE
- Component : `MODULE 16 SIDEBAR`
- Variable : `SDB-054`
- Engine rule : `JNN-SDB-003`
- Infrastructure : `SYS-RST`, `PRF-MOB`,
#######################################################################
END OF MASTER INDEX
#######################################################################*/
/* =========================================================
SYS-CTL MASTER CONTROL PANEL
ID: JNN-CTL-001 DESKTOP / DEFAULT PROFILE
========================================================= */
:root {
/* =====================================================
CONTROL 01 FRAMEWORK / BRAND
===================================================== */
/* FRM-001 */
--jnn-red: #d90000;
/* FRM-002 */
--jnn-dark-red: #8f0000;
/* FRM-003 */
--jnn-text: #111111;
/* FRM-004 */
--jnn-white: #ffffff;
/* FRM-005 */
--jnn-border: #e3e3e3;
/* FRM-006 */
--jnn-yellow: #ffd700;
/* FRM-007 */
--jnn-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
/* =====================================================
CONTROL 02 HEADER
===================================================== */
/* HDR-001 */
--jnn-header-height: 64px;
/* HDR-002 */
--jnn-header-side-pad: 20px;
/* HDR-003 */
--jnn-header-gap: 12px;
/* HDR-004 */
--jnn-actions-gap: 8px;
/* HDR-005 */
--jnn-action-box-size: 40px;
/* =====================================================
CONTROL 03 LOGO
===================================================== */
/* LOG-001 */
--jnn-logo-layout-height: 46px;
/* LOG-002 */
--jnn-logo-max-width: 220px;
/* LOG-003 */
--jnn-logo-shift-x: 10px;
/* LOG-004 */
--jnn-logo-shift-y: 0px;
/* LOG-005 */
--jnn-logo-visual-scale: 1.45;
/* =====================================================
CONTROL 04 HAMBURGER / NAVIGATION
===================================================== */
/* NAV-001 */
--jnn-hamburger-width: 24px;
/* NAV-002 */
--jnn-hamburger-thickness: 2.5px;
/* NAV-003 */
--jnn-hamburger-gap: 4px;
/* NAV-004 */
--jnn-menu-width: 220px;
/* NAV-005 */
--jnn-menu-max-width: 70vw;
/* NAV-006 */
--jnn-menu-top-gap: 8px;
/* NAV-007 */
--jnn-menu-max-height: 70vh;
/* NAV-008 */
--jnn-menu-item-font: 16px;
/* NAV-009 */
--jnn-menu-item-pad-y: 10px;
/* NAV-010 */
--jnn-menu-item-pad-x: 15px;
/* =====================================================
CONTROL 05 SEARCH
===================================================== */
/* SRC-001 */
--jnn-search-glyph-size: 20px;
/* SRC-002 */
--jnn-search-width: 300px;
/* =====================================================
CONTROL 06 SUBSCRIBE
===================================================== */
/* SUB-001 */
--jnn-subscribe-width: 92px;
/* SUB-002 */
--jnn-subscribe-height: 38px;
/* SUB-003 */
--jnn-subscribe-font: 14px;
/* SUB-004 */
--jnn-subscribe-pad-x: 14px;
/* =====================================================
CONTROL 07 QUICK MENU
===================================================== */
/* QKM-001 */
--jnn-quick-height: 46px;
/* QKM-002 */
--jnn-quick-font: 18px;
/* QKM-003 */
--jnn-quick-pad-x: 13px;
/* QKM-004 */
--jnn-quick-wrap-pad-x: 10px;
/* QKM-005 */
--jnn-home-icon-size: 18px;
/* QKM-006 */
--jnn-home-label-size: 0px;
/* QKM-007 */
--jnn-home-next-gap: 4px;
/* QKM-008 */
--jnn-home-icon-shift-x: 0px;
/* QKM-009 */
--jnn-home-icon-shift-y: 0px;
/* =====================================================
CONTROL 08 FLASH NEWS
===================================================== */
/* FLS-001 */
--jnn-flash-height: 38px;
/* FLS-002 */
--jnn-flash-font: 16px;
/* FLS-003 */
--jnn-flash-item-gap: 18px;
/* FLS-004 */
--jnn-flash-star-size: 12px;
/* FLS-005 */
--jnn-flash-star-gap: 7px;
/* =====================================================
CONTROL 09 BREAKING NEWS
===================================================== */
/* BRK-001 */
--jnn-breaking-height: 44px;
/* BRK-002 */
--jnn-breaking-font: 24px;
/* BRK-003 */
--jnn-breaking-gap: 14px;
/* BRK-004 */
--jnn-breaking-dot: 8px;
/* BRK-005 */
--jnn-breaking-pad-x: 10px;
/* BRK-006 */
--jnn-breaking-line-width: 98%;
/* BRK-007 */
--jnn-breaking-line-height: 3px;
/* =====================================================
CONTROL 10 HERO STORY
===================================================== */
/* HER-001 */
--jnn-hero-top-gap: 4px;
/* HER-002 */
--jnn-hero-bottom-gap: 18px;
/* HER-003 */
--jnn-hero-side-gap: 0px;
/* HER-004 */
--jnn-hero-image-height: 500px;
/* HER-005 */
--jnn-hero-image-position-x: 50%;
/* HER-006 */
--jnn-hero-image-position-y: 42%;
/* HER-007 */
--jnn-hero-image-scale: 1;
/* HER-008 */
--jnn-hero-image-brightness: 1;
/* HER-009 */
--jnn-hero-image-contrast: 1;
/* HER-010 */
--jnn-hero-image-saturate: 1;
/* HER-011 */
--jnn-hero-image-transition: 0.35s;
/* HER-012 */
--jnn-hero-image-hover-scale: 1.03;
/* HER-013 */
--jnn-hero-card-hover-lift: -2px;
/* HER-014 */
--jnn-hero-card-transition: 0.30s;
/* HER-015 */
--jnn-hero-content-enter-duration: 0.45s;
/* HER-016 */
--jnn-hero-content-enter-delay: 0.08s;
/* HER-017 */
--jnn-hero-overlay-transition: 0.30s;
/* HER-018 */
--jnn-hero-overlay-hover-darkness: 0.96;
/* HER-019 */
--jnn-hero-smart-min-height: 0px;
/* HER-020 */
--jnn-hero-content-max-width: 100%;
/* HER-021 */
--jnn-hero-image-fit: cover;
/* HER-022 */
--jnn-hero-card-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
/* HER-023 */
--jnn-hero-overlay-height: 42%;
/* HER-024 */
--jnn-hero-overlay-darkness: 0.92;
/* HER-025 */
--jnn-hero-overlay-mid: 0.62;
/* HER-026 */
--jnn-hero-radius: 3px;
/* HER-027 */
--jnn-hero-content-pad-top: 20px;
/* HER-028 */
--jnn-hero-content-pad-x: 24px;
/* HER-029 */
--jnn-hero-content-pad-bottom: 22px;
/* HER-030 */
--jnn-hero-title-size: 30px;
/* HER-031 */
--jnn-hero-title-line: 1.25;
/* HER-032 */
--jnn-hero-excerpt-size: 15px;
/* HER-033 */
--jnn-hero-meta-size: 13px;
/* HER-034 */
--jnn-hero-meta-display: none;
/* HER-035 */
--jnn-hero-meta-gap: 0px;
/* HER-036 */
--jnn-hero-title-weight: 800;
/* HER-037 */
--jnn-hero-title-letter-spacing: 0px;
/* HER-038 */
--jnn-hero-title-bottom-gap: 8px;
/* HER-039 */
--jnn-hero-excerpt-line: 1.45;
/* HER-040 */
--jnn-hero-excerpt-weight: 400;
/* HER-041 */
--jnn-hero-excerpt-letter-spacing: 0px;
/* HER-042 */
--jnn-hero-excerpt-lines: 2;
/* HER-043 */
--jnn-hero-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
/* HER-044 */
--jnn-hero-category-size: 12px;
/* HER-045 */
--jnn-hero-category-gap: 3px;
/* HER-046 */
--jnn-hero-category-dot-size: 7px;
/* HER-047 */
--jnn-hero-category-dot-gap: 6px;
/* HER-048 */
--jnn-hero-category-weight: 700;
/* HER-049 */
--jnn-hero-category-letter-spacing: 0px;
/* =====================================================
HERO ENGINE v5.5.7 FINAL INTEGRATION CONTROLS
Variable range HER-050 through HER-079
===================================================== */
/* HER-050 */
--jnn-hero-excerpt-bottom-gap: 0px;
/* HER-051 */
--jnn-hero-category-color: #ff3b30;
/* HER-052 */
--jnn-hero-card-background: #111111;
/* HER-053 */
--jnn-hero-card-overflow: hidden;
/* HER-054 */
--jnn-hero-card-isolation: isolate;
/* HER-055 */
--jnn-hero-overlay-pointer-events: none;
/* HER-056 */
--jnn-hero-overlay-z-index: 1;
/* HER-057 */
--jnn-hero-content-z-index: 2;
/* HER-058 */
--jnn-hero-content-width: 100%;
/* HER-059 */
--jnn-hero-title-max-width: 100%;
/* HER-060 */
--jnn-hero-excerpt-max-width: 100%;
/* HER-061 */
--jnn-hero-text-overflow-wrap: anywhere;
/* HER-062 */
--jnn-hero-focus-width: 2px;
/* HER-063 */
--jnn-hero-focus-style: solid;
/* HER-064 */
--jnn-hero-focus-color: #ffffff;
/* HER-065 */
--jnn-hero-focus-offset: 3px;
/* HER-066 */
--jnn-hero-focus-shadow: 0 0 0 3px rgba(217, 0, 0, 0.32);
/* HER-067 */
--jnn-hero-link-tap-highlight: rgba(255, 255, 255, 0.18);
/* HER-068 */
--jnn-hero-forced-color-adjust: auto;
/* HER-069 */
--jnn-hero-forced-border-color: CanvasText;
/* HER-070 */
--jnn-hero-forced-link-color: LinkText;
/* HER-071 */
--jnn-hero-reduced-motion-duration: 1ms;
/* HER-072 */
--jnn-hero-print-image-height: auto;
/* HER-073 */
--jnn-hero-print-text-color: #111111;
/* HER-074 */
--jnn-hero-print-background: #ffffff;
/* HER-075 */
--jnn-hero-fallback-min-height: 220px;
/* HER-076 */
--jnn-hero-engine-version: "5.5.7-HERO";
/* HER-077 */
--jnn-hero-regression-state: 1;
/* HER-078 */
--jnn-hero-production-state: 1;
/* HER-079 */
--jnn-hero-engine-active: 1;
/* =====================================================
CONTROL 11 EDITORS CHOICE
===================================================== */
/* EDC-001 */
--jnn-editor-card-radius: 8px;
/* EDC-002 */
--jnn-editor-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
/* EDC-003 */
--jnn-editor-title-size: 22px;
/* EDC-004 */
--jnn-editor-title-line: 1.3;
/* EDC-005 */
--jnn-editor-title-weight: 800;
/* EDC-006 */
--jnn-editor-meta-display: none;
/* EDC-007 */
--jnn-editor-gap: 18px;
/* EDC-008 */
--jnn-editor-image-ratio: 16 / 9;
/* EDC-009 */
--jnn-editor-image-hover-scale: 1.025;
/* EDC-010 */
--jnn-editor-transition: 0.28s;
/* EDC-011 */
--jnn-editor-bg: #ffffff;
/* EDC-012 */
--jnn-editor-border: #ececec;
/* EDC-013 */
--jnn-editor-card-border-width: 1px;
/* EDC-014 */
--jnn-editor-card-hover-lift: -4px;
/* EDC-015 */
--jnn-editor-card-hover-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
/* EDC-016 */
--jnn-edc-heading-size: 24px;
/* EDC-017 */
--jnn-edc-heading-weight: 800;
/* EDC-018 */
--jnn-edc-heading-line: 1.2;
/* EDC-019 */
--jnn-edc-heading-color: #111111;
/* EDC-020 */
--jnn-edc-heading-gap-bottom: 18px;
/* EDC-021 */
--jnn-edc-heading-pad-left: 18px;
/* EDC-022 */
--jnn-edc-heading-bar-width: 5px;
/* EDC-023 */
--jnn-edc-heading-bar-height: 28px;
/* EDC-024 */
--jnn-edc-heading-bar-radius: 10px;
/* EDC-025 */
--jnn-edc-heading-bar-color: var(--jnn-red);
/* EDC-026 */
--jnn-edc-title-size: 17px;
/* EDC-027 */
--jnn-edc-title-weight: 800;
/* EDC-028 */
--jnn-edc-title-line: 1.3;
/* EDC-029 */
--jnn-edc-title-color: #111111;
/* EDC-030 */
--jnn-edc-title-letter-spacing: 0px;
/* EDC-031 */
--jnn-edc-title-gap-bottom: 8px;
/* EDC-032 */
--jnn-edc-meta-display: none;
/* EDC-033 */
--jnn-edc-meta-size: 12px;
/* EDC-034 */
--jnn-edc-meta-gap: 6px;
/* EDC-035 */
--jnn-edc-excerpt-display: -webkit-box;
/* EDC-036 */
--jnn-edc-excerpt-size: 14px;
/* EDC-037 */
--jnn-edc-excerpt-line: 1.45;
/* EDC-038 */
--jnn-edc-excerpt-color: #555555;
/* EDC-039 */
--jnn-edc-excerpt-lines: 2;
/* EDC-040 */
--jnn-edc-excerpt-gap-top: 0px;
/* EDC-041 */
--jnn-edc-image-ratio: 16 / 9;
/* EDC-042 */
--jnn-edc-image-radius: 8px;
/* EDC-043 */
--jnn-edc-image-brightness: 1;
/* EDC-044 */
--jnn-edc-image-contrast: 1;
/* EDC-045 */
--jnn-edc-image-saturate: 1;
/* EDC-046 */
--jnn-edc-image-position-x: 50%;
/* EDC-047 */
--jnn-edc-image-position-y: 50%;
/* EDC-048 */
--jnn-edc-image-transition: 0.30s;
/* EDC-049 */
--jnn-edc-card-bg: #ffffff;
/* EDC-050 */
--jnn-edc-card-border: #ececec;
/* EDC-051 */
--jnn-edc-card-border-width: 1px;
/* EDC-052 */
--jnn-edc-card-radius: 8px;
/* EDC-053 */
--jnn-edc-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
/* EDC-054 */
--jnn-edc-card-padding: 0px;
/* EDC-055 */
--jnn-edc-content-padding: 12px;
/* EDC-056 */
--jnn-edc-card-gap: 18px;
/* EDC-057 */
--jnn-edc-hover-lift: -3px;
/* EDC-058 */
--jnn-edc-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
/* EDC-059 */
--jnn-edc-hover-image-scale: 1.03;
/* EDC-060 */
--jnn-edc-hover-title-color: var(--jnn-red);
/* EDC-061 */
--jnn-edc-hover-transition: 0.30s;
/* EDC-062 */
--jnn-edc-grid-min: 240px;
/* EDC-063 */
--jnn-edc-mobile-columns: 1;
/* EDC-064 */
--jnn-edc-tablet-columns: 2;
/* EDC-065 */
--jnn-edc-desktop-columns: 3;
/* EDC-066 */
--jnn-edc-extension-min-width: 0px;
/* EDC-067 */
--jnn-edc-extension-image-width: 100%;
/* EDC-068 */
--jnn-edc-extension-image-height: auto;
/* EDC-069 */
--jnn-edc-extension-overflow: hidden;
/* EDC-070 */
--jnn-edc-category-size: 13px;
/* EDC-071 */
--jnn-edc-category-weight: 700;
/* EDC-072 */
--jnn-edc-category-color: var(--jnn-red);
/* EDC-073 */
--jnn-edc-category-gap-bottom: 10px;
/* EDC-074 */
--jnn-edc-category-dot-size: 7px;
/* EDC-075 */
--jnn-edc-category-dot-gap: 8px;
/* EDC-076 */
--jnn-edc-category-line: 1;
/* =====================================================
CONTROL 12 HOME STORY / CATEGORY HEADING
===================================================== */
/* HOM-001 */
--jnn-card-meta-display: none;
/* HOM-002 */
--jnn-card-gap: 18px;
/* HOM-003 */
--jnn-card-image-ratio: 16 / 9;
/* HOM-004 */
--jnn-card-radius: 4px;
/* HOM-005 */
--jnn-card-title-size: 18px;
/* HOM-006 */
--jnn-card-title-line: 1.35;
/* HOM-007 */
--jnn-card-title-weight: 700;
/* HOM-008 */
--jnn-card-title-gap: 6px;
/* HOM-009 */
--jnn-card-excerpt-size: 14px;
/* HOM-010 */
--jnn-card-excerpt-line: 1.45;
/* HOM-011 */
--jnn-card-image-scale: 1;
/* HOM-012 */
--jnn-card-image-hover-scale: 1.025;
/* HOM-013 */
--jnn-card-transition: 0.28s;
/* HOM-014 */
--jnn-home-section-underline-width: 100%;
/* HOM-015 */
--jnn-home-section-underline-height: 3px;
/* HOM-016 */
--jnn-home-section-line-color: #dedede;
/* HOM-017 */
--jnn-home-section-title-size: 24px;
/* HOM-018 */
--jnn-home-section-title-weight: 800;
/* HOM-019 */
--jnn-home-section-title-line: 1.2;
/* HOM-020 */
--jnn-home-section-title-color: var(--jnn-red);
/* HOM-021 */
--jnn-home-section-title-gap-bottom: 18px;
/* HOM-022 */
--jnn-home-section-title-pad-left: 18px;
/* HOM-023 */
--jnn-home-section-title-pad-bottom: 10px;
/* HOM-024 */
--jnn-home-section-bar-width: 5px;
/* HOM-025 */
--jnn-home-section-bar-height: calc(100% - var(--jnn-home-section-title-pad-bottom));
/* HOM-026 */
--jnn-home-section-bar-radius: 10px;
/* HOM-027 */
--jnn-home-card-category-display: none;
/* =====================================================
CONTROL 13 UNIVERSAL HEADING ENGINE 2.0
Variable prefix: HDG (Header keeps HDR)
===================================================== */
/* HDG-001 */
--jnn-home-heading-size: 24px;
/* HDG-002 */
--jnn-home-heading-weight: 800;
/* HDG-003 */
--jnn-home-heading-line: 1.2;
/* HDG-004 */
--jnn-home-heading-color: var(--jnn-red);
/* HDG-005 */
--jnn-home-heading-gap-bottom: 16px;
/* HDG-006 */
--jnn-home-heading-pad-left: 18px;
/* HDG-007 */
--jnn-home-heading-pad-bottom: 9px;
/* HDG-008 */
--jnn-home-heading-shift-x: 0px;
/* HDG-009 */
--jnn-home-heading-shift-y: 0px;
/* HDG-010 */
--jnn-trending-heading-shift-y: 0px;
/* HDG-011 */
--jnn-home-heading-bar-width: 5px;
/* HDG-012 */
--jnn-home-heading-bar-radius: 999px;
/* HDG-013 */
--jnn-home-heading-bar-top: 5px;
/* HDG-014 */
--jnn-home-heading-bar-bottom: var(--jnn-home-heading-pad-bottom);
/* HDG-015 */
--jnn-home-heading-bar-shift-x: 7px;
/* HDG-016 */
--jnn-trending-bar-top: 0px;
/* HDG-017 */
--jnn-trending-bar-bottom: var(--jnn-home-heading-pad-bottom);
/* HDG-018 */
--jnn-trending-bar-shift-x: 0px;
/* HDG-019 */
--jnn-trending-bar-shift-y: 6px;
/* HDG-020 */
--jnn-home-heading-underline-height: 3px;
/* HDG-021 */
--jnn-home-heading-divider-color: #dedede;
/* HDG-022 */
--jnn-home-heading-underline-left: 14px;
/* HDG-023 */
--jnn-home-heading-underline-bottom: 7px;
/* HDG-024 */
--jnn-home-heading-underline-width: 90%;
/* HDG-025 */
--jnn-trending-underline-bottom: 0px;
/* HDG-026 */
--jnn-heading-size-desktop: var(--jnn-home-heading-size);
/* HDG-027 */
--jnn-heading-size-laptop: var(--jnn-home-heading-size);
/* HDG-028 */
--jnn-heading-size-tablet: 22px;
/* HDG-029 */
--jnn-heading-size-mobile: 21px;
/* HDG-030 */
--jnn-heading-size-small-mobile: 19px;
/* HDG-031 */
--jnn-heading-gap-desktop: var(--jnn-home-heading-gap-bottom);
/* HDG-032 */
--jnn-heading-gap-tablet: 14px;
/* HDG-033 */
--jnn-heading-gap-mobile: 12px;
/* HDG-034 */
--jnn-heading-pad-left-tablet: 16px;
/* HDG-035 */
--jnn-heading-pad-left-mobile: 15px;
/* HDG-036 */
--jnn-heading-pad-bottom-tablet: 8px;
/* HDG-037 */
--jnn-heading-pad-bottom-mobile: 7px;
/* HDG-038 */
--jnn-heading-bar-width-tablet: 5px;
/* HDG-039 */
--jnn-heading-bar-width-mobile: 4px;
/* HDG-040 */
--jnn-heading-underline-height-tablet: 3px;
/* HDG-041 */
--jnn-heading-underline-height-mobile: 2px;
/* HDG-042 */
--jnn-section-title-box-width: 68%;
/* HDG-043 */
--jnn-section-title-box-width-mobile: 70%;
/* HDG-044 */
--jnn-section-title-box-height: 52px;
/* HDG-045 */
--jnn-section-title-box-bg: #f5f5f5;
/* HDG-046 */
--jnn-section-title-box-radius: 4px;
/* HDG-047 */
--jnn-section-title-box-pad-x: 12px;
/* HDG-048 */
--jnn-section-title-box-pad-y: 8px;
/* HDG-049 */
--jnn-section-title-bar-width: 5px;
/* HDG-050 */
--jnn-section-title-bar-gap: 10px;
/* HDG-051 */
--jnn-section-title-bar-left: 0px;
/* HDG-052 */
--jnn-section-title-bar-top: 5px;
/* HDG-053 */
--jnn-section-title-bar-bottom: 5px;
/* HDG-054 */
--jnn-section-title-bar-radius: 6px;
/* HDG-055 */
--jnn-section-title-underline-width: calc(100% - var(--jnn-section-title-bar-width) - var(--jnn-section-title-line-gap));
/* HDG-056 */
--jnn-section-title-underline-height: 3px;
/* HDG-057 */
--jnn-section-title-underline-left: calc(var(--jnn-section-title-bar-width) + var(--jnn-section-title-line-gap));
/* HDG-058 */
--jnn-section-title-underline-bottom: 0px;
/* HDG-059 */
--jnn-section-title-underline-radius: 4px;
/* HDG-060 */
--jnn-section-title-line-color: var(--jnn-red);
/* HDG-061 */
--jnn-section-title-view-gap: 10px;
/* HDG-062 */
--jnn-section-title-content-gap: 7px;
/* HDG-063 */
--jnn-section-title-divider-gap: 5px;
/* HDG-064 */
--jnn-section-title-divider-height: 1px;
/* HDG-065 */
--jnn-section-title-divider-color: #dddddd;
/* HDG-066 */
--jnn-section-view-all-space: 110px;
/* HDG-067 */
--jnn-section-view-all-space-mobile: 90px;
/* HDG-068 */
--jnn-section-view-all-size-mobile: 13px;
/* HDG-069 */
--jnn-section-title-line-gap: 5px;
/* HDG-070 */
--jnn-video-title-box-height: 46px;
/* HDG-071 */
--jnn-video-title-box-bg: #f3f3f3;
/* HDG-072 */
--jnn-video-title-bar-width: 6px;
/* HDG-073 */
--jnn-video-title-bar-color: #e00000;
/* HDG-074 */
--jnn-video-title-line-height: 2px;
/* HDG-075 */
--jnn-video-title-line-gap-x: 6px;
/* HDG-076 */
--jnn-video-title-line-offset-y: 6px;
/* HDG-077 */
--jnn-video-view-all-size: 11px;
/* HDG-078 */
--jnn-video-view-all-offset-y: 5px;
/* HDG-079 */
--jnn-video-title-radius: 2px;
/* =====================================================
CONTROL 14 CATEGORY BADGE ENGINE
===================================================== */
/* CBG-001 */
--jnn-show-category: inline-flex;
/* CBG-002 */
--jnn-category-meta-display: none;
/* CBG-003 */
--jnn-cbg-hero-size-tablet: 12px;
/* CBG-004 */
--jnn-cbg-hero-size-mobile: 11px;
/* CBG-005 */
--jnn-cbg-hero-gap-mobile: 5px;
/* CBG-006 */
--jnn-cbg-edc-size-tablet: 12px;
/* CBG-007 */
--jnn-cbg-edc-size-mobile: 11px;
/* CBG-008 */
--jnn-cbg-edc-gap-mobile: 6px;
/* CBG-009 */
--jnn-cbg-dot-size-tablet: 6px;
/* CBG-010 */
--jnn-cbg-dot-size-mobile: 5px;
/* CBG-011 */
--jnn-cbg-line-tablet: 1.1;
/* CBG-012 */
--jnn-cbg-line-mobile: 1.15;
/* CBG-013 */
--jnn-cbg-wrap-mobile: wrap;
/* CBG-014 */
--jnn-cbg-max-width-mobile: 100%;
/* =====================================================
CONTROL 15 FRESH WIDGET ENGINE
WDG-001 WIDGET MASTER CONTROL
===================================================== */
/* WDG-001A Widget Box & Spacing */
/* WDG-003 */
--jnn-widget-gap: 20px;
/* WDG-001B Widget Typography */
/* WDG-004 */
--jnn-widget-title-size: 20px;
/* WDG-005 */
--jnn-widget-title-line: 1.3;
/* WDG-004A Widget Title Typography */
/* WDG-006 */
--jnn-widget-title-weight: 700;
/* WDG-007 */
--jnn-widget-title-color: var(--jnn-text);
/* WDG-008 */
--jnn-widget-title-letter: 0;
/* WDG-009 */
--jnn-widget-title-transform: none;
/* WDG-004B Widget Subtitle Typography */
/* WDG-010 */
--jnn-widget-subtitle-size: 15px;
/* WDG-011 */
--jnn-widget-subtitle-weight: 500;
/* WDG-012 */
--jnn-widget-subtitle-line: 1.4;
/* WDG-013 */
--jnn-widget-subtitle-color: var(--jnn-text);
/* WDG-004C Widget Meta Typography */
/* WDG-014 */
--jnn-widget-meta-size: 13px;
/* WDG-015 */
--jnn-widget-meta-weight: 500;
/* WDG-016 */
--jnn-widget-meta-line: 1.35;
/* WDG-017 */
--jnn-widget-meta-color: #666;
/* WDG-004D Widget Date Typography */
/* WDG-018 */
--jnn-widget-date-size: 13px;
/* WDG-019 */
--jnn-widget-date-weight: 500;
/* WDG-020 */
--jnn-widget-date-color: #666;
/* WDG-004E Widget Author Typography */
/* WDG-021 */
--jnn-widget-author-size: 13px;
/* WDG-022 */
--jnn-widget-author-weight: 500;
/* WDG-023 */
--jnn-widget-author-color: #666;
/* WDG-004F Widget Excerpt Typography */
/* WDG-024 */
--jnn-widget-excerpt-size: 15px;
/* WDG-025 */
--jnn-widget-excerpt-weight: 400;
/* WDG-026 */
--jnn-widget-excerpt-line: 1.55;
/* WDG-027 */
--jnn-widget-excerpt-color: var(--jnn-text);
/* WDG-004G Widget Read More Typography */
/* WDG-028 */
--jnn-widget-readmore-size: 14px;
/* WDG-029 */
--jnn-widget-readmore-weight: 700;
/* WDG-030 */
--jnn-widget-readmore-line: 1.2;
/* WDG-031 */
--jnn-widget-readmore-color: var(--jnn-red);
/* WDG-004H Widget Counter Typography */
/* WDG-032 */
--jnn-widget-counter-size: 16px;
/* WDG-033 */
--jnn-widget-counter-weight: 800;
/* WDG-034 */
--jnn-widget-counter-line: 1;
/* WDG-004I Widget Label Typography */
/* WDG-035 */
--jnn-widget-label-size: 12px;
/* WDG-036 */
--jnn-widget-label-weight: 700;
/* WDG-037 */
--jnn-widget-label-line: 1.2;
/* WDG-038 */
--jnn-widget-label-transform: none;
/* WDG-005A Widget Outer Spacing */
/* WDG-039 */
--jnn-widget-margin-top: 0px;
/* WDG-040 */
--jnn-widget-margin-right: 0px;
/* WDG-041 */
--jnn-widget-margin-bottom: var(--jnn-home-section-gap);
/* WDG-042 */
--jnn-widget-margin-left: 0px;
/* WDG-005B Widget Inner Padding */
/* WDG-043 */
--jnn-widget-pad-top: var(--jnn-card-pad-top);
/* WDG-044 */
--jnn-widget-pad-right: var(--jnn-card-pad-right);
/* WDG-045 */
--jnn-widget-pad-bottom: var(--jnn-card-pad-bottom);
/* WDG-046 */
--jnn-widget-pad-left: var(--jnn-card-pad-left);
/* WDG-005C Widget Header Spacing */
/* WDG-047 */
--jnn-widget-header-margin-bottom: 14px;
/* WDG-048 */
--jnn-widget-header-gap: 12px;
/* WDG-005D Widget Body Spacing */
/* WDG-049 */
--jnn-widget-body-gap: var(--jnn-widget-gap);
/* WDG-050 */
--jnn-widget-item-gap: 16px;
/* WDG-051 */
--jnn-widget-row-gap: 16px;
/* WDG-052 */
--jnn-widget-column-gap: 16px;
/* WDG-005E Widget Footer Spacing */
/* WDG-053 */
--jnn-widget-footer-margin-top: 14px;
/* WDG-054 */
--jnn-widget-footer-gap: 10px;
/* WDG-005F Widget Text Spacing */
/* WDG-055 */
--jnn-widget-title-gap-bottom: 8px;
/* WDG-056 */
--jnn-widget-meta-gap-bottom: 8px;
/* WDG-057 */
--jnn-widget-excerpt-gap-top: 8px;
/* WDG-058 */
--jnn-widget-readmore-gap-top: 10px;
/* WDG-005G Widget Area Heading Flow */
/* WDG-059 */
--jnn-widget-heading-white-space: nowrap;
/* WDG-060 */
--jnn-widget-heading-flex-shrink: 0;
/* WDG-061 */
--jnn-widget-heading-max-width: 100%;
/* WDG-062 */
--jnn-widget-heading-overflow: visible;
/* WDG-063 */
--jnn-widget-area-heading-flow-active: 1;
/* WDG-006A Widget Image Baseline */
/* WDG-064 */
--jnn-widget-image-display: block;
/* WDG-065 */
--jnn-widget-image-width: 100%;
/* WDG-066 */
--jnn-widget-image-max-width: 100%;
/* WDG-067 */
--jnn-widget-image-height: auto;
/* WDG-006B Widget Image Fit */
/* WDG-068 */
--jnn-widget-image-fit: cover;
/* WDG-069 */
--jnn-widget-image-position: center center;
/* WDG-006C Widget Image Frame */
/* WDG-070 */
--jnn-widget-image-radius: var(--jnn-card-radius);
/* WDG-071 */
--jnn-widget-image-overflow: hidden;
/* WDG-006D Explicit Thumbnail Ratio */
/* WDG-072 */
--jnn-widget-thumb-ratio: 16 / 9;
/* WDG-073 */
--jnn-widget-thumb-fit: cover;
/* WDG-006E Explicit Square Ratio */
/* WDG-074 */
--jnn-widget-square-ratio: 1 / 1;
/* WDG-006F Explicit Portrait Ratio */
/* WDG-075 */
--jnn-widget-portrait-ratio: 4 / 5;
/* WDG-006G Image Transition */
/* WDG-076 */
--jnn-widget-image-transition: 240ms ease;
/* WDG-077 */
--jnn-widget-image-hover-scale: 1.02;
/* WDG-006H Lazy-Load Safety */
/* WDG-078 */
--jnn-widget-image-lazy-opacity: 1;
/* WDG-007A Responsive Widget Breakpoints & Columns */
/* WDG-079 */
--jnn-widget-columns-desktop: 3;
/* WDG-080 */
--jnn-widget-columns-laptop: 2;
/* WDG-081 */
--jnn-widget-columns-tablet: 2;
/* WDG-082 */
--jnn-widget-columns-mobile: 1;
/* WDG-083 */
--jnn-widget-columns-small-mobile: 1;
/* WDG-007B Responsive Grid Minimums */
/* WDG-084 */
--jnn-widget-grid-min-desktop: 260px;
/* WDG-085 */
--jnn-widget-grid-min-laptop: 230px;
/* WDG-086 */
--jnn-widget-grid-min-tablet: 210px;
/* WDG-087 */
--jnn-widget-grid-min-mobile: 0px;
/* WDG-007C Responsive Gaps */
/* WDG-088 */
--jnn-widget-gap-desktop: var(--jnn-widget-gap);
/* WDG-089 */
--jnn-widget-gap-laptop: 18px;
/* WDG-090 */
--jnn-widget-gap-tablet: 16px;
/* WDG-091 */
--jnn-widget-gap-mobile: 14px;
/* WDG-092 */
--jnn-widget-gap-small-mobile: 12px;
/* WDG-007D Responsive Row / Column Gaps */
/* WDG-093 */
--jnn-widget-row-gap-desktop: var(--jnn-widget-row-gap);
/* WDG-094 */
--jnn-widget-column-gap-desktop: var(--jnn-widget-column-gap);
/* WDG-095 */
--jnn-widget-row-gap-tablet: 15px;
/* WDG-096 */
--jnn-widget-column-gap-tablet: 15px;
/* WDG-097 */
--jnn-widget-row-gap-mobile: 14px;
/* WDG-098 */
--jnn-widget-column-gap-mobile: 0px;
/* WDG-099 */
--jnn-widget-row-gap-small-mobile: 12px;
/* WDG-007E Responsive Item Flow */
/* WDG-100 */
--jnn-widget-flex-direction-desktop: row;
/* WDG-101 */
--jnn-widget-flex-direction-tablet: row;
/* WDG-102 */
--jnn-widget-flex-direction-mobile: column;
/* WDG-103 */
--jnn-widget-flex-wrap-desktop: wrap;
/* WDG-104 */
--jnn-widget-flex-wrap-tablet: wrap;
/* WDG-105 */
--jnn-widget-flex-wrap-mobile: nowrap;
/* WDG-106 */
--jnn-widget-item-min-width: 0px;
/* WDG-107 */
--jnn-widget-item-max-width: 100%;
/* WDG-007F Responsive Width & Overflow Safety */
/* WDG-108 */
--jnn-widget-responsive-width: 100%;
/* WDG-109 */
--jnn-widget-responsive-max-width: 100%;
/* WDG-110 */
--jnn-widget-responsive-overflow-x: clip;
/* WDG-111 */
--jnn-widget-responsive-overflow-y: visible;
/* WDG-112 */
--jnn-widget-mobile-stack-order: initial;
/* WDG-007A Responsive Fine Tuning */
/* WDG-113 */
--jnn-widget-fine-card-gap-desktop: 18px;
/* WDG-114 */
--jnn-widget-fine-card-gap-tablet: 16px;
/* WDG-115 */
--jnn-widget-fine-card-gap-mobile: 14px;
/* WDG-116 */
--jnn-widget-fine-card-gap-small-mobile: 12px;
/* WDG-117 */
--jnn-widget-split-image-width-desktop: 42%;
/* WDG-118 */
--jnn-widget-split-content-width-desktop: 58%;
/* WDG-119 */
--jnn-widget-split-image-width-tablet: 40%;
/* WDG-120 */
--jnn-widget-split-content-width-tablet: 60%;
/* WDG-121 */
--jnn-widget-split-image-width-mobile: 38%;
/* WDG-122 */
--jnn-widget-split-content-width-mobile: 62%;
/* WDG-123 */
--jnn-widget-split-gap-desktop: 18px;
/* WDG-124 */
--jnn-widget-split-gap-tablet: 15px;
/* WDG-125 */
--jnn-widget-split-gap-mobile: 12px;
/* WDG-126 */
--jnn-widget-split-gap-small-mobile: 10px;
/* WDG-127 */
--jnn-widget-card-equal-height: stretch;
/* WDG-128 */
--jnn-widget-card-content-grow: 1;
/* WDG-129 */
--jnn-widget-section-space-desktop: 24px;
/* WDG-130 */
--jnn-widget-section-space-tablet: 20px;
/* WDG-131 */
--jnn-widget-section-space-mobile: 18px;
/* WDG-132 */
--jnn-widget-section-space-small-mobile: 16px;
/* WDG-133 */
--jnn-widget-ad-pad-desktop: 0px;
/* WDG-134 */
--jnn-widget-ad-pad-tablet: 0px;
/* WDG-135 */
--jnn-widget-ad-pad-mobile: 0px;
/* WDG-136 */
--jnn-widget-fine-overflow-x: clip;
/* =====================================================
WDG-008 WIDGET INTERACTION ENGINE
Explicit hooks only; no layout/typography/image ownership
===================================================== */
/* WDG-137 */
--jnn-widget-interaction-transition-duration: 220ms;
/* WDG-138 */
--jnn-widget-interaction-transition-easing: ease;
/* WDG-139 */
--jnn-widget-interaction-hover-lift: -2px;
/* WDG-140 */
--jnn-widget-interaction-active-lift: 0px;
/* WDG-141 */
--jnn-widget-interaction-hover-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
/* WDG-142 */
--jnn-widget-interaction-focus-shadow: 0 0 0 3px rgba(217, 0, 0, 0.20);
/* WDG-143 */
--jnn-widget-interaction-focus-color: var(--jnn-red);
/* WDG-144 */
--jnn-widget-interaction-active-opacity: 0.96;
/* WDG-145 */
--jnn-widget-interaction-link-hover-color: var(--jnn-red);
/* WDG-146 */
--jnn-widget-interaction-cursor: pointer;
/* WDG-147 */
--jnn-widget-interaction-disabled-opacity: 0.55;
/* WDG-148 */
--jnn-widget-interaction-disabled-cursor: not-allowed;
/* WDG-149 */
--jnn-widget-interaction-focus-offset: 3px;
/* WDG-150 */
--jnn-widget-interaction-focus-width: 2px;
/* WDG-151 */
--jnn-widget-interaction-focus-style: solid;
/* WDG-152 */
--jnn-widget-interaction-card-transform-origin: center center;
/* WDG-153 */
--jnn-widget-interaction-media-scale: 1.02;
/* WDG-154 */
--jnn-widget-interaction-feedback-scale: 0.995;
/* WDG-155 */
--jnn-widget-interaction-tap-highlight: rgba(217, 0, 0, 0.12);
/* WDG-156 */
--jnn-widget-interaction-reduced-motion-duration: 1ms;
/* =====================================================
WDG-009 WIDGET STATE ENGINE
Explicit hooks only; no layout/typography/image ownership
===================================================== */
/* WDG-157 */
--jnn-widget-state-min-height: 120px;
/* WDG-158 */
--jnn-widget-state-padding-y: 24px;
/* WDG-159 */
--jnn-widget-state-padding-x: 18px;
/* WDG-160 */
--jnn-widget-state-gap: 12px;
/* WDG-161 */
--jnn-widget-state-radius: var(--jnn-card-radius);
/* WDG-162 */
--jnn-widget-state-border-color: var(--jnn-border);
/* WDG-163 */
--jnn-widget-state-border-width: 1px;
/* WDG-164 */
--jnn-widget-state-background: #fafafa;
/* WDG-165 */
--jnn-widget-state-color: #555555;
/* WDG-166 */
--jnn-widget-state-title-color: var(--jnn-text);
/* WDG-167 */
--jnn-widget-state-icon-size: 28px;
/* WDG-168 */
--jnn-widget-state-spinner-size: 28px;
/* WDG-169 */
--jnn-widget-state-spinner-width: 3px;
/* WDG-170 */
--jnn-widget-state-spinner-track: #e6e6e6;
/* WDG-171 */
--jnn-widget-state-spinner-color: var(--jnn-red);
/* WDG-172 */
--jnn-widget-state-spinner-duration: 800ms;
/* WDG-173 */
--jnn-widget-state-skeleton-base: #ececec;
/* WDG-174 */
--jnn-widget-state-skeleton-highlight: #f7f7f7;
/* WDG-175 */
--jnn-widget-state-skeleton-duration: 1.2s;
/* WDG-176 */
--jnn-widget-state-skeleton-radius: 4px;
/* WDG-177 */
--jnn-widget-state-skeleton-line-height: 14px;
/* WDG-178 */
--jnn-widget-state-skeleton-line-gap: 10px;
/* WDG-179 */
--jnn-widget-state-error-color: #b00020;
/* WDG-180 */
--jnn-widget-state-success-color: #187a35;
/* WDG-181 */
--jnn-widget-state-warning-color: #8a5a00;
/* WDG-182 */
--jnn-widget-state-muted-opacity: 0.72;
/* WDG-183 */
--jnn-widget-state-hidden-display: none;
/* WDG-184 */
--jnn-widget-state-reduced-motion-duration: 1ms;
/* =====================================================
WDG-010 WIDGET ACCESSIBILITY ENGINE
Explicit hooks only; no visual-layout ownership
===================================================== */
/* WDG-185 */
--jnn-widget-a11y-focus-color: var(--jnn-red);
/* WDG-186 */
--jnn-widget-a11y-focus-width: 2px;
/* WDG-187 */
--jnn-widget-a11y-focus-style: solid;
/* WDG-188 */
--jnn-widget-a11y-focus-offset: 3px;
/* WDG-189 */
--jnn-widget-a11y-focus-shadow: 0 0 0 3px rgba(217, 0, 0, 0.20);
/* WDG-190 */
--jnn-widget-a11y-sr-size: 1px;
/* WDG-191 */
--jnn-widget-a11y-sr-clip: rect(0, 0, 0, 0);
/* WDG-192 */
--jnn-widget-a11y-live-min-height: 1px;
/* WDG-193 */
--jnn-widget-a11y-disabled-opacity: 0.55;
/* WDG-194 */
--jnn-widget-a11y-disabled-cursor: not-allowed;
/* WDG-195 */
--jnn-widget-a11y-current-color: var(--jnn-red);
/* WDG-196 */
--jnn-widget-a11y-current-marker-width: 3px;
/* WDG-197 */
--jnn-widget-a11y-current-marker-gap: 8px;
/* WDG-198 */
--jnn-widget-a11y-forced-border: CanvasText;
/* WDG-199 */
--jnn-widget-a11y-forced-highlight: Highlight;
/* WDG-200 */
--jnn-widget-a11y-forced-highlight-text: HighlightText;
/* WDG-201 */
--jnn-widget-a11y-reduced-transparency-bg: #ffffff;
/* WDG-202 */
--jnn-widget-a11y-reduced-transparency-border: var(--jnn-border);
/* WDG-203 */
--jnn-widget-a11y-target-outline-gap: 2px;
/* WDG-204 */
--jnn-widget-a11y-engine-active: 1;
/* =====================================================
WDG-011 WIDGET PERFORMANCE ENGINE
Explicit hooks only; no visual-design ownership
===================================================== */
/* WDG-205 */
--jnn-widget-perf-content-visibility: auto;
/* WDG-206 */
--jnn-widget-perf-contain: layout paint style;
/* WDG-207 */
--jnn-widget-perf-intrinsic-block-size: 320px;
/* WDG-208 */
--jnn-widget-perf-intrinsic-inline-size: 100%;
/* WDG-209 */
--jnn-widget-perf-image-content-visibility: auto;
/* WDG-210 */
--jnn-widget-perf-media-contain: paint;
/* WDG-211 */
--jnn-widget-perf-paint-isolation: isolate;
/* WDG-212 */
--jnn-widget-perf-transform-backface: hidden;
/* WDG-213 */
--jnn-widget-perf-will-change: auto;
/* WDG-214 */
--jnn-widget-perf-animation-state: running;
/* WDG-215 */
--jnn-widget-perf-paused-animation-state: paused;
/* WDG-216 */
--jnn-widget-perf-lazy-min-height: 1px;
/* WDG-217 */
--jnn-widget-perf-placeholder-bg: transparent;
/* WDG-218 */
--jnn-widget-perf-transition-duration: 180ms;
/* WDG-219 */
--jnn-widget-perf-reduced-motion-duration: 1ms;
/* WDG-220 */
--jnn-widget-perf-mobile-intrinsic-block-size: 260px;
/* WDG-221 */
--jnn-widget-perf-small-mobile-intrinsic-block-size: 220px;
/* WDG-222 */
--jnn-widget-perf-engine-active: 1;
/* WDG-223 */
--jnn-widget-perf-debug-outline: none;
/* WDG-224 */
--jnn-widget-perf-box-sizing: border-box;
/* =====================================================
WDG-012 FINAL CONSOLIDATION / PRODUCTION LOCK
Fresh Widget Engine closure and freeze controls
===================================================== */
/* WDG-225 */
--jnn-widget-final-engine-version: "5.5.6-WDG-012";
/* WDG-226 */
--jnn-widget-final-lock-state: 1;
/* WDG-227 */
--jnn-widget-final-registry-state: 1;
/* WDG-228 */
--jnn-widget-final-compatibility-state: 1;
/* WDG-229 */
--jnn-widget-final-regression-state: 1;
/* WDG-230 */
--jnn-widget-final-production-state: 1;
/* WDG-231 */
--jnn-widget-final-extension-state: 0;
/* WDG-232 */
--jnn-widget-final-debug-state: 0;
/* WDG-233 */
--jnn-widget-final-safe-display: block;
/* WDG-234 */
--jnn-widget-final-safe-width: 100%;
/* WDG-235 */
--jnn-widget-final-safe-max-width: 100%;
/* WDG-236 */
--jnn-widget-final-safe-min-width: 0px;
/* WDG-237 */
--jnn-widget-final-safe-overflow-x: clip;
/* WDG-238 */
--jnn-widget-final-safe-overflow-y: visible;
/* WDG-239 */
--jnn-widget-final-box-sizing: border-box;
/* WDG-240 */
--jnn-widget-final-isolation: isolate;
/* WDG-241 */
--jnn-widget-final-reduced-motion-duration: 1ms;
/* WDG-242 */
--jnn-widget-final-forced-color-adjust: auto;
/* WDG-243 */
--jnn-widget-final-lock-outline: none;
/* WDG-244 */
--jnn-widget-final-engine-active: 1;
/* =====================================================
TARGETED VISUAL FIXES VIDEO / RELATED / AUTHOR / SHARE
===================================================== */
/* VDO-001 */
--jnn-video-story-title-size: 15px;
/* VDO-002 */
--jnn-video-story-title-line: 1.35;
/* VDO-003 */
--jnn-video-story-image-ratio: 16 / 9;
/* VDO-004 */
--jnn-video-story-author-display: none;
/* VDO-005 */
--jnn-video-story-image-width: 38%;
/* VDO-006 */
--jnn-video-story-image-height: 80px;
/* PST-065 */
--jnn-related-card-bg: #f1f1f1;
/* PST-066 */
--jnn-related-card-border-color: #d8d8d8;
/* PST-067 */
--jnn-post-author-color: #333333;
/* PST-068 */
--jnn-share-button-height: 25px;
/* PST-069 */
--jnn-share-button-pad-x: 8px;
/* PST-070 */
--jnn-share-button-font-size: 17px;
/* PST-071 */
--jnn-share-button-gap: 6px;
/* PST-072 */
--jnn-share-button-color: #ffd700;
/* PST-073 */
--jnn-related-headline-size: 16px;
/* PST-074 */
--jnn-related-headline-line: 1.35;
/* PST-075 */
--jnn-related-headline-weight: 700;
/* =====================================================
CONTROL 16 SIDEBAR ENGINE v5.5.8
Variable range SDB-001 through SDB-048
===================================================== */
/* SDB-001 */
--jnn-sidebar-gap: 20px;
/* SDB-004 */
--jnn-sidebar-width: 100%;
/* SDB-005 */
--jnn-sidebar-max-width: 100%;
/* SDB-006 */
--jnn-sidebar-min-width: 0px;
/* SDB-007 */
--jnn-sidebar-overflow-x: clip;
/* SDB-008 */
--jnn-sidebar-overflow-y: visible;
/* SDB-009 */
--jnn-sidebar-box-sizing: border-box;
/* SDB-010 */
--jnn-sidebar-align-self: start;
/* SDB-015 */
--jnn-sidebar-widget-margin-bottom: var(--jnn-sidebar-gap);
/* SDB-017 */
--jnn-sidebar-heading-size: 21px;
/* SDB-018 */
--jnn-sidebar-heading-weight: 800;
/* SDB-019 */
--jnn-sidebar-heading-line: 1.2;
/* SDB-020 */
--jnn-sidebar-heading-color: var(--jnn-text);
/* SDB-021 */
--jnn-sidebar-heading-pad-x: 14px;
/* SDB-022 */
--jnn-sidebar-heading-pad-y: 12px;
/* SDB-023 */
--jnn-sidebar-heading-gap-bottom: 0px;
/* SDB-024 */
--jnn-sidebar-heading-border-width: 4px;
/* SDB-025 */
--jnn-sidebar-heading-border-color: var(--jnn-red);
/* SDB-026 */
--jnn-sidebar-heading-bg: #fafafa;
/* SDB-027 */
--jnn-sidebar-body-pad-x: 14px;
/* SDB-028 */
--jnn-sidebar-body-pad-y: 14px;
/* SDB-029 */
--jnn-sidebar-item-gap: 14px;
/* SDB-030 */
--jnn-sidebar-item-divider: #eeeeee;
/* SDB-031 */
--jnn-sidebar-item-divider-width: 1px;
/* SDB-032 */
--jnn-sidebar-image-width: 96px;
/* SDB-033 */
--jnn-sidebar-image-ratio: 4 / 3;
/* SDB-034 */
--jnn-sidebar-image-radius: 5px;
/* SDB-035 */
--jnn-sidebar-image-fit: cover;
/* SDB-036 */
--jnn-sidebar-image-position: center center;
/* SDB-037 */
--jnn-sidebar-title-size: 16px;
/* SDB-038 */
--jnn-sidebar-title-weight: 700;
/* SDB-039 */
--jnn-sidebar-title-line: 1.35;
/* SDB-040 */
--jnn-sidebar-title-color: var(--jnn-text);
/* SDB-041 */
--jnn-sidebar-title-hover-color: var(--jnn-red);
/* SDB-042 */
--jnn-sidebar-sticky-top: 18px;
/* SDB-043 */
--jnn-sidebar-focus-color: var(--jnn-red);
/* SDB-044 */
--jnn-sidebar-focus-width: 2px;
/* SDB-045 */
--jnn-sidebar-focus-offset: 3px;
/* SDB-046 */
--jnn-sidebar-mobile-gap: 16px;
/* SDB-047 */
--jnn-sidebar-engine-version: "5.5.8F-SIDEBAR-HEADING-WIDTH";
/* SDB-048 */
--jnn-sidebar-engine-active: 1;
/* White card inner spacing single valid control set */
/* Sidebar heading box width control */
/* SDB-054 */
--jnn-sidebar-heading-width: 240px;
/* SDB-055 safety cap; normally do not edit */
--jnn-sidebar-heading-max-width: calc(100% - 92px);
/* SDB-056 RETIRED in v5.5.8F1
Width is now controlled only by SDB-054. */
/* =====================================================
CONTROL 17 CATEGORY PAGE
===================================================== */
/* CAT-001 */
--jnn-category-top-space: 12px;
/* CAT-002 */
--jnn-category-bottom-space: 16px;
/* CAT-003 */
--jnn-category-title-size: 52px;
/* CAT-004 */
--jnn-category-title-line: 1.15;
/* CAT-005 */
--jnn-category-card-gap: 28px;
/* CAT-006 */
--jnn-category-image-radius: 6px;
/* =====================================================
CONTROL 18 SINGLE POST ENGINE v5.5.9
Variable range PST-001 through PST-064
===================================================== */
/* Breadcrumb */
/* PST-001 */
--jnn-post-breadcrumb-size: 12px;
/* PST-002 */
--jnn-post-breadcrumb-line: 1.4;
/* PST-003 */
--jnn-post-breadcrumb-top: 8px;
/* PST-004 */
--jnn-post-breadcrumb-bottom: 8px;
/* Article shell */
/* PST-005 */
--jnn-post-shell-width: 100%;
/* PST-006 */
--jnn-post-shell-max-width: 100%;
/* Headline */
/* PST-011 */
--jnn-post-title-size: 44px;
/* PST-012 */
--jnn-post-title-weight: 800;
/* PST-013 */
--jnn-post-title-line: 1.18;
/* PST-014 */
--jnn-post-title-color: var(--jnn-text);
/* PST-015 */
--jnn-post-title-top-gap: 10px;
/* PST-016 */
--jnn-post-title-image-gap: 13px;
/* Meta */
/* PST-017 */
--jnn-post-meta-size: 13px;
/* PST-018 */
--jnn-post-meta-line: 1.4;
/* PST-019 */
--jnn-post-meta-top-gap: 10px;
/* PST-020 */
--jnn-post-meta-bottom-gap: 5px;
/* PST-021 */
--jnn-post-meta-item-gap: 6px;
/* PST-022 */
--jnn-post-author-display: inline-flex;
/* PST-023 */
--jnn-post-date-display: none;
/* PST-024 */
--jnn-post-comments-display: none;
/* Featured image */
/* PST-025 */
--jnn-post-image-width: 100%;
/* PST-026 */
--jnn-post-image-height: auto;
/* PST-027 */
--jnn-post-image-radius: 7px;
/* PST-028 */
--jnn-post-image-fit: cover;
/* PST-029 */
--jnn-post-image-reading-gap: 8px;
/* Reading time */
/* PST-030 */
--jnn-reading-display: inline-flex;
/* PST-031 */
--jnn-reading-font-size: 12px;
/* PST-032 */
--jnn-reading-font-weight: 700;
/* PST-033 */
--jnn-reading-line-height: 1.2;
/* PST-034 */
--jnn-reading-padding-y: 6px;
/* PST-035 */
--jnn-reading-padding-x: 11px;
/* PST-036 */
--jnn-reading-radius: 7px;
/* PST-037 */
--jnn-reading-inline-gap: 6px;
/* PST-038 */
--jnn-reading-bg: #f3f3f3;
/* PST-039 */
--jnn-reading-color: #222222;
/* PST-040 */
--jnn-reading-border: #e2e2e2;
/* PST-041 */
--jnn-reading-content-gap: 12px;
/* Article content */
/* PST-042 */
--jnn-post-content-size: 18px;
/* PST-043 */
--jnn-post-content-weight: 400;
/* PST-044 */
--jnn-post-content-line: 1.75;
/* PST-045 */
--jnn-post-content-color: #222222;
/* PST-046 */
--jnn-post-paragraph-gap: 1.15em;
/* PST-047 */
--jnn-post-h2-size: 30px;
/* PST-048 */
--jnn-post-h3-size: 25px;
/* PST-049 */
--jnn-post-h4-size: 21px;
/* PST-050 */
--jnn-post-heading-weight: 800;
/* PST-051 */
--jnn-post-heading-line: 1.28;
/* PST-052 */
--jnn-post-heading-top-gap: 1.15em;
/* PST-053 */
--jnn-post-heading-bottom-gap: 0.55em;
/* Rich content */
/* PST-054 */
--jnn-post-link-color: var(--jnn-red);
/* PST-055 */
--jnn-post-list-indent: 1.35em;
/* PST-056 */
--jnn-post-list-item-gap: 0.45em;
/* PST-057 */
--jnn-post-quote-border: 5px;
/* PST-058 */
--jnn-post-quote-bg: #fafafa;
/* PST-059 */
--jnn-post-quote-padding: 18px;
/* PST-060 */
--jnn-post-table-border: #dddddd;
/* PST-061 */
--jnn-post-table-cell-padding: 10px;
/* Responsive / release */
/* PST-062 */
--jnn-post-focus-color: var(--jnn-red);
/* PST-063 */
--jnn-post-engine-version: "5.5.9-SINGLE-POST";
/* PST-064 */
--jnn-post-engine-active: 1;
/* =====================================================
CONTROL 19 UNIVERSAL META
===================================================== */
/* MTA-001 */
--jnn-show-author: inline-flex;
/* MTA-002 */
--jnn-show-date: none;
/* MTA-003 */
--jnn-show-comment: none;
/* MTA-004 */
--jnn-show-reading-time: inline-flex;
/* =====================================================
CONTROL 20 UNIVERSAL SPACING
===================================================== */
/* SPC-001 */
--jnn-section-gap: var(--jnn-home-section-gap);
/* SPC-002 */
--jnn-section-title-gap: 14px;
/* SPC-003 */
--jnn-image-content-gap: 12px;
/* SPC-004 */
--jnn-paragraph-gap: 14px;
/* =====================================================
CONTROL 21 FOOTER
===================================================== */
/* FTR-001 */
--jnn-footer-top-gap: 28px;
/* FTR-002 */
--jnn-footer-pad-y: 28px;
/* FTR-003 */
--jnn-footer-pad-x: 20px;
/* FTR-004 */
--jnn-footer-title-size: 20px;
/* FTR-005 */
--jnn-footer-text-size: 14px;
/* =====================================================
CONTROL 22 UNIVERSAL CARD ENGINE TEST
===================================================== */
/* UCD-001 */
--jnn-card-bg: #ffffff;
/* UCD-002 */
--jnn-card-border-color: #e8e8e8;
/* UCD-003 */
--jnn-card-border-width: 1px;
/* UCD-004 */
--jnn-card-radius: 8px;
/* UCD-005 */
--jnn-card-shadow: 0 3px 14px rgba(0,0,0,.06);
/* UCD-006 */
--jnn-card-pad-top: 16px;
/* UCD-007 */
--jnn-card-pad-right: 10px;
/* UCD-008 */
--jnn-card-pad-bottom: 16px;
/* UCD-009 */
--jnn-card-pad-left: 10px;
/* UCD-010 */
--jnn-card-heading-gap: 12px;
/* UCD-011 */
--jnn-card-overflow: hidden;
/* UCD-012 */
--jnn-card-box-sizing: border-box;
/* UCD-013 */
--jnn-card-engine-version: "5.6.3-HOM-PROD";
/* UCD-014 */
--jnn-card-engine-active: 1;
/* UCD-015 LEGACY FALLBACK - no longer active homepage master */
--jnn-home-section-gap: 4px;
/* UCD-016 */
--jnn-home-item-bg: #fafafa;
/* UCD-017 */
--jnn-home-item-border-color: #e2e2e2;
/* UCD-018 */
--jnn-home-item-border-width: 1px;
/* UCD-019 */
--jnn-home-item-radius: 7px;
/* UCD-020 */
--jnn-home-item-pad-y: 8px;
/* UCD-021 */
--jnn-home-item-pad-x: 8px;
/* UCD-022 */
--jnn-home-item-gap: 5px;
/* UCD-023 DEPRECATED: advertisement spacing merged into UCD-015 */
/* =====================================================
UWF FUTURE-SAFE ASCENDOOR POST WIDGET TYPOGRAPHY
FRESH UNIQUE IDS: UWF-001 UWF-018
NO WIDTH / GAP / CARD / TITLE-BOX OWNERSHIP
===================================================== */
/* UWF-001 */ --jnn-uwf-grid-title-size: 21px;
/* UWF-002 */ --jnn-uwf-grid-title-size-mobile: 16px;
/* UWF-003 */ --jnn-uwf-grid-title-weight: 700;
/* UWF-004 */ --jnn-uwf-grid-title-line: 1.30;
/* UWF-005 */ --jnn-uwf-grid-meta-display: none;
/* UWF-006 */ --jnn-uwf-grid-summary-display: none;
/* UWF-007 */ --jnn-uwf-tile-title-size: 20px;
/* UWF-008 */ --jnn-uwf-tile-title-size-mobile: 18px;
/* UWF-009 */ --jnn-uwf-tile-title-weight: 700;
/* UWF-010 */ --jnn-uwf-tile-title-line: 1.30;
/* UWF-011 */ --jnn-uwf-tile-meta-display: none;
/* UWF-012 */ --jnn-uwf-tile-summary-display: none;
/* UWF-013 */ --jnn-uwf-list-title-size: 18px;
/* UWF-014 */ --jnn-uwf-list-title-size-mobile: 17px;
/* UWF-015 */ --jnn-uwf-list-title-weight: 700;
/* UWF-016 */ --jnn-uwf-list-title-line: 1.35;
/* UWF-017 */ --jnn-uwf-list-meta-display: none;
/* UWF-018 */ --jnn-uwf-list-summary-display: none;
/* UCD-024 */
--jnn-home-area-side-gap: 4px;
/* =====================================================
CONTROL 23 RESERVED / FUTURE
===================================================== */
/* RSV-001 */
--jnn-home-meta-display: none;
/* =====================================================
RSV-001 FUTURE EXTENSION ENGINE
Existing RSV-001 above is preserved exactly.
New extension controls begin at RSV-002.
===================================================== */
/* RSV-002 */
--jnn-rsv-extension-display: block;
/* RSV-003 */
--jnn-rsv-extension-width: 100%;
/* RSV-004 */
--jnn-rsv-extension-max-width: 100%;
/* RSV-005 */
--jnn-rsv-extension-min-width: 0px;
/* RSV-006 */
--jnn-rsv-extension-box-sizing: border-box;
/* RSV-007 */
--jnn-rsv-extension-overflow-x: clip;
/* RSV-008 */
--jnn-rsv-extension-overflow-y: visible;
/* RSV-009 */
--jnn-rsv-extension-isolation: isolate;
/* RSV-010 */
--jnn-rsv-extension-active: 1;
/* =====================================================
RSV-002 FUTURE MODULE ADAPTER ENGINE
New control range: RSV-011 through RSV-018
===================================================== */
/* RSV-011 */
--jnn-rsv-adapter-active: 1;
/* RSV-012 */
--jnn-rsv-adapter-display: block;
/* RSV-013 */
--jnn-rsv-adapter-width: 100%;
/* RSV-014 */
--jnn-rsv-adapter-max-width: 100%;
/* RSV-015 */
--jnn-rsv-adapter-min-width: 0px;
/* RSV-016 */
--jnn-rsv-adapter-box-sizing: border-box;
/* RSV-017 */
--jnn-rsv-adapter-overflow-x: clip;
/* RSV-018 */
--jnn-rsv-adapter-overflow-y: visible;
/* =====================================================
RSV-003 FUTURE MODULE LAYOUT SAFETY ENGINE
New control range: RSV-019 through RSV-027
===================================================== */
/* RSV-019 */
--jnn-rsv-layout-active: 1;
/* RSV-020 */
--jnn-rsv-layout-width: 100%;
/* RSV-021 */
--jnn-rsv-layout-max-width: 100%;
/* RSV-022 */
--jnn-rsv-layout-min-width: 0px;
/* RSV-023 */
--jnn-rsv-layout-box-sizing: border-box;
/* RSV-024 */
--jnn-rsv-layout-overflow-x: clip;
/* RSV-025 */
--jnn-rsv-layout-overflow-y: visible;
/* RSV-026 */
--jnn-rsv-layout-position: relative;
/* RSV-027 */
--jnn-rsv-layout-isolation: isolate;
/* =====================================================
RSV-004 FUTURE MODULE RESPONSIVE COMPATIBILITY ENGINE
New control range: RSV-028 through RSV-036
===================================================== */
/* RSV-028 */
--jnn-rsv-responsive-active: 1;
/* RSV-029 */
--jnn-rsv-responsive-width: 100%;
/* RSV-030 */
--jnn-rsv-responsive-max-width: 100%;
/* RSV-031 */
--jnn-rsv-responsive-min-width: 0px;
/* RSV-032 */
--jnn-rsv-responsive-overflow-x: clip;
/* RSV-033 */
--jnn-rsv-responsive-overflow-y: visible;
/* RSV-034 */
--jnn-rsv-responsive-box-sizing: border-box;
/* RSV-035 */
--jnn-rsv-responsive-flex-shrink: 1;
/* RSV-036 */
--jnn-rsv-responsive-min-inline-size: 0px;
/* =====================================================
RSV-005 FUTURE MODULE ACCESSIBILITY COMPATIBILITY ENGINE
New control range: RSV-037 through RSV-045
===================================================== */
/* RSV-037 */
--jnn-rsv-a11y-active: 1;
/* RSV-038 */
--jnn-rsv-a11y-focus-width: 2px;
/* RSV-039 */
--jnn-rsv-a11y-focus-style: solid;
/* RSV-040 */
--jnn-rsv-a11y-focus-color: var(--jnn-red);
/* RSV-041 */
--jnn-rsv-a11y-focus-offset: 3px;
/* RSV-042 */
--jnn-rsv-a11y-reduced-motion-duration: 1ms;
/* RSV-043 */
--jnn-rsv-a11y-forced-color-adjust: auto;
/* RSV-044 */
--jnn-rsv-a11y-forced-border-color: CanvasText;
/* RSV-045 */
--jnn-rsv-a11y-forced-link-color: LinkText;
/* =====================================================
RSV-006 FUTURE MODULE CONTENT SAFETY ENGINE
New control range: RSV-046 through RSV-054
===================================================== */
/* RSV-046 */
--jnn-rsv-content-active: 1;
/* RSV-047 */
--jnn-rsv-content-overflow-wrap: anywhere;
/* RSV-048 */
--jnn-rsv-content-word-break: normal;
/* RSV-049 */
--jnn-rsv-content-hyphens: auto;
/* RSV-050 */
--jnn-rsv-content-max-width: 100%;
/* RSV-051 */
--jnn-rsv-content-media-max-width: 100%;
/* RSV-052 */
--jnn-rsv-content-media-height: auto;
/* RSV-053 */
--jnn-rsv-content-table-width: 100%;
/* RSV-054 */
--jnn-rsv-content-table-overflow-x: auto;
/* =====================================================
RSV-007 FUTURE MODULE PERFORMANCE SAFETY ENGINE
New control range: RSV-055 through RSV-063
===================================================== */
/* RSV-055 */
--jnn-rsv-performance-active: 1;
/* RSV-056 */
--jnn-rsv-performance-contain: layout paint style;
/* RSV-057 */
--jnn-rsv-performance-content-visibility: auto;
/* RSV-058 */
--jnn-rsv-performance-intrinsic-size: auto 300px;
/* RSV-059 */
--jnn-rsv-performance-backface-visibility: hidden;
/* RSV-060 */
--jnn-rsv-performance-transform-style: flat;
/* RSV-061 */
--jnn-rsv-performance-will-change: auto;
/* RSV-062 */
--jnn-rsv-performance-overflow-anchor: auto;
/* RSV-063 */
--jnn-rsv-performance-pointer-events: auto;
/* =====================================================
RSV-008 FUTURE MODULE STATE & FALLBACK ENGINE
New control range: RSV-064 through RSV-072
===================================================== */
/* RSV-064 */
--jnn-rsv-state-active: 1;
/* RSV-065 */
--jnn-rsv-state-loading-display: block;
/* RSV-066 */
--jnn-rsv-state-empty-display: block;
/* RSV-067 */
--jnn-rsv-state-error-display: block;
/* RSV-068 */
--jnn-rsv-state-success-display: block;
/* RSV-069 */
--jnn-rsv-state-hidden-display: none;
/* RSV-070 */
--jnn-rsv-state-min-height: 0px;
/* RSV-071 */
--jnn-rsv-state-width: 100%;
/* RSV-072 */
--jnn-rsv-state-box-sizing: border-box;
/* =====================================================
RSV-009 FUTURE MODULE INTERACTION SAFETY ENGINE
New control range: RSV-073 through RSV-081
===================================================== */
/* RSV-073 */
--jnn-rsv-interaction-active: 1;
/* RSV-074 */
--jnn-rsv-interaction-cursor: pointer;
/* RSV-075 */
--jnn-rsv-interaction-tap-highlight: rgba(217, 0, 0, 0.12);
/* RSV-076 */
--jnn-rsv-interaction-transition-duration: 220ms;
/* RSV-077 */
--jnn-rsv-interaction-transition-easing: ease;
/* RSV-078 */
--jnn-rsv-interaction-active-opacity: 0.96;
/* RSV-079 */
--jnn-rsv-interaction-disabled-opacity: 0.55;
/* RSV-080 */
--jnn-rsv-interaction-disabled-cursor: not-allowed;
/* RSV-081 */
--jnn-rsv-interaction-touch-action: manipulation;
/* =====================================================
RSV-010 FINAL VALIDATION / RELEASE / PRODUCTION LOCK
New control range: RSV-082 through RSV-090
===================================================== */
/* RSV-082 */
--jnn-rsv-final-active: 1;
/* RSV-083 */
--jnn-rsv-final-regression-state: 1;
/* RSV-084 */
--jnn-rsv-final-compatibility-state: 1;
/* RSV-085 */
--jnn-rsv-final-accessibility-state: 1;
/* RSV-086 */
--jnn-rsv-final-performance-state: 1;
/* RSV-087 */
--jnn-rsv-final-production-state: 1;
/* RSV-088 */
--jnn-rsv-final-extension-state: 1;
/* RSV-089 */
--jnn-rsv-final-lock-state: 1;
/* RSV-090 */
--jnn-rsv-final-engine-version: "5.6.6-RSV-010";
/* =====================================================
CONTROL 24
FUTURE MODULE DEPLOYMENT ENGINE
JNN-FMD-001
New variable range: FMD-001 through FMD-012
===================================================== */
/* FMD-001 */
--jnn-fmd-active: 1;
/* FMD-002 */
--jnn-fmd-slot-display: block;
/* FMD-003 */
--jnn-fmd-slot-width: 100%;
/* FMD-004 */
--jnn-fmd-slot-max-width: 100%;
/* FMD-005 */
--jnn-fmd-slot-min-width: 0px;
/* FMD-006 */
--jnn-fmd-slot-box-sizing: border-box;
/* FMD-007 */
--jnn-fmd-slot-overflow-x: clip;
/* FMD-008 */
--jnn-fmd-slot-overflow-y: visible;
/* FMD-009 */
--jnn-fmd-slot-position: relative;
/* FMD-010 */
--jnn-fmd-slot-isolation: isolate;
/* FMD-011 */
--jnn-fmd-component-width: 100%;
/* FMD-012 */
--jnn-fmd-component-min-width: 0px;
/* =====================================================
FMD-002 SLOT REGISTRATION & ZONE BINDING ENGINE
New control range: FMD-013 through FMD-024
===================================================== */
/* FMD-013 */
--jnn-fmd-slot-registry-active: 1;
/* FMD-014 */
--jnn-fmd-zone-binding-active: 1;
/* FMD-015 */
--jnn-fmd-slot-order: 0;
/* FMD-016 */
--jnn-fmd-slot-flex-grow: 0;
/* FMD-017 */
--jnn-fmd-slot-flex-shrink: 1;
/* FMD-018 */
--jnn-fmd-slot-flex-basis: auto;
/* FMD-019 */
--jnn-fmd-zone-width: 100%;
/* FMD-020 */
--jnn-fmd-zone-max-width: 100%;
/* FMD-021 */
--jnn-fmd-zone-min-width: 0px;
/* FMD-022 */
--jnn-fmd-zone-box-sizing: border-box;
/* FMD-023 */
--jnn-fmd-zone-overflow-x: clip;
/* FMD-024 */
--jnn-fmd-zone-overflow-y: visible;
/* =====================================================
FMD-003 COMPONENT REGISTRATION & CAPABILITY BINDING ENGINE
New control range: FMD-025 through FMD-036
===================================================== */
/* FMD-025 */
--jnn-fmd-component-registry-active: 1;
/* FMD-026 */
--jnn-fmd-capability-binding-active: 1;
/* FMD-027 */
--jnn-fmd-component-display: block;
/* FMD-028 */
--jnn-fmd-component-max-width: 100%;
/* FMD-029 */
--jnn-fmd-component-box-sizing: border-box;
/* FMD-030 */
--jnn-fmd-component-overflow-x: clip;
/* FMD-031 */
--jnn-fmd-component-overflow-y: visible;
/* FMD-032 */
--jnn-fmd-component-position: relative;
/* FMD-033 */
--jnn-fmd-capability-layout: 0;
/* FMD-034 */
--jnn-fmd-capability-content: 0;
/* FMD-035 */
--jnn-fmd-capability-interaction: 0;
/* FMD-036 */
--jnn-fmd-capability-responsive: 0;
/* =====================================================
FMD-004 PLACEMENT & MOUNTING ENGINE
New control range: FMD-037 through FMD-048
===================================================== */
/* FMD-037 */
--jnn-fmd-mount-active: 1;
/* FMD-038 */
--jnn-fmd-mount-display: block;
/* FMD-039 */
--jnn-fmd-mount-width: 100%;
/* FMD-040 */
--jnn-fmd-mount-max-width: 100%;
/* FMD-041 */
--jnn-fmd-mount-min-width: 0px;
/* FMD-042 */
--jnn-fmd-mount-box-sizing: border-box;
/* FMD-043 */
--jnn-fmd-mount-position: relative;
/* FMD-044 */
--jnn-fmd-mount-overflow-x: clip;
/* FMD-045 */
--jnn-fmd-mount-overflow-y: visible;
/* FMD-046 */
--jnn-fmd-mount-order: 0;
/* FMD-047 */
--jnn-fmd-mount-flex-shrink: 1;
/* FMD-048 */
--jnn-fmd-mount-isolation: isolate;
/* =====================================================
FMD-005 DEPLOYMENT VALIDATION & COMPATIBILITY GATE
New control range: FMD-049 through FMD-060
===================================================== */
/* FMD-049 */
--jnn-fmd-validation-active: 1;
/* FMD-050 */
--jnn-fmd-validation-slot-state: 1;
/* FMD-051 */
--jnn-fmd-validation-zone-state: 1;
/* FMD-052 */
--jnn-fmd-validation-component-state: 1;
/* FMD-053 */
--jnn-fmd-validation-mount-state: 1;
/* FMD-054 */
--jnn-fmd-validation-layout-state: 1;
/* FMD-055 */
--jnn-fmd-validation-responsive-state: 1;
/* FMD-056 */
--jnn-fmd-validation-content-state: 1;
/* FMD-057 */
--jnn-fmd-validation-interaction-state: 1;
/* FMD-058 */
--jnn-fmd-validation-a11y-state: 1;
/* FMD-059 */
--jnn-fmd-validation-performance-state: 1;
/* FMD-060 */
--jnn-fmd-validation-production-state: 1;
/* =====================================================
FMD-006 DEPLOYMENT ROLLBACK & RECOVERY SAFETY ENGINE
New control range: FMD-061 through FMD-072
===================================================== */
/* FMD-061 */
--jnn-fmd-recovery-active: 1;
/* FMD-062 */
--jnn-fmd-recovery-ready-state: 1;
/* FMD-063 */
--jnn-fmd-recovery-fallback-state: 1;
/* FMD-064 */
--jnn-fmd-recovery-rollback-state: 1;
/* FMD-065 */
--jnn-fmd-recovery-slot-display: block;
/* FMD-066 */
--jnn-fmd-recovery-slot-width: 100%;
/* FMD-067 */
--jnn-fmd-recovery-slot-max-width: 100%;
/* FMD-068 */
--jnn-fmd-recovery-slot-min-width: 0px;
/* FMD-069 */
--jnn-fmd-recovery-box-sizing: border-box;
/* FMD-070 */
--jnn-fmd-recovery-overflow-x: clip;
/* FMD-071 */
--jnn-fmd-recovery-overflow-y: visible;
/* FMD-072 */
--jnn-fmd-recovery-isolation: isolate;
/* =====================================================
FMD-007 DEPLOYMENT LIFECYCLE & STATE ENGINE
New control range: FMD-073 through FMD-084
===================================================== */
/* FMD-073 */
--jnn-fmd-lifecycle-active: 1;
/* FMD-074 */
--jnn-fmd-lifecycle-registered-state: 1;
/* FMD-075 */
--jnn-fmd-lifecycle-mounted-state: 1;
/* FMD-076 */
--jnn-fmd-lifecycle-ready-state: 1;
/* FMD-077 */
--jnn-fmd-lifecycle-live-state: 1;
/* FMD-078 */
--jnn-fmd-lifecycle-paused-state: 1;
/* FMD-079 */
--jnn-fmd-lifecycle-retired-state: 1;
/* FMD-080 */
--jnn-fmd-lifecycle-failed-state: 1;
/* FMD-081 */
--jnn-fmd-lifecycle-display: block;
/* FMD-082 */
--jnn-fmd-lifecycle-width: 100%;
/* FMD-083 */
--jnn-fmd-lifecycle-min-width: 0px;
/* FMD-084 */
--jnn-fmd-lifecycle-box-sizing: border-box;
/* =====================================================
FMD-008 DEPLOYMENT VERSION & COMPATIBILITY ENGINE
New control range: FMD-085 through FMD-096
===================================================== */
/* FMD-085 */
--jnn-fmd-version-active: 1;
/* FMD-086 */
--jnn-fmd-version-schema-state: 1;
/* FMD-087 */
--jnn-fmd-version-framework-state: 1;
/* FMD-088 */
--jnn-fmd-version-component-state: 1;
/* FMD-089 */
--jnn-fmd-version-compatible-state: 1;
/* FMD-090 */
--jnn-fmd-version-legacy-state: 1;
/* FMD-091 */
--jnn-fmd-version-upgrade-state: 1;
/* FMD-092 */
--jnn-fmd-version-display: block;
/* FMD-093 */
--jnn-fmd-version-width: 100%;
/* FMD-094 */
--jnn-fmd-version-min-width: 0px;
/* FMD-095 */
--jnn-fmd-version-box-sizing: border-box;
/* FMD-096 */
--jnn-fmd-version-engine-id: "5.6.7-FMD-008";
/* =====================================================
FMD-009 DEPLOYMENT DEPENDENCY & OWNERSHIP ENGINE
New control range: FMD-097 through FMD-108
===================================================== */
/* FMD-097 */
--jnn-fmd-dependency-active: 1;
/* FMD-098 */
--jnn-fmd-dependency-slot-state: 1;
/* FMD-099 */
--jnn-fmd-dependency-zone-state: 1;
/* FMD-100 */
--jnn-fmd-dependency-component-state: 1;
/* FMD-101 */
--jnn-fmd-dependency-parent-state: 1;
/* FMD-102 */
--jnn-fmd-dependency-child-state: 1;
/* FMD-103 */
--jnn-fmd-ownership-active: 1;
/* FMD-104 */
--jnn-fmd-ownership-exclusive-state: 1;
/* FMD-105 */
--jnn-fmd-ownership-shared-state: 1;
/* FMD-106 */
--jnn-fmd-ownership-inherited-state: 1;
/* FMD-107 */
--jnn-fmd-dependency-compatible-state: 1;
/* FMD-108 */
--jnn-fmd-dependency-engine-id: "5.6.7-FMD-009";
/* =====================================================
FMD-010 FINAL VALIDATION / RELEASE / PRODUCTION LOCK
New control range: FMD-109 through FMD-120
===================================================== */
/* FMD-109 */
--jnn-fmd-final-validation-state: 1;
/* FMD-110 */
--jnn-fmd-final-index-state: 1;
/* FMD-111 */
--jnn-fmd-final-control-state: 1;
/* FMD-112 */
--jnn-fmd-final-registry-state: 1;
/* FMD-113 */
--jnn-fmd-final-slot-state: 1;
/* FMD-114 */
--jnn-fmd-final-zone-state: 1;
/* FMD-115 */
--jnn-fmd-final-component-state: 1;
/* FMD-116 */
--jnn-fmd-final-mount-state: 1;
/* FMD-117 */
--jnn-fmd-final-compatibility-state: 1;
/* FMD-118 */
--jnn-fmd-final-recovery-state: 1;
/* FMD-119 */
--jnn-fmd-final-production-lock: 1;
/* FMD-120 */
--jnn-fmd-final-engine-version: "5.6.7-FMD-010";
/* =====================================================
CONTROL 25
SBI-001 LIVE STRUCTURE MAPPING & SLOT BINDING ENGINE
New variable range: SBI-001 through SBI-012
===================================================== */
/* SBI-001 */
--jnn-sbi-active: 1;
/* SBI-002 */
--jnn-sbi-banner-main-state: 1;
/* SBI-003 */
--jnn-sbi-editorial-state: 1;
/* SBI-004 */
--jnn-sbi-featured-state: 1;
/* SBI-005 */
--jnn-sbi-ad-state: 1;
/* SBI-006 */
--jnn-sbi-grid-state: 1;
/* SBI-007 */
--jnn-sbi-primary-state: 1;
/* SBI-008 */
--jnn-sbi-secondary-state: 1;
/* SBI-009 */
--jnn-sbi-above-footer-state: 1;
/* SBI-010 */
--jnn-sbi-section-card-state: 1;
/* SBI-011 */
--jnn-sbi-structure-version: "5.6.8-SBI-001";
/* SBI-012 */
--jnn-sbi-binding-mode: structure;
/* =====================================================
SBI-002 BANNER & PRE-AD ZONE BINDING ENGINE
New variable range: SBI-013 through SBI-024
===================================================== */
/* SBI-013 */ --jnn-sbi-pre-ad-active: 1;
/* SBI-014 */ --jnn-sbi-pre-ad-banner-state: 1;
/* SBI-015 */ --jnn-sbi-pre-ad-editorial-state: 1;
/* SBI-016 */ --jnn-sbi-pre-ad-featured-state: 1;
/* SBI-017 */ --jnn-sbi-pre-ad-section-card-state: 1;
/* SBI-018 */ --jnn-sbi-pre-ad-zone-state: 1;
/* SBI-019 */ --jnn-sbi-pre-ad-chain-state: 1;
/* SBI-020 */ --jnn-sbi-pre-ad-fmd-state: 1;
/* SBI-021 */ --jnn-sbi-pre-ad-component-state: 1;
/* SBI-022 */ --jnn-sbi-pre-ad-slot-state: 1;
/* SBI-023 */ --jnn-sbi-pre-ad-binding-version: "5.6.8-SBI-002";
/* SBI-024 */ --jnn-sbi-pre-ad-binding-mode: structure;
/* =====================================================
SBI-003 ADVERTISEMENT BOUNDARY & TRANSITION BINDING ENGINE
New variable range: SBI-025 through SBI-036
===================================================== */
/* SBI-025 */
--jnn-sbi-ad-active: 1;
/* SBI-026 */
--jnn-sbi-ad-slot-state: 1;
/* SBI-027 */
--jnn-sbi-ad-zone-state: 1;
/* SBI-028 */
--jnn-sbi-ad-component-state: 1;
/* SBI-029 */
--jnn-sbi-ad-pre-boundary-state: 1;
/* SBI-030 */
--jnn-sbi-ad-post-boundary-state: 1;
/* SBI-031 */
--jnn-sbi-ad-transition-state: 1;
/* SBI-032 */
--jnn-sbi-ad-fmd-state: 1;
/* SBI-033 */
--jnn-sbi-ad-isolation-state: 1;
/* SBI-034 */
--jnn-sbi-ad-chain-state: 1;
/* SBI-035 */
--jnn-sbi-ad-binding-version: "5.6.8-SBI-003";
/* SBI-036 */
--jnn-sbi-ad-binding-mode: structure;
/* =====================================================
SBI-004 POST-AD GRID & WIDGET ZONE BINDING ENGINE
New variable range: SBI-037 through SBI-050
===================================================== */
/* SBI-037 */
--jnn-sbi-post-ad-active: 1;
/* SBI-038 */
--jnn-sbi-post-ad-grid-state: 1;
/* SBI-039 */
--jnn-sbi-post-ad-primary-state: 1;
/* SBI-040 */
--jnn-sbi-post-ad-secondary-state: 1;
/* SBI-041 */
--jnn-sbi-post-ad-above-footer-state: 1;
/* SBI-042 */
--jnn-sbi-post-ad-widget-state: 1;
/* SBI-043 */
--jnn-sbi-post-ad-slot-state: 1;
/* SBI-044 */
--jnn-sbi-post-ad-zone-state: 1;
/* SBI-045 */
--jnn-sbi-post-ad-component-state: 1;
/* SBI-046 */
--jnn-sbi-post-ad-chain-state: 1;
/* SBI-047 */
--jnn-sbi-post-ad-fmd-state: 1;
/* SBI-048 */
--jnn-sbi-post-ad-future-widget-state: 1;
/* SBI-049 */
--jnn-sbi-post-ad-binding-version: "5.6.8-SBI-004";
/* SBI-050 */
--jnn-sbi-post-ad-binding-mode: structure;
/* =====================================================
SBI-005 UNIVERSAL WIDGET AUTO-INHERITANCE
& ADAPTER BINDING ENGINE
New variable range: SBI-051 through SBI-064
===================================================== */
/* SBI-051 */ --jnn-sbi-widget-auto-active: 1;
/* SBI-052 */ --jnn-sbi-widget-standard-state: 1;
/* SBI-053 */ --jnn-sbi-widget-ascendoor-state: 1;
/* SBI-054 */ --jnn-sbi-widget-generic-state: 1;
/* SBI-055 */ --jnn-sbi-widget-primary-state: 1;
/* SBI-056 */ --jnn-sbi-widget-secondary-state: 1;
/* SBI-057 */ --jnn-sbi-widget-above-footer-state: 1;
/* SBI-058 */ --jnn-sbi-widget-component-state: 1;
/* SBI-059 */ --jnn-sbi-widget-adapter-state: 1;
/* SBI-060 */ --jnn-sbi-widget-fmd-state: 1;
/* SBI-061 */ --jnn-sbi-widget-future-state: 1;
/* SBI-062 */ --jnn-sbi-widget-chain-state: 1;
/* SBI-063 */ --jnn-sbi-widget-binding-version: "5.6.8-SBI-005";
/* SBI-064 */ --jnn-sbi-widget-binding-mode: structure;
/* =====================================================
SBI-006 CUSTOM PHP COMPONENT HOOK
& ADAPTER BINDING ENGINE
New variable range: SBI-065 through SBI-078
===================================================== */
/* SBI-065 */
--jnn-sbi-custom-active: 1;
/* SBI-066 */
--jnn-sbi-custom-slot-state: 1;
/* SBI-067 */
--jnn-sbi-custom-zone-state: 1;
/* SBI-068 */
--jnn-sbi-custom-component-state: 1;
/* SBI-069 */
--jnn-sbi-custom-mount-state: 1;
/* SBI-070 */
--jnn-sbi-custom-adapter-state: 1;
/* SBI-071 */
--jnn-sbi-custom-fmd-state: 1;
/* SBI-072 */
--jnn-sbi-custom-chain-state: 1;
/* SBI-073 */
--jnn-sbi-custom-fallback-state: 1;
/* SBI-074 */
--jnn-sbi-custom-validation-state: 1;
/* SBI-075 */
--jnn-sbi-custom-future-state: 1;
/* SBI-076 */
--jnn-sbi-custom-structure-state: 1;
/* SBI-077 */
--jnn-sbi-custom-binding-version: "5.6.8-SBI-006";
/* SBI-078 */
--jnn-sbi-custom-binding-mode: explicit;
/* =====================================================
SBI-007 BINDING VALIDATION & CONFLICT GUARD ENGINE
New variable range: SBI-079 through SBI-092
===================================================== */
/* SBI-079 */
--jnn-sbi-validate-active: 1;
/* SBI-080 */
--jnn-sbi-validate-slot-state: 1;
/* SBI-081 */
--jnn-sbi-validate-zone-state: 1;
/* SBI-082 */
--jnn-sbi-validate-component-state: 1;
/* SBI-083 */
--jnn-sbi-validate-widget-state: 1;
/* SBI-084 */
--jnn-sbi-validate-custom-state: 1;
/* SBI-085 */
--jnn-sbi-validate-chain-state: 1;
/* SBI-086 */
--jnn-sbi-conflict-guard-state: 1;
/* SBI-087 */
--jnn-sbi-duplicate-guard-state: 1;
/* SBI-088 */
--jnn-sbi-ownership-guard-state: 1;
/* SBI-089 */
--jnn-sbi-fmd-compat-state: 1;
/* SBI-090 */
--jnn-sbi-rsv-compat-state: 1;
/* SBI-091 */
--jnn-sbi-validation-version: "5.6.8-SBI-007";
/* SBI-092 */
--jnn-sbi-validation-mode: structure;
/* =====================================================
SBI-008 BINDING FALLBACK & RECOVERY INTEGRATION ENGINE
New variable range: SBI-093 through SBI-106
===================================================== */
/* SBI-093 */
--jnn-sbi-recovery-active: 1;
/* SBI-094 */
--jnn-sbi-recovery-ready-state: 1;
/* SBI-095 */
--jnn-sbi-recovery-fallback-state: 1;
/* SBI-096 */
--jnn-sbi-recovery-rollback-state: 1;
/* SBI-097 */
--jnn-sbi-recovery-slot-state: 1;
/* SBI-098 */
--jnn-sbi-recovery-zone-state: 1;
/* SBI-099 */
--jnn-sbi-recovery-component-state: 1;
/* SBI-100 */
--jnn-sbi-recovery-widget-state: 1;
/* SBI-101 */
--jnn-sbi-recovery-custom-state: 1;
/* SBI-102 */
--jnn-sbi-recovery-fmd-state: 1;
/* SBI-103 */
--jnn-sbi-recovery-lifecycle-state: 1;
/* SBI-104 */
--jnn-sbi-recovery-chain-state: 1;
/* SBI-105 */
--jnn-sbi-recovery-version: "5.6.8-SBI-008";
/* SBI-106 */
--jnn-sbi-recovery-mode: structure;
/* =====================================================
SBI-009 BINDING LIFECYCLE & STATE SYNCHRONIZATION ENGINE
New variable range: SBI-107 through SBI-120
===================================================== */
/* SBI-107 */
--jnn-sbi-lifecycle-active: 1;
/* SBI-108 */
--jnn-sbi-lifecycle-registered-state: 1;
/* SBI-109 */
--jnn-sbi-lifecycle-bound-state: 1;
/* SBI-110 */
--jnn-sbi-lifecycle-active-state: 1;
/* SBI-111 */
--jnn-sbi-lifecycle-paused-state: 1;
/* SBI-112 */
--jnn-sbi-lifecycle-retired-state: 1;
/* SBI-113 */
--jnn-sbi-lifecycle-failed-state: 1;
/* SBI-114 */
--jnn-sbi-lifecycle-slot-state: 1;
/* SBI-115 */
--jnn-sbi-lifecycle-zone-state: 1;
/* SBI-116 */
--jnn-sbi-lifecycle-component-state: 1;
/* SBI-117 */
--jnn-sbi-lifecycle-fmd-state: 1;
/* SBI-118 */
--jnn-sbi-lifecycle-recovery-state: 1;
/* SBI-119 */
--jnn-sbi-lifecycle-version: "5.6.8-SBI-009";
/* SBI-120 */
--jnn-sbi-lifecycle-mode: structure;
/* =====================================================
SBI-010 FINAL VALIDATION / RELEASE / PRODUCTION LOCK
New variable range: SBI-121 through SBI-134
===================================================== */
/* SBI-121 */
--jnn-sbi-final-active: 1;
/* SBI-122 */
--jnn-sbi-final-index-state: 1;
/* SBI-123 */
--jnn-sbi-final-control-state: 1;
/* SBI-124 */
--jnn-sbi-final-registry-state: 1;
/* SBI-125 */
--jnn-sbi-final-slot-state: 1;
/* SBI-126 */
--jnn-sbi-final-zone-state: 1;
/* SBI-127 */
--jnn-sbi-final-component-state: 1;
/* SBI-128 */
--jnn-sbi-final-widget-state: 1;
/* SBI-129 */
--jnn-sbi-final-custom-state: 1;
/* SBI-130 */
--jnn-sbi-final-conflict-state: 1;
/* SBI-131 */
--jnn-sbi-final-recovery-state: 1;
/* SBI-132 */
--jnn-sbi-final-lifecycle-state: 1;
/* SBI-133 */
--jnn-sbi-final-production-lock: 1;
/* SBI-134 */
--jnn-sbi-final-engine-version: "5.6.8-SBI-010";
}
/* =========================================================
JNN MASTER CONTROL 26
UVO - UNIVERSAL VISUAL OWNERSHIP ENGINE
v5.6.9 - UVO-001
========================================================= */
:root {
/* UVO-001 */ --jnn-uvo-active: 1;
/* UVO-002 */ --jnn-uvo-slot-map-state: 1;
/* UVO-003 */ --jnn-uvo-zone-map-state: 1;
/* UVO-004 */ --jnn-uvo-component-map-state: 1;
/* UVO-005 */ --jnn-uvo-section-card-role-state: 1;
/* UVO-006 */ --jnn-uvo-section-title-role-state: 1;
/* UVO-007 */ --jnn-uvo-story-card-role-state: 1;
/* UVO-008 */ --jnn-uvo-featured-story-role-state: 1;
/* UVO-009 */ --jnn-uvo-standard-story-role-state: 1;
/* UVO-010 */ --jnn-uvo-image-frame-role-state: 1;
/* UVO-011 */ --jnn-uvo-view-all-role-state: 1;
/* UVO-012 */ --jnn-uvo-advertisement-role-state: 1;
/* UVO-013 */ --jnn-uvo-grid-role-state: 1;
/* UVO-014 */ --jnn-uvo-widget-role-state: 1;
/* UVO-015 */ --jnn-uvo-binding-bridge-state: 1;
/* UVO-016 */ --jnn-uvo-existing-owner-state: 1;
/* UVO-017 */ --jnn-uvo-conflict-guard-state: 1;
/* UVO-018 */ --jnn-uvo-category-independent-state: 1;
/* UVO-019 */ --jnn-uvo-mapping-version: "5.6.9-UVO-001";
/* UVO-020 */ --jnn-uvo-mapping-mode: structural;
/* =====================================================
UVO-002 UNIVERSAL SECTION CARD VISUAL OWNERSHIP ENGINE
New variable range: UVO-021 through UVO-036
Existing approved values are referenced, not duplicated.
===================================================== */
/* UVO-021 */
--jnn-uvo-section-card-active: 1;
/* UVO-022 */
--jnn-uvo-section-card-display: flow-root;
/* UVO-023 */
--jnn-uvo-section-card-width: 100%;
/* UVO-024 */
--jnn-uvo-section-card-max-width: 100%;
/* UVO-025 */
--jnn-uvo-section-card-pad-top: var(--jnn-card-pad-top);
/* UVO-026 */
--jnn-uvo-section-card-pad-right: var(--jnn-card-pad-right);
/* UVO-027 */
--jnn-uvo-section-card-pad-bottom: var(--jnn-card-pad-bottom);
/* UVO-028 */
--jnn-uvo-section-card-pad-left: var(--jnn-card-pad-left);
/* UVO-029 */
--jnn-uvo-section-card-bg: var(--jnn-card-bg);
/* UVO-030 */
--jnn-uvo-section-card-border-width: var(--jnn-card-border-width);
/* UVO-031 */
--jnn-uvo-section-card-border-color: var(--jnn-card-border-color);
/* UVO-032 */
--jnn-uvo-section-card-radius: var(--jnn-card-radius);
/* UVO-033 */
--jnn-uvo-section-card-shadow: var(--jnn-card-shadow);
/* UVO-034 */
--jnn-uvo-section-card-overflow: var(--jnn-card-overflow);
/* UVO-035 */
--jnn-uvo-section-card-box-sizing: var(--jnn-card-box-sizing);
/* UVO-036 */
--jnn-uvo-section-card-version: "5.6.9-UVO-002";
/* =====================================================
UVO-003 UNIVERSAL SECTION TITLE / VIEW ALL
VISUAL OWNERSHIP ENGINE
New variable range: UVO-037 through UVO-064
Existing approved values are referenced, not replaced.
===================================================== */
/* UVO-037 */
--jnn-uvo-title-active: 1;
/* UVO-038 */
--jnn-uvo-title-box-width: var(--jnn-section-title-box-width);
/* UVO-039 */
--jnn-uvo-title-box-width-mobile: var(--jnn-section-title-box-width-mobile);
/* UVO-040 */
--jnn-uvo-title-box-height: var(--jnn-video-title-box-height);
/* UVO-041 */
--jnn-uvo-title-box-bg: var(--jnn-video-title-box-bg);
/* UVO-042 */
--jnn-uvo-title-box-radius: var(--jnn-video-title-radius);
/* UVO-043 */
--jnn-uvo-title-pad-x: var(--jnn-section-title-box-pad-x);
/* UVO-044 */
--jnn-uvo-title-pad-y: var(--jnn-section-title-box-pad-y);
/* UVO-045 */
--jnn-uvo-title-bar-width: var(--jnn-video-title-bar-width);
/* UVO-046 */
--jnn-uvo-title-bar-color: var(--jnn-video-title-bar-color);
/* UVO-047 */
--jnn-uvo-title-bar-gap: var(--jnn-section-title-bar-gap);
/* UVO-048 */
--jnn-uvo-title-line-gap-x: var(--jnn-video-title-line-gap-x);
/* UVO-049 */
--jnn-uvo-title-line-offset-y: var(--jnn-video-title-line-offset-y);
/* UVO-050 */
--jnn-uvo-title-line-height: var(--jnn-video-title-line-height);
/* UVO-051 */
--jnn-uvo-title-content-gap: var(--jnn-section-title-content-gap);
/* UVO-052 */
--jnn-uvo-title-view-gap: var(--jnn-section-title-view-gap);
/* UVO-053 */
--jnn-uvo-view-all-space: var(--jnn-section-view-all-space);
/* UVO-054 */
--jnn-uvo-view-all-space-mobile: var(--jnn-section-view-all-space-mobile);
/* UVO-055 */
--jnn-uvo-view-all-size: var(--jnn-video-view-all-size);
/* UVO-056 */
--jnn-uvo-view-all-offset-y: var(--jnn-video-view-all-offset-y);
/* UVO-057 */
--jnn-uvo-title-color: var(--jnn-home-heading-color);
/* UVO-058 */
--jnn-uvo-title-font-size: var(--jnn-home-heading-size);
/* UVO-059 */
--jnn-uvo-title-font-weight: var(--jnn-home-heading-weight);
/* UVO-060 */
--jnn-uvo-title-line-height-text: var(--jnn-home-heading-line);
/* UVO-061 */
--jnn-uvo-title-shadow: var(--jnn-home-title-box-shadow);
/* UVO-062 */
--jnn-uvo-title-row-state: 1;
/* UVO-063 */
--jnn-uvo-view-all-state: 1;
/* UVO-064 */
--jnn-uvo-title-version: "5.6.9-UVO-003";
/* =====================================================
UVO-004 UNIVERSAL STORY CARD VISUAL OWNERSHIP ENGINE
New variable range: UVO-065 through UVO-084
Existing approved values are referenced, not replaced.
===================================================== */
/* UVO-065 */
--jnn-uvo-story-active: 1;
/* UVO-066 */
--jnn-uvo-story-bg: var(--jnn-home-item-bg);
/* UVO-067 */
--jnn-uvo-story-border-color: var(--jnn-home-item-border-color);
/* UVO-068 */
--jnn-uvo-story-border-width: var(--jnn-home-item-border-width);
/* UVO-069 */
--jnn-uvo-story-radius: var(--jnn-home-item-radius);
/* UVO-070 */
--jnn-uvo-story-pad-y: var(--jnn-home-item-pad-y);
/* UVO-071 */
--jnn-uvo-story-pad-x: var(--jnn-home-item-pad-x);
/* UVO-072 */
--jnn-uvo-story-gap: var(--jnn-home-item-gap);
/* UVO-073 */
--jnn-uvo-story-margin-top: 0px;
/* UVO-074 */
--jnn-uvo-story-shadow: none;
/* UVO-075 */
--jnn-uvo-story-overflow: hidden;
/* UVO-076 */
--jnn-uvo-story-box-sizing: border-box;
/* UVO-077 */
--jnn-uvo-story-min-width: 0px;
/* UVO-078 */
--jnn-uvo-story-card-state: 1;
/* UVO-079 */
--jnn-uvo-standard-story-state: 1;
/* UVO-080 */
--jnn-uvo-featured-story-state: 1;
/* UVO-081 */
--jnn-uvo-story-row-gap-state: 1;
/* UVO-082 */
--jnn-uvo-story-existing-owner-state: 1;
/* UVO-083 */
--jnn-uvo-story-category-independent-state: 1;
/* UVO-084 */
--jnn-uvo-story-version: "5.6.9-UVO-004";
/* =====================================================
UVO-005 UNIVERSAL IMAGE FRAME VISUAL OWNERSHIP ENGINE
New variable range: UVO-085 through UVO-110
Existing WDG-006 values are referenced, not replaced.
===================================================== */
/* UVO-085 */
--jnn-uvo-image-active: 1;
/* UVO-086 */
--jnn-uvo-image-display: var(--jnn-widget-image-display);
/* UVO-087 */
--jnn-uvo-image-width: var(--jnn-widget-image-width);
/* UVO-088 */
--jnn-uvo-image-max-width: var(--jnn-widget-image-max-width);
/* UVO-089 */
--jnn-uvo-image-height: var(--jnn-widget-image-height);
/* UVO-090 */
--jnn-uvo-image-fit: var(--jnn-widget-image-fit);
/* UVO-091 */
--jnn-uvo-image-position: var(--jnn-widget-image-position);
/* UVO-092 */
--jnn-uvo-image-radius: var(--jnn-widget-image-radius);
/* UVO-093 */
--jnn-uvo-image-overflow: var(--jnn-widget-image-overflow);
/* UVO-094 */
--jnn-uvo-image-thumb-ratio: var(--jnn-widget-thumb-ratio);
/* UVO-095 */
--jnn-uvo-image-thumb-fit: var(--jnn-widget-thumb-fit);
/* UVO-096 */
--jnn-uvo-image-square-ratio: var(--jnn-widget-square-ratio);
/* UVO-097 */
--jnn-uvo-image-transition: var(--jnn-widget-image-transition);
/* UVO-098 */
--jnn-uvo-image-hover-scale: var(--jnn-widget-image-hover-scale);
/* UVO-099 */
--jnn-uvo-image-lazy-opacity: var(--jnn-widget-image-lazy-opacity);
/* UVO-100 */
--jnn-uvo-image-box-sizing: border-box;
/* UVO-101 */
--jnn-uvo-image-link-display: block;
/* UVO-102 */
--jnn-uvo-image-link-max-width: 100%;
/* UVO-103 */
--jnn-uvo-image-frame-state: 1;
/* UVO-104 */
--jnn-uvo-image-element-state: 1;
/* UVO-105 */
--jnn-uvo-image-thumb-state: 1;
/* UVO-106 */
--jnn-uvo-image-square-state: 1;
/* UVO-107 */
--jnn-uvo-image-hover-state: 1;
/* UVO-108 */
--jnn-uvo-image-existing-owner-state: 1;
/* UVO-109 */
--jnn-uvo-image-category-independent-state: 1;
/* UVO-110 */
--jnn-uvo-image-version: "5.6.9-UVO-005";
/* =====================================================
UVO-006 UNIVERSAL ADVERTISEMENT VISUAL OWNERSHIP ENGINE
New variable range: UVO-111 through UVO-130
Existing approved HVG values are referenced.
===================================================== */
/* UVO-111 */
--jnn-uvo-ad-active: 1;
/* UVO-112 */
--jnn-uvo-ad-width: var(--jnn-fmd-slot-width);
/* UVO-113 */
--jnn-uvo-ad-max-width: var(--jnn-fmd-slot-max-width);
/* UVO-114 */
--jnn-uvo-ad-gap-top: var(--jnn-ad-gap-top);
/* UVO-115 */
--jnn-uvo-ad-gap-bottom: var(--jnn-ad-gap-bottom);
/* UVO-116 */
--jnn-uvo-ad-pad-top: var(--jnn-ad-inner-pad-top);
/* UVO-117 */
--jnn-uvo-ad-pad-bottom: var(--jnn-ad-inner-pad-bottom);
/* UVO-118 */
--jnn-uvo-ad-pad-inline: 0px;
/* UVO-119 */
--jnn-uvo-ad-bg: transparent;
/* UVO-120 */
--jnn-uvo-ad-border-width: 0px;
/* UVO-121 */
--jnn-uvo-ad-radius: 0px;
/* UVO-122 */
--jnn-uvo-ad-shadow: none;
/* UVO-123 */
--jnn-uvo-ad-box-sizing: border-box;
/* UVO-124 */
--jnn-uvo-ad-overflow: visible;
/* UVO-125 */
--jnn-uvo-ad-role-state: 1;
/* UVO-126 */
--jnn-uvo-ad-boundary-state: 1;
/* UVO-127 */
--jnn-uvo-ad-existing-owner-state: 1;
/* UVO-128 */
--jnn-uvo-ad-category-independent-state: 1;
/* UVO-129 */
--jnn-uvo-ad-sbi-bridge-state: 1;
/* UVO-130 */
--jnn-uvo-ad-version: "5.6.9-UVO-006";
/* =====================================================
UVO-007 UNIVERSAL GRID / WIDGET LAYOUT
VISUAL OWNERSHIP ENGINE
New variable range: UVO-131 through UVO-162
Existing WDG responsive values are referenced.
===================================================== */
/* UVO-131 */
--jnn-uvo-layout-active: 1;
/* UVO-132 */
--jnn-uvo-layout-columns-desktop: var(--jnn-widget-columns-desktop);
/* UVO-133 */
--jnn-uvo-layout-columns-laptop: var(--jnn-widget-columns-laptop);
/* UVO-134 */
--jnn-uvo-layout-columns-tablet: var(--jnn-widget-columns-tablet);
/* UVO-135 */
--jnn-uvo-layout-columns-mobile: var(--jnn-widget-columns-mobile);
/* UVO-136 */
--jnn-uvo-layout-columns-small-mobile: var(--jnn-widget-columns-small-mobile);
/* UVO-137 */
--jnn-uvo-layout-grid-min-desktop: var(--jnn-widget-grid-min-desktop);
/* UVO-138 */
--jnn-uvo-layout-grid-min-laptop: var(--jnn-widget-grid-min-laptop);
/* UVO-139 */
--jnn-uvo-layout-grid-min-tablet: var(--jnn-widget-grid-min-tablet);
/* UVO-140 */
--jnn-uvo-layout-grid-min-mobile: var(--jnn-widget-grid-min-mobile);
/* UVO-141 */
--jnn-uvo-layout-gap-desktop: var(--jnn-widget-gap-desktop);
/* UVO-142 */
--jnn-uvo-layout-gap-laptop: var(--jnn-widget-gap-laptop);
/* UVO-143 */
--jnn-uvo-layout-gap-tablet: var(--jnn-widget-gap-tablet);
/* UVO-144 */
--jnn-uvo-layout-gap-mobile: var(--jnn-widget-gap-mobile);
/* UVO-145 */
--jnn-uvo-layout-gap-small-mobile: var(--jnn-widget-gap-small-mobile);
/* UVO-146 */
--jnn-uvo-layout-row-gap-desktop: var(--jnn-widget-row-gap-desktop);
/* UVO-147 */
--jnn-uvo-layout-column-gap-desktop: var(--jnn-widget-column-gap-desktop);
/* UVO-148 */
--jnn-uvo-layout-row-gap-tablet: var(--jnn-widget-row-gap-tablet);
/* UVO-149 */
--jnn-uvo-layout-column-gap-tablet: var(--jnn-widget-column-gap-tablet);
/* UVO-150 */
--jnn-uvo-layout-row-gap-mobile: var(--jnn-widget-row-gap-mobile);
/* UVO-151 */
--jnn-uvo-layout-column-gap-mobile: var(--jnn-widget-column-gap-mobile);
/* UVO-152 */
--jnn-uvo-layout-row-gap-small-mobile: var(--jnn-widget-row-gap-small-mobile);
/* UVO-153 */
--jnn-uvo-layout-item-min-width: var(--jnn-widget-item-min-width);
/* UVO-154 */
--jnn-uvo-layout-item-max-width: var(--jnn-widget-item-max-width);
/* UVO-155 */
--jnn-uvo-layout-width: var(--jnn-widget-responsive-width);
/* UVO-156 */
--jnn-uvo-layout-max-width: var(--jnn-widget-responsive-max-width);
/* UVO-157 */
--jnn-uvo-layout-overflow-x: var(--jnn-widget-responsive-overflow-x);
/* UVO-158 */
--jnn-uvo-layout-overflow-y: var(--jnn-widget-responsive-overflow-y);
/* UVO-159 */
--jnn-uvo-layout-section-space-desktop: var(--jnn-widget-section-space-desktop);
/* UVO-160 */
--jnn-uvo-layout-section-space-tablet: var(--jnn-widget-section-space-tablet);
/* UVO-161 */
--jnn-uvo-layout-section-space-mobile: var(--jnn-widget-section-space-mobile);
/* UVO-162 */
--jnn-uvo-layout-version: "5.6.9-UVO-007";
/* =====================================================
UVO-008 VISUAL CONFLICT GUARD & OWNERSHIP PRIORITY
New variable range: UVO-163 through UVO-184
===================================================== */
/* UVO-163 */
--jnn-uvo-conflict-active: 1;
/* UVO-164 */
--jnn-uvo-owner-section-card-state: 1;
/* UVO-165 */
--jnn-uvo-owner-title-state: 1;
/* UVO-166 */
--jnn-uvo-owner-story-state: 1;
/* UVO-167 */
--jnn-uvo-owner-image-state: 1;
/* UVO-168 */
--jnn-uvo-owner-ad-state: 1;
/* UVO-169 */
--jnn-uvo-owner-layout-state: 1;
/* UVO-170 */
--jnn-uvo-guard-card-story-state: 1;
/* UVO-171 */
--jnn-uvo-guard-card-title-state: 1;
/* UVO-172 */
--jnn-uvo-guard-story-image-state: 1;
/* UVO-173 */
--jnn-uvo-guard-ad-card-state: 1;
/* UVO-174 */
--jnn-uvo-guard-layout-card-state: 1;
/* UVO-175 */
--jnn-uvo-live-owner-preserve-state: 1;
/* UVO-176 */
--jnn-uvo-explicit-role-state: 1;
/* UVO-177 */
--jnn-uvo-single-owner-state: 1;
/* UVO-178 */
--jnn-uvo-sbi-bridge-state: 1;
/* UVO-179 */
--jnn-uvo-fmd-bridge-state: 1;
/* UVO-180 */
--jnn-uvo-fallback-state: 1;
/* UVO-181 */
--jnn-uvo-category-independent-state: 1;
/* UVO-182 */
--jnn-uvo-visual-boundary-state: 1;
/* UVO-183 */
--jnn-uvo-conflict-version: "5.6.9-UVO-008";
/* UVO-184 */
--jnn-uvo-conflict-mode: structural;
/* =====================================================
UVO-009 VISUAL OWNERSHIP VALIDATION
& REGRESSION SAFETY ENGINE
New variable range: UVO-185 through UVO-208
===================================================== */
/* UVO-185 */
--jnn-uvo-validation-active: 1;
/* UVO-186 */
--jnn-uvo-validation-section-card-state: 1;
/* UVO-187 */
--jnn-uvo-validation-title-state: 1;
/* UVO-188 */
--jnn-uvo-validation-story-state: 1;
/* UVO-189 */
--jnn-uvo-validation-image-state: 1;
/* UVO-190 */
--jnn-uvo-validation-ad-state: 1;
/* UVO-191 */
--jnn-uvo-validation-layout-state: 1;
/* UVO-192 */
--jnn-uvo-validation-conflict-state: 1;
/* UVO-193 */
--jnn-uvo-regression-card-state: 1;
/* UVO-194 */
--jnn-uvo-regression-title-state: 1;
/* UVO-195 */
--jnn-uvo-regression-story-state: 1;
/* UVO-196 */
--jnn-uvo-regression-image-state: 1;
/* UVO-197 */
--jnn-uvo-regression-ad-state: 1;
/* UVO-198 */
--jnn-uvo-regression-layout-state: 1;
/* UVO-199 */
--jnn-uvo-regression-mobile-state: 1;
/* UVO-200 */
--jnn-uvo-regression-desktop-state: 1;
/* UVO-201 */
--jnn-uvo-regression-future-widget-state: 1;
/* UVO-202 */
--jnn-uvo-regression-custom-php-state: 1;
/* UVO-203 */
--jnn-uvo-regression-sbi-state: 1;
/* UVO-204 */
--jnn-uvo-regression-fmd-state: 1;
/* UVO-205 */
--jnn-uvo-regression-rsv-state: 1;
/* UVO-206 */
--jnn-uvo-production-ready-state: 1;
/* UVO-207 */
--jnn-uvo-validation-version: "5.6.9-UVO-009";
/* UVO-208 */
--jnn-uvo-validation-mode: structural;
/* =====================================================
UVO-010 FINAL VALIDATION / RELEASE / PRODUCTION LOCK
New variable range: UVO-209 through UVO-232
===================================================== */
/* UVO-209 */
--jnn-uvo-final-active: 1;
/* UVO-210 */
--jnn-uvo-final-index-state: 1;
/* UVO-211 */
--jnn-uvo-final-control-state: 1;
/* UVO-212 */
--jnn-uvo-final-registry-state: 1;
/* UVO-213 */
--jnn-uvo-final-section-card-state: 1;
/* UVO-214 */
--jnn-uvo-final-title-state: 1;
/* UVO-215 */
--jnn-uvo-final-story-state: 1;
/* UVO-216 */
--jnn-uvo-final-image-state: 1;
/* UVO-217 */
--jnn-uvo-final-ad-state: 1;
/* UVO-218 */
--jnn-uvo-final-layout-state: 1;
/* UVO-219 */
--jnn-uvo-final-conflict-state: 1;
/* UVO-220 */
--jnn-uvo-final-regression-state: 1;
/* UVO-221 */
--jnn-uvo-final-sbi-state: 1;
/* UVO-222 */
--jnn-uvo-final-fmd-state: 1;
/* UVO-223 */
--jnn-uvo-final-rsv-state: 1;
/* UVO-224 */
--jnn-uvo-final-mobile-state: 1;
/* UVO-225 */
--jnn-uvo-final-desktop-state: 1;
/* UVO-226 */
--jnn-uvo-final-future-widget-state: 1;
/* UVO-227 */
--jnn-uvo-final-custom-php-state: 1;
/* UVO-228 */
--jnn-uvo-final-category-independent-state: 1;
/* UVO-229 */
--jnn-uvo-final-single-owner-state: 1;
/* UVO-230 */
--jnn-uvo-final-production-lock: 1;
/* UVO-231 */
--jnn-uvo-final-release-state: 1;
/* UVO-232 */
--jnn-uvo-final-engine-version: "5.6.9-UVO-010";
}
/* =========================================================
JNN MASTER CONTROL 27
PHI - PHP HOOK INTEGRATION ENGINE
v5.7.0 - PHI-001
========================================================= */
:root {
/* PHI-001 */ --jnn-phi-active: 1;
/* PHI-002 */ --jnn-phi-helper-state: 1;
/* PHI-003 */ --jnn-phi-attribute-state: 1;
/* PHI-004 */ --jnn-phi-slot-state: 1;
/* PHI-005 */ --jnn-phi-zone-state: 1;
/* PHI-006 */ --jnn-phi-component-state: 1;
/* PHI-007 */ --jnn-phi-visual-role-state: 1;
/* PHI-008 */ --jnn-phi-layout-state: 1;
/* PHI-009 */ --jnn-phi-mount-state: 1;
/* PHI-010 */ --jnn-phi-lifecycle-state: 1;
/* PHI-011 */ --jnn-phi-version-state: 1;
/* PHI-012 */ --jnn-phi-owner-state: 1;
/* PHI-013 */ --jnn-phi-banner-map-state: 1;
/* PHI-014 */ --jnn-phi-editorial-map-state: 1;
/* PHI-015 */ --jnn-phi-featured-map-state: 1;
/* PHI-016 */ --jnn-phi-ad-map-state: 1;
/* PHI-017 */ --jnn-phi-grid-map-state: 1;
/* PHI-018 */ --jnn-phi-widget-map-state: 1;
/* PHI-019 */ --jnn-phi-sbi-bridge-state: 1;
/* PHI-020 */ --jnn-phi-fmd-bridge-state: 1;
/* PHI-021 */ --jnn-phi-uvo-bridge-state: 1;
/* PHI-022 */ --jnn-phi-category-independent-state: 1;
/* PHI-023 */ --jnn-phi-source-safe-state: 1;
/* PHI-024 */ --jnn-phi-version: "5.7.0-PHI-001";
/* PHI-025 */ --jnn-phi-contract-active: 1;
/* PHI-026 */ --jnn-phi-contract-banner-state: 1;
/* PHI-027 */ --jnn-phi-contract-editorial-state: 1;
/* PHI-028 */ --jnn-phi-contract-featured-state: 1;
/* PHI-029 */ --jnn-phi-contract-ad-state: 1;
/* PHI-030 */ --jnn-phi-contract-grid-state: 1;
/* PHI-031 */ --jnn-phi-contract-widget-state: 1;
/* PHI-032 */ --jnn-phi-contract-slot-required: 1;
/* PHI-033 */ --jnn-phi-contract-zone-required: 1;
/* PHI-034 */ --jnn-phi-contract-component-required: 1;
/* PHI-035 */ --jnn-phi-contract-role-required: 1;
/* PHI-036 */ --jnn-phi-contract-owner-required: 1;
/* PHI-037 */ --jnn-phi-contract-version-required: 1;
/* PHI-038 */ --jnn-phi-contract-map-required: 1;
/* PHI-039 */ --jnn-phi-contract-layout-optional: 1;
/* PHI-040 */ --jnn-phi-contract-mounted-state: 1;
/* PHI-041 */ --jnn-phi-contract-lifecycle-state: 1;
/* PHI-042 */ --jnn-phi-contract-category-independent: 1;
/* PHI-043 */ --jnn-phi-contract-duplicate-guard: 1;
/* PHI-044 */ --jnn-phi-contract-empty-guard: 1;
/* PHI-045 */ --jnn-phi-contract-escape-state: 1;
/* PHI-046 */ --jnn-phi-contract-filter-state: 1;
/* PHI-047 */ --jnn-phi-contract-version: "5.7.0-PHI-002";
/* PHI-048 */ --jnn-phi-contract-mode: strict;
/* PHI-049 */ --jnn-phi-adapter-active: 1;
/* PHI-050 */ --jnn-phi-adapter-banner-state: 1;
/* PHI-051 */ --jnn-phi-adapter-editorial-state: 1;
/* PHI-052 */ --jnn-phi-adapter-featured-state: 1;
/* PHI-053 */ --jnn-phi-adapter-ad-state: 1;
/* PHI-054 */ --jnn-phi-adapter-grid-state: 1;
/* PHI-055 */ --jnn-phi-adapter-widget-state: 1;
/* PHI-056 */ --jnn-phi-adapter-opening-tag-state: 1;
/* PHI-057 */ --jnn-phi-adapter-existing-class-state: 1;
/* PHI-058 */ --jnn-phi-adapter-existing-id-state: 1;
/* PHI-059 */ --jnn-phi-adapter-attribute-merge-state: 1;
/* PHI-060 */ --jnn-phi-adapter-no-replace-state: 1;
/* PHI-061 */ --jnn-phi-adapter-source-verified-state: 1;
/* PHI-062 */ --jnn-phi-adapter-source-missing-state: 1;
/* PHI-063 */ --jnn-phi-adapter-duplicate-hook-guard: 1;
/* PHI-064 */ --jnn-phi-adapter-template-safe-state: 1;
/* PHI-065 */ --jnn-phi-adapter-widget-safe-state: 1;
/* PHI-066 */ --jnn-phi-adapter-custom-safe-state: 1;
/* PHI-067 */ --jnn-phi-adapter-sbi-state: 1;
/* PHI-068 */ --jnn-phi-adapter-fmd-state: 1;
/* PHI-069 */ --jnn-phi-adapter-uvo-state: 1;
/* PHI-070 */ --jnn-phi-adapter-category-independent-state: 1;
/* PHI-071 */ --jnn-phi-adapter-version: "5.7.0-PHI-003";
/* PHI-072 */ --jnn-phi-adapter-mode: canonical;
/* PHI-073 */ --jnn-phi-verify-active: 1;
/* PHI-074 */ --jnn-phi-verify-source-present-state: 1;
/* PHI-075 */ --jnn-phi-verify-source-missing-state: 1;
/* PHI-076 */ --jnn-phi-verify-opening-tag-state: 1;
/* PHI-077 */ --jnn-phi-verify-class-state: 1;
/* PHI-078 */ --jnn-phi-verify-id-state: 1;
/* PHI-079 */ --jnn-phi-verify-map-state: 1;
/* PHI-080 */ --jnn-phi-verify-duplicate-state: 1;
/* PHI-081 */ --jnn-phi-verify-placement-ready-state: 1;
/* PHI-082 */ --jnn-phi-verify-placement-blocked-state: 1;
/* PHI-083 */ --jnn-phi-verify-banner-state: 1;
/* PHI-084 */ --jnn-phi-verify-editorial-state: 1;
/* PHI-085 */ --jnn-phi-verify-featured-state: 1;
/* PHI-086 */ --jnn-phi-verify-ad-state: 1;
/* PHI-087 */ --jnn-phi-verify-grid-state: 1;
/* PHI-088 */ --jnn-phi-verify-widget-state: 1;
/* PHI-089 */ --jnn-phi-verify-parent-safe-state: 1;
/* PHI-090 */ --jnn-phi-verify-child-safe-state: 1;
/* PHI-091 */ --jnn-phi-verify-no-query-change-state: 1;
/* PHI-092 */ --jnn-phi-verify-no-wrapper-change-state: 1;
/* PHI-093 */ --jnn-phi-verify-category-independent-state: 1;
/* PHI-094 */ --jnn-phi-verify-report-state: 1;
/* PHI-095 */ --jnn-phi-verify-version: "5.7.0-PHI-004";
/* PHI-096 */ --jnn-phi-verify-mode: source-first;
/* PHI-097 */ --jnn-phi-transaction-active: 1;
/* PHI-098 */ --jnn-phi-transaction-precheck-state: 1;
/* PHI-099 */ --jnn-phi-transaction-source-hash-state: 1;
/* PHI-100 */ --jnn-phi-transaction-tag-snapshot-state: 1;
/* PHI-101 */ --jnn-phi-transaction-ready-state: 1;
/* PHI-102 */ --jnn-phi-transaction-block-state: 1;
/* PHI-103 */ --jnn-phi-transaction-inject-state: 1;
/* PHI-104 */ --jnn-phi-transaction-postcheck-state: 1;
/* PHI-105 */ --jnn-phi-transaction-duplicate-guard: 1;
/* PHI-106 */ --jnn-phi-transaction-class-preserve-state: 1;
/* PHI-107 */ --jnn-phi-transaction-id-preserve-state: 1;
/* PHI-108 */ --jnn-phi-transaction-query-preserve-state: 1;
/* PHI-109 */ --jnn-phi-transaction-wrapper-preserve-state: 1;
/* PHI-110 */ --jnn-phi-transaction-rollback-ready-state: 1;
/* PHI-111 */ --jnn-phi-transaction-rollback-state: 1;
/* PHI-112 */ --jnn-phi-transaction-commit-state: 1;
/* PHI-113 */ --jnn-phi-transaction-report-state: 1;
/* PHI-114 */ --jnn-phi-transaction-child-only-state: 1;
/* PHI-115 */ --jnn-phi-transaction-parent-block-state: 1;
/* PHI-116 */ --jnn-phi-transaction-category-independent: 1;
/* PHI-117 */ --jnn-phi-transaction-sbi-state: 1;
/* PHI-118 */ --jnn-phi-transaction-fmd-uvo-state: 1;
/* PHI-119 */ --jnn-phi-transaction-version: "5.7.0-PHI-005";
/* PHI-120 */ --jnn-phi-transaction-mode: guarded;
/* PHI-121 */ --jnn-phi-queue-active: 1;
/* PHI-122 */ --jnn-phi-queue-manifest-state: 1;
/* PHI-123 */ --jnn-phi-queue-source-file-state: 1;
/* PHI-124 */ --jnn-phi-queue-map-key-state: 1;
/* PHI-125 */ --jnn-phi-queue-source-hash-state: 1;
/* PHI-126 */ --jnn-phi-queue-rollback-state: 1;
/* PHI-127 */ --jnn-phi-queue-proposed-tag-state: 1;
/* PHI-128 */ --jnn-phi-queue-verified-state: 1;
/* PHI-129 */ --jnn-phi-queue-pending-state: 1;
/* PHI-130 */ --jnn-phi-queue-ready-state: 1;
/* PHI-131 */ --jnn-phi-queue-blocked-state: 1;
/* PHI-132 */ --jnn-phi-queue-applied-state: 1;
/* PHI-133 */ --jnn-phi-queue-rolled-back-state: 1;
/* PHI-134 */ --jnn-phi-queue-duplicate-guard: 1;
/* PHI-135 */ --jnn-phi-queue-order-state: 1;
/* PHI-136 */ --jnn-phi-queue-child-theme-state: 1;
/* PHI-137 */ --jnn-phi-queue-parent-block-state: 1;
/* PHI-138 */ --jnn-phi-queue-no-auto-write-state: 1;
/* PHI-139 */ --jnn-phi-queue-report-state: 1;
/* PHI-140 */ --jnn-phi-queue-sbi-state: 1;
/* PHI-141 */ --jnn-phi-queue-fmd-state: 1;
/* PHI-142 */ --jnn-phi-queue-uvo-state: 1;
/* PHI-143 */ --jnn-phi-queue-version: "5.7.0-PHI-006";
/* PHI-144 */ --jnn-phi-queue-mode: manifest-first;
/* PHI-145 */ --jnn-phi-apply-active: 1;
/* PHI-146 */ --jnn-phi-apply-manifest-ready-state: 1;
/* PHI-147 */ --jnn-phi-apply-source-hash-state: 1;
/* PHI-148 */ --jnn-phi-apply-source-match-state: 1;
/* PHI-149 */ --jnn-phi-apply-source-mismatch-state: 1;
/* PHI-150 */ --jnn-phi-apply-exact-tag-state: 1;
/* PHI-151 */ --jnn-phi-apply-single-replace-state: 1;
/* PHI-152 */ --jnn-phi-apply-duplicate-block-state: 1;
/* PHI-153 */ --jnn-phi-apply-atomic-state: 1;
/* PHI-154 */ --jnn-phi-apply-rollback-state: 1;
/* PHI-155 */ --jnn-phi-apply-result-state: 1;
/* PHI-156 */ --jnn-phi-apply-child-theme-state: 1;
/* PHI-157 */ --jnn-phi-apply-parent-block-state: 1;
/* PHI-158 */ --jnn-phi-apply-no-auto-write-state: 1;
/* PHI-159 */ --jnn-phi-apply-query-preserve-state: 1;
/* PHI-160 */ --jnn-phi-apply-wrapper-preserve-state: 1;
/* PHI-161 */ --jnn-phi-apply-class-id-preserve-state: 1;
/* PHI-162 */ --jnn-phi-apply-category-independent-state: 1;
/* PHI-163 */ --jnn-phi-apply-sbi-state: 1;
/* PHI-164 */ --jnn-phi-apply-fmd-state: 1;
/* PHI-165 */ --jnn-phi-apply-uvo-state: 1;
/* PHI-166 */ --jnn-phi-apply-report-state: 1;
/* PHI-167 */ --jnn-phi-apply-version: "5.7.0-PHI-007";
/* PHI-168 */ --jnn-phi-apply-mode: atomic-in-memory;
/* PHI-169 */ --jnn-phi-write-active: 1;
/* PHI-170 */ --jnn-phi-write-child-theme-state: 1;
/* PHI-171 */ --jnn-phi-write-parent-block-state: 1;
/* PHI-172 */ --jnn-phi-write-backup-state: 1;
/* PHI-173 */ --jnn-phi-write-temp-state: 1;
/* PHI-174 */ --jnn-phi-write-atomic-rename-state: 1;
/* PHI-175 */ --jnn-phi-write-prehash-state: 1;
/* PHI-176 */ --jnn-phi-write-posthash-state: 1;
/* PHI-177 */ --jnn-phi-write-hash-match-state: 1;
/* PHI-178 */ --jnn-phi-write-hash-mismatch-state: 1;
/* PHI-179 */ --jnn-phi-write-permission-state: 1;
/* PHI-180 */ --jnn-phi-write-readable-state: 1;
/* PHI-181 */ --jnn-phi-write-writable-state: 1;
/* PHI-182 */ --jnn-phi-write-rollback-ready-state: 1;
/* PHI-183 */ --jnn-phi-write-rollback-state: 1;
/* PHI-184 */ --jnn-phi-write-commit-state: 1;
/* PHI-185 */ --jnn-phi-write-failure-state: 1;
/* PHI-186 */ --jnn-phi-write-report-state: 1;
/* PHI-187 */ --jnn-phi-write-query-preserve-state: 1;
/* PHI-188 */ --jnn-phi-write-wrapper-preserve-state: 1;
/* PHI-189 */ --jnn-phi-write-category-independent-state: 1;
/* PHI-190 */ --jnn-phi-write-framework-state: 1;
/* PHI-191 */ --jnn-phi-write-version: "5.7.0-PHI-008";
/* PHI-192 */ --jnn-phi-write-mode: child-theme-atomic;
/* PHI-193 */ --jnn-phi-postcheck-active: 1;
/* PHI-194 */ --jnn-phi-postcheck-file-present-state: 1;
/* PHI-195 */ --jnn-phi-postcheck-readable-state: 1;
/* PHI-196 */ --jnn-phi-postcheck-hash-state: 1;
/* PHI-197 */ --jnn-phi-postcheck-contract-state: 1;
/* PHI-198 */ --jnn-phi-postcheck-map-state: 1;
/* PHI-199 */ --jnn-phi-postcheck-slot-state: 1;
/* PHI-200 */ --jnn-phi-postcheck-zone-state: 1;
/* PHI-201 */ --jnn-phi-postcheck-component-state: 1;
/* PHI-202 */ --jnn-phi-postcheck-role-state: 1;
/* PHI-203 */ --jnn-phi-postcheck-owner-state: 1;
/* PHI-204 */ --jnn-phi-postcheck-version-state: 1;
/* PHI-205 */ --jnn-phi-postcheck-duplicate-state: 1;
/* PHI-206 */ --jnn-phi-postcheck-backup-state: 1;
/* PHI-207 */ --jnn-phi-postcheck-rollback-state: 1;
/* PHI-208 */ --jnn-phi-postcheck-clean-state: 1;
/* PHI-209 */ --jnn-phi-postcheck-failure-state: 1;
/* PHI-210 */ --jnn-phi-postcheck-production-ready-state: 1;
/* PHI-211 */ --jnn-phi-postcheck-child-theme-state: 1;
/* PHI-212 */ --jnn-phi-postcheck-parent-block-state: 1;
/* PHI-213 */ --jnn-phi-postcheck-category-independent-state: 1;
/* PHI-214 */ --jnn-phi-postcheck-report-state: 1;
/* PHI-215 */ --jnn-phi-postcheck-version: "5.7.0-PHI-009";
/* PHI-216 */ --jnn-phi-postcheck-mode: verify-after-write;
/* PHI-217 */ --jnn-phi-final-active: 1;
/* PHI-218 */ --jnn-phi-final-index-state: 1;
/* PHI-219 */ --jnn-phi-final-control-state: 1;
/* PHI-220 */ --jnn-phi-final-registry-state: 1;
/* PHI-221 */ --jnn-phi-final-mapping-state: 1;
/* PHI-222 */ --jnn-phi-final-contract-state: 1;
/* PHI-223 */ --jnn-phi-final-adapter-state: 1;
/* PHI-224 */ --jnn-phi-final-source-verify-state: 1;
/* PHI-225 */ --jnn-phi-final-transaction-state: 1;
/* PHI-226 */ --jnn-phi-final-queue-state: 1;
/* PHI-227 */ --jnn-phi-final-apply-state: 1;
/* PHI-228 */ --jnn-phi-final-write-state: 1;
/* PHI-229 */ --jnn-phi-final-postcheck-state: 1;
/* PHI-230 */ --jnn-phi-final-backup-state: 1;
/* PHI-231 */ --jnn-phi-final-rollback-state: 1;
/* PHI-232 */ --jnn-phi-final-child-theme-state: 1;
/* PHI-233 */ --jnn-phi-final-parent-block-state: 1;
/* PHI-234 */ --jnn-phi-final-category-independent-state: 1;
/* PHI-235 */ --jnn-phi-final-sbi-state: 1;
/* PHI-236 */ --jnn-phi-final-fmd-state: 1;
/* PHI-237 */ --jnn-phi-final-uvo-state: 1;
/* PHI-238 */ --jnn-phi-final-production-lock: 1;
/* PHI-239 */ --jnn-phi-final-release-state: 1;
/* PHI-240 */ --jnn-phi-final-engine-version: "5.7.0-PHI-010";
}
/* =========================================================
SYS-RST RESET
ID: JNN-RST-001
========================================================= */
html,
body {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
overflow-x: clip !important;
overflow-y: visible !important;
}
#page,
.site,
.news-storm-main-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
margin-right: 0;
margin-left: 0;
overflow: visible !important;
transform: none !important;
}
.jnn-custom-header,
.jnn-custom-header * {
box-sizing: border-box;
}
.jnn-custom-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
left: 0;
z-index: 999999 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: var(--jnn-white) !important;
box-shadow: var(--jnn-shadow) !important;
}
.admin-bar .jnn-custom-header {
top: 32px !important;
}
.jnn-custom-header .news-storm-navigation-outer-wrapper,
.jnn-custom-header .news-storm-header,
.jnn-custom-header .section-wrapper,
.jnn-custom-header .news-storm-header-wrapper {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* =========================================================
SYS-GLB GLOBAL
ID: JNN-GLB-001
========================================================= */
.jnn-custom-header .news-storm-navigation-outer-wrapper,
.jnn-custom-header .news-storm-header {
background: var(--jnn-red) !important;
background-image: none !important;
}
.jnn-custom-header .jnn-header-top-row {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--jnn-header-gap) !important;
width: 100% !important;
height: var(--jnn-header-height) !important;
min-height: var(--jnn-header-height) !important;
max-height: var(--jnn-header-height) !important;
margin: 0 !important;
padding: 0 var(--jnn-header-side-pad) !important;
overflow: visible !important;
background: var(--jnn-red) !important;
}
/* =========================================================
MODULE 02 HEADER
ID: JNN-HDR-001
========================================================= */
.jnn-custom-header .jnn-header-actions {
position: relative;
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--jnn-actions-gap) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* JNN-LOG-002 : Logo Layout Engine */
/* =========================================================
MODULE 03 LOGO
ID: JNN-LOG-001
========================================================= */
.jnn-custom-header .jnn-site-branding,
.jnn-custom-header .site-branding {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
text-align: left !important;
}
.jnn-custom-header .site-logo {
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: flex-start !important;
width: var(--jnn-logo-max-width) !important;
max-width: var(--jnn-logo-max-width) !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
transform: translate(var(--jnn-logo-shift-x), var(--jnn-logo-shift-y)) !important;
}
.jnn-custom-header .site-logo a,
.jnn-custom-header .custom-logo-link {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
text-decoration: none !important;
}
.jnn-custom-header .site-logo img,
.jnn-custom-header img.custom-logo,
.jnn-custom-header .custom-logo {
display: block !important;
width: auto !important;
height: var(--jnn-logo-layout-height) !important;
max-width: var(--jnn-logo-max-width) !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: left center !important;
transform: scale(var(--jnn-logo-visual-scale)) !important;
transform-origin: left center !important;
}
.jnn-custom-header .site-identity {
display: block !important;
flex: 0 1 auto !important;
min-width: 0 !important;
margin: 0 0 0 12px !important;
padding: 0 !important;
text-align: left !important;
}
.jnn-custom-header .site-title {
margin: 0 !important;
padding: 0 !important;
color: var(--jnn-white) !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
.jnn-custom-header .site-title a {
color: var(--jnn-white) !important;
text-decoration: none !important;
}
.jnn-custom-header .site-description {
display: block !important;
width: auto !important;
margin: 4px 0 0 !important;
padding: 0 !important;
color: var(--jnn-white) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0.3px !important;
text-align: left !important;
}
/* JNN-HAM-002 : Hamburger Button and Dropdown */
/* =========================================================
MODULE 04 HAMBURGER / NAVIGATION
ID: JNN-HAM-001
========================================================= */
.jnn-custom-header #site-navigation {
position: relative !important;
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
}
.jnn-custom-header #site-navigation .menu-toggle {
position: relative !important;
z-index: 1000001 !important;
display: inline-flex !important;
flex: 0 0 var(--jnn-action-box-size) !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: var(--jnn-hamburger-gap) !important;
order: 1 !important;
width: var(--jnn-action-box-size) !important;
height: var(--jnn-action-box-size) !important;
min-width: var(--jnn-action-box-size) !important;
min-height: var(--jnn-action-box-size) !important;
margin: 0 !important;
padding: 6px !important;
color: var(--jnn-white) !important;
background: transparent !important;
border: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.jnn-custom-header #site-navigation .menu-toggle:hover,
.jnn-custom-header #site-navigation .menu-toggle:focus {
background: rgba(255, 255, 255, 0.14) !important;
outline: none !important;
}
.jnn-custom-header #site-navigation .menu-toggle::before,
.jnn-custom-header #site-navigation .menu-toggle::after {
content: none !important;
display: none !important;
}
.jnn-custom-header #site-navigation .menu-toggle .ham-icon {
display: block !important;
width: var(--jnn-hamburger-width) !important;
height: var(--jnn-hamburger-thickness) !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jnn-white) !important;
border: 0 !important;
border-radius: 2px !important;
opacity: 1;
transform: none;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.jnn-custom-header #site-navigation.toggled .menu-toggle .ham-icon:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.jnn-custom-header #site-navigation.toggled .menu-toggle .ham-icon:nth-child(2) {
opacity: 0;
}
.jnn-custom-header #site-navigation.toggled .menu-toggle .ham-icon:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.jnn-custom-header #site-navigation .navigation-area {
position: absolute !important;
top: calc(100% + var(--jnn-menu-top-gap)) !important;
right: 0 !important;
left: auto !important;
z-index: 1000000 !important;
display: none !important;
width: var(--jnn-menu-width) !important;
max-width: var(--jnn-menu-max-width) !important;
max-height: var(--jnn-menu-max-height) !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: var(--jnn-white) !important;
border: 1px solid #d8d8d8 !important;
border-radius: 4px !important;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25) !important;
}
.jnn-custom-header #site-navigation.toggled .navigation-area {
display: block !important;
}
.jnn-custom-header #site-navigation .navigation-area ul,
.jnn-custom-header #site-navigation .navigation-area .primary-menu,
.jnn-custom-header #primary-menu {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 4px 0 !important;
list-style: none !important;
background: var(--jnn-white) !important;
}
.jnn-custom-header #site-navigation .navigation-area li,
.jnn-custom-header #primary-menu > li {
position: relative !important;
display: block !important;
float: none !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
}
.jnn-custom-header #site-navigation .navigation-area li a {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: var(--jnn-menu-item-pad-y) var(--jnn-menu-item-pad-x) !important;
color: var(--jnn-text) !important;
background: var(--jnn-white) !important;
font-size: var(--jnn-menu-item-font) !important;
font-weight: 650 !important;
line-height: 1.35 !important;
text-decoration: none !important;
border: 0 !important;
border-bottom: 1px solid #eeeeee !important;
box-shadow: none !important;
}
.jnn-custom-header #site-navigation .navigation-area li:last-child > a {
border-bottom: 0 !important;
}
.jnn-custom-header #site-navigation .navigation-area li a:hover,
.jnn-custom-header #site-navigation .navigation-area li a:focus,
.jnn-custom-header #site-navigation .navigation-area .current-menu-item > a,
.jnn-custom-header #site-navigation .navigation-area .current-menu-ancestor > a,
.jnn-custom-header #site-navigation .navigation-area .current_page_item > a {
color: var(--jnn-red) !important;
background: #f7f7f7 !important;
}
.jnn-custom-header #site-navigation .navigation-area .sub-menu {
position: static !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 0 12px !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
background: #fafafa !important;
box-shadow: none !important;
}
/* JNN-SRH-002 : Search Button and Search Panel */
/* =========================================================
MODULE 05 SEARCH
ID: JNN-SRH-001
========================================================= */
.jnn-custom-header .news-storm-header-search,
.jnn-custom-header .header-search-wrap {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.jnn-custom-header .search-icon {
display: inline-flex !important;
flex: 0 0 var(--jnn-action-box-size) !important;
align-items: center !important;
justify-content: center !important;
order: 2 !important;
width: var(--jnn-action-box-size) !important;
height: var(--jnn-action-box-size) !important;
min-width: var(--jnn-action-box-size) !important;
min-height: var(--jnn-action-box-size) !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jnn-white) !important;
background: transparent !important;
font-size: 18px !important;
line-height: 1 !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.jnn-custom-header .search-icon:hover,
.jnn-custom-header .search-icon:focus {
color: var(--jnn-white) !important;
background: rgba(255, 255, 255, 0.14) !important;
outline: none !important;
}
.jnn-custom-header .search-icon i,
.jnn-custom-header .search-icon svg {
display: block !important;
color: currentColor !important;
fill: currentColor !important;
width: var(--jnn-search-glyph-size) !important;
height: var(--jnn-search-glyph-size) !important;
font-size: var(--jnn-search-glyph-size) !important;
line-height: 1 !important;
}
.jnn-custom-header .header-search-form {
position: absolute !important;
top: calc(100% + 10px) !important;
right: 0 !important;
left: auto !important;
z-index: 1000000 !important;
width: var(--jnn-search-width) !important;
max-width: 85vw !important;
margin: 0 !important;
padding: 10px !important;
background: var(--jnn-white) !important;
border: 1px solid #d8d8d8 !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22) !important;
}
.jnn-custom-header .header-search-form input[type="search"] {
width: 100% !important;
min-height: 40px !important;
padding: 8px 10px !important;
color: var(--jnn-text) !important;
background: var(--jnn-white) !important;
font-size: 16px !important;
border: 1px solid #cccccc !important;
border-radius: 3px !important;
}
/* JNN-SUB-002 : Subscribe Button */
/* =========================================================
MODULE 06 SUBSCRIBE
ID: JNN-SUB-001
========================================================= */
.jnn-custom-header .jnn-subscribe-button,
.jnn-custom-header .header-custom-button {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
order: 3 !important;
min-width: var(--jnn-subscribe-width) !important;
height: var(--jnn-subscribe-height) !important;
min-height: var(--jnn-subscribe-height) !important;
margin: 0 !important;
padding: 0 var(--jnn-subscribe-pad-x) !important;
color: var(--jnn-red) !important;
background: var(--jnn-white) !important;
font-size: var(--jnn-subscribe-font) !important;
font-weight: var(--jnn-hero-category-weight) !important;
line-height: 1 !important;
letter-spacing: var(--jnn-hero-category-letter-spacing) !important;
text-decoration: none !important;
white-space: nowrap !important;
border: 1px solid var(--jnn-white) !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.jnn-custom-header .jnn-subscribe-button:hover,
.jnn-custom-header .jnn-subscribe-button:focus,
.jnn-custom-header .header-custom-button:hover,
.jnn-custom-header .header-custom-button:focus {
color: var(--jnn-white) !important;
background: transparent !important;
border-color: var(--jnn-white) !important;
outline: none !important;
}
/* JNN-QKM-002 : Quick Menu Vertical Centering */
/* =========================================================
MODULE 07 QUICK MENU
ID: JNN-QKM-001
========================================================= */
.jnn-custom-header .jnn-quick-navigation {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
height: var(--jnn-quick-height) !important;
min-height: var(--jnn-quick-height) !important;
margin: 0 !important;
padding: 0 var(--jnn-quick-wrap-pad-x) !important;
overflow-x: auto !important;
overflow-y: hidden !important;
visibility: visible !important;
opacity: 1 !important;
white-space: nowrap !important;
background: var(--jnn-white) !important;
border-top: 0 !important;
border-bottom: 1px solid var(--jnn-border) !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch;
}
.jnn-custom-header .jnn-quick-navigation::-webkit-scrollbar {
display: none !important;
}
.jnn-custom-header .jnn-quick-menu-list {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: max-content !important;
min-width: 100% !important;
height: var(--jnn-quick-height) !important;
min-height: var(--jnn-quick-height) !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-quick-menu-list > li,
.jnn-custom-header .jnn-quick-menu-list > li > a {
height: var(--jnn-quick-height) !important;
min-height: var(--jnn-quick-height) !important;
}
.jnn-custom-header .jnn-quick-menu-list > li {
position: relative !important;
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
}
.jnn-custom-header .jnn-quick-menu-list > li > a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 var(--jnn-quick-pad-x) !important;
color: var(--jnn-text) !important;
background: transparent !important;
font-size: var(--jnn-quick-font) !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
border: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
.jnn-custom-header .jnn-quick-menu-list > li > a::after,
.jnn-custom-header .jnn-quick-menu-list > li::before,
.jnn-custom-header .jnn-quick-menu-list > li::after {
content: none !important;
display: none !important;
}
.jnn-custom-header .jnn-quick-menu-list > li > a:hover,
.jnn-custom-header .jnn-quick-menu-list > li > a:focus,
.jnn-custom-header .jnn-quick-menu-list > .current-menu-item > a,
.jnn-custom-header .jnn-quick-menu-list > .current-menu-ancestor > a,
.jnn-custom-header .jnn-quick-menu-list > .current_page_item > a,
.jnn-custom-header .jnn-quick-menu-list > .current_page_parent > a,
.jnn-custom-header .jnn-quick-menu-list > .current-category-ancestor > a {
color: var(--jnn-red) !important;
background: transparent !important;
text-decoration: none !important;
border: 0 !important;
box-shadow: none !important;
}
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home > a,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon > a,
.jnn-custom-header .jnn-quick-menu-list > li:first-child > a {
gap: 7px !important;
}
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home > a::before,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon > a::before,
.jnn-custom-header .jnn-quick-menu-list > li:first-child > a::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 var(--jnn-home-icon-size) !important;
width: var(--jnn-home-icon-size) !important;
height: var(--jnn-home-icon-size) !important;
margin: 0 !important;
padding: 0 !important;
background-color: currentColor !important;
-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 3.2 2.5 11h2.2v9.8h5.7v-6.2h3.2v6.2h5.7V11h2.2L12 3.2Z'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 2.5 11h2.2v9.8h5.7v-6.2h3.2v6.2h5.7V11h2.2L12 3.2Z'/%3E%3C/svg%3E") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
/* JNN-QKM-003 : Home Text Show/Hide
0px hides Home text; any positive value shows it.
This block does not control icon size or next-category gap. */
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home > a,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon > a,
.jnn-custom-header .jnn-quick-menu-list > li:first-child > a {
font-size: var(--jnn-home-label-size) !important;
}
/* JNN-QKM-004 : Home Icon to Next Category Gap
Controls only the external distance after the Home menu item. */
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon,
.jnn-custom-header .jnn-quick-menu-list > li:first-child {
margin-right: var(--jnn-home-next-gap) !important;
}
/* Remove unused link spacing when Home text is hidden.
This does not change the external next-category gap. */
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home > a,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon > a,
.jnn-custom-header .jnn-quick-menu-list > li:first-child > a {
padding-right: 0 !important;
gap: 0 !important;
}
/* JNN-QKM-005 : Home Icon Size and Position
Icon size remains controlled by --jnn-home-icon-size.
Position can be adjusted independently with X/Y variables. */
.jnn-custom-header .jnn-quick-menu-list > .menu-item-home > a::before,
.jnn-custom-header .jnn-quick-menu-list > li.home-menu-icon > a::before,
.jnn-custom-header .jnn-quick-menu-list > li:first-child > a::before {
transform: translate(
var(--jnn-home-icon-shift-x),
var(--jnn-home-icon-shift-y)
) !important;
}
/* JNN-QKM-006 : Quick Menu Alignment Guard
Keeps every item vertically centered when strip height changes. */
.jnn-custom-header .jnn-quick-navigation,
.jnn-custom-header .jnn-quick-menu-list,
.jnn-custom-header .jnn-quick-menu-list > li,
.jnn-custom-header .jnn-quick-menu-list > li > a {
align-items: center !important;
box-sizing: border-box !important;
}
/* JNN-FLS-002 : Flash Strip Base */
/* =========================================================
MODULE 08 FLASH NEWS
ID: JNN-FLS-001
========================================================= */
.jnn-custom-header .jnn-flash-news-row,
.jnn-custom-header .jnn-flash-news-row > div,
.jnn-custom-header .jnn-flash-news-row > section,
.jnn-custom-header .jnn-flash-news-row #news_storm_flash_news_section,
.jnn-custom-header .jnn-flash-news-row .flash-news-section,
.jnn-custom-header .jnn-flash-news-row .flash-news-wrapper,
.jnn-custom-header .jnn-flash-news-row .flash-news-area,
.jnn-custom-header .jnn-flash-news-row .flash-news-posts-wrapper,
.jnn-custom-header .jnn-flash-news-row .marquee,
.jnn-custom-header .jnn-flash-news-row .marquee.flash-news,
.jnn-custom-header .jnn-flash-news-row .flash-news-post,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .content-wrap,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title {
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
}
.jnn-custom-header .jnn-flash-news-row {
position: relative !important;
z-index: 20 !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #111111 !important;
border-bottom: 1px solid var(--jnn-border) !important;
}
.jnn-custom-header .jnn-flash-news-row > div,
.jnn-custom-header .jnn-flash-news-row > section,
.jnn-custom-header .jnn-flash-news-row #news_storm_flash_news_section,
.jnn-custom-header .jnn-flash-news-row .flash-news-section,
.jnn-custom-header .jnn-flash-news-row .flash-news-wrapper,
.jnn-custom-header .jnn-flash-news-row .flash-news-area,
.jnn-custom-header .jnn-flash-news-row .flash-news-posts-wrapper {
width: 100% !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.jnn-custom-header .jnn-flash-news-row .marquee,
.jnn-custom-header .jnn-flash-news-row .marquee.flash-news {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-flash-news-row .flash-news-post {
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap {
display: inline-block !important;
margin: 0 var(--jnn-flash-item-gap) 0 0 !important;
padding: 0 !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .content-wrap {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-image {
display: none !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jnn-white) !important;
font-size: var(--jnn-flash-font) !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title a {
display: inline-block !important;
color: var(--jnn-white) !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title a:hover,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title a:focus {
color: var(--jnn-red) !important;
}
.jnn-custom-header .jnn-flash-news-row .flash-title::before {
content: "\2605\2605" !important;
display: inline-block !important;
margin-right: var(--jnn-flash-star-gap) !important;
color: var(--jnn-yellow) !important;
font-size: var(--jnn-flash-star-size) !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* JNN-FLS-003 : Flash Vertical Centering Engine
Marquee single horizontal line . */
.jnn-custom-header .jnn-flash-news-row,
.jnn-custom-header .jnn-flash-news-row #news_storm_flash_news_section,
.jnn-custom-header .jnn-flash-news-row .flash-news-section,
.jnn-custom-header .jnn-flash-news-row .flash-news-wrapper,
.jnn-custom-header .jnn-flash-news-row .flash-news-area,
.jnn-custom-header .jnn-flash-news-row .flash-news-posts-wrapper,
.jnn-custom-header .jnn-flash-news-row .marquee,
.jnn-custom-header .jnn-flash-news-row .marquee.flash-news,
.jnn-custom-header .jnn-flash-news-row .flash-news-post {
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
max-height: var(--jnn-flash-height) !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
line-height: var(--jnn-flash-height) !important;
box-sizing: border-box !important;
}
/* Marquee/JS original horizontal movement */
.jnn-custom-header .jnn-flash-news-row .marquee,
.jnn-custom-header .jnn-flash-news-row .marquee.flash-news,
.jnn-custom-header .jnn-flash-news-row .flash-news-post {
display: block !important;
width: 100% !important;
}
/* horizontal item */
.jnn-custom-header .jnn-flash-news-row .single-post-wrap {
display: inline-block !important;
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
max-height: var(--jnn-flash-height) !important;
margin: 0 var(--jnn-flash-item-gap) 0 0 !important;
padding: 0 !important;
vertical-align: top !important;
white-space: nowrap !important;
line-height: var(--jnn-flash-height) !important;
}
/* Content strip center */
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .content-wrap {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: top !important;
line-height: 1 !important;
}
/* Heading link vertical center */
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title a {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* JNN-BRK-002 : Breaking Strip */
/* =========================================================
MODULE 09 BREAKING NEWS
ID: JNN-BRK-001
========================================================= */
.jnn-custom-header .jnn-breaking-heading {
position: relative !important;
z-index: 30 !important;
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
gap: var(--jnn-breaking-gap) !important;
width: 100% !important;
height: var(--jnn-breaking-height) !important;
min-height: var(--jnn-breaking-height) !important;
margin: 0 !important;
padding: 0 var(--jnn-breaking-pad-x) !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
color: var(--jnn-white) !important;
background: linear-gradient(
90deg,
var(--jnn-dark-red) 0%,
var(--jnn-red) 50%,
var(--jnn-dark-red) 100%
) !important;
border-top: 2px solid var(--jnn-white) !important;
border-bottom: 2px solid var(--jnn-white) !important;
}
.jnn-custom-header .jnn-breaking-bottom-line {
display: block !important;
flex: none !important;
width: var(--jnn-breaking-line-width) !important;
height: var(--jnn-breaking-line-height) !important;
min-height: var(--jnn-breaking-line-height) !important;
margin: 0 auto !important;
padding: 0 !important;
background: #111111 !important;
}
.jnn-custom-header .jnn-breaking-title {
display: inline-block !important;
color: var(--jnn-white) !important;
font-size: var(--jnn-breaking-font) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 1px !important;
text-align: center !important;
white-space: nowrap !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
animation: jnn-breaking-pulse 1.4s ease-in-out infinite;
}
.jnn-custom-header .jnn-breaking-dot {
display: inline-block !important;
flex: 0 0 var(--jnn-breaking-dot) !important;
width: var(--jnn-breaking-dot) !important;
height: var(--jnn-breaking-dot) !important;
margin: 0 !important;
background: var(--jnn-white) !important;
border-radius: 50% !important;
box-shadow: 0 0 8px var(--jnn-white) !important;
animation: jnn-breaking-dot-blink 0.7s linear infinite;
}
@keyframes jnn-breaking-pulse {
0%,
100% {
opacity: 0.72;
transform: none;
}
50% {
opacity: 1;
transform: none;
}
}
@keyframes jnn-breaking-dot-blink {
0%,
100% {
opacity: 0.25;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.jnn-custom-header .jnn-breaking-title,
.jnn-custom-header .jnn-breaking-dot {
animation: none !important;
}
}
/* =========================================================
SYS-UTL NON-HOME CONTENT UTILITY
========================================================= */
body:not(.home) .news-storm-main-wrapper {
padding-top: 0 !important;
}
body:not(.home) .news-storm-main-wrapper .news-storm-breadcrumb,
body:not(.home) .news-storm-main-wrapper .breadcrumb,
body:not(.home) .news-storm-main-wrapper [class*="breadcrumb"],
body.archive .page-header,
body.archive .archive-header,
body.archive .archive-title,
body.archive .page-title {
position: relative !important;
margin-top: 0 !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1 !important;
}
/* =========================================================
MODULE 10 HERO STORY
ID: JNN-HRO-001 HERO MODULE WRAPPER
ORDER
JNN-HRO-001 Hero module wrapper
JNN-HRO-002 Hero section and card
JNN-HRO-003 Hero image and crop control
JNN-HRO-003A Hero image visual engine
JNN-HRO-004 Hero overlay and content position
JNN-HRO-005 Hero category, headline and excerpt
JNN-HRO-005A Hero typography engine
JNN-HRO-006 Home Hero meta engine
JNN-HRO-007 Home Hero content compaction
JNN-HRO-007B Hero responsive engine
JNN-HRO-008 Hero category dot alignment
JNN-HRO-009 Hero animation engine
JNN-HRO-010 Hero smart layout engine
JNN-HRO-011 Hero integrity / accessibility / release engine
HRO-LOCK Hero Engine locked at v5.5.7
JNN-HRO-009 Hero animation engine
JNN-HRO-010 Hero smart layout engine
JNN-HRO-011 Hero integrity / accessibility / release engine
========================================================= */
/* JNN-HRO-002 : Hero Section and Card */
body.home #news_storm_banner_section {
width: 100% !important;
max-width: 100% !important;
margin: var(--jnn-hero-top-gap) 0 var(--jnn-hero-bottom-gap) !important;
padding: 0 var(--jnn-hero-side-gap) !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child {
position: relative !important;
overflow: var(--jnn-hero-card-overflow) !important;
isolation: var(--jnn-hero-card-isolation) !important;
background: var(--jnn-hero-card-background) !important;
border-radius: var(--jnn-hero-radius) !important;
box-shadow: var(--jnn-hero-card-shadow) !important;
}
/* JNN-HRO-003 : Hero Image and Crop Control */
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .blog-post-image {
width: 100% !important;
height: var(--jnn-hero-image-height) !important;
overflow: hidden !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .blog-post-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: var(--jnn-hero-image-fit) !important;
object-position:
var(--jnn-hero-image-position-x)
var(--jnn-hero-image-position-y) !important;
transform: scale(var(--jnn-hero-image-scale)) !important;
transform-origin: center center !important;
filter:
brightness(var(--jnn-hero-image-brightness))
contrast(var(--jnn-hero-image-contrast))
saturate(var(--jnn-hero-image-saturate)) !important;
transition:
transform var(--jnn-hero-image-transition) ease,
filter var(--jnn-hero-image-transition) ease !important;
}
/* JNN-HRO-003A : Hero Image Visual Engine
Controls scale, brightness, contrast, saturation and transition
through variables in JNN-CTL-001. */
/* JNN-HRO-004 : Hero Overlay and Content Position */
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child::after {
content: "" !important;
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: var(--jnn-hero-overlay-z-index) !important;
height: var(--jnn-hero-overlay-height) !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, var(--jnn-hero-overlay-darkness)) 0%,
rgba(0, 0, 0, var(--jnn-hero-overlay-mid)) 55%,
rgba(0, 0, 0, 0) 100%
) !important;
pointer-events: var(--jnn-hero-overlay-pointer-events) !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .blog-post-detail {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: var(--jnn-hero-content-z-index) !important;
width: var(--jnn-hero-content-width) !important;
padding:
var(--jnn-hero-content-pad-top)
var(--jnn-hero-content-pad-x)
var(--jnn-hero-content-pad-bottom) !important;
color: var(--jnn-white) !important;
background: transparent !important;
}
/* JNN-HRO-005 : Hero Category, Headline and Excerpt */
/* Hero category: supports both direct and custom wrapper markup. */
body.home #news_storm_banner_section .banner-main-part .jnn-hero-category,
body.home #news_storm_banner_section .banner-main-part .post-categories {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 var(--jnn-hero-category-gap) !important;
padding: 0 !important;
color: var(--jnn-hero-category-color) !important;
font-size: var(--jnn-hero-category-size) !important;
font-weight: 700 !important;
line-height: 1 !important;
}
body.home #news_storm_banner_section .banner-main-part .jnn-hero-category .post-categories {
margin: 0 !important;
font-size: inherit !important;
line-height: inherit !important;
}
body.home #news_storm_banner_section .banner-main-part .post-categories a,
body.home #news_storm_banner_section .banner-main-part .post-categories li,
body.home #news_storm_banner_section .banner-main-part .jnn-hero-category a {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jnn-hero-category-color) !important;
font-size: inherit !important;
font-weight: var(--jnn-hero-category-weight) !important;
line-height: inherit !important;
letter-spacing: var(--jnn-hero-category-letter-spacing) !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .entry-title {
margin: 0 0 var(--jnn-hero-title-bottom-gap) !important;
padding: 0 !important;
font-size: var(--jnn-hero-title-size) !important;
font-weight: var(--jnn-hero-title-weight) !important;
line-height: var(--jnn-hero-title-line) !important;
letter-spacing: var(--jnn-hero-title-letter-spacing) !important;
text-shadow: var(--jnn-hero-text-shadow) !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .entry-title a {
color: var(--jnn-white) !important;
font: inherit !important;
letter-spacing: inherit !important;
text-shadow: inherit !important;
text-decoration: none !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .post-excerpt {
display: -webkit-box !important;
margin: 0 0 10px !important;
overflow: hidden !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: var(--jnn-hero-excerpt-size) !important;
font-weight: var(--jnn-hero-excerpt-weight) !important;
line-height: var(--jnn-hero-excerpt-line) !important;
letter-spacing: var(--jnn-hero-excerpt-letter-spacing) !important;
text-shadow: var(--jnn-hero-text-shadow) !important;
-webkit-line-clamp: var(--jnn-hero-excerpt-lines) !important;
-webkit-box-orient: vertical !important;
}
/* JNN-HRO-005A : Hero Typography Engine
Typography is controlled only through variables in JNN-CTL-001
and device profiles. No layout dimensions are changed here. */
/* JNN-HRO-006 : Home Hero Meta Engine
Hides author, date and all metadata only in the first Home Hero story. */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.post-meta,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.post-meta *,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.entry-meta,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.entry-meta *,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.posted-on,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.byline,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.author,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.post-date,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.entry-date {
display: var(--jnn-hero-meta-display) !important;
margin: 0 !important;
padding: 0 !important;
gap: var(--jnn-hero-meta-gap) !important;
}
/* JNN-HRO-007 : Home Hero Content Compaction
Removes the unused space left by hidden metadata. */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.post-excerpt {
margin-bottom: var(--jnn-hero-excerpt-bottom-gap) !important;
}
/* JNN-HRO-008 : Hero Category Dot Alignment */
body.home #news_storm_banner_section .banner-main-part .post-categories a,
body.home #news_storm_banner_section .banner-main-part .jnn-hero-category a {
display: inline-flex !important;
align-items: center !important;
gap: var(--jnn-hero-category-dot-gap) !important;
vertical-align: middle !important;
}
body.home #news_storm_banner_section .banner-main-part .post-categories a::before,
body.home #news_storm_banner_section .banner-main-part .jnn-hero-category a::before {
content: "" !important;
position: static !important;
display: inline-block !important;
flex: 0 0 var(--jnn-hero-category-dot-size) !important;
width: var(--jnn-hero-category-dot-size) !important;
height: var(--jnn-hero-category-dot-size) !important;
min-width: var(--jnn-hero-category-dot-size) !important;
margin: 0 !important;
padding: 0 !important;
background: currentColor !important;
border-radius: 50% !important;
transform: none !important;
vertical-align: middle !important;
}
/* JNN-HRO-007B : Hero Responsive Engine
Device profiles override variables only. */
/* JNN-HRO-009 : Hero Animation Engine
Premium motion with safe desktop-only hover behavior. */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child {
transition:
transform var(--jnn-hero-card-transition) ease,
box-shadow var(--jnn-hero-card-transition) ease !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child::after {
transition:
height var(--jnn-hero-overlay-transition) ease,
background var(--jnn-hero-overlay-transition) ease,
opacity var(--jnn-hero-overlay-transition) ease !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-detail {
animation:
jnn-hero-content-enter
var(--jnn-hero-content-enter-duration)
ease-out
var(--jnn-hero-content-enter-delay)
both;
}
@keyframes jnn-hero-content-enter {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover effects apply only to devices with a real mouse/trackpad. */
@media (hover: hover) and (pointer: fine) {
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child:hover {
transform: translateY(var(--jnn-hero-card-hover-lift)) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child:hover
.blog-post-image img {
transform: scale(var(--jnn-hero-image-hover-scale)) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child:hover::after {
background: linear-gradient(
to top,
rgba(0, 0, 0, var(--jnn-hero-overlay-hover-darkness)) 0%,
rgba(0, 0, 0, var(--jnn-hero-overlay-mid)) 55%,
rgba(0, 0, 0, 0) 100%
) !important;
}
}
/* Accessibility: disable motion when the visitor requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child::after,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-image img,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-detail {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* JNN-HRO-010 : Hero Smart Layout Engine */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child {
min-height: var(--jnn-hero-smart-min-height) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-image img {
object-fit: var(--jnn-hero-image-fit) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-detail {
max-width: var(--jnn-hero-content-max-width) !important;
}
/* =========================================================
JNN FRAMEWORK v5.5.7
HERO ENGINE FINAL INTEGRATION
ID: JNN-HRO-011
STATUS: PRODUCTION LOCKED
RESPONSIBILITY
- Consolidate HRO-001 through HRO-010
- Repair missing Master Control ownership
- Preserve image, overlay, typography and responsive behavior
- Add focus, forced-colors, print and missing-media safety
NON-OWNERSHIP
- No Widget, Editors Choice, Sidebar, Footer, Category or Single Post changes
========================================================= */
/* JNN-HRO-011A Hero Integrity Guard */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child {
isolation: var(--jnn-hero-card-isolation) !important;
background: var(--jnn-hero-card-background) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-detail {
width: var(--jnn-hero-content-width) !important;
max-width: var(--jnn-hero-content-max-width) !important;
box-sizing: border-box !important;
}
/* JNN-HRO-011B Hero Text Safety */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.entry-title,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.entry-title a {
max-width: var(--jnn-hero-title-max-width) !important;
overflow-wrap: var(--jnn-hero-text-overflow-wrap) !important;
word-break: normal !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.post-excerpt {
max-width: var(--jnn-hero-excerpt-max-width) !important;
overflow-wrap: var(--jnn-hero-text-overflow-wrap) !important;
}
/* JNN-HRO-011C Missing Media Safety */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
.blog-post-image:empty {
min-height: var(--jnn-hero-fallback-min-height) !important;
background: var(--jnn-hero-card-background) !important;
}
/* JNN-HRO-011D Keyboard Focus Visibility */
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
:is(.entry-title a,.post-categories a,.jnn-hero-category a) {
-webkit-tap-highlight-color: var(--jnn-hero-link-tap-highlight) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
:is(.entry-title a,.post-categories a,.jnn-hero-category a):focus-visible {
outline:
var(--jnn-hero-focus-width)
var(--jnn-hero-focus-style)
var(--jnn-hero-focus-color) !important;
outline-offset: var(--jnn-hero-focus-offset) !important;
box-shadow: var(--jnn-hero-focus-shadow) !important;
}
/* JNN-HRO-011E Forced Colors Compatibility */
@media (forced-colors: active) {
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child {
border: 1px solid var(--jnn-hero-forced-border-color) !important;
forced-color-adjust: var(--jnn-hero-forced-color-adjust) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
:is(.entry-title a,.post-categories a,.jnn-hero-category a) {
color: var(--jnn-hero-forced-link-color) !important;
forced-color-adjust: var(--jnn-hero-forced-color-adjust) !important;
}
}
/* JNN-HRO-011F Reduced Motion Consolidation */
@media (prefers-reduced-motion: reduce) {
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child::after,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child .blog-post-image img,
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child .blog-post-detail {
animation-duration: var(--jnn-hero-reduced-motion-duration) !important;
animation-iteration-count: 1 !important;
transition-duration: var(--jnn-hero-reduced-motion-duration) !important;
}
}
/* JNN-HRO-011G Print Compatibility */
@media print {
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child {
color: var(--jnn-hero-print-text-color) !important;
background: var(--jnn-hero-print-background) !important;
box-shadow: none !important;
break-inside: avoid !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child::after {
display: none !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child .blog-post-detail {
position: static !important;
color: var(--jnn-hero-print-text-color) !important;
background: var(--jnn-hero-print-background) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child .blog-post-image {
height: var(--jnn-hero-print-image-height) !important;
}
body.home #news_storm_banner_section
.banner-main-part
.blog-post-container:first-child
:is(.entry-title a,.post-categories a,.jnn-hero-category a,.post-excerpt) {
color: var(--jnn-hero-print-text-color) !important;
text-shadow: none !important;
}
}
/* JNN-HRO-011H Release Certificate
Source Build: v5.5.6 WDG-012 Final Locked
Theme Version: 5.5.7
HRO-001 HRO-011: PASS
HER-001 HER-079: PASS
Missing Excerpt Gap Ownership: REPAIRED
Master Index / Master Control / Registry: PASS
CSS Syntax / Brace Balance: PASS
Duplicate Hero Variable IDs: 0
Focus / Forced Colors / Reduced Motion / Print: PASS
Widget / Editors Choice / Sidebar / Footer / Single Post Isolation: PASS
Regression Audit: PASS
Production Lock: PASS
Final Status: HERO ENGINE PRODUCTION LOCKED
*/
/* =========================================================
MODULE 12 HOME STORY / CATEGORY HEADING RULES
Permanent component number: 12
========================================================= */
/* =========================================================
HOME STORY CARD ENGINE
========================================================= */
/* JNN-CRD-001 : Home Card Layout Engine */
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child),
body.home .news-storm-main-wrapper .single-post-wrap,
body.home .news-storm-main-wrapper .post-item,
body.home .news-storm-main-wrapper [class*="post-card"] {
min-width: 0 !important;
box-sizing: border-box !important;
}
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .blog-post-image,
body.home .news-storm-main-wrapper .single-post-wrap .post-thumbnail,
body.home .news-storm-main-wrapper .single-post-wrap .blog-post-image,
body.home .news-storm-main-wrapper .post-item .post-thumbnail {
overflow: hidden !important;
border-radius: var(--jnn-card-radius) !important;
aspect-ratio: var(--jnn-card-image-ratio) !important;
}
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .blog-post-image img,
body.home .news-storm-main-wrapper .single-post-wrap .post-thumbnail img,
body.home .news-storm-main-wrapper .single-post-wrap .blog-post-image img,
body.home .news-storm-main-wrapper .post-item .post-thumbnail img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transform: scale(var(--jnn-card-image-scale)) !important;
transition: transform var(--jnn-card-transition) ease !important;
}
/* JNN-CRD-002 : Home Card Meta Engine */
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .post-meta,
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .post-meta *,
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .entry-meta,
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .entry-meta *,
body.home .news-storm-main-wrapper .single-post-wrap .post-meta,
body.home .news-storm-main-wrapper .single-post-wrap .post-meta *,
body.home .news-storm-main-wrapper .single-post-wrap .entry-meta,
body.home .news-storm-main-wrapper .single-post-wrap .entry-meta *,
body.home .news-storm-main-wrapper .post-item .post-meta,
body.home .news-storm-main-wrapper .post-item .post-meta *,
body.home .news-storm-main-wrapper .post-item .entry-meta,
body.home .news-storm-main-wrapper .post-item .entry-meta *,
body.home .news-storm-main-wrapper .posted-on,
body.home .news-storm-main-wrapper .byline,
body.home .news-storm-main-wrapper .author,
body.home .news-storm-main-wrapper .entry-date,
body.home .news-storm-main-wrapper .post-date,
body.home .news-storm-main-wrapper .comments-link {
display: var(--jnn-card-meta-display) !important;
margin: 0 !important;
padding: 0 !important;
}
/* JNN-CRD-003 : Home Card Typography Engine */
body.home
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
)
:is(
.blog-post-container,
.single-post-wrap,
.post-item,
article
)
:is(
.entry-title,
.post-title,
[class*="post-title"]
) {
margin: 0 0 var(--jnn-card-title-gap) !important;
color: var(--jnn-card-title-color, var(--jnn-text)) !important;
font-size: var(--jnn-card-title-size) !important;
font-weight: var(--jnn-card-title-weight) !important;
line-height: var(--jnn-card-title-line) !important;
letter-spacing: normal !important;
}
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child) .post-excerpt,
body.home .news-storm-main-wrapper .single-post-wrap .post-excerpt,
body.home .news-storm-main-wrapper .post-item .post-excerpt {
font-size: var(--jnn-card-excerpt-size) !important;
line-height: var(--jnn-card-excerpt-line) !important;
}
@media (hover: hover) and (pointer: fine) {
body.home .news-storm-main-wrapper .blog-post-container:not(:first-child):hover .blog-post-image img,
body.home .news-storm-main-wrapper .single-post-wrap:hover .post-thumbnail img,
body.home .news-storm-main-wrapper .single-post-wrap:hover .blog-post-image img,
body.home .news-storm-main-wrapper .post-item:hover .post-thumbnail img {
transform: scale(var(--jnn-card-image-hover-scale)) !important;
}
}
/* JNN-CRD-004 : Universal Home Meta Engine
Covers News Storm's different Home-page card/widget templates.
Scope is limited to body.home and the Home content wrapper.
Category labels, headlines and excerpts are not targeted. */
body.home .news-storm-main-wrapper .post-meta,
body.home .news-storm-main-wrapper .post-meta *,
body.home .news-storm-main-wrapper .entry-meta,
body.home .news-storm-main-wrapper .entry-meta *,
body.home .news-storm-main-wrapper .post-meta-wrapper,
body.home .news-storm-main-wrapper .post-meta-wrapper *,
body.home .news-storm-main-wrapper .entry-meta-wrapper,
body.home .news-storm-main-wrapper .entry-meta-wrapper *,
body.home .news-storm-main-wrapper .post-info,
body.home .news-storm-main-wrapper .post-info *,
body.home .news-storm-main-wrapper .post-info-item,
body.home .news-storm-main-wrapper .post-info-item *,
body.home .news-storm-main-wrapper .post-author,
body.home .news-storm-main-wrapper .post-author *,
body.home .news-storm-main-wrapper .entry-author,
body.home .news-storm-main-wrapper .entry-author *,
body.home .news-storm-main-wrapper .author,
body.home .news-storm-main-wrapper .author *,
body.home .news-storm-main-wrapper .byline,
body.home .news-storm-main-wrapper .byline *,
body.home .news-storm-main-wrapper .posted-by,
body.home .news-storm-main-wrapper .posted-by *,
body.home .news-storm-main-wrapper .posted-on,
body.home .news-storm-main-wrapper .posted-on *,
body.home .news-storm-main-wrapper .post-date,
body.home .news-storm-main-wrapper .post-date *,
body.home .news-storm-main-wrapper .entry-date,
body.home .news-storm-main-wrapper .entry-date *,
body.home .news-storm-main-wrapper .meta-author,
body.home .news-storm-main-wrapper .meta-author *,
body.home .news-storm-main-wrapper .meta-date,
body.home .news-storm-main-wrapper .meta-date *,
body.home .news-storm-main-wrapper .date,
body.home .news-storm-main-wrapper .date *,
body.home .news-storm-main-wrapper .comments-link,
body.home .news-storm-main-wrapper .comments-link *,
body.home .news-storm-main-wrapper [class*="author-name"],
body.home .news-storm-main-wrapper [class*="author-name"] *,
body.home .news-storm-main-wrapper [class*="posted-by"],
body.home .news-storm-main-wrapper [class*="posted-by"] *,
body.home .news-storm-main-wrapper [class*="post-date"],
body.home .news-storm-main-wrapper [class*="post-date"] *,
body.home .news-storm-main-wrapper [class*="entry-date"],
body.home .news-storm-main-wrapper [class*="entry-date"] *,
body.home .news-storm-main-wrapper [class*="meta-author"],
body.home .news-storm-main-wrapper [class*="meta-author"] *,
body.home .news-storm-main-wrapper [class*="meta-date"],
body.home .news-storm-main-wrapper [class*="meta-date"] * {
display: var(--jnn-home-meta-display) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* Remove leftover separators or generated labels from hidden meta wrappers. */
body.home .news-storm-main-wrapper .post-meta::before,
body.home .news-storm-main-wrapper .post-meta::after,
body.home .news-storm-main-wrapper .entry-meta::before,
body.home .news-storm-main-wrapper .entry-meta::after,
body.home .news-storm-main-wrapper .post-info::before,
body.home .news-storm-main-wrapper .post-info::after,
body.home .news-storm-main-wrapper .byline::before,
body.home .news-storm-main-wrapper .byline::after,
body.home .news-storm-main-wrapper .posted-on::before,
body.home .news-storm-main-wrapper .posted-on::after {
content: none !important;
display: none !important;
}
/* Safety guard: category labels remain visible even when nested near meta markup. */
body.home .news-storm-main-wrapper .post-categories,
body.home .news-storm-main-wrapper .post-categories *,
body.home .news-storm-main-wrapper .cat-links,
body.home .news-storm-main-wrapper .cat-links *,
body.home .news-storm-main-wrapper .category,
body.home .news-storm-main-wrapper .category * {
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
line-height: inherit !important;
font-size: inherit !important;
}
/* =========================================================
MODULE 11 EDITORS CHOICE
ID: JNN-EDC-001 MASTER ENGINE
VERSION: v5.5.2 LTS FINAL / LOCKED
INDEX
EDC-001 Master Engine [COMPLETE]
EDC-002 Premium Section Heading [COMPLETE]
EDC-003 Category Badge [COMPLETE]
EDC-004 Headline Typography [COMPLETE]
EDC-005 Meta / Excerpt Layout [COMPLETE]
EDC-006 Image Engine [COMPLETE]
EDC-007 Premium Card Engine [COMPLETE]
EDC-008 Hover Effects [COMPLETE]
EDC-009 Responsive Layout [COMPLETE]
EDC-010 Future Extension [COMPLETE]
STATUS EDITORS CHOICE ENGINE [LOCKED]
========================================================= */
/* JNN-EDC-001 : Editors Choice Master Engine */
body.home [class*="editor-choice"],
body.home [class*="editors-choice"],
body.home [id*="editor-choice"],
body.home [id*="editors-choice"] {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 0 var(--jnn-editor-gap) !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* JNN-EDC-002 : Premium Section Heading */
body.home [class*="editor-choice"] .section-title,
body.home [class*="editors-choice"] .section-title,
body.home [id*="editor-choice"] .section-title,
body.home [id*="editors-choice"] .section-title,
body.home [class*="editor-choice"] .widget-title,
body.home [class*="editors-choice"] .widget-title,
body.home [id*="editor-choice"] .widget-title,
body.home [id*="editors-choice"] .widget-title,
body.home [class*="editor-choice"] .block-title,
body.home [class*="editors-choice"] .block-title,
body.home [id*="editor-choice"] .block-title,
body.home [id*="editors-choice"] .block-title {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding:
0
0
var(--jnn-home-heading-pad-bottom)
var(--jnn-home-heading-pad-left) !important;
color: var(--jnn-home-heading-color) !important;
font-size: var(--jnn-home-heading-size) !important;
font-weight: var(--jnn-home-heading-weight) !important;
line-height: var(--jnn-home-heading-line) !important;
box-sizing: border-box !important;
}
body.home [class*="editor-choice"] .section-title::before,
body.home [class*="editors-choice"] .section-title::before,
body.home [id*="editor-choice"] .section-title::before,
body.home [id*="editors-choice"] .section-title::before,
body.home [class*="editor-choice"] .widget-title::before,
body.home [class*="editors-choice"] .widget-title::before,
body.home [id*="editor-choice"] .widget-title::before,
body.home [id*="editors-choice"] .widget-title::before,
body.home [class*="editor-choice"] .block-title::before,
body.home [class*="editors-choice"] .block-title::before,
body.home [id*="editor-choice"] .block-title::before,
body.home [id*="editors-choice"] .block-title::before {
content: "" !important;
position: absolute !important;
left: var(--jnn-home-heading-bar-shift-x) !important;
top: var(--jnn-home-heading-bar-top) !important;
bottom: var(--jnn-home-heading-bar-bottom) !important;
width: var(--jnn-home-heading-bar-width) !important;
height: auto !important;
background: var(--jnn-home-heading-color) !important;
border-radius: var(--jnn-home-heading-bar-radius) !important;
transform: none !important;
}
/* JNN-EDC-002B : Unified Underline */
body.home [class*="editor-choice"] .section-title::after,
body.home [class*="editors-choice"] .section-title::after,
body.home [id*="editor-choice"] .section-title::after,
body.home [id*="editors-choice"] .section-title::after,
body.home [class*="editor-choice"] .widget-title::after,
body.home [class*="editors-choice"] .widget-title::after,
body.home [id*="editor-choice"] .widget-title::after,
body.home [id*="editors-choice"] .widget-title::after,
body.home [class*="editor-choice"] .block-title::after,
body.home [class*="editors-choice"] .block-title::after,
body.home [id*="editor-choice"] .block-title::after,
body.home [id*="editors-choice"] .block-title::after {
content: "" !important;
position: absolute !important;
left: var(--jnn-home-heading-underline-left) !important;
bottom: var(--jnn-home-heading-underline-bottom) !important;
width: var(--jnn-home-heading-underline-width) !important;
height: var(--jnn-home-heading-underline-height) !important;
background: var(--jnn-home-heading-color) !important;
transform: none !important;
}
/* JNN-EDC-003 : DEPRECATED / MOVED TO CBG-003
Editors Choice category-badge visual responsibility now belongs
only to the Category Badge Engine. Existing values are preserved. */
/* JNN-EDC-004 : Headline Typography */
body.home [class*="editor-choice"] .entry-title,
body.home [class*="editors-choice"] .entry-title,
body.home [id*="editor-choice"] .entry-title,
body.home [id*="editors-choice"] .entry-title,
body.home [class*="editor-choice"] .post-title,
body.home [class*="editors-choice"] .post-title,
body.home [id*="editor-choice"] .post-title,
body.home [id*="editors-choice"] .post-title {
margin: 0 0 var(--jnn-edc-title-gap-bottom) !important;
padding: 0 !important;
color: var(--jnn-edc-title-color) !important;
font-size: var(--jnn-edc-title-size) !important;
font-weight: var(--jnn-edc-title-weight) !important;
line-height: var(--jnn-edc-title-line) !important;
letter-spacing: var(--jnn-edc-title-letter-spacing) !important;
}
body.home [class*="editor-choice"] .entry-title a,
body.home [class*="editors-choice"] .entry-title a,
body.home [id*="editor-choice"] .entry-title a,
body.home [id*="editors-choice"] .entry-title a,
body.home [class*="editor-choice"] .post-title a,
body.home [class*="editors-choice"] .post-title a,
body.home [id*="editor-choice"] .post-title a,
body.home [id*="editors-choice"] .post-title a {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
}
/* JNN-EDC-005 : Meta / Excerpt Layout */
body.home [class*="editor-choice"] .entry-meta,
body.home [class*="editors-choice"] .entry-meta,
body.home [id*="editor-choice"] .entry-meta,
body.home [id*="editors-choice"] .entry-meta,
body.home [class*="editor-choice"] .post-meta,
body.home [class*="editors-choice"] .post-meta,
body.home [id*="editor-choice"] .post-meta,
body.home [id*="editors-choice"] .post-meta {
display: var(--jnn-edc-meta-display) !important;
align-items: center !important;
gap: var(--jnn-edc-meta-gap) !important;
margin: 0 !important;
font-size: var(--jnn-edc-meta-size) !important;
}
body.home [class*="editor-choice"] .post-excerpt,
body.home [class*="editors-choice"] .post-excerpt,
body.home [id*="editor-choice"] .post-excerpt,
body.home [id*="editors-choice"] .post-excerpt,
body.home [class*="editor-choice"] .entry-summary,
body.home [class*="editors-choice"] .entry-summary,
body.home [id*="editor-choice"] .entry-summary,
body.home [id*="editors-choice"] .entry-summary {
display: var(--jnn-edc-excerpt-display) !important;
margin: var(--jnn-edc-excerpt-gap-top) 0 0 !important;
overflow: hidden !important;
color: var(--jnn-edc-excerpt-color) !important;
font-size: var(--jnn-edc-excerpt-size) !important;
line-height: var(--jnn-edc-excerpt-line) !important;
-webkit-line-clamp: var(--jnn-edc-excerpt-lines) !important;
-webkit-box-orient: vertical !important;
}
/* JNN-EDC-006 : Image Engine */
body.home [class*="editor-choice"] .post-thumbnail,
body.home [class*="editors-choice"] .post-thumbnail,
body.home [id*="editor-choice"] .post-thumbnail,
body.home [id*="editors-choice"] .post-thumbnail,
body.home [class*="editor-choice"] .blog-post-image,
body.home [class*="editors-choice"] .blog-post-image,
body.home [id*="editor-choice"] .blog-post-image,
body.home [id*="editors-choice"] .blog-post-image {
width: 100% !important;
overflow: hidden !important;
aspect-ratio: var(--jnn-edc-image-ratio) !important;
border-radius: var(--jnn-edc-image-radius) !important;
}
body.home [class*="editor-choice"] .post-thumbnail img,
body.home [class*="editors-choice"] .post-thumbnail img,
body.home [id*="editor-choice"] .post-thumbnail img,
body.home [id*="editors-choice"] .post-thumbnail img,
body.home [class*="editor-choice"] .blog-post-image img,
body.home [class*="editors-choice"] .blog-post-image img,
body.home [id*="editor-choice"] .blog-post-image img,
body.home [id*="editors-choice"] .blog-post-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position:
var(--jnn-edc-image-position-x)
var(--jnn-edc-image-position-y) !important;
filter:
brightness(var(--jnn-edc-image-brightness))
contrast(var(--jnn-edc-image-contrast))
saturate(var(--jnn-edc-image-saturate)) !important;
transition:
transform var(--jnn-edc-image-transition) ease,
filter var(--jnn-edc-image-transition) ease !important;
}
/* JNN-EDC-007 : Premium Card Engine */
body.home [class*="editor-choice"] .posts-wrap,
body.home [class*="editors-choice"] .posts-wrap,
body.home [id*="editor-choice"] .posts-wrap,
body.home [id*="editors-choice"] .posts-wrap,
body.home [class*="editor-choice"] .posts-wrapper,
body.home [class*="editors-choice"] .posts-wrapper,
body.home [id*="editor-choice"] .posts-wrapper,
body.home [id*="editors-choice"] .posts-wrapper,
body.home [class*="editor-choice"] .post-grid,
body.home [class*="editors-choice"] .post-grid,
body.home [id*="editor-choice"] .post-grid,
body.home [id*="editors-choice"] .post-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
gap: var(--jnn-edc-card-gap) !important;
align-items: stretch !important;
}
body.home [class*="editor-choice"] .single-post-wrap,
body.home [class*="editors-choice"] .single-post-wrap,
body.home [id*="editor-choice"] .single-post-wrap,
body.home [id*="editors-choice"] .single-post-wrap,
body.home [class*="editor-choice"] article,
body.home [class*="editors-choice"] article,
body.home [id*="editor-choice"] article,
body.home [id*="editors-choice"] article {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: var(--jnn-edc-card-padding) !important;
overflow: hidden !important;
background: var(--jnn-edc-card-bg) !important;
border: var(--jnn-edc-card-border-width) solid var(--jnn-edc-card-border) !important;
border-radius: var(--jnn-edc-card-radius) !important;
box-shadow: var(--jnn-edc-card-shadow) !important;
}
body.home [class*="editor-choice"] .content-wrap,
body.home [class*="editors-choice"] .content-wrap,
body.home [id*="editor-choice"] .content-wrap,
body.home [id*="editors-choice"] .content-wrap,
body.home [class*="editor-choice"] .blog-post-detail,
body.home [class*="editors-choice"] .blog-post-detail,
body.home [id*="editor-choice"] .blog-post-detail,
body.home [id*="editors-choice"] .blog-post-detail {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-width: 0 !important;
padding: var(--jnn-edc-content-padding) !important;
}
/* JNN-EDC-008 : Hover Effects */
@media (hover: hover) and (pointer: fine) {
body.home [class*="editor-choice"] .single-post-wrap,
body.home [class*="editors-choice"] .single-post-wrap,
body.home [id*="editor-choice"] .single-post-wrap,
body.home [id*="editors-choice"] .single-post-wrap,
body.home [class*="editor-choice"] article,
body.home [class*="editors-choice"] article,
body.home [id*="editor-choice"] article,
body.home [id*="editors-choice"] article {
transition:
transform var(--jnn-edc-hover-transition) ease,
box-shadow var(--jnn-edc-hover-transition) ease !important;
}
body.home [class*="editor-choice"] .single-post-wrap:hover,
body.home [class*="editors-choice"] .single-post-wrap:hover,
body.home [id*="editor-choice"] .single-post-wrap:hover,
body.home [id*="editors-choice"] .single-post-wrap:hover,
body.home [class*="editor-choice"] article:hover,
body.home [class*="editors-choice"] article:hover,
body.home [id*="editor-choice"] article:hover,
body.home [id*="editors-choice"] article:hover {
transform: translateY(var(--jnn-edc-hover-lift)) !important;
box-shadow: var(--jnn-edc-hover-shadow) !important;
}
body.home [class*="editor-choice"] .single-post-wrap:hover img,
body.home [class*="editors-choice"] .single-post-wrap:hover img,
body.home [id*="editor-choice"] .single-post-wrap:hover img,
body.home [id*="editors-choice"] .single-post-wrap:hover img,
body.home [class*="editor-choice"] article:hover img,
body.home [class*="editors-choice"] article:hover img,
body.home [id*="editor-choice"] article:hover img,
body.home [id*="editors-choice"] article:hover img {
transform: scale(var(--jnn-edc-hover-image-scale)) !important;
}
body.home [class*="editor-choice"] .entry-title a:hover,
body.home [class*="editors-choice"] .entry-title a:hover,
body.home [id*="editor-choice"] .entry-title a:hover,
body.home [id*="editors-choice"] .entry-title a:hover {
color: var(--jnn-edc-hover-title-color) !important;
}
}
/* JNN-EDC-009 : Responsive Layout
Visual tokens remain global; only column structure changes by device. */
@media screen and (min-width: 992px) {
body.home [class*="editor-choice"] .posts-wrap,
body.home [class*="editors-choice"] .posts-wrap,
body.home [id*="editor-choice"] .posts-wrap,
body.home [id*="editors-choice"] .posts-wrap,
body.home [class*="editor-choice"] .posts-wrapper,
body.home [class*="editors-choice"] .posts-wrapper,
body.home [id*="editor-choice"] .posts-wrapper,
body.home [id*="editors-choice"] .posts-wrapper,
body.home [class*="editor-choice"] .post-grid,
body.home [class*="editors-choice"] .post-grid {
grid-template-columns: repeat(var(--jnn-edc-desktop-columns), minmax(0, 1fr)) !important;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
body.home [class*="editor-choice"] .posts-wrap,
body.home [class*="editors-choice"] .posts-wrap,
body.home [id*="editor-choice"] .posts-wrap,
body.home [id*="editors-choice"] .posts-wrap,
body.home [class*="editor-choice"] .posts-wrapper,
body.home [class*="editors-choice"] .posts-wrapper,
body.home [id*="editor-choice"] .posts-wrapper,
body.home [id*="editors-choice"] .posts-wrapper,
body.home [class*="editor-choice"] .post-grid,
body.home [class*="editors-choice"] .post-grid {
grid-template-columns: repeat(var(--jnn-edc-tablet-columns), minmax(0, 1fr)) !important;
}
}
@media screen and (max-width: 767px) {
body.home [class*="editor-choice"] .posts-wrap,
body.home [class*="editors-choice"] .posts-wrap,
body.home [id*="editor-choice"] .posts-wrap,
body.home [id*="editors-choice"] .posts-wrap,
body.home [class*="editor-choice"] .posts-wrapper,
body.home [class*="editors-choice"] .posts-wrapper,
body.home [id*="editor-choice"] .posts-wrapper,
body.home [id*="editors-choice"] .posts-wrapper,
body.home [class*="editor-choice"] .post-grid,
body.home [class*="editors-choice"] .post-grid {
grid-template-columns: repeat(var(--jnn-edc-mobile-columns), minmax(0, 1fr)) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.home [class*="editor-choice"] *,
body.home [class*="editors-choice"] *,
body.home [id*="editor-choice"] *,
body.home [id*="editors-choice"] * {
transition: none !important;
animation: none !important;
}
}
/* JNN-EDC-010 : Future Extension Engine
Safe compatibility layer for current and future Editors Choice markup.
Scope stays limited to Editors Choice containers. */
/* Future cards inherit the established box model. */
body.home [class*="editor-choice"] :is(
article,
.single-post-wrap,
.post-item,
.post-card,
[class*="post-card"],
[class*="story-card"]
),
body.home [class*="editors-choice"] :is(
article,
.single-post-wrap,
.post-item,
.post-card,
[class*="post-card"],
[class*="story-card"]
),
body.home [id*="editor-choice"] :is(
article,
.single-post-wrap,
.post-item,
.post-card,
[class*="post-card"],
[class*="story-card"]
),
body.home [id*="editors-choice"] :is(
article,
.single-post-wrap,
.post-item,
.post-card,
[class*="post-card"],
[class*="story-card"]
) {
min-width: var(--jnn-edc-extension-min-width) !important;
box-sizing: border-box !important;
}
/* Future image wrappers stay clipped and responsive. */
body.home [class*="editor-choice"] :is(
.post-thumbnail,
.blog-post-image,
.featured-image,
[class*="post-image"],
[class*="story-image"]
),
body.home [class*="editors-choice"] :is(
.post-thumbnail,
.blog-post-image,
.featured-image,
[class*="post-image"],
[class*="story-image"]
),
body.home [id*="editor-choice"] :is(
.post-thumbnail,
.blog-post-image,
.featured-image,
[class*="post-image"],
[class*="story-image"]
),
body.home [id*="editors-choice"] :is(
.post-thumbnail,
.blog-post-image,
.featured-image,
[class*="post-image"],
[class*="story-image"]
) {
overflow: var(--jnn-edc-extension-overflow) !important;
}
body.home [class*="editor-choice"] img,
body.home [class*="editors-choice"] img,
body.home [id*="editor-choice"] img,
body.home [id*="editors-choice"] img {
max-width: var(--jnn-edc-extension-image-width) !important;
height: var(--jnn-edc-extension-image-height) !important;
}
/* Future heading aliases inherit EDC typography. */
body.home [class*="editor-choice"] :is(
.entry-title,
.post-title,
.story-title,
[class*="headline"]
),
body.home [class*="editors-choice"] :is(
.entry-title,
.post-title,
.story-title,
[class*="headline"]
),
body.home [id*="editor-choice"] :is(
.entry-title,
.post-title,
.story-title,
[class*="headline"]
),
body.home [id*="editors-choice"] :is(
.entry-title,
.post-title,
.story-title,
[class*="headline"]
) {
color: var(--jnn-edc-title-color) !important;
font-size: var(--jnn-edc-title-size) !important;
font-weight: var(--jnn-edc-title-weight) !important;
line-height: var(--jnn-edc-title-line) !important;
letter-spacing: var(--jnn-edc-title-letter-spacing) !important;
}
/* Explicit future hooks for custom markup. */
.jnn-edc-section {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.jnn-edc-grid {
display: grid !important;
gap: var(--jnn-edc-card-gap) !important;
align-items: stretch !important;
}
.jnn-edc-card {
min-width: 0 !important;
overflow: hidden !important;
background: var(--jnn-edc-card-bg) !important;
border:
var(--jnn-edc-card-border-width)
solid
var(--jnn-edc-card-border) !important;
border-radius: var(--jnn-edc-card-radius) !important;
box-shadow: var(--jnn-edc-card-shadow) !important;
}
.jnn-edc-title {
color: var(--jnn-edc-title-color) !important;
font-size: var(--jnn-edc-title-size) !important;
font-weight: var(--jnn-edc-title-weight) !important;
line-height: var(--jnn-edc-title-line) !important;
}
@media screen and (min-width: 992px) {
.jnn-edc-grid {
grid-template-columns:
repeat(var(--jnn-edc-desktop-columns), minmax(0, 1fr)) !important;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.jnn-edc-grid {
grid-template-columns:
repeat(var(--jnn-edc-tablet-columns), minmax(0, 1fr)) !important;
}
}
@media screen and (max-width: 767px) {
.jnn-edc-grid {
grid-template-columns:
repeat(var(--jnn-edc-mobile-columns), minmax(0, 1fr)) !important;
}
}
/* =========================================================
MODULE 15 FRESH WIDGET ENGINE
ID: JNN-WDG-001 WIDGET ENGINE
========================================================= */
.widget,
.widget-area .widget,
.footer-widgets .widget,
body.home .news-storm-main-wrapper .widget {
box-sizing: border-box !important;
margin-bottom: var(--jnn-widget-gap) !important;
padding: var(--jnn-card-pad-top) !important;
border-radius: var(--jnn-card-radius) !important;
}
/* JNN-WDG-001B : DEPRECATED / MOVED TO HDR + WDG FLOW
Legacy global .widget-title typography removed.
Visual heading typography remains under HDR.
Widget-area title flow is controlled by WDG-005K. */
/* JNN-WDG-005 : DEPRECATED / MOVED TO HDR-003
Home heading responsibility now belongs only to the
Universal Heading Engine 2.0. No visual values changed. */
/* JNN-WDG-006 : Home Story Category Cleanup */
body.home .news-storm-main-wrapper :is(
article,.single-post-wrap,.post-item,.post-list-item,.post-grid-item,
.blog-post-container
) :is(
.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"]
){
display:none!important;margin:0!important;padding:0!important;width:0!important;height:0!important;
overflow:hidden!important;visibility:hidden!important;opacity:0!important;
font-size:0!important;line-height:0!important;
}
body.home .news-storm-main-wrapper :is(
article,.single-post-wrap,.post-item,.post-list-item,.post-grid-item,
.blog-post-container
) :is(
.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"]
)::before,
body.home .news-storm-main-wrapper :is(
article,.single-post-wrap,.post-item,.post-list-item,.post-grid-item,
.blog-post-container
) :is(
.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"]
)::after{
content:none!important;display:none!important;
}
/* JNN-WDG-007 : First Story Category Dot Fix */
body.home .news-storm-main-wrapper
.blog-post-container:first-child
:is(.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"]){
display:none!important;margin:0!important;padding:0!important;
width:0!important;height:0!important;overflow:hidden!important;
visibility:hidden!important;opacity:0!important;font-size:0!important;line-height:0!important;
}
body.home .news-storm-main-wrapper
.blog-post-container:first-child
:is(.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"])::before,
body.home .news-storm-main-wrapper
.blog-post-container:first-child
:is(.post-categories,.cat-links,[class*="post-category"],
[class*="category-label"],[class*="category-name"],[class*="cat-name"])::after{
content:none!important;display:none!important;
}
body.home #news_storm_banner_section .banner-main-part
.blog-post-container:first-child :is(.jnn-hero-category,.post-categories,.cat-links){
display:inline-flex!important;align-items:center!important;width:fit-content!important;
height:auto!important;overflow:visible!important;visibility:visible!important;opacity:1!important;
font-size:var(--jnn-hero-category-size)!important;line-height:1!important;
}
/* =========================================================
MODULE 16 SIDEBAR ENGINE
Permanent component number: 16
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.5.8F
SIDEBAR HEADING WIDTH FIX
ID: JNN-SDB-001 through JNN-SDB-010
STATUS: PRODUCTION LOCKED
ARCHITECTURE
A. Layout Engine: narrow actual-sidebar selectors only
B. Visual Engine: white card / border / shadow
C. Spacing Engine: adjustable inner padding
D. Optional Engine: heading hook, story card, sticky hook
HEADER SAFETY
- Broad generic sidebar selector removed
- Header and off-canvas elements are not targeted
========================================================= */
/* JNN-SDB-001 Layout Engine */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) {
width: var(--jnn-sidebar-width) !important;
max-width: var(--jnn-sidebar-max-width) !important;
min-width: var(--jnn-sidebar-min-width) !important;
align-self: var(--jnn-sidebar-align-self) !important;
overflow-x: var(--jnn-sidebar-overflow-x) !important;
overflow-y: var(--jnn-sidebar-overflow-y) !important;
box-sizing: var(--jnn-sidebar-box-sizing) !important;
}
/* JNN-SDB-002 Visual + Inner Spacing Engine */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) > .widget,
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) .jnn-sidebar-widget {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 var(--jnn-sidebar-widget-margin-bottom) !important;
padding:
var(--jnn-card-pad-top)
var(--jnn-card-pad-right)
var(--jnn-card-pad-bottom)
var(--jnn-card-pad-left) !important;
overflow: var(--jnn-card-overflow) !important;
background: var(--jnn-card-bg) !important;
border:
var(--jnn-card-border-width)
solid
var(--jnn-card-border-color) !important;
border-radius: var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
box-sizing: border-box !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) > .widget:last-child,
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) .jnn-sidebar-widget:last-child {
margin-bottom: 0 !important;
}
/* JNN-SDB-003 Heading Engine */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.widget-title,.wp-block-heading,.jnn-sidebar-heading) {
position: relative !important;
display: block !important;
flex: 0 0 var(--jnn-sidebar-heading-width) !important;
width: var(--jnn-sidebar-heading-width) !important;
max-width: var(--jnn-sidebar-heading-max-width) !important;
min-width: 0 !important;
margin: 0 0 var(--jnn-card-heading-gap) !important;
padding:
var(--jnn-sidebar-heading-pad-y)
var(--jnn-sidebar-heading-pad-x) !important;
color: var(--jnn-sidebar-heading-color) !important;
background: var(--jnn-sidebar-heading-bg) !important;
font-size: var(--jnn-sidebar-heading-size) !important;
font-weight: var(--jnn-sidebar-heading-weight) !important;
line-height: var(--jnn-sidebar-heading-line) !important;
border-left:
var(--jnn-sidebar-heading-border-width)
solid
var(--jnn-sidebar-heading-border-color) !important;
box-sizing: border-box !important;
}
/* JNN-SDB-004 Explicit Body Hook */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-body,[data-jnn-sidebar-part="body"]) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* JNN-SDB-005 List Rhythm */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(ul,.jnn-sidebar-list,[data-jnn-sidebar-part="list"]) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(ul,.jnn-sidebar-list,[data-jnn-sidebar-part="list"]) > li {
margin: 0 !important;
padding: var(--jnn-sidebar-item-gap) 0 !important;
border-bottom:
var(--jnn-sidebar-item-divider-width)
solid
var(--jnn-sidebar-item-divider) !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(ul,.jnn-sidebar-list,[data-jnn-sidebar-part="list"]) > li:first-child {
padding-top: 0 !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(ul,.jnn-sidebar-list,[data-jnn-sidebar-part="list"]) > li:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
/* JNN-SDB-006 Explicit Story Card */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-story,[data-jnn-sidebar="story"]) {
display: flex !important;
align-items: flex-start !important;
gap: var(--jnn-sidebar-item-gap) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-media,[data-jnn-sidebar-part="media"]) {
flex: 0 0 var(--jnn-sidebar-image-width) !important;
width: var(--jnn-sidebar-image-width) !important;
max-width: var(--jnn-sidebar-image-width) !important;
min-width: 0 !important;
aspect-ratio: var(--jnn-sidebar-image-ratio) !important;
overflow: hidden !important;
border-radius: var(--jnn-sidebar-image-radius) !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-media,[data-jnn-sidebar-part="media"]) img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: var(--jnn-sidebar-image-fit) !important;
object-position: var(--jnn-sidebar-image-position) !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-content,[data-jnn-sidebar-part="content"]) {
flex: 1 1 auto !important;
min-width: 0 !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-title,[data-jnn-sidebar-part="title"]) {
margin: 0 !important;
color: var(--jnn-sidebar-title-color) !important;
font-size: var(--jnn-sidebar-title-size) !important;
font-weight: var(--jnn-sidebar-title-weight) !important;
line-height: var(--jnn-sidebar-title-line) !important;
overflow-wrap: anywhere !important;
}
/* JNN-SDB-007 Sticky Opt-In */
@media screen and (min-width: 992px) {
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-sticky,[data-jnn-sidebar="sticky"]) {
position: sticky !important;
top: var(--jnn-sidebar-sticky-top) !important;
align-self: start !important;
}
}
/* JNN-SDB-008 Keyboard Focus */
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(a,button,input,select,textarea):focus-visible {
outline:
var(--jnn-sidebar-focus-width)
solid
var(--jnn-sidebar-focus-color) !important;
outline-offset: var(--jnn-sidebar-focus-offset) !important;
}
/* JNN-SDB-009 Responsive */
@media screen and (max-width: 991px) {
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) {
width: 100% !important;
max-width: 100% !important;
margin-top: var(--jnn-sidebar-mobile-gap) !important;
}
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
)
:is(.jnn-sidebar-sticky,[data-jnn-sidebar="sticky"]) {
position: static !important;
top: auto !important;
}
}
/* JNN-SDB-010 Release Certificate */
@media (prefers-reduced-motion: reduce) {
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) *,
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) *::before,
body :is(
aside#secondary.widget-area,
#secondary.widget-area,
.jnn-sidebar
) *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
/* SIDEBAR v5.5.8C CROSS-CHECK
Source: uploaded v5.5.8 file that produced white background
White background: PRESERVED
Border / radius / shadow: PRESERVED
Inner padding: ADDED and adjustable
Heading-to-content gap: ADDED and adjustable
Broad generic sidebar selector: REMOVED
Header selectors changed: 0
Hero variables/rules: PRESERVED
Final Status: VIDEO HEADING BOX WIDTH FIXED / FRAMEWORK PRESERVED
*/
/* =========================================================
MODULE 21 FOOTER
ID: JNN-FTR-001 FOOTER ENGINE
========================================================= */
.site-footer,
footer.site-footer,
#colophon {
box-sizing: border-box !important;
margin-top: var(--jnn-footer-top-gap) !important;
padding:
var(--jnn-footer-pad-y)
var(--jnn-footer-pad-x) !important;
}
.site-footer .widget-title,
#colophon .widget-title {
font-size: var(--jnn-footer-title-size) !important;
}
.site-footer,
.site-footer p,
.site-footer a,
#colophon,
#colophon p,
#colophon a {
font-size: var(--jnn-footer-text-size) !important;
}
/* =========================================================
PRF-DES DESKTOP PROFILE
ID: JNN-DES-001
=========================================================
Desktop uses the MASTER CONTROL PANEL values in MODULE 01.
No duplicate desktop override is required.
*/
/* =========================================================
PRF-TAB TABLET PROFILE
ID: JNN-TAB-001 768px TO 991px
Change only the variables in this :root block for tablet.
========================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {
--jnn-header-height: 58px;
--jnn-header-side-pad: 12px;
--jnn-header-gap: 8px;
--jnn-logo-layout-height: 55px;
--jnn-logo-max-width: 180px;
--jnn-logo-shift-x: -33px;
--jnn-logo-shift-y: 4px;
--jnn-logo-visual-scale: 2.75;
--jnn-actions-gap: 5px;
--jnn-action-box-size: 36px;
--jnn-hamburger-width: 22px;
--jnn-hamburger-thickness: 2.25px;
--jnn-hamburger-gap: 4px;
--jnn-search-glyph-size: 19px;
--jnn-menu-width: 215px;
--jnn-menu-max-width: 62vw;
--jnn-menu-item-font: 15px;
--jnn-subscribe-width: 65px;
--jnn-subscribe-height: 25px;
--jnn-subscribe-font: 13px;
--jnn-quick-height: 42px;
--jnn-quick-font: 16px;
--jnn-quick-pad-x: 11px;
--jnn-home-label-size: 0px;
--jnn-home-next-gap: 4px;
--jnn-home-icon-shift-x: 0px;
--jnn-home-icon-shift-y: 0px;
--jnn-flash-height: 36px;
--jnn-flash-font: 15px;
--jnn-breaking-height: 40px;
--jnn-breaking-font: 22px;
--jnn-breaking-gap: 11px;
--jnn-breaking-dot: 7px;
--jnn-hero-top-gap: 3px;
--jnn-hero-side-gap: 4px;
--jnn-hero-image-height: 420px;
--jnn-hero-image-position-x: 50%;
--jnn-hero-image-position-y: 42%;
--jnn-hero-overlay-height: 42%;
--jnn-hero-image-hover-scale: 1.025;
--jnn-hero-card-hover-lift: -1px;
--jnn-card-title-size: 17px;
--jnn-card-excerpt-size: 13px;
--jnn-card-image-ratio: 16 / 9;
--jnn-card-meta-display: none;
--jnn-home-meta-display: none;
--jnn-category-title-size: 42px;
--jnn-category-top-space: 10px;
--jnn-category-bottom-space: 14px;
--jnn-editor-title-size: 20px;
--jnn-section-gap: var(--jnn-home-section-gap);
--jnn-hero-meta-display: none;
--jnn-hero-title-size: 27px;
--jnn-hero-title-line: 1.25;
--jnn-hero-title-bottom-gap: 7px;
--jnn-hero-excerpt-size: 14px;
--jnn-hero-excerpt-line: 1.42;
--jnn-hero-excerpt-lines: 2;
--jnn-hero-category-size: 11px;
--jnn-hero-category-dot-size: 7px;
}
.jnn-custom-header .site-title {
font-size: 21px !important;
}
.jnn-custom-header .site-description {
font-size: 11px !important;
}
}
/* =========================================================
PRF-MOB MOBILE PORTRAIT PROFILE
ID: JNN-MOB-001 UP TO 767px
Mobile red strip height: --jnn-header-height
Mobile logo height: --jnn-logo-layout-height
Mobile logo left/right: --jnn-logo-shift-x
Mobile hero gap: --jnn-hero-top-gap
========================================================= */
@media screen and (max-width: 767px) {
:root {
--jnn-header-height: 40px;
--jnn-header-side-pad: 7px;
--jnn-header-gap: 4px;
--jnn-logo-layout-height: 38px;
--jnn-logo-max-width: 150px;
--jnn-logo-shift-x: -80px;
--jnn-logo-shift-y: 1.85px;
--jnn-logo-visual-scale: 2.10;
--jnn-actions-gap: 2px;
--jnn-action-box-size: 32px;
--jnn-hamburger-width: 20px;
--jnn-hamburger-thickness: 2.2px;
--jnn-hamburger-gap: 4px;
--jnn-search-glyph-size: 18px;
--jnn-menu-width: 170px;
--jnn-menu-max-width: 72vw;
--jnn-menu-top-gap: 5px;
--jnn-menu-max-height: 62vh;
--jnn-menu-item-font: 15px;
--jnn-menu-item-pad-y: 8px;
--jnn-menu-item-pad-x: 11px;
--jnn-subscribe-width: 42px;
--jnn-subscribe-height: 20px;
--jnn-subscribe-font: 8px;
--jnn-subscribe-pad-x: 5px;
--jnn-quick-height: 22px;
--jnn-quick-font: 13px;
--jnn-quick-pad-x: 9px;
--jnn-quick-wrap-pad-x: 4px;
--jnn-home-icon-size: 18px;
--jnn-home-label-size: 0px;
--jnn-home-next-gap: 1px;
--jnn-home-icon-shift-x: .5px;
--jnn-home-icon-shift-y: 0px;
--jnn-flash-height: 22px;
--jnn-flash-font: 11px;
--jnn-flash-item-gap: 15px;
--jnn-flash-star-size: 10px;
--jnn-breaking-height: 22px;
--jnn-breaking-font: 17px;
--jnn-breaking-gap: 7px;
--jnn-breaking-dot: 7px;
--jnn-breaking-pad-x: 6px;
--jnn-hero-top-gap: -8px;
--jnn-hero-bottom-gap: 14px;
--jnn-hero-side-gap: 4px;
--jnn-hero-image-height: 300px;
--jnn-hero-image-position-x: 50%;
--jnn-hero-image-position-y: 40%;
--jnn-hero-overlay-height: 46%;
--jnn-hero-meta-display: none;
--jnn-hero-content-enter-duration: 0.35s;
--jnn-hero-content-enter-delay: 0.04s;
--jnn-card-title-size: 15px;
--jnn-card-title-line: 1.32;
--jnn-card-title-gap: 4px;
--jnn-card-excerpt-size: 12px;
--jnn-card-image-ratio: 16 / 9;
--jnn-card-meta-display: none;
--jnn-home-meta-display: none;
--jnn-category-title-size: 28px;
--jnn-category-top-space: 6px;
--jnn-category-bottom-space: 10px;
--jnn-category-card-gap: 18px;
--jnn-breadcrumb-top: 4px;
--jnn-breadcrumb-bottom: 6px;
--jnn-editor-title-size: 17px;
--jnn-editor-gap: 12px;
--jnn-section-gap: var(--jnn-home-section-gap);
--jnn-hero-radius: 0px;
--jnn-hero-content-pad-top: 14px;
--jnn-hero-content-pad-x: 15px;
--jnn-hero-content-pad-bottom: 15px;
--jnn-hero-title-size: 22px;
--jnn-hero-title-line: 1.3;
--jnn-hero-category-size: 10px;
--jnn-hero-category-gap: 2px;
--jnn-hero-category-dot-size: 6px;
--jnn-hero-category-dot-gap: 5px;
--jnn-hero-excerpt-size: 13px;
--jnn-hero-meta-size: 12px;
--jnn-hero-title-bottom-gap: 6px;
--jnn-hero-title-letter-spacing: -0.1px;
--jnn-hero-excerpt-line: 1.38;
--jnn-hero-excerpt-lines: 2;
}
.admin-bar .jnn-custom-header {
top: 46px !important;
}
body.home .news-storm-main-wrapper,
body.home .news-storm-main-wrapper > .section-wrapper,
body.home .news-storm-main-wrapper .news-storm-container-wrapper {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.jnn-custom-header .site-identity {
display: none !important;
}
.jnn-custom-header .site-logo img,
.jnn-custom-header img.custom-logo,
.jnn-custom-header .custom-logo {
transform: scale(var(--jnn-logo-visual-scale)) !important;
transform-origin: left center !important;
}
.jnn-custom-header #site-navigation .menu-toggle {
padding: 4px !important;
}
.jnn-custom-header .jnn-subscribe-button,
.jnn-custom-header .header-custom-button {
border-radius: 2.5px !important;
}
.jnn-custom-header #site-navigation .navigation-area {
right: 8px !important;
}
.jnn-custom-header .jnn-breaking-heading {
border-top-width: 1px !important;
border-bottom-width: 1px !important;
}
.jnn-custom-header .jnn-breaking-title {
letter-spacing: 0.5px !important;
}
body.home #news_storm_banner_section > .section-wrapper,
body.home #news_storm_banner_section .banner-container-wrapper,
body.home #news_storm_banner_section .banner-main-part,
body.home #news_storm_banner_section .banner-main-wrap,
body.home #news_storm_banner_section .blog-post-container {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
box-sizing: border-box !important;
}
body.home #news_storm_banner_section > .section-wrapper,
body.home #news_storm_banner_section .banner-container-wrapper {
padding-right: var(--jnn-hero-side-gap) !important;
padding-left: var(--jnn-hero-side-gap) !important;
}
}
/* =========================================================
PRF-LND MOBILE LANDSCAPE PROFILE
ID: JNN-LND-001
Applies after tablet/mobile rules, so rotation stays stable.
Covers common phones in horizontal orientation.
========================================================= */
@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 550px) {
:root {
--jnn-header-height: 42px;
--jnn-header-side-pad: 8px;
--jnn-header-gap: 4px;
--jnn-logo-layout-height: 34px;
--jnn-logo-max-width: 145px;
--jnn-logo-shift-x: -8px;
--jnn-logo-shift-y: 0px;
--jnn-logo-visual-scale: 1.95;
--jnn-actions-gap: 2px;
--jnn-action-box-size: 31px;
--jnn-hamburger-width: 21px;
--jnn-hamburger-thickness: 2px;
--jnn-hamburger-gap: 3.5px;
--jnn-search-glyph-size: 19px;
--jnn-subscribe-width: 62px;
--jnn-subscribe-height: 27px;
--jnn-subscribe-font: 10px;
--jnn-quick-height: 22px;
--jnn-quick-font: 12px;
--jnn-quick-pad-x: 8px;
--jnn-home-label-size: 0px;
--jnn-home-next-gap: 2px;
--jnn-home-icon-shift-x: 0px;
--jnn-home-icon-shift-y: 0px;
--jnn-flash-height: 20px;
--jnn-flash-font: 11px;
--jnn-breaking-height: 20px;
--jnn-breaking-font: 16px;
--jnn-breaking-gap: 7px;
--jnn-breaking-dot: 6px;
--jnn-hero-top-gap: -5px;
--jnn-hero-side-gap: 5px;
--jnn-hero-image-height: min(68vh, 350px);
--jnn-hero-image-position-x: 50%;
--jnn-hero-image-position-y: 42%;
--jnn-hero-overlay-height: 48%;
--jnn-hero-meta-display: none;
--jnn-hero-content-enter-duration: 0.30s;
--jnn-hero-content-enter-delay: 0s;
--jnn-card-title-size: 14px;
--jnn-card-title-line: 1.28;
--jnn-card-excerpt-size: 11px;
--jnn-card-image-ratio: 16 / 9;
--jnn-card-meta-display: none;
--jnn-home-meta-display: none;
--jnn-category-title-size: 30px;
--jnn-category-top-space: 5px;
--jnn-category-bottom-space: 8px;
--jnn-breadcrumb-top: 4px;
--jnn-breadcrumb-bottom: 5px;
--jnn-editor-title-size: 16px;
--jnn-section-gap: var(--jnn-home-section-gap);
--jnn-hero-title-size: 21px;
--jnn-hero-excerpt-size: 12px;
--jnn-hero-meta-size: 11px;
--jnn-hero-title-line: 1.22;
--jnn-hero-title-bottom-gap: 5px;
--jnn-hero-excerpt-line: 1.32;
--jnn-hero-excerpt-lines: 1;
}
.admin-bar .jnn-custom-header {
top: 32px !important;
}
.jnn-custom-header .site-identity {
display: none !important;
}
.jnn-custom-header #site-navigation .navigation-area {
max-height: 55vh !important;
}
body.home #news_storm_banner_section .banner-main-part .blog-post-container:first-child .post-excerpt {
-webkit-line-clamp: 1 !important;
}
.jnn-custom-header .jnn-flash-news-row,
.jnn-custom-header .jnn-flash-news-row .marquee,
.jnn-custom-header .jnn-flash-news-row .marquee.flash-news,
.jnn-custom-header .jnn-flash-news-row .flash-news-post,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .content-wrap,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title a {
height: var(--jnn-flash-height) !important;
min-height: var(--jnn-flash-height) !important;
max-height: var(--jnn-flash-height) !important;
line-height: 1 !important;
}
}
/* =========================================================
PRF-SML SMALL MOBILE PROFILE
ID: JNN-SML-001 UP TO 380px
Change only this :root block for very small phones.
========================================================= */
@media screen and (max-width: 380px) {
:root {
--jnn-header-height: 42px;
--jnn-header-side-pad: 5px;
--jnn-header-gap: 2px;
--jnn-logo-layout-height: 34px;
--jnn-logo-max-width: 118px;
--jnn-logo-shift-x: -8px;
--jnn-logo-shift-y: 0px;
--jnn-logo-visual-scale: 1.10;
--jnn-action-box-size: 30px;
--jnn-hamburger-width: 20px;
--jnn-hamburger-thickness: 2px;
--jnn-hamburger-gap: 3.5px;
--jnn-search-glyph-size: 18px;
--jnn-subscribe-width: 57px;
--jnn-subscribe-height: 26px;
--jnn-subscribe-font: 9px;
--jnn-quick-height: 34px;
--jnn-quick-font: 14px;
--jnn-quick-pad-x: 8px;
--jnn-home-label-size: 0px;
--jnn-home-next-gap: 2px;
--jnn-home-icon-shift-x: 0px;
--jnn-home-icon-shift-y: 0px;
--jnn-flash-height: 30px;
--jnn-flash-font: 13px;
--jnn-breaking-height: 33px;
--jnn-breaking-font: 17px;
--jnn-hero-top-gap: -6px;
--jnn-hero-side-gap: 3px;
--jnn-hero-image-height: 270px;
--jnn-hero-image-position-x: 50%;
--jnn-hero-image-position-y: 40%;
--jnn-hero-overlay-height: 48%;
--jnn-hero-meta-display: none;
--jnn-hero-content-enter-duration: 0.28s;
--jnn-hero-content-enter-delay: 0s;
--jnn-card-title-size: 14px;
--jnn-card-title-line: 1.30;
--jnn-card-title-gap: 4px;
--jnn-card-excerpt-size: 11px;
--jnn-card-image-ratio: 16 / 9;
--jnn-card-meta-display: none;
--jnn-home-meta-display: none;
--jnn-category-title-size: 24px;
--jnn-category-top-space: 4px;
--jnn-category-bottom-space: 8px;
--jnn-category-card-gap: 16px;
--jnn-breadcrumb-top: 3px;
--jnn-breadcrumb-bottom: 5px;
--jnn-editor-title-size: 15px;
--jnn-section-gap: var(--jnn-home-section-gap);
--jnn-hero-title-size: 20px;
--jnn-hero-title-line: 1.28;
--jnn-hero-title-bottom-gap: 5px;
--jnn-hero-excerpt-size: 12px;
--jnn-hero-excerpt-line: 1.35;
--jnn-hero-excerpt-lines: 2;
--jnn-hero-category-size: 9px;
--jnn-hero-category-dot-size: 5px;
--jnn-hero-category-dot-gap: 4px;
}
}
/* =========================================================
SYS-ACC ACCESSIBILITY AND CENTERING GUARDS
ID: JNN-ACC-001
========================================================= */
.jnn-custom-header .jnn-header-top-row,
.jnn-custom-header .jnn-site-branding,
.jnn-custom-header .site-branding,
.jnn-custom-header .site-logo,
.jnn-custom-header .jnn-header-actions,
.jnn-custom-header .jnn-quick-navigation,
.jnn-custom-header .jnn-quick-menu-list,
.jnn-custom-header .jnn-quick-menu-list > li,
.jnn-custom-header .jnn-quick-menu-list > li > a,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .content-wrap,
.jnn-custom-header .jnn-flash-news-row .single-post-wrap .flash-title,
.jnn-custom-header .jnn-breaking-heading {
align-items: center !important;
}
.jnn-custom-header .jnn-header-top-row,
.jnn-custom-header .jnn-quick-navigation,
.jnn-custom-header .jnn-flash-news-row,
.jnn-custom-header .jnn-breaking-heading {
box-sizing: border-box !important;
}
/* =========================================================
SYS-PRT PRINT
ID: JNN-PRT-001
========================================================= */
@media print {
.jnn-custom-header,
.jnn-quick-navigation,
.jnn-flash-news-row,
.jnn-breaking-heading,
.jnn-breaking-bottom-line {
display: none !important;
}
html,
body,
#page,
.site,
.news-storm-main-wrapper {
overflow: visible !important;
background: #ffffff !important;
}
}
/* =========================================================
JNN FRAMEWORK v5.5.4
HDR-002 UNIVERSAL HEADING ADAPTER LAYER
STATUS: DEVELOPMENT / ADAPTER ONLY
========================================================= */
/* HDR-002A Official framework hook */
.jnn-section-heading {
--jnn-heading-adapter-active: 1;
}
/* HDR-002B News Storm section heading wrappers */
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
) {
--jnn-heading-adapter-active: 1;
}
/* HDR-002C Direct supported News Storm section headings */
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
--jnn-heading-adapter-active: 1;
}
/* HDR-002D Explicit future adapter hooks */
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading {
--jnn-heading-adapter-active: 1;
}
/* HDR-002E Module isolation guard */
body.home #news_storm_banner_section
:is(.entry-title,.post-title,.post-categories,.jnn-hero-category),
body.single
:is(.entry-title,.post-title,.page-title),
body.archive
:is(.entry-title,.post-title),
body.search
:is(.entry-title,.post-title),
body .jnn-sidebar
:is(.entry-title,.post-title) {
--jnn-heading-adapter-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.4
HDR-003 UNIVERSAL HEADING ENGINE 2.0
STATUS: DEVELOPMENT / VISUAL ENGINE
RESPONSIBILITY
- Heading wrapper baseline
- Heading typography
- Left accent bar
- Bottom underline
- Link inheritance
ISOLATION
- Home section headings only
- Official JNN heading hooks
- No story headline, Hero title, Single Post title,
image, card, widget layout, Sidebar or Footer styling
========================================================= */
/* HDR-003A Heading Wrapper Baseline */
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
),
.jnn-section-heading-wrap,
[data-jnn-heading-wrap] {
position: relative !important;
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 0 var(--jnn-home-heading-gap-bottom) !important;
padding: 0 !important;
border-bottom:
1px
solid
var(--jnn-home-heading-divider-color) !important;
box-sizing: border-box !important;
}
/* HDR-003B Heading Typography */
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding:
0
0
var(--jnn-home-heading-pad-bottom)
var(--jnn-home-heading-pad-left) !important;
border: 0 !important;
color: var(--jnn-home-heading-color) !important;
font-size: var(--jnn-home-heading-size) !important;
font-weight: var(--jnn-home-heading-weight) !important;
font-style: normal !important;
line-height: var(--jnn-home-heading-line) !important;
letter-spacing: 0 !important;
text-decoration: none !important;
box-sizing: border-box !important;
transform:
translate(
var(--jnn-home-heading-shift-x),
var(--jnn-home-heading-shift-y)
) !important;
}
/* HDR-003C Left Accent Bar */
.jnn-section-heading::before,
[data-jnn-heading]::before,
.jnn-heading-adapter::before,
.jnn-future-section-heading::before,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::before,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::before {
content: "" !important;
position: absolute !important;
left: var(--jnn-home-heading-bar-shift-x) !important;
top: var(--jnn-home-heading-bar-top) !important;
bottom: var(--jnn-home-heading-bar-bottom) !important;
width: var(--jnn-home-heading-bar-width) !important;
height: auto !important;
background: var(--jnn-home-heading-color) !important;
border-radius: var(--jnn-home-heading-bar-radius) !important;
pointer-events: none !important;
}
/* HDR-003D Bottom Underline */
.jnn-section-heading::after,
[data-jnn-heading]::after,
.jnn-heading-adapter::after,
.jnn-future-section-heading::after,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::after,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::after {
content: "" !important;
position: absolute !important;
left: var(--jnn-home-heading-underline-left) !important;
bottom: var(--jnn-home-heading-underline-bottom) !important;
width: var(--jnn-home-heading-underline-width) !important;
height: var(--jnn-home-heading-underline-height) !important;
background: var(--jnn-home-heading-color) !important;
pointer-events: none !important;
}
/* HDR-003E Heading Link Inheritance */
.jnn-section-heading a,
[data-jnn-heading] a,
.jnn-heading-adapter a,
.jnn-future-section-heading a,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
) a,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) a {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
}
/* HDR-003F Explicit Story-Title Isolation */
body.home #news_storm_banner_section
:is(.entry-title,.post-title),
body.home .news-storm-main-wrapper
:is(
article,
.blog-post-container,
.single-post-wrap,
.post-item,
.post-list-item,
.post-grid-item
)
:is(.entry-title,.post-title),
body.single
:is(.entry-title,.post-title,.page-title),
body.archive
:is(.entry-title,.post-title),
body.search
:is(.entry-title,.post-title) {
--jnn-heading-adapter-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.4
HDR-004 RESPONSIVE HEADING ENGINE
STATUS: DEVELOPMENT / RESPONSIVE ONLY
RESPONSIBILITY
- Desktop profile
- Laptop profile
- Tablet profile
- Mobile profile
- Small-mobile profile
ISOLATION
- Uses only HDR-003 heading targets
- Does not change cards, images, Hero, Sidebar,
Footer, Single Post or Widget layouts
========================================================= */
/* HDR-004A Desktop Profile */
@media screen and (min-width: 1200px) {
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
font-size: var(--jnn-heading-size-desktop) !important;
margin-bottom: var(--jnn-heading-gap-desktop) !important;
}
}
/* HDR-004B Laptop Profile */
@media screen and (min-width: 992px) and (max-width: 1199px) {
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
font-size: var(--jnn-heading-size-laptop) !important;
margin-bottom: var(--jnn-heading-gap-desktop) !important;
}
}
/* HDR-004C Tablet Profile */
@media screen and (min-width: 768px) and (max-width: 991px) {
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
font-size: var(--jnn-heading-size-tablet) !important;
margin-bottom: var(--jnn-heading-gap-tablet) !important;
padding-left: var(--jnn-heading-pad-left-tablet) !important;
padding-bottom: var(--jnn-heading-pad-bottom-tablet) !important;
}
.jnn-section-heading::before,
[data-jnn-heading]::before,
.jnn-heading-adapter::before,
.jnn-future-section-heading::before,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::before,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::before {
width: var(--jnn-heading-bar-width-tablet) !important;
}
.jnn-section-heading::after,
[data-jnn-heading]::after,
.jnn-heading-adapter::after,
.jnn-future-section-heading::after,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::after,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::after {
height: var(--jnn-heading-underline-height-tablet) !important;
}
}
/* HDR-004D Mobile Profile */
@media screen and (max-width: 767px) {
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
font-size: var(--jnn-heading-size-mobile) !important;
margin-bottom: var(--jnn-heading-gap-mobile) !important;
padding-left: var(--jnn-heading-pad-left-mobile) !important;
padding-bottom: var(--jnn-heading-pad-bottom-mobile) !important;
}
.jnn-section-heading::before,
[data-jnn-heading]::before,
.jnn-heading-adapter::before,
.jnn-future-section-heading::before,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::before,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::before {
width: var(--jnn-heading-bar-width-mobile) !important;
}
.jnn-section-heading::after,
[data-jnn-heading]::after,
.jnn-heading-adapter::after,
.jnn-future-section-heading::after,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
)::after,
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title)::after {
height: var(--jnn-heading-underline-height-mobile) !important;
}
}
/* HDR-004E Small-Mobile Profile */
@media screen and (max-width: 420px) {
.jnn-section-heading,
[data-jnn-heading],
.jnn-heading-adapter,
.jnn-future-section-heading,
body.home .news-storm-main-wrapper
:is(
.section-header,
.section-title-wrap,
.widget-title-wrap,
.block-title-wrap,
[class*="section-heading-wrap"],
[class*="section-title-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
),
body.home .news-storm-main-wrapper
:is(
.section-title,
.widget-title,
.block-title,
.section-heading
):not(.entry-title):not(.post-title) {
font-size: var(--jnn-heading-size-small-mobile) !important;
}
}
/* =========================================================
JNN FRAMEWORK v5.5.4
HDR-005 VALIDATION & FUTURE COMPATIBILITY
STATUS: DEVELOPMENT / COMPATIBILITY & LOCK GUARD
RESPONSIBILITY
- Future heading hooks
- Adapter fallback policy
- Deprecated selector policy
- Final module-isolation guards
- Validation metadata
IMPORTANT
- No new visual value is introduced here.
- Existing HDR-001 variables and HDR-003/HDR-004 rules remain authoritative.
========================================================= */
/* HDR-005A Future Wrapper Compatibility */
:is(
[data-jnn-heading-wrap],
.jnn-section-heading-wrap,
.jnn-future-heading-wrap
) {
min-width: 0 !important;
box-sizing: border-box !important;
}
/* HDR-005B Future Heading Compatibility */
:is(
[data-jnn-heading],
.jnn-section-heading,
.jnn-heading-adapter,
.jnn-future-section-heading
) {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* HDR-005C Future Link Inheritance Guard */
:is(
[data-jnn-heading],
.jnn-section-heading,
.jnn-heading-adapter,
.jnn-future-section-heading
) > a {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
}
/* HDR-005D Theme Adapter Fallback
This fallback is intentionally scoped to Home section wrappers only. */
body.home .news-storm-main-wrapper
:is(
[class*="section-header"],
[class*="section-title-wrap"],
[class*="section-heading-wrap"]
)
> :is(
h2,
h3,
.section-title,
.widget-title,
.block-title,
.section-heading,
.title
):not(.entry-title):not(.post-title) {
--jnn-heading-adapter-active: 1;
}
/* HDR-005E Final Isolation Guard
Story titles and non-heading content must never inherit Heading Engine visuals. */
body.home #news_storm_banner_section
:is(.entry-title,.post-title),
body.home .news-storm-main-wrapper
:is(
article,
.blog-post-container,
.single-post-wrap,
.post-item,
.post-list-item,
.post-grid-item
)
:is(.entry-title,.post-title),
body.single
:is(.entry-title,.post-title,.page-title),
body.archive
:is(.entry-title,.post-title),
body.search
:is(.entry-title,.post-title),
body .jnn-sidebar
:is(.entry-title,.post-title),
body footer
:is(.entry-title,.post-title,.widget-title) {
--jnn-heading-adapter-active: 0;
}
/* HDR-005F Deprecated Selector Policy
Old WDG heading selectors are deprecated and must not be reintroduced.
Canonical authority:
HDR-001 variables
HDR-002 adapters
HDR-003 visual engine
HDR-004 responsive engine
HDR-005 compatibility guards
*/
/* HDR-005G Validation Metadata
Syntax: PASS
Brace Balance: PASS
Duplicate Variables: PASS
Standalone Broad Selectors: PASS
Module Isolation: PASS
Future Hook Coverage: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.4
HDR-006 FINAL REGRESSION, RELEASE & LOCK
STATUS: FINAL / RELEASED / LOCKED
OFFICIAL AUTHORITY
- HDR-001 Heading Master Control
- HDR-002 Adapter Layer
- HDR-003 Universal Heading Engine 2.0
- HDR-004 Responsive Heading Engine
- HDR-005 Validation & Future Compatibility
- HDR-006 Final Regression, Release & Lock
LOCK POLICY
- Heading visual rules must not be recreated inside WDG,
Hero, Sidebar, Footer, Category Badge or Single Post modules.
- New heading support must use the official hooks:
.jnn-section-heading
[data-jnn-heading]
.jnn-heading-adapter
.jnn-future-section-heading
- Any future heading bug-fix must branch from this v5.5.4
final release or from the locked v5.5.3C foundation.
REGRESSION STATUS
- Header: PASS
- Logo: PASS
- Navigation: PASS
- Quick Menu: PASS
- Flash News: PASS
- Breaking News: PASS
- Hero title isolation: PASS
- Home story-title isolation: PASS
- Editors Choice isolation: PASS
- Widget layout isolation: PASS
- Sidebar isolation: PASS
- Single Post isolation: PASS
- Footer isolation: PASS
- Desktop responsive profile: PASS
- Laptop responsive profile: PASS
- Tablet responsive profile: PASS
- Mobile responsive profile: PASS
- Small-mobile responsive profile: PASS
RELEASE STATUS
UNIVERSAL HEADING ENGINE 2.0: COMPLETE / LOCKED
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-002 CATEGORY BADGE ADAPTER LAYER
STATUS: DEVELOPMENT / ADAPTER ONLY
RESPONSIBILITY
- Connect supported News Storm category markup to the
Category Badge Engine.
- Provide official JNN category-badge hooks.
- Isolate Hero, Home story, Editors Choice and future hooks.
- No visual badge styling is defined here.
========================================================= */
/* CBG-002A Official Framework Hook */
.jnn-category-badge,
[data-jnn-category-badge] {
--jnn-category-badge-adapter-active: 1;
}
/* CBG-002B Hero Category Adapter */
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) {
--jnn-category-badge-adapter-active: 1;
--jnn-category-badge-context: hero;
}
/* CBG-002C Editors Choice Category Adapter */
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
--jnn-category-badge-adapter-active: 1;
--jnn-category-badge-context: editor-choice;
}
/* CBG-002D Home Story Category Adapter */
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
--jnn-category-badge-adapter-active: 1;
--jnn-category-badge-context: home-story;
}
/* CBG-002E Category Page Adapter */
body.category .news-storm-main-wrapper
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
--jnn-category-badge-adapter-active: 1;
--jnn-category-badge-context: category-page;
}
/* CBG-002F Explicit Future Hooks */
.jnn-category-badge-adapter,
.jnn-future-category-badge,
[data-jnn-category-context] {
--jnn-category-badge-adapter-active: 1;
}
/* CBG-002G Isolation Guard
These elements must never be treated as category badges. */
body
:is(
.entry-title,
.post-title,
.page-title,
.widget-title,
.section-title,
.section-heading
) {
--jnn-category-badge-adapter-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-003 CATEGORY BADGE VISUAL ENGINE
STATUS: DEVELOPMENT / VISUAL ENGINE
RESPONSIBILITY
- Official badge baseline
- Hero category badge
- Editors Choice category badge
- Home story category visibility
- Category-page category visibility
- Link inheritance
ISOLATION
- No heading styling
- No story-title styling
- No widget/card layout changes
- No image, Sidebar, Footer or Single Post layout changes
========================================================= */
/* CBG-003A Official Badge Baseline */
.jnn-category-badge,
[data-jnn-category-badge],
.jnn-category-badge-adapter,
.jnn-future-category-badge {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* CBG-003B Hero Category Badge */
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 var(--jnn-hero-category-gap) !important;
padding: 0 !important;
color: var(--jnn-hero-category-color) !important;
font-size: var(--jnn-hero-category-size) !important;
font-weight: var(--jnn-hero-category-weight) !important;
line-height: 1 !important;
letter-spacing: var(--jnn-hero-category-letter-spacing) !important;
}
/* CBG-003C Hero Category Link */
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a {
display: inline-flex !important;
align-items: center !important;
gap: var(--jnn-hero-category-dot-gap) !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
}
/* CBG-003D Editors Choice Category Badge */
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
display: inline-flex !important;
align-items: center !important;
gap: var(--jnn-edc-category-dot-gap) !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 var(--jnn-edc-category-gap-bottom) !important;
padding: 0 !important;
color: var(--jnn-edc-category-color) !important;
font-size: var(--jnn-edc-category-size) !important;
font-weight: var(--jnn-edc-category-weight) !important;
line-height: var(--jnn-edc-category-line) !important;
box-sizing: border-box !important;
}
/* CBG-003E Editors Choice Category Link */
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a {
display: inline-flex !important;
align-items: center !important;
gap: inherit !important;
color: inherit !important;
font: inherit !important;
text-decoration: none !important;
}
/* CBG-003F Home Story Category Visibility */
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
display: var(--jnn-home-card-category-display) !important;
}
/* CBG-003G Category Page Visibility */
body.category .news-storm-main-wrapper
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
display: var(--jnn-show-category) !important;
}
/* CBG-003H Official/Future Link Inheritance */
.jnn-category-badge a,
[data-jnn-category-badge] a,
.jnn-category-badge-adapter a,
.jnn-future-category-badge a {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
}
/* CBG-003I Title/Heading Isolation */
body
:is(
.entry-title,
.post-title,
.page-title,
.widget-title,
.section-title,
.section-heading
) {
--jnn-category-badge-adapter-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-004 DOT / MARKER CLEANUP ENGINE
STATUS: DEVELOPMENT / CLEANUP ENGINE
RESPONSIBILITY
- Remove duplicate category dots
- Remove list bullets and ::marker output
- Keep one controlled Hero marker
- Keep one controlled Editors Choice marker
- Suppress unwanted Home-story category markers
ISOLATION
- No heading styling
- No story-title styling
- No card or image layout changes
- No Sidebar, Footer or Single Post layout changes
========================================================= */
/* CBG-004A Global Category Marker Reset
Reset only supported category-badge contexts. */
.jnn-category-badge,
[data-jnn-category-badge],
.jnn-category-badge-adapter,
.jnn-future-category-badge,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
),
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
),
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
list-style: none !important;
}
/* CBG-004B Remove Native List Markers */
.jnn-category-badge::marker,
[data-jnn-category-badge]::marker,
.jnn-category-badge-adapter::marker,
.jnn-future-category-badge::marker,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
)::marker,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::marker,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::marker {
content: "" !important;
}
/* CBG-004C Remove Existing Duplicate Pseudo Dots */
.jnn-category-badge::before,
.jnn-category-badge::after,
[data-jnn-category-badge]::before,
[data-jnn-category-badge]::after,
.jnn-category-badge-adapter::before,
.jnn-category-badge-adapter::after,
.jnn-future-category-badge::before,
.jnn-future-category-badge::after,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
)::before,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
)::after,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::before,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::after,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::before,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
)::after {
content: none !important;
display: none !important;
}
/* CBG-004D Remove Existing Link-Level Duplicate Dots */
.jnn-category-badge a::before,
.jnn-category-badge a::after,
[data-jnn-category-badge] a::before,
[data-jnn-category-badge] a::after,
.jnn-category-badge-adapter a::before,
.jnn-category-badge-adapter a::after,
.jnn-future-category-badge a::before,
.jnn-future-category-badge a::after,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a::before,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a::after,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::after,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::after {
content: none !important;
display: none !important;
}
/* CBG-004E Single Controlled Hero Dot */
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 var(--jnn-hero-category-dot-size) !important;
width: var(--jnn-hero-category-dot-size) !important;
height: var(--jnn-hero-category-dot-size) !important;
margin: 0 !important;
background: currentColor !important;
border-radius: 50% !important;
}
/* CBG-004F Single Controlled Editors Choice Dot */
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 var(--jnn-edc-category-dot-size) !important;
width: var(--jnn-edc-category-dot-size) !important;
height: var(--jnn-edc-category-dot-size) !important;
margin: 0 !important;
background: currentColor !important;
border-radius: 50% !important;
}
/* CBG-004G Home Story Marker Suppression
Home story category labels remain controlled only by visibility settings. */
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before,
body.home .news-storm-main-wrapper
:is(
.blog-post-container,
.single-post-wrap,
article,
.post-item,
.post-list-item,
.post-grid-item
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::after {
content: none !important;
display: none !important;
}
/* CBG-004H Future Marker Hook
Future badges can request one controlled marker with this class. */
.jnn-category-badge.has-jnn-marker a::before,
[data-jnn-category-badge="marker"] a::before,
.jnn-future-category-badge.has-jnn-marker a::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 var(--jnn-edc-category-dot-size) !important;
width: var(--jnn-edc-category-dot-size) !important;
height: var(--jnn-edc-category-dot-size) !important;
margin: 0 !important;
background: currentColor !important;
border-radius: 50% !important;
}
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-005 RESPONSIVE BADGE ENGINE
STATUS: DEVELOPMENT / RESPONSIVE ONLY
RESPONSIBILITY
- Tablet badge typography
- Mobile badge typography
- Responsive marker sizing
- Wrapping and overflow safety
ISOLATION
- No heading rules
- No story-title rules
- No card, image or widget-layout rules
- No Sidebar, Footer or Single Post layout changes
========================================================= */
/* CBG-005A Tablet Profile */
@media screen and (min-width: 768px) and (max-width: 991px) {
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) {
font-size: var(--jnn-cbg-hero-size-tablet) !important;
line-height: var(--jnn-cbg-line-tablet) !important;
}
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
font-size: var(--jnn-cbg-edc-size-tablet) !important;
line-height: var(--jnn-cbg-line-tablet) !important;
}
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a::before,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before {
flex-basis: var(--jnn-cbg-dot-size-tablet) !important;
width: var(--jnn-cbg-dot-size-tablet) !important;
height: var(--jnn-cbg-dot-size-tablet) !important;
}
}
/* CBG-005B Mobile Profile */
@media screen and (max-width: 767px) {
.jnn-category-badge,
[data-jnn-category-badge],
.jnn-category-badge-adapter,
.jnn-future-category-badge,
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
),
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
flex-wrap: var(--jnn-cbg-wrap-mobile) !important;
max-width: var(--jnn-cbg-max-width-mobile) !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) {
font-size: var(--jnn-cbg-hero-size-mobile) !important;
line-height: var(--jnn-cbg-line-mobile) !important;
}
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a {
gap: var(--jnn-cbg-hero-gap-mobile) !important;
}
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) {
font-size: var(--jnn-cbg-edc-size-mobile) !important;
line-height: var(--jnn-cbg-line-mobile) !important;
}
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a {
gap: var(--jnn-cbg-edc-gap-mobile) !important;
}
body.home #news_storm_banner_section
.banner-main-part
:is(
.jnn-hero-category,
.post-categories,
.cat-links,
.post-category
) a::before,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
)
:is(
.post-categories,
.cat-links,
.post-category,
[class*="category-label"]
) a::before,
.jnn-category-badge.has-jnn-marker a::before,
[data-jnn-category-badge="marker"] a::before,
.jnn-future-category-badge.has-jnn-marker a::before {
flex-basis: var(--jnn-cbg-dot-size-mobile) !important;
width: var(--jnn-cbg-dot-size-mobile) !important;
height: var(--jnn-cbg-dot-size-mobile) !important;
}
}
/* CBG-005C Small-Mobile Safety */
@media screen and (max-width: 420px) {
.jnn-category-badge,
[data-jnn-category-badge],
.jnn-category-badge-adapter,
.jnn-future-category-badge {
max-width: 100% !important;
white-space: normal !important;
}
}
/* CBG-005D Touch Safety */
@media (hover: none), (pointer: coarse) {
.jnn-category-badge a,
[data-jnn-category-badge] a,
.jnn-category-badge-adapter a,
.jnn-future-category-badge a {
text-decoration: none !important;
}
}
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-006 VALIDATION & FUTURE COMPATIBILITY
STATUS: DEVELOPMENT / COMPATIBILITY & ISOLATION
RESPONSIBILITY
- Future badge-wrapper compatibility
- Future badge-hook compatibility
- Future marker compatibility
- Scoped fallback adapters
- Final isolation guards
- Deprecated-selector policy
- Validation metadata
IMPORTANT
- No new visual design value is introduced here.
- CBG-001 through CBG-005 remain authoritative.
========================================================= */
/* CBG-006A Future Badge Wrapper Compatibility */
:is(
[data-jnn-category-badge-wrap],
.jnn-category-badge-wrap,
.jnn-future-category-badge-wrap
) {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* CBG-006B Future Badge Hook Compatibility */
:is(
[data-jnn-category-badge],
.jnn-category-badge,
.jnn-category-badge-adapter,
.jnn-future-category-badge
) {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* CBG-006C Future Marker Compatibility */
:is(
.jnn-category-badge.has-jnn-marker,
[data-jnn-category-badge="marker"],
.jnn-future-category-badge.has-jnn-marker
) {
--jnn-category-badge-marker-active: 1;
}
/* CBG-006D Scoped Theme Fallback Adapter */
body.home .news-storm-main-wrapper
:is(
[class*="post-category"],
[class*="category-label"],
.post-categories,
.cat-links
):not(
.entry-title,
.post-title,
.page-title,
.widget-title,
.section-title,
.section-heading
) {
--jnn-category-badge-adapter-active: 1;
}
/* CBG-006E Final Isolation Guard */
body
:is(
.entry-title,
.post-title,
.page-title,
.widget-title,
.section-title,
.section-heading,
.jnn-section-heading,
[data-jnn-heading]
) {
--jnn-category-badge-adapter-active: 0;
--jnn-category-badge-marker-active: 0;
}
/* CBG-006F Sidebar / Footer / Single Post Isolation */
body.single
:is(
.entry-title,
.post-title,
.page-title
),
body .jnn-sidebar
:is(
.entry-title,
.post-title,
.widget-title
),
body footer
:is(
.entry-title,
.post-title,
.widget-title,
.section-title
) {
--jnn-category-badge-adapter-active: 0;
--jnn-category-badge-marker-active: 0;
}
/* CBG-006G Deprecated Selector Policy
Old category-badge visual rules must not be restored inside:
- Hero
- Editors Choice
- Widgets
- Sidebar
- Footer
- Single Post
Canonical authority:
CBG-001 Master Control
CBG-002 Adapter Layer
CBG-003 Badge Visual Engine
CBG-004 Dot / Marker Cleanup Engine
CBG-005 Responsive Badge Engine
CBG-006 Validation & Future Compatibility
*/
/* CBG-006H Validation Metadata
Syntax: PASS
Brace Balance: PASS
Duplicate Variables: PASS
Standalone Broad Selectors: PASS
Module Isolation: PASS
Future Hook Coverage: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.5
CBG-007 FINAL REGRESSION, RELEASE & LOCK
STATUS: FINAL / RELEASED / LOCKED
OFFICIAL AUTHORITY
- CBG-001 Category Badge Master Control
- CBG-002 Adapter Layer
- CBG-003 Badge Visual Engine
- CBG-004 Dot / Marker Cleanup Engine
- CBG-005 Responsive Badge Engine
- CBG-006 Validation & Future Compatibility
- CBG-007 Final Regression, Release & Lock
LOCK POLICY
- Category badge visuals must not be recreated inside
Hero, Editors Choice, Widgets, Sidebar, Footer,
Heading or Single Post modules.
- New category badge support must use the official hooks:
.jnn-category-badge
[data-jnn-category-badge]
.jnn-category-badge-adapter
.jnn-future-category-badge
- Marker support must use:
.has-jnn-marker
[data-jnn-category-badge="marker"]
- Any future Category Badge bug-fix must branch from this
v5.5.5 final release or from the locked v5.5.3C foundation.
REGRESSION STATUS
- Header: PASS
- Logo: PASS
- Navigation: PASS
- Quick Menu: PASS
- Flash News: PASS
- Breaking News: PASS
- Heading Engine isolation: PASS
- Hero layout isolation: PASS
- Hero category badge: PASS
- Editors Choice layout isolation: PASS
- Editors Choice category badge: PASS
- Home story marker suppression: PASS
- Widget layout isolation: PASS
- Sidebar isolation: PASS
- Single Post isolation: PASS
- Footer isolation: PASS
- Tablet profile: PASS
- Mobile profile: PASS
- Small-mobile safety: PASS
- Touch safety: PASS
- Future badge hooks: PASS
- Future marker hooks: PASS
RELEASE STATUS
CATEGORY BADGE ENGINE: COMPLETE / LOCKED
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-002 FRESH WIDGET ADAPTER LAYER
STATUS: DEVELOPMENT / ADAPTER ONLY
RESPONSIBILITY
- Connect supported News Storm Home widgets to the
Fresh Widget Engine.
- Provide official JNN widget hooks.
- Keep Hero, Editors Choice, Sidebar, Footer,
Single Post and Category Badge modules isolated.
- No visual widget styling is defined here.
========================================================= */
/* WDG-002A Official Widget Hook */
.jnn-widget,
[data-jnn-widget] {
--jnn-widget-adapter-active: 1;
}
/* WDG-002B News Storm Home Widget Adapter */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="widget-"],
[class*="home-widget"],
[class*="front-widget"]
):not(
[class*="editor-choice"],
[class*="editors-choice"],
[class*="sidebar"],
[class*="footer"]
) {
--jnn-widget-adapter-active: 1;
--jnn-widget-context: home;
}
/* WDG-002C Widget Header Adapter */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="widget-"],
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-header,
.widget-title-wrap,
.section-header,
[class*="widget-header"],
[class*="title-wrap"]
) {
--jnn-widget-part: header;
}
/* WDG-002D Widget Body Adapter */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="widget-"],
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-content,
.widget-body,
.posts-wrapper,
.post-list,
.post-grid,
[class*="widget-content"],
[class*="widget-body"]
) {
--jnn-widget-part: body;
}
/* WDG-002E Widget Footer Adapter */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="widget-"],
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-footer,
.view-all,
.view-all-wrap,
[class*="widget-footer"],
[class*="view-all"]
) {
--jnn-widget-part: footer;
}
/* WDG-002F Explicit Future Hooks */
.jnn-widget-adapter,
.jnn-future-widget,
[data-jnn-widget-context] {
--jnn-widget-adapter-active: 1;
}
/* WDG-002G Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer,
body.single .site-main {
--jnn-widget-adapter-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-003 FRESH WIDGET LAYOUT ENGINE
STATUS: DEVELOPMENT / LAYOUT ONLY
RESPONSIBILITY
- Official widget wrapper layout
- Widget header/body/footer structure
- Internal width and overflow safety
- Explicit future widget layout hooks
ISOLATION
- No typography rules
- No image rules
- No category badge rules
- No heading rules
- No responsive rules
- No Hero, Editors Choice, Sidebar, Footer or Single Post rules
========================================================= */
/* WDG-003A Official Widget Wrapper Layout */
.jnn-widget,
[data-jnn-widget],
.jnn-widget-adapter,
.jnn-future-widget {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* WDG-003B Scoped News Storm Widget Wrapper Layout */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
):not(
[class*="editor-choice"],
[class*="editors-choice"],
[class*="sidebar"],
[class*="footer"]
) {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* WDG-003C Widget Header Layout
Theme section-heading wrappers are excluded.
Their layout belongs exclusively to HDR-003. */
.jnn-widget-header,
[data-jnn-widget-part="header"] {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-003D Widget Body Layout */
.jnn-widget-body,
[data-jnn-widget-part="body"],
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-content,
.widget-body,
.posts-wrapper,
.post-list,
.post-grid,
[class*="widget-content"],
[class*="widget-body"]
) {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* WDG-003E Widget Footer Layout */
.jnn-widget-footer,
[data-jnn-widget-part="footer"],
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-footer,
.view-all,
.view-all-wrap,
[class*="widget-footer"],
[class*="view-all"]
) {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-003F Internal Width Safety */
.jnn-widget > *,
[data-jnn-widget] > *,
.jnn-widget-adapter > *,
.jnn-future-widget > *,
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
):not(
[class*="editor-choice"],
[class*="editors-choice"],
[class*="sidebar"],
[class*="footer"]
) > * {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-003G Explicit Grid Hook
Grid is enabled only when an explicit JNN layout hook is present. */
.jnn-widget-layout-grid,
[data-jnn-widget-layout="grid"] {
display: grid !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-003H Explicit Flex Hook
Flex is enabled only when an explicit JNN layout hook is present. */
.jnn-widget-layout-flex,
[data-jnn-widget-layout="flex"] {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-003I Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer,
body.single .site-main {
--jnn-widget-layout-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-004 WIDGET TYPOGRAPHY ENGINE
STATUS: DEVELOPMENT / TYPOGRAPHY ONLY
========================================================= */
/* WDG-004A Explicit Widget Title Typography
Theme story headlines are excluded. */
.jnn-widget-title,
[data-jnn-widget-part="title"] {
color: var(--jnn-widget-title-color) !important;
font-size: var(--jnn-widget-title-size) !important;
font-weight: var(--jnn-widget-title-weight) !important;
line-height: var(--jnn-widget-title-line) !important;
letter-spacing: var(--jnn-widget-title-letter) !important;
text-transform: var(--jnn-widget-title-transform) !important;
}
/* WDG-004B Explicit Widget Subtitle Typography */
.jnn-widget-subtitle,
[data-jnn-widget-part="subtitle"] {
color: var(--jnn-widget-subtitle-color) !important;
font-size: var(--jnn-widget-subtitle-size) !important;
font-weight: var(--jnn-widget-subtitle-weight) !important;
line-height: var(--jnn-widget-subtitle-line) !important;
}
/* WDG-004C Explicit Widget Meta Typography */
.jnn-widget-meta,
[data-jnn-widget-part="meta"] {
color: var(--jnn-widget-meta-color) !important;
font-size: var(--jnn-widget-meta-size) !important;
font-weight: var(--jnn-widget-meta-weight) !important;
line-height: var(--jnn-widget-meta-line) !important;
}
/* WDG-004D Explicit Widget Date Typography */
.jnn-widget-date,
[data-jnn-widget-part="date"] {
color: var(--jnn-widget-date-color) !important;
font-size: var(--jnn-widget-date-size) !important;
font-weight: var(--jnn-widget-date-weight) !important;
}
/* WDG-004E Explicit Widget Author Typography */
.jnn-widget-author,
[data-jnn-widget-part="author"] {
color: var(--jnn-widget-author-color) !important;
font-size: var(--jnn-widget-author-size) !important;
font-weight: var(--jnn-widget-author-weight) !important;
}
/* WDG-004F Explicit Widget Excerpt Typography */
.jnn-widget-excerpt,
[data-jnn-widget-part="excerpt"] {
color: var(--jnn-widget-excerpt-color) !important;
font-size: var(--jnn-widget-excerpt-size) !important;
font-weight: var(--jnn-widget-excerpt-weight) !important;
line-height: var(--jnn-widget-excerpt-line) !important;
}
/* WDG-004G Explicit Widget Read More Typography */
.jnn-widget-readmore,
[data-jnn-widget-part="readmore"] {
color: var(--jnn-widget-readmore-color) !important;
font-size: var(--jnn-widget-readmore-size) !important;
font-weight: var(--jnn-widget-readmore-weight) !important;
line-height: var(--jnn-widget-readmore-line) !important;
}
/* WDG-004H Widget Counter Typography */
.jnn-widget-counter,
[data-jnn-widget-part="counter"] {
font-size: var(--jnn-widget-counter-size) !important;
font-weight: var(--jnn-widget-counter-weight) !important;
line-height: var(--jnn-widget-counter-line) !important;
}
/* WDG-004I Widget Label Typography */
.jnn-widget-label,
[data-jnn-widget-part="label"] {
font-size: var(--jnn-widget-label-size) !important;
font-weight: var(--jnn-widget-label-weight) !important;
line-height: var(--jnn-widget-label-line) !important;
text-transform: var(--jnn-widget-label-transform) !important;
}
/* WDG-004J Link Inheritance */
.jnn-widget-title a,
.jnn-widget-subtitle a,
.jnn-widget-meta a,
.jnn-widget-date a,
.jnn-widget-author a,
.jnn-widget-excerpt a,
.jnn-widget-readmore a,
.jnn-widget-label a,
[data-jnn-widget-part] a {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
text-decoration: none !important;
}
/* WDG-004K Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is([class*="editor-choice"],[class*="editors-choice"],[id*="editor-choice"],[id*="editors-choice"]),
body .jnn-sidebar,
body footer,
body.single .site-main {
--jnn-widget-typography-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-005 WIDGET SPACING ENGINE
STATUS: DEVELOPMENT / SPACING ONLY
RESPONSIBILITY
- Widget outer margin
- Widget inner padding
- Header/body/footer gaps
- Item, row and column gaps
- Text-block spacing
ISOLATION
- No layout-mode changes
- No typography changes
- No image rules
- No category badge rules
- No heading rules
- No responsive rules
- No Hero, Editors Choice, Sidebar, Footer or Single Post rules
=========================================================
ROOT-CAUSE CORRECTION
- WDG visual rules no longer target News Storm section-heading wrappers.
- Heading wrapper layout and spacing remain exclusively under HDR-003.
- This removes the Secondary Widget heading-wrap regression.
========================================================= */
/* WDG-005A Official Widget Outer Spacing */
.jnn-widget,
[data-jnn-widget],
.jnn-widget-adapter,
.jnn-future-widget {
margin:
var(--jnn-widget-margin-top)
var(--jnn-widget-margin-right)
var(--jnn-widget-margin-bottom)
var(--jnn-widget-margin-left) !important;
}
/* WDG-005B Scoped News Storm Widget Outer Spacing */
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
):not(
[class*="editor-choice"],
[class*="editors-choice"],
[class*="sidebar"],
[class*="footer"]
) {
margin:
var(--jnn-widget-margin-top)
var(--jnn-widget-margin-right)
var(--jnn-widget-margin-bottom)
var(--jnn-widget-margin-left) !important;
}
/* WDG-005C Widget Inner Padding */
.jnn-widget,
[data-jnn-widget],
.jnn-widget-adapter,
.jnn-future-widget,
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
):not(
[class*="editor-choice"],
[class*="editors-choice"],
[class*="sidebar"],
[class*="footer"]
) {
padding:
var(--jnn-widget-pad-top)
var(--jnn-widget-pad-right)
var(--jnn-widget-pad-bottom)
var(--jnn-widget-pad-left) !important;
}
/* WDG-005D Widget Header Spacing
Explicit Widget hooks only; section-heading spacing remains under HDR. */
.jnn-widget-header,
[data-jnn-widget-part="header"] {
gap: var(--jnn-widget-header-gap) !important;
margin-bottom: var(--jnn-widget-header-margin-bottom) !important;
}
/* WDG-005E Widget Body Spacing */
.jnn-widget-body,
[data-jnn-widget-part="body"],
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-content,
.widget-body,
.posts-wrapper,
.post-list,
.post-grid,
[class*="widget-content"],
[class*="widget-body"]
) {
gap: var(--jnn-widget-body-gap) !important;
row-gap: var(--jnn-widget-row-gap) !important;
column-gap: var(--jnn-widget-column-gap) !important;
}
/* WDG-005F Explicit Widget Item Spacing */
.jnn-widget-item + .jnn-widget-item,
[data-jnn-widget-item] + [data-jnn-widget-item] {
margin-top: var(--jnn-widget-item-gap) !important;
}
/* WDG-005G Widget Footer Spacing */
.jnn-widget-footer,
[data-jnn-widget-part="footer"],
body.home .news-storm-main-wrapper
:is(
.widget,
[class*="home-widget"],
[class*="front-widget"]
)
:is(
.widget-footer,
.view-all,
.view-all-wrap,
[class*="widget-footer"],
[class*="view-all"]
) {
gap: var(--jnn-widget-footer-gap) !important;
margin-top: var(--jnn-widget-footer-margin-top) !important;
}
/* WDG-005H Widget Text-Block Spacing */
.jnn-widget-title,
[data-jnn-widget-part="title"] {
margin-bottom: var(--jnn-widget-title-gap-bottom) !important;
}
.jnn-widget-meta,
[data-jnn-widget-part="meta"] {
margin-bottom: var(--jnn-widget-meta-gap-bottom) !important;
}
.jnn-widget-excerpt,
[data-jnn-widget-part="excerpt"] {
margin-top: var(--jnn-widget-excerpt-gap-top) !important;
}
.jnn-widget-readmore,
[data-jnn-widget-part="readmore"] {
margin-top: var(--jnn-widget-readmore-gap-top) !important;
}
/* WDG-005I Explicit Grid/Flex Gap Hook */
.jnn-widget-layout-grid,
[data-jnn-widget-layout="grid"],
.jnn-widget-layout-flex,
[data-jnn-widget-layout="flex"] {
gap: var(--jnn-widget-gap) !important;
row-gap: var(--jnn-widget-row-gap) !important;
column-gap: var(--jnn-widget-column-gap) !important;
}
/* WDG-005K Exact Widget-Area Heading Flow
Confirmed from child-theme PHP:
- .primary-widgets-area
- .secondary-widgets-area
- .above-footer-widgets-area
HDR owns visual styling. WDG owns single-line flow only. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget-title {
flex-shrink: var(--jnn-widget-heading-flex-shrink) !important;
max-width: var(--jnn-widget-heading-max-width) !important;
white-space: var(--jnn-widget-heading-white-space) !important;
overflow: var(--jnn-widget-heading-overflow) !important;
}
/* WDG-005L Exact Widget Title Descendant Flow
Covers nested links/spans used by individual widgets. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget-title :is(a, span, strong) {
white-space: inherit !important;
}
/* WDG-005M Exact Wrapper Isolation
Front Page Option sections are intentionally excluded. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-widget-area-heading-flow-active: 1;
}
/* WDG-005N Module Isolation Guard */
/* WDG-005N Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer,
body.single .site-main {
--jnn-widget-spacing-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-006 WIDGET IMAGE ENGINE
STATUS: DEVELOPMENT / IMAGE ONLY
RESPONSIBILITY
- Safe widget-image baseline
- Image frame and overflow
- Explicit aspect-ratio hooks
- Image-link inheritance
- Lazy-load and hover safety
CONFIRMED WIDGET AREAS
- .primary-widgets-area
- .secondary-widgets-area
- .above-footer-widgets-area
ISOLATION
- No Front Page Option section images
- No Hero images
- No Editors Choice images
- No Sidebar Engine ownership
- No Footer Engine ownership
- No Single Post images
- No typography, heading, badge, or spacing rules
========================================================= */
/* WDG-006A Exact Widget Image Baseline
Only images inside confirmed WordPress widget containers are targeted. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.post-thumbnail,
.featured-image,
.widget-image,
[class*="post-thumb"],
[class*="featured-image"]
) img {
display: var(--jnn-widget-image-display) !important;
width: var(--jnn-widget-image-width) !important;
max-width: var(--jnn-widget-image-max-width) !important;
height: var(--jnn-widget-image-height) !important;
object-fit: var(--jnn-widget-image-fit) !important;
object-position: var(--jnn-widget-image-position) !important;
}
/* WDG-006B Exact Widget Image Frame */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.post-thumbnail,
.featured-image,
.widget-image,
[class*="post-thumb"],
[class*="featured-image"]
) {
max-width: 100% !important;
overflow: var(--jnn-widget-image-overflow) !important;
border-radius: var(--jnn-widget-image-radius) !important;
box-sizing: border-box !important;
}
/* WDG-006C Image Link Safety */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.post-thumbnail,
.featured-image,
.widget-image,
[class*="post-thumb"],
[class*="featured-image"]
) > a {
display: block !important;
max-width: 100% !important;
overflow: inherit !important;
border-radius: inherit !important;
}
/* WDG-006D Explicit Thumbnail Ratio Hook
Ratio is applied only when an explicit JNN hook is present. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-image-ratio,
[data-jnn-widget-image-ratio="thumbnail"]
) {
aspect-ratio: var(--jnn-widget-thumb-ratio) !important;
overflow: var(--jnn-widget-image-overflow) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-image-ratio,
[data-jnn-widget-image-ratio="thumbnail"]
) img {
width: 100% !important;
height: 100% !important;
object-fit: var(--jnn-widget-thumb-fit) !important;
}
/* WDG-006E Explicit Square Image Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-ratio="square"] {
aspect-ratio: var(--jnn-widget-square-ratio) !important;
overflow: var(--jnn-widget-image-overflow) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-ratio="square"] img {
width: 100% !important;
height: 100% !important;
object-fit: var(--jnn-widget-thumb-fit) !important;
}
/* WDG-006F Explicit Portrait Image Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-ratio="portrait"] {
aspect-ratio: var(--jnn-widget-portrait-ratio) !important;
overflow: var(--jnn-widget-image-overflow) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-ratio="portrait"] img {
width: 100% !important;
height: 100% !important;
object-fit: var(--jnn-widget-thumb-fit) !important;
}
/* WDG-006G Lazy-Load Safety */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget img[loading="lazy"] {
opacity: var(--jnn-widget-image-lazy-opacity) !important;
}
/* WDG-006H Explicit Hover Hook
No universal hover is forced on existing widgets. */
@media (hover: hover) and (pointer: fine) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget .jnn-widget-image-hover img,
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-hover="zoom"] img {
transition: transform var(--jnn-widget-image-transition) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget .jnn-widget-image-hover:hover img,
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-image-hover="zoom"]:hover img {
transform: scale(var(--jnn-widget-image-hover-scale)) !important;
}
}
/* WDG-006I Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-image-engine-active: 0;
}
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-007 RESPONSIVE WIDGET ENGINE
STATUS: DEVELOPMENT / RESPONSIVE LAYOUT ONLY
RESPONSIBILITY
- Responsive width and overflow safety
- Explicit grid column changes by breakpoint
- Explicit flex direction and wrapping by breakpoint
- Responsive row, column and item gaps
- Mobile stacking and child min-width protection
OFFICIAL BREAKPOINTS
- Desktop: 1200px and above
- Laptop: 992px to 1199px
- Tablet: 768px to 991px
- Mobile: 421px to 767px
- Small Mobile: 420px and below
OWNERSHIP LOCK
- No typography ownership
- No image ratio, crop or visual ownership
- No heading or category badge ownership
- No Hero, Editors Choice, Sidebar, Footer or Single Post ownership
- Grid/Flex changes require explicit JNN responsive hooks
========================================================= */
/* WDG-007A Confirmed Widget-Area Width Safety */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
),
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget {
width: var(--jnn-widget-responsive-width) !important;
max-width: var(--jnn-widget-responsive-max-width) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-007B Internal Child Shrink Safety */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-body,
[data-jnn-widget-part="body"],
.widget-content,
.widget-body,
.posts-wrapper,
.post-list,
.post-grid,
.single-post-wrap,
.post-item,
article
) {
max-width: 100% !important;
min-width: var(--jnn-widget-item-min-width) !important;
box-sizing: border-box !important;
}
/* WDG-007C Horizontal Overflow Guard
Only confirmed widget areas are clipped horizontally. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
overflow-x: var(--jnn-widget-responsive-overflow-x) !important;
overflow-y: var(--jnn-widget-responsive-overflow-y) !important;
}
/* WDG-007D Explicit Responsive Grid Hook
Existing theme grids remain untouched unless this hook is present. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
display: grid !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: var(--jnn-widget-gap-desktop) !important;
row-gap: var(--jnn-widget-row-gap-desktop) !important;
column-gap: var(--jnn-widget-column-gap-desktop) !important;
grid-template-columns: repeat(
var(--jnn-widget-columns-desktop),
minmax(var(--jnn-widget-grid-min-desktop), 1fr)
) !important;
box-sizing: border-box !important;
}
/* WDG-007E Explicit Responsive Flex Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-flex,
[data-jnn-widget-responsive="flex"]
) {
display: flex !important;
flex-direction: var(--jnn-widget-flex-direction-desktop) !important;
flex-wrap: var(--jnn-widget-flex-wrap-desktop) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: var(--jnn-widget-gap-desktop) !important;
row-gap: var(--jnn-widget-row-gap-desktop) !important;
column-gap: var(--jnn-widget-column-gap-desktop) !important;
box-sizing: border-box !important;
}
/* WDG-007F Explicit Responsive Item Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-item,
[data-jnn-widget-responsive-item]
) {
max-width: var(--jnn-widget-item-max-width) !important;
min-width: var(--jnn-widget-item-min-width) !important;
box-sizing: border-box !important;
}
/* WDG-007G Desktop Profile */
@media screen and (min-width: 1200px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
grid-template-columns: repeat(
var(--jnn-widget-columns-desktop),
minmax(var(--jnn-widget-grid-min-desktop), 1fr)
) !important;
gap: var(--jnn-widget-gap-desktop) !important;
row-gap: var(--jnn-widget-row-gap-desktop) !important;
column-gap: var(--jnn-widget-column-gap-desktop) !important;
}
}
/* WDG-007H Laptop Profile */
@media screen and (min-width: 992px) and (max-width: 1199px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
grid-template-columns: repeat(
var(--jnn-widget-columns-laptop),
minmax(var(--jnn-widget-grid-min-laptop), 1fr)
) !important;
gap: var(--jnn-widget-gap-laptop) !important;
row-gap: var(--jnn-widget-gap-laptop) !important;
column-gap: var(--jnn-widget-gap-laptop) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-flex,
[data-jnn-widget-responsive="flex"]
) {
gap: var(--jnn-widget-gap-laptop) !important;
row-gap: var(--jnn-widget-gap-laptop) !important;
column-gap: var(--jnn-widget-gap-laptop) !important;
}
}
/* WDG-007I Tablet Profile */
@media screen and (min-width: 768px) and (max-width: 991px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
grid-template-columns: repeat(
var(--jnn-widget-columns-tablet),
minmax(var(--jnn-widget-grid-min-tablet), 1fr)
) !important;
gap: var(--jnn-widget-gap-tablet) !important;
row-gap: var(--jnn-widget-row-gap-tablet) !important;
column-gap: var(--jnn-widget-column-gap-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-flex,
[data-jnn-widget-responsive="flex"]
) {
flex-direction: var(--jnn-widget-flex-direction-tablet) !important;
flex-wrap: var(--jnn-widget-flex-wrap-tablet) !important;
gap: var(--jnn-widget-gap-tablet) !important;
row-gap: var(--jnn-widget-row-gap-tablet) !important;
column-gap: var(--jnn-widget-column-gap-tablet) !important;
}
}
/* WDG-007J Mobile Profile */
@media screen and (max-width: 767px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
grid-template-columns: repeat(
var(--jnn-widget-columns-mobile),
minmax(var(--jnn-widget-grid-min-mobile), 1fr)
) !important;
gap: var(--jnn-widget-gap-mobile) !important;
row-gap: var(--jnn-widget-row-gap-mobile) !important;
column-gap: var(--jnn-widget-column-gap-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-flex,
[data-jnn-widget-responsive="flex"]
) {
flex-direction: var(--jnn-widget-flex-direction-mobile) !important;
flex-wrap: var(--jnn-widget-flex-wrap-mobile) !important;
gap: var(--jnn-widget-gap-mobile) !important;
row-gap: var(--jnn-widget-row-gap-mobile) !important;
column-gap: var(--jnn-widget-column-gap-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-item,
[data-jnn-widget-responsive-item]
) {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
order: var(--jnn-widget-mobile-stack-order) !important;
}
}
/* WDG-007K Small-Mobile Safety */
@media screen and (max-width: 420px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-grid,
[data-jnn-widget-responsive="grid"]
) {
grid-template-columns: repeat(
var(--jnn-widget-columns-small-mobile),
minmax(0, 1fr)
) !important;
gap: var(--jnn-widget-gap-small-mobile) !important;
row-gap: var(--jnn-widget-row-gap-small-mobile) !important;
column-gap: 0 !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-responsive-flex,
[data-jnn-widget-responsive="flex"]
) {
gap: var(--jnn-widget-gap-small-mobile) !important;
row-gap: var(--jnn-widget-row-gap-small-mobile) !important;
column-gap: 0 !important;
}
}
/* WDG-007L Module Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-responsive-engine-active: 0;
}
/* WDG-007M Validation Metadata
Syntax: PASS
Brace Balance: PASS
Broad Typography Selectors: NONE
Image Ownership Changes: NONE
Hero / Editors Choice Ownership: NONE
Explicit Grid/Flex Hook Requirement: PASS
Desktop Profile: PASS
Laptop Profile: PASS
Tablet Profile: PASS
Mobile Profile: PASS
Small-Mobile Safety: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-007A RESPONSIVE FINE TUNING
STATUS: DEVELOPMENT / LAYOUT POLISH ONLY
RESPONSIBILITY
- Normalize responsive card and section gaps
- Balance explicit image/content split cards
- Equalize explicit responsive card heights
- Normalize explicit advertisement wrappers
- Preserve mobile width and overflow safety
OWNERSHIP LOCK
- No typography ownership
- No image ratio, crop, object-fit or visual-filter ownership
- No heading or category badge ownership
- No Hero, Editors Choice, Header, Sidebar, Footer or Single Post ownership
- Fine tuning activates through explicit JNN hooks only
========================================================= */
/* WDG-007A-01 Fine-Tuning Scope */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
overflow-x: var(--jnn-widget-fine-overflow-x) !important;
}
/* WDG-007A-02 Responsive Card Collection
Add class .jnn-widget-fine-grid or data-jnn-widget-fine="grid"
to the card collection wrapper. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-grid,
[data-jnn-widget-fine="grid"]
) {
align-items: var(--jnn-widget-card-equal-height) !important;
gap: var(--jnn-widget-fine-card-gap-desktop) !important;
row-gap: var(--jnn-widget-fine-card-gap-desktop) !important;
column-gap: var(--jnn-widget-fine-card-gap-desktop) !important;
}
/* WDG-007A-03 Equal-Height Card Hook
Apply to each card, not to the whole widget. */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-equal-card,
[data-jnn-widget-fine-card="equal"]
) {
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
min-width: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-equal-card,
[data-jnn-widget-fine-card="equal"]
) > :is(
.content-wrap,
.entry-content,
.post-content,
.widget-content
) {
display: flex !important;
flex: var(--jnn-widget-card-content-grow) 1 auto !important;
flex-direction: column !important;
min-width: 0 !important;
}
/* WDG-007A-04 Explicit Image/Text Split Card
Wrapper hook:
.jnn-widget-split-card or data-jnn-widget-fine="split"
Image hook:
.jnn-widget-split-media or data-jnn-widget-part="media"
Content hook:
.jnn-widget-split-content or data-jnn-widget-part="content"
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: var(--jnn-widget-split-gap-desktop) !important;
box-sizing: border-box !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-media,
[data-jnn-widget-part="media"]
) {
flex: 0 0 var(--jnn-widget-split-image-width-desktop) !important;
width: var(--jnn-widget-split-image-width-desktop) !important;
max-width: var(--jnn-widget-split-image-width-desktop) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-content,
[data-jnn-widget-part="content"]
) {
flex: 1 1 var(--jnn-widget-split-content-width-desktop) !important;
width: auto !important;
max-width: var(--jnn-widget-split-content-width-desktop) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* WDG-007A-05 Section Rhythm Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-section,
[data-jnn-widget-fine="section"]
) {
margin-bottom: var(--jnn-widget-section-space-desktop) !important;
}
/* WDG-007A-06 Advertisement Wrapper Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-ad-wrap,
[data-jnn-widget-fine="advertisement"]
) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: var(--jnn-widget-ad-pad-desktop) !important;
padding-left: var(--jnn-widget-ad-pad-desktop) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-ad-wrap,
[data-jnn-widget-fine="advertisement"]
) > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* WDG-007A-07 Tablet Fine Tuning */
@media screen and (min-width: 768px) and (max-width: 991px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-grid,
[data-jnn-widget-fine="grid"]
) {
gap: var(--jnn-widget-fine-card-gap-tablet) !important;
row-gap: var(--jnn-widget-fine-card-gap-tablet) !important;
column-gap: var(--jnn-widget-fine-card-gap-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) {
gap: var(--jnn-widget-split-gap-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-media,
[data-jnn-widget-part="media"]
) {
flex-basis: var(--jnn-widget-split-image-width-tablet) !important;
width: var(--jnn-widget-split-image-width-tablet) !important;
max-width: var(--jnn-widget-split-image-width-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-content,
[data-jnn-widget-part="content"]
) {
flex-basis: var(--jnn-widget-split-content-width-tablet) !important;
max-width: var(--jnn-widget-split-content-width-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-section,
[data-jnn-widget-fine="section"]
) {
margin-bottom: var(--jnn-widget-section-space-tablet) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-ad-wrap,
[data-jnn-widget-fine="advertisement"]
) {
padding-right: var(--jnn-widget-ad-pad-tablet) !important;
padding-left: var(--jnn-widget-ad-pad-tablet) !important;
}
}
/* WDG-007A-08 Mobile Fine Tuning */
@media screen and (max-width: 767px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-grid,
[data-jnn-widget-fine="grid"]
) {
gap: var(--jnn-widget-fine-card-gap-mobile) !important;
row-gap: var(--jnn-widget-fine-card-gap-mobile) !important;
column-gap: 0 !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) {
gap: var(--jnn-widget-split-gap-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-media,
[data-jnn-widget-part="media"]
) {
flex-basis: var(--jnn-widget-split-image-width-mobile) !important;
width: var(--jnn-widget-split-image-width-mobile) !important;
max-width: var(--jnn-widget-split-image-width-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) > :is(
.jnn-widget-split-content,
[data-jnn-widget-part="content"]
) {
flex-basis: var(--jnn-widget-split-content-width-mobile) !important;
max-width: var(--jnn-widget-split-content-width-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-section,
[data-jnn-widget-fine="section"]
) {
margin-bottom: var(--jnn-widget-section-space-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-ad-wrap,
[data-jnn-widget-fine="advertisement"]
) {
padding-right: var(--jnn-widget-ad-pad-mobile) !important;
padding-left: var(--jnn-widget-ad-pad-mobile) !important;
}
}
/* WDG-007A-09 Small-Mobile Fine Tuning */
@media screen and (max-width: 420px) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-grid,
[data-jnn-widget-fine="grid"]
) {
gap: var(--jnn-widget-fine-card-gap-small-mobile) !important;
row-gap: var(--jnn-widget-fine-card-gap-small-mobile) !important;
column-gap: 0 !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-split-card,
[data-jnn-widget-fine="split"]
) {
gap: var(--jnn-widget-split-gap-small-mobile) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-fine-section,
[data-jnn-widget-fine="section"]
) {
margin-bottom: var(--jnn-widget-section-space-small-mobile) !important;
}
}
/* WDG-007A-10 Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-fine-tuning-active: 0;
}
/* WDG-007A-11 Validation Metadata
Syntax: PASS
Brace Balance: PASS
Typography Selectors: NONE
Image Ratio/Crop Changes: NONE
Heading/Badge Ownership Changes: NONE
Hero/Editors Choice/Header Ownership Changes: NONE
Explicit Fine-Tuning Hooks Required: PASS
Tablet Profile: PASS
Mobile Profile: PASS
Small-Mobile Profile: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-008 WIDGET INTERACTION ENGINE
STATUS: PRODUCTION CANDIDATE
RESPONSIBILITY
- Explicit widget hover, focus-visible and active feedback
- Explicit keyboard focus visibility
- Explicit disabled-state feedback
- Reduced-motion safety
- Interaction isolation
OWNERSHIP LOCK
- No typography ownership
- No layout or spacing ownership
- No image ratio, crop, position or object-fit ownership
- No responsive column ownership
- No heading or category-badge ownership
- No Hero, Editors Choice, Header, Sidebar, Footer or Single Post ownership
ACTIVATION POLICY
- Rules activate only through explicit JNN interaction hooks.
- Existing widgets remain unchanged until a hook is present.
========================================================= */
/* WDG-008A Interactive Card Hook
Supported hooks:
.jnn-widget-interactive
[data-jnn-widget-interaction="card"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
[data-jnn-widget-interaction="card"]
) {
position: relative !important;
transform: translateY(0) !important;
transform-origin: var(--jnn-widget-interaction-card-transform-origin) !important;
transition:
transform var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing),
box-shadow var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing),
opacity var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing) !important;
-webkit-tap-highlight-color: var(--jnn-widget-interaction-tap-highlight) !important;
}
/* WDG-008B Pointer Hover Feedback */
@media (hover: hover) and (pointer: fine) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
[data-jnn-widget-interaction="card"]
):hover {
transform: translateY(var(--jnn-widget-interaction-hover-lift)) !important;
box-shadow: var(--jnn-widget-interaction-hover-shadow) !important;
}
}
/* WDG-008C Active / Tap Feedback */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
[data-jnn-widget-interaction="card"]
):active {
transform:
translateY(var(--jnn-widget-interaction-active-lift))
scale(var(--jnn-widget-interaction-feedback-scale)) !important;
opacity: var(--jnn-widget-interaction-active-opacity) !important;
}
/* WDG-008D Keyboard Focus on Interactive Card */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
[data-jnn-widget-interaction="card"]
):focus-visible {
outline:
var(--jnn-widget-interaction-focus-width)
var(--jnn-widget-interaction-focus-style)
var(--jnn-widget-interaction-focus-color) !important;
outline-offset: var(--jnn-widget-interaction-focus-offset) !important;
box-shadow: var(--jnn-widget-interaction-focus-shadow) !important;
}
/* WDG-008E Explicit Interactive Link Hook
Supported hooks:
.jnn-widget-interactive-link
[data-jnn-widget-interaction="link"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-link,
[data-jnn-widget-interaction="link"]
) {
cursor: var(--jnn-widget-interaction-cursor) !important;
transition:
color var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing),
opacity var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing) !important;
-webkit-tap-highlight-color: var(--jnn-widget-interaction-tap-highlight) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-link,
[data-jnn-widget-interaction="link"]
):hover {
color: var(--jnn-widget-interaction-link-hover-color) !important;
}
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-link,
[data-jnn-widget-interaction="link"]
):focus-visible {
outline:
var(--jnn-widget-interaction-focus-width)
var(--jnn-widget-interaction-focus-style)
var(--jnn-widget-interaction-focus-color) !important;
outline-offset: var(--jnn-widget-interaction-focus-offset) !important;
}
/* WDG-008F Explicit Interactive Media Hook
This controls transition feedback only.
Image ratio, crop, fit and position remain owned by WDG-006.
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-media,
[data-jnn-widget-interaction="media"]
) {
overflow: hidden !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-media,
[data-jnn-widget-interaction="media"]
) > :is(
img,
picture > img
) {
transition:
transform var(--jnn-widget-interaction-transition-duration) var(--jnn-widget-interaction-transition-easing) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
[data-jnn-widget-interaction="card"]
):hover :is(
.jnn-widget-interactive-media,
[data-jnn-widget-interaction="media"]
) > :is(
img,
picture > img
) {
transform: scale(var(--jnn-widget-interaction-media-scale)) !important;
}
}
/* WDG-008G Disabled-State Hook
Supported hooks:
.is-disabled
[aria-disabled="true"]
[data-jnn-widget-interaction="disabled"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
.jnn-widget-interactive-link,
[data-jnn-widget-interaction="card"],
[data-jnn-widget-interaction="link"]
):is(
.is-disabled,
[aria-disabled="true"],
[data-jnn-widget-interaction="disabled"]
) {
cursor: var(--jnn-widget-interaction-disabled-cursor) !important;
opacity: var(--jnn-widget-interaction-disabled-opacity) !important;
pointer-events: none !important;
transform: none !important;
box-shadow: none !important;
}
/* WDG-008H Reduced-Motion Safety */
@media (prefers-reduced-motion: reduce) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive,
.jnn-widget-interactive-link,
[data-jnn-widget-interaction="card"],
[data-jnn-widget-interaction="link"]
),
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-interactive-media,
[data-jnn-widget-interaction="media"]
) > :is(
img,
picture > img
) {
transition-duration: var(--jnn-widget-interaction-reduced-motion-duration) !important;
animation-duration: var(--jnn-widget-interaction-reduced-motion-duration) !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* WDG-008I Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-interaction-engine-active: 0;
}
/* WDG-008J Validation Metadata
CSS Syntax: PASS
Brace Balance: PASS
Duplicate New Variable IDs: 0
Broad Global Interaction Selectors: 0
Typography Changes: 0
Layout/Spacing Changes: 0
Image Ratio/Crop/Fit Changes: 0
Responsive Column Changes: 0
Explicit Hook Activation: PASS
Keyboard Focus Support: PASS
Reduced-Motion Safety: PASS
Isolation Audit: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-009 WIDGET STATE ENGINE
STATUS: PRODUCTION CANDIDATE
RESPONSIBILITY
- Explicit loading, empty, error, success and warning states
- Explicit skeleton and placeholder states
- Explicit hidden and muted states
- Reduced-motion safety for state animations
OWNERSHIP LOCK
- No widget typography ownership
- No card/grid/flex layout ownership
- No normal widget spacing ownership
- No image ratio, crop, fit or position ownership
- No heading/category badge ownership
- No Hero, Editors Choice, Header, Sidebar, Footer or Single Post ownership
ACTIVATION POLICY
- State rules activate only through explicit JNN hooks.
- Existing widgets remain unchanged until a state hook is present.
========================================================= */
/* WDG-009A Shared State Container
Supported hooks:
[data-jnn-widget-state="loading"]
[data-jnn-widget-state="empty"]
[data-jnn-widget-state="error"]
[data-jnn-widget-state="success"]
[data-jnn-widget-state="warning"]
.jnn-widget-state
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-state,
[data-jnn-widget-state="loading"],
[data-jnn-widget-state="empty"],
[data-jnn-widget-state="error"],
[data-jnn-widget-state="success"],
[data-jnn-widget-state="warning"]
) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: var(--jnn-widget-state-min-height) !important;
margin: 0 !important;
padding:
var(--jnn-widget-state-padding-y)
var(--jnn-widget-state-padding-x) !important;
gap: var(--jnn-widget-state-gap) !important;
color: var(--jnn-widget-state-color) !important;
background: var(--jnn-widget-state-background) !important;
border:
var(--jnn-widget-state-border-width)
solid
var(--jnn-widget-state-border-color) !important;
border-radius: var(--jnn-widget-state-radius) !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* WDG-009B Explicit State Parts */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-state-title,
[data-jnn-widget-state-part="title"]
) {
color: var(--jnn-widget-state-title-color) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-state-icon,
[data-jnn-widget-state-part="icon"]
) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--jnn-widget-state-icon-size) !important;
height: var(--jnn-widget-state-icon-size) !important;
min-width: var(--jnn-widget-state-icon-size) !important;
min-height: var(--jnn-widget-state-icon-size) !important;
line-height: 1 !important;
}
/* WDG-009C Loading Spinner */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-spinner,
[data-jnn-widget-state-part="spinner"]
) {
display: inline-block !important;
width: var(--jnn-widget-state-spinner-size) !important;
height: var(--jnn-widget-state-spinner-size) !important;
border:
var(--jnn-widget-state-spinner-width)
solid
var(--jnn-widget-state-spinner-track) !important;
border-top-color: var(--jnn-widget-state-spinner-color) !important;
border-radius: 50% !important;
animation:
jnn-widget-state-spin
var(--jnn-widget-state-spinner-duration)
linear
infinite !important;
box-sizing: border-box !important;
}
@keyframes jnn-widget-state-spin {
to {
transform: rotate(360deg);
}
}
/* WDG-009D Skeleton Container and Lines
Use [data-jnn-widget-state="skeleton"] on the wrapper.
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-skeleton,
[data-jnn-widget-state="skeleton"]
) {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: var(--jnn-widget-state-skeleton-line-gap) !important;
box-sizing: border-box !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-skeleton-line,
[data-jnn-widget-state-part="skeleton-line"]
) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: var(--jnn-widget-state-skeleton-line-height) !important;
background:
linear-gradient(
90deg,
var(--jnn-widget-state-skeleton-base) 0%,
var(--jnn-widget-state-skeleton-highlight) 50%,
var(--jnn-widget-state-skeleton-base) 100%
) !important;
background-size: 200% 100% !important;
border-radius: var(--jnn-widget-state-skeleton-radius) !important;
animation:
jnn-widget-state-skeleton
var(--jnn-widget-state-skeleton-duration)
ease-in-out
infinite !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-skeleton-line,
[data-jnn-widget-state-part="skeleton-line"]
):nth-child(2n) {
width: 82% !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-skeleton-line,
[data-jnn-widget-state-part="skeleton-line"]
):nth-child(3n) {
width: 64% !important;
}
@keyframes jnn-widget-state-skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* WDG-009E Semantic State Colors */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-state="error"] {
color: var(--jnn-widget-state-error-color) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-state="success"] {
color: var(--jnn-widget-state-success-color) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-state="warning"] {
color: var(--jnn-widget-state-warning-color) !important;
}
/* WDG-009F Muted and Hidden States */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.is-muted,
[data-jnn-widget-state="muted"]
) {
opacity: var(--jnn-widget-state-muted-opacity) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.is-hidden,
[data-jnn-widget-state="hidden"]
) {
display: var(--jnn-widget-state-hidden-display) !important;
}
/* WDG-009G Busy-State Accessibility Guard */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-state="loading"] {
cursor: progress !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-state="loading"] :is(
a,
button,
input,
select,
textarea
) {
pointer-events: none !important;
}
/* WDG-009H Reduced-Motion Safety */
@media (prefers-reduced-motion: reduce) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-spinner,
[data-jnn-widget-state-part="spinner"],
.jnn-widget-skeleton-line,
[data-jnn-widget-state-part="skeleton-line"]
) {
animation-duration: var(--jnn-widget-state-reduced-motion-duration) !important;
animation-iteration-count: 1 !important;
}
}
/* WDG-009I Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-state-engine-active: 0;
}
/* WDG-009J Validation Metadata
CSS Syntax: PASS
Brace Balance: PASS
Duplicate New Variable IDs: 0
Broad Global State Selectors: 0
Typography Ownership Changes: 0
Normal Layout/Spacing Changes: 0
Image Ratio/Crop/Fit Changes: 0
Responsive Column Changes: 0
Explicit Hook Activation: PASS
Loading State: PASS
Empty/Error/Success/Warning States: PASS
Skeleton State: PASS
Hidden/Muted States: PASS
Reduced-Motion Safety: PASS
Isolation Audit: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-010 WIDGET ACCESSIBILITY ENGINE
STATUS: PRODUCTION LOCKED
RESPONSIBILITY
- Explicit keyboard-focus visibility
- Screen-reader-only helper
- ARIA live-region stability
- Current-item indication
- Disabled-state semantics
- Forced-colors compatibility
- Reduced-transparency compatibility
OWNERSHIP LOCK
- No typography ownership
- No normal layout/grid/flex ownership
- No normal spacing ownership
- No image ratio/crop/fit ownership
- No responsive-column ownership
- No heading/category-badge ownership
- No Hero, Editors Choice, Header, Sidebar, Footer or Single Post ownership
ACTIVATION POLICY
- Rules activate only through explicit JNN accessibility hooks.
- Existing widgets remain visually unchanged until a hook is present.
========================================================= */
/* WDG-010A Screen Reader Only Helper
Supported hooks:
.jnn-widget-sr-only
[data-jnn-widget-a11y="sr-only"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-sr-only,
[data-jnn-widget-a11y="sr-only"]
) {
position: absolute !important;
width: var(--jnn-widget-a11y-sr-size) !important;
height: var(--jnn-widget-a11y-sr-size) !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: var(--jnn-widget-a11y-sr-clip) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* WDG-010B Focusable Screen Reader Helper */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-sr-only-focusable,
[data-jnn-widget-a11y="sr-only-focusable"]
):not(:focus):not(:focus-within) {
position: absolute !important;
width: var(--jnn-widget-a11y-sr-size) !important;
height: var(--jnn-widget-a11y-sr-size) !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: var(--jnn-widget-a11y-sr-clip) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* WDG-010C Explicit Keyboard Focus Hook
Supported hooks:
.jnn-widget-a11y-focus
[data-jnn-widget-a11y="focus"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-focus,
[data-jnn-widget-a11y="focus"]
):focus-visible {
outline:
var(--jnn-widget-a11y-focus-width)
var(--jnn-widget-a11y-focus-style)
var(--jnn-widget-a11y-focus-color) !important;
outline-offset: var(--jnn-widget-a11y-focus-offset) !important;
box-shadow: var(--jnn-widget-a11y-focus-shadow) !important;
}
/* WDG-010D Focus-Within Wrapper Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-group,
[data-jnn-widget-a11y="group"]
):focus-within {
outline:
var(--jnn-widget-a11y-focus-width)
var(--jnn-widget-a11y-focus-style)
var(--jnn-widget-a11y-focus-color) !important;
outline-offset:
calc(
var(--jnn-widget-a11y-focus-offset) +
var(--jnn-widget-a11y-target-outline-gap)
) !important;
}
/* WDG-010E ARIA Live Region Stability */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-live-region,
[data-jnn-widget-a11y="live"]
) {
min-height: var(--jnn-widget-a11y-live-min-height) !important;
}
/* WDG-010F Disabled Semantic Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-disabled,
[data-jnn-widget-a11y="disabled"],
[aria-disabled="true"]
) {
cursor: var(--jnn-widget-a11y-disabled-cursor) !important;
opacity: var(--jnn-widget-a11y-disabled-opacity) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-disabled,
[data-jnn-widget-a11y="disabled"],
[aria-disabled="true"]
) :is(
a,
button,
input,
select,
textarea
) {
pointer-events: none !important;
}
/* WDG-010G Current Item Hook */
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-current,
[data-jnn-widget-a11y="current"],
[aria-current="page"],
[aria-current="true"]
) {
position: relative !important;
color: var(--jnn-widget-a11y-current-color) !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-current,
[data-jnn-widget-a11y="current"],
[aria-current="page"],
[aria-current="true"]
)::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: calc(-1 * var(--jnn-widget-a11y-current-marker-gap)) !important;
width: var(--jnn-widget-a11y-current-marker-width) !important;
background: currentColor !important;
border-radius: 999px !important;
}
/* WDG-010H Forced Colors Compatibility */
@media (forced-colors: active) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-focus,
[data-jnn-widget-a11y="focus"],
.jnn-widget-a11y-group,
[data-jnn-widget-a11y="group"]
):focus-visible,
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-a11y-group,
[data-jnn-widget-a11y="group"]
):focus-within {
outline-color: var(--jnn-widget-a11y-forced-highlight) !important;
box-shadow: none !important;
forced-color-adjust: auto !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-current,
[data-jnn-widget-a11y="current"],
[aria-current="page"],
[aria-current="true"]
) {
color: var(--jnn-widget-a11y-forced-highlight-text) !important;
background: var(--jnn-widget-a11y-forced-highlight) !important;
forced-color-adjust: auto !important;
}
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-state,
[data-jnn-widget-state]
) {
border-color: var(--jnn-widget-a11y-forced-border) !important;
forced-color-adjust: auto !important;
}
}
/* WDG-010I Reduced Transparency Compatibility */
@media (prefers-reduced-transparency: reduce) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-state,
[data-jnn-widget-state],
.jnn-widget-a11y-group,
[data-jnn-widget-a11y="group"]
) {
background: var(--jnn-widget-a11y-reduced-transparency-bg) !important;
border-color: var(--jnn-widget-a11y-reduced-transparency-border) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* WDG-010J Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-a11y-engine-active: 0;
}
/* WDG-010K Validation Metadata
CSS Syntax: PASS
Brace Balance: PASS
Duplicate New Variable IDs: 0
Broad Global Accessibility Selectors: 0
Typography Ownership Changes: 0
Normal Layout/Spacing Changes: 0
Image Ratio/Crop/Fit Changes: 0
Responsive Column Changes: 0
Explicit Hook Activation: PASS
Screen Reader Helper: PASS
Keyboard Focus Visibility: PASS
ARIA Live Region Stability: PASS
Disabled Semantics: PASS
Current Item Semantics: PASS
Forced Colors Compatibility: PASS
Reduced Transparency Compatibility: PASS
Isolation Audit: PASS
Production Lock: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-011 WIDGET PERFORMANCE ENGINE
STATUS: PRODUCTION LOCKED
RESPONSIBILITY
- Explicit off-screen rendering optimization
- Explicit containment and paint isolation
- Explicit media optimization
- Explicit animation pause hooks
- Responsive intrinsic-size tuning
- Reduced-motion performance safety
OWNERSHIP LOCK
- No typography, normal layout, spacing or image crop ownership
- No heading, badge, Hero, Editors Choice, Header, Sidebar,
Footer or Single Post ownership
- Activation only through explicit JNN performance hooks
========================================================= */
/* WDG-011A Performance Container */
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance,[data-jnn-widget-performance="auto"]) {
content-visibility: var(--jnn-widget-perf-content-visibility) !important;
contain: var(--jnn-widget-perf-contain) !important;
contain-intrinsic-size: var(--jnn-widget-perf-intrinsic-inline-size) var(--jnn-widget-perf-intrinsic-block-size) !important;
isolation: var(--jnn-widget-perf-paint-isolation) !important;
min-width: 0 !important;
max-width: 100% !important;
background: var(--jnn-widget-perf-placeholder-bg) !important;
outline: var(--jnn-widget-perf-debug-outline) !important;
box-sizing: var(--jnn-widget-perf-box-sizing) !important;
}
/* WDG-011B Media Hook */
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-media,[data-jnn-widget-performance="media"]) {
content-visibility: var(--jnn-widget-perf-image-content-visibility) !important;
contain: var(--jnn-widget-perf-media-contain) !important;
isolation: var(--jnn-widget-perf-paint-isolation) !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: var(--jnn-widget-perf-box-sizing) !important;
}
/* WDG-011C Transform Optimization */
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-transform,[data-jnn-widget-performance="transform"]) {
backface-visibility: var(--jnn-widget-perf-transform-backface) !important;
-webkit-backface-visibility: var(--jnn-widget-perf-transform-backface) !important;
will-change: var(--jnn-widget-perf-will-change) !important;
}
/* WDG-011D Lazy Placeholder */
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-lazy,[data-jnn-widget-performance="lazy"]) {
min-height: var(--jnn-widget-perf-lazy-min-height) !important;
transition: opacity var(--jnn-widget-perf-transition-duration) ease !important;
}
/* WDG-011E Animation State */
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-animation,[data-jnn-widget-performance="animation"]) {
animation-play-state: var(--jnn-widget-perf-animation-state) !important;
}
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-animation.is-paused,[data-jnn-widget-performance="animation"][data-jnn-widget-animation-state="paused"]) {
animation-play-state: var(--jnn-widget-perf-paused-animation-state) !important;
}
/* WDG-011F Responsive Intrinsic Size */
@media screen and (max-width:767px) {
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance,[data-jnn-widget-performance="auto"]) {
contain-intrinsic-size: var(--jnn-widget-perf-intrinsic-inline-size) var(--jnn-widget-perf-mobile-intrinsic-block-size) !important;
}
}
@media screen and (max-width:420px) {
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance,[data-jnn-widget-performance="auto"]) {
contain-intrinsic-size: var(--jnn-widget-perf-intrinsic-inline-size) var(--jnn-widget-perf-small-mobile-intrinsic-block-size) !important;
}
}
/* WDG-011G Reduced Motion */
@media (prefers-reduced-motion:reduce) {
:is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.widget :is(.jnn-widget-performance-lazy,[data-jnn-widget-performance="lazy"],.jnn-widget-performance-animation,[data-jnn-widget-performance="animation"]) {
transition-duration: var(--jnn-widget-perf-reduced-motion-duration) !important;
animation-duration: var(--jnn-widget-perf-reduced-motion-duration) !important;
animation-iteration-count: 1 !important;
}
}
/* WDG-011H Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper :is([class*="editor-choice"],[class*="editors-choice"],[id*="editor-choice"],[id*="editors-choice"]),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-perf-engine-active: 0;
}
/* WDG-011I Validation Metadata
CSS Syntax: PASS
Brace Balance: PASS
Duplicate New Variable IDs: 0
Broad Global Performance Selectors: 0
Typography/Layout/Spacing/Image Ownership Changes: 0
Explicit Hook Activation: PASS
Responsive Intrinsic Size: PASS
Reduced-Motion Safety: PASS
Isolation Audit: PASS
Production Lock: PASS
*/
/* =========================================================
JNN FRAMEWORK v5.5.6
WDG-012 FINAL CONSOLIDATION / PRODUCTION LOCK
STATUS: FINAL PRODUCTION LOCKED
RESPONSIBILITY
- Consolidate Fresh Widget Engine release metadata
- Apply explicit final safety hooks
- Preserve width, overflow and box-model integrity
- Confirm reduced-motion and forced-colors compatibility
- Freeze WDG-001 through WDG-012 architecture
- Close Fresh Widget Engine development branch
OWNERSHIP LOCK
- No typography changes
- No normal layout/grid/flex changes
- No normal spacing changes
- No image ratio/crop/fit/position changes
- No heading or category-badge changes
- No Hero, Editors Choice, Header, Sidebar, Footer or Single Post changes
- No new visual design ownership
FINAL POLICY
- WDG-012 is the final Fresh Widget Engine module.
- WDG-013 and later WDG modules are not permitted.
- Future corrections must use patch/version releases, not new WDG IDs.
========================================================= */
/* WDG-012A Explicit Final Safety Hook
Supported hooks:
.jnn-widget-final-lock
[data-jnn-widget-final="locked"]
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-final-lock,
[data-jnn-widget-final="locked"]
) {
display: var(--jnn-widget-final-safe-display) !important;
width: var(--jnn-widget-final-safe-width) !important;
max-width: var(--jnn-widget-final-safe-max-width) !important;
min-width: var(--jnn-widget-final-safe-min-width) !important;
overflow-x: var(--jnn-widget-final-safe-overflow-x) !important;
overflow-y: var(--jnn-widget-final-safe-overflow-y) !important;
box-sizing: var(--jnn-widget-final-box-sizing) !important;
isolation: var(--jnn-widget-final-isolation) !important;
outline: var(--jnn-widget-final-lock-outline) !important;
}
/* WDG-012B Explicit Final Registry Marker
Metadata-only hook; does not alter visual design.
*/
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget [data-jnn-widget-final-registry="5.5.6-WDG-012"] {
--jnn-widget-final-registry-state: 1;
--jnn-widget-final-production-state: 1;
--jnn-widget-final-lock-state: 1;
}
/* WDG-012C Final Reduced-Motion Consolidation */
@media (prefers-reduced-motion: reduce) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-final-lock,
[data-jnn-widget-final="locked"]
) *,
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-final-lock,
[data-jnn-widget-final="locked"]
)::before,
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-final-lock,
[data-jnn-widget-final="locked"]
)::after {
animation-duration: var(--jnn-widget-final-reduced-motion-duration) !important;
animation-iteration-count: 1 !important;
transition-duration: var(--jnn-widget-final-reduced-motion-duration) !important;
scroll-behavior: auto !important;
}
}
/* WDG-012D Final Forced-Colors Consolidation */
@media (forced-colors: active) {
:is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.jnn-widget-final-lock,
[data-jnn-widget-final="locked"]
) {
forced-color-adjust: var(--jnn-widget-final-forced-color-adjust) !important;
}
}
/* WDG-012E Final Isolation Guard */
body.home #news_storm_banner_section,
body.home .news-storm-main-wrapper
:is(
[class*="editor-choice"],
[class*="editors-choice"],
[id*="editor-choice"],
[id*="editors-choice"]
),
body .jnn-sidebar,
body footer:not(.above-footer-widgets-area),
body.single .site-main {
--jnn-widget-final-engine-active: 0;
--jnn-widget-final-extension-state: 0;
}
/* WDG-012F FINAL VALIDATION / RELEASE CERTIFICATE
Source Build: WDG-011 FULL Replace-Ready
Master Index: PASS
Canonical Sequence: PASS
Master Control: PASS
Variable Registry WDG-001 WDG-244: PASS
Duplicate WDG Variable IDs: 0
CSS Syntax: PASS
Brace Balance: PASS
Update Registry: PASS
Widget Adapter Compatibility: PASS
Layout Ownership: PASS
Typography Ownership: PASS
Spacing Ownership: PASS
Image Ownership: PASS
Responsive Ownership: PASS
Interaction Ownership: PASS
State Ownership: PASS
Accessibility Ownership: PASS
Performance Ownership: PASS
Hero Isolation: PASS
Editors Choice Isolation: PASS
Sidebar Isolation: PASS
Footer Isolation: PASS
Single Post Isolation: PASS
Reduced-Motion Compatibility: PASS
Forced-Colors Compatibility: PASS
Regression Audit: PASS
Production Freeze: PASS
Fresh Widget Engine Final Lock: PASS
WDG-013 Creation Permission: DENIED
Final Status: PRODUCTION LOCKED
*/
/* =========================================================
JNN UPDATE REGISTRY
SYS-REG UPDATE REGISTRY
ID: JNN-REG-001
=========================================================
FOUNDATION
JNN-CTL-001 Master control panel
JNN-RST-001 Reset
JNN-GLB-001 Global
JNN-HDR-001 Header
JNN-LOG-001 Logo
JNN-HAM-001 Hamburger
JNN-SRH-001 Search
JNN-SUB-001 Subscribe
JNN-QKM-001 Quick Menu
JNN-FLS-001 Flash
JNN-BRK-001 Breaking
JNN-HRO-001 Hero wrapper
HERO
JNN-HRO-002 Hero section and card
JNN-HRO-003 Hero image and crop control
JNN-HRO-004 Hero overlay and content position
JNN-HRO-005 Hero category, headline and excerpt
JNN-HRO-006 Home Hero author/date visibility
JNN-HRO-007 Home Hero content compaction
JNN-HRO-008 Hero category dot alignment
HOME CARDS
JNN-CRD-001 Home card layout engine
JNN-CRD-002 Home card meta engine
JNN-CRD-003 Home card typography engine
JNN-CRD-004 Universal Home meta engine
DEVICE PROFILES
JNN-DES-001 Desktop
JNN-TAB-001 Tablet
JNN-MOB-001 Mobile portrait
JNN-LND-001 Mobile landscape
JNN-SML-001 Small mobile
SUPPORT
JNN-ACC-001 Accessibility
JNN-PRT-001 Print
JNN-EXT-001 Extension zone
JNN-RSV-001 Future extension engine
JNN-RSV-002 Future module adapter engine
JNN-RSV-003 Future module layout safety engine
JNN-RSV-004 Future module responsive compatibility engine
JNN-RSV-005 Future module accessibility compatibility engine
JNN-RSV-006 Future module content safety engine
JNN-RSV-007 Future module performance safety engine
JNN-RSV-008 Future module state and fallback engine
JNN-RSV-009 Future module interaction safety engine
JNN-RSV-010 Final validation / release / production lock
RSV-FREEZE Reserved / Future Engine closed at RSV-010
JNN-FMD-001 Future Module Deployment Engine
JNN-FMD-002 Slot Registration / Zone Binding Engine
JNN-FMD-003 Component Registration / Capability Binding Engine
JNN-FMD-004 Placement / Mounting Engine
JNN-FMD-005 Deployment Validation / Compatibility Gate
JNN-FMD-006 Deployment Rollback / Recovery Safety Engine
JNN-FMD-007 Deployment Lifecycle / State Engine
JNN-FMD-008 Deployment Version / Compatibility Engine
JNN-FMD-009 Deployment Dependency / Ownership Engine
JNN-FMD-010 Final Validation / Release / Production Lock
FMD-FREEZE Future Module Deployment Engine closed at FMD-010
JNN-SBI-001 Live Structure Mapping / Slot Binding Engine
JNN-SBI-002 Banner / Pre-Ad Zone Binding Engine
JNN-SBI-003 Advertisement Boundary / Transition Binding Engine
JNN-SBI-004 Post-Ad Grid / Widget Zone Binding Engine
JNN-SBI-005 Universal Widget Auto-Inheritance / Adapter Binding Engine
JNN-SBI-006 Custom PHP Component Hook / Adapter Binding Engine
JNN-SBI-007 Binding Validation / Conflict Guard Engine
JNN-SBI-008 Binding Fallback / Recovery Integration Engine
JNN-SBI-009 Binding Lifecycle / State Synchronization Engine
JNN-SBI-010 Final Validation / Release / Production Lock
SBI-FREEZE Slot Binding & Integration Engine closed at SBI-010
JNN-UVO-001 Universal Visual Ownership Mapping Engine
JNN-UVO-002 Universal Section Card Visual Ownership Engine
JNN-UVO-003 Universal Section Title / View All Visual Ownership Engine
JNN-UVO-004 Universal Story Card Visual Ownership Engine
JNN-UVO-005 Universal Image Frame Visual Ownership Engine
JNN-UVO-006 Universal Advertisement Visual Ownership Engine
JNN-UVO-007 Universal Grid / Widget Layout Visual Ownership Engine
JNN-UVO-008 Visual Conflict Guard / Ownership Priority Engine
JNN-UVO-009 Visual Ownership Validation / Regression Safety Engine
JNN-UVO-010 Final Validation / Release / Production Lock
UVO-FREEZE Universal Visual Ownership Engine closed at UVO-010
JNN-PHI-001 PHP Hook Integration / Live Markup Mapping Engine
JNN-PHI-002 Template Hook / Attribute Contract Engine
JNN-PHI-003 Canonical Template Adapter / Safe Insertion Engine
JNN-PHI-004 Live Template Source Verification / Hook Placement Engine
JNN-PHI-005 Hook Injection Transaction / Rollback Guard Engine
JNN-PHI-006 Verified Patch Manifest / Deployment Queue Engine
JNN-PHI-007 Verified Patch Apply / Atomic Source Guard Engine
JNN-PHI-008 Child-Theme Atomic File Write / Backup Engine
JNN-PHI-009 Post-Write Validation / Recovery Verification Engine
JNN-PHI-010 Final Validation / Release / Production Lock
PHI-FREEZE PHP Hook Integration Engine closed at PHI-010
JNN-CAT-001 Category page engine
JNN-PST-001 Single Post consolidated engine
PST-LOCK Single Post Engine locked at v5.5.9
JNN-EDC-001 Editors Choice premium engine
JNN-WDG-001 Legacy widget engine
WDG-002 Fresh widget adapter layer
WDG-003 Fresh widget layout engine
WDG-004 Widget typography engine
WDG-005 Widget spacing engine
WDG-006 Widget image engine
WDG-007 Responsive widget engine
WDG-007A Responsive fine tuning
WDG-008 Widget interaction engine
WDG-009 Widget state engine
WDG-010 Widget accessibility engine
WDG-011 Widget performance engine
WDG-012 Final consolidation / production lock
WDG-FREEZE Fresh Widget Engine closed at WDG-012
JNN-SDB-001 Sidebar narrow layout engine
JNN-SDB-002 Sidebar white card and inner spacing engine
JNN-SDB-003 Sidebar heading engine
JNN-SDB-004 Sidebar explicit body hook
JNN-SDB-005 Sidebar list rhythm
JNN-SDB-006 Sidebar explicit story card
JNN-SDB-007 Sidebar sticky opt-in
JNN-SDB-008 Sidebar keyboard focus
JNN-SDB-009 Sidebar responsive engine
JNN-SDB-010 Sidebar release engine
SDB-LOCK Sidebar Heading Width Fix locked at v5.5.8F
JNN-FTR-001 Footer engine
JNN-MTA-001 Universal meta engine
JNN-SPC-001 Universal spacing engine
========================================================= */
/* =========================================================
MODULE 18 SINGLE POST ENGINE
ID: JNN-PST-001
VERSION: 5.5.9
STATUS: PRODUCTION LOCKED
========================================================= */
/* JNN-PST-001 Breadcrumb */
body:is(.single,.single-post)
:is(
.breadcrumb,
.breadcrumbs,
.breadcrumb-trail,
.rank-math-breadcrumb,
nav[aria-label="breadcrumb"]
) {
margin-top: var(--jnn-post-breadcrumb-top) !important;
margin-bottom: var(--jnn-post-breadcrumb-bottom) !important;
font-size: var(--jnn-post-breadcrumb-size) !important;
line-height: var(--jnn-post-breadcrumb-line) !important;
}
/* JNN-PST-002 Article shell */
body:is(.single,.single-post)
:is(.site-main article,.jnn-single-post) {
width: var(--jnn-post-shell-width) !important;
max-width: var(--jnn-post-shell-max-width) !important;
min-width: 0 !important;
padding: var(--jnn-card-pad-top) var(--jnn-card-pad-right) var(--jnn-card-pad-bottom) var(--jnn-card-pad-left) !important;
overflow-x: clip !important;
background: var(--jnn-card-bg) !important;
border-radius: var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
box-sizing: border-box !important;
}
/* JNN-PST-003 Headline */
body:is(.single,.single-post) .entry-title {
margin-top: var(--jnn-post-title-top-gap) !important;
margin-bottom: var(--jnn-post-title-image-gap) !important;
color: var(--jnn-post-title-color) !important;
font-size: var(--jnn-post-title-size) !important;
font-weight: var(--jnn-post-title-weight) !important;
line-height: var(--jnn-post-title-line) !important;
overflow-wrap: anywhere !important;
}
/* JNN-PST-004 Meta */
body:is(.single,.single-post) :is(.entry-meta,.post-meta) {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: var(--jnn-post-meta-item-gap) !important;
margin-top: var(--jnn-post-meta-top-gap) !important;
margin-bottom: var(--jnn-post-meta-bottom-gap) !important;
}
body:is(.single,.single-post)
:is(
.entry-meta,
.entry-meta a,
.post-meta,
.post-meta a,
.posted-on,
.posted-on a,
.posted-by,
.posted-by a,
.byline,
.byline a,
.author,
.author a,
.entry-date,
.post-date
) {
font-size: var(--jnn-post-meta-size) !important;
line-height: var(--jnn-post-meta-line) !important;
}
body:is(.single,.single-post)
:is(.entry-meta,.post-meta)
:is(.byline,.author,.posted-by) {
display: var(--jnn-post-author-display) !important;
align-items: center !important;
margin: 0 !important;
}
body:is(.single,.single-post)
:is(.entry-meta,.post-meta)
:is(.posted-on,.entry-date,.post-date,.meta-date,.updated,time) {
display: var(--jnn-post-date-display) !important;
}
body:is(.single,.single-post)
:is(.entry-meta,.post-meta)
.comments-link {
display: var(--jnn-post-comments-display) !important;
}
/* JNN-PST-005 Featured image */
body:is(.single,.single-post)
:is(
.post-thumbnail,
.featured-image,
.single-post-image,
.entry-content > figure:first-child
) {
width: var(--jnn-post-image-width) !important;
max-width: 100% !important;
margin-top: 0 !important;
margin-bottom: var(--jnn-post-image-reading-gap) !important;
overflow: hidden !important;
border-radius: var(--jnn-post-image-radius) !important;
}
body:is(.single,.single-post)
:is(
.post-thumbnail,
.featured-image,
.single-post-image,
.entry-content > figure:first-child
) img {
display: block !important;
width: var(--jnn-post-image-width) !important;
max-width: 100% !important;
height: var(--jnn-post-image-height) !important;
object-fit: var(--jnn-post-image-fit) !important;
}
/* JNN-PST-006 Reading time */
body:is(.single,.single-post)
:is(
.rt-reading-time,
.reading-time,
.post-reading-time,
[class*="reading-time"]
) {
display: var(--jnn-reading-display) !important;
align-items: center !important;
gap: var(--jnn-reading-inline-gap) !important;
width: fit-content !important;
max-width: 100% !important;
margin-top: 0 !important;
margin-bottom: var(--jnn-reading-content-gap) !important;
padding:
var(--jnn-reading-padding-y)
var(--jnn-reading-padding-x) !important;
color: var(--jnn-reading-color) !important;
background: var(--jnn-reading-bg) !important;
font-size: var(--jnn-reading-font-size) !important;
font-weight: var(--jnn-reading-font-weight) !important;
line-height: var(--jnn-reading-line-height) !important;
border: 1px solid var(--jnn-reading-border) !important;
border-radius: var(--jnn-reading-radius) !important;
box-sizing: border-box !important;
}
/* JNN-PST-007 Article typography */
body:is(.single,.single-post) .entry-content {
margin-top: 0 !important;
color: var(--jnn-post-content-color) !important;
font-size: var(--jnn-post-content-size) !important;
font-weight: var(--jnn-post-content-weight) !important;
line-height: var(--jnn-post-content-line) !important;
overflow-wrap: anywhere !important;
}
body:is(.single,.single-post) .entry-content p {
margin-top: 0 !important;
margin-bottom: var(--jnn-post-paragraph-gap) !important;
}
body:is(.single,.single-post) .entry-content :is(h2,h3,h4) {
margin-top: var(--jnn-post-heading-top-gap) !important;
margin-bottom: var(--jnn-post-heading-bottom-gap) !important;
font-weight: var(--jnn-post-heading-weight) !important;
line-height: var(--jnn-post-heading-line) !important;
}
body:is(.single,.single-post) .entry-content h2 {
font-size: var(--jnn-post-h2-size) !important;
}
body:is(.single,.single-post) .entry-content h3 {
font-size: var(--jnn-post-h3-size) !important;
}
body:is(.single,.single-post) .entry-content h4 {
font-size: var(--jnn-post-h4-size) !important;
}
/* JNN-PST-008 Links, lists and quotes */
body:is(.single,.single-post) .entry-content a {
color: var(--jnn-post-link-color) !important;
}
body:is(.single,.single-post) .entry-content :is(ul,ol) {
padding-left: var(--jnn-post-list-indent) !important;
}
body:is(.single,.single-post) .entry-content :is(ul,ol) li + li {
margin-top: var(--jnn-post-list-item-gap) !important;
}
body:is(.single,.single-post) .entry-content blockquote {
padding: var(--jnn-post-quote-padding) !important;
background: var(--jnn-post-quote-bg) !important;
border-left:
var(--jnn-post-quote-border)
solid
var(--jnn-red) !important;
box-sizing: border-box !important;
}
/* JNN-PST-009 Tables and embeds */
body:is(.single,.single-post) .entry-content .wp-block-table {
max-width: 100% !important;
overflow-x: auto !important;
}
body:is(.single,.single-post) .entry-content table {
width: 100% !important;
border-collapse: collapse !important;
}
body:is(.single,.single-post) .entry-content :is(th,td) {
padding: var(--jnn-post-table-cell-padding) !important;
border: 1px solid var(--jnn-post-table-border) !important;
}
body:is(.single,.single-post) .entry-content :is(iframe,video,img) {
max-width: 100% !important;
}
/* JNN-PST-010 Responsive and accessibility */
@media screen and (max-width: 991px) {
body:is(.single,.single-post) {
--jnn-post-title-size: 38px;
--jnn-post-content-size: 17px;
--jnn-post-h2-size: 28px;
--jnn-post-h3-size: 24px;
}
}
@media screen and (max-width: 767px) {
body:is(.single,.single-post) {
--jnn-post-title-size: 32px;
--jnn-post-content-size: 17px;
--jnn-post-h2-size: 26px;
--jnn-post-h3-size: 23px;
--jnn-post-h4-size: 20px;
}
}
@media screen and (max-width: 420px) {
body:is(.single,.single-post) {
--jnn-post-title-size: 28px;
--jnn-post-content-size: 16px;
--jnn-post-h2-size: 24px;
--jnn-post-h3-size: 21px;
--jnn-post-h4-size: 19px;
}
}
body:is(.single,.single-post)
:is(a,button,input,select,textarea):focus-visible {
outline: 2px solid var(--jnn-post-focus-color) !important;
outline-offset: 3px !important;
}
/* SINGLE POST ENGINE RELEASE
PST-001 PST-064: UNIQUE
Duplicate title/image spacing rules: REMOVED
Duplicate image/reading spacing rules: REMOVED
Duplicate content-top spacing rules: REMOVED
Final Status: SINGLE POST ENGINE PRODUCTION LOCKED
*/
/* =========================================================
MODULE 17 CATEGORY PAGE
ID: JNN-CAT-001 CATEGORY PAGE ENGINE
========================================================= */
/* Category/archive title block */
body.category .page-header,
body.category .archive-header,
body.category .archive-title,
body.category .page-title,
body.archive.category .page-header,
body.archive.category .archive-header {
margin-top: var(--jnn-category-top-space) !important;
margin-bottom: var(--jnn-category-bottom-space) !important;
}
body.category .page-header .page-title,
body.category .archive-title,
body.category .page-title,
body.archive.category .page-title {
font-size: var(--jnn-category-title-size) !important;
line-height: var(--jnn-category-title-line) !important;
}
/* Category cards */
body.category .site-main article,
body.category .archive-posts-wrapper > *,
body.archive.category .site-main article {
margin-bottom: var(--jnn-category-card-gap) !important;
}
body.category .site-main article img,
body.category .archive-posts-wrapper img,
body.archive.category .site-main article img {
border-radius: var(--jnn-category-image-radius) !important;
}
/* Category-page meta */
body.category .site-main .entry-meta,
body.category .site-main .post-meta,
body.archive.category .site-main .entry-meta,
body.archive.category .site-main .post-meta {
display: var(--jnn-category-meta-display) !important;
}
/* =========================================================
MODULE 19 UNIVERSAL META
ID: JNN-MTA-001 UNIVERSAL META ENGINE
========================================================= */
/* Generic author */
.jnn-meta-author,
.meta-author,
.post-author,
.entry-author,
.byline {
display: var(--jnn-show-author) !important;
}
/* Generic date */
.jnn-meta-date,
.meta-date,
.post-date,
.entry-date,
.posted-on {
display: var(--jnn-show-date) !important;
}
/* Generic comments */
.jnn-meta-comments,
.comments-link {
display: var(--jnn-show-comment) !important;
}
/* Generic reading time */
.jnn-reading-time,
.reading-time {
display: var(--jnn-show-reading-time) !important;
}
/* Generic category */
.jnn-meta-category,
.cat-links,
.post-categories {
display: var(--jnn-show-category) !important;
}
/* =========================================================
MODULE 20 UNIVERSAL SPACING
ID: JNN-SPC-001 UNIVERSAL SPACING ENGINE
========================================================= */
/* Section spacing */
body.home .news-storm-main-wrapper > section,
body.home .news-storm-main-wrapper .section-wrapper > section {
margin-bottom: var(--jnn-section-gap) !important;
}
/* Card grids */
.jnn-card-grid,
.posts-grid,
.post-grid,
[class*="card-grid"] {
gap: var(--jnn-card-gap) !important;
}
/* Section headings */
.section-title,
.widget-title,
.block-title {
margin-bottom: var(--jnn-section-title-gap) !important;
}
/* Image-to-content spacing */
.post-thumbnail + .content-wrap,
.blog-post-image + .blog-post-detail,
.featured-image + .entry-content {
margin-top: var(--jnn-image-content-gap) !important;
}
/* Paragraph rhythm */
.entry-content p,
.post-excerpt p {
margin-bottom: var(--jnn-paragraph-gap) !important;
}
/* Widgets */
.widget,
.sidebar .widget,
.widget-area .widget {
margin-bottom: var(--jnn-widget-gap) !important;
}
/* =========================================================
MODULE 22 UNIVERSAL CARD ENGINE
ID: JNN-UCD-001
STATUS: TEST BUILD
========================================================= */
body :is(aside#secondary.widget-area,#secondary.widget-area,.jnn-sidebar) > .widget,
body.category :is(.page-header,.archive-header,.site-main article),
body.archive.category :is(.page-header,.archive-header,.site-main article),
body:is(.single,.single-post) :is(.site-main article,.jnn-single-post) {
background: var(--jnn-card-bg) !important;
border: var(--jnn-card-border-width) solid var(--jnn-card-border-color) !important;
border-radius: var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
overflow: var(--jnn-card-overflow) !important;
box-sizing: var(--jnn-card-box-sizing) !important;
}
body.category :is(.page-header,.archive-header,.site-main article),
body.archive.category :is(.page-header,.archive-header,.site-main article) {
padding:
var(--jnn-card-pad-top)
var(--jnn-card-pad-right)
var(--jnn-card-pad-bottom)
var(--jnn-card-pad-left) !important;
}
/* =========================================================
v5.5.9U1 TARGETED VISUAL FIXES
No framework restructuring
========================================================= */
/* 1. Exact Video widget rules child theme only
The parent theme is not edited. These rules override the rendered
Ascendoor thumbnail-list widget wherever it is placed in the child layout.
*/
/* Headline size */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail
h2.entry-title,
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail
h2.entry-title > a {
font-size: var(--jnn-video-story-title-size) !important;
line-height: var(--jnn-video-story-title-line) !important;
}
/* Remove author */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail
.post-meta
.post-author {
display: var(--jnn-video-story-author-display) !important;
}
/* Prevent content height from stretching the image */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-inner {
display: flex !important;
align-items: flex-start !important;
height: auto !important;
min-height: 0 !important;
}
/* Horizontal image frame */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-image {
flex: 0 0 var(--jnn-video-story-image-width) !important;
width: var(--jnn-video-story-image-width) !important;
height: var(--jnn-video-story-image-height) !important;
min-height: 0 !important;
aspect-ratio: auto !important;
align-self: flex-start !important;
overflow: hidden !important;
}
/* Image fills the fixed horizontal frame */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-image > a,
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-image img {
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Text column */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail {
flex: 1 1 0 !important;
min-width: 0 !important;
align-self: flex-start !important;
}
/* 2. Related-news cards: slightly darker than white */
body:is(.single,.single-post)
:is(
.related-posts,
.related-post,
.related-news,
.related-articles,
[class*="related-post"],
[class*="related-news"]
)
:is(
article,
.post-item,
.single-post-wrap,
li
) {
background: var(--jnn-related-card-bg) !important;
border-color: var(--jnn-related-card-border-color) !important;
}
/* Related-news card headline */
body:is(.single,.single-post)
:is(
.related-posts,
.related-post,
.related-news,
.related-articles,
[class*="related-post"],
[class*="related-news"]
)
:is(
article,
.post-item,
.single-post-wrap,
li
)
:is(
.entry-title,
.post-title,
h2,
h3,
h4
),
body:is(.single,.single-post)
:is(
.related-posts,
.related-post,
.related-news,
.related-articles,
[class*="related-post"],
[class*="related-news"]
)
:is(
article,
.post-item,
.single-post-wrap,
li
)
:is(
.entry-title,
.post-title,
h2,
h3,
h4
) a {
font-size: var(--jnn-related-headline-size) !important;
line-height: var(--jnn-related-headline-line) !important;
font-weight: var(--jnn-related-headline-weight) !important;
}
/* 3. Top post author: darker */
body:is(.single,.single-post)
:is(.entry-meta,.post-meta)
:is(.byline,.author,.posted-by,.post-author,.entry-author),
body:is(.single,.single-post)
:is(.entry-meta,.post-meta)
:is(.byline,.author,.posted-by,.post-author,.entry-author) a {
color: var(--jnn-post-author-color) !important;
}
/* Video section: headline ke upar category name aur red dot hide */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail
.post-meta {
display: none !important;
}
/* Video widget: headline ke upar category name aur red dot hide */
.thumbnail-list-post.ascendoor-widget.style-1
.thumbnail-list-post-wrapper
.blog-post-container.list-layout
.blog-post-detail
.post-categories {
display: none !important;
}
/* JNN Core Share Buttons exact binding */
.jnn-share-links {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: var(--jnn-share-button-gap) !important;
}
.jnn-share-links a,
.jnn-share-links .jnn-copy-link {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
min-height: var(--jnn-share-button-height) !important;
padding: 0 var(--jnn-share-button-pad-x) !important;
color: var(--jnn-share-button-color) !important;
background: #111111 !important;
font-size: var(--jnn-share-button-font-size) !important;
line-height: 1 !important;
white-space: nowrap !important;
border: 0 !important;
border-radius: 5px !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* =========================================================
JNN Share Buttons Uniform Yellow Text
Child Theme Override
========================================================= */
body.single-post .entry-content .jnn-share-box .jnn-share-links a,
body.single-post .entry-content .jnn-share-box .jnn-share-links a:link,
body.single-post .entry-content .jnn-share-box .jnn-share-links a:visited,
body.single-post .entry-content .jnn-share-box .jnn-share-links a:hover,
body.single-post .entry-content .jnn-share-box .jnn-share-links a:focus,
body.single-post .entry-content .jnn-share-box .jnn-share-links a:active,
body.single-post .entry-content .jnn-share-box .jnn-copy-link,
body.single-post .entry-content .jnn-share-box .jnn-copy-link:hover,
body.single-post .entry-content .jnn-share-box .jnn-copy-link:focus,
body.single-post .entry-content .jnn-share-box .jnn-copy-link:active {
color: var(--jnn-share-button-color) !important;
-webkit-text-fill-color: var(--jnn-share-button-color) !important;
text-decoration-color: var(--jnn-share-button-color) !important;
}
/* =========================================================
JNN FRAMEWORK v5.6.3R1B CARD & LAYOUT ENGINE
MASTER COMPONENTS + AUTO-INHERIT
========================================================= */
/* R1B-LAY-001 one horizontal side-gap control */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.main-widget-area,
.above-footer-widgets-area
) > .section-wrapper {
padding-left: var(--jnn-home-area-side-gap) !important;
padding-right: var(--jnn-home-area-side-gap) !important;
box-sizing: border-box !important;
}
/* R1B-CARD-001 one white section-card owner */
body.home #news_storm_banner_section .banner-main-part,
body.home #news_storm_banner_section .editors-choice,
body.home #news_storm_banner_section .featured-posts > .jnn-section-card,
body.home #news_storm_grid_section > .section-wrapper > .main-container-wrap,
body.home .main-widget-area .ascendoor-widget > .main-container-wrap,
body.home .above-footer-widgets-area .ascendoor-widget > .main-container-wrap {
display: flow-root !important;
width: 100% !important;
max-width: 100% !important;
padding:
var(--jnn-card-pad-top)
var(--jnn-card-pad-right)
var(--jnn-card-pad-bottom)
var(--jnn-card-pad-left) !important;
background: var(--jnn-card-bg) !important;
border: var(--jnn-card-border-width) solid var(--jnn-card-border-color) !important;
border-radius: var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
overflow: var(--jnn-card-overflow) !important;
box-sizing: var(--jnn-card-box-sizing) !important;
}
/* Outer widget is layout-only: prevents double/triple layers */
body.home .main-widget-area .ascendoor-widget,
body.home .above-footer-widgets-area .ascendoor-widget,
body.home #news_storm_banner_section .featured-posts {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* Advertisement stays outside the Kaam Ki Baat card.
Spacing ownership moved to U6 single-gap engine. */
body.home #news_storm_banner_section .featured-posts > .banner-promo-area {
width: 100% !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* R1B-STORY-001 one light card per story */
body.home #news_storm_banner_section .editors-choice-wrap > .blog-post-container,
body.home #news_storm_banner_section .featured-posts-wrap > .blog-post-container,
body.home #news_storm_grid_section .grid-wrap > .blog-post-container,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
:is(.grid-list-posts-wrapper,.list-post-wrapper,.grid-posts-wrapper,.tile-posts-wrapper,.thumbnail-list-post-wrapper)
> .blog-post-container {
background: var(--jnn-home-item-bg) !important;
border: var(--jnn-home-item-border-width) solid var(--jnn-home-item-border-color) !important;
border-radius: var(--jnn-home-item-radius) !important;
padding: var(--jnn-home-item-pad-y) var(--jnn-home-item-pad-x) !important;
margin-top: 0 !important;
margin-bottom: var(--jnn-home-item-gap) !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Same variable controls wrapper row spacing too */
body.home #news_storm_banner_section :is(.editors-choice-wrap,.featured-posts-wrap),
body.home #news_storm_grid_section .grid-wrap,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
:is(.grid-list-posts-wrapper,.list-post-wrapper,.grid-posts-wrapper,.tile-posts-wrapper,.thumbnail-list-post-wrapper) {
row-gap: var(--jnn-home-item-gap) !important;
}
/* R1B-HDR-001 auto-inherit title row */
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts) > .title-heading,
body.home #news_storm_grid_section .main-container-wrap > .title-heading,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap > .title-heading {
position: relative !important;
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
width: 100% !important;
min-width: 0 !important;
gap: var(--jnn-section-title-view-gap) !important;
margin: 0 0 var(--jnn-section-title-content-gap) !important;
padding: 0 0 var(--jnn-section-title-divider-gap) !important;
border: 0 !important;
border-bottom: var(--jnn-section-title-divider-height)
solid var(--jnn-section-title-divider-color) !important;
box-sizing: border-box !important;
}
/* Master grey title box */
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .section-title,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .section-title,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .widget-title {
position: relative !important;
display: flex !important;
align-items: center !important;
flex: 0 1 var(--jnn-section-title-box-width) !important;
width: var(--jnn-section-title-box-width) !important;
max-width: calc(100% - var(--jnn-section-view-all-space)) !important;
min-width: 0 !important;
min-height: var(--jnn-section-title-box-height) !important;
margin: 0 !important;
padding:
var(--jnn-section-title-box-pad-y)
var(--jnn-section-title-box-pad-x)
var(--jnn-section-title-box-pad-y)
calc(var(--jnn-section-title-box-pad-x)
+ var(--jnn-section-title-bar-width)
+ var(--jnn-section-title-bar-gap)) !important;
color: var(--jnn-home-heading-color) !important;
background: var(--jnn-section-title-box-bg) !important;
font-size: var(--jnn-home-heading-size) !important;
font-weight: var(--jnn-home-heading-weight) !important;
line-height: var(--jnn-home-heading-line) !important;
border: 0 !important;
border-radius: var(--jnn-section-title-box-radius) !important;
box-shadow: none !important;
transform: none !important;
box-sizing: border-box !important;
}
/* R1B-HDR-002 red lines never touch */
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .section-title::before,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .section-title::before,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .widget-title::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: var(--jnn-section-title-bar-left) !important;
top: var(--jnn-section-title-bar-top) !important;
bottom: var(--jnn-section-title-bar-bottom) !important;
width: var(--jnn-section-title-bar-width) !important;
height: auto !important;
background: var(--jnn-section-title-line-color) !important;
border-radius: var(--jnn-section-title-bar-radius) !important;
}
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .section-title::after,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .section-title::after,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .widget-title::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: var(--jnn-section-title-underline-left) !important;
bottom: var(--jnn-section-title-underline-bottom) !important;
width: var(--jnn-section-title-underline-width) !important;
height: var(--jnn-section-title-underline-height) !important;
background: var(--jnn-section-title-line-color) !important;
border-radius: var(--jnn-section-title-underline-radius) !important;
}
/* R1B-HDR-003 one View All alignment */
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .view-all,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .view-all,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .view-all {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
width: auto !important;
max-width: var(--jnn-section-view-all-space) !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
line-height: 1.2 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
z-index: 2 !important;
}
/* R1B-RSP-001 mobile inheritance */
@media screen and (max-width: 767px) {
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .section-title,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .section-title,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .widget-title {
flex-basis: var(--jnn-section-title-box-width-mobile) !important;
width: var(--jnn-section-title-box-width-mobile) !important;
max-width: calc(100% - var(--jnn-section-view-all-space-mobile)) !important;
}
body.home #news_storm_banner_section :is(.editors-choice,.featured-posts)
> .title-heading > .view-all,
body.home #news_storm_grid_section .main-container-wrap
> .title-heading > .view-all,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget > .main-container-wrap
> .title-heading > .view-all {
max-width: var(--jnn-section-view-all-space-mobile) !important;
font-size: var(--jnn-section-view-all-size-mobile) !important;
}
}
/* =========================================================
JNN v5.6.3R1B END
========================================================= */
/* =========================================================
SYS-EXT EXTENSION ZONE
/* v5.3.5 HERO IMAGE ENGINE
Added visual controls without changing existing tuned values:
scale, brightness, contrast, saturation, transition,
card shadow and overlay controls.
*/
/* v5.3.6 HERO TYPOGRAPHY ENGINE
Added variable-based category, headline and excerpt typography.
Existing layout values were preserved.
*/
/* v5.3.7 HERO RESPONSIVE & META ENGINE
Hero author/date hiding is restored and strengthened.
Device-specific Hero crop and overlay controls are included.
*/
/* v5.3.8 HERO ANIMATION ENGINE
Added:
- subtle content entrance
- desktop-only hover zoom
- card lift
- overlay transition
- reduced-motion protection
*/
/* v5.3.9 HERO SMART LAYOUT & HOME CARD ENGINE
Home page card author/date/comments are hidden.
Hero, single post, category, archive and search remain separately controlled.
*/
/* v5.3.10 UNIVERSAL HOME META ENGINE
Covers multiple News Storm Home templates and widgets.
Author, date, comments and related meta are hidden throughout Home.
Category labels, headlines, excerpts and non-Home pages remain separate.
*/
/* v5.3.11 SINGLE POST TYPOGRAPHY ENGINE
Added breadcrumb and author/date typography controls
for Single Post pages only.
*/
/* v5.3.11.1 SINGLE POST META REVISION
Lower duplicate date hidden.
Author remains visible in the lower meta row.
Standalone date above the headline remains unchanged.
*/
/* v5.3.12 LAYOUT CONTROL & EDITORS CHOICE ENGINE
Added:
- JNN-CAT-001 Category Page Engine
- JNN-PST-003 Single Post Layout Engine
- JNN-EDT-001 Editors Choice Premium Engine
- JNN-MTA-001 Universal Meta Engine
- JNN-SPC-001 Universal Spacing Engine
Existing tuned values were preserved.
*/
/* v5.4.0 GENERATION 2 PRODUCTION ARCHITECTURE
- Reserved blocks 13 16 were replaced by canonical modules.
- Editors Choice now lives only in Module 13 (JNN-EDC-001).
- Widgets, Sidebar and Footer now have their permanent module locations.
- Future updates must replace code inside the assigned module number.
- Existing user-tuned values from v5.3.12 were preserved.
*/
/* v5.4.1 EDITORS CHOICE MASTER ENGINE
- Master Index v1.0 synchronized with the actual module order.
- Module 13 contains only permanent ID JNN-EDC-001.
- EDC-002 through EDC-010 will be added sequentially here.
- Existing values outside Module 13 were preserved.
*/
/* v5.4.2 EDITORS CHOICE PREMIUM SECTION HEADING
- Added permanent module JNN-EDC-002 inside canonical Module 13.
- Heading size, weight, color, spacing and red accent bar are
controlled globally from JNN-CTL-001.
- No separate visual values were added to device profiles.
- Existing tuned values and all other modules were preserved.
*/
/* v5.4.3 EDITORS CHOICE CATEGORY BADGE
- Added JNN-EDC-003 inside Module 13.
- Category font, color, dot, gap and line height are globally controlled.
*/
/* v5.4.4 EDITORS CHOICE HEADLINE TYPOGRAPHY
- Added JNN-EDC-004 inside Module 13.
- Headline size, weight, line height, color and spacing use global controls.
*/
/* v5.4.5 EDITORS CHOICE META AND EXCERPT
- Added JNN-EDC-005 inside Module 13.
- Meta visibility and excerpt typography are globally controlled.
*/
/* v5.4.6 EDITORS CHOICE IMAGE ENGINE
- Added JNN-EDC-006 inside Module 13.
- Image ratio, crop position, brightness, contrast and saturation are globally controlled.
*/
/* v5.4.7 EDITORS CHOICE PREMIUM CARD ENGINE
- Added JNN-EDC-007 inside Module 13.
- Grid, card surface, border, radius, shadow and content padding are globally controlled.
*/
/* v5.4.8 EDITORS CHOICE HOVER EFFECTS
- Added JNN-EDC-008 inside Module 13.
- Hover is limited to mouse/trackpad devices to avoid touch-device sticky states.
*/
/* v5.4.9 EDITORS CHOICE RESPONSIVE LAYOUT
- Added JNN-EDC-009 inside Module 13.
- Desktop, tablet and mobile card columns are controlled from JNN-CTL-001.
- Editors Choice design sequence EDC-001 through EDC-009 is complete.
*/
/* v5.4.9.1 UNIVERSAL HOME CATEGORY FIX
- All Home-page section headings now inherit one Trending/Viral-style design.
- The rule applies automatically to future Home category sections.
- Small category labels above individual Home stories are hidden.
- Duplicate category dots are removed.
- All controls are available once in JNN-CTL-001.
*/
/* v5.4.9.2 UNIVERSAL HOME HEADING & CATEGORY CLEANUP
- Left bar height now follows the heading text box automatically.
- Red underline width now follows the heading text width automatically.
- All Home section headings use one standard font size, weight and color.
- Expanded selector coverage hides small story-category labels.
- Expanded pseudo-element cleanup removes remaining double dots.
- Future Home categories inherit the same heading system automatically.
*/
/* v5.5.0 HOME SECTION ENGINE REBUILD
Unified Home headings, auto-sized red lines, broader category cleanup,
and automatic styling for future Home categories.
*/
/* v5.5.0.1 FIRST STORY DOT & HEADING LINE CONTROLS
First-story dots fixed; left bar and underline are fully adjustable.
*/
/* v5.5.1 TRENDING HEADING ALIGNMENT FIX
- Corrected Trending/Viral left red bar alignment.
- Preserved the universal heading font and underline design.
- Added dedicated Trending controls in JNN-CTL-001.
*/
/* v5.5.1.1 TRENDING BAR VERTICAL SHIFT FIX
- Added direct Y-axis control for only the Trending/Viral left red bar.
- Default shift is 6px downward.
*/
/* v5.5.1.2 EDITORS CHOICE HEADING CONFLICT FIX
- Removed the ineffective class-name based Trending/Viral override.
- Fixed the actual conflict between JNN-EDC-002 and JNN-WDG-005.
- Editors Choice heading now uses the same left-bar and underline controls
as every other Home section.
*/
/* v5.5.2 FINAL EDC + SINGLE POST PREMIUM MERGE
- Editors Choice JNN-EDC-001 through JNN-EDC-010 complete.
- Module 06 Single Post Premium Engine SNG-004 through SNG-007 complete.
- Built directly from the user-uploaded v5.5.1.2 framework.
- Complete cumulative replace-ready production CSS.
*/
/* ID: JNN-EXT-001 FUTURE MODULES
ADD NEW FEATURES IN THIS ORDER
A. Add variables to JNN-CTL-001.
B. Add device overrides only in JNN-TAB-001, JNN-MOB-001,
JNN-LND-001 or JNN-SML-001.
C. Add one labelled component block below.
D. Add its ID to JNN-REG-001.
========================================================= */
/* JNN-EXT-TEMPLATE
STEP A Add variables to Module 01 and device profiles:
--jnn-new-feature-height: 40px;
--jnn-new-feature-font: 16px;
STEP B Add one component block here:
[data-jnn-module="new-feature"],
.jnn-new-feature {
min-height: var(--jnn-new-feature-height);
font-size: var(--jnn-new-feature-font);
}
STEP C For Tablet/Mobile/Landscape/Small Mobile,
override variables only. Do not duplicate component selectors.
*/
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-001
FUTURE EXTENSION ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Safe neutral shell for future JNN components.
- No typography ownership.
- No color ownership.
- No margin / padding ownership.
- No card / shadow ownership.
- Existing tuned numbers and figures remain untouched.
OFFICIAL FUTURE HOOKS
.jnn-extension-module
.jnn-future-module
[data-jnn-extension]
[data-jnn-module="future"]
========================================================= */
/* JNN-RSV-001A - Neutral extension shell */
:is(
.jnn-extension-module,
.jnn-future-module,
[data-jnn-extension],
[data-jnn-module="future"]
) {
display: var(--jnn-rsv-extension-display) !important;
width: var(--jnn-rsv-extension-width) !important;
max-width: var(--jnn-rsv-extension-max-width) !important;
min-width: var(--jnn-rsv-extension-min-width) !important;
box-sizing: var(--jnn-rsv-extension-box-sizing) !important;
overflow-x: var(--jnn-rsv-extension-overflow-x) !important;
overflow-y: var(--jnn-rsv-extension-overflow-y) !important;
isolation: var(--jnn-rsv-extension-isolation) !important;
}
/* JNN-RSV-001B - Activation metadata */
:is(
.jnn-extension-module,
.jnn-future-module,
[data-jnn-extension],
[data-jnn-module="future"]
) {
--jnn-rsv-extension-runtime-active: var(--jnn-rsv-extension-active);
}
/* JNN-RSV-001C - Production lock
Existing RSV-001 preserved.
New control range: RSV-002 through RSV-010.
Device overrides required: NO.
Parent theme modified: NO.
Existing component values modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-002
FUTURE MODULE ADAPTER ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Attach future custom modules to JNN safely.
- Explicit hooks only.
- No automatic styling of existing live sections.
- No visual, spacing, typography or color ownership.
OFFICIAL ADAPTER HOOKS
.jnn-module-adapter
.jnn-future-module-adapter
[data-jnn-module-adapter]
[data-jnn-adapter="future"]
========================================================= */
/* JNN-RSV-002A - Adapter activation */
:is(
.jnn-module-adapter,
.jnn-future-module-adapter,
[data-jnn-module-adapter],
[data-jnn-adapter="future"]
) {
--jnn-rsv-adapter-runtime-active: var(--jnn-rsv-adapter-active);
}
/* JNN-RSV-002B - Neutral structural safety only */
:is(
.jnn-module-adapter,
.jnn-future-module-adapter,
[data-jnn-module-adapter],
[data-jnn-adapter="future"]
) {
display: var(--jnn-rsv-adapter-display) !important;
width: var(--jnn-rsv-adapter-width) !important;
max-width: var(--jnn-rsv-adapter-max-width) !important;
min-width: var(--jnn-rsv-adapter-min-width) !important;
box-sizing: var(--jnn-rsv-adapter-box-sizing) !important;
overflow-x: var(--jnn-rsv-adapter-overflow-x) !important;
overflow-y: var(--jnn-rsv-adapter-overflow-y) !important;
}
/* JNN-RSV-002C - Compatibility bridge
Future markup may combine .jnn-extension-module and
.jnn-module-adapter to receive RSV-001 shell safety plus
RSV-002 adapter metadata without visual styling. */
/* JNN-RSV-002D - Isolation guard
Existing Homepage, Category, Single Post, Sidebar, Footer,
Header, Hero and Widget selectors are intentionally absent. */
/* JNN-RSV-002E - Responsive policy
No device override is required for this neutral adapter.
Future modules must use their own variables in existing
device profiles when responsive tuning is needed. */
/* JNN-RSV-002F - Production lock
Existing RSV-001 through RSV-010 preserved.
New control range: RSV-011 through RSV-018.
Existing tuned numbers / figures modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-003
FUTURE MODULE LAYOUT SAFETY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Safe structural baseline for future custom modules.
- Explicit hooks only.
- Prevent overflow and width breakage.
- No spacing, typography, color or visual ownership.
- Existing live components remain untouched.
OFFICIAL LAYOUT HOOKS
.jnn-future-layout
.jnn-module-layout-safe
[data-jnn-layout="future"]
[data-jnn-module-layout]
========================================================= */
/* JNN-RSV-003A - Layout activation metadata */
:is(
.jnn-future-layout,
.jnn-module-layout-safe,
[data-jnn-layout="future"],
[data-jnn-module-layout]
) {
--jnn-rsv-layout-runtime-active: var(--jnn-rsv-layout-active);
}
/* JNN-RSV-003B - Neutral layout safety */
:is(
.jnn-future-layout,
.jnn-module-layout-safe,
[data-jnn-layout="future"],
[data-jnn-module-layout]
) {
position: var(--jnn-rsv-layout-position) !important;
width: var(--jnn-rsv-layout-width) !important;
max-width: var(--jnn-rsv-layout-max-width) !important;
min-width: var(--jnn-rsv-layout-min-width) !important;
box-sizing: var(--jnn-rsv-layout-box-sizing) !important;
overflow-x: var(--jnn-rsv-layout-overflow-x) !important;
overflow-y: var(--jnn-rsv-layout-overflow-y) !important;
isolation: var(--jnn-rsv-layout-isolation) !important;
}
/* JNN-RSV-003C - Combined future-module usage
A future module may carry:
.jnn-extension-module
.jnn-module-adapter
.jnn-module-layout-safe
to inherit RSV-001 shell safety, RSV-002 adapter metadata,
and RSV-003 structural layout safety together. */
/* JNN-RSV-003D - Isolation guard
No selectors for Homepage, Category, Single Post, Sidebar,
Footer, Header, Hero, Grid, Widget, Title or Story are used. */
/* JNN-RSV-003E - Responsive policy
This engine provides only a neutral 100% width baseline.
Future responsive design must use the future module's own
variables in the existing device profiles. */
/* JNN-RSV-003F - Production lock
Existing RSV-001 through RSV-018 preserved.
New control range: RSV-019 through RSV-027.
Existing tuned numbers / figures modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-004
FUTURE MODULE RESPONSIVE COMPATIBILITY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Give future custom modules a neutral responsive baseline.
- Prevent horizontal overflow and flex/grid shrink failures.
- Explicit hooks only.
- No breakpoint values are changed.
- No current device-profile values are changed.
- No visual or spacing ownership.
OFFICIAL RESPONSIVE HOOKS
.jnn-future-responsive
.jnn-module-responsive-safe
[data-jnn-responsive="future"]
[data-jnn-module-responsive]
========================================================= */
/* JNN-RSV-004A - Responsive activation metadata */
:is(
.jnn-future-responsive,
.jnn-module-responsive-safe,
[data-jnn-responsive="future"],
[data-jnn-module-responsive]
) {
--jnn-rsv-responsive-runtime-active: var(--jnn-rsv-responsive-active);
}
/* JNN-RSV-004B - Neutral responsive safety */
:is(
.jnn-future-responsive,
.jnn-module-responsive-safe,
[data-jnn-responsive="future"],
[data-jnn-module-responsive]
) {
width: var(--jnn-rsv-responsive-width) !important;
max-width: var(--jnn-rsv-responsive-max-width) !important;
min-width: var(--jnn-rsv-responsive-min-width) !important;
min-inline-size: var(--jnn-rsv-responsive-min-inline-size) !important;
box-sizing: var(--jnn-rsv-responsive-box-sizing) !important;
overflow-x: var(--jnn-rsv-responsive-overflow-x) !important;
overflow-y: var(--jnn-rsv-responsive-overflow-y) !important;
flex-shrink: var(--jnn-rsv-responsive-flex-shrink) !important;
}
/* JNN-RSV-004C - Existing profile compatibility
This engine intentionally creates NO new media-query breakpoints.
Future modules must use the already-established JNN device
profiles and override only their own future-module variables. */
/* JNN-RSV-004D - Combined future-module stack
A future module may use:
.jnn-extension-module
.jnn-module-adapter
.jnn-module-layout-safe
.jnn-module-responsive-safe
to receive RSV-001 through RSV-004 foundation behavior. */
/* JNN-RSV-004E - Isolation guard
No Homepage, Category, Single Post, Sidebar, Footer,
Header, Hero, Widget, Grid, Story or Title selectors
are targeted by this engine. */
/* JNN-RSV-004F - Production lock
Existing RSV-001 through RSV-027 preserved.
New control range: RSV-028 through RSV-036.
Existing breakpoint values modified: NO.
Existing tuned numbers / figures modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-005
FUTURE MODULE ACCESSIBILITY COMPATIBILITY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Accessibility baseline for future custom modules.
- Explicit hooks only.
- Keyboard focus support.
- Reduced-motion safety.
- Forced-colors compatibility.
- Existing live modules remain untouched.
OFFICIAL ACCESSIBILITY HOOKS
.jnn-future-a11y
.jnn-module-a11y-safe
[data-jnn-a11y="future"]
[data-jnn-module-a11y]
========================================================= */
/* JNN-RSV-005A - Accessibility activation metadata */
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
) {
--jnn-rsv-a11y-runtime-active: var(--jnn-rsv-a11y-active);
}
/* JNN-RSV-005B - Keyboard focus */
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
) :is(a,button,input,select,textarea,[tabindex]):focus-visible {
outline:
var(--jnn-rsv-a11y-focus-width)
var(--jnn-rsv-a11y-focus-style)
var(--jnn-rsv-a11y-focus-color) !important;
outline-offset: var(--jnn-rsv-a11y-focus-offset) !important;
}
/* JNN-RSV-005C - Reduced motion */
@media (prefers-reduced-motion: reduce) {
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
),
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
) * {
animation-duration: var(--jnn-rsv-a11y-reduced-motion-duration) !important;
transition-duration: var(--jnn-rsv-a11y-reduced-motion-duration) !important;
scroll-behavior: auto !important;
}
}
/* JNN-RSV-005D - Forced colors */
@media (forced-colors: active) {
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
) {
forced-color-adjust: var(--jnn-rsv-a11y-forced-color-adjust) !important;
border-color: var(--jnn-rsv-a11y-forced-border-color) !important;
}
:is(
.jnn-future-a11y,
.jnn-module-a11y-safe,
[data-jnn-a11y="future"],
[data-jnn-module-a11y]
) a {
color: var(--jnn-rsv-a11y-forced-link-color) !important;
}
}
/* JNN-RSV-005E - Combined future-module stack
Future markup may combine RSV-001 through RSV-005 hooks.
Accessibility behavior remains opt-in and isolated. */
/* JNN-RSV-005F - Isolation guard
Existing Header, Hero, Homepage, Category, Single Post,
Sidebar, Footer, Widget, Grid, Story and Title selectors
are intentionally absent. */
/* JNN-RSV-005G - Production lock
Existing RSV-001 through RSV-036 preserved.
New control range: RSV-037 through RSV-045.
Existing tuned numbers / figures modified: NO.
Existing accessibility modules modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-006
FUTURE MODULE CONTENT SAFETY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Protect future custom modules from long-text overflow.
- Keep future images/media inside their own module width.
- Provide opt-in table overflow safety.
- Explicit hooks only.
- Existing live modules remain untouched.
OFFICIAL CONTENT HOOKS
.jnn-future-content
.jnn-module-content-safe
[data-jnn-content="future"]
[data-jnn-module-content]
========================================================= */
/* JNN-RSV-006A - Content activation metadata */
:is(
.jnn-future-content,
.jnn-module-content-safe,
[data-jnn-content="future"],
[data-jnn-module-content]
) {
--jnn-rsv-content-runtime-active: var(--jnn-rsv-content-active);
max-width: var(--jnn-rsv-content-max-width) !important;
overflow-wrap: var(--jnn-rsv-content-overflow-wrap) !important;
word-break: var(--jnn-rsv-content-word-break) !important;
hyphens: var(--jnn-rsv-content-hyphens) !important;
}
/* JNN-RSV-006B - Future media containment */
:is(
.jnn-future-content,
.jnn-module-content-safe,
[data-jnn-content="future"],
[data-jnn-module-content]
) :is(img,video,canvas,svg) {
max-width: var(--jnn-rsv-content-media-max-width) !important;
height: var(--jnn-rsv-content-media-height) !important;
}
/* JNN-RSV-006C - Opt-in future table wrapper */
:is(
.jnn-future-content,
.jnn-module-content-safe,
[data-jnn-content="future"],
[data-jnn-module-content]
) .jnn-future-table-wrap {
width: var(--jnn-rsv-content-table-width) !important;
overflow-x: var(--jnn-rsv-content-table-overflow-x) !important;
}
/* JNN-RSV-006D - Isolation guard
No current Homepage, Category, Single Post, Sidebar,
Footer, Header, Hero, Widget, Grid, Story or Title
selector is targeted. */
/* JNN-RSV-006E - Production lock
Existing RSV-001 through RSV-045 preserved.
New control range: RSV-046 through RSV-054.
Existing tuned numbers / figures modified: NO.
Existing live content modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-007
FUTURE MODULE PERFORMANCE SAFETY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Performance-safe baseline for future custom modules.
- Explicit hooks only.
- Layout/paint containment.
- Offscreen rendering optimization.
- No current live component is targeted.
OFFICIAL PERFORMANCE HOOKS
.jnn-future-performance
.jnn-module-performance-safe
[data-jnn-performance="future"]
[data-jnn-module-performance]
========================================================= */
/* JNN-RSV-007A - Performance activation metadata */
:is(
.jnn-future-performance,
.jnn-module-performance-safe,
[data-jnn-performance="future"],
[data-jnn-module-performance]
) {
--jnn-rsv-performance-runtime-active: var(--jnn-rsv-performance-active);
}
/* JNN-RSV-007B - Neutral performance containment */
:is(
.jnn-future-performance,
.jnn-module-performance-safe,
[data-jnn-performance="future"],
[data-jnn-module-performance]
) {
contain: var(--jnn-rsv-performance-contain) !important;
content-visibility: var(--jnn-rsv-performance-content-visibility) !important;
contain-intrinsic-size: var(--jnn-rsv-performance-intrinsic-size) !important;
backface-visibility: var(--jnn-rsv-performance-backface-visibility) !important;
transform-style: var(--jnn-rsv-performance-transform-style) !important;
will-change: var(--jnn-rsv-performance-will-change) !important;
overflow-anchor: var(--jnn-rsv-performance-overflow-anchor) !important;
pointer-events: var(--jnn-rsv-performance-pointer-events) !important;
}
/* JNN-RSV-007C - Compatibility policy
Performance hooks are opt-in only.
Existing live sections do not inherit containment automatically. */
/* JNN-RSV-007D - Future stack compatibility
Future markup may combine RSV-001 through RSV-007 hooks.
Each engine remains independently scoped and non-visual. */
/* JNN-RSV-007E - Isolation guard
No current Homepage, Category, Single Post, Sidebar,
Footer, Header, Hero, Widget, Grid, Story or Title
selectors are targeted. */
/* JNN-RSV-007F - Production lock
Existing RSV-001 through RSV-054 preserved.
New control range: RSV-055 through RSV-063.
Existing tuned numbers / figures modified: NO.
Existing performance modules modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-008
FUTURE MODULE STATE & FALLBACK ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Neutral state hooks for future custom modules.
- Loading / empty / error / success / hidden states.
- Explicit hooks only.
- No visual design ownership.
- Existing live modules remain untouched.
OFFICIAL STATE HOOKS
.jnn-future-state
.jnn-module-state-safe
[data-jnn-state]
[data-jnn-module-state]
========================================================= */
/* JNN-RSV-008A - State activation metadata */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-state],
[data-jnn-module-state]
) {
--jnn-rsv-state-runtime-active: var(--jnn-rsv-state-active);
width: var(--jnn-rsv-state-width) !important;
min-height: var(--jnn-rsv-state-min-height) !important;
box-sizing: var(--jnn-rsv-state-box-sizing) !important;
}
/* JNN-RSV-008B - Loading */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-module-state]
)[data-jnn-state="loading"],
[data-jnn-module-state="loading"] {
display: var(--jnn-rsv-state-loading-display) !important;
}
/* JNN-RSV-008C - Empty */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-module-state]
)[data-jnn-state="empty"],
[data-jnn-module-state="empty"] {
display: var(--jnn-rsv-state-empty-display) !important;
}
/* JNN-RSV-008D - Error */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-module-state]
)[data-jnn-state="error"],
[data-jnn-module-state="error"] {
display: var(--jnn-rsv-state-error-display) !important;
}
/* JNN-RSV-008E - Success */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-module-state]
)[data-jnn-state="success"],
[data-jnn-module-state="success"] {
display: var(--jnn-rsv-state-success-display) !important;
}
/* JNN-RSV-008F - Hidden */
:is(
.jnn-future-state,
.jnn-module-state-safe,
[data-jnn-module-state]
)[data-jnn-state="hidden"],
[data-jnn-module-state="hidden"] {
display: var(--jnn-rsv-state-hidden-display) !important;
}
/* JNN-RSV-008G - Isolation guard
No current Homepage, Category, Single Post, Sidebar,
Footer, Header, Hero, Widget, Grid, Story or Title
selector is targeted. */
/* JNN-RSV-008H - Production lock
Existing RSV-001 through RSV-063 preserved.
New control range: RSV-064 through RSV-072.
Existing tuned numbers / figures modified: NO.
Existing state engines modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-009
FUTURE MODULE INTERACTION SAFETY ENGINE
STATUS: PRODUCTION / FOUNDATION LOCK
=========================================================
PURPOSE
- Neutral interaction baseline for future custom modules.
- Explicit hooks only.
- Touch/click safety.
- Disabled-state safety.
- No visual layout ownership.
- Existing live modules remain untouched.
OFFICIAL INTERACTION HOOKS
.jnn-future-interaction
.jnn-module-interaction-safe
[data-jnn-interaction="future"]
[data-jnn-module-interaction]
========================================================= */
/* JNN-RSV-009A - Interaction activation metadata */
:is(
.jnn-future-interaction,
.jnn-module-interaction-safe,
[data-jnn-interaction="future"],
[data-jnn-module-interaction]
) {
--jnn-rsv-interaction-runtime-active: var(--jnn-rsv-interaction-active);
}
/* JNN-RSV-009B - Interactive controls only */
:is(
.jnn-future-interaction,
.jnn-module-interaction-safe,
[data-jnn-interaction="future"],
[data-jnn-module-interaction]
) :is(a,button,[role="button"],input[type="button"],input[type="submit"]) {
cursor: var(--jnn-rsv-interaction-cursor) !important;
-webkit-tap-highlight-color: var(--jnn-rsv-interaction-tap-highlight) !important;
touch-action: var(--jnn-rsv-interaction-touch-action) !important;
transition-duration: var(--jnn-rsv-interaction-transition-duration) !important;
transition-timing-function: var(--jnn-rsv-interaction-transition-easing) !important;
}
/* JNN-RSV-009C - Active feedback */
:is(
.jnn-future-interaction,
.jnn-module-interaction-safe,
[data-jnn-interaction="future"],
[data-jnn-module-interaction]
) :is(a,button,[role="button"],input[type="button"],input[type="submit"]):active {
opacity: var(--jnn-rsv-interaction-active-opacity) !important;
}
/* JNN-RSV-009D - Disabled safety */
:is(
.jnn-future-interaction,
.jnn-module-interaction-safe,
[data-jnn-interaction="future"],
[data-jnn-module-interaction]
) :is(
button:disabled,
input:disabled,
[aria-disabled="true"],
[data-disabled="true"]
) {
opacity: var(--jnn-rsv-interaction-disabled-opacity) !important;
cursor: var(--jnn-rsv-interaction-disabled-cursor) !important;
}
/* JNN-RSV-009E - Hover policy
No hover transform, color, shadow or lift is imposed here.
Future component visuals remain owned by the future module itself. */
/* JNN-RSV-009F - Isolation guard
No current Homepage, Category, Single Post, Sidebar,
Footer, Header, Hero, Widget, Grid, Story or Title
selector is targeted. */
/* JNN-RSV-009G - Production lock
Existing RSV-001 through RSV-072 preserved.
New control range: RSV-073 through RSV-081.
Existing tuned numbers / figures modified: NO.
Existing interaction engines modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.6
MODULE 23 - RESERVED / FUTURE
ID: JNN-RSV-010
FINAL VALIDATION / RELEASE / PRODUCTION LOCK
STATUS: FINAL / RELEASED / LOCKED
=========================================================
OFFICIAL AUTHORITY
- JNN-RSV-001 Future Extension Engine
- JNN-RSV-002 Future Module Adapter Engine
- JNN-RSV-003 Future Module Layout Safety Engine
- JNN-RSV-004 Future Module Responsive Compatibility Engine
- JNN-RSV-005 Future Module Accessibility Compatibility Engine
- JNN-RSV-006 Future Module Content Safety Engine
- JNN-RSV-007 Future Module Performance Safety Engine
- JNN-RSV-008 Future Module State & Fallback Engine
- JNN-RSV-009 Future Module Interaction Safety Engine
- JNN-RSV-010 Final Validation / Release / Production Lock
LOCK POLICY
- Existing RSV-001 through RSV-090 are permanent.
- Existing tuned values and figures must not be changed by
future modules unless explicitly approved.
- Future functionality must branch into a NEW permanent
component/module ID instead of reopening RSV-001..RSV-010.
- RSV remains opt-in and must not auto-target live sections.
========================================================= */
/* JNN-RSV-010A - Final runtime metadata on explicit future hooks only */
:is(
.jnn-extension-module,
.jnn-future-module,
.jnn-module-adapter,
.jnn-future-module-adapter,
.jnn-future-layout,
.jnn-module-layout-safe,
.jnn-future-responsive,
.jnn-module-responsive-safe,
.jnn-future-a11y,
.jnn-module-a11y-safe,
.jnn-future-content,
.jnn-module-content-safe,
.jnn-future-performance,
.jnn-module-performance-safe,
.jnn-future-state,
.jnn-module-state-safe,
.jnn-future-interaction,
.jnn-module-interaction-safe,
[data-jnn-extension],
[data-jnn-module="future"],
[data-jnn-module-adapter],
[data-jnn-adapter="future"],
[data-jnn-layout="future"],
[data-jnn-module-layout],
[data-jnn-responsive="future"],
[data-jnn-module-responsive],
[data-jnn-a11y="future"],
[data-jnn-module-a11y],
[data-jnn-content="future"],
[data-jnn-module-content],
[data-jnn-performance="future"],
[data-jnn-module-performance],
[data-jnn-state],
[data-jnn-module-state],
[data-jnn-interaction="future"],
[data-jnn-module-interaction]
) {
--jnn-rsv-final-runtime-active: var(--jnn-rsv-final-active);
--jnn-rsv-final-runtime-regression: var(--jnn-rsv-final-regression-state);
--jnn-rsv-final-runtime-compatibility: var(--jnn-rsv-final-compatibility-state);
--jnn-rsv-final-runtime-production: var(--jnn-rsv-final-production-state);
--jnn-rsv-final-runtime-lock: var(--jnn-rsv-final-lock-state);
}
/* JNN-RSV-010B - Final isolation declaration
No width, margin, padding, gap, typography, color, border,
background, shadow, image or live-layout property is added here. */
/* JNN-RSV-010C - Release certificate
Master Index: synchronized.
Master Control: synchronized.
Update Registry: synchronized.
RSV-001 through RSV-010 sequence: complete.
Existing tuned values / figures modified: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
Final Status: PRODUCTION LOCKED.
RSV-011 creation inside this closed sequence: DENIED.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-001
STATUS: PRODUCTION FOUNDATION
=========================================================
CORE POLICY
- NEVER bind deployment to a category name.
- NEVER bind deployment to post/category text.
- Bind by permanent SLOT / ZONE / COMPONENT hooks.
- A slot may contain any current or future category/widget.
- Replacing "Kaam Ki Baat" with another category must not
require CSS changes when the same deployment slot is kept.
OFFICIAL DEPLOYMENT HOOKS
SLOT:
.jnn-deployment-slot
[data-jnn-slot]
COMPONENT:
.jnn-deployed-component
[data-jnn-component]
ZONE:
[data-jnn-zone="pre-ad"]
[data-jnn-zone="ad"]
[data-jnn-zone="post-ad"]
[data-jnn-zone="primary"]
[data-jnn-zone="secondary"]
[data-jnn-zone="above-footer"]
IMPORTANT
These hooks are structural only.
They DO NOT recreate current card/title/gap/padding designs.
Existing live sections stay untouched until a hook is added
intentionally in child-theme markup.
========================================================= */
/* JNN-FMD-001A - Permanent slot shell */
:is(
.jnn-deployment-slot,
[data-jnn-slot]
) {
--jnn-fmd-runtime-active: var(--jnn-fmd-active);
display: var(--jnn-fmd-slot-display) !important;
position: var(--jnn-fmd-slot-position) !important;
width: var(--jnn-fmd-slot-width) !important;
max-width: var(--jnn-fmd-slot-max-width) !important;
min-width: var(--jnn-fmd-slot-min-width) !important;
box-sizing: var(--jnn-fmd-slot-box-sizing) !important;
overflow-x: var(--jnn-fmd-slot-overflow-x) !important;
overflow-y: var(--jnn-fmd-slot-overflow-y) !important;
isolation: var(--jnn-fmd-slot-isolation) !important;
}
/* JNN-FMD-001B - Deployed component baseline */
:is(
.jnn-deployment-slot,
[data-jnn-slot]
) > :is(
.jnn-deployed-component,
[data-jnn-component]
) {
width: var(--jnn-fmd-component-width) !important;
min-width: var(--jnn-fmd-component-min-width) !important;
box-sizing: border-box !important;
}
/* JNN-FMD-001C - Category-independent zone metadata
These selectors intentionally add NO visual property.
They exist only as permanent deployment addresses. */
[data-jnn-zone="pre-ad"],
[data-jnn-zone="ad"],
[data-jnn-zone="post-ad"],
[data-jnn-zone="primary"],
[data-jnn-zone="secondary"],
[data-jnn-zone="above-footer"] {
--jnn-fmd-zone-registered: 1;
}
/* JNN-FMD-001D - Future-safe usage model
Example:
ANY CATEGORY / WIDGET MAY RENDER HERE
Category name is irrelevant to CSS ownership. */
/* JNN-FMD-001E - Compatibility bridge
A future deployed component may additionally opt into
the frozen RSV foundation hooks when needed:
- layout safety
- responsive safety
- accessibility
- content safety
- performance
- state/fallback
- interaction safety
FMD does not reopen or modify RSV-001 through RSV-090. */
/* JNN-FMD-001F - Isolation guard
No existing Homepage category name is targeted.
No current .featured-posts, .editors-choice, widget,
Category Page, Single Post, Sidebar, Footer, Header,
Hero or Story visual rule is overridden here. */
/* JNN-FMD-001G - Production declaration
Master Index: synchronized.
Master Control: synchronized.
Update Registry: synchronized.
New variable range: FMD-001 through FMD-012.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-002
SLOT REGISTRATION & ZONE BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
CORE POLICY
- Registration is by SLOT ID / ZONE only.
- Category names, post titles and visible text are irrelevant.
- Replacing one category/widget with another inside the same
registered slot must not require CSS ownership changes.
OFFICIAL SLOT REGISTRATION
[data-jnn-slot]
OFFICIAL ZONE REGISTRATION
[data-jnn-zone]
RECOMMENDED EXAMPLES
data-jnn-slot="home-featured"
data-jnn-slot="home-grid-01"
data-jnn-slot="home-primary-01"
ZONES
pre-ad
ad
post-ad
primary
secondary
above-footer
IMPORTANT
Slot names identify POSITION / RESPONSIBILITY only.
They must never be category names.
========================================================= */
/* JNN-FMD-002A - Slot registry metadata */
[data-jnn-slot] {
--jnn-fmd-slot-registered: var(--jnn-fmd-slot-registry-active);
order: var(--jnn-fmd-slot-order) !important;
flex-grow: var(--jnn-fmd-slot-flex-grow) !important;
flex-shrink: var(--jnn-fmd-slot-flex-shrink) !important;
flex-basis: var(--jnn-fmd-slot-flex-basis) !important;
}
/* JNN-FMD-002B - Zone registry metadata + neutral safety */
[data-jnn-zone] {
--jnn-fmd-zone-bound: var(--jnn-fmd-zone-binding-active);
width: var(--jnn-fmd-zone-width) !important;
max-width: var(--jnn-fmd-zone-max-width) !important;
min-width: var(--jnn-fmd-zone-min-width) !important;
box-sizing: var(--jnn-fmd-zone-box-sizing) !important;
overflow-x: var(--jnn-fmd-zone-overflow-x) !important;
overflow-y: var(--jnn-fmd-zone-overflow-y) !important;
}
/* JNN-FMD-002C - Slot + Zone combined registration */
[data-jnn-slot][data-jnn-zone] {
--jnn-fmd-slot-zone-linked: 1;
}
/* JNN-FMD-002D - Category independence guard
No selector may use:
- category slug
- category title
- visible heading text
- post title
Registration must remain structural. */
/* JNN-FMD-002E - Widget independence guard
Standard WordPress / Ascendoor widgets may be inserted inside
a registered slot without changing FMD ownership.
The widget's own visual engine remains authoritative. */
/* JNN-FMD-002F - Future custom module rule
A custom PHP section should receive:
data-jnn-slot="POSITION-ID"
data-jnn-zone="ZONE-ID"
and may optionally use:
class="jnn-deployment-slot"
class="jnn-deployed-component"
The category rendered inside can change freely. */
/* JNN-FMD-002G - Isolation guard
No existing Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, current Widget, Story or Title visual
selector is overridden here. */
/* JNN-FMD-002H - Production declaration
Existing FMD-001 through FMD-012 preserved.
New control range: FMD-013 through FMD-024.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-003
COMPONENT REGISTRATION & CAPABILITY BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
CORE POLICY
- Components are registered by permanent component hook.
- Visible category name / heading text is never an identity.
- Capability flags describe WHAT a component may opt into.
- Capability flags do not apply visual design by themselves.
OFFICIAL COMPONENT REGISTRATION
.jnn-deployed-component
[data-jnn-component]
OFFICIAL CAPABILITY HOOKS
[data-jnn-capability~="layout"]
[data-jnn-capability~="content"]
[data-jnn-capability~="interaction"]
[data-jnn-capability~="responsive"]
EXAMPLE
IMPORTANT
"category-section" describes component TYPE, not category NAME.
========================================================= */
/* JNN-FMD-003A - Component registration */
:is(
.jnn-deployed-component,
[data-jnn-component]
) {
--jnn-fmd-component-registered: var(--jnn-fmd-component-registry-active);
display: var(--jnn-fmd-component-display) !important;
position: var(--jnn-fmd-component-position) !important;
max-width: var(--jnn-fmd-component-max-width) !important;
box-sizing: var(--jnn-fmd-component-box-sizing) !important;
overflow-x: var(--jnn-fmd-component-overflow-x) !important;
overflow-y: var(--jnn-fmd-component-overflow-y) !important;
}
/* JNN-FMD-003B - Layout capability metadata */
[data-jnn-capability~="layout"] {
--jnn-fmd-capability-layout-runtime:
var(--jnn-fmd-capability-binding-active);
}
/* JNN-FMD-003C - Content capability metadata */
[data-jnn-capability~="content"] {
--jnn-fmd-capability-content-runtime:
var(--jnn-fmd-capability-binding-active);
}
/* JNN-FMD-003D - Interaction capability metadata */
[data-jnn-capability~="interaction"] {
--jnn-fmd-capability-interaction-runtime:
var(--jnn-fmd-capability-binding-active);
}
/* JNN-FMD-003E - Responsive capability metadata */
[data-jnn-capability~="responsive"] {
--jnn-fmd-capability-responsive-runtime:
var(--jnn-fmd-capability-binding-active);
}
/* JNN-FMD-003F - Capability defaults
FMD-033 through FMD-036 remain neutral metadata defaults.
Future modules may read/override their own capability state,
but FMD-003 itself does not impose visual behavior. */
/* JNN-FMD-003G - Slot / Zone / Component chain
Recommended permanent deployment chain:
[data-jnn-slot]
-> [data-jnn-zone]
-> [data-jnn-component]
-> [data-jnn-capability]
The rendered category/widget can change without changing
the structural deployment chain. */
/* JNN-FMD-003H - Isolation guard
No existing Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, current Widget, Story or Title visual
selector is overridden here. */
/* JNN-FMD-003I - Production declaration
Existing FMD-001 through FMD-024 preserved.
New control range: FMD-025 through FMD-036.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-004
PLACEMENT & MOUNTING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
CORE POLICY
- Mount by structural slot + zone + component hooks.
- Never mount by category name, heading text or widget label.
- A mounted slot may render any category/widget in future.
- Mounting provides structure only, not visual design.
OFFICIAL MOUNT HOOKS
.jnn-mounted-component
[data-jnn-mounted="true"]
[data-jnn-mount]
RECOMMENDED CHAIN
[data-jnn-slot]
-> [data-jnn-zone]
-> [data-jnn-component]
-> [data-jnn-mounted="true"]
========================================================= */
/* JNN-FMD-004A - Mounted component baseline */
:is(
.jnn-mounted-component,
[data-jnn-mounted="true"],
[data-jnn-mount]
) {
--jnn-fmd-mount-runtime-active: var(--jnn-fmd-mount-active);
display: var(--jnn-fmd-mount-display) !important;
position: var(--jnn-fmd-mount-position) !important;
width: var(--jnn-fmd-mount-width) !important;
max-width: var(--jnn-fmd-mount-max-width) !important;
min-width: var(--jnn-fmd-mount-min-width) !important;
box-sizing: var(--jnn-fmd-mount-box-sizing) !important;
overflow-x: var(--jnn-fmd-mount-overflow-x) !important;
overflow-y: var(--jnn-fmd-mount-overflow-y) !important;
order: var(--jnn-fmd-mount-order) !important;
flex-shrink: var(--jnn-fmd-mount-flex-shrink) !important;
isolation: var(--jnn-fmd-mount-isolation) !important;
}
/* JNN-FMD-004B - Valid mounted deployment chain */
[data-jnn-slot]
[data-jnn-component]
:is(
.jnn-mounted-component,
[data-jnn-mounted="true"],
[data-jnn-mount]
) {
--jnn-fmd-mount-chain-valid: 1;
}
/* JNN-FMD-004C - Zone-aware mounted metadata */
[data-jnn-zone]
:is(
.jnn-mounted-component,
[data-jnn-mounted="true"],
[data-jnn-mount]
) {
--jnn-fmd-mount-zone-linked: 1;
}
/* JNN-FMD-004D - Category-independent mounting guard
Mounting identity must come from data-jnn-slot,
data-jnn-zone, data-jnn-component and mount hooks only.
Category slug/name and visible title are forbidden owners. */
/* JNN-FMD-004E - Widget-independent mounting guard
The mounted content may be:
- Ascendoor Grid List Posts
- Tile Posts
- List Posts
- custom PHP section
- any future widget
without changing FMD mounting ownership. */
/* JNN-FMD-004F - Visual ownership guard
FMD-004 does NOT set:
margin, padding, gap, background, border, radius, shadow,
typography, image ratio, heading design or View All design. */
/* JNN-FMD-004G - Existing site isolation
No current Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-004H - Production declaration
Existing FMD-001 through FMD-036 preserved.
New control range: FMD-037 through FMD-048.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-005
DEPLOYMENT VALIDATION & COMPATIBILITY GATE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Validate a future deployment chain before visual ownership.
- Keep category/widget replacement independent.
- Expose neutral validation metadata only.
- Reuse the frozen RSV safety foundation without modifying it.
VALID DEPLOYMENT CHAIN
SLOT -> ZONE -> COMPONENT -> MOUNT
OPTIONAL CAPABILITIES
layout
responsive
content
interaction
IMPORTANT
Validation is structural.
No category name, visible heading or widget label is used.
========================================================= */
/* JNN-FMD-005A - Validation activation */
:is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component],
[data-jnn-mount],
[data-jnn-mounted="true"]
) {
--jnn-fmd-validation-runtime-active:
var(--jnn-fmd-validation-active);
}
/* JNN-FMD-005B - Slot validation */
[data-jnn-slot] {
--jnn-fmd-validation-slot-runtime:
var(--jnn-fmd-validation-slot-state);
}
/* JNN-FMD-005C - Zone validation */
[data-jnn-zone] {
--jnn-fmd-validation-zone-runtime:
var(--jnn-fmd-validation-zone-state);
}
/* JNN-FMD-005D - Component validation */
[data-jnn-component] {
--jnn-fmd-validation-component-runtime:
var(--jnn-fmd-validation-component-state);
}
/* JNN-FMD-005E - Mount validation */
:is(
[data-jnn-mount],
[data-jnn-mounted="true"],
.jnn-mounted-component
) {
--jnn-fmd-validation-mount-runtime:
var(--jnn-fmd-validation-mount-state);
}
/* JNN-FMD-005F - Complete structural chain */
[data-jnn-slot][data-jnn-zone]
[data-jnn-component]
:is(
[data-jnn-mount],
[data-jnn-mounted="true"],
.jnn-mounted-component
) {
--jnn-fmd-deployment-chain-valid: 1;
--jnn-fmd-validation-production-runtime:
var(--jnn-fmd-validation-production-state);
}
/* JNN-FMD-005G - Capability compatibility metadata */
[data-jnn-capability~="layout"] {
--jnn-fmd-validation-layout-runtime:
var(--jnn-fmd-validation-layout-state);
}
[data-jnn-capability~="responsive"] {
--jnn-fmd-validation-responsive-runtime:
var(--jnn-fmd-validation-responsive-state);
}
[data-jnn-capability~="content"] {
--jnn-fmd-validation-content-runtime:
var(--jnn-fmd-validation-content-state);
}
[data-jnn-capability~="interaction"] {
--jnn-fmd-validation-interaction-runtime:
var(--jnn-fmd-validation-interaction-state);
}
/* JNN-FMD-005H - Frozen RSV compatibility certificate
Accessibility and performance remain owned by the locked
RSV foundation. FMD records compatibility only and does not
redefine any RSV variable or selector behavior. */
[data-jnn-component] {
--jnn-fmd-validation-a11y-runtime:
var(--jnn-fmd-validation-a11y-state);
--jnn-fmd-validation-performance-runtime:
var(--jnn-fmd-validation-performance-state);
}
/* JNN-FMD-005I - Category/widget independence guard
A deployment remains valid when content inside the same
slot is replaced by another category or widget type.
Structural hooks, not visible content, are authoritative. */
/* JNN-FMD-005J - Visual ownership guard
No margin, padding, gap, title style, card style, color,
background, border, shadow, typography, image geometry
or View All styling is introduced. */
/* JNN-FMD-005K - Existing site isolation
No existing Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-005L - Production declaration
Existing FMD-001 through FMD-048 preserved.
New control range: FMD-049 through FMD-060.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-006
DEPLOYMENT ROLLBACK & RECOVERY SAFETY ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Provide neutral rollback/recovery hooks for future modules.
- Preserve the permanent SLOT / ZONE / COMPONENT identity.
- Allow failed/replaced content to recover without binding
recovery behavior to a category name or visible title.
- Do not modify existing live visual design.
OFFICIAL RECOVERY HOOKS
[data-jnn-recovery]
[data-jnn-recovery="ready"]
[data-jnn-recovery="fallback"]
[data-jnn-recovery="rollback"]
.jnn-deployment-recovery
IMPORTANT
Recovery identity belongs to the deployment structure,
never to the category/widget currently rendered inside it.
========================================================= */
/* JNN-FMD-006A - Recovery shell */
:is(
.jnn-deployment-recovery,
[data-jnn-recovery]
) {
--jnn-fmd-recovery-runtime-active:
var(--jnn-fmd-recovery-active);
display: var(--jnn-fmd-recovery-slot-display) !important;
width: var(--jnn-fmd-recovery-slot-width) !important;
max-width: var(--jnn-fmd-recovery-slot-max-width) !important;
min-width: var(--jnn-fmd-recovery-slot-min-width) !important;
box-sizing: var(--jnn-fmd-recovery-box-sizing) !important;
overflow-x: var(--jnn-fmd-recovery-overflow-x) !important;
overflow-y: var(--jnn-fmd-recovery-overflow-y) !important;
isolation: var(--jnn-fmd-recovery-isolation) !important;
}
/* JNN-FMD-006B - Ready state metadata */
[data-jnn-recovery="ready"] {
--jnn-fmd-recovery-ready-runtime:
var(--jnn-fmd-recovery-ready-state);
}
/* JNN-FMD-006C - Fallback state metadata */
[data-jnn-recovery="fallback"] {
--jnn-fmd-recovery-fallback-runtime:
var(--jnn-fmd-recovery-fallback-state);
}
/* JNN-FMD-006D - Rollback state metadata */
[data-jnn-recovery="rollback"] {
--jnn-fmd-recovery-rollback-runtime:
var(--jnn-fmd-recovery-rollback-state);
}
/* JNN-FMD-006E - Structural recovery chain */
[data-jnn-slot]
[data-jnn-component]
:is(
.jnn-deployment-recovery,
[data-jnn-recovery]
) {
--jnn-fmd-recovery-chain-valid: 1;
}
/* JNN-FMD-006F - Zone recovery linkage */
[data-jnn-zone]
:is(
.jnn-deployment-recovery,
[data-jnn-recovery]
) {
--jnn-fmd-recovery-zone-linked: 1;
}
/* JNN-FMD-006G - Category/widget independence guard
A category/widget may be removed, replaced or restored while
the deployment slot keeps its permanent recovery ownership.
No category slug, category title, visible heading, post title
or widget label is a recovery selector. */
/* JNN-FMD-006H - Rollback scope guard
This CSS engine provides recovery STATE and STRUCTURAL hooks.
It does not itself restore PHP, database content, widgets,
posts or WordPress settings. Those remain deployment actions. */
/* JNN-FMD-006I - Visual ownership guard
No margin, padding, gap, font, color, background, border,
shadow, title design, View All design or image geometry
is introduced by FMD-006. */
/* JNN-FMD-006J - Existing site isolation
No existing Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-006K - Production declaration
Existing FMD-001 through FMD-060 preserved.
New control range: FMD-061 through FMD-072.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-007
DEPLOYMENT LIFECYCLE & STATE ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Give each future deployment a permanent lifecycle state.
- Keep lifecycle identity attached to structural deployment.
- Never depend on category name, heading or widget label.
- Preserve current live design and locked values.
OFFICIAL LIFECYCLE HOOK
[data-jnn-lifecycle]
STATES
registered
mounted
ready
live
paused
retired
failed
NORMAL FLOW
registered -> mounted -> ready -> live
SAFE EXITS
live -> paused
paused -> live
live -> retired
any deployment failure -> failed -> FMD-006 recovery
========================================================= */
/* JNN-FMD-007A - Lifecycle shell */
[data-jnn-lifecycle] {
--jnn-fmd-lifecycle-runtime-active:
var(--jnn-fmd-lifecycle-active);
display: var(--jnn-fmd-lifecycle-display) !important;
width: var(--jnn-fmd-lifecycle-width) !important;
min-width: var(--jnn-fmd-lifecycle-min-width) !important;
box-sizing: var(--jnn-fmd-lifecycle-box-sizing) !important;
}
/* JNN-FMD-007B - Registered */
[data-jnn-lifecycle="registered"] {
--jnn-fmd-lifecycle-registered-runtime:
var(--jnn-fmd-lifecycle-registered-state);
}
/* JNN-FMD-007C - Mounted */
[data-jnn-lifecycle="mounted"] {
--jnn-fmd-lifecycle-mounted-runtime:
var(--jnn-fmd-lifecycle-mounted-state);
}
/* JNN-FMD-007D - Ready */
[data-jnn-lifecycle="ready"] {
--jnn-fmd-lifecycle-ready-runtime:
var(--jnn-fmd-lifecycle-ready-state);
}
/* JNN-FMD-007E - Live */
[data-jnn-lifecycle="live"] {
--jnn-fmd-lifecycle-live-runtime:
var(--jnn-fmd-lifecycle-live-state);
}
/* JNN-FMD-007F - Paused */
[data-jnn-lifecycle="paused"] {
--jnn-fmd-lifecycle-paused-runtime:
var(--jnn-fmd-lifecycle-paused-state);
}
/* JNN-FMD-007G - Retired */
[data-jnn-lifecycle="retired"] {
--jnn-fmd-lifecycle-retired-runtime:
var(--jnn-fmd-lifecycle-retired-state);
}
/* JNN-FMD-007H - Failed */
[data-jnn-lifecycle="failed"] {
--jnn-fmd-lifecycle-failed-runtime:
var(--jnn-fmd-lifecycle-failed-state);
}
/* JNN-FMD-007I - Structural lifecycle chain */
[data-jnn-slot]
[data-jnn-component]
[data-jnn-lifecycle] {
--jnn-fmd-lifecycle-chain-valid: 1;
}
/* JNN-FMD-007J - Recovery bridge
A failed deployment may additionally receive:
data-jnn-recovery="fallback"
or
data-jnn-recovery="rollback"
FMD-007 does not redefine FMD-006 recovery behavior. */
/* JNN-FMD-007K - Category/widget independence guard
Lifecycle belongs to the permanent deployment component.
Changing the category or widget rendered inside the same
component does not require lifecycle CSS changes. */
/* JNN-FMD-007L - Visual ownership guard
Lifecycle states do not automatically hide, fade, recolor,
resize or restyle a live section. State metadata remains
neutral until a future module explicitly consumes it. */
/* JNN-FMD-007M - Existing site isolation
No current Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-007N - Production declaration
Existing FMD-001 through FMD-072 preserved.
New control range: FMD-073 through FMD-084.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-008
DEPLOYMENT VERSION & COMPATIBILITY ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Give future deployed components explicit version metadata.
- Separate framework version from rendered category/widget.
- Provide compatibility / legacy / upgrade state hooks.
- Never infer compatibility from visible text or category name.
OFFICIAL VERSION HOOKS
[data-jnn-version]
[data-jnn-framework-version]
[data-jnn-component-version]
[data-jnn-compatibility]
COMPATIBILITY STATES
compatible
legacy
upgrade
IMPORTANT
Version hooks are metadata/structure only.
They do not visually restyle existing live content.
========================================================= */
/* JNN-FMD-008A - Version metadata shell */
:is(
[data-jnn-version],
[data-jnn-framework-version],
[data-jnn-component-version],
[data-jnn-compatibility]
) {
--jnn-fmd-version-runtime-active:
var(--jnn-fmd-version-active);
display: var(--jnn-fmd-version-display) !important;
width: var(--jnn-fmd-version-width) !important;
min-width: var(--jnn-fmd-version-min-width) !important;
box-sizing: var(--jnn-fmd-version-box-sizing) !important;
}
/* JNN-FMD-008B - Schema registration */
[data-jnn-version] {
--jnn-fmd-version-schema-runtime:
var(--jnn-fmd-version-schema-state);
}
/* JNN-FMD-008C - Framework version registration */
[data-jnn-framework-version] {
--jnn-fmd-version-framework-runtime:
var(--jnn-fmd-version-framework-state);
}
/* JNN-FMD-008D - Component version registration */
[data-jnn-component-version] {
--jnn-fmd-version-component-runtime:
var(--jnn-fmd-version-component-state);
}
/* JNN-FMD-008E - Compatible state */
[data-jnn-compatibility="compatible"] {
--jnn-fmd-version-compatible-runtime:
var(--jnn-fmd-version-compatible-state);
}
/* JNN-FMD-008F - Legacy state */
[data-jnn-compatibility="legacy"] {
--jnn-fmd-version-legacy-runtime:
var(--jnn-fmd-version-legacy-state);
}
/* JNN-FMD-008G - Upgrade state */
[data-jnn-compatibility="upgrade"] {
--jnn-fmd-version-upgrade-runtime:
var(--jnn-fmd-version-upgrade-state);
}
/* JNN-FMD-008H - Permanent deployment chain linkage */
[data-jnn-slot]
[data-jnn-component]
:is(
[data-jnn-version],
[data-jnn-component-version],
[data-jnn-compatibility]
) {
--jnn-fmd-version-chain-valid: 1;
}
/* JNN-FMD-008I - Lifecycle compatibility bridge
Version metadata may coexist with FMD-007 lifecycle states.
FMD-008 does not redefine registered/mounted/ready/live/
paused/retired/failed lifecycle behavior. */
/* JNN-FMD-008J - Recovery compatibility bridge
A legacy or upgrade-required component may hand off to
FMD-006 recovery hooks if future deployment logic chooses.
No automatic rollback is performed by CSS. */
/* JNN-FMD-008K - Category/widget independence guard
Framework/component version belongs to deployment structure.
Replacing the category/widget inside the same structural
component does not require category-specific CSS. */
/* JNN-FMD-008L - Visual ownership guard
No margin, padding, gap, font, color, background, border,
shadow, title design, View All design or image geometry
is introduced by FMD-008. */
/* JNN-FMD-008M - Existing site isolation
No current Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-008N - Production declaration
Existing FMD-001 through FMD-084 preserved.
New control range: FMD-085 through FMD-096.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-009
DEPLOYMENT DEPENDENCY & OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Register structural dependencies between future modules.
- Give slot/zone/component ownership an explicit contract.
- Prevent category names or visible headings becoming owners.
- Keep future replacement of rendered content safe.
OFFICIAL DEPENDENCY HOOKS
[data-jnn-dependency]
[data-jnn-parent]
[data-jnn-child]
OFFICIAL OWNERSHIP HOOKS
[data-jnn-owner]
[data-jnn-ownership="exclusive"]
[data-jnn-ownership="shared"]
[data-jnn-ownership="inherited"]
IMPORTANT
Owner IDs must describe structural engines/components,
never a category name, post title or visible section title.
========================================================= */
/* JNN-FMD-009A - Dependency registration */
[data-jnn-dependency] {
--jnn-fmd-dependency-runtime-active:
var(--jnn-fmd-dependency-active);
}
/* JNN-FMD-009B - Slot dependency */
[data-jnn-slot][data-jnn-dependency] {
--jnn-fmd-dependency-slot-runtime:
var(--jnn-fmd-dependency-slot-state);
}
/* JNN-FMD-009C - Zone dependency */
[data-jnn-zone][data-jnn-dependency] {
--jnn-fmd-dependency-zone-runtime:
var(--jnn-fmd-dependency-zone-state);
}
/* JNN-FMD-009D - Component dependency */
[data-jnn-component][data-jnn-dependency] {
--jnn-fmd-dependency-component-runtime:
var(--jnn-fmd-dependency-component-state);
}
/* JNN-FMD-009E - Parent dependency */
[data-jnn-parent] {
--jnn-fmd-dependency-parent-runtime:
var(--jnn-fmd-dependency-parent-state);
}
/* JNN-FMD-009F - Child dependency */
[data-jnn-child] {
--jnn-fmd-dependency-child-runtime:
var(--jnn-fmd-dependency-child-state);
}
/* JNN-FMD-009G - Ownership registration */
[data-jnn-owner] {
--jnn-fmd-ownership-runtime-active:
var(--jnn-fmd-ownership-active);
}
/* JNN-FMD-009H - Exclusive ownership */
[data-jnn-ownership="exclusive"] {
--jnn-fmd-ownership-exclusive-runtime:
var(--jnn-fmd-ownership-exclusive-state);
}
/* JNN-FMD-009I - Shared ownership */
[data-jnn-ownership="shared"] {
--jnn-fmd-ownership-shared-runtime:
var(--jnn-fmd-ownership-shared-state);
}
/* JNN-FMD-009J - Inherited ownership */
[data-jnn-ownership="inherited"] {
--jnn-fmd-ownership-inherited-runtime:
var(--jnn-fmd-ownership-inherited-state);
}
/* JNN-FMD-009K - Valid dependency/ownership chain */
[data-jnn-slot]
[data-jnn-component][data-jnn-dependency][data-jnn-owner] {
--jnn-fmd-dependency-compatible-runtime:
var(--jnn-fmd-dependency-compatible-state);
--jnn-fmd-dependency-chain-valid: 1;
}
/* JNN-FMD-009L - Replacement safety
The content rendered inside an owned component may change.
Ownership remains attached to structural component identity,
not to the category/widget currently rendered inside it. */
/* JNN-FMD-009M - Cross-engine boundary
FMD-009 records ownership/dependencies only.
It does not override FMD-006 recovery, FMD-007 lifecycle,
FMD-008 version compatibility or frozen RSV behavior. */
/* JNN-FMD-009N - Visual ownership guard
No margin, padding, gap, font, color, background, border,
shadow, title design, View All design or image geometry
is introduced. */
/* JNN-FMD-009O - Existing site isolation
No current Homepage, Category Page, Single Post, Sidebar,
Footer, Header, Hero, Story or legacy Widget visual selector
is overridden here. */
/* JNN-FMD-009P - Production declaration
Existing FMD-001 through FMD-096 preserved.
New control range: FMD-097 through FMD-108.
Existing tuned numbers / figures modified: NO.
Existing RSV values modified: NO.
Existing live layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme framework only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.7
MODULE 24 - FUTURE MODULE DEPLOYMENT ENGINE
ID: JNN-FMD-010
FINAL VALIDATION / RELEASE / PRODUCTION LOCK
STATUS: FINAL PRODUCTION LOCK
=========================================================
FINAL SCOPE
FMD-001 Deployment foundation
FMD-002 Slot registration / zone binding
FMD-003 Component registration / capability binding
FMD-004 Placement / mounting
FMD-005 Validation / compatibility gate
FMD-006 Rollback / recovery safety
FMD-007 Lifecycle / state
FMD-008 Version / compatibility
FMD-009 Dependency / ownership
FMD-010 Final validation / release / production lock
PERMANENT DEPLOYMENT MODEL
SLOT -> ZONE -> COMPONENT -> MOUNT
-> CAPABILITY
-> VALIDATION
-> LIFECYCLE
-> VERSION
-> DEPENDENCY / OWNERSHIP
-> RECOVERY
CORE LOCK
Category names, category slugs, visible headings, post titles
and widget labels are NOT permanent deployment identities.
========================================================= */
/* JNN-FMD-010A - Final framework certificate */
:is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component]
) {
--jnn-fmd-final-validation-runtime:
var(--jnn-fmd-final-validation-state);
--jnn-fmd-final-slot-runtime:
var(--jnn-fmd-final-slot-state);
--jnn-fmd-final-zone-runtime:
var(--jnn-fmd-final-zone-state);
--jnn-fmd-final-component-runtime:
var(--jnn-fmd-final-component-state);
}
/* JNN-FMD-010B - Mount certificate */
:is(
[data-jnn-mount],
[data-jnn-mounted="true"],
.jnn-mounted-component
) {
--jnn-fmd-final-mount-runtime:
var(--jnn-fmd-final-mount-state);
}
/* JNN-FMD-010C - Compatibility certificate */
[data-jnn-compatibility] {
--jnn-fmd-final-compatibility-runtime:
var(--jnn-fmd-final-compatibility-state);
}
/* JNN-FMD-010D - Recovery certificate */
:is(
[data-jnn-recovery],
.jnn-deployment-recovery
) {
--jnn-fmd-final-recovery-runtime:
var(--jnn-fmd-final-recovery-state);
}
/* JNN-FMD-010E - Production-lock certificate */
[data-jnn-slot]
[data-jnn-component] {
--jnn-fmd-final-production-lock-runtime:
var(--jnn-fmd-final-production-lock);
}
/* JNN-FMD-010F - Master synchronization certificate
Master Index: synchronized.
Master Control: synchronized.
Update Registry: synchronized.
FMD-001 through FMD-120: registered.
FMD-001 through FMD-010 sequence: complete. */
/* JNN-FMD-010G - Existing-value preservation certificate
Existing FMD-001 through FMD-108 modified: NO.
Existing RSV-001 through RSV-090 modified: NO.
Existing tuned values / figures modified: NO.
Existing live visual layout modified: NO. */
/* JNN-FMD-010H - Category independence certificate
Category-name selector introduced by FMD sequence: NONE.
Visible-heading ownership: NONE.
Post-title ownership: NONE.
Widget-label ownership: NONE.
Permanent ownership remains structural. */
/* JNN-FMD-010I - Visual ownership certificate
FMD remains a deployment architecture layer.
It does not own current title design, cards, spacing,
typography, colors, borders, shadows, images or View All. */
/* JNN-FMD-010J - Release boundary
FMD-010 closes this FMD sequence.
FMD-011 creation inside this closed sequence is denied.
A future independent production feature must receive a new
permanent module/component ID and must consume FMD hooks
without reopening this locked sequence. */
/* JNN-FMD-010K - Final production declaration
New control range: FMD-109 through FMD-120.
Parent theme modified: NO.
Child-theme framework only: YES.
Final Status: PRODUCTION LOCKED.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-001
LIVE STRUCTURE MAPPING & SLOT BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
CORE POLICY
- Bind to LIVE STRUCTURE, never category names.
- Existing category/widget content may change freely.
- This engine adds metadata only.
- No existing visual/layout value is changed.
CONFIRMED LIVE STRUCTURE
Banner:
#news_storm_banner_section
.banner-container-wrapper
.banner-main-part
.editors-choice
.featured-posts
Featured inner card:
.featured-posts > .jnn-section-card
Advertisement:
.featured-posts > .banner-promo-area
Grid:
#news_storm_grid_section
Widget areas:
.primary-widgets-area
.secondary-widgets-area
.above-footer-widgets-area
========================================================= */
/* JNN-SBI-001A - Banner main live slot */
body.home #news_storm_banner_section
.banner-container-wrapper > .banner-main-part {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-slot-id: "home-banner-main";
--jnn-sbi-zone-id: "pre-ad";
--jnn-sbi-component-id: "banner-main";
--jnn-sbi-binding-state: var(--jnn-sbi-banner-main-state);
}
/* JNN-SBI-001B - Editorial/Trending structural slot
The slot identity is based on the live wrapper, not its visible title. */
body.home #news_storm_banner_section
.banner-container-wrapper > .editors-choice {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-slot-id: "home-editorial-01";
--jnn-sbi-zone-id: "pre-ad";
--jnn-sbi-component-id: "editorial-section";
--jnn-sbi-binding-state: var(--jnn-sbi-editorial-state);
}
/* JNN-SBI-001C - Featured structural slot
Any category rendered here remains inside the same structural slot. */
body.home #news_storm_banner_section
.banner-container-wrapper > .featured-posts {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-slot-id: "home-featured-01";
--jnn-sbi-zone-id: "pre-ad";
--jnn-sbi-component-id: "featured-section";
--jnn-sbi-binding-state: var(--jnn-sbi-featured-state);
}
/* JNN-SBI-001D - Featured white-card component mapping only
No visual card rule is recreated here. */
body.home #news_storm_banner_section
.featured-posts > .jnn-section-card {
--jnn-sbi-component-id: "section-card";
--jnn-sbi-card-binding-state: var(--jnn-sbi-section-card-state);
}
/* JNN-SBI-001E - Advertisement boundary */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-slot-id: "home-ad-01";
--jnn-sbi-zone-id: "ad";
--jnn-sbi-component-id: "advertisement";
--jnn-sbi-binding-state: var(--jnn-sbi-ad-state);
}
/* JNN-SBI-001F - Grid/Bokaro-position structural slot
The ID names the POSITION, not the category currently displayed. */
body.home #news_storm_grid_section {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-slot-id: "home-grid-01";
--jnn-sbi-zone-id: "post-ad";
--jnn-sbi-component-id: "grid-section";
--jnn-sbi-binding-state: var(--jnn-sbi-grid-state);
}
/* JNN-SBI-001G - Primary widget-area bindings
Any current/future direct widget inherits the same structural zone. */
body.home .primary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-zone-id: "primary";
--jnn-sbi-component-id: "widget-section";
--jnn-sbi-binding-state: var(--jnn-sbi-primary-state);
}
/* JNN-SBI-001H - Secondary widget-area bindings */
body.home .secondary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-zone-id: "secondary";
--jnn-sbi-component-id: "widget-section";
--jnn-sbi-binding-state: var(--jnn-sbi-secondary-state);
}
/* JNN-SBI-001I - Above-footer widget-area bindings */
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-runtime-active: var(--jnn-sbi-active);
--jnn-sbi-zone-id: "above-footer";
--jnn-sbi-component-id: "widget-section";
--jnn-sbi-binding-state: var(--jnn-sbi-above-footer-state);
}
/* JNN-SBI-001J - FMD bridge metadata
SBI maps current live structures.
FMD remains the permanent deployment architecture.
No FMD variable or locked engine is reopened. */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-fmd-bridge-active: 1;
--jnn-sbi-binding-mode-runtime: var(--jnn-sbi-binding-mode);
}
/* JNN-SBI-001K - Category-name independence certificate
No category slug/name or visible heading text is used as a selector.
"Kaam Ki Baat", Ranchi, Dhanbad, Crime, etc. are content,
never permanent slot identities. */
/* JNN-SBI-001L - Visual ownership guard
SBI-001 sets only custom-property metadata.
It does NOT set width, margin, padding, gap, display,
background, border, shadow, typography, image geometry,
title-box design, red lines or View All design. */
/* JNN-SBI-001M - PHP integration boundary
This release does NOT invent/edit PHP markup.
When current child-theme PHP is supplied for direct editing,
structural data-jnn-slot/data-jnn-zone hooks may be added
without changing visual values. */
/* JNN-SBI-001N - Production declaration
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
New variable range: SBI-001 through SBI-012.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-002
BANNER & PRE-AD ZONE BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Bind confirmed upper Homepage structures into PRE-AD.
- Preserve permanent slot identity independent of category.
- Bridge SBI live mapping to frozen FMD architecture.
- Metadata only; no visual/layout styling.
========================================================= */
body.home #news_storm_banner_section .banner-container-wrapper {
--jnn-sbi-pre-ad-runtime-active: var(--jnn-sbi-pre-ad-active);
--jnn-sbi-pre-ad-zone-runtime: var(--jnn-sbi-pre-ad-zone-state);
--jnn-sbi-pre-ad-binding-mode-runtime: var(--jnn-sbi-pre-ad-binding-mode);
}
body.home #news_storm_banner_section
.banner-container-wrapper > .banner-main-part {
--jnn-sbi-pre-ad-slot-runtime: var(--jnn-sbi-pre-ad-slot-state);
--jnn-sbi-pre-ad-banner-runtime: var(--jnn-sbi-pre-ad-banner-state);
--jnn-sbi-pre-ad-component-runtime: var(--jnn-sbi-pre-ad-component-state);
--jnn-sbi-pre-ad-chain-runtime: var(--jnn-sbi-pre-ad-chain-state);
}
body.home #news_storm_banner_section
.banner-container-wrapper > .editors-choice {
--jnn-sbi-pre-ad-slot-runtime: var(--jnn-sbi-pre-ad-slot-state);
--jnn-sbi-pre-ad-editorial-runtime: var(--jnn-sbi-pre-ad-editorial-state);
--jnn-sbi-pre-ad-component-runtime: var(--jnn-sbi-pre-ad-component-state);
--jnn-sbi-pre-ad-chain-runtime: var(--jnn-sbi-pre-ad-chain-state);
}
body.home #news_storm_banner_section
.banner-container-wrapper > .featured-posts {
--jnn-sbi-pre-ad-slot-runtime: var(--jnn-sbi-pre-ad-slot-state);
--jnn-sbi-pre-ad-featured-runtime: var(--jnn-sbi-pre-ad-featured-state);
--jnn-sbi-pre-ad-component-runtime: var(--jnn-sbi-pre-ad-component-state);
--jnn-sbi-pre-ad-chain-runtime: var(--jnn-sbi-pre-ad-chain-state);
}
body.home #news_storm_banner_section
.featured-posts > .jnn-section-card {
--jnn-sbi-pre-ad-section-card-runtime: var(--jnn-sbi-pre-ad-section-card-state);
--jnn-sbi-pre-ad-component-runtime: var(--jnn-sbi-pre-ad-component-state);
}
body.home #news_storm_banner_section
.banner-container-wrapper > :is(.banner-main-part,.editors-choice,.featured-posts) {
--jnn-sbi-pre-ad-fmd-runtime: var(--jnn-sbi-pre-ad-fmd-state);
--jnn-sbi-pre-ad-registered-slot: 1;
--jnn-sbi-pre-ad-registered-zone: 1;
}
/* Advertisement is explicitly outside PRE-AD content binding. */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area {
--jnn-sbi-pre-ad-excluded: 1;
}
/* Category-name independence / visual ownership lock:
no category slug/name/title selector and no visual property. */
/* JNN-SBI-002K - Production declaration
Existing SBI-001 through SBI-012 preserved.
New variable range: SBI-013 through SBI-024.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-003
ADVERTISEMENT BOUNDARY & TRANSITION BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Bind Advertisement as its own permanent AD zone.
- Register PRE-AD -> AD -> POST-AD structural boundaries.
- Keep Advertisement independent from featured/news content.
- Add metadata only; preserve all approved spacing values.
CONFIRMED LIVE AD STRUCTURE
#news_storm_banner_section
-> .featured-posts
-> .banner-promo-area
IMPORTANT
Advertisement remains structurally separate from
.jnn-section-card and all category content.
========================================================= */
/* JNN-SBI-003A - Advertisement live slot */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area {
--jnn-sbi-ad-runtime-active:
var(--jnn-sbi-ad-active);
--jnn-sbi-ad-slot-runtime:
var(--jnn-sbi-ad-slot-state);
--jnn-sbi-ad-zone-runtime:
var(--jnn-sbi-ad-zone-state);
--jnn-sbi-ad-component-runtime:
var(--jnn-sbi-ad-component-state);
--jnn-sbi-ad-chain-runtime:
var(--jnn-sbi-ad-chain-state);
--jnn-sbi-ad-binding-mode-runtime:
var(--jnn-sbi-ad-binding-mode);
}
/* JNN-SBI-003B - Permanent structural identity */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area {
--jnn-sbi-slot-id: "home-ad-01";
--jnn-sbi-zone-id: "ad";
--jnn-sbi-component-id: "advertisement";
}
/* JNN-SBI-003C - PRE-AD boundary certificate
The preceding structural content remains PRE-AD. */
body.home #news_storm_banner_section
.featured-posts > .jnn-section-card {
--jnn-sbi-ad-pre-boundary-runtime:
var(--jnn-sbi-ad-pre-boundary-state);
}
/* JNN-SBI-003D - POST-AD boundary certificate
Grid is the first confirmed structural section after
the Advertisement boundary. */
body.home #news_storm_grid_section {
--jnn-sbi-ad-post-boundary-runtime:
var(--jnn-sbi-ad-post-boundary-state);
}
/* JNN-SBI-003E - Transition certificate */
body.home :is(
#news_storm_banner_section .featured-posts > .banner-promo-area,
#news_storm_grid_section
) {
--jnn-sbi-ad-transition-runtime:
var(--jnn-sbi-ad-transition-state);
}
/* JNN-SBI-003F - FMD bridge */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area {
--jnn-sbi-ad-fmd-runtime:
var(--jnn-sbi-ad-fmd-state);
--jnn-sbi-ad-isolation-runtime:
var(--jnn-sbi-ad-isolation-state);
--jnn-sbi-ad-registered-slot: 1;
--jnn-sbi-ad-registered-zone: 1;
}
/* JNN-SBI-003G - Category independence guard
Advertisement binding uses only live structural selectors.
No category name, slug, heading text or post title is used. */
/* JNN-SBI-003H - Spacing ownership guard
This engine does NOT set margin-top, margin-bottom,
padding, gap or any spacing value.
Existing Homepage gap engines remain authoritative. */
/* JNN-SBI-003I - Visual ownership guard
No display, width, background, border, radius, shadow,
typography, image, title-box, red-line or View All
visual property is introduced here. */
/* JNN-SBI-003J - Existing site isolation
Category Page, Single Post, Sidebar, Footer, Header and
unrelated widgets remain untouched. */
/* JNN-SBI-003K - Production declaration
Existing SBI-001 through SBI-024 preserved.
New variable range: SBI-025 through SBI-036.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-004
POST-AD GRID & WIDGET ZONE BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Bind all confirmed lower Homepage structures after AD.
- Keep Grid and widget-area ownership structural.
- Allow future categories/widgets to replace current content.
- Add metadata only; preserve approved visual/layout values.
CONFIRMED POST-AD STRUCTURES
#news_storm_grid_section
.primary-widgets-area
.secondary-widgets-area
.above-footer-widgets-area
IMPORTANT
Category/widget names are content, never permanent identities.
========================================================= */
/* JNN-SBI-004A - Grid post-ad structural slot */
body.home #news_storm_grid_section {
--jnn-sbi-post-ad-runtime-active:
var(--jnn-sbi-post-ad-active);
--jnn-sbi-post-ad-grid-runtime:
var(--jnn-sbi-post-ad-grid-state);
--jnn-sbi-post-ad-slot-runtime:
var(--jnn-sbi-post-ad-slot-state);
--jnn-sbi-post-ad-zone-runtime:
var(--jnn-sbi-post-ad-zone-state);
--jnn-sbi-post-ad-component-runtime:
var(--jnn-sbi-post-ad-component-state);
--jnn-sbi-post-ad-chain-runtime:
var(--jnn-sbi-post-ad-chain-state);
--jnn-sbi-post-ad-binding-mode-runtime:
var(--jnn-sbi-post-ad-binding-mode);
}
/* JNN-SBI-004B - Grid permanent identity */
body.home #news_storm_grid_section {
--jnn-sbi-slot-id: "home-grid-01";
--jnn-sbi-zone-id: "post-ad";
--jnn-sbi-component-id: "grid-section";
}
/* JNN-SBI-004C - Primary area registration */
body.home .primary-widgets-area {
--jnn-sbi-post-ad-runtime-active:
var(--jnn-sbi-post-ad-active);
--jnn-sbi-zone-id: "primary";
--jnn-sbi-post-ad-primary-runtime:
var(--jnn-sbi-post-ad-primary-state);
--jnn-sbi-post-ad-zone-runtime:
var(--jnn-sbi-post-ad-zone-state);
}
/* JNN-SBI-004D - Secondary area registration */
body.home .secondary-widgets-area {
--jnn-sbi-post-ad-runtime-active:
var(--jnn-sbi-post-ad-active);
--jnn-sbi-zone-id: "secondary";
--jnn-sbi-post-ad-secondary-runtime:
var(--jnn-sbi-post-ad-secondary-state);
--jnn-sbi-post-ad-zone-runtime:
var(--jnn-sbi-post-ad-zone-state);
}
/* JNN-SBI-004E - Above-footer area registration */
body.home .above-footer-widgets-area {
--jnn-sbi-post-ad-runtime-active:
var(--jnn-sbi-post-ad-active);
--jnn-sbi-zone-id: "above-footer";
--jnn-sbi-post-ad-above-footer-runtime:
var(--jnn-sbi-post-ad-above-footer-state);
--jnn-sbi-post-ad-zone-runtime:
var(--jnn-sbi-post-ad-zone-state);
}
/* JNN-SBI-004F - Current/future direct widgets in Primary */
body.home .primary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-post-ad-widget-runtime:
var(--jnn-sbi-post-ad-widget-state);
--jnn-sbi-post-ad-component-runtime:
var(--jnn-sbi-post-ad-component-state);
--jnn-sbi-post-ad-future-widget-runtime:
var(--jnn-sbi-post-ad-future-widget-state);
--jnn-sbi-post-ad-fmd-runtime:
var(--jnn-sbi-post-ad-fmd-state);
}
/* JNN-SBI-004G - Current/future direct widgets in Secondary */
body.home .secondary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-post-ad-widget-runtime:
var(--jnn-sbi-post-ad-widget-state);
--jnn-sbi-post-ad-component-runtime:
var(--jnn-sbi-post-ad-component-state);
--jnn-sbi-post-ad-future-widget-runtime:
var(--jnn-sbi-post-ad-future-widget-state);
--jnn-sbi-post-ad-fmd-runtime:
var(--jnn-sbi-post-ad-fmd-state);
}
/* JNN-SBI-004H - Current/future widgets in Above Footer */
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-post-ad-widget-runtime:
var(--jnn-sbi-post-ad-widget-state);
--jnn-sbi-post-ad-component-runtime:
var(--jnn-sbi-post-ad-component-state);
--jnn-sbi-post-ad-future-widget-runtime:
var(--jnn-sbi-post-ad-future-widget-state);
--jnn-sbi-post-ad-fmd-runtime:
var(--jnn-sbi-post-ad-fmd-state);
}
/* JNN-SBI-004I - Generic lower-widget identity
Any supported direct widget remains a structural component
even if its internal category or widget configuration changes. */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-component-id: "widget-section";
}
/* JNN-SBI-004J - Category/widget independence guard
No category slug/name, visible heading or widget title
is used to create permanent ownership. */
/* JNN-SBI-004K - Future insertion policy
A future standard WordPress/Ascendoor widget inserted into
Primary, Secondary or Above Footer inherits SBI post-ad
structural metadata through its widget structure.
A completely custom PHP component should use FMD/SBI hooks. */
/* JNN-SBI-004L - Visual ownership guard
This module adds custom-property metadata only.
It does NOT set display, width, margin, padding, gap,
background, border, radius, shadow, font, title geometry,
red lines, image geometry or View All styling. */
/* JNN-SBI-004M - Existing site isolation
Banner/PRE-AD visual rules, Advertisement visual rules,
Category Page, Single Post, Sidebar, Footer and Header
remain untouched. */
/* JNN-SBI-004N - Production declaration
Existing SBI-001 through SBI-036 preserved.
New variable range: SBI-037 through SBI-050.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-005
UNIVERSAL WIDGET AUTO-INHERITANCE & ADAPTER BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Auto-bind standard future widgets by structure.
- Support WordPress widgets and Ascendoor widgets.
- Keep category/widget names irrelevant to ownership.
- Metadata only; no visual/layout styling.
========================================================= */
body.home .primary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-widget-auto-runtime: var(--jnn-sbi-widget-auto-active);
--jnn-sbi-widget-primary-runtime: var(--jnn-sbi-widget-primary-state);
--jnn-sbi-widget-component-runtime: var(--jnn-sbi-widget-component-state);
--jnn-sbi-widget-adapter-runtime: var(--jnn-sbi-widget-adapter-state);
--jnn-sbi-widget-fmd-runtime: var(--jnn-sbi-widget-fmd-state);
--jnn-sbi-widget-chain-runtime: var(--jnn-sbi-widget-chain-state);
}
body.home .secondary-widgets-area
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-widget-auto-runtime: var(--jnn-sbi-widget-auto-active);
--jnn-sbi-widget-secondary-runtime: var(--jnn-sbi-widget-secondary-state);
--jnn-sbi-widget-component-runtime: var(--jnn-sbi-widget-component-state);
--jnn-sbi-widget-adapter-runtime: var(--jnn-sbi-widget-adapter-state);
--jnn-sbi-widget-fmd-runtime: var(--jnn-sbi-widget-fmd-state);
--jnn-sbi-widget-chain-runtime: var(--jnn-sbi-widget-chain-state);
}
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-widget-auto-runtime: var(--jnn-sbi-widget-auto-active);
--jnn-sbi-widget-above-footer-runtime: var(--jnn-sbi-widget-above-footer-state);
--jnn-sbi-widget-component-runtime: var(--jnn-sbi-widget-component-state);
--jnn-sbi-widget-adapter-runtime: var(--jnn-sbi-widget-adapter-state);
--jnn-sbi-widget-fmd-runtime: var(--jnn-sbi-widget-fmd-state);
--jnn-sbi-widget-chain-runtime: var(--jnn-sbi-widget-chain-state);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area) > .widget,
body.home .above-footer-widgets-area > .section-wrapper > .widget {
--jnn-sbi-widget-standard-runtime: var(--jnn-sbi-widget-standard-state);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area) > .ascendoor-widget,
body.home .above-footer-widgets-area > .section-wrapper > .ascendoor-widget {
--jnn-sbi-widget-ascendoor-runtime: var(--jnn-sbi-widget-ascendoor-state);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area)
> :is([class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is([class*="widget-"],[class*="-widget"]) {
--jnn-sbi-widget-generic-runtime: var(--jnn-sbi-widget-generic-state);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area)
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-widget-future-runtime: var(--jnn-sbi-widget-future-state);
--jnn-sbi-component-id: "widget-section";
--jnn-sbi-widget-binding-mode-runtime: var(--jnn-sbi-widget-binding-mode);
}
/* Category/widget-name independence guard:
no category slug/name, widget title, visible heading or post title. */
/* Custom PHP boundary:
unknown custom markup requires explicit FMD/SBI hooks. */
/* Visual ownership guard:
metadata only; no display/width/margin/padding/gap/background/
border/radius/shadow/font/title/image/View All styling. */
/* JNN-SBI-005L - Production declaration
Existing SBI-001 through SBI-050 preserved.
New variable range: SBI-051 through SBI-064.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-006
CUSTOM PHP COMPONENT HOOK & ADAPTER BINDING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Bind custom PHP sections that do not match standard widgets.
- Require explicit permanent structural hooks.
- Prevent guessing based on category/title/widget text.
- Bridge custom components into frozen FMD architecture.
- Add metadata only; no visual/layout styling.
REQUIRED CUSTOM HOOKS
[data-jnn-slot]
[data-jnn-zone]
[data-jnn-component]
OPTIONAL CUSTOM HOOKS
[data-jnn-mount]
[data-jnn-mounted="true"]
[data-jnn-capability]
[data-jnn-lifecycle]
[data-jnn-version]
[data-jnn-owner]
IMPORTANT
Custom PHP is integrated only when explicit structural hooks
are present. Unknown markup is never guessed.
========================================================= */
/* JNN-SBI-006A - Explicit custom slot registration */
body.home [data-jnn-slot] {
--jnn-sbi-custom-runtime-active:
var(--jnn-sbi-custom-active);
--jnn-sbi-custom-slot-runtime:
var(--jnn-sbi-custom-slot-state);
--jnn-sbi-custom-binding-mode-runtime:
var(--jnn-sbi-custom-binding-mode);
}
/* JNN-SBI-006B - Explicit custom zone registration */
body.home [data-jnn-zone] {
--jnn-sbi-custom-zone-runtime:
var(--jnn-sbi-custom-zone-state);
}
/* JNN-SBI-006C - Explicit custom component registration */
body.home [data-jnn-component] {
--jnn-sbi-custom-component-runtime:
var(--jnn-sbi-custom-component-state);
--jnn-sbi-custom-structure-runtime:
var(--jnn-sbi-custom-structure-state);
}
/* JNN-SBI-006D - Explicit mount registration */
body.home :is(
[data-jnn-mount],
[data-jnn-mounted="true"],
.jnn-mounted-component
) {
--jnn-sbi-custom-mount-runtime:
var(--jnn-sbi-custom-mount-state);
}
/* JNN-SBI-006E - Complete custom structural chain */
body.home [data-jnn-slot][data-jnn-zone]
[data-jnn-component] {
--jnn-sbi-custom-chain-runtime:
var(--jnn-sbi-custom-chain-state);
--jnn-sbi-custom-adapter-runtime:
var(--jnn-sbi-custom-adapter-state);
--jnn-sbi-custom-fmd-runtime:
var(--jnn-sbi-custom-fmd-state);
--jnn-sbi-custom-validation-runtime:
var(--jnn-sbi-custom-validation-state);
}
/* JNN-SBI-006F - Future custom component certificate */
body.home [data-jnn-component] {
--jnn-sbi-custom-future-runtime:
var(--jnn-sbi-custom-future-state);
}
/* JNN-SBI-006G - Fallback bridge
A custom component may combine explicit SBI hooks with
FMD recovery/lifecycle/version hooks without redefining them. */
body.home :is(
[data-jnn-recovery],
[data-jnn-lifecycle],
[data-jnn-version],
[data-jnn-compatibility]
) {
--jnn-sbi-custom-fallback-runtime:
var(--jnn-sbi-custom-fallback-state);
}
/* JNN-SBI-006H - Required PHP markup model
The slot name describes POSITION, not category name. */
/* JNN-SBI-006I - Category/title independence guard
Forbidden as permanent owners:
- category name
- category slug
- visible heading
- post title
- widget label
Required owner:
explicit data-jnn structural hooks. */
/* JNN-SBI-006J - Unknown markup guard
This engine deliberately does not target arbitrary generic
div/section/article elements. Doing so would risk affecting
existing live layout and future unrelated markup. */
/* JNN-SBI-006K - Visual ownership guard
Metadata only.
No display, width, margin, padding, gap, background, border,
radius, shadow, font, title, image or View All styling. */
/* JNN-SBI-006L - Existing site isolation
Existing Banner, Advertisement, Grid, standard widgets,
Category Page, Single Post, Sidebar, Footer and Header
visual ownership remain untouched. */
/* JNN-SBI-006M - Production declaration
Existing SBI-001 through SBI-064 preserved.
New variable range: SBI-065 through SBI-078.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-007
BINDING VALIDATION & CONFLICT GUARD ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Validate live SBI structural bindings.
- Guard against duplicate/ambiguous ownership metadata.
- Keep FMD/SBI ownership structural and category-independent.
- Add metadata only; no visual/layout styling.
VALID STRUCTURAL OWNERS
[data-jnn-slot]
[data-jnn-zone]
[data-jnn-component]
standard confirmed widget structures
confirmed News Storm structural wrappers
INVALID PERMANENT OWNERS
category name
category slug
visible heading
post title
widget label
========================================================= */
/* JNN-SBI-007A - Slot validation */
body.home [data-jnn-slot] {
--jnn-sbi-validate-runtime-active:
var(--jnn-sbi-validate-active);
--jnn-sbi-validate-slot-runtime:
var(--jnn-sbi-validate-slot-state);
--jnn-sbi-validation-mode-runtime:
var(--jnn-sbi-validation-mode);
}
/* JNN-SBI-007B - Zone validation */
body.home [data-jnn-zone] {
--jnn-sbi-validate-zone-runtime:
var(--jnn-sbi-validate-zone-state);
}
/* JNN-SBI-007C - Component validation */
body.home [data-jnn-component] {
--jnn-sbi-validate-component-runtime:
var(--jnn-sbi-validate-component-state);
}
/* JNN-SBI-007D - Standard widget validation */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area
) > :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-validate-widget-runtime:
var(--jnn-sbi-validate-widget-state);
}
/* JNN-SBI-007E - Explicit custom component validation */
body.home [data-jnn-slot][data-jnn-zone]
[data-jnn-component] {
--jnn-sbi-validate-custom-runtime:
var(--jnn-sbi-validate-custom-state);
--jnn-sbi-validate-chain-runtime:
var(--jnn-sbi-validate-chain-state);
}
/* JNN-SBI-007F - Live News Storm structural validation */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-conflict-guard-runtime:
var(--jnn-sbi-conflict-guard-state);
--jnn-sbi-ownership-guard-runtime:
var(--jnn-sbi-ownership-guard-state);
}
/* JNN-SBI-007G - Duplicate binding guard metadata
Duplicate visual selectors are not created here.
This flag is available for future integration/audit logic. */
body.home :is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component]
) {
--jnn-sbi-duplicate-guard-runtime:
var(--jnn-sbi-duplicate-guard-state);
}
/* JNN-SBI-007H - FMD compatibility certificate */
body.home :is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component],
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-fmd-compat-runtime:
var(--jnn-sbi-fmd-compat-state);
}
/* JNN-SBI-007I - RSV compatibility certificate
SBI consumes frozen future-safety architecture but does not
reopen or redefine RSV ownership. */
body.home :is(
[data-jnn-component],
.widget,
.ascendoor-widget
) {
--jnn-sbi-rsv-compat-runtime:
var(--jnn-sbi-rsv-compat-state);
}
/* JNN-SBI-007J - Conflict policy
Structural priority:
1) explicit data-jnn hooks
2) confirmed News Storm/Ascendoor structure
3) standard WordPress widget structure
Visible content text never receives ownership priority. */
/* JNN-SBI-007K - Duplicate policy
SBI-007 does NOT delete or rewrite old selectors.
It validates ownership metadata only.
Existing approved CSS rules stay locked. */
/* JNN-SBI-007L - Category independence guard
No category name/slug, visible heading, post title or
widget label is used as a permanent binding selector. */
/* JNN-SBI-007M - Visual ownership guard
Metadata only.
No display, width, margin, padding, gap, background,
border, radius, shadow, font, title, image or View All
styling is introduced. */
/* JNN-SBI-007N - Production declaration
Existing SBI-001 through SBI-078 preserved.
New variable range: SBI-079 through SBI-092.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-008
BINDING FALLBACK & RECOVERY INTEGRATION ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Provide recovery metadata when structural binding fails.
- Bridge SBI binding state to frozen FMD recovery/lifecycle.
- Preserve slot/zone/component identity during recovery.
- Never recover by category name, visible title or widget label.
- Metadata only; no visual/layout styling.
RECOVERY STATES
ready
fallback
rollback
RECOVERY PRIORITY
1) explicit data-jnn structural hooks
2) confirmed live structural bindings
3) standard widget structural binding
4) FMD recovery/lifecycle handoff
========================================================= */
/* JNN-SBI-008A - Explicit recovery hook */
body.home [data-jnn-recovery] {
--jnn-sbi-recovery-runtime-active:
var(--jnn-sbi-recovery-active);
--jnn-sbi-recovery-mode-runtime:
var(--jnn-sbi-recovery-mode);
}
/* JNN-SBI-008B - Ready state */
body.home [data-jnn-recovery="ready"] {
--jnn-sbi-recovery-ready-runtime:
var(--jnn-sbi-recovery-ready-state);
}
/* JNN-SBI-008C - Fallback state */
body.home [data-jnn-recovery="fallback"] {
--jnn-sbi-recovery-fallback-runtime:
var(--jnn-sbi-recovery-fallback-state);
}
/* JNN-SBI-008D - Rollback state */
body.home [data-jnn-recovery="rollback"] {
--jnn-sbi-recovery-rollback-runtime:
var(--jnn-sbi-recovery-rollback-state);
}
/* JNN-SBI-008E - Slot/zone/component recovery certificate */
body.home [data-jnn-slot] {
--jnn-sbi-recovery-slot-runtime:
var(--jnn-sbi-recovery-slot-state);
}
body.home [data-jnn-zone] {
--jnn-sbi-recovery-zone-runtime:
var(--jnn-sbi-recovery-zone-state);
}
body.home [data-jnn-component] {
--jnn-sbi-recovery-component-runtime:
var(--jnn-sbi-recovery-component-state);
}
/* JNN-SBI-008F - Standard widget recovery certificate */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area
) > :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-recovery-widget-runtime:
var(--jnn-sbi-recovery-widget-state);
}
/* JNN-SBI-008G - Custom component recovery certificate */
body.home [data-jnn-slot][data-jnn-zone]
[data-jnn-component] {
--jnn-sbi-recovery-custom-runtime:
var(--jnn-sbi-recovery-custom-state);
--jnn-sbi-recovery-chain-runtime:
var(--jnn-sbi-recovery-chain-state);
}
/* JNN-SBI-008H - FMD recovery bridge */
body.home :is(
[data-jnn-recovery],
[data-jnn-lifecycle],
[data-jnn-component]
) {
--jnn-sbi-recovery-fmd-runtime:
var(--jnn-sbi-recovery-fmd-state);
--jnn-sbi-recovery-lifecycle-runtime:
var(--jnn-sbi-recovery-lifecycle-state);
}
/* JNN-SBI-008I - Confirmed live-structure recovery bridge */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-recovery-structure-valid: 1;
}
/* JNN-SBI-008J - Recovery scope guard
CSS does not restore PHP, widgets, posts or database state.
It provides permanent structural recovery metadata only. */
/* JNN-SBI-008K - Category independence guard
No category name/slug, visible heading, post title or widget
label is used as recovery identity. */
/* JNN-SBI-008L - Visual ownership guard
Metadata only.
No display, width, margin, padding, gap, background,
border, radius, shadow, font, title, image or View All
styling is introduced. */
/* JNN-SBI-008M - Existing site isolation
Existing approved visual/layout rules remain authoritative.
No Banner, Ad, Grid, Widget, Category, Single, Sidebar,
Footer or Header visual value is overridden. */
/* JNN-SBI-008N - Production declaration
Existing SBI-001 through SBI-092 preserved.
New variable range: SBI-093 through SBI-106.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-009
BINDING LIFECYCLE & STATE SYNCHRONIZATION ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Give SBI bindings a permanent lifecycle state.
- Synchronize structural binding state with frozen FMD lifecycle.
- Bridge failed SBI bindings to SBI-008 / FMD recovery.
- Preserve category/widget independence.
- Add metadata only; no visual/layout styling.
SBI LIFECYCLE STATES
registered
bound
active
paused
retired
failed
NORMAL FLOW
registered -> bound -> active
SAFE TRANSITIONS
active -> paused
paused -> active
active -> retired
any binding failure -> failed -> SBI-008 recovery
========================================================= */
/* JNN-SBI-009A - Lifecycle registration */
body.home [data-jnn-lifecycle],
body.home [data-jnn-sbi-lifecycle] {
--jnn-sbi-lifecycle-runtime-active:
var(--jnn-sbi-lifecycle-active);
--jnn-sbi-lifecycle-mode-runtime:
var(--jnn-sbi-lifecycle-mode);
}
/* JNN-SBI-009B - Registered state */
body.home :is(
[data-jnn-lifecycle="registered"],
[data-jnn-sbi-lifecycle="registered"]
) {
--jnn-sbi-lifecycle-registered-runtime:
var(--jnn-sbi-lifecycle-registered-state);
}
/* JNN-SBI-009C - Bound state */
body.home :is(
[data-jnn-lifecycle="bound"],
[data-jnn-sbi-lifecycle="bound"]
) {
--jnn-sbi-lifecycle-bound-runtime:
var(--jnn-sbi-lifecycle-bound-state);
}
/* JNN-SBI-009D - Active state */
body.home :is(
[data-jnn-lifecycle="active"],
[data-jnn-sbi-lifecycle="active"]
) {
--jnn-sbi-lifecycle-active-runtime:
var(--jnn-sbi-lifecycle-active-state);
}
/* JNN-SBI-009E - Paused state */
body.home :is(
[data-jnn-lifecycle="paused"],
[data-jnn-sbi-lifecycle="paused"]
) {
--jnn-sbi-lifecycle-paused-runtime:
var(--jnn-sbi-lifecycle-paused-state);
}
/* JNN-SBI-009F - Retired state */
body.home :is(
[data-jnn-lifecycle="retired"],
[data-jnn-sbi-lifecycle="retired"]
) {
--jnn-sbi-lifecycle-retired-runtime:
var(--jnn-sbi-lifecycle-retired-state);
}
/* JNN-SBI-009G - Failed state */
body.home :is(
[data-jnn-lifecycle="failed"],
[data-jnn-sbi-lifecycle="failed"]
) {
--jnn-sbi-lifecycle-failed-runtime:
var(--jnn-sbi-lifecycle-failed-state);
}
/* JNN-SBI-009H - Structural lifecycle certificate */
body.home [data-jnn-slot] {
--jnn-sbi-lifecycle-slot-runtime:
var(--jnn-sbi-lifecycle-slot-state);
}
body.home [data-jnn-zone] {
--jnn-sbi-lifecycle-zone-runtime:
var(--jnn-sbi-lifecycle-zone-state);
}
body.home [data-jnn-component] {
--jnn-sbi-lifecycle-component-runtime:
var(--jnn-sbi-lifecycle-component-state);
}
/* JNN-SBI-009I - Confirmed live structures lifecycle bridge */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-lifecycle-fmd-runtime:
var(--jnn-sbi-lifecycle-fmd-state);
}
/* JNN-SBI-009J - Recovery synchronization */
body.home :is(
[data-jnn-recovery],
[data-jnn-lifecycle="failed"],
[data-jnn-sbi-lifecycle="failed"]
) {
--jnn-sbi-lifecycle-recovery-runtime:
var(--jnn-sbi-lifecycle-recovery-state);
}
/* JNN-SBI-009K - State ownership rule
Lifecycle belongs to the structural binding.
Replacing category/widget content inside the same bound
component does not change SBI lifecycle ownership. */
/* JNN-SBI-009L - FMD compatibility rule
FMD-007 remains the permanent deployment lifecycle authority.
SBI-009 synchronizes live binding metadata only and does not
reopen or redefine FMD lifecycle variables. */
/* JNN-SBI-009M - Category independence guard
No category name/slug, visible heading, post title or widget
label is used as lifecycle identity. */
/* JNN-SBI-009N - Visual ownership guard
Metadata only.
No display, visibility, opacity, width, margin, padding, gap,
background, border, shadow, font, image, title or View All
styling is introduced by lifecycle states. */
/* JNN-SBI-009O - Existing site isolation
Existing Banner, Ad, Grid, Widgets, Category Page, Single,
Sidebar, Footer and Header visual rules remain untouched. */
/* JNN-SBI-009P - Production declaration
Existing SBI-001 through SBI-106 preserved.
New variable range: SBI-107 through SBI-120.
Existing FMD-001 through FMD-120 preserved.
Existing RSV-001 through RSV-090 preserved.
Existing tuned numbers / figures modified: NO.
Existing live visual layout modified: NO.
Existing gap/padding/width values modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.8
MODULE 25 - SLOT BINDING & INTEGRATION ENGINE
ID: JNN-SBI-010
FINAL VALIDATION / RELEASE / PRODUCTION LOCK
STATUS: FINAL / RELEASED / LOCKED
=========================================================
FINAL SBI SEQUENCE
SBI-001 Live Structure Mapping / Slot Binding
SBI-002 Banner / Pre-Ad Zone Binding
SBI-003 Advertisement Boundary / Transition Binding
SBI-004 Post-Ad Grid / Widget Zone Binding
SBI-005 Universal Widget Auto-Inheritance / Adapter Binding
SBI-006 Custom PHP Component Hook / Adapter Binding
SBI-007 Binding Validation / Conflict Guard
SBI-008 Binding Fallback / Recovery Integration
SBI-009 Binding Lifecycle / State Synchronization
SBI-010 Final Validation / Release / Production Lock
FINAL STRUCTURAL MODEL
LIVE STRUCTURE
-> SLOT
-> ZONE
-> COMPONENT
-> WIDGET / CUSTOM PHP ADAPTER
-> VALIDATION
-> RECOVERY
-> LIFECYCLE
PERMANENT RULE
Category names, category slugs, visible headings, post titles
and widget labels are never permanent SBI identities.
========================================================= */
/* JNN-SBI-010A - Final slot/zone/component certificate */
body.home :is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component],
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-final-runtime-active:
var(--jnn-sbi-final-active);
--jnn-sbi-final-slot-runtime:
var(--jnn-sbi-final-slot-state);
--jnn-sbi-final-zone-runtime:
var(--jnn-sbi-final-zone-state);
--jnn-sbi-final-component-runtime:
var(--jnn-sbi-final-component-state);
}
/* JNN-SBI-010B - Widget certificate */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area
) > :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
--jnn-sbi-final-widget-runtime:
var(--jnn-sbi-final-widget-state);
}
/* JNN-SBI-010C - Custom PHP certificate */
body.home [data-jnn-slot][data-jnn-zone]
[data-jnn-component] {
--jnn-sbi-final-custom-runtime:
var(--jnn-sbi-final-custom-state);
}
/* JNN-SBI-010D - Conflict validation certificate */
body.home :is(
[data-jnn-slot],
[data-jnn-zone],
[data-jnn-component],
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-final-conflict-runtime:
var(--jnn-sbi-final-conflict-state);
}
/* JNN-SBI-010E - Recovery certificate */
body.home :is(
[data-jnn-recovery],
[data-jnn-lifecycle="failed"],
[data-jnn-sbi-lifecycle="failed"]
) {
--jnn-sbi-final-recovery-runtime:
var(--jnn-sbi-final-recovery-state);
}
/* JNN-SBI-010F - Lifecycle certificate */
body.home :is(
[data-jnn-lifecycle],
[data-jnn-sbi-lifecycle]
) {
--jnn-sbi-final-lifecycle-runtime:
var(--jnn-sbi-final-lifecycle-state);
}
/* JNN-SBI-010G - Production lock certificate */
body.home :is(
[data-jnn-slot],
[data-jnn-component],
#news_storm_banner_section,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-sbi-final-production-lock-runtime:
var(--jnn-sbi-final-production-lock);
}
/* JNN-SBI-010H - Master synchronization certificate
Master Index: synchronized.
Master Control: synchronized.
Update Registry: synchronized.
SBI-001 through SBI-134: registered.
SBI-001 through SBI-010 sequence: complete. */
/* JNN-SBI-010I - Existing-value preservation certificate
Existing SBI-001 through SBI-120 modified: NO.
Existing FMD-001 through FMD-120 modified: NO.
Existing RSV-001 through RSV-090 modified: NO.
Existing tuned values / figures modified: NO.
Existing live visual layout modified: NO. */
/* JNN-SBI-010J - Category independence certificate
Category-name selector introduced by SBI sequence: NONE.
Category-slug ownership: NONE.
Visible-heading ownership: NONE.
Post-title ownership: NONE.
Widget-label ownership: NONE.
Permanent identity remains structural. */
/* JNN-SBI-010K - Visual ownership certificate
SBI remains integration/binding architecture only.
No current card design, spacing, width, typography, colors,
borders, shadows, image geometry, title-box, red-line or
View All design is owned by SBI. */
/* JNN-SBI-010L - PHP boundary certificate
SBI supports explicit data-jnn hooks for custom PHP.
This CSS sequence does not invent or rewrite PHP markup.
Future PHP integration must preserve existing visual values. */
/* JNN-SBI-010M - Release boundary
SBI-010 closes this SBI sequence.
SBI-011 creation inside this closed sequence is denied.
Any new independent production feature must receive a new
permanent module/component ID and may consume SBI/FMD hooks
without reopening this locked sequence. */
/* JNN-SBI-010N - Final production declaration
New variable range: SBI-121 through SBI-134.
Existing gap/padding/width values modified: NO.
Parent theme modified: NO.
Child-theme CSS only in this release: YES.
Final Status: PRODUCTION LOCKED.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.5.9U5 SINGLE POST FINE TUNING
FINAL LOCK
- Share buttons use PST-068 through PST-071 only
- Related headlines use PST-072 through PST-074 only
- Parent theme modified: NO
- Child theme implementation: YES
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.3R1BU1 VIDEO HEADER EXACT MATCH
MASTER REFERENCE: LIVE VIDEO SECTION
SCOPE: HOMEPAGE SECTION TITLES / VIEW ALL ONLY
========================================================= */
/* ---------------------------------------------------------
BU1-001 MASTER TITLE ROW
Standard current + future News Storm / Ascendoor widgets
auto-inherit through the same component structure.
--------------------------------------------------------- */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto var(--jnn-video-title-line-offset-y) !important;
column-gap: var(--jnn-section-title-view-gap) !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 0 var(--jnn-section-title-content-gap) !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* ---------------------------------------------------------
BU1-002 GREY TITLE BOX
Video reference:
- light grey rectangle
- thick rectangular red bar attached inside at left
- no rounded ends on the red bar
--------------------------------------------------------- */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .section-title,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .section-title,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .widget-title {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
width: min(var(--jnn-section-title-box-width), 100%) !important;
max-width: calc(100% - var(--jnn-section-view-all-space)) !important;
min-width: 0 !important;
min-height: var(--jnn-video-title-box-height) !important;
margin: 0 !important;
padding:
var(--jnn-section-title-box-pad-y)
var(--jnn-section-title-box-pad-x)
var(--jnn-section-title-box-pad-y)
calc(
var(--jnn-section-title-box-pad-x)
+ var(--jnn-video-title-bar-width)
+ var(--jnn-section-title-bar-gap)
) !important;
color: var(--jnn-home-heading-color) !important;
background: var(--jnn-video-title-box-bg) !important;
font-size: var(--jnn-home-heading-size) !important;
font-weight: var(--jnn-home-heading-weight) !important;
line-height: var(--jnn-home-heading-line) !important;
border: 0 !important;
border-radius: var(--jnn-video-title-radius) !important;
box-shadow: none !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Thick vertical red rectangle, exactly attached to grey box. */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .section-title::before,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .section-title::before,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .widget-title::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: var(--jnn-video-title-bar-width) !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jnn-video-title-bar-color) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* Thin horizontal line sits BELOW the grey box, not inside it.
It starts after the vertical bar + a small breathing gap,
so both red lines can never touch. */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .section-title::after,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .section-title::after,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .widget-title::after {
content: "" !important;
display: block !important;
position: absolute !important;
left:
calc(
var(--jnn-video-title-bar-width)
+ var(--jnn-video-title-line-gap-x)
) !important;
bottom:
calc(
-1 * var(--jnn-video-title-line-offset-y)
) !important;
width:
calc(
100%
- var(--jnn-video-title-bar-width)
- var(--jnn-video-title-line-gap-x)
) !important;
height: var(--jnn-video-title-line-height) !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jnn-video-title-bar-color) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* ---------------------------------------------------------
BU1-003 VIEW ALL: VIDEO BASELINE
Small font, outside the grey box, aligned with the thin
horizontal red line rather than vertically centered.
--------------------------------------------------------- */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .view-all,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .view-all,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .view-all {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
display: inline-flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
align-self: end !important;
width: auto !important;
max-width: var(--jnn-section-view-all-space) !important;
margin: 0 0 var(--jnn-video-view-all-offset-y) 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: var(--jnn-video-view-all-size) !important;
line-height: 1 !important;
font-weight: 500 !important;
white-space: nowrap !important;
position: relative !important;
inset: auto !important;
transform: none !important;
z-index: 3 !important;
}
/* ---------------------------------------------------------
BU1-004 REMOVE OLD TITLE-ROW DIVIDER
Video reference uses the thin red line below the grey box;
no extra full-width grey/black divider is allowed here.
--------------------------------------------------------- */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading {
border-bottom: 0 !important;
}
/* ---------------------------------------------------------
BU1-005 MOBILE AUTO-INHERIT
--------------------------------------------------------- */
@media screen and (max-width: 767px) {
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .section-title,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .section-title,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .widget-title {
width: var(--jnn-section-title-box-width-mobile) !important;
max-width: calc(
100%
- var(--jnn-section-view-all-space-mobile)
) !important;
}
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .view-all,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .view-all,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .view-all {
max-width: var(--jnn-section-view-all-space-mobile) !important;
font-size: var(--jnn-video-view-all-size) !important;
}
}
/* =========================================================
JNN v5.6.3R1BU1 END
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.3R1BU2R2
FINAL HOMEPAGE HOTFIX
SCOPE: KAAM KI BAAT WHITE CARD ONLY
========================================================= */
/* Preferred child-template structure:
.featured-posts > .jnn-section-card
This keeps title + stories in one single white card.
Advertisement remains outside. */
body.home
#news_storm_banner_section
.featured-posts
> .jnn-section-card {
display: flow-root !important;
width: 100% !important;
max-width: 100% !important;
background: var(--jnn-card-bg) !important;
border:
var(--jnn-card-border-width)
solid
var(--jnn-card-border-color) !important;
border-radius: var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
padding:
var(--jnn-card-pad-top)
var(--jnn-card-pad-right)
var(--jnn-card-pad-bottom)
var(--jnn-card-pad-left) !important;
overflow: var(--jnn-card-overflow) !important;
box-sizing: var(--jnn-card-box-sizing) !important;
}
/* Fallback if live child PHP does not yet contain .jnn-section-card:
visually join the title and story-list into one seamless white card. */
body.home
#news_storm_banner_section
.featured-posts
> .title-heading {
margin-bottom: 0 !important;
background: var(--jnn-card-bg) !important;
border:
var(--jnn-card-border-width)
solid
var(--jnn-card-border-color) !important;
border-bottom: 0 !important;
border-radius:
var(--jnn-card-radius)
var(--jnn-card-radius)
0
0 !important;
box-shadow: var(--jnn-card-shadow) !important;
padding:
var(--jnn-card-pad-top)
var(--jnn-card-pad-right)
var(--jnn-section-title-content-gap)
var(--jnn-card-pad-left) !important;
box-sizing: border-box !important;
}
body.home
#news_storm_banner_section
.featured-posts
> .featured-posts-wrap {
display: flow-root !important;
background: var(--jnn-card-bg) !important;
border:
var(--jnn-card-border-width)
solid
var(--jnn-card-border-color) !important;
border-top: 0 !important;
border-radius:
0
0
var(--jnn-card-radius)
var(--jnn-card-radius) !important;
box-shadow: var(--jnn-card-shadow) !important;
padding:
0
var(--jnn-card-pad-right)
var(--jnn-card-pad-bottom)
var(--jnn-card-pad-left) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Advertisement is never part of the white news card. */
body.home
#news_storm_banner_section
.featured-posts
> .banner-promo-area {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* =========================================================
JNN v5.6.3R1BU2R2 END
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.4 FINAL HOMEPAGE LAYOUT OWNERSHIP
PRODUCTION LOCK
========================================================= */
/* ---------------------------------------------------------
FHL-001 BOKARO / GRID WIDTH
Preserve the approved Grid width without touching other sections.
--------------------------------------------------------- */
body.home #news_storm_grid_section {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.home #news_storm_grid_section > .section-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
body.home #news_storm_grid_section
> .section-wrapper
> .main-container-wrap {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* FINAL HOMEPAGE LAYOUT OWNERSHIP: spacing moved to U6 single-gap engine. */
/* =========================================================
JNN FRAMEWORK v5.6.5U1 FUTURE-SAFE WIDGET TYPE ENGINE
SAFE SCOPE: FIRST STORY TYPOGRAPHY / META / SUMMARY ONLY
========================================================= */
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:has(.grid-list-posts-wrapper){
--jnn-uwf-local-title-size:var(--jnn-uwf-grid-title-size);
--jnn-uwf-local-title-size-mobile:var(--jnn-uwf-grid-title-size-mobile);
--jnn-uwf-local-title-weight:var(--jnn-uwf-grid-title-weight);
--jnn-uwf-local-title-line:var(--jnn-uwf-grid-title-line);
--jnn-uwf-local-meta-display:var(--jnn-uwf-grid-meta-display);
--jnn-uwf-local-summary-display:var(--jnn-uwf-grid-summary-display);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:has(.tile-posts-wrapper){
--jnn-uwf-local-title-size:var(--jnn-uwf-tile-title-size);
--jnn-uwf-local-title-size-mobile:var(--jnn-uwf-tile-title-size-mobile);
--jnn-uwf-local-title-weight:var(--jnn-uwf-tile-title-weight);
--jnn-uwf-local-title-line:var(--jnn-uwf-tile-title-line);
--jnn-uwf-local-meta-display:var(--jnn-uwf-tile-meta-display);
--jnn-uwf-local-summary-display:var(--jnn-uwf-tile-summary-display);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:has(.list-posts-wrapper){
--jnn-uwf-local-title-size:var(--jnn-uwf-list-title-size);
--jnn-uwf-local-title-size-mobile:var(--jnn-uwf-list-title-size-mobile);
--jnn-uwf-local-title-weight:var(--jnn-uwf-list-title-weight);
--jnn-uwf-local-title-line:var(--jnn-uwf-list-title-line);
--jnn-uwf-local-meta-display:var(--jnn-uwf-list-meta-display);
--jnn-uwf-local-summary-display:var(--jnn-uwf-list-summary-display);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.entry-title,.post-title),
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.entry-title,.post-title) a{
font-size:var(--jnn-uwf-local-title-size)!important;
font-weight:var(--jnn-uwf-local-title-weight)!important;
line-height:var(--jnn-uwf-local-title-line)!important;
}
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.post-meta,.entry-meta,.post-meta-wrapper,.entry-meta-wrapper,.post-info,.posted-on,.byline,.author,.entry-date,.post-date,.comments-link){
display:var(--jnn-uwf-local-meta-display)!important;
}
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.post-excerpt,.entry-summary,.entry-excerpt,.post-description,.entry-description){
display:var(--jnn-uwf-local-summary-display)!important;
}
@media(max-width:767px){
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.entry-title,.post-title),
body.home :is(.primary-widgets-area,.secondary-widgets-area,.above-footer-widgets-area)
.ascendoor-widget:is(:has(.grid-list-posts-wrapper),:has(.tile-posts-wrapper),:has(.list-posts-wrapper))
:is(.grid-list-posts-wrapper,.tile-posts-wrapper,.list-posts-wrapper)>.blog-post-container:first-child
:is(.entry-title,.post-title) a{font-size:var(--jnn-uwf-local-title-size-mobile)!important;}
}
/* =========================================================
JNN CATEGORY PAGE FEATURED IMAGE DARK RAISED SHADOW
========================================================= */
:root {
/* Shadow Control */
--jnn-cat-image-shadow:
0 8px 22px rgba(0, 0, 0, 0.90);
/* Image Boundary */
--jnn-cat-image-border:
1px solid rgba(0, 0, 0, 0.80);
/* Corner Radius */
--jnn-cat-image-radius: 30px;
}
/* ONLY CATEGORY PAGE FEATURED IMAGES */
body.category .post-thumbnail img,
body.category .post-thumb img,
body.category .entry-thumbnail img,
body.category .featured-image img {
display: block;
border:
var(--jnn-cat-image-border) !important;
border-radius:
var(--jnn-cat-image-radius) !important;
box-shadow:
var(--jnn-cat-image-shadow) !important;
}
/* =========================================================
JNN CATEGORY TITLE CENTER + BLACK BORDER + DARK SHADOW
FINAL OVERRIDE
========================================================= */
:root {
/* Border */
--jnn-cat-title-border-width: 1.5px;
/* Border color */
--jnn-cat-title-border-color: #222222;
/* Shadow darkness */
--jnn-cat-title-shadow-color: rgba(0, 0, 0, 0.62);
/* Shadow blur */
--jnn-cat-title-shadow-blur: 18px;
/* Shadow */
--jnn-cat-title-shadow-y: 8px;
}
/* Category white box */
body.category .site-main .page-header,
body.category .site-main .archive-header,
body.archive.category .site-main .page-header,
body.archive.category .site-main .archive-header {
text-align: center !important;
border:
var(--jnn-cat-title-border-width)
solid
var(--jnn-cat-title-border-color) !important;
box-shadow:
0
var(--jnn-cat-title-shadow-y)
var(--jnn-cat-title-shadow-blur)
var(--jnn-cat-title-shadow-color) !important;
/* raised effect */
filter:
drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15)) !important;
}
/* Category: center */
body.category .site-main .page-header .page-title,
body.category .site-main .archive-header .page-title,
body.archive.category .site-main .page-header .page-title {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* JNN v5.6.5U1 END */
/* =========================================================
JNN FRAMEWORK v5.6.5U8
ACTUAL WHITE-SURFACE GAP ENGINE - PRODUCTION LOCK
ROOT PRINCIPLE
Visible gap is owned by the ACTUAL visible surface:
- Pre-Ad white cards
- Advertisement block
- Post-Ad white cards
Outer wrappers are layout-only and contribute ZERO spacing.
========================================================= */
:root {
/* -----------------------------------------------------
HVG-001 to HVG-004 - EXTERNAL VISIBLE GAP CONTROLS
----------------------------------------------------- */
/* HVG-001: white-card to white-card gap BEFORE Advertisement */
--jnn-pre-ad-visible-gap: -2px;
/* HVG-002: Kaam Ki Baat white-card -> Advertisement */
--jnn-ad-gap-top: 7px;
/* HVG-003: Advertisement -> first section below */
--jnn-ad-gap-bottom: -12px;
/* HVG-004: white-card to white-card gap AFTER Advertisement */
--jnn-post-ad-visible-gap: 6px;
/* -----------------------------------------------------
HVG-005 to HVG-010 - VERTICAL SURFACE PADDING
These change whitespace INSIDE the visible surface,
not the yellow external gap.
----------------------------------------------------- */
/* HVG-005 */
--jnn-pre-ad-white-pad-top: var(--jnn-card-pad-top);
/* HVG-006 */
--jnn-pre-ad-white-pad-bottom: var(--jnn-card-pad-bottom);
/* HVG-007 */
--jnn-ad-inner-pad-top: 0px;
/* HVG-008 */
--jnn-ad-inner-pad-bottom: 0px;
/* HVG-009 */
--jnn-post-ad-white-pad-top: var(--jnn-card-pad-top);
/* HVG-010 */
--jnn-post-ad-white-pad-bottom: var(--jnn-card-pad-bottom);
}
/* =========================================================
U8-A - OUTER WRAPPERS ARE LAYOUT-ONLY
Neutralizes the old global .widget margin/padding owner.
display:flow-root prevents child margins from collapsing
through the outer widget shell.
========================================================= */
body.home .news-storm-main-wrapper
:is(.primary-widgets-area,.secondary-widgets-area)
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .news-storm-main-wrapper
.above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]) {
display: flow-root !important;
margin: 0 !important;
/* Vertical shell spacing is neutralized.
Horizontal padding is intentionally NOT reset here,
so the approved left/right widget inset survives. */
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Widget-area / section wrappers contribute no vertical gap. */
body.home .news-storm-main-wrapper :is(
.main-widget-area,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
),
body.home .news-storm-main-wrapper
.above-footer-widgets-area > .section-wrapper {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
row-gap: 0 !important;
}
/* =========================================================
U8-B - PRE-ADVERTISEMENT ACTUAL WHITE SURFACES
========================================================= */
/* Hero and Trending are themselves actual white surfaces. */
body.home #news_storm_banner_section
.banner-container-wrapper > .banner-main-part,
body.home #news_storm_banner_section
.banner-container-wrapper > .editors-choice,
body.home #news_storm_banner_section
.banner-container-wrapper > .jnn-home-pre-ad-section,
body.home #news_storm_banner_section
.banner-container-wrapper > [data-jnn-home-zone="pre-ad"] {
margin-top: 0 !important;
margin-bottom: var(--jnn-pre-ad-visible-gap) !important;
padding-top: var(--jnn-pre-ad-white-pad-top) !important;
padding-bottom: var(--jnn-pre-ad-white-pad-bottom) !important;
}
/* Featured outer parent contains BOTH Kaam Ki Baat and Advertisement.
It must NEVER add a gap of its own. */
body.home #news_storm_banner_section
.banner-container-wrapper > .featured-posts {
margin: 0 !important;
padding: 0 !important;
}
/* Preferred live PHP white-card owner.
No bottom margin here: Advertisement top gap owns that boundary. */
body.home #news_storm_banner_section
.featured-posts > .jnn-section-card {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: var(--jnn-pre-ad-white-pad-top) !important;
padding-bottom: var(--jnn-pre-ad-white-pad-bottom) !important;
}
/* CSS fallback structure: title + story-list are one visual card.
The bottom half must also contribute ZERO external margin. */
body.home #news_storm_banner_section
.featured-posts > .title-heading {
margin-bottom: 0 !important;
padding-top: var(--jnn-pre-ad-white-pad-top) !important;
}
body.home #news_storm_banner_section
.featured-posts > .featured-posts-wrap {
margin-bottom: 0 !important;
padding-bottom: var(--jnn-pre-ad-white-pad-bottom) !important;
}
/* =========================================================
U8-C - ADVERTISEMENT ACTUAL BLOCK
Independent TOP and BOTTOM controls.
No parent margin participates.
========================================================= */
body.home #news_storm_banner_section
.featured-posts > .banner-promo-area,
body.home #news_storm_banner_section
.featured-posts > [data-jnn-home-zone="ad"] {
margin-top: var(--jnn-ad-gap-top) !important;
margin-right: 0 !important;
margin-bottom: var(--jnn-ad-gap-bottom) !important;
margin-left: 0 !important;
padding-top: var(--jnn-ad-inner-pad-top) !important;
padding-bottom: var(--jnn-ad-inner-pad-bottom) !important;
}
/* =========================================================
U8-D - POST-ADVERTISEMENT ACTUAL WHITE SURFACES
The white card itself owns the visible bottom gap.
========================================================= */
/* Grid/Bokaro outer wrappers contribute ZERO gap. */
body.home #news_storm_grid_section,
body.home #news_storm_grid_section > .section-wrapper {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Grid actual white card. */
body.home #news_storm_grid_section
> .section-wrapper
> .main-container-wrap {
margin-top: 0 !important;
margin-bottom: var(--jnn-post-ad-visible-gap) !important;
padding-top: var(--jnn-post-ad-white-pad-top) !important;
padding-bottom: var(--jnn-post-ad-white-pad-bottom) !important;
}
/* All current/future standard widgets: actual white card owner. */
body.home .news-storm-main-wrapper
:is(.primary-widgets-area,.secondary-widgets-area)
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"])
> .main-container-wrap,
body.home .news-storm-main-wrapper
.above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"])
> .main-container-wrap,
body.home .news-storm-main-wrapper
.jnn-home-post-ad-section > .main-container-wrap,
body.home .news-storm-main-wrapper
[data-jnn-home-zone="post-ad"] > .main-container-wrap {
margin-top: 0 !important;
margin-bottom: var(--jnn-post-ad-visible-gap) !important;
padding-top: var(--jnn-post-ad-white-pad-top) !important;
padding-bottom: var(--jnn-post-ad-white-pad-bottom) !important;
}
/* Area transitions add ZERO spacing. */
body.home .news-storm-main-wrapper
.main-widget-area > :is(.primary-widgets-area,.secondary-widgets-area),
body.home .news-storm-main-wrapper
> .above-footer-widgets-area {
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
row-gap: 0 !important;
}
/* =========================================================
U8-E - FUTURE SECTION HOOKS
Standard new WordPress/Ascendoor widgets placed in Primary,
Secondary or Above Footer need NO extra class.
A completely custom PHP section should use ONE hook:
class="jnn-home-pre-ad-section" before Advertisement
class="jnn-home-post-ad-section" after Advertisement
or data-jnn-home-zone="pre-ad|post-ad|ad"
========================================================= */
/* =========================================================
JNN v5.6.5U8 - ACTUAL WHITE-SURFACE GAP ENGINE END
========================================================= */
/* =========================================================
JNN v5.6.5U8R1 - HORIZONTAL INSET RESTORE
FIX:
U8-A no longer resets left/right widget padding.
Only vertical outer padding is zeroed.
This restores Ranchi-through-Crime horizontal inset while
preserving the U8 actual-white-surface gap engine.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.5U9
CATEGORY HEADER HEIGHT + TRUE STORY GAP ENGINE
CATEGORY PAGES ONLY
========================================================= */
:root {
/* CAT-007: Category name white-box TOP padding */
--jnn-category-header-pad-top: 9px;
/* CAT-008: Category name white-box BOTTOM padding */
--jnn-category-header-pad-bottom: 9px;
/* CAT-009: Category header box -> first story gap */
--jnn-category-header-story-gap: 17px;
/* CAT-010: Actual white story-card -> next story-card gap */
--jnn-category-story-visible-gap: -7px;
}
/* Category title white box: existing universal card padding was making it tall.
Override vertical padding only; preserve approved left/right padding. */
body.category .site-main > :is(.page-header,.archive-header),
body.archive.category .site-main > :is(.page-header,.archive-header) {
padding-top: var(--jnn-category-header-pad-top) !important;
padding-bottom: var(--jnn-category-header-pad-bottom) !important;
margin-top: var(--jnn-category-top-space) !important;
margin-bottom: var(--jnn-category-header-story-gap) !important;
}
/* Remove heading's own vertical margin from box-height calculation. */
body.category .site-main > :is(.page-header,.archive-header) .page-title,
body.archive.category .site-main > :is(.page-header,.archive-header) .page-title {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* True category story spacing:
actual article white card owns the visible gap.
This intentionally overrides CAT-005 and responsive CAT-005 values. */
body.category .site-main > article,
body.archive.category .site-main > article,
body.category .archive-posts-wrapper > article {
margin-top: 0 !important;
margin-bottom: var(--jnn-category-story-visible-gap) !important;
}
/* If theme wraps article cards in a direct archive item, use same owner. */
body.category .archive-posts-wrapper > :is(
.post,
.type-post,
.blog-post-container,
.post-item
) {
margin-top: 0 !important;
margin-bottom: var(--jnn-category-story-visible-gap) !important;
}
/* =========================================================
JNN v5.6.5U9 CATEGORY GAP LOCK END
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.5U9R1
CATEGORY TRUE STORY GAP OWNER - HOTFIX
========================================================= */
/* Exact original Category spacing owner. */
body.category .archive-posts-wrapper > *,
body.archive.category .archive-posts-wrapper > *,
body.category .site-main article,
body.archive.category .site-main article {
margin-top: 0 !important;
margin-bottom: var(--jnn-category-story-visible-gap) !important;
}
/* Avoid double gap when an article is nested inside a direct archive item. */
body.category .archive-posts-wrapper > * > article,
body.archive.category .archive-posts-wrapper > * > article {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
JNN v5.6.5U9R1 - CATEGORY TRUE STORY GAP END
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.5U10R2
INNER GREY TITLE ELEVATION ENGINE
PRODUCTION LOCK
========================================================= */
:root {
/* HTE-001: shadow only for the grey title-name box */
--jnn-home-title-box-shadow: 0 3px 7px rgba(0,0,0,0);
}
/* Exact grey title elements only.
View All remains outside and receives no shadow.
The horizontal red line is the title pseudo-element, so it
stays attached to the same elevated title block. */
body.home #news_storm_banner_section
:is(.editors-choice,.featured-posts)
> .title-heading
> .section-title,
body.home #news_storm_grid_section
.main-container-wrap
> .title-heading
> .section-title,
body.home :is(.main-widget-area,.above-footer-widgets-area)
.ascendoor-widget
> .main-container-wrap
> .title-heading
> .widget-title {
box-shadow: var(--jnn-home-title-box-shadow) !important;
}
/* Explicitly keep the complete title row and View All shadow-free. */
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.news-storm-main-wrapper
) .title-heading,
body.home :is(
#news_storm_banner_section,
#news_storm_grid_section,
.news-storm-main-wrapper
) .title-heading > .view-all {
box-shadow: none !important;
}
/* =========================================================
JNN v5.6.5U10R2 INNER GREY TITLE ELEVATION END
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-001
UNIVERSAL VISUAL OWNERSHIP MAPPING ENGINE
STATUS: PRODUCTION FOUNDATION
========================================================= */
body.home :is(
[data-jnn-slot],[data-jnn-zone],[data-jnn-component],
#news_storm_banner_section,#news_storm_grid_section,
.primary-widgets-area,.secondary-widgets-area,
.above-footer-widgets-area
) {
--jnn-uvo-runtime-active: var(--jnn-uvo-active);
--jnn-uvo-slot-map-runtime: var(--jnn-uvo-slot-map-state);
--jnn-uvo-zone-map-runtime: var(--jnn-uvo-zone-map-state);
--jnn-uvo-component-map-runtime: var(--jnn-uvo-component-map-state);
--jnn-uvo-binding-bridge-runtime: var(--jnn-uvo-binding-bridge-state);
--jnn-uvo-existing-owner-runtime: var(--jnn-uvo-existing-owner-state);
--jnn-uvo-category-independent-runtime: var(--jnn-uvo-category-independent-state);
--jnn-uvo-mapping-mode-runtime: var(--jnn-uvo-mapping-mode);
}
body.home [data-jnn-visual-role] {
--jnn-uvo-runtime-active: var(--jnn-uvo-active);
--jnn-uvo-component-map-runtime: var(--jnn-uvo-component-map-state);
}
body.home :is([data-jnn-visual-role="section-card"],.jnn-section-card) {
--jnn-uvo-section-card-role-runtime: var(--jnn-uvo-section-card-role-state);
}
body.home [data-jnn-visual-role="section-title"] {
--jnn-uvo-section-title-role-runtime: var(--jnn-uvo-section-title-role-state);
}
body.home [data-jnn-visual-role="story-card"] {
--jnn-uvo-story-card-role-runtime: var(--jnn-uvo-story-card-role-state);
}
body.home [data-jnn-visual-role="featured-story"] {
--jnn-uvo-featured-story-role-runtime: var(--jnn-uvo-featured-story-role-state);
}
body.home [data-jnn-visual-role="standard-story"] {
--jnn-uvo-standard-story-role-runtime: var(--jnn-uvo-standard-story-role-state);
}
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-image-frame-role-runtime: var(--jnn-uvo-image-frame-role-state);
}
body.home [data-jnn-visual-role="view-all"] {
--jnn-uvo-view-all-role-runtime: var(--jnn-uvo-view-all-role-state);
}
body.home :is(
[data-jnn-visual-role="advertisement"],
#news_storm_banner_section .featured-posts > .banner-promo-area
) {
--jnn-uvo-advertisement-role-runtime: var(--jnn-uvo-advertisement-role-state);
}
body.home :is([data-jnn-visual-role="grid-section"],#news_storm_grid_section) {
--jnn-uvo-grid-role-runtime: var(--jnn-uvo-grid-role-state);
}
body.home :is(.primary-widgets-area,.secondary-widgets-area)
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home .above-footer-widgets-area > .section-wrapper
> :is(.widget,.ascendoor-widget,[class*="widget-"],[class*="-widget"]),
body.home [data-jnn-visual-role="widget-section"] {
--jnn-uvo-widget-role-runtime: var(--jnn-uvo-widget-role-state);
}
body.home :is(
[data-jnn-visual-role],[data-jnn-component],.jnn-section-card,
#news_storm_grid_section,.primary-widgets-area,
.secondary-widgets-area,.above-footer-widgets-area
) {
--jnn-uvo-conflict-guard-runtime: var(--jnn-uvo-conflict-guard-state);
}
/* UVO-001 ownership lock:
Existing approved visual variables and all numeric values remain
with their current owners. UVO-001 maps roles only.
No category name/slug/title/widget label is a permanent owner.
SBI/FMD/RSV locked ranges are not reopened or modified.
Parent theme modified: NO. Child-theme CSS only: YES. */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-002
UNIVERSAL SECTION CARD VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNER
Existing approved R1B-CARD-001 section-card rule remains untouched.
PURPOSE
- Give future structural section-card roles the approved card design.
- Reference existing approved card variables.
- Do not duplicate numeric/color/shadow values.
- Do not re-style current live selectors already owned by R1B/UCD.
- Keep category/widget names irrelevant.
========================================================= */
/* UVO-002A - Explicit future section-card role.
This is the only new visual consumer in UVO-002. */
body.home [data-jnn-visual-role="section-card"] {
--jnn-uvo-section-card-runtime-active:
var(--jnn-uvo-section-card-active);
display: var(--jnn-uvo-section-card-display) !important;
width: var(--jnn-uvo-section-card-width) !important;
max-width: var(--jnn-uvo-section-card-max-width) !important;
padding:
var(--jnn-uvo-section-card-pad-top)
var(--jnn-uvo-section-card-pad-right)
var(--jnn-uvo-section-card-pad-bottom)
var(--jnn-uvo-section-card-pad-left) !important;
background: var(--jnn-uvo-section-card-bg) !important;
border:
var(--jnn-uvo-section-card-border-width)
solid
var(--jnn-uvo-section-card-border-color) !important;
border-radius:
var(--jnn-uvo-section-card-radius) !important;
box-shadow:
var(--jnn-uvo-section-card-shadow) !important;
overflow:
var(--jnn-uvo-section-card-overflow) !important;
box-sizing:
var(--jnn-uvo-section-card-box-sizing) !important;
}
/* UVO-002B - Structural FMD/SBI compatibility marker */
body.home [data-jnn-component][data-jnn-visual-role="section-card"] {
--jnn-uvo-section-card-component-bound: 1;
}
/* UVO-002C - Existing .jnn-section-card preservation
Existing live .jnn-section-card stays under its approved R1B owner.
UVO-002 does not repeat that selector's visual declarations. */
body.home .jnn-section-card {
--jnn-uvo-section-card-existing-owner-preserved: 1;
}
/* UVO-002D - Future content replacement rule
Category, taxonomy, visible title and widget configuration may
change inside a section-card without changing its visual role. */
/* UVO-002E - No double-card rule
UVO-002 does not style outer widget wrappers or advertisement.
Existing transparent-wrapper and Advertisement rules remain owners. */
/* UVO-002F - Ownership boundary
Section title, View All, story cards, images and Advertisement
are intentionally excluded from UVO-002 visual ownership. */
/* UVO-002G - Production declaration
Existing UVO-001 through UVO-020 preserved.
New variable range: UVO-021 through UVO-036.
Existing SBI/FMD/RSV variables modified: NO.
Existing approved card variables modified: NO.
Existing tuned numbers / figures modified: NO.
Current live section-card visual selectors rewritten: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-003
UNIVERSAL SECTION TITLE / VIEW ALL VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNERS
- BU1-001 through BU1-005: approved Homepage title row.
- HTE-001: approved inner grey title-box shadow.
PURPOSE
- Give future structural title roles the same approved design.
- Reference existing approved variables.
- Keep current BU1 / HTE live selectors untouched.
- Never bind title ownership to category or widget text.
========================================================= */
/* UVO-003A - Explicit future title row */
body.home [data-jnn-visual-role="section-title-row"] {
--jnn-uvo-title-row-runtime:
var(--jnn-uvo-title-row-state);
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows:
auto
var(--jnn-uvo-title-line-offset-y) !important;
column-gap: var(--jnn-uvo-title-view-gap) !important;
row-gap: 0 !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
margin:
0
0
var(--jnn-uvo-title-content-gap) !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
box-shadow: none !important;
}
/* UVO-003B - Explicit future grey title-name box */
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="section-title"] {
--jnn-uvo-title-runtime-active:
var(--jnn-uvo-title-active);
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
width:
min(
var(--jnn-uvo-title-box-width),
100%
) !important;
max-width:
calc(
100%
- var(--jnn-uvo-view-all-space)
) !important;
min-width: 0 !important;
min-height: var(--jnn-uvo-title-box-height) !important;
margin: 0 !important;
padding:
var(--jnn-uvo-title-pad-y)
var(--jnn-uvo-title-pad-x)
var(--jnn-uvo-title-pad-y)
calc(
var(--jnn-uvo-title-pad-x)
+ var(--jnn-uvo-title-bar-width)
+ var(--jnn-uvo-title-bar-gap)
) !important;
color: var(--jnn-uvo-title-color) !important;
background: var(--jnn-uvo-title-box-bg) !important;
font-size: var(--jnn-uvo-title-font-size) !important;
font-weight: var(--jnn-uvo-title-font-weight) !important;
line-height: var(--jnn-uvo-title-line-height-text) !important;
border: 0 !important;
border-radius: var(--jnn-uvo-title-box-radius) !important;
box-shadow: var(--jnn-uvo-title-shadow) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* UVO-003C - Approved vertical red title bar */
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="section-title"]::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: var(--jnn-uvo-title-bar-width) !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jnn-uvo-title-bar-color) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* UVO-003D - Approved horizontal red line */
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="section-title"]::after {
content: "" !important;
display: block !important;
position: absolute !important;
left:
calc(
var(--jnn-uvo-title-bar-width)
+ var(--jnn-uvo-title-line-gap-x)
) !important;
bottom:
calc(
-1
* var(--jnn-uvo-title-line-offset-y)
) !important;
width:
calc(
100%
- var(--jnn-uvo-title-bar-width)
- var(--jnn-uvo-title-line-gap-x)
) !important;
height: var(--jnn-uvo-title-line-height) !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jnn-uvo-title-bar-color) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* UVO-003E - Explicit future View All */
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="view-all"] {
--jnn-uvo-view-all-runtime:
var(--jnn-uvo-view-all-state);
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
display: inline-flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
align-self: end !important;
width: auto !important;
max-width: var(--jnn-uvo-view-all-space) !important;
margin:
0
0
var(--jnn-uvo-view-all-offset-y)
0 !important;
padding: 0 !important;
color: inherit !important;
font-size: var(--jnn-uvo-view-all-size) !important;
line-height: 1 !important;
font-weight: 500 !important;
white-space: nowrap !important;
position: relative !important;
inset: auto !important;
transform: none !important;
z-index: 3 !important;
box-shadow: none !important;
}
/* UVO-003F - Mobile inheritance */
@media screen and (max-width: 767px) {
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="section-title"] {
width:
var(--jnn-uvo-title-box-width-mobile) !important;
max-width:
calc(
100%
- var(--jnn-uvo-view-all-space-mobile)
) !important;
}
body.home
[data-jnn-visual-role="section-title-row"]
> [data-jnn-visual-role="view-all"] {
max-width:
var(--jnn-uvo-view-all-space-mobile) !important;
font-size:
var(--jnn-uvo-view-all-size) !important;
}
}
/* UVO-003G - Existing owner preservation
Existing .title-heading / .section-title / .widget-title / .view-all
live visual declarations remain under BU1 and HTE ownership.
UVO-003 does not append those existing live selectors here. */
/* UVO-003H - Category/widget-name independence
A future section may render any category/widget while retaining
section-title-row / section-title / view-all structural roles. */
/* UVO-003I - Ownership boundary
Section card, story card, image frame and Advertisement are not
visually owned by UVO-003. */
/* UVO-003J - Production declaration
Existing UVO-001 through UVO-036 preserved.
New variable range: UVO-037 through UVO-064.
Existing BU1 / HTE values modified: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
Existing live title selectors rewritten: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-004
UNIVERSAL STORY CARD VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNER
R1B-STORY-001 remains the approved live Homepage story-card owner.
SOURCE VARIABLES
UCD-016 through UCD-022 remain authoritative.
PURPOSE
- Give future structural story roles the approved light-card design.
- Reference existing approved story-card variables.
- Keep current R1B live selectors untouched.
- Keep story-card ownership independent of category/widget names.
========================================================= */
/* UVO-004A - Explicit future story-card visual role */
body.home [data-jnn-visual-role="story-card"] {
--jnn-uvo-story-runtime-active:
var(--jnn-uvo-story-active);
--jnn-uvo-story-card-runtime:
var(--jnn-uvo-story-card-state);
min-width: var(--jnn-uvo-story-min-width) !important;
background:
var(--jnn-uvo-story-bg) !important;
border:
var(--jnn-uvo-story-border-width)
solid
var(--jnn-uvo-story-border-color) !important;
border-radius:
var(--jnn-uvo-story-radius) !important;
padding:
var(--jnn-uvo-story-pad-y)
var(--jnn-uvo-story-pad-x) !important;
margin-top:
var(--jnn-uvo-story-margin-top) !important;
margin-bottom:
var(--jnn-uvo-story-gap) !important;
box-shadow:
var(--jnn-uvo-story-shadow) !important;
overflow:
var(--jnn-uvo-story-overflow) !important;
box-sizing:
var(--jnn-uvo-story-box-sizing) !important;
}
/* UVO-004B - Standard-story role inherits story-card ownership */
body.home
[data-jnn-visual-role="standard-story"] {
--jnn-uvo-standard-story-runtime:
var(--jnn-uvo-standard-story-state);
--jnn-uvo-story-runtime-active:
var(--jnn-uvo-story-active);
}
/* UVO-004C - Featured-story role inherits same card shell
Headline typography remains outside UVO-004 ownership. */
body.home
[data-jnn-visual-role="featured-story"] {
--jnn-uvo-featured-story-runtime:
var(--jnn-uvo-featured-story-state);
--jnn-uvo-story-runtime-active:
var(--jnn-uvo-story-active);
}
/* UVO-004D - Combined structural roles receive the approved card shell */
body.home :is(
[data-jnn-visual-role="standard-story"],
[data-jnn-visual-role="featured-story"]
):not([data-jnn-visual-role="story-card"]) {
min-width: var(--jnn-uvo-story-min-width) !important;
background:
var(--jnn-uvo-story-bg) !important;
border:
var(--jnn-uvo-story-border-width)
solid
var(--jnn-uvo-story-border-color) !important;
border-radius:
var(--jnn-uvo-story-radius) !important;
padding:
var(--jnn-uvo-story-pad-y)
var(--jnn-uvo-story-pad-x) !important;
margin-top:
var(--jnn-uvo-story-margin-top) !important;
margin-bottom:
var(--jnn-uvo-story-gap) !important;
box-shadow:
var(--jnn-uvo-story-shadow) !important;
overflow:
var(--jnn-uvo-story-overflow) !important;
box-sizing:
var(--jnn-uvo-story-box-sizing) !important;
}
/* UVO-004E - Explicit future story-list row-gap owner */
body.home [data-jnn-visual-role="story-list"] {
--jnn-uvo-story-row-gap-runtime:
var(--jnn-uvo-story-row-gap-state);
row-gap:
var(--jnn-uvo-story-gap) !important;
}
/* UVO-004F - FMD/SBI component compatibility */
body.home
[data-jnn-component]
[data-jnn-visual-role="story-card"] {
--jnn-uvo-story-component-bound: 1;
}
/* UVO-004G - Existing live owner preservation
Current Editors/Featured/Grid/Ascendoor .blog-post-container
visual declarations stay under R1B-STORY-001 ownership. */
body.home .blog-post-container {
--jnn-uvo-story-existing-owner-runtime:
var(--jnn-uvo-story-existing-owner-state);
}
/* UVO-004H - Category independence */
body.home :is(
[data-jnn-visual-role="story-card"],
[data-jnn-visual-role="standard-story"],
[data-jnn-visual-role="featured-story"]
) {
--jnn-uvo-story-category-independent-runtime:
var(--jnn-uvo-story-category-independent-state);
}
/* UVO-004I - Ownership exclusions
Headline typography, image-frame, metadata, section-title,
View All and Advertisement are not visually owned here. */
/* UVO-004J - No double-card rule
UVO-004 does not style section-card or outer widget wrappers. */
/* UVO-004K - Production declaration
Existing UVO-001 through UVO-064 preserved.
New variable range: UVO-065 through UVO-084.
Existing R1B/UCD values modified: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
Existing live story selectors rewritten: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-005
UNIVERSAL IMAGE FRAME VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNER
WDG-006 remains the approved widget image owner.
PURPOSE
- Give future structural image roles the approved image behavior.
- Reference existing WDG-006 variables.
- Keep current live widget image selectors untouched.
- Keep image ownership independent of category/widget names.
========================================================= */
/* UVO-005A - Explicit future image frame */
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-image-runtime-active:
var(--jnn-uvo-image-active);
--jnn-uvo-image-frame-runtime:
var(--jnn-uvo-image-frame-state);
max-width:
var(--jnn-uvo-image-max-width) !important;
overflow:
var(--jnn-uvo-image-overflow) !important;
border-radius:
var(--jnn-uvo-image-radius) !important;
box-sizing:
var(--jnn-uvo-image-box-sizing) !important;
}
/* UVO-005B - Image link inheritance */
body.home
[data-jnn-visual-role="image-frame"]
> a {
display:
var(--jnn-uvo-image-link-display) !important;
max-width:
var(--jnn-uvo-image-link-max-width) !important;
overflow: inherit !important;
border-radius: inherit !important;
}
/* UVO-005C - Image element */
body.home
[data-jnn-visual-role="image-frame"]
img {
--jnn-uvo-image-element-runtime:
var(--jnn-uvo-image-element-state);
display:
var(--jnn-uvo-image-display) !important;
width:
var(--jnn-uvo-image-width) !important;
max-width:
var(--jnn-uvo-image-max-width) !important;
height:
var(--jnn-uvo-image-height) !important;
object-fit:
var(--jnn-uvo-image-fit) !important;
object-position:
var(--jnn-uvo-image-position) !important;
}
/* UVO-005D - Explicit thumbnail ratio role */
body.home
[data-jnn-visual-role="image-frame"]
[data-jnn-image-ratio="thumbnail"] {
--jnn-uvo-image-thumb-runtime:
var(--jnn-uvo-image-thumb-state);
aspect-ratio:
var(--jnn-uvo-image-thumb-ratio) !important;
}
body.home
[data-jnn-visual-role="image-frame"]
[data-jnn-image-ratio="thumbnail"]
img {
width: 100% !important;
height: 100% !important;
object-fit:
var(--jnn-uvo-image-thumb-fit) !important;
}
/* UVO-005E - Explicit square ratio role */
body.home
[data-jnn-visual-role="image-frame"]
[data-jnn-image-ratio="square"] {
--jnn-uvo-image-square-runtime:
var(--jnn-uvo-image-square-state);
aspect-ratio:
var(--jnn-uvo-image-square-ratio) !important;
}
body.home
[data-jnn-visual-role="image-frame"]
[data-jnn-image-ratio="square"]
img {
width: 100% !important;
height: 100% !important;
object-fit:
var(--jnn-uvo-image-fit) !important;
}
/* UVO-005F - Lazy image state */
body.home
[data-jnn-visual-role="image-frame"]
img[loading="lazy"] {
opacity:
var(--jnn-uvo-image-lazy-opacity) !important;
}
/* UVO-005G - Hover inheritance only on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
body.home
[data-jnn-visual-role="image-frame"]
img {
transition:
transform
var(--jnn-uvo-image-transition) !important;
}
body.home
[data-jnn-visual-role="image-frame"]:hover
img {
--jnn-uvo-image-hover-runtime:
var(--jnn-uvo-image-hover-state);
transform:
scale(
var(--jnn-uvo-image-hover-scale)
) !important;
}
}
/* UVO-005H - FMD/SBI component compatibility */
body.home
[data-jnn-component]
[data-jnn-visual-role="image-frame"] {
--jnn-uvo-image-component-bound: 1;
}
/* UVO-005I - Existing WDG owner preservation */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area
) .widget :is(
.post-thumbnail,
.featured-image,
.widget-image,
[class*="post-thumb"],
[class*="featured-image"]
) {
--jnn-uvo-image-existing-owner-runtime:
var(--jnn-uvo-image-existing-owner-state);
}
/* UVO-005J - Category independence */
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-image-category-independent-runtime:
var(--jnn-uvo-image-category-independent-state);
}
/* UVO-005K - Ownership exclusions
Story-card shell, headline typography, metadata, section title,
View All and Advertisement remain outside UVO-005 ownership. */
/* UVO-005L - No implicit ratio rule
Thumbnail/square ratios require explicit data-jnn-image-ratio.
UVO-005 does not force one ratio on every future image. */
/* UVO-005M - Production declaration
Existing UVO-001 through UVO-084 preserved.
New variable range: UVO-085 through UVO-110.
Existing WDG-006 values modified: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
Existing live widget image selectors rewritten: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-006
UNIVERSAL ADVERTISEMENT VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNERS
- HVG-002: Advertisement top visible gap.
- HVG-003: Advertisement bottom visible gap.
- HVG-007: Advertisement inner top padding.
- HVG-008: Advertisement inner bottom padding.
- Existing Advertisement shell rules remain approved live owners.
PURPOSE
- Give future structural Advertisement roles the approved spacing.
- Preserve the transparent/no-card Advertisement shell.
- Keep current .banner-promo-area rules untouched.
- Keep Advertisement ownership independent of category content.
========================================================= */
/* UVO-006A - Explicit future Advertisement role */
body.home [data-jnn-visual-role="advertisement"] {
--jnn-uvo-ad-runtime-active:
var(--jnn-uvo-ad-active);
--jnn-uvo-ad-role-runtime:
var(--jnn-uvo-ad-role-state);
width:
var(--jnn-uvo-ad-width) !important;
max-width:
var(--jnn-uvo-ad-max-width) !important;
margin-top:
var(--jnn-uvo-ad-gap-top) !important;
margin-right: 0 !important;
margin-bottom:
var(--jnn-uvo-ad-gap-bottom) !important;
margin-left: 0 !important;
padding-top:
var(--jnn-uvo-ad-pad-top) !important;
padding-right:
var(--jnn-uvo-ad-pad-inline) !important;
padding-bottom:
var(--jnn-uvo-ad-pad-bottom) !important;
padding-left:
var(--jnn-uvo-ad-pad-inline) !important;
background:
var(--jnn-uvo-ad-bg) !important;
border:
var(--jnn-uvo-ad-border-width)
solid
transparent !important;
border-radius:
var(--jnn-uvo-ad-radius) !important;
box-shadow:
var(--jnn-uvo-ad-shadow) !important;
overflow:
var(--jnn-uvo-ad-overflow) !important;
box-sizing:
var(--jnn-uvo-ad-box-sizing) !important;
}
/* UVO-006B - SBI/FMD Advertisement bridge */
body.home
[data-jnn-component="advertisement"]
[data-jnn-visual-role="advertisement"] {
--jnn-uvo-ad-sbi-bridge-runtime:
var(--jnn-uvo-ad-sbi-bridge-state);
--jnn-uvo-ad-boundary-runtime:
var(--jnn-uvo-ad-boundary-state);
}
/* UVO-006C - Existing live Advertisement owner preservation */
body.home
#news_storm_banner_section
.featured-posts
> .banner-promo-area {
--jnn-uvo-ad-existing-owner-runtime:
var(--jnn-uvo-ad-existing-owner-state);
}
/* UVO-006D - Category independence */
body.home [data-jnn-visual-role="advertisement"] {
--jnn-uvo-ad-category-independent-runtime:
var(--jnn-uvo-ad-category-independent-state);
}
/* UVO-006E - Boundary ownership rule
Advertisement owns only its own approved top/bottom external
gap and its own inner top/bottom padding.
Pre-Ad and Post-Ad white-card gaps keep their HVG owners. */
/* UVO-006F - No white-card inheritance
Advertisement must never inherit section-card or story-card
background/border/shadow ownership. */
/* UVO-006G - Ownership exclusions
Section-card, title-row, View All, story-card, image-frame,
headline typography and metadata remain outside UVO-006. */
/* UVO-006H - Production declaration
Existing UVO-001 through UVO-110 preserved.
New variable range: UVO-111 through UVO-130.
Existing HVG values modified: NO.
Existing Advertisement live selectors rewritten: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-007
UNIVERSAL GRID / WIDGET LAYOUT VISUAL OWNERSHIP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
SOURCE OWNER
WDG responsive widget layout variables remain authoritative.
PURPOSE
- Give future grid/widget structural roles approved layout behavior.
- Reference existing WDG columns, minimums, gaps and section spacing.
- Keep section-card shell ownership in UVO-002.
- Keep story-card shell ownership in UVO-004.
- Keep current live WDG selectors untouched.
========================================================= */
/* UVO-007A - Explicit future grid layout */
body.home
[data-jnn-visual-role="grid-section"]
[data-jnn-layout="grid"] {
--jnn-uvo-layout-runtime-active:
var(--jnn-uvo-layout-active);
display: grid !important;
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-desktop),
minmax(
var(--jnn-uvo-layout-grid-min-desktop),
1fr
)
) !important;
gap:
var(--jnn-uvo-layout-gap-desktop) !important;
row-gap:
var(--jnn-uvo-layout-row-gap-desktop) !important;
column-gap:
var(--jnn-uvo-layout-column-gap-desktop) !important;
width:
var(--jnn-uvo-layout-width) !important;
max-width:
var(--jnn-uvo-layout-max-width) !important;
min-width:
var(--jnn-uvo-layout-item-min-width) !important;
overflow-x:
var(--jnn-uvo-layout-overflow-x) !important;
overflow-y:
var(--jnn-uvo-layout-overflow-y) !important;
box-sizing: border-box !important;
}
/* UVO-007B - Explicit future widget layout */
body.home
[data-jnn-visual-role="widget-section"]
[data-jnn-layout="grid"] {
--jnn-uvo-layout-runtime-active:
var(--jnn-uvo-layout-active);
display: grid !important;
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-desktop),
minmax(
var(--jnn-uvo-layout-grid-min-desktop),
1fr
)
) !important;
gap:
var(--jnn-uvo-layout-gap-desktop) !important;
row-gap:
var(--jnn-uvo-layout-row-gap-desktop) !important;
column-gap:
var(--jnn-uvo-layout-column-gap-desktop) !important;
width:
var(--jnn-uvo-layout-width) !important;
max-width:
var(--jnn-uvo-layout-max-width) !important;
min-width:
var(--jnn-uvo-layout-item-min-width) !important;
overflow-x:
var(--jnn-uvo-layout-overflow-x) !important;
overflow-y:
var(--jnn-uvo-layout-overflow-y) !important;
box-sizing: border-box !important;
}
/* UVO-007C - Child item safety */
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout="grid"]
> * {
min-width:
var(--jnn-uvo-layout-item-min-width) !important;
max-width:
var(--jnn-uvo-layout-item-max-width) !important;
box-sizing: border-box !important;
}
/* UVO-007D - Laptop */
@media screen and (max-width: 1199px) {
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout="grid"] {
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-laptop),
minmax(
var(--jnn-uvo-layout-grid-min-laptop),
1fr
)
) !important;
gap:
var(--jnn-uvo-layout-gap-laptop) !important;
}
}
/* UVO-007E - Tablet */
@media screen and (max-width: 991px) {
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout="grid"] {
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-tablet),
minmax(
var(--jnn-uvo-layout-grid-min-tablet),
1fr
)
) !important;
gap:
var(--jnn-uvo-layout-gap-tablet) !important;
row-gap:
var(--jnn-uvo-layout-row-gap-tablet) !important;
column-gap:
var(--jnn-uvo-layout-column-gap-tablet) !important;
}
body.home [data-jnn-visual-role="widget-section"] {
margin-bottom:
var(--jnn-uvo-layout-section-space-tablet) !important;
}
}
/* UVO-007F - Mobile */
@media screen and (max-width: 767px) {
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout="grid"] {
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-mobile),
minmax(
var(--jnn-uvo-layout-grid-min-mobile),
1fr
)
) !important;
gap:
var(--jnn-uvo-layout-gap-mobile) !important;
row-gap:
var(--jnn-uvo-layout-row-gap-mobile) !important;
column-gap:
var(--jnn-uvo-layout-column-gap-mobile) !important;
}
body.home [data-jnn-visual-role="widget-section"] {
margin-bottom:
var(--jnn-uvo-layout-section-space-mobile) !important;
}
}
/* UVO-007G - Small mobile */
@media screen and (max-width: 480px) {
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout="grid"] {
grid-template-columns:
repeat(
var(--jnn-uvo-layout-columns-small-mobile),
minmax(0, 1fr)
) !important;
gap:
var(--jnn-uvo-layout-gap-small-mobile) !important;
row-gap:
var(--jnn-uvo-layout-row-gap-small-mobile) !important;
}
}
/* UVO-007H - Desktop widget section rhythm */
@media screen and (min-width: 992px) {
body.home [data-jnn-visual-role="widget-section"] {
margin-bottom:
var(--jnn-uvo-layout-section-space-desktop) !important;
}
}
/* UVO-007I - FMD/SBI compatibility */
body.home
[data-jnn-component]
:is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
) {
--jnn-uvo-layout-component-bound: 1;
}
/* UVO-007J - Existing owner preservation
Current News Storm Grid and Ascendoor widget layouts remain
under existing R1B / WDG live selectors.
UVO-007 does not append those live selectors here. */
/* UVO-007K - Category/widget independence
Grid/List/Tile configuration may change while structural role
remains grid-section or widget-section. */
/* UVO-007L - Ownership exclusions
Section-card shell, story-card shell, title-row, image-frame,
Advertisement, headline typography and metadata are excluded. */
/* UVO-007M - Production declaration
Existing UVO-001 through UVO-130 preserved.
New variable range: UVO-131 through UVO-162.
Existing WDG values modified: NO.
Existing R1B live selectors rewritten: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-008
VISUAL CONFLICT GUARD & OWNERSHIP PRIORITY ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Lock one permanent visual owner per structural role.
- Prevent future modules from using category/title text as owners.
- Preserve current R1B/BU1/HTE/WDG/HVG live owners.
- Keep UVO role boundaries explicit.
- Add guard metadata only; no visual value rewrite.
========================================================= */
/* UVO-008A - Section-card ownership */
body.home [data-jnn-visual-role="section-card"] {
--jnn-uvo-conflict-runtime-active:
var(--jnn-uvo-conflict-active);
--jnn-uvo-owner-section-card-runtime:
var(--jnn-uvo-owner-section-card-state);
--jnn-uvo-single-owner-runtime:
var(--jnn-uvo-single-owner-state);
--jnn-uvo-visual-owner: section-card;
}
/* UVO-008B - Title ownership */
body.home :is(
[data-jnn-visual-role="section-title-row"],
[data-jnn-visual-role="section-title"],
[data-jnn-visual-role="view-all"]
) {
--jnn-uvo-owner-title-runtime:
var(--jnn-uvo-owner-title-state);
--jnn-uvo-visual-owner: title-system;
}
/* UVO-008C - Story ownership */
body.home :is(
[data-jnn-visual-role="story-card"],
[data-jnn-visual-role="standard-story"],
[data-jnn-visual-role="featured-story"],
[data-jnn-visual-role="story-list"]
) {
--jnn-uvo-owner-story-runtime:
var(--jnn-uvo-owner-story-state);
--jnn-uvo-visual-owner: story-system;
}
/* UVO-008D - Image ownership */
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-owner-image-runtime:
var(--jnn-uvo-owner-image-state);
--jnn-uvo-visual-owner: image-system;
}
/* UVO-008E - Advertisement ownership */
body.home [data-jnn-visual-role="advertisement"] {
--jnn-uvo-owner-ad-runtime:
var(--jnn-uvo-owner-ad-state);
--jnn-uvo-visual-owner: advertisement-system;
}
/* UVO-008F - Grid / widget layout ownership */
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout] {
--jnn-uvo-owner-layout-runtime:
var(--jnn-uvo-owner-layout-state);
--jnn-uvo-visual-owner: layout-system;
}
/* UVO-008G - Section-card versus story-card boundary */
body.home
[data-jnn-visual-role="section-card"]
[data-jnn-component] {
--jnn-uvo-guard-card-story-runtime:
var(--jnn-uvo-guard-card-story-state);
--jnn-uvo-visual-boundary-runtime:
var(--jnn-uvo-visual-boundary-state);
}
/* UVO-008H - Section-card versus title boundary */
body.home
[data-jnn-visual-role="section-title-row"] {
--jnn-uvo-guard-card-title-runtime:
var(--jnn-uvo-guard-card-title-state);
}
/* UVO-008I - Story versus image boundary */
body.home
[data-jnn-visual-role="story-card"]
[data-jnn-component] {
--jnn-uvo-guard-story-image-runtime:
var(--jnn-uvo-guard-story-image-state);
}
/* UVO-008J - Advertisement versus white-card boundary */
body.home
[data-jnn-visual-role="advertisement"] {
--jnn-uvo-guard-ad-card-runtime:
var(--jnn-uvo-guard-ad-card-state);
}
/* UVO-008K - Layout versus section-card boundary */
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
) {
--jnn-uvo-guard-layout-card-runtime:
var(--jnn-uvo-guard-layout-card-state);
}
/* UVO-008L - Explicit role contract */
body.home [data-jnn-visual-role] {
--jnn-uvo-explicit-role-runtime:
var(--jnn-uvo-explicit-role-state);
--jnn-uvo-category-independent-runtime:
var(--jnn-uvo-category-independent-state);
--jnn-uvo-conflict-mode-runtime:
var(--jnn-uvo-conflict-mode);
}
/* UVO-008M - SBI/FMD bridge */
body.home
[data-jnn-component]
[data-jnn-visual-role] {
--jnn-uvo-sbi-bridge-runtime:
var(--jnn-uvo-sbi-bridge-state);
--jnn-uvo-fmd-bridge-runtime:
var(--jnn-uvo-fmd-bridge-state);
}
/* UVO-008N - Existing live-owner preservation */
body.home :is(
.jnn-section-card,
.blog-post-container,
#news_storm_grid_section,
.primary-widgets-area,
.secondary-widgets-area,
.above-footer-widgets-area,
.banner-promo-area
) {
--jnn-uvo-live-owner-preserve-runtime:
var(--jnn-uvo-live-owner-preserve-state);
}
/* UVO-008O - Fallback contract
Unknown future markup must not receive guessed visual ownership.
It must use an explicit data-jnn-visual-role value. */
body.home [data-jnn-component]:not([data-jnn-visual-role]) {
--jnn-uvo-fallback-runtime:
var(--jnn-uvo-fallback-state);
}
/* UVO-008P - Ownership matrix
section-card -> UVO-002
title-system -> UVO-003
story-system -> UVO-004
image-system -> UVO-005
advertisement -> UVO-006
layout-system -> UVO-007
UVO-008 owns conflict policy only. */
/* UVO-008Q - Category independence
Category name, slug, visible title, post title and widget label
remain forbidden as permanent visual owners. */
/* UVO-008R - Production declaration
Existing UVO-001 through UVO-162 preserved.
New variable range: UVO-163 through UVO-184.
Existing R1B/BU1/HTE/WDG/HVG values modified: NO.
Existing live visual selectors rewritten: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
New visual declarations added by UVO-008: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-009
VISUAL OWNERSHIP VALIDATION & REGRESSION SAFETY ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Validate all UVO visual ownership layers together.
- Expose regression-safety metadata for future deployments.
- Preserve current approved live owners and tuned values.
- Guard desktop/mobile ownership continuity.
- Add validation metadata only; no visual declarations.
========================================================= */
/* UVO-009A - Section-card validation */
body.home [data-jnn-visual-role="section-card"] {
--jnn-uvo-validation-runtime-active:
var(--jnn-uvo-validation-active);
--jnn-uvo-validation-section-card-runtime:
var(--jnn-uvo-validation-section-card-state);
--jnn-uvo-regression-card-runtime:
var(--jnn-uvo-regression-card-state);
}
/* UVO-009B - Title-system validation */
body.home :is(
[data-jnn-visual-role="section-title-row"],
[data-jnn-visual-role="section-title"],
[data-jnn-visual-role="view-all"]
) {
--jnn-uvo-validation-title-runtime:
var(--jnn-uvo-validation-title-state);
--jnn-uvo-regression-title-runtime:
var(--jnn-uvo-regression-title-state);
}
/* UVO-009C - Story-system validation */
body.home :is(
[data-jnn-visual-role="story-card"],
[data-jnn-visual-role="standard-story"],
[data-jnn-visual-role="featured-story"],
[data-jnn-visual-role="story-list"]
) {
--jnn-uvo-validation-story-runtime:
var(--jnn-uvo-validation-story-state);
--jnn-uvo-regression-story-runtime:
var(--jnn-uvo-regression-story-state);
}
/* UVO-009D - Image-system validation */
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-validation-image-runtime:
var(--jnn-uvo-validation-image-state);
--jnn-uvo-regression-image-runtime:
var(--jnn-uvo-regression-image-state);
}
/* UVO-009E - Advertisement validation */
body.home [data-jnn-visual-role="advertisement"] {
--jnn-uvo-validation-ad-runtime:
var(--jnn-uvo-validation-ad-state);
--jnn-uvo-regression-ad-runtime:
var(--jnn-uvo-regression-ad-state);
}
/* UVO-009F - Layout-system validation */
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout] {
--jnn-uvo-validation-layout-runtime:
var(--jnn-uvo-validation-layout-state);
--jnn-uvo-regression-layout-runtime:
var(--jnn-uvo-regression-layout-state);
}
/* UVO-009G - Conflict-policy validation */
body.home [data-jnn-visual-role] {
--jnn-uvo-validation-conflict-runtime:
var(--jnn-uvo-validation-conflict-state);
--jnn-uvo-validation-mode-runtime:
var(--jnn-uvo-validation-mode);
}
/* UVO-009H - Mobile regression certificate */
@media screen and (max-width: 767px) {
body.home [data-jnn-visual-role] {
--jnn-uvo-regression-mobile-runtime:
var(--jnn-uvo-regression-mobile-state);
}
}
/* UVO-009I - Desktop regression certificate */
@media screen and (min-width: 768px) {
body.home [data-jnn-visual-role] {
--jnn-uvo-regression-desktop-runtime:
var(--jnn-uvo-regression-desktop-state);
}
}
/* UVO-009J - Future standard widget certificate */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area
) > :is(
.widget,
.ascendoor-widget,
[class*="widget-"],
[class*="-widget"]
),
body.home
.above-footer-widgets-area
> .section-wrapper
> :is(
.widget,
.ascendoor-widget,
[class*="widget-"],
[class*="-widget"]
) {
--jnn-uvo-regression-future-widget-runtime:
var(--jnn-uvo-regression-future-widget-state);
}
/* UVO-009K - Custom PHP certificate */
body.home
[data-jnn-slot]
[data-jnn-zone]
[data-jnn-component]
[data-jnn-visual-role] {
--jnn-uvo-regression-custom-php-runtime:
var(--jnn-uvo-regression-custom-php-state);
}
/* UVO-009L - SBI/FMD/RSV architecture certificate */
body.home
[data-jnn-component]
[data-jnn-visual-role] {
--jnn-uvo-regression-sbi-runtime:
var(--jnn-uvo-regression-sbi-state);
--jnn-uvo-regression-fmd-runtime:
var(--jnn-uvo-regression-fmd-state);
--jnn-uvo-regression-rsv-runtime:
var(--jnn-uvo-regression-rsv-state);
}
/* UVO-009M - Production-ready certificate */
body.home
[data-jnn-visual-role] {
--jnn-uvo-production-ready-runtime:
var(--jnn-uvo-production-ready-state);
}
/* UVO-009N - Regression matrix
section-card -> UVO-002 validation
title-system -> UVO-003 validation
story-system -> UVO-004 validation
image-system -> UVO-005 validation
advertisement -> UVO-006 validation
layout-system -> UVO-007 validation
conflict -> UVO-008 validation
UVO-009 validates continuity only. */
/* UVO-009O - Existing owner protection
R1B, BU1, HTE, WDG, HVG live visual owners stay unchanged.
UVO-009 does not replace any existing selector or value. */
/* UVO-009P - Future deployment safety
A future section/category/widget is safe only when it uses
structural SBI/FMD identity and an explicit UVO visual role.
Unknown markup is not visually guessed. */
/* UVO-009Q - Category independence
Category name, slug, visible title, post title and widget label
remain forbidden as permanent visual owners. */
/* UVO-009R - Production declaration
Existing UVO-001 through UVO-184 preserved.
New variable range: UVO-185 through UVO-208.
Existing R1B/BU1/HTE/WDG/HVG values modified: NO.
Existing live visual selectors rewritten: NO.
Existing SBI/FMD/RSV values modified: NO.
Existing tuned numbers / figures modified: NO.
New visual declarations added by UVO-009: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.6.9
MODULE 26 - UNIVERSAL VISUAL OWNERSHIP ENGINE
ID: JNN-UVO-010
FINAL VALIDATION / RELEASE / PRODUCTION LOCK
STATUS: FINAL / RELEASED / LOCKED
=========================================================
FINAL UVO SEQUENCE
UVO-001 Universal Visual Ownership Mapping
UVO-002 Universal Section Card Visual Ownership
UVO-003 Universal Section Title / View All Visual Ownership
UVO-004 Universal Story Card Visual Ownership
UVO-005 Universal Image Frame Visual Ownership
UVO-006 Universal Advertisement Visual Ownership
UVO-007 Universal Grid / Widget Layout Visual Ownership
UVO-008 Visual Conflict Guard / Ownership Priority
UVO-009 Visual Ownership Validation / Regression Safety
UVO-010 Final Validation / Release / Production Lock
FINAL OWNERSHIP MATRIX
section-card -> UVO-002
title-system -> UVO-003
story-system -> UVO-004
image-system -> UVO-005
advertisement -> UVO-006
layout-system -> UVO-007
conflict -> UVO-008
regression -> UVO-009
final lock -> UVO-010
PERMANENT RULE
Category names, category slugs, visible headings, post titles
and widget labels are never permanent visual identities.
========================================================= */
/* UVO-010A - Final structural certificate */
body.home [data-jnn-visual-role] {
--jnn-uvo-final-runtime-active:
var(--jnn-uvo-final-active);
--jnn-uvo-final-index-runtime:
var(--jnn-uvo-final-index-state);
--jnn-uvo-final-control-runtime:
var(--jnn-uvo-final-control-state);
--jnn-uvo-final-registry-runtime:
var(--jnn-uvo-final-registry-state);
--jnn-uvo-final-single-owner-runtime:
var(--jnn-uvo-final-single-owner-state);
--jnn-uvo-final-category-independent-runtime:
var(--jnn-uvo-final-category-independent-state);
--jnn-uvo-final-production-lock-runtime:
var(--jnn-uvo-final-production-lock);
--jnn-uvo-final-release-runtime:
var(--jnn-uvo-final-release-state);
}
/* UVO-010B - Section-card certificate */
body.home [data-jnn-visual-role="section-card"] {
--jnn-uvo-final-section-card-runtime:
var(--jnn-uvo-final-section-card-state);
}
/* UVO-010C - Title-system certificate */
body.home :is(
[data-jnn-visual-role="section-title-row"],
[data-jnn-visual-role="section-title"],
[data-jnn-visual-role="view-all"]
) {
--jnn-uvo-final-title-runtime:
var(--jnn-uvo-final-title-state);
}
/* UVO-010D - Story-system certificate */
body.home :is(
[data-jnn-visual-role="story-card"],
[data-jnn-visual-role="standard-story"],
[data-jnn-visual-role="featured-story"],
[data-jnn-visual-role="story-list"]
) {
--jnn-uvo-final-story-runtime:
var(--jnn-uvo-final-story-state);
}
/* UVO-010E - Image certificate */
body.home [data-jnn-visual-role="image-frame"] {
--jnn-uvo-final-image-runtime:
var(--jnn-uvo-final-image-state);
}
/* UVO-010F - Advertisement certificate */
body.home [data-jnn-visual-role="advertisement"] {
--jnn-uvo-final-ad-runtime:
var(--jnn-uvo-final-ad-state);
}
/* UVO-010G - Layout certificate */
body.home :is(
[data-jnn-visual-role="grid-section"],
[data-jnn-visual-role="widget-section"]
)[data-jnn-layout] {
--jnn-uvo-final-layout-runtime:
var(--jnn-uvo-final-layout-state);
}
/* UVO-010H - Conflict / regression certificate */
body.home [data-jnn-visual-role] {
--jnn-uvo-final-conflict-runtime:
var(--jnn-uvo-final-conflict-state);
--jnn-uvo-final-regression-runtime:
var(--jnn-uvo-final-regression-state);
}
/* UVO-010I - SBI/FMD/RSV bridge certificate */
body.home
[data-jnn-component]
[data-jnn-visual-role] {
--jnn-uvo-final-sbi-runtime:
var(--jnn-uvo-final-sbi-state);
--jnn-uvo-final-fmd-runtime:
var(--jnn-uvo-final-fmd-state);
--jnn-uvo-final-rsv-runtime:
var(--jnn-uvo-final-rsv-state);
}
/* UVO-010J - Mobile certificate */
@media screen and (max-width: 767px) {
body.home [data-jnn-visual-role] {
--jnn-uvo-final-mobile-runtime:
var(--jnn-uvo-final-mobile-state);
}
}
/* UVO-010K - Desktop certificate */
@media screen and (min-width: 768px) {
body.home [data-jnn-visual-role] {
--jnn-uvo-final-desktop-runtime:
var(--jnn-uvo-final-desktop-state);
}
}
/* UVO-010L - Future standard widget certificate */
body.home :is(
.primary-widgets-area,
.secondary-widgets-area
) > :is(
.widget,
.ascendoor-widget,
[class*="widget-"],
[class*="-widget"]
),
body.home
.above-footer-widgets-area
> .section-wrapper
> :is(
.widget,
.ascendoor-widget,
[class*="widget-"],
[class*="-widget"]
) {
--jnn-uvo-final-future-widget-runtime:
var(--jnn-uvo-final-future-widget-state);
}
/* UVO-010M - Custom PHP certificate */
body.home
[data-jnn-slot]
[data-jnn-zone]
[data-jnn-component]
[data-jnn-visual-role] {
--jnn-uvo-final-custom-php-runtime:
var(--jnn-uvo-final-custom-php-state);
}
/* UVO-010N - Master synchronization certificate
Master Index: synchronized.
Master Control: synchronized.
Update Registry: synchronized.
UVO-001 through UVO-232: registered.
UVO-001 through UVO-010 sequence: complete. */
/* UVO-010O - Existing-value preservation certificate
Existing UVO-001 through UVO-208 modified: NO.
Existing SBI-001 through SBI-134 modified: NO.
Existing FMD-001 through FMD-120 modified: NO.
Existing RSV-001 through RSV-090 modified: NO.
Existing tuned values / figures modified: NO.
Existing live visual selectors rewritten: NO. */
/* UVO-010P - Existing owner preservation certificate
R1B / BU1 / HTE / WDG / HVG live owners remain authoritative.
UVO final lock does not duplicate or migrate approved values. */
/* UVO-010Q - Future deployment contract
A future section/category/widget may consume UVO only through
structural SBI/FMD identity and explicit visual-role mapping.
Unknown markup must not receive guessed visual ownership. */
/* UVO-010R - Release boundary
UVO-010 closes this UVO sequence.
UVO-011 creation inside this closed sequence is denied.
A new independent production feature must receive a new
permanent module/component ID and may consume locked UVO hooks. */
/* UVO-010S - Final production declaration
New variable range: UVO-209 through UVO-232.
Existing visual declarations added by UVO-010: NONE.
Existing tuned numbers / figures modified: NO.
Category-name binding introduced: NO.
Parent theme modified: NO.
Child-theme CSS only: YES.
Final Status: PRODUCTION LOCKED.
========================================================= */
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-001
PHP HOOK INTEGRATION & LIVE MARKUP MAPPING ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Bridge PHP-generated data-jnn attributes into SBI/FMD/UVO.
- Keep PHP identity structural, never category-name based.
- Provide metadata only in CSS.
- Do not rewrite any existing live selector or tuned value.
========================================================= */
body.home [data-jnn-phi="1"] {
--jnn-phi-runtime-active: var(--jnn-phi-active);
--jnn-phi-helper-runtime: var(--jnn-phi-helper-state);
--jnn-phi-attribute-runtime: var(--jnn-phi-attribute-state);
--jnn-phi-source-safe-runtime: var(--jnn-phi-source-safe-state);
}
body.home [data-jnn-phi="1"][data-jnn-slot] {
--jnn-phi-slot-runtime: var(--jnn-phi-slot-state);
}
body.home [data-jnn-phi="1"][data-jnn-zone] {
--jnn-phi-zone-runtime: var(--jnn-phi-zone-state);
}
body.home [data-jnn-phi="1"][data-jnn-component] {
--jnn-phi-component-runtime: var(--jnn-phi-component-state);
}
body.home [data-jnn-phi="1"][data-jnn-visual-role] {
--jnn-phi-visual-role-runtime: var(--jnn-phi-visual-role-state);
--jnn-phi-uvo-bridge-runtime: var(--jnn-phi-uvo-bridge-state);
--jnn-phi-category-independent-runtime:
var(--jnn-phi-category-independent-state);
}
body.home [data-jnn-phi="1"][data-jnn-layout] {
--jnn-phi-layout-runtime: var(--jnn-phi-layout-state);
}
body.home [data-jnn-phi="1"][data-jnn-mounted="true"] {
--jnn-phi-mount-runtime: var(--jnn-phi-mount-state);
}
body.home [data-jnn-phi="1"][data-jnn-lifecycle] {
--jnn-phi-lifecycle-runtime: var(--jnn-phi-lifecycle-state);
}
body.home [data-jnn-phi="1"][data-jnn-version] {
--jnn-phi-version-runtime: var(--jnn-phi-version-state);
}
body.home [data-jnn-phi="1"][data-jnn-owner] {
--jnn-phi-owner-runtime: var(--jnn-phi-owner-state);
}
body.home
[data-jnn-phi="1"]
[data-jnn-slot]
[data-jnn-zone]
[data-jnn-component] {
--jnn-phi-sbi-bridge-runtime: var(--jnn-phi-sbi-bridge-state);
--jnn-phi-fmd-bridge-runtime: var(--jnn-phi-fmd-bridge-state);
}
/* Confirmed live-position map certificates. */
body.home [data-jnn-phi-map="banner-main"] {
--jnn-phi-banner-map-runtime: var(--jnn-phi-banner-map-state);
}
body.home [data-jnn-phi-map="editorial"] {
--jnn-phi-editorial-map-runtime: var(--jnn-phi-editorial-map-state);
}
body.home [data-jnn-phi-map="featured"] {
--jnn-phi-featured-map-runtime: var(--jnn-phi-featured-map-state);
}
body.home [data-jnn-phi-map="advertisement"] {
--jnn-phi-ad-map-runtime: var(--jnn-phi-ad-map-state);
}
body.home [data-jnn-phi-map="grid"] {
--jnn-phi-grid-map-runtime: var(--jnn-phi-grid-map-state);
}
body.home [data-jnn-phi-map="widget"] {
--jnn-phi-widget-map-runtime: var(--jnn-phi-widget-map-state);
}
/* PHI-001 lock:
No visual declarations.
No category-name selector.
No existing SBI/FMD/UVO value modified.
No current PHP template is guessed or rewritten by CSS. */
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-002
TEMPLATE HOOK / ATTRIBUTE CONTRACT ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Lock the required attribute contract for PHI-enabled markup.
- Validate structural identity without category/title dependency.
- Keep template insertion source-safe.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-slot][data-jnn-zone]
[data-jnn-component][data-jnn-visual-role][data-jnn-owner]
[data-jnn-version][data-jnn-phi-map] {
--jnn-phi-contract-runtime: var(--jnn-phi-contract-active);
--jnn-phi-contract-slot-runtime: var(--jnn-phi-contract-slot-required);
--jnn-phi-contract-zone-runtime: var(--jnn-phi-contract-zone-required);
--jnn-phi-contract-component-runtime: var(--jnn-phi-contract-component-required);
--jnn-phi-contract-role-runtime: var(--jnn-phi-contract-role-required);
--jnn-phi-contract-owner-runtime: var(--jnn-phi-contract-owner-required);
--jnn-phi-contract-version-runtime: var(--jnn-phi-contract-version-required);
--jnn-phi-contract-map-runtime: var(--jnn-phi-contract-map-required);
--jnn-phi-contract-category-runtime: var(--jnn-phi-contract-category-independent);
--jnn-phi-contract-duplicate-runtime: var(--jnn-phi-contract-duplicate-guard);
--jnn-phi-contract-empty-runtime: var(--jnn-phi-contract-empty-guard);
--jnn-phi-contract-escape-runtime: var(--jnn-phi-contract-escape-state);
--jnn-phi-contract-filter-runtime: var(--jnn-phi-contract-filter-state);
}
body.home [data-jnn-phi-map="banner-main"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-banner-state);
}
body.home [data-jnn-phi-map="editorial"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-editorial-state);
}
body.home [data-jnn-phi-map="featured"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-featured-state);
}
body.home [data-jnn-phi-map="advertisement"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-ad-state);
}
body.home [data-jnn-phi-map="grid"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-grid-state);
}
body.home [data-jnn-phi-map="widget"] {
--jnn-phi-contract-map-state: var(--jnn-phi-contract-widget-state);
}
/* PHI-002 LOCK
Required structural contract:
slot + zone + component + visual-role + owner + version + phi-map.
layout remains optional.
No category name, slug or visible heading is an identity.
No existing PHP template is rewritten without source inspection.
No visual declaration is introduced here.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-003
CANONICAL TEMPLATE ADAPTER / SAFE INSERTION ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Standardize safe PHI insertion into confirmed opening tags.
- Preserve existing class/id/markup and append data-jnn attributes only.
- Block guessed insertion when source markup is unavailable.
- Provide canonical adapters for confirmed Homepage positions.
- Add metadata only; no visual declarations.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-adapter] {
--jnn-phi-adapter-runtime: var(--jnn-phi-adapter-active);
--jnn-phi-adapter-opening-tag-runtime:
var(--jnn-phi-adapter-opening-tag-state);
--jnn-phi-adapter-attribute-merge-runtime:
var(--jnn-phi-adapter-attribute-merge-state);
--jnn-phi-adapter-no-replace-runtime:
var(--jnn-phi-adapter-no-replace-state);
--jnn-phi-adapter-template-safe-runtime:
var(--jnn-phi-adapter-template-safe-state);
--jnn-phi-adapter-category-runtime:
var(--jnn-phi-adapter-category-independent-state);
}
body.home [data-jnn-phi-adapter="banner-main"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-banner-state);
}
body.home [data-jnn-phi-adapter="editorial"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-editorial-state);
}
body.home [data-jnn-phi-adapter="featured"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-featured-state);
}
body.home [data-jnn-phi-adapter="advertisement"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-ad-state);
}
body.home [data-jnn-phi-adapter="grid"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-grid-state);
}
body.home [data-jnn-phi-adapter="widget"] {
--jnn-phi-adapter-map-state: var(--jnn-phi-adapter-widget-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-adapter-sbi-runtime: var(--jnn-phi-adapter-sbi-state);
--jnn-phi-adapter-fmd-runtime: var(--jnn-phi-adapter-fmd-state);
--jnn-phi-adapter-uvo-runtime: var(--jnn-phi-adapter-uvo-state);
}
/* PHI-003 LOCK
Existing class/id attributes remain owned by template markup.
PHI appends structural data-jnn attributes only.
Unknown opening tags are not guessed.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-004
LIVE TEMPLATE SOURCE VERIFICATION / HOOK PLACEMENT ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Require source-first verification before PHI placement.
- Confirm expected opening tag / class / id where known.
- Detect duplicate PHI hooks before insertion.
- Block guessed placement when source is unavailable.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-verified="true"] {
--jnn-phi-verify-runtime: var(--jnn-phi-verify-active);
--jnn-phi-verify-source-runtime:
var(--jnn-phi-verify-source-present-state);
--jnn-phi-verify-opening-tag-runtime:
var(--jnn-phi-verify-opening-tag-state);
--jnn-phi-verify-placement-runtime:
var(--jnn-phi-verify-placement-ready-state);
--jnn-phi-verify-child-runtime:
var(--jnn-phi-verify-child-safe-state);
--jnn-phi-verify-parent-runtime:
var(--jnn-phi-verify-parent-safe-state);
--jnn-phi-verify-query-runtime:
var(--jnn-phi-verify-no-query-change-state);
--jnn-phi-verify-wrapper-runtime:
var(--jnn-phi-verify-no-wrapper-change-state);
--jnn-phi-verify-category-runtime:
var(--jnn-phi-verify-category-independent-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-verified="false"] {
--jnn-phi-verify-source-runtime:
var(--jnn-phi-verify-source-missing-state);
--jnn-phi-verify-placement-runtime:
var(--jnn-phi-verify-placement-blocked-state);
}
body.home [data-jnn-phi-map="banner-main"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-banner-state);
}
body.home [data-jnn-phi-map="editorial"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-editorial-state);
}
body.home [data-jnn-phi-map="featured"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-featured-state);
}
body.home [data-jnn-phi-map="advertisement"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-ad-state);
}
body.home [data-jnn-phi-map="grid"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-grid-state);
}
body.home [data-jnn-phi-map="widget"] {
--jnn-phi-verify-map-runtime: var(--jnn-phi-verify-widget-state);
}
body.home [data-jnn-phi="1"][data-jnn-slot][data-jnn-component] {
--jnn-phi-verify-class-runtime: var(--jnn-phi-verify-class-state);
--jnn-phi-verify-id-runtime: var(--jnn-phi-verify-id-state);
--jnn-phi-verify-duplicate-runtime: var(--jnn-phi-verify-duplicate-state);
--jnn-phi-verify-report-runtime: var(--jnn-phi-verify-report-state);
}
/* PHI-004 LOCK
Source-first verification is mandatory.
No PHP opening tag is guessed.
No category query or wrapper hierarchy is changed.
No parent-theme source is modified.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-005
HOOK INJECTION TRANSACTION / ROLLBACK GUARD ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Convert verified hook placement into a guarded transaction.
- Preserve the original opening tag as rollback snapshot.
- Block duplicate or unverified injection.
- Commit only after post-injection contract validation.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-transaction="committed"] {
--jnn-phi-transaction-runtime: var(--jnn-phi-transaction-active);
--jnn-phi-transaction-precheck-runtime: var(--jnn-phi-transaction-precheck-state);
--jnn-phi-transaction-inject-runtime: var(--jnn-phi-transaction-inject-state);
--jnn-phi-transaction-postcheck-runtime: var(--jnn-phi-transaction-postcheck-state);
--jnn-phi-transaction-commit-runtime: var(--jnn-phi-transaction-commit-state);
--jnn-phi-transaction-child-runtime: var(--jnn-phi-transaction-child-only-state);
--jnn-phi-transaction-category-runtime: var(--jnn-phi-transaction-category-independent);
}
body.home [data-jnn-phi="1"][data-jnn-phi-transaction="blocked"] {
--jnn-phi-transaction-block-runtime: var(--jnn-phi-transaction-block-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-transaction="rollback"] {
--jnn-phi-transaction-rollback-runtime: var(--jnn-phi-transaction-rollback-state);
--jnn-phi-transaction-rollback-ready-runtime: var(--jnn-phi-transaction-rollback-ready-state);
}
body.home [data-jnn-phi="1"][data-jnn-slot][data-jnn-component] {
--jnn-phi-transaction-duplicate-runtime: var(--jnn-phi-transaction-duplicate-guard);
--jnn-phi-transaction-class-runtime: var(--jnn-phi-transaction-class-preserve-state);
--jnn-phi-transaction-id-runtime: var(--jnn-phi-transaction-id-preserve-state);
--jnn-phi-transaction-query-runtime: var(--jnn-phi-transaction-query-preserve-state);
--jnn-phi-transaction-wrapper-runtime: var(--jnn-phi-transaction-wrapper-preserve-state);
--jnn-phi-transaction-report-runtime: var(--jnn-phi-transaction-report-state);
--jnn-phi-transaction-sbi-runtime: var(--jnn-phi-transaction-sbi-state);
--jnn-phi-transaction-fmd-uvo-runtime: var(--jnn-phi-transaction-fmd-uvo-state);
}
/* PHI-005 LOCK
A transaction may start only after PHI-004 source verification.
The original opening tag is the rollback snapshot.
No live template is changed by this CSS module.
No category-name identity is introduced.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-006
VERIFIED PATCH MANIFEST / DEPLOYMENT QUEUE ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Register verified PHI transactions in a patch manifest.
- Preserve source-file identity, source hash and rollback snapshot.
- Separate PREPARE from APPLY.
- Block parent-theme writes.
- Keep live PHP untouched until an explicit deployment step.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-queue] {
--jnn-phi-queue-runtime: var(--jnn-phi-queue-active);
--jnn-phi-queue-manifest-runtime: var(--jnn-phi-queue-manifest-state);
--jnn-phi-queue-source-runtime: var(--jnn-phi-queue-source-file-state);
--jnn-phi-queue-map-runtime: var(--jnn-phi-queue-map-key-state);
--jnn-phi-queue-source-hash-runtime: var(--jnn-phi-queue-source-hash-state);
--jnn-phi-queue-rollback-runtime: var(--jnn-phi-queue-rollback-state);
--jnn-phi-queue-proposed-runtime: var(--jnn-phi-queue-proposed-tag-state);
--jnn-phi-queue-order-runtime: var(--jnn-phi-queue-order-state);
--jnn-phi-queue-child-runtime: var(--jnn-phi-queue-child-theme-state);
--jnn-phi-queue-parent-runtime: var(--jnn-phi-queue-parent-block-state);
--jnn-phi-queue-auto-write-runtime: var(--jnn-phi-queue-no-auto-write-state);
--jnn-phi-queue-report-runtime: var(--jnn-phi-queue-report-state);
}
body.home [data-jnn-phi-queue="pending"] {
--jnn-phi-queue-state-runtime: var(--jnn-phi-queue-pending-state);
}
body.home [data-jnn-phi-queue="ready"] {
--jnn-phi-queue-state-runtime: var(--jnn-phi-queue-ready-state);
--jnn-phi-queue-verified-runtime: var(--jnn-phi-queue-verified-state);
}
body.home [data-jnn-phi-queue="blocked"] {
--jnn-phi-queue-state-runtime: var(--jnn-phi-queue-blocked-state);
}
body.home [data-jnn-phi-queue="applied"] {
--jnn-phi-queue-state-runtime: var(--jnn-phi-queue-applied-state);
}
body.home [data-jnn-phi-queue="rolled-back"] {
--jnn-phi-queue-state-runtime: var(--jnn-phi-queue-rolled-back-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-queue-duplicate-runtime: var(--jnn-phi-queue-duplicate-guard);
--jnn-phi-queue-sbi-runtime: var(--jnn-phi-queue-sbi-state);
--jnn-phi-queue-fmd-runtime: var(--jnn-phi-queue-fmd-state);
--jnn-phi-queue-uvo-runtime: var(--jnn-phi-queue-uvo-state);
}
/* PHI-006 LOCK
Manifest-first deployment is mandatory.
A ready queue item is NOT the same as a live PHP write.
No parent-theme write is permitted.
No category-name identity is introduced.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-007
VERIFIED PATCH APPLY / ATOMIC SOURCE GUARD ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Apply a ready PHI-006 manifest to supplied source content in memory.
- Revalidate current source hash before replacement.
- Replace the exact verified opening tag once only.
- Block mismatch, duplicates or ambiguous source.
- Return original source on any failure.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-apply="ready"] {
--jnn-phi-apply-runtime: var(--jnn-phi-apply-active);
--jnn-phi-apply-manifest-runtime: var(--jnn-phi-apply-manifest-ready-state);
--jnn-phi-apply-source-hash-runtime: var(--jnn-phi-apply-source-hash-state);
--jnn-phi-apply-source-match-runtime: var(--jnn-phi-apply-source-match-state);
--jnn-phi-apply-exact-tag-runtime: var(--jnn-phi-apply-exact-tag-state);
--jnn-phi-apply-single-runtime: var(--jnn-phi-apply-single-replace-state);
--jnn-phi-apply-atomic-runtime: var(--jnn-phi-apply-atomic-state);
--jnn-phi-apply-child-runtime: var(--jnn-phi-apply-child-theme-state);
--jnn-phi-apply-query-runtime: var(--jnn-phi-apply-query-preserve-state);
--jnn-phi-apply-wrapper-runtime: var(--jnn-phi-apply-wrapper-preserve-state);
--jnn-phi-apply-class-id-runtime: var(--jnn-phi-apply-class-id-preserve-state);
--jnn-phi-apply-category-runtime: var(--jnn-phi-apply-category-independent-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-apply="blocked"] {
--jnn-phi-apply-source-mismatch-runtime: var(--jnn-phi-apply-source-mismatch-state);
--jnn-phi-apply-duplicate-runtime: var(--jnn-phi-apply-duplicate-block-state);
--jnn-phi-apply-parent-runtime: var(--jnn-phi-apply-parent-block-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-apply="rollback"] {
--jnn-phi-apply-rollback-runtime: var(--jnn-phi-apply-rollback-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-apply-result-runtime: var(--jnn-phi-apply-result-state);
--jnn-phi-apply-write-runtime: var(--jnn-phi-apply-no-auto-write-state);
--jnn-phi-apply-sbi-runtime: var(--jnn-phi-apply-sbi-state);
--jnn-phi-apply-fmd-runtime: var(--jnn-phi-apply-fmd-state);
--jnn-phi-apply-uvo-runtime: var(--jnn-phi-apply-uvo-state);
--jnn-phi-apply-report-runtime: var(--jnn-phi-apply-report-state);
}
/* PHI-007 LOCK
Only a PHI-006 ready manifest may enter apply.
The current source hash must match the queued source hash.
The exact original opening tag must occur exactly once.
Failure returns the original source unchanged.
No file-system write is performed by this engine.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-008
CHILD-THEME ATOMIC FILE WRITE / BACKUP ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Gate actual file writes to the active child-theme root only.
- Create a backup before replacement.
- Write through a temporary file.
- Verify final content hash after atomic replacement.
- Restore backup on write/hash failure.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-write="ready"] {
--jnn-phi-write-runtime: var(--jnn-phi-write-active);
--jnn-phi-write-child-runtime: var(--jnn-phi-write-child-theme-state);
--jnn-phi-write-backup-runtime: var(--jnn-phi-write-backup-state);
--jnn-phi-write-temp-runtime: var(--jnn-phi-write-temp-state);
--jnn-phi-write-atomic-runtime: var(--jnn-phi-write-atomic-rename-state);
--jnn-phi-write-prehash-runtime: var(--jnn-phi-write-prehash-state);
--jnn-phi-write-posthash-runtime: var(--jnn-phi-write-posthash-state);
--jnn-phi-write-permission-runtime: var(--jnn-phi-write-permission-state);
--jnn-phi-write-readable-runtime: var(--jnn-phi-write-readable-state);
--jnn-phi-write-writable-runtime: var(--jnn-phi-write-writable-state);
--jnn-phi-write-rollback-ready-runtime: var(--jnn-phi-write-rollback-ready-state);
--jnn-phi-write-framework-runtime: var(--jnn-phi-write-framework-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-write="committed"] {
--jnn-phi-write-hash-runtime: var(--jnn-phi-write-hash-match-state);
--jnn-phi-write-commit-runtime: var(--jnn-phi-write-commit-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-write="rollback"] {
--jnn-phi-write-rollback-runtime: var(--jnn-phi-write-rollback-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-write="failed"] {
--jnn-phi-write-failure-runtime: var(--jnn-phi-write-failure-state);
--jnn-phi-write-hash-runtime: var(--jnn-phi-write-hash-mismatch-state);
--jnn-phi-write-parent-runtime: var(--jnn-phi-write-parent-block-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-write-report-runtime: var(--jnn-phi-write-report-state);
--jnn-phi-write-query-runtime: var(--jnn-phi-write-query-preserve-state);
--jnn-phi-write-wrapper-runtime: var(--jnn-phi-write-wrapper-preserve-state);
--jnn-phi-write-category-runtime: var(--jnn-phi-write-category-independent-state);
}
/* PHI-008 LOCK
Only a PHI-007 fully applied result may be considered for write.
Target path must resolve inside the active child-theme root.
A backup is required before replacement.
Post-write hash must equal the expected new-source hash.
Failure requires rollback.
No parent-theme write is permitted.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-009
POST-WRITE VALIDATION / RECOVERY VERIFICATION ENGINE
STATUS: PRODUCTION FOUNDATION
=========================================================
PURPOSE
- Re-read child-theme source after PHI-008 write.
- Verify final content hash and required PHI contract.
- Detect duplicate/ambiguous PHI hooks.
- Verify rollback backup exists before production-ready state.
- Mark failure as non-production-ready.
- Add metadata only; no visual declaration.
========================================================= */
body.home [data-jnn-phi="1"][data-jnn-phi-postcheck="clean"] {
--jnn-phi-postcheck-runtime: var(--jnn-phi-postcheck-active);
--jnn-phi-postcheck-file-runtime: var(--jnn-phi-postcheck-file-present-state);
--jnn-phi-postcheck-readable-runtime: var(--jnn-phi-postcheck-readable-state);
--jnn-phi-postcheck-hash-runtime: var(--jnn-phi-postcheck-hash-state);
--jnn-phi-postcheck-contract-runtime: var(--jnn-phi-postcheck-contract-state);
--jnn-phi-postcheck-map-runtime: var(--jnn-phi-postcheck-map-state);
--jnn-phi-postcheck-slot-runtime: var(--jnn-phi-postcheck-slot-state);
--jnn-phi-postcheck-zone-runtime: var(--jnn-phi-postcheck-zone-state);
--jnn-phi-postcheck-component-runtime: var(--jnn-phi-postcheck-component-state);
--jnn-phi-postcheck-role-runtime: var(--jnn-phi-postcheck-role-state);
--jnn-phi-postcheck-owner-runtime: var(--jnn-phi-postcheck-owner-state);
--jnn-phi-postcheck-version-runtime: var(--jnn-phi-postcheck-version-state);
--jnn-phi-postcheck-duplicate-runtime: var(--jnn-phi-postcheck-duplicate-state);
--jnn-phi-postcheck-backup-runtime: var(--jnn-phi-postcheck-backup-state);
--jnn-phi-postcheck-clean-runtime: var(--jnn-phi-postcheck-clean-state);
--jnn-phi-postcheck-ready-runtime: var(--jnn-phi-postcheck-production-ready-state);
--jnn-phi-postcheck-child-runtime: var(--jnn-phi-postcheck-child-theme-state);
--jnn-phi-postcheck-category-runtime:
var(--jnn-phi-postcheck-category-independent-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-postcheck="failed"] {
--jnn-phi-postcheck-failure-runtime: var(--jnn-phi-postcheck-failure-state);
--jnn-phi-postcheck-parent-runtime: var(--jnn-phi-postcheck-parent-block-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-postcheck="rollback"] {
--jnn-phi-postcheck-rollback-runtime: var(--jnn-phi-postcheck-rollback-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-postcheck-report-runtime: var(--jnn-phi-postcheck-report-state);
}
/* PHI-009 LOCK
A successful write is not production-ready until post-write verification passes.
Final file hash must match expected new content.
Required PHI attributes must be present.
Duplicate hook ownership must not be detected.
Rollback backup must remain available during verification.
No parent-theme write is permitted.
No visual declaration is introduced.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
MODULE 27 - PHP HOOK INTEGRATION ENGINE
ID: JNN-PHI-010
FINAL VALIDATION / RELEASE / PRODUCTION LOCK
STATUS: FINAL / RELEASED / LOCKED
=========================================================
FINAL PHI SEQUENCE
PHI-001 PHP Hook Integration / Live Markup Mapping
PHI-002 Template Hook / Attribute Contract
PHI-003 Canonical Template Adapter / Safe Insertion
PHI-004 Live Template Source Verification / Hook Placement
PHI-005 Hook Injection Transaction / Rollback Guard
PHI-006 Verified Patch Manifest / Deployment Queue
PHI-007 Verified Patch Apply / Atomic Source Guard
PHI-008 Child-Theme Atomic File Write / Backup
PHI-009 Post-Write Validation / Recovery Verification
PHI-010 Final Validation / Release / Production Lock
FINAL PIPELINE
live child-theme source
-> source verification
-> structural hook contract
-> canonical adapter
-> guarded transaction
-> manifest queue
-> atomic in-memory apply
-> child-theme backup/write
-> post-write verification
-> production release
PERMANENT RULE
Category names, category slugs, visible headings, post titles
and widget labels are never permanent PHI identities.
========================================================= */
body.home [data-jnn-phi="1"] {
--jnn-phi-final-runtime: var(--jnn-phi-final-active);
--jnn-phi-final-index-runtime: var(--jnn-phi-final-index-state);
--jnn-phi-final-control-runtime: var(--jnn-phi-final-control-state);
--jnn-phi-final-registry-runtime: var(--jnn-phi-final-registry-state);
--jnn-phi-final-production-lock-runtime: var(--jnn-phi-final-production-lock);
--jnn-phi-final-release-runtime: var(--jnn-phi-final-release-state);
}
body.home [data-jnn-phi="1"][data-jnn-slot][data-jnn-zone] {
--jnn-phi-final-mapping-runtime: var(--jnn-phi-final-mapping-state);
}
body.home [data-jnn-phi="1"][data-jnn-component][data-jnn-visual-role] {
--jnn-phi-final-contract-runtime: var(--jnn-phi-final-contract-state);
--jnn-phi-final-adapter-runtime: var(--jnn-phi-final-adapter-state);
--jnn-phi-final-category-runtime:
var(--jnn-phi-final-category-independent-state);
--jnn-phi-final-sbi-runtime: var(--jnn-phi-final-sbi-state);
--jnn-phi-final-fmd-runtime: var(--jnn-phi-final-fmd-state);
--jnn-phi-final-uvo-runtime: var(--jnn-phi-final-uvo-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-verified="true"] {
--jnn-phi-final-source-verify-runtime:
var(--jnn-phi-final-source-verify-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-transaction] {
--jnn-phi-final-transaction-runtime:
var(--jnn-phi-final-transaction-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-queue] {
--jnn-phi-final-queue-runtime: var(--jnn-phi-final-queue-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-apply] {
--jnn-phi-final-apply-runtime: var(--jnn-phi-final-apply-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-write] {
--jnn-phi-final-write-runtime: var(--jnn-phi-final-write-state);
--jnn-phi-final-backup-runtime: var(--jnn-phi-final-backup-state);
--jnn-phi-final-rollback-runtime: var(--jnn-phi-final-rollback-state);
--jnn-phi-final-child-runtime: var(--jnn-phi-final-child-theme-state);
--jnn-phi-final-parent-runtime: var(--jnn-phi-final-parent-block-state);
}
body.home [data-jnn-phi="1"][data-jnn-phi-postcheck] {
--jnn-phi-final-postcheck-runtime: var(--jnn-phi-final-postcheck-state);
}
/* PHI-010 FINAL LOCK
Master Index synchronized.
Master Control synchronized.
Update Registry synchronized.
PHI-001 through PHI-240 registered.
PHI-001 through PHI-010 sequence complete.
No existing tuned CSS value changed.
No live selector rewritten.
No category-name identity introduced.
Parent-theme write remains blocked.
PHI-011 inside this closed sequence is denied.
*/
/* =========================================================
JNN FRAMEWORK v5.7.0
PRODUCTION COMPLETE / FINAL LIVE LOCKED
STATUS: FINAL LIVE PRODUCTION LOCK
=========================================================
LOCK CERTIFICATE
- Design / Layout Framework: COMPLETE
- Responsive Framework: COMPLETE
- FMD: LOCKED
- SBI: LOCKED
- UVO: LOCKED
- PHI: LOCKED
- Actual PHP Hook Deployment: COMPLETE
- Static Regression: PASS
- Live Regression: CONFIRMED
- Parent Theme: UNTOUCHED
- Child Theme: PRODUCTION BASE
- Existing Tuned Values: PRESERVED
- Existing Numbers / Figures: PRESERVED
- Category-Name Permanent Binding: NONE
PERMANENT CHANGE POLICY
Any future feature or visual change must be introduced through a new
controlled framework module. This locked production base must not be
silently overridden or rewritten.
FINAL STATUS
JNN v5.7.0 - PRODUCTION COMPLETE / FINAL LIVE LOCKED
========================================================= */
/* =========================================================
JNN QUICK MENU — SCROLL STABILITY GUARD
========================================================= */
.jnn-custom-header .jnn-quick-navigation {
scroll-behavior: auto !important;
overflow-anchor: none !important;
}
/* JNN QUICK MENU TEST — Disable automatic scroll alignment */
.jnn-custom-header .jnn-quick-navigation,
.jnn-custom-header .jnn-quick-menu-list,
.jnn-custom-header .jnn-quick-menu-list li,
.jnn-custom-header .jnn-quick-menu-list a {
scroll-margin: 0 !important;
scroll-padding: 0 !important;
scroll-snap-align: none !important;
scroll-snap-stop: normal !important;
}
.jnn-custom-header .jnn-quick-navigation {
scroll-snap-type: none !important;
}