/* * AI Software Insights — Brand Asset Kit application layer. * * Lives next to the kit in assets/brand/, so every url() below is a plain * sibling filename. Loaded by wp-content/mu-plugins/brand-aisoftwareinsights.php * after tokens.css and after every theme stylesheet. * * Scope: identity surfaces only — brand mark, site header texture, homepage * hero backdrop. No layout, typography scale, content or component redesign. */ /* --------------------------------------------------------------------------- * 1. Token bridge * tokens.css owns the raw values. These aliases give the application rules * below readable names without redefining anything the theme already sets. * ------------------------------------------------------------------------ */ body { --brand-radar: var(--brand-accent, #1B5EF5); --brand-signal: var(--brand-accent-2, #F0523C); --brand-grid: var(--brand-muted, #6B7280); --brand-paper: var(--brand-bg, #FBFBFD); --brand-ink: var(--brand-fg, #0B1220); } /* --------------------------------------------------------------------------- * 2. Brand mark — logo-mark.svg * Light-surface lockups only. The footer lockup keeps the theme's inverse * mark, because logo-mark.svg carries an opaque paper plate that would read as * a white tile on the dark footer band. * * The descendant selector is deliberate: it outranks the flat * `.aisi-brand-lockup__mark { content: url(...) !important }` that the * brand-identity mu-plugin prints inline later in . * ------------------------------------------------------------------------ */ .aisi-brand-lockup:not(.aisi-brand-lockup--inverse) .aisi-brand-lockup__mark { content: url("logo-mark.svg") !important; object-fit: contain; border-radius: 6px; } /* --------------------------------------------------------------------------- * 3. Site header — pattern.svg * One non-repeating slice anchored to the inline-end corner. At this scale * only the pattern's grid region is in frame, never its centred mark, so * nothing tiles or repeats behind the navigation. * ------------------------------------------------------------------------ */ /* No `position` here on purpose: the header is `position: sticky` from the * theme, which already establishes the containing block the ::before needs. * Setting `position: relative` would silently unstick the header. */ .aisi-site-header { isolation: isolate; } .aisi-site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: url("pattern.svg"); background-repeat: no-repeat; background-position: 100% 0; background-size: auto 340%; opacity: 0.5; -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 42%, transparent 78%); mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 42%, transparent 78%); pointer-events: none; } [dir="rtl"] .aisi-site-header::before { background-position: 0 0; -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 42%, transparent 78%); mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 42%, transparent 78%); } /* Narrow screens: the nav fills the bar, so pull the texture back further. */ @media (max-width: 48rem) { .aisi-site-header::before { opacity: 0.3; } } /* --------------------------------------------------------------------------- * 4. Homepage hero — hero-background.svg * The theme already uses `.aisi-decision-hero::after` for its coral blob, so * the backdrop goes on ::before, beneath the hero's children (the theme * already raises those to z-index 1). * * hero-background.svg embeds its own "AI Software Insights" wordmark across * its top fifth, which would ghost behind the real

. The artwork is * therefore anchored to the block-end edge and the top 32% of the layer is a * fully opaque paper band — with `cover`, the wordmark can never fall below * that band at any hero size, so it cannot read through. * * The wash is expressed entirely in gradient alpha, never in `opacity` on the * element: element opacity would fade the masking band along with the artwork * and let the wordmark back in. * ------------------------------------------------------------------------ */ body.home .aisi-decision-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( to bottom, var(--brand-paper, #FBFBFD) 0%, var(--brand-paper, #FBFBFD) 32%, rgba(251, 251, 253, 0.78) 48%, rgba(251, 251, 253, 0.62) 72%, rgba(251, 251, 253, 0.58) 100% ), url("hero-background.svg"); background-repeat: no-repeat, no-repeat; background-position: center, 50% 100%; background-size: auto, cover; pointer-events: none; } /* The theme's coral blob stacks on top of the artwork; soften it so the two * brand layers do not compound into a muddy patch. */ body.home .aisi-decision-hero::after { opacity: 0.55; } /* --------------------------------------------------------------------------- * 5. Mobile navigation — logo-lockup.svg * The panel that drops out of the header on small screens opens straight into * a search field with no identity of its own. The full lockup is the right * asset for that gap: it has room to read at full size, and it only appears * once the user has opened the menu. * * It is not placed in the hero: the copy column runs headline → lede → * buttons → search with no free block, and the right column belongs to the * decision-brief card. * ------------------------------------------------------------------------ */ /* The strip carries the kit's own paper colour edge to edge. The lockup asset * ships with an opaque paper plate, and matching the strip to it is what keeps * that plate from reading as a stray box against the panel background. */ .aisi-mobile-nav::before { content: ""; display: block; block-size: 2.5rem; margin-block-end: 0.75rem; border-block-end: 1px solid color-mix(in srgb, var(--brand-grid, #6B7280) 25%, transparent); background-color: var(--brand-paper, #FBFBFD); background-image: url("logo-lockup.svg"); background-repeat: no-repeat; background-position: 0 50%; background-size: auto 100%; } [dir="rtl"] .aisi-mobile-nav::before { background-position: 100% 50%; } /* --------------------------------------------------------------------------- * 6. Print — drop the decorative layers. They are ink-expensive and carry no * information, and print engines render background graphics inconsistently. * * No printed lockup here on purpose: browsers suppress background graphics * when printing, and the replaced-content alternative rendered as a bare rule * with no artwork. A printed brand header needs real markup in the templates, * which is outside the scope of this change. * ------------------------------------------------------------------------ */ @media print { .aisi-site-header::before, .aisi-decision-hero::before, .aisi-mobile-nav::before { display: none !important; } } /* --------------------------------------------------------------------------- * 7. Forced colors — drop decoration rather than fight the user's palette. * ------------------------------------------------------------------------ */ @media (forced-colors: active) { .aisi-site-header::before, .aisi-decision-hero::before, .aisi-mobile-nav::before { display: none; } }