/* * ============================================================ * CNTS APP UI * Shared cinematic interface layer * ============================================================ * * Goals: * - full-page cinematic background * - transparent Astra / WordPress shell * - translucent dark application cards * - consistent typography, forms, buttons, badges and tables * - no styling leakage onto ordinary public pages */ /* ============================================================ 1. APP THEME TOKENS ============================================================ */ body.cnts-app-ui { --cnts-app-bg: url('https://cnts.life/wp-content/uploads/2026/09/heroride.png'); --cnts-app-overlay-top: rgba(6,8,10,.66); --cnts-app-overlay-bottom: rgba(6,8,10,.86); --cnts-app-card: rgba(22,24,26,.86); --cnts-app-card-strong: rgba(18,20,22,.94); --cnts-app-card-soft: rgba(28,30,32,.74); --cnts-app-border: rgba(255,255,255,.14); --cnts-app-border-strong: rgba(255,255,255,.22); --cnts-app-text: #d6d0c7; --cnts-app-heading: #f4f0ea; --cnts-app-muted: #aaa39a; --cnts-app-red: #d71920; --cnts-app-gold: #d6b56d; --cnts-app-input: #151515; --cnts-app-shadow: 0 18px 50px rgba(0,0,0,.24); } /* ============================================================ 2. BACKGROUND FAMILIES ============================================================ */ body.cnts-app-ui-events { --cnts-app-bg: url('https://cnts.life/wp-content/uploads/2026/09/heroevents.png'); } body.cnts-app-ui-rider { --cnts-app-bg: url('https://cnts.life/wp-content/uploads/2026/09/heroride.png'); } body.cnts-app-ui-workspace { --cnts-app-bg: url('https://cnts.life/wp-content/uploads/2026/09/heroride.png'); --cnts-app-overlay-top: rgba(6,8,10,.72); --cnts-app-overlay-bottom: rgba(6,8,10,.89); } /* ============================================================ 3. FULL-PAGE CINEMATIC BACKGROUND ============================================================ */ body.cnts-app-ui { min-height: 100vh; background: linear-gradient( var(--cnts-app-overlay-top), var(--cnts-app-overlay-bottom) ), var(--cnts-app-bg) center center / cover no-repeat fixed !important; color: var(--cnts-app-text); } /* ============================================================ 4. TRANSPARENT WORDPRESS / ASTRA SHELL ============================================================ */ body.cnts-app-ui #page, body.cnts-app-ui .site, body.cnts-app-ui .site-content, body.cnts-app-ui #content, body.cnts-app-ui .content-area, body.cnts-app-ui #primary, body.cnts-app-ui .site-main, body.cnts-app-ui article, body.cnts-app-ui .ast-article-single, body.cnts-app-ui .entry-content, body.cnts-app-ui .entry-header, body.cnts-app-ui .ast-container, body.cnts-app-ui .ast-row, body.cnts-app-ui main, body.cnts-app-ui .cnts-page, body.cnts-app-ui .cnts-section, body.cnts-app-ui .cnts-section-light, body.cnts-app-ui .cnts-section-dark, body.cnts-app-ui .cnts-section-black { background: transparent !important; } body.cnts-app-ui #page::before, body.cnts-app-ui #page::after { background: transparent !important; } /* ============================================================ 5. SHARED APPLICATION CARDS / PANELS ============================================================ */ body.cnts-app-ui :is( .cnts-app-card, .cnts-card, .cnts-panel, .cnts-dashboard-card, .cnts-hub-card, .cnts-management-card, .cnts-event-card, .cnts-partner-hub-card, .cnts-admin-hub-card, .cnts-partner-management-card, .cnts-pending-overview, .cnts-my-registrations, .cnts-event-info, .cnts-event-meta, .cnts-event-rsvp, .cnts-event-attendance, .cnts-event-owner, .cnts-event-admins ) { background: var(--cnts-app-card) !important; color: var(--cnts-app-text) !important; border: 1px solid var(--cnts-app-border) !important; box-shadow: var(--cnts-app-shadow); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Stronger panels when they are meant to stand forward */ body.cnts-app-ui :is( .cnts-partner-hub-card-featured, .cnts-admin-hub-card-featured, .cnts-app-card-featured ) { background: var(--cnts-app-card-strong) !important; } /* ============================================================ 6. TYPOGRAPHY ============================================================ */ body.cnts-app-ui :is( .cnts-eyebrow, .cnts-app-eyebrow, .cnts-partner-hub-label, .cnts-admin-hub-label ) { color: var(--cnts-app-gold) !important; } body.cnts-app-ui :is( .cnts-muted, .description, .cnts-app-muted ) { color: var(--cnts-app-muted) !important; } /* ============================================================ 7. LINKS ============================================================ */ body.cnts-app-ui a { color: var(--cnts-app-heading); } body.cnts-app-ui a:hover, body.cnts-app-ui a:focus { color: var(--cnts-app-red); } /* ============================================================ 8. FORMS ============================================================ */ body.cnts-app-ui :is( input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="password"], input[type="search"], select, textarea ) { width: 100%; background: var(--cnts-app-input) !important; color: var(--cnts-app-heading) !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 4px; box-shadow: none !important; } body.cnts-app-ui :is( input, select, textarea ):focus { outline: none; border-color: var(--cnts-app-red) !important; box-shadow: 0 0 0 2px rgba(215,25,32,.14) !important; } body.cnts-app-ui select option { background: #151515; color: var(--cnts-app-heading); } /* ============================================================ 9. BUTTONS / ACTION LINKS ============================================================ */ body.cnts-app-ui :is( button, input[type="submit"], .button, .cnts-btn, .cnts-partner-management-action ) { background: #151515 !important; color: var(--cnts-app-heading) !important; border: 1px solid rgba(214,181,109,.58) !important; border-radius: 4px; box-shadow: none !important; font-weight: 800; } body.cnts-app-ui :is( button, input[type="submit"], .button, .cnts-btn, .cnts-partner-management-action ):hover { background: #1f1f1f !important; border-color: var(--cnts-app-red) !important; color: #ffffff !important; } body.cnts-app-ui :is( .cnts-btn-primary, .button-primary ) { background: var(--cnts-app-red) !important; border-color: var(--cnts-app-red) !important; color: #ffffff !important; } /* ============================================================ 10. BADGES / STATUS PILLS ============================================================ */ body.cnts-app-ui :is( .cnts-app-badge, .cnts-partner-hub-role, .cnts-status, [class*="cnts-event-status-"] ) { display: inline-flex; align-items: center; width: auto; min-height: 26px; padding: 5px 9px; border: 1px solid var(--cnts-app-border-strong); border-radius: 999px; background: rgba(17,17,17,.92) !important; color: var(--cnts-app-heading) !important; font-size: .68rem; font-weight: 900; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } /* Publish */ body.cnts-app-ui .cnts-event-status-publish { background: rgba(215,25,32,.18) !important; color: #ffffff !important; border-color: rgba(215,25,32,.62) !important; } /* Draft */ body.cnts-app-ui .cnts-event-status-draft { background: rgba(214,181,109,.14) !important; color: #f1dfb5 !important; border-color: rgba(214,181,109,.45) !important; } /* Pending */ body.cnts-app-ui .cnts-event-status-pending { background: rgba(255,255,255,.08) !important; color: #f0ece6 !important; } /* Private */ body.cnts-app-ui .cnts-event-status-private { background: rgba(110,90,150,.20) !important; color: #ddd2f0 !important; border-color: rgba(150,120,200,.42) !important; } /* Past / Archived */ body.cnts-app-ui :is( .cnts-event-status-past, .cnts-event-status-archived, .cnts-status-archived ) { background: rgba(255,255,255,.06) !important; color: #b7b2ab !important; border-color: rgba(255,255,255,.12) !important; } /* ============================================================ 11. TABLES ============================================================ */ body.cnts-app-ui table { width: 100%; border-collapse: collapse; background: transparent !important; } body.cnts-app-ui th, body.cnts-app-ui td { border-color: var(--cnts-app-border) !important; } body.cnts-app-ui th { color: var(--cnts-app-heading) !important; } /* ============================================================ 12. APP SECTIONS / CONTAINERS ============================================================ */ body.cnts-app-ui .cnts-container { position: relative; z-index: 1; } body.cnts-app-ui :is( .cnts-app-section, .cnts-partner-hub-section, .cnts-admin-hub-main, .cnts-partner-management, .cnts-event-manager, .cnts-workspace ) { background: transparent !important; } /* ============================================================ 13. RESPONSIVE ============================================================ */ @media (max-width: 768px) { body.cnts-app-ui { background-attachment: scroll !important; } body.cnts-app-ui :is( .cnts-app-card, .cnts-card, .cnts-panel, .cnts-partner-hub-card, .cnts-admin-hub-card, .cnts-partner-management-card ) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } } /* ============================================================ 14. ACCESSIBILITY / REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { body.cnts-app-ui *, body.cnts-app-ui *::before, body.cnts-app-ui *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================ 15. CNTS TYPOGRAPHY + READABILITY SYSTEM v1.1.0 ============================================================ Design rule: - One dominant H1 per page. - Section H2s are strong, but deliberately smaller than hero titles. - H3s are compact and functional. - Body copy stays readable over cinematic imagery. ============================================================ */ body.cnts-app-ui { --cnts-type-body: 1rem; --cnts-type-small: .86rem; --cnts-type-lead: clamp(1.05rem, 1.25vw, 1.18rem); --cnts-type-h3: clamp(1.22rem, 1.75vw, 1.55rem); --cnts-type-h2: clamp(1.9rem, 3vw, 2.75rem); --cnts-type-h1: clamp(2.8rem, 5.4vw, 4.8rem); --cnts-type-hero-xl: clamp(3.2rem, 6.3vw, 5.5rem); --cnts-line-body: 1.65; --cnts-line-heading: 1.08; --cnts-copy-width: 760px; --cnts-copy-wide: 920px; --cnts-section-space: clamp(56px, 7vw, 94px); --cnts-section-space-tight: clamp(36px, 5vw, 64px); } /* Base body copy */ body.cnts-app-ui { font-size: var(--cnts-type-body); line-height: var(--cnts-line-body); } body.cnts-app-ui p, body.cnts-app-ui li { font-size: var(--cnts-type-body); line-height: var(--cnts-line-body); } /* Hero / primary page title */ body.cnts-app-ui h1, body.cnts-app-ui .cnts-hero h1, body.cnts-app-ui .cnts-partner-hub-hero h1, body.cnts-app-ui .cnts-admin-hub-hero h1 { max-width: 980px; margin-top: 0; font-size: var(--cnts-type-h1) !important; line-height: var(--cnts-line-heading) !important; letter-spacing: -.035em; } /* Large editorial hero is opt-in only */ body.cnts-app-ui .cnts-hero-title-xl { font-size: var(--cnts-type-hero-xl) !important; } /* Major section heading */ body.cnts-app-ui h2, body.cnts-app-ui .cnts-section h2 { max-width: 900px; font-size: var(--cnts-type-h2) !important; line-height: 1.1 !important; letter-spacing: -.025em; } /* Subsection / card heading */ body.cnts-app-ui h3, body.cnts-app-ui .cnts-section h3 { font-size: var(--cnts-type-h3) !important; line-height: 1.2 !important; letter-spacing: -.012em; } /* Lead copy */ body.cnts-app-ui .cnts-lead, body.cnts-app-ui .cnts-large-copy, body.cnts-app-ui .cnts-events-large-copy { max-width: var(--cnts-copy-width); font-size: var(--cnts-type-lead) !important; line-height: 1.62 !important; color: var(--cnts-app-text) !important; } /* Ordinary long-form copy should never span the full viewport */ body.cnts-app-ui :is( .cnts-copy, .cnts-content-copy, .cnts-editorial-copy, .cnts-section-copy ) { max-width: var(--cnts-copy-width); } /* Eyebrows / labels */ body.cnts-app-ui :is( .cnts-eyebrow, .cnts-app-eyebrow, .cnts-small-label, .cnts-events-small-label ) { font-size: .72rem !important; font-weight: 900 !important; letter-spacing: .13em !important; line-height: 1.2 !important; text-transform: uppercase; } /* Buttons should remain compact */ body.cnts-app-ui :is( .cnts-btn, button, input[type="submit"], .button ) { font-size: .82rem !important; line-height: 1.2; letter-spacing: .035em; } /* ============================================================ 16. COPY CONTRAST / READABILITY ============================================================ */ /* * Dark translucent readability panel. * * This is deliberately broad enough to catch common CNTS editorial * content wrappers without turning every section into an opaque box. */ body.cnts-app-ui :is( .cnts-readable, .cnts-copy-panel, .cnts-editorial-panel ) { max-width: var(--cnts-copy-wide); padding: clamp(22px, 3vw, 36px); background: rgba(12,14,16,.66) !important; border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* * Prevent low-contrast body copy over cinematic backgrounds. * White/cream copy is standardised throughout CNTS UI surfaces. */ /* ============================================================ 17. PUBLIC EDITORIAL SURFACES About / Lids Off / Media ============================================================ */ body.cnts-app-ui-editorial { --cnts-app-bg: url('https://cnts.life/wp-content/uploads/2026/09/heroride.png'); --cnts-app-overlay-top: rgba(6,8,10,.58); --cnts-app-overlay-bottom: rgba(6,8,10,.80); } /* * Public editorial pages can still use dramatic full-width sections, * but their section backgrounds should not become accidental white * canvases that destroy copy contrast. */ body.cnts-app-ui-editorial :is( .cnts-section-light, .cnts-section-dark, .cnts-section-black, .cnts-panel-light, .cnts-panel-dark ) { background: transparent !important; } /* ============================================================ 18. PARTNERS PAGE READABILITY Fixes the cream/white section visible in current layout. ============================================================ */ body.cnts-app-ui.page-template-default :is( .page-id-0 ) { /* Reserved placeholder — no effect. */ } /* * The Partners page is already mapped into CNTS App UI. * Normalise its broad content sections without depending on a * brittle WordPress page ID. */ body.cnts-app-ui :is( .cnts-partners-page, .cnts-partner-directory-page, .cnts-partner-page ) :is( .cnts-section-light, .cnts-section-dark, .cnts-section-black ) { background: transparent !important; } /* * Fallback for current Partners layouts that use editorial sections * but not a dedicated page wrapper. */ body.cnts-app-ui-rider :is( .cnts-partner-directory-section, .cnts-partner-network-section, .cnts-creative-network, .cnts-editorial-section ) { background: rgba(12,14,16,.28) !important; color: var(--cnts-app-text) !important; } /* ============================================================ 19. SECTION SPACING SYSTEM ============================================================ */ body.cnts-app-ui .cnts-section { padding-top: var(--cnts-section-space); padding-bottom: var(--cnts-section-space); } body.cnts-app-ui :is( .cnts-section-tight, .cnts-app-section-tight ) { padding-top: var(--cnts-section-space-tight); padding-bottom: var(--cnts-section-space-tight); } /* ============================================================ 20. MOBILE TYPOGRAPHY ============================================================ */ @media (max-width: 768px) { body.cnts-app-ui { --cnts-type-body: .98rem; --cnts-type-lead: 1.05rem; --cnts-type-h3: 1.25rem; --cnts-type-h2: clamp(1.75rem, 8vw, 2.25rem); --cnts-type-h1: clamp(2.35rem, 11vw, 3.6rem); --cnts-section-space: 52px; --cnts-section-space-tight: 34px; } } /* ============================================================ 21. TYPOGRAPHY UTILITY CLASSES For future CNTS page/plugin development. ============================================================ */ .cnts-type-hero { font-size: var(--cnts-type-h1) !important; line-height: var(--cnts-line-heading) !important; } .cnts-type-section { font-size: var(--cnts-type-h2) !important; line-height: 1.1 !important; } .cnts-type-subsection { font-size: var(--cnts-type-h3) !important; line-height: 1.2 !important; } .cnts-type-lead { max-width: var(--cnts-copy-width); font-size: var(--cnts-type-lead) !important; line-height: 1.62 !important; } .cnts-type-body { max-width: var(--cnts-copy-width); font-size: var(--cnts-type-body) !important; line-height: var(--cnts-line-body) !important; } /* ============================================================ 22. CONTRAST HOTFIX — LIGHT VS DARK SURFACES v1.1.1 ============================================================ Fixes light/white text appearing on cream or other light sections. Text colour is now determined by the surface it sits on instead of being forced globally across the whole page. ============================================================ */ /* ------------------------------------------------------------ A. DEFAULT APP PAGE TEXT ------------------------------------------------------------ */ body.cnts-app-ui { color: #d6d0c7; } /* ------------------------------------------------------------ B. DARK / CINEMATIC SURFACES ------------------------------------------------------------ */ body.cnts-app-ui :is( .cnts-section-dark, .cnts-section-black, .cnts-hero, .cnts-partner-hub-hero, .cnts-admin-hub-hero, .cnts-app-card, .cnts-card, .cnts-panel, .cnts-dashboard-card, .cnts-hub-card, .cnts-management-card, .cnts-event-card, .cnts-partner-hub-card, .cnts-admin-hub-card, .cnts-partner-management-card, .cnts-pending-overview, .cnts-readable, .cnts-copy-panel, .cnts-editorial-panel ) :is( h1, h2, h3, h4, h5, h6, strong ) { color: var(--cnts-app-heading) !important; } body.cnts-app-ui :is( .cnts-section-dark, .cnts-section-black, .cnts-hero, .cnts-partner-hub-hero, .cnts-admin-hub-hero, .cnts-app-card, .cnts-card, .cnts-panel, .cnts-dashboard-card, .cnts-hub-card, .cnts-management-card, .cnts-event-card, .cnts-partner-hub-card, .cnts-admin-hub-card, .cnts-partner-management-card, .cnts-pending-overview, .cnts-readable, .cnts-copy-panel, .cnts-editorial-panel ) :is( p, li, span, small, label, td, th, .cnts-lead, .cnts-large-copy, .cnts-events-large-copy ) { color: var(--cnts-app-text) !important; } /* ------------------------------------------------------------ C. LIGHT / CREAM SURFACES ------------------------------------------------------------ */ /* * Preserve deliberate light editorial sections. * These receive dark copy automatically. */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( h1, h2, h3, h4, h5, h6, strong ) { color: #171717 !important; } body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( p, li, span, small, label, td, th, .cnts-lead, .cnts-large-copy, .cnts-events-large-copy ) { color: #34312d !important; } /* Eyebrows can remain branded on light surfaces */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( .cnts-eyebrow, .cnts-small-label, .cnts-events-small-label ) { color: #8f6b25 !important; } /* Links on light surfaces */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) a { color: #171717; } body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) a:hover { color: var(--cnts-app-red); } /* ------------------------------------------------------------ D. DO NOT FORCE PUBLIC EDITORIAL LIGHT SECTIONS TRANSPARENT ------------------------------------------------------------ */ /* * v1.1.0 made every editorial light section transparent. * That was too aggressive and created cross-page contrast problems. * Restore the page designer/plugin's intended background on light sections. */ body.cnts-app-ui-editorial .cnts-section-light, body.cnts-app-ui-editorial .cnts-panel-light { background: revert !important; } /* ------------------------------------------------------------ E. SAFETY FOR WHITE / PALE CARDS FROM LEGACY MODULES ------------------------------------------------------------ */ /* * Some older CNTS modules still output white cards directly. * If they are not using the shared dark-card classes, keep their * text dark rather than allowing inherited cinematic colours. */ body.cnts-app-ui :is( .cnts-white-card, .cnts-light-card, .cnts-profile-card-light, .cnts-content-card-light ) :is( h1, h2, h3, h4, h5, h6, strong, p, li, span, small, label ) { color: #171717 !important; } /* ------------------------------------------------------------ F. PARTNERS PAGE CURRENT LIGHT EDITORIAL SECTION ------------------------------------------------------------ */ /* * Current Partners page uses a large pale editorial section. * Keep that section readable even before we refactor its markup. */ body.cnts-app-ui-rider :is( .cnts-creative-network, .cnts-partner-network-section, .cnts-partners-editorial, .cnts-partners-intro ) :is( h1, h2, h3, h4, h5, h6, strong ) { color: #171717 !important; } body.cnts-app-ui-rider :is( .cnts-creative-network, .cnts-partner-network-section, .cnts-partners-editorial, .cnts-partners-intro ) :is( p, li, span, small, .cnts-lead ) { color: #34312d !important; } /* ============================================================ 23. CINEMATIC SURFACE HOTFIX v1.1.2 ============================================================ Removes pale / cream full-width content blocks from CNTS App UI surfaces and lets the page-level cinematic background remain visible. Text on these now-transparent sections is returned to the standard light CNTS copy palette. ============================================================ */ /* Remove broad pale section canvases */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) { background: transparent !important; background-color: transparent !important; } /* Catch common nested wrappers that may repaint the cream block */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( .cnts-container, .cnts-inner, .cnts-content, .cnts-section-inner, .cnts-panel-inner ) { background: transparent !important; background-color: transparent !important; } /* Text now sits directly over the cinematic background */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( h1, h2, h3, h4, h5, h6, strong ) { color: var(--cnts-app-heading) !important; } body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( p, li, span, small, label, td, th, .cnts-lead, .cnts-large-copy, .cnts-events-large-copy ) { color: var(--cnts-app-text) !important; } /* Brand labels remain gold on cinematic surfaces */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) :is( .cnts-eyebrow, .cnts-small-label, .cnts-events-small-label ) { color: var(--cnts-app-gold) !important; } /* Links return to the normal dark-surface treatment */ body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) a { color: var(--cnts-app-heading); } body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) a:hover, body.cnts-app-ui :is( .cnts-section-light, .cnts-panel-light, .cnts-light-section, .cnts-editorial-light, .cnts-cream, .cnts-cream-section ) a:focus { color: var(--cnts-app-red); } /* Current Partners page editorial surfaces */ body.cnts-app-ui-rider :is( .cnts-creative-network, .cnts-partner-network-section, .cnts-partners-editorial, .cnts-partners-intro ) { background: transparent !important; background-color: transparent !important; } body.cnts-app-ui-rider :is( .cnts-creative-network, .cnts-partner-network-section, .cnts-partners-editorial, .cnts-partners-intro ) :is( h1, h2, h3, h4, h5, h6, strong ) { color: var(--cnts-app-heading) !important; } body.cnts-app-ui-rider :is( .cnts-creative-network, .cnts-partner-network-section, .cnts-partners-editorial, .cnts-partners-intro ) :is( p, li, span, small, .cnts-lead ) { color: var(--cnts-app-text) !important; } /* ============================================================ 24. GLOBAL FRONT-END CREAM-BLOCK REMOVAL v1.1.3 ============================================================ This is intentionally independent of the App UI page map. Any normal CNTS WordPress Page receives body.cnts-ui-global. It removes the legacy site-wide cream canvas: .cnts-section-light { background: var(--cnts-light); } The page's EXISTING cinematic/background artwork remains untouched. ============================================================ */ /* Highest-priority normalisation for old "light" content bars. */ html body.cnts-ui-global .cnts-page section.cnts-section.cnts-section-light, html body.cnts-ui-global .cnts-page .cnts-section-light, html body.cnts-ui-global section.cnts-section-light { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Kill pseudo overlays that can recreate the pale rectangle. */ html body.cnts-ui-global .cnts-page .cnts-section-light::before, html body.cnts-ui-global .cnts-page .cnts-section-light::after, html body.cnts-ui-global section.cnts-section-light::before, html body.cnts-ui-global section.cnts-section-light::after { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Common child wrappers must not repaint the removed cream surface. */ html body.cnts-ui-global .cnts-page .cnts-section-light > .cnts-container, html body.cnts-ui-global .cnts-page .cnts-section-light > .cnts-inner, html body.cnts-ui-global .cnts-page .cnts-section-light > .cnts-content { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Once the cream canvas is gone, use the cinematic text palette. */ html body.cnts-ui-global .cnts-page .cnts-section-light :is( h1, h2, h3, h4, h5, h6, strong ) { color: var(--cnts-heading-light, #e8e3da) !important; } html body.cnts-ui-global .cnts-page .cnts-section-light :is( p, li, span, small, label, .cnts-lead, .cnts-large-copy, .cnts-events-large-copy ) { color: var(--cnts-text-light, #b9b3aa) !important; } html body.cnts-ui-global .cnts-page .cnts-section-light :is( .cnts-eyebrow, .cnts-small-label, .cnts-events-small-label ) { color: var(--cnts-app-gold, #d6b56d) !important; } /* * Cards inside former light sections should remain structured dark glass, * rather than inheriting the old white-card rule from Additional CSS. */ html body.cnts-ui-global .cnts-page .cnts-section-light .cnts-card { background: rgba(22,24,26,.86) !important; color: var(--cnts-text-light, #b9b3aa) !important; border-color: rgba(255,255,255,.14) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } html body.cnts-ui-global .cnts-page .cnts-section-light .cnts-card:hover { background: rgba(28,30,32,.92) !important; } html body.cnts-ui-global .cnts-page .cnts-section-light .cnts-card h3 { color: var(--cnts-heading-light, #e8e3da) !important; } html body.cnts-ui-global .cnts-page .cnts-section-light .cnts-card p { color: var(--cnts-text-light, #b9b3aa) !important; } /* Mobile keeps the same transparency behaviour. */ @media (max-width: 768px) { html body.cnts-ui-global .cnts-page .cnts-section-light { background: transparent !important; } }