/* Theme Name: PKWARE Theme URI: https://www.pkware.com Description: Minimal classic theme for pkware.com. Renders hand-authored HTML with a consolidated design system. No page builder. Author: Bob Cristello Author URI: https://www.pkware.com Tags: one-column, custom-logo, custom-menu, editor-style, featured-images, translation-ready Version: 1.10.14 Requires at least: 6.9 Tested up to: 7.1 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: pkware */ /* ========================================================================== TABLE OF CONTENTS 1. Header block ................ the WordPress theme header above 2. Font face declarations ...... self-hosted Lato 3. Design tokens ............... brand palette, scales, custom properties 4. Reset and normalize 5. Base elements and typography 6. Layout and containers 7. Site header and navigation 8. Ported page components ...... per page; NOT pk27- (those are a plugin) 9. Site footer 10. Utilities 11. Accessibility 12. Print Conventions ----------- - Every colour in this file comes from the PKWARE palette in section 3. Borders, shadows and focus rings are derived from palette tokens via the -rgb triplet variables, never from new hex values. - Page and post content is hand-authored HTML. This stylesheet must style that content without assuming any wrapper markup the author did not write. ========================================================================== */ /* ========================================================================== 2. FONT FACE DECLARATIONS -------------------------------------------------------------------------- Lato is self-hosted from assets/fonts/ rather than loaded from Google's CDN. Requesting a font from fonts.gstatic.com transmits the visitor's IP address to a third party on every page view, which is exactly the GDPR exposure the site's consent-management work is intended to remove. Serving the files from our own origin keeps that data on our infrastructure and means no font request is gated behind consent. Drop the .woff2 files into assets/fonts/ using the names below. Until they are present the stack falls through to the system sans-serif; nothing breaks. font-display: swap renders fallback text immediately rather than blocking paint. ========================================================================== */ @font-face { font-family: 'Lato'; src: url('assets/fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('assets/fonts/lato-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('assets/fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('assets/fonts/lato-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* ========================================================================== 3. DESIGN TOKENS -------------------------------------------------------------------------- The official PKWARE brand palette, and nothing outside it. If a value is needed that is not here, derive it from these tokens - do not add a hex. The -rgb triplets exist so translucent borders, shadows and overlays can be built with rgba() while still being palette colours. This is the only sanctioned way to produce a semi-transparent brand colour. ========================================================================== */ :root { /* --- Brand palette ------------------------------------------------- */ --pk-navy: #1e3074; --pk-frost: #0fe4a2; --pk-cyan: #09bcef; --pk-white: #FFFFFF; --pk-deep-purple: #25275c; --pk-blue: #1152be; --pk-tech-purple: #273074; --pk-silicone: #47494c; --pk-slate: #4c5c68; --pk-coral: #f95557; --pk-web-purple: #616bce; --pk-grey: #f1f5fa; /* --- Palette RGB triplets, for rgba() derivation ------------------- */ --pk-navy-rgb: 30, 48, 116; --pk-frost-rgb: 15, 228, 162; --pk-cyan-rgb: 9, 188, 239; --pk-white-rgb: 255, 255, 255; --pk-deep-purple-rgb: 37, 39, 92; --pk-blue-rgb: 17, 82, 190; --pk-tech-purple-rgb: 39, 48, 116; --pk-silicone-rgb: 71, 73, 76; --pk-slate-rgb: 76, 92, 104; --pk-coral-rgb: 249, 85, 87; --pk-web-purple-rgb: 97, 107, 206; --pk-grey-rgb: 241, 245, 250; /* --- Semantic assignments ------------------------------------------ */ --pk-color-text: var(--pk-silicone); --pk-color-heading: var(--pk-navy); --pk-color-link: var(--pk-blue); --pk-color-link-hover: var(--pk-navy); --pk-color-bg: var(--pk-white); --pk-color-bg-alt: var(--pk-grey); --pk-color-accent: var(--pk-frost); /* Derived, not new colours */ --pk-color-border: rgba(var(--pk-slate-rgb), 0.18); --pk-color-border-strong: rgba(var(--pk-navy-rgb), 0.32); --pk-color-focus: var(--pk-cyan); --pk-shadow-sm: 0 1px 2px rgba(var(--pk-navy-rgb), 0.08); --pk-shadow-md: 0 4px 12px rgba(var(--pk-navy-rgb), 0.12); --pk-shadow-lg: 0 12px 32px rgba(var(--pk-navy-rgb), 0.18); --pk-overlay: rgba(var(--pk-deep-purple-rgb), 0.72); /* --- Spacing scale ------------------------------------------------- */ --pk-space-3xs: 0.25rem; --pk-space-2xs: 0.5rem; --pk-space-xs: 0.75rem; --pk-space-sm: 1rem; --pk-space-md: 1.5rem; --pk-space-lg: 2rem; --pk-space-xl: 3rem; --pk-space-2xl: 4rem; --pk-space-3xl: 6rem; /* --- Type scale ---------------------------------------------------- */ --pk-font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --pk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pk-text-xs: 0.75rem; --pk-text-sm: 0.875rem; --pk-text-base: 1rem; --pk-text-lg: 1.125rem; --pk-text-xl: 1.375rem; --pk-text-2xl: 1.75rem; --pk-text-3xl: 2.25rem; --pk-text-4xl: 3rem; --pk-text-5xl: 3.75rem; --pk-leading-tight: 1.15; --pk-leading-snug: 1.35; --pk-leading-normal: 1.6; --pk-leading-loose: 1.8; --pk-weight-regular: 400; --pk-weight-bold: 700; --pk-weight-black: 900; /* --- Layout -------------------------------------------------------- */ --pk-container-max: 1200px; --pk-container-narrow: 780px; --pk-container-pad: var(--pk-space-md); --pk-header-height: 5rem; /* --- Border radius ------------------------------------------------- */ --pk-radius-none: 0; --pk-radius-sm: 2px; --pk-radius-md: 6px; --pk-radius-lg: 12px; --pk-radius-pill: 999px; /* --- Transition timing --------------------------------------------- */ --pk-duration-fast: 120ms; --pk-duration-base: 200ms; --pk-duration-slow: 320ms; --pk-ease: cubic-bezier(0.4, 0, 0.2, 1); --pk-transition: var(--pk-duration-base) var(--pk-ease); /* --- Elevation ----------------------------------------------------- */ --pk-z-header: 100; --pk-z-nav: 200; --pk-z-skiplink: 300; /* --- Page edge inset ---------------------------------------------- THE SINGLE SOURCE OF THE HORIZONTAL PAGE INSET. Added 2026-08-12 for Bob: "can we consistently left align all work to the header at 1300px, leaving padding for tablet and mobile please?" Three containers consume it - .pk-header__inner, .pk-crumbs__wrap and #pkw .wrap - and all three are capped at 1300px. Because they share both the cap and this inset, their left edges are identical at every viewport. Change THIS, not the individual rules, or they drift apart again. Zero on desktop is deliberate and is what makes the alignment work: with a 1300px cap and no padding, every container's left edge is (V - 1300) / 2. Add padding at that width and the container moves inward while the header does not. Below 1300px the cap stops applying, so the inset below is the only thing keeping content off the window edge - which is why it is not zero there. It must live on :root, NOT #pkw. The header and breadcrumb render outside #pkw, and a var() whose token is out of scope invalidates the whole declaration silently. See --maxw, which is #pkw-scoped for exactly the opposite reason. Overrides are in the two media queries immediately after this block. */ --pk-edge: 0px; } /* The only two overrides of --pk-edge. Kept adjacent to the definition on purpose: an inset scattered across four section-specific media queries is how the header, breadcrumb and page content drifted apart in the first place. 1340px, not 1300px: at exactly 1300px a 1300px-capped container would sit edge to edge with nothing to spare, so the inset starts a little before the cap binds. */ @media (max-width: 1340px) { :root { --pk-edge: 20px; } } @media (max-width: 480px) { :root { --pk-edge: 12px; } } /* ========================================================================== 4. RESET AND NORMALIZE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } iframe, embed, object { max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* ========================================================================== 5. BASE ELEMENTS AND TYPOGRAPHY ========================================================================== */ html { scroll-behavior: smooth; } body { background-color: var(--pk-color-bg); color: var(--pk-color-text); font-family: var(--pk-font-sans); font-size: var(--pk-text-base); font-weight: var(--pk-weight-regular); line-height: var(--pk-leading-normal); min-height: 100vh; text-rendering: optimizeSpeed; } h1, h2, h3, h4, h5, h6 { color: var(--pk-color-heading); font-weight: var(--pk-weight-bold); line-height: var(--pk-leading-tight); margin-block-end: var(--pk-space-sm); } h1 { font-size: var(--pk-text-4xl); font-weight: var(--pk-weight-black); } h2 { font-size: var(--pk-text-3xl); } h3 { font-size: var(--pk-text-2xl); } h4 { font-size: var(--pk-text-xl); } h5 { font-size: var(--pk-text-lg); } h6 { font-size: var(--pk-text-base); text-transform: uppercase; letter-spacing: 0.06em; } p { margin-block-end: var(--pk-space-sm); } a { color: var(--pk-color-link); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--pk-transition); } a:hover, a:focus { color: var(--pk-color-link-hover); } strong, b { font-weight: var(--pk-weight-bold); } small { font-size: var(--pk-text-sm); } hr { border: 0; border-block-start: 1px solid var(--pk-color-border); margin-block: var(--pk-space-xl); } blockquote { border-inline-start: 3px solid var(--pk-color-accent); padding-inline-start: var(--pk-space-md); margin-block: var(--pk-space-lg); color: var(--pk-slate); } code, kbd, samp, pre { font-family: var(--pk-font-mono); font-size: var(--pk-text-sm); } code { background-color: var(--pk-color-bg-alt); border-radius: var(--pk-radius-sm); padding: 0.1em 0.35em; } pre { background-color: var(--pk-color-bg-alt); border-radius: var(--pk-radius-md); overflow-x: auto; padding: var(--pk-space-sm); } pre code { background: none; padding: 0; } th, td { border-block-end: 1px solid var(--pk-color-border); padding: var(--pk-space-2xs) var(--pk-space-xs); text-align: start; } th { color: var(--pk-color-heading); font-weight: var(--pk-weight-bold); } figcaption { color: var(--pk-slate); font-size: var(--pk-text-sm); margin-block-start: var(--pk-space-3xs); } /* ========================================================================== 6. LAYOUT AND CONTAINERS ========================================================================== */ .pk-container { margin-inline: auto; max-width: var(--pk-container-max); padding-inline: var(--pk-container-pad); width: 100%; } .pk-container--narrow { max-width: var(--pk-container-narrow); } /* Top padding only. The ported header is sticky, so main needs a little clearance below it; the footer supplies its own top padding, so a bottom value here would double up. Set explicitly per Bob 2026-08-10 - the literal values are intentional rather than tokens, and the zeroes are written out so nothing inherits a surprise. */ .site-main { display: block; padding-top: 20px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } .entry-header { margin-block-end: var(--pk-space-lg); } .entry-meta { color: var(--pk-slate); font-size: var(--pk-text-sm); } /* Hand-authored content owns its own layout. Only spacing rhythm is applied here - no width constraint, no assumed wrappers. */ .entry-content > * + * { margin-block-start: var(--pk-space-sm); } .post-list { display: grid; gap: var(--pk-space-lg); list-style: none; margin: 0; padding: 0; } .post-list__item { border-block-end: 1px solid var(--pk-color-border); padding-block-end: var(--pk-space-lg); } .post-list__item:last-child { border-block-end: 0; } .pagination { display: flex; flex-wrap: wrap; gap: var(--pk-space-2xs); margin-block-start: var(--pk-space-xl); } .pagination .page-numbers { border: 1px solid var(--pk-color-border); border-radius: var(--pk-radius-md); padding: var(--pk-space-3xs) var(--pk-space-2xs); text-decoration: none; } .pagination .page-numbers.current { background-color: var(--pk-navy); border-color: var(--pk-navy); color: var(--pk-white); } /* ========================================================================== 7. SITE HEADER AND NAVIGATION -------------------------------------------------------------------------- PORTED FROM PRODUCTION - 2026-08-10. Source: incoming/sticky-light-header/sticky-light-header.css Header variant: STICKY LIGHT. This is the first of three headers; when the others arrive, each gets its own delimited block here and its own partial in template-parts/. Markup: template-parts/header-sticky-light.php, rendered at body level by header.php. Behaviour: assets/js/navigation.js. Desktop dropdowns and the three-level flyouts are pure CSS :hover and :focus-within. JavaScript only handles the mobile burger, the mobile accordion, the search panel, and the stuck shadow. CHANGES FROM THE SOURCE FILE --------------------------------------------------------------------------- 1. Two Avada-only rules removed - they targeted .fusion-fullwidth and nav.fusion-breadcrumbs, neither of which exists in this theme. Zero fusion- references remain. 2. Three local custom properties deleted because they redeclared section 3 tokens with identical values: --pk-navy, --pk-cyan, --pk-white. They now inherit from :root, so there is one definition per colour. 3. --pk-hover-bg and --pk-max repointed at var(--pk-grey) and var(--pk-container-max), whose values they were duplicating. KNOWN EXCEPTION TO THE PALETTE RULE --------------------------------------------------------------------------- Section 3 states no colour outside the brand palette may be introduced. This ported block breaks that, and the values are left verbatim on purpose - rewriting production colours by eye during a port makes a porting mistake indistinguishable from a deliberate change. Map them to tokens as a separate reviewable pass. The off-palette values are --pk-ink (#292929), --pk-active (#0a58ca), the search input background, the mega icon hover, and a number of rgba(0,0,0,...) shadows and hairline borders. ========================================================================== */ /* ============================================================ PKWARE header - styles Three-level cascading flyouts. Everything scoped under .pk-header / .pk-nav / .pk-search ============================================================ */ .pk-header { --pk-ink: #292929; --pk-active: #0a58ca; --pk-hover-bg: var(--pk-grey); /* palette: --pk-grey */ --pk-radius: 12px; --pk-gap: 18px; --pk-font: 18px; --pk-sub-font: 16px; --pk-row-pad-y: 12px; --pk-row-pad-x: 20px; --pk-panel-pad-y: 8px; --pk-logo-w: 200px; --pk-max: var(--pk-container-max); --pk-h: 84px; position: sticky; top: 0; z-index: 999999; background: var(--pk-white); font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: box-shadow .2s ease; } .pk-header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.10); } .pk-header *, .pk-header *::before, .pk-header *::after { box-sizing: border-box; } /* Bob's values, 2026-08-12. max-width was ALREADY 1300px - what actually changed is padding 0 20px -> 0. That is the meaningful edit, not the max-width: .pk-header sets box-sizing:border-box two rules up, so the 20px was subtracted from the 1300px and the header CONTENT was spanning 1260px. Removing it makes the box genuinely 1300px, which also lines the header up with .pkbc-container (1300px, no padding). The 480px block further down still sets padding: 0 12px, so phones keep an inset. BETWEEN 481px AND 1300px THERE IS NOW NO HORIZONTAL INSET - the logo and hamburger sit flush against the window edge. That is the literal consequence of padding 0, left as asked rather than silently guarded. */ .pk-header__inner { max-width: calc(1300px + 2 * var(--pk-edge)); margin: 0 auto; padding: 0 var(--pk-edge); min-height: var(--pk-h); display: flex; align-items: center; gap: 24px; } /* ---------- logo ---------- */ .pk-header__logo { flex: 0 0 auto; line-height: 0; } .pk-header__logo img { width: var(--pk-logo-w); max-width: 100%; height: auto; display: block; } /* ---------- panel wrapper ---------- */ .pk-header__panel { flex: 1 1 auto; display: flex; align-items: center; gap: 24px; } /* ---------- level 1 ---------- */ .pk-nav { flex: 1 1 auto; } .pk-nav__l1 { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-start; gap: var(--pk-gap); } .pk-nav__item { position: relative; } .pk-nav__item > a { display: block; padding: 10px 2px; font-size: var(--pk-font); font-weight: 400; line-height: 1.2; color: var(--pk-ink); text-decoration: none; white-space: nowrap; transition: color .15s ease; } .pk-nav__item > a:hover, .pk-nav__item > a:focus-visible, .pk-nav__item.is-open > a { color: var(--pk-active); } /* down caret on level-1 parents */ .pk-nav__item--parent > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg); transform-origin: 60% 60%; transition: transform .15s ease; } .pk-nav__item--parent:hover > a::after, .pk-nav__item--parent:focus-within > a::after, .pk-nav__item--parent.is-open > a::after { transform: rotate(-135deg); } .pk-nav__toggle { display: none; background: none; border: 0; cursor: pointer; } /* ---------- level 2 panel ---------- */ .pk-nav__panel { display: none; position: absolute; top: 100%; left: 0; z-index: 10; min-width: 280px; padding: var(--pk-panel-pad-y) 0; background: var(--pk-navy); border-radius: var(--pk-radius); box-shadow: 0 12px 32px rgba(0,0,0,.18); } .pk-nav__item:hover > .pk-nav__panel, .pk-nav__item:focus-within > .pk-nav__panel, .pk-nav__item.is-open > .pk-nav__panel, .pk-nav__panel:hover { display: block; } .pk-nav__l2, .pk-nav__l3 { list-style: none; margin: 0; padding: 0; } .pk-nav__sub { position: relative; } /* shared row styling for links and non-link group labels */ .pk-nav__l2 > li > a, .pk-nav__l3 > li > a, .pk-nav__row { display: block; padding: var(--pk-row-pad-y) var(--pk-row-pad-x); font-size: var(--pk-sub-font); line-height: 1.35; color: var(--pk-white); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s ease, color .12s ease; } /* hover state: light background, cyan text */ .pk-nav__l2 > li > a:hover, .pk-nav__l2 > li > a:focus-visible, .pk-nav__l3 > li > a:hover, .pk-nav__l3 > li > a:focus-visible, .pk-nav__sub--parent:hover > .pk-nav__row, .pk-nav__sub--parent:focus-within > .pk-nav__row { background: var(--pk-hover-bg); color: var(--pk-cyan); } /* right caret on level-2 parents */ .pk-nav__sub--parent > .pk-nav__row::after { content: ""; position: absolute; right: var(--pk-row-pad-x); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(-45deg); } .pk-nav__sub--parent > .pk-nav__row { padding-right: calc(var(--pk-row-pad-x) * 2 + 8px); } /* ---------- level 3 flyout ---------- */ .pk-nav__l3 { display: none; position: absolute; left: 100%; top: calc(var(--pk-panel-pad-y) * -1); z-index: 11; min-width: 260px; padding: var(--pk-panel-pad-y) 0; background: var(--pk-navy); border-radius: var(--pk-radius); box-shadow: 0 12px 32px rgba(0,0,0,.18); } .pk-nav__sub--parent:hover > .pk-nav__l3, .pk-nav__sub--parent:focus-within > .pk-nav__l3, .pk-nav__sub--parent.is-open > .pk-nav__l3, .pk-nav__l3:hover { display: block; } /* flip the flyout to the left if it would run off the right edge */ .pk-nav__item:nth-last-child(-n+3) .pk-nav__l3 { left: auto; right: 100%; } /* ---------- actions ---------- */ .pk-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; } .pk-header__search-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--pk-ink); cursor: pointer; transition: color .15s ease, background .15s ease; } .pk-header__search-btn svg { fill: currentColor; } .pk-header__search-btn:hover, .pk-header__search-btn[aria-expanded="true"] { color: var(--pk-active); background: rgba(0,0,0,.05); } .pk-header__cta { display: inline-block; padding: 16px 20px; background: var(--pk-cyan); color: #000; font-size: 16px; font-weight: 700; line-height: 1; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: filter .15s ease, border-color .15s ease; } .pk-header__cta:hover, .pk-header__cta:focus-visible { filter: brightness(.92); border-color: var(--pk-white); color: #000; } /* Avada resets button radius, so force the pill with raised specificity */ .pk-header .pk-header__actions a.pk-header__cta, .pk-header .pk-header__actions a.pk-header__cta:hover, .pk-header .pk-header__actions a.pk-header__cta:focus-visible { border-radius: 200px !important; } /* ---------- search ---------- */ .pk-search { border-top: 1px solid rgba(0,0,0,.08); background: var(--pk-white); } .pk-search[hidden] { display: none; } .pk-search__form { max-width: var(--pk-max); margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 10px; } .pk-search__input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: 18px; color: var(--pk-ink); background: #f5f7fa; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; } .pk-search__input:focus { outline: 2px solid var(--pk-cyan); outline-offset: 1px; } .pk-search__submit, .pk-search__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; } .pk-search__submit { background: var(--pk-cyan); color: #000; } .pk-search__close { background: transparent; color: var(--pk-ink); } .pk-search__submit svg, .pk-search__close svg { fill: currentColor; } .pk-search__close:hover { background: rgba(0,0,0,.06); } /* ---------- burger ---------- */ .pk-header__burger { display: none; flex: 0 0 auto; margin-left: auto; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .pk-header__burger-bar { display: block; height: 2px; background: var(--pk-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .pk-header__burger-bar + .pk-header__burger-bar { margin-top: 5px; } .pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(2) { opacity: 0; } .pk-header__burger[aria-expanded="true"] .pk-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ MOBILE / TABLET - single tree, reflowed as a nested accordion ============================================================ */ @media (max-width: 1200px) { .pk-header__inner { gap: 12px; flex-wrap: wrap; } .pk-header__burger { display: block; } .pk-header__panel { flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .28s ease, visibility .28s; } .pk-header__panel.is-open { max-height: calc(100vh - var(--pk-h)); overflow-y: auto; visibility: visible; padding-bottom: 20px; } .pk-nav__l1 { flex-direction: column; align-items: stretch; gap: 0; } .pk-nav__item { border-bottom: 1px solid rgba(0,0,0,.08); } .pk-nav__item > a { padding: 16px 4px; font-size: 18px; white-space: normal; } /* level-1 rows become label + toggle */ .pk-nav__item--parent { display: grid; grid-template-columns: 1fr 48px; align-items: center; } .pk-nav__item--parent > a { grid-column: 1; } .pk-nav__item--parent > a::after { content: none; } /* level-2 parents likewise */ .pk-nav__sub--parent { display: grid; grid-template-columns: 1fr 48px; align-items: center; } .pk-nav__sub--parent > .pk-nav__row { grid-column: 1; } .pk-nav__sub--parent > .pk-nav__row::after { content: none; } .pk-nav__sub--parent > .pk-nav__row { padding-right: var(--pk-row-pad-x); } .pk-nav__toggle { display: block; grid-column: 2; width: 48px; height: 48px; position: relative; } .pk-nav__toggle::before, .pk-nav__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--pk-ink); transform: translate(-50%,-50%); transition: transform .2s ease; } .pk-nav__toggle::after { transform: translate(-50%,-50%) rotate(90deg); } .pk-nav__toggle[aria-expanded="true"]::after { transform: translate(-50%,-50%) rotate(0deg); } /* level-2 toggle bars sit on the navy panel */ .pk-nav__toggle--sub::before, .pk-nav__toggle--sub::after { background: var(--pk-white); } /* panels become in-flow, driven only by .is-open */ .pk-nav__panel, .pk-nav__l3 { display: none; position: static; grid-column: 1 / -1; min-width: 0; box-shadow: none; border-radius: 8px; z-index: auto; left: auto; right: auto; top: auto; } .pk-nav__panel { margin: 0 0 12px; } .pk-nav__l3 { margin: 0; border-radius: 0; background: rgba(0,0,0,.18); } .pk-nav__item:hover > .pk-nav__panel, .pk-nav__item:focus-within > .pk-nav__panel, .pk-nav__panel:hover, .pk-nav__sub--parent:hover > .pk-nav__l3, .pk-nav__sub--parent:focus-within > .pk-nav__l3, .pk-nav__l3:hover { display: none; } .pk-nav__item.is-open > .pk-nav__panel, .pk-nav__sub--parent.is-open > .pk-nav__l3 { display: block; } .pk-nav__l2 > li > a, .pk-nav__l3 > li > a, .pk-nav__row { white-space: normal; } .pk-nav__item--wide .pk-nav__panel { width: auto; max-width: none; } /* actions stay in the header row, centred between logo and burger */ .pk-header__logo { order: 1; } .pk-header__actions { order: 2; margin-left: auto; margin-right: auto; gap: 10px; } .pk-header__burger { order: 3; margin-left: 0; } .pk-header__panel { order: 4; } .pk-header__cta { padding: 10px 16px; font-size: 13px; } .pk-header__search-btn { width: 34px; height: 34px; } .pk-header__search-btn svg { width: 19px; height: 19px; } } @media (max-width: 480px) { .pk-header { --pk-logo-w: 132px; --pk-h: 68px; } /* Horizontal padding removed - it now comes from --pk-edge, which is 12px at this width. Hardcoding it here would put the header back out of step with the breadcrumb and page content. */ .pk-header__inner { gap: 8px; } .pk-header__actions { gap: 6px; } .pk-header__cta { padding: 9px 12px; font-size: 11px; } .pk-header__search-btn { width: 30px; height: 30px; } .pk-header__search-btn svg { width: 17px; height: 17px; } .pk-search__form { flex-wrap: wrap; } .pk-search__input { flex: 1 1 100%; order: 1; } } /* ============================================================ v3 - SECTION ONE: PLATFORM NAVY MEGA PANEL Reworks ONLY the Platform dropdown into a headed two-column card grid on the SAME navy panel. Scoped to .pk-nav__panel--mega so the other dropdowns are untouched. Icons use stroke:currentColor -> same SVGs go light on navy / dark on a future white panel (only .pk-mega__ico color flips). ============================================================ */ .pk-nav__panel--mega { left: 0; min-width: 640px; padding: 22px; } .pk-mega__head { margin: 0 0 8px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); } .pk-mega__head--spaced { margin-top: 18px; } .pk-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; } .pk-mega__link { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; text-decoration: none; transition: background .15s ease, color .15s ease; } .pk-mega__link--compact { align-items: center; padding: 9px 12px; } .pk-mega__ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.10); color: var(--pk-white); transition: background .15s ease, color .15s ease; } .pk-mega__ico svg { width: 18px; height: 18px; display: block; } .pk-mega__body { display: block; min-width: 0; } .pk-mega__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--pk-white); } .pk-mega__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62); white-space: normal; } .pk-mega__tag { flex: 0 0 auto; font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--pk-cyan); background: rgba(9,188,239,.16); } /* hover: light-surface flip, matching the existing navy-dropdown hover */ .pk-mega__link:hover, .pk-mega__link:focus-visible { background: var(--pk-hover-bg); } .pk-mega__link:hover .pk-mega__title, .pk-mega__link:focus-visible .pk-mega__title { color: var(--pk-active); } .pk-mega__link:hover .pk-mega__desc, .pk-mega__link:focus-visible .pk-mega__desc { color: var(--pk-ink); } .pk-mega__link:hover .pk-mega__ico, .pk-mega__link:focus-visible .pk-mega__ico { background: #e7f0f9; color: var(--pk-navy); } .pk-mega__link:hover .pk-mega__tag, .pk-mega__link:focus-visible .pk-mega__tag { color: var(--pk-navy); background: rgba(30,48,116,.12); } @media (max-width: 1200px) { .pk-nav__panel--mega { min-width: 0; padding: 4px 0 10px; } .pk-nav__panel--mega .pk-mega__grid { grid-template-columns: 1fr; gap: 0; } .pk-nav__panel--mega .pk-mega__head { padding: 12px 4px 4px; } .pk-nav__panel--mega .pk-mega__link { padding: 12px 4px; } .pk-nav__panel--mega .pk-mega__link:hover, .pk-nav__panel--mega .pk-mega__link:focus-visible { background: rgba(255,255,255,.06); } .pk-nav__panel--mega .pk-mega__link:hover .pk-mega__title, .pk-nav__panel--mega .pk-mega__link:focus-visible .pk-mega__title { color: var(--pk-cyan); } .pk-nav__panel--mega .pk-mega__link:hover .pk-mega__desc, .pk-nav__panel--mega .pk-mega__link:focus-visible .pk-mega__desc { color: rgba(255,255,255,.7); } .pk-nav__panel--mega .pk-mega__link:hover .pk-mega__ico, .pk-nav__panel--mega .pk-mega__link:focus-visible .pk-mega__ico { background: rgba(255,255,255,.12); color: var(--pk-white); } .pk-nav__panel--mega .pk-mega__link:hover .pk-mega__tag, .pk-nav__panel--mega .pk-mega__link:focus-visible .pk-mega__tag { color: var(--pk-cyan); background: rgba(9,188,239,.16); } } /* ========================================================================== 8. PORTED PAGE COMPONENTS -------------------------------------------------------------------------- CSS ported from real production pages, in delimited blocks that name their source page. This section was originally reserved for the pk27- component styles and marked "intentionally empty". Both of those are now wrong, and the header is renamed so nobody ports by the old instruction: - It is not empty. It holds the home page's #pkw block and .promo. - pk27- rules do NOT belong here. They are printed by the PKWARE Shortcodes plugin, from pk27_styles(), pk27f_styles(), pk27e_styles() and pk27s_styles(). Putting them here creates two sources for the same selectors, which already happened once - see the .pk27-grid note further down this section. Rely on the tokens in section 3 rather than reintroducing literal hex values. The one documented exception: colours arriving verbatim in a port are left exactly as ported and recorded, so a porting mistake stays distinguishable from a deliberate change. ========================================================================== */ /* --- begin ported page components --- */ /* * PORTED FROM PRODUCTION - 2026-08-10 * ------------------------------------------------------------------------- * Source: the live home page, https://staging.pkware.com/ (page id 6), * extracted to outgoing/home/. That page's rendered document loads 17 CSS * sources; only three are bespoke AND referenced by the hand-authored markup. * The other fourteen are Avada, Formidable and Complianz framework and were * deliberately NOT ported: * * ported: * block [14] #pkw ........... 36,523 bytes home page content styles * block [15] .pk27-grid ...... 2,361 bytes pk27 component * block [12] .promo .......... 692 bytes * * present in production but NOT ported, and why: * block [13] .pk-header / .pk-nav the mega menu - no markup for it * yet; arrives with the menu port * block [16] .pk-footer same, for the site footer * block [17] .embeddedMessaging* Salesforce chat widget overrides * block [11] .with_frm_style Formidable form overrides * fusion-dynamic-css, formidable-css, cmplz-*, child-style-css, * css-fb-visibility ......... 1.23 MB of framework being retired * * KNOWN EXCEPTION TO THE PALETTE RULE * ------------------------------------------------------------------------- * Section 3 states that no colour outside the brand palette may be introduced. * This ported block breaks that rule: it carries 39 distinct hex values, of * which 33 are off-palette (one more, #fff, is simply shorthand for white). * * They are left verbatim ON PURPOSE. Rewriting production values by eye during * a port would change the rendering and make it impossible to tell a porting * mistake from a deliberate colour change. Map them to tokens as a separate, * reviewable pass once the page is confirmed rendering correctly. * * SCOPE NOTE * ------------------------------------------------------------------------- * Block [14] is scoped entirely under #pkw and applies to one page, but ships * in the site-wide stylesheet, so every page downloads ~36 KB it does not use. * The alternative is leaving it inline in that page's content. Kept here for * now because it is easier to review in one place. */ /* =========== PROMO BAR =========== */ .promo{background:linear-gradient(90deg,#09BCEF,#0FE4A2);color:#082b52; font-weight:700;font-size:14.5px;text-align:center;padding:11px 20px;position:relative;z-index:60} .promo .wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 26px} .promo .pill{display:inline-flex;align-items:center;gap:8px;background:#1E3074;color:#fff; padding:8px 18px;border-radius:999px;font-size:13px;transition:transform .28s,background .28s} .promo .pill:hover{transform:translateY(-1px);background:#152357} .promo .pill svg{width:14px;height:14px} /* Google Fonts: Lato (body/UI). Georgia is a system serif, no load needed. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap'); /* ============================================================ PKWARE.com - Homepage Scoped under #pkw. Georgia (display) + Lato (body/UI) only. Dark-and-luminous default; .pkw-light / .pkw-grey remap tokens. ============================================================ */ #pkw *,#pkw *::before,#pkw *::after{box-sizing:border-box} #pkw{ --navy:#1E3074; --cyan:#09BCEF; --cyan-700:#057FA3; --frost:#0FE4A2; --frost-deep:#0B6E4E; --coral:#F95557; /* light-forward default */ --bg:#FFFFFF; --bg-2:#F4F8FD; --bg-3:#EDF4FB; --panel:#FFFFFF; --tx:#3D4457; --tx-2:#5C6472; --tx-3:#8A93A8; --head:#1E3074; --eb:var(--frost-deep); --brd:#E7EAF1; --brd-2:#D8DEE9; --glass:#F7F9FC; --glass-2:#FFFFFF; --frost-glow:rgba(15,228,162,.40); --cyan-glow:rgba(9,188,239,.42); --card-shadow:0 20px 50px -28px rgba(30,48,116,.26); --serif:Georgia,"Times New Roman",serif; --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --maxw:calc(1300px + 2 * var(--pk-edge)); --gutter:26px; font-family:var(--sans); color:var(--tx); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:18px; line-height:1.7; position:relative; overflow-x:clip; } #pkw h1,#pkw h2,#pkw h3,#pkw h4{font-family:var(--serif);font-weight:400;color:var(--head);margin:0;letter-spacing:-.01em} #pkw p{margin:0} #pkw a{color:inherit;text-decoration:none} #pkw img{max-width:100%;display:block} #pkw ul{margin:0;padding:0;list-style:none} #pkw button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} #pkw :focus-visible{outline:2px solid var(--frost);outline-offset:3px;border-radius:6px} /* ---- section shells & rhythm ---- */ #pkw .sec{position:relative;padding:118px 0;background-color:var(--bg)} /* ALIGNED TO THE HEADER 2026-08-12. --maxw went 1240px -> 1300px and the horizontal padding moved from --gutter (26px) to --pk-edge, which is 0 on desktop. Both were needed: the narrower cap contributed 30px of the misalignment and the gutter the other 26px, for the 56px indent Bob saw on home, products and why-pk-protect. --gutter is left defined at 26px because it is a #pkw token other ports may still reach for; it simply no longer sets the page edge. */ #pkw .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pk-edge);position:relative;z-index:2} #pkw .pkw-light{background-color:#FFFFFF;color:#484848; --head:#1E3074; --tx:#484848; --tx-2:#5C6472; --tx-3:#8A93A8; --eb:var(--frost-deep); --brd:#E7EAF1; --brd-2:#D8DEE9; --glass:#F7F9FC; --glass-2:#FFFFFF;} #pkw .pkw-grey{background-color:#EDF4FB; background-image:radial-gradient(1100px 460px at 82% -12%,rgba(9,188,239,.09),transparent 60%),radial-gradient(900px 420px at 8% 118%,rgba(15,228,162,.07),transparent 60%); color:#484848; --head:#1E3074; --tx:#484848; --tx-2:#5C6472; --tx-3:#8A93A8; --eb:var(--frost-deep); --brd:#E1E7F1; --brd-2:#D2DAE7; --glass:#FFFFFF; --glass-2:#FFFFFF;} /* strategic dark anchor sections */ #pkw .pkw-dark{background-color:#070C24;color:#EEF2FF; --bg:#070C24; --head:#FFFFFF; --tx:#EEF2FF; --tx-2:#AEB8DC; --tx-3:#8791B8; --eb:var(--frost); --brd:rgba(255,255,255,.10); --brd-2:rgba(255,255,255,.17); --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);} #pkw .pkw-dark .eyebrow::before{background:var(--frost);box-shadow:0 0 10px var(--frost-glow)} #pkw .pkw-dark .frost-word{color:var(--frost)} #pkw .pkw-dark .card{box-shadow:0 24px 60px -34px rgba(0,0,0,.7)} /* light soft wash atmosphere */ #pkw .wash{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #pkw .wash::before{content:"";position:absolute;width:780px;height:780px;border-radius:50%;top:-340px;right:-180px; background:radial-gradient(circle,rgba(9,188,239,.22),transparent 62%)} #pkw .wash::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;bottom:-320px;left:-160px; background:radial-gradient(circle,rgba(15,228,162,.17),transparent 62%)} #pkw .pkw-light .card,#pkw .pkw-grey .card{box-shadow:0 16px 44px -24px rgba(30,48,116,.28)} /* ---- eyebrow / label ---- */ #pkw .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans); font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--eb);margin:0 0 22px} #pkw .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--frost); box-shadow:0 0 10px var(--frost-glow)} #pkw .pkw-light .eyebrow::before,#pkw .pkw-grey .eyebrow::before{background:var(--frost-deep);box-shadow:none} /* ---- type helpers ---- */ #pkw .h1{font-size:clamp(38px,5vw,62px);line-height:1.08} #pkw .h2{font-size:clamp(30px,3.5vw,46px);line-height:1.16} #pkw .h3{font-size:clamp(24px,2.4vw,36px);line-height:1.28} #pkw .lead{font-size:20px;line-height:1.7;color:var(--tx-2);max-width:56ch} #pkw .frost-word{color:var(--frost-deep)} #pkw .pkw-light .frost-word{color:var(--frost-deep)} #pkw .kicker-num{font-family:var(--serif);color:var(--frost)} /* ---- buttons ---- */ #pkw .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700; font-size:15.5px;line-height:1;padding:15px 26px;border-radius:999px;transition:all .28s cubic-bezier(.4,0,.2,1); border:1.5px solid transparent;white-space:nowrap} #pkw .btn svg{width:16px;height:16px;transition:transform .28s ease} #pkw .btn-green{background:var(--frost);color:#062B20} #pkw .btn-green:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--frost-glow);filter:brightness(1.06)} #pkw .btn-cyan{background:var(--cyan);color:#fff} #pkw .btn-cyan:hover{background:var(--navy);transform:translateY(-2px)} #pkw .btn-outline{border-color:var(--brd-2);color:var(--head)} #pkw .btn-outline:hover{background:var(--cyan);border-color:var(--cyan);color:#fff;transform:translateY(-2px)} #pkw .btn:hover svg{transform:translateX(4px)} #pkw .btn-lg{padding:18px 32px;font-size:16.5px} #pkw .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--eb)} #pkw .tlink svg{width:15px;height:15px;transition:transform .28s ease} #pkw .tlink:hover svg{transform:translateX(5px)} /* ---- chips ---- */ #pkw .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700; font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px; border:1px solid var(--brd-2);color:var(--tx-2);background:var(--glass)} /* ---- generic card ---- */ #pkw .card{background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--brd); border-radius:18px;transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .28s,box-shadow .28s} /* ---- aurora atmosphere (dark sections) ---- */ #pkw .aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} #pkw .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen} #pkw .blob.b1{width:640px;height:640px;background:radial-gradient(circle,var(--cyan),transparent 62%);top:-220px;right:-160px;animation:drift1 38s ease-in-out infinite} #pkw .blob.b2{width:560px;height:560px;background:radial-gradient(circle,var(--frost),transparent 62%);bottom:-240px;left:-140px;opacity:.34;animation:drift2 44s ease-in-out infinite} #pkw .blob.b3{width:420px;height:420px;background:radial-gradient(circle,var(--navy),transparent 60%);top:30%;left:40%;opacity:.6;animation:drift1 32s ease-in-out infinite} /* atmospheric depth - film grain + soft light, no AI grid */ #pkw .grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} #pkw .sweep{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #pkw .sweep::before{content:"";position:absolute;top:-40%;left:-10%;width:52%;height:180%; background:linear-gradient(105deg,transparent,rgba(9,188,239,.05) 45%,rgba(15,228,162,.06) 55%,transparent); transform:rotate(8deg);filter:blur(6px)} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.12)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.1)}} /* ---- reveal on scroll ---- */ #pkw .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)} #pkw .reveal.in{opacity:1;transform:none} /* =========== HERO =========== */ #pkw .hero{padding:0px 0 104px;position:relative;overflow:hidden;background-color:var(--bg)} #pkw .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} #pkw .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px; background:var(--glass);border:1px solid var(--brd-2);font-weight:700;font-size:13px;color:var(--tx-2);margin-bottom:26px} #pkw .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 10px var(--frost-glow)} #pkw .hero h1{font-size:clamp(38px,5vw,62px);line-height:1.07;margin-bottom:24px;text-wrap:balance} #pkw .hero .frost-word{color:var(--cyan-700)} #pkw .hero .lead{margin-bottom:34px} #pkw .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} #pkw .hero-cta .micro{font-size:13.5px;color:var(--tx-3);flex-basis:100%;margin-top:2px} #pkw .hero-trust{margin-top:36px;padding-top:24px;border-top:1px solid var(--brd)} #pkw .hero-trust .lbl{display:block;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px} #pkw .hero-stats{display:flex;align-items:stretch;gap:32px;flex-wrap:wrap} #pkw .hs{display:flex;flex-direction:column;gap:5px} #pkw .hs-n{font-family:var(--serif);font-size:28px;color:var(--tx);line-height:1;display:flex;align-items:baseline;gap:7px} #pkw .hs-n em{font-style:normal;font-size:13px;color:var(--tx-3);font-family:var(--sans);font-weight:700;letter-spacing:.02em} #pkw .hs-l{font-size:13px;color:var(--tx-3);font-weight:700} #pkw .hs-div{width:1px;background:var(--brd-2);flex:none;align-self:stretch} #pkw .award{display:inline-flex;align-items:center;gap:18px;margin-bottom:24px;padding:14px 22px 14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--brd-2)} #pkw .award img{width:92px;height:92px;flex:none} #pkw .award .aw-t{font-family:var(--serif);font-size:18px;line-height:1.28;color:var(--head);max-width:22ch} #pkw .award .aw-t em{display:block;font-family:var(--sans);font-style:normal;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--frost-deep);margin-bottom:6px} /* staggered hero rise */ #pkw .rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.6,.2,1) forwards} #pkw .rise.d1{animation-delay:.05s}#pkw .rise.d2{animation-delay:.17s}#pkw .rise.d3{animation-delay:.29s} #pkw .rise.d4{animation-delay:.41s}#pkw .rise.d5{animation-delay:.53s} @keyframes rise{to{opacity:1;transform:none}} /* =========== COVERAGE PANEL (signature) =========== */ #pkw .cov-stage{perspective:1600px;position:relative} #pkw .cov-stage{perspective:1600px;position:relative} #pkw .cov-stage::before{content:"";position:absolute;z-index:0;inset:-8% -12%;pointer-events:none; background:radial-gradient(56% 52% at 66% 32%,rgba(9,188,239,.32),transparent 70%),radial-gradient(46% 46% at 34% 82%,rgba(15,228,162,.26),transparent 72%)} #pkw .cov-art{position:absolute;z-index:1;pointer-events:none;width:132%;right:-15%;top:-72px; filter:drop-shadow(0 34px 62px rgba(9,188,239,.42)); -webkit-mask:linear-gradient(180deg,#000 76%,transparent);mask:linear-gradient(180deg,#000 76%,transparent); animation:artfloat 7.5s ease-in-out infinite} @keyframes artfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} #pkw .cov{z-index:2;position:relative;margin:122px auto 0;max-width:86%;background:linear-gradient(165deg,rgba(19,28,72,.95),rgba(10,16,44,.99)); border:1px solid var(--brd-2);border-radius:20px;padding:22px;overflow:hidden; box-shadow:0 64px 120px -44px rgba(6,12,40,.9),0 24px 48px -28px rgba(9,188,239,.35),0 0 0 1px rgba(255,255,255,.04) inset; transform:rotateY(-10deg) rotateX(5deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)} #pkw .cov-stage:hover .cov{transform:rotateY(-4deg) rotateX(2deg) translateY(-4px)} /* ---------- hero art with no coverage panel --------------------------------- Added 2026-08-12. Bob: "That imagery on the right, on only these two pages, is too low, can it align with the Headline please? Most of the PKWARE OLD Created pages have this image in that spot." WHY IT SAT LOW. .cov-art is position:absolute, so it contributes no height. On the HOME page that is fine because .cov-stage also holds .cov - the live-coverage panel - which is in normal flow and gives the stage real height. On products and why-pk-protect the stage holds ONLY the absolute image, so it is a ZERO-HEIGHT box. .hero-grid is align-items:center, so that empty box gets centred against the tall text column and the art's top:-72px is measured from the middle of the headline block rather than the top of it. So the condition is not "which page" - it is "does this stage have an in-flow panel". :has() expresses that exactly and needs no markup change, which matters because more old pages are coming with this same structure and will be fixed automatically. If :has() is unsupported the whole selector is dropped and the art simply renders as before - degrades to the old look, never to a broken one. Supported in Chrome 105+, Safari 15.4+, Firefox 121+; all shipping since late 2023. These are the only :has() selectors in the stylesheet. WHY top IS 30px AND NOT 0. Bob, after seeing top:0: "I think this is too high by about 30px, the thing moves a bit, and needs room to breathe." The movement is real - .cov-art carries `animation: artfloat`, whose keyframes are translateY(0) -> translateY(-11px) at 50%. So the art drifts 11px UPWARD mid-cycle, and at top:0 it was overshooting the top of the hero on every pass. At 30px it rests 30px down and peaks at 19px, so there is always clearance. If this value is retuned, keep it above 11px or the float will clip again. MIN-WIDTH 1241px IS DELIBERATE. These rules only make sense where .cov-art is absolutely positioned. Below 1241px the responsive block turns it static and stacks it under the copy, and `top` does not apply to a static element - so this would be harmless there anyway, but the media query says so explicitly rather than relying on that. It also stops these selectors, which outrank the tablet rule on specificity (1,3,0 vs 1,1,0), from being something a future edit has to reason about. */ @media (min-width: 1241px) { #pkw .hero-grid > .cov-stage:not(:has(.cov)) { align-self: start; } #pkw .cov-stage:not(:has(.cov)) > .cov-art { top: 30px; } } #pkw .cov::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--frost),var(--cyan),transparent); box-shadow:0 0 18px var(--frost-glow);animation:scan 4.5s ease-in-out infinite;z-index:5} @keyframes scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}} #pkw .cov-head{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--brd);margin-bottom:16px} #pkw .cov-live{width:9px;height:9px;border-radius:50%;background:var(--frost);box-shadow:0 0 0 0 var(--frost-glow);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--frost-glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} #pkw .cov-head .ttl{font-weight:700;font-size:14px;color:#fff} #pkw .cov-head .sub{font-size:12px;color:var(--tx-3);margin-left:auto} #pkw .cov-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} #pkw .cov-stat{background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:13px;padding:15px} #pkw .cov-stat .k{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)} #pkw .cov-stat .v{font-family:var(--serif);font-size:34px;color:#fff;line-height:1;margin-top:9px;display:flex;align-items:baseline;gap:8px} #pkw .cov-stat .v small{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--frost)} #pkw .ring{position:relative;width:56px;height:56px;flex:none} #pkw .ring svg{transform:rotate(-90deg)} #pkw .ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:15px;color:#fff} #pkw .cov-stat.ringcell .v{align-items:center;gap:13px;font-size:26px} #pkw .cov-rows{display:flex;flex-direction:column;gap:8px} #pkw .cov-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px; background:rgba(255,255,255,.025);border:1px solid var(--brd)} #pkw .cov-row.mf{background:linear-gradient(90deg,rgba(9,188,239,.1),rgba(255,255,255,.02));border-color:rgba(9,188,239,.28)} #pkw .cov-row .srf{font-weight:700;font-size:13.5px;color:#fff;display:flex;align-items:center;gap:8px;min-width:96px} #pkw .cov-row .srf svg{width:15px;height:15px;color:var(--cyan)} #pkw .badge-mf{font-family:var(--sans);font-weight:700;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase; padding:2px 6px;border-radius:5px;color:var(--cyan);background:rgba(9,188,239,.16);border:1px solid rgba(9,188,239,.35)} #pkw .cov-chips{display:flex;gap:6px;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end} #pkw .dchip{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.04em;padding:4px 9px;border-radius:999px; color:var(--frost);background:rgba(15,228,162,.11);border:1px solid rgba(15,228,162,.3); opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s} #pkw .cov.armed .dchip{opacity:1;transform:none} #pkw .cov-cap{text-align:center;font-size:11px;color:var(--tx-3);margin-top:14px} /* =========== TRUST / GARTNER =========== */ #pkw .marquee{overflow:hidden;position:relative;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} #pkw .marquee-track{display:flex;align-items:center;gap:70px;width:max-content;animation:marq 36s linear infinite} #pkw .marquee:hover .marquee-track{animation-play-state:paused} #pkw .marquee .lg-img{height:34px;width:auto;opacity:.55;filter:brightness(0) saturate(0);transition:opacity .3s} #pkw .marquee .lg-img:nth-child(4n+3){height:28px} #pkw .marquee .lg-img:nth-child(4n){height:40px} #pkw .marquee .lg-img:hover{opacity:.9} /* ---------- trust strip, the [pkware_trust_logos] component ------------------ Added 2026-08-12. Two rules, and both exist to REPLACE inline style attributes that the hand-pasted version of this block carried on every page:

Per Bob's standing rule - "Eliminate inline style as much as possible" - they are classed instead. Scoped under .trust-strip rather than given new element classes so .eyebrow and .marquee stay the shared components they already are; this only carries the two deltas. 22px, not the .marquee default of 8px, because the strip sits directly under its own label here rather than under a section heading. */ #pkw .trust-strip .eyebrow { display: flex; justify-content: center; } #pkw .trust-strip .marquee { margin-top: 22px; } @keyframes marq{to{transform:translateX(-50%)}} #pkw .trust-proof{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.4;text-align:center;color:var(--tx);max-width:24ch;margin:0 auto} #pkw .trust-proof b{color:var(--frost-deep);font-weight:700} #pkw .gart{margin:16px auto 0;max-width:560px;border:1px solid var(--brd);border-radius:18px;padding:24px 28px; background:var(--glass);min-height:118px;display:flex;align-items:center;justify-content:center;gap:16px} #pkw .gart-ph{display:flex;align-items:center;gap:14px;color:var(--tx-3);font-size:14px} #pkw .gart-ph .spin{width:18px;height:18px;border:2px solid var(--brd-2);border-top-color:var(--frost);border-radius:50%;animation:spin 1s linear infinite} #pkw .gart-cap{text-align:center;font-size:12.5px;color:var(--tx-3);margin-top:14px} #pkw .gart-cap a{color:var(--cyan-700);font-weight:700} #pkw .gpi-snip{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--brd); box-shadow:0 24px 56px -30px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s} #pkw .gpi-snip:hover{transform:translateY(-4px);box-shadow:0 34px 68px -32px rgba(30,48,116,.5)} #pkw .gpi-snip img{width:100%;display:block} #pkw .gpi-card{display:block;background-color:var(--navy);border-radius:16px;overflow:hidden;padding:32px 34px;box-shadow:0 24px 56px -30px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s;text-decoration:none} #pkw .gpi-card:hover{transform:translateY(-4px);box-shadow:0 34px 68px -32px rgba(30,48,116,.5)} #pkw .gpi-prod{font-family:var(--sans);font-weight:700;font-size:15px;color:rgba(255,255,255,.72);margin:0 0 12px} #pkw .gpi-quote{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);line-height:1.32;color:#fff;margin:0} #pkw .gpi-stars{display:flex;gap:5px;margin:16px 0 12px;color:#f5a623} #pkw .gpi-stars svg{width:22px;height:22px;fill:currentColor} #pkw .gpi-attr{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(255,255,255,.85);margin:0} @keyframes spin{to{transform:rotate(360deg)}} /* =========== STAT GRID / cards ===== */ #pkw .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} #pkw .stat{padding:26px;border-radius:16px;border:1px solid var(--brd);background:var(--glass)} #pkw .stat .n{font-family:var(--serif);font-size:clamp(34px,4vw,48px);line-height:1;color:var(--head)} #pkw .stat .l{font-size:14px;color:var(--tx-2);margin-top:10px;font-weight:700} /* two-col narrative */ #pkw .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} /* =========== PROCESS - animated pipeline =========== */ #pkw .pipe{position:relative;margin-top:30px} #pkw .flow{position:relative;display:flex;align-items:center;justify-content:center;gap:0;margin-top:40px;flex-wrap:nowrap} #pkw .flow-seq{display:flex;align-items:center;gap:0} #pkw .fstep{position:relative;width:74px;flex:none;display:flex;justify-content:center} #pkw .fnode{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;position:relative; background:#fff;border:1.5px solid var(--brd-2);color:var(--frost-deep); box-shadow:0 16px 32px -20px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s; animation:nodepop 4s ease-in-out infinite} #pkw .flow-seq .fstep:nth-child(3) .fnode{animation-delay:.9s} #pkw .fnode svg{width:30px;height:30px} #pkw .fnode .pk{position:absolute;top:-10px;right:-10px;width:27px;height:27px;border-radius:50%;background:var(--navy);color:#fff; font-family:var(--serif);font-size:12.5px;display:grid;place-items:center;border:2px solid #fff} #pkw .fstep:hover .fnode{transform:translateY(-6px);border-color:var(--frost);box-shadow:0 24px 42px -20px rgba(15,228,162,.5)} #pkw .fcap{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:124px;text-align:center;font-size:13px;color:var(--tx-2);line-height:1.45} #pkw .fcap b{display:block;font-family:var(--sans);font-weight:900;font-size:17px;color:var(--head);margin-bottom:6px} #pkw .fconn{width:64px;height:2px;flex:none;position:relative;background:var(--brd-2);border-radius:2px} #pkw .fconn::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 12px var(--frost-glow);animation:conndot 3s ease-in-out infinite} @keyframes conndot{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{left:calc(100% - 8px);opacity:0}} #pkw .flow-join{width:44px;height:2px;flex:none;background:var(--frost-deep);opacity:.45;border-radius:2px} #pkw .flow-branch{position:relative;display:flex;flex-direction:column;gap:16px;flex:none;width:314px;height:268px;padding-left:34px} #pkw .flow-branch::before{content:"";position:absolute;left:0;top:27px;bottom:27px;width:2px;border-radius:2px;background:var(--frost-deep);opacity:.4} #pkw .branch-head{position:absolute;top:-30px;left:34px;font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--frost-deep)} #pkw .bstep{position:relative;flex:1;display:flex;align-items:center;gap:13px;padding:0 18px;border-radius:16px; background:#fff;border:1.5px solid var(--brd);box-shadow:0 12px 30px -22px rgba(30,48,116,.5);transition:transform .3s,box-shadow .3s,border-color .3s} #pkw .bstep::before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;margin-top:-1px;background:var(--frost-deep);opacity:.4} #pkw .bstep:hover{border-color:var(--frost);transform:translateX(5px);box-shadow:0 18px 34px -20px rgba(15,228,162,.45)} #pkw .bicon{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;color:var(--frost-deep); background:linear-gradient(145deg,rgba(15,228,162,.15),rgba(9,188,239,.12))} #pkw .bicon svg{width:22px;height:22px} #pkw .btxt b{display:block;font-family:var(--sans);font-weight:900;font-size:16px;color:var(--head);margin-bottom:2px} #pkw .btxt span{font-size:13px;color:var(--tx-2);line-height:1.4}@keyframes nodepop{0%,22%,100%{border-color:var(--brd-2);box-shadow:0 16px 32px -20px rgba(30,48,116,.5)} 8%{border-color:var(--frost);box-shadow:0 0 0 7px rgba(15,228,162,.13),0 20px 38px -18px rgba(15,228,162,.55)}} #pkw .pipe-io{display:flex;justify-content:space-between;margin:64px 4% 0;gap:48px} #pkw .pipe-io .io{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--tx-2);max-width:38ch} #pkw .pipe-io .io b{font-weight:900;color:var(--head)} #pkw .pipe-io .io .dot{width:9px;height:9px;border-radius:50%;flex:none} #pkw .pipe-io .io .dot.raw{background:var(--coral)} #pkw .pipe-io .io .dot.safe{background:var(--frost-deep)} /* =========== product cards =========== */ #pkw .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} #pkw .prod{padding:36px;border-radius:20px;position:relative;overflow:hidden} #pkw .prod .tag{margin-bottom:18px} #pkw .prod h3{font-size:30px;margin-bottom:6px} #pkw .prod .q{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--head);margin:14px 0 12px;line-height:1.4} #pkw .prod p{font-size:15.5px;color:var(--tx-2);line-height:1.6} #pkw .prod .surf{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 24px} #pkw .prod .surf .chip{font-size:11px;padding:6px 11px;color:var(--tx-2)} /* =========== bento =========== */ #pkw .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px} #pkw .bento .card{padding:30px;position:relative;overflow:hidden} #pkw .bento .card:hover{transform:translateY(-4px);border-color:var(--brd-2)} #pkw .bento .feat{grid-column:span 2;grid-row:span 2} #pkw .bento .card h4{font-family:var(--serif);font-size:24px;color:#fff;margin-bottom:10px} #pkw .bento .card p{font-size:15px;color:var(--tx-2);line-height:1.6} #pkw .bento .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:var(--glass-2);border:1px solid var(--brd);color:var(--frost)} #pkw .bento .ico svg{width:22px;height:22px} /* mini mainframe viz */ #pkw .mf-viz{margin-top:22px;display:flex;flex-direction:column;gap:7px} #pkw .mf-bar{display:flex;align-items:center;gap:12px} #pkw .mf-bar .nm{font-weight:700;font-size:12.5px;color:var(--tx-2);min-width:92px;display:flex;align-items:center;gap:7px} #pkw .mf-bar .track{flex:1;height:9px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden} #pkw .mf-bar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--frost));width:0;transition:width 1.1s cubic-bezier(.3,.7,.2,1)} #pkw .mf-bar.dim .fill{background:linear-gradient(90deg,#3a4780,#586099)} #pkw .mf-bar .pc{font-weight:700;font-size:12px;color:var(--tx-3);min-width:38px;text-align:right} /* =========== screenshot frame =========== */ #pkw .shot-frame{border-radius:16px;overflow:hidden;border:1px solid var(--brd-2); box-shadow:0 40px 90px -40px rgba(0,0,0,.7);background:#0a1130} #pkw .shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--brd)} #pkw .shot-bar i{width:11px;height:11px;border-radius:50%;background:var(--brd-2);display:block} #pkw .shot-bar .ttl{margin-left:10px;font-size:12.5px;color:var(--tx-3);font-weight:700} #pkw .shot-frame img{width:100%;display:block} #pkw .pkw-grey .shot-frame,#pkw .pkw-light .shot-frame{background:#fff;border-color:#D8DEE9;box-shadow:0 44px 96px -44px rgba(30,48,116,.4)} #pkw .pkw-grey .shot-bar,#pkw .pkw-light .shot-bar{background:#EEF2F8;border-bottom-color:#E1E7F1} #pkw .pkw-grey .shot-bar i,#pkw .pkw-light .shot-bar i{background:#C6CFDE} #pkw .pkw-grey .shot-bar .ttl,#pkw .pkw-light .shot-bar .ttl{color:#8A93A8} /* =========== testimonial =========== */ #pkw .quote-big{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);line-height:1.32;color:#fff;max-width:100%;margin:0 auto;text-align:center;text-wrap:balance} #pkw .quote-mark{font-family:var(--serif);font-size:90px;line-height:.6;color:var(--frost);opacity:.5;height:44px} #pkw .quote-attr{text-align:center;margin-top:34px} #pkw .quote-attr .nm{font-weight:700;color:#fff;font-size:16px} #pkw .quote-attr .ro{font-size:14px;color:var(--tx-3);margin-top:3px} /* =========== persona =========== */ #pkw .persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} #pkw .persona{padding:28px;border-radius:16px;transition:transform .28s,border-color .28s} #pkw .persona:hover{transform:translateY(-4px)} #pkw .persona .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px; background:rgba(30,48,116,.06);border:1px solid var(--brd-2);color:var(--navy)} #pkw .persona .ico svg{width:23px;height:23px} #pkw .persona h4{font-family:var(--serif);font-size:21px;color:var(--head);margin-bottom:7px} #pkw .persona p{font-size:14px;color:var(--tx-2);line-height:1.5;margin-bottom:16px} /* =========== FAQ =========== */ #pkw .faq{max-width:860px;margin:0 auto;border-top:1px solid var(--brd)} #pkw .faq-item{border-bottom:1px solid var(--brd)} #pkw .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:26px 4px;text-align:left;font-family:var(--serif);font-size:21px;color:var(--head)} #pkw .faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--brd-2);display:grid;place-items:center;transition:transform .3s,background .3s;color:var(--eb)} #pkw .faq-q .ic svg{width:14px;height:14px} #pkw .faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--frost);color:#062B20;border-color:var(--frost)} #pkw .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)} #pkw .faq-a p{padding:0 4px 26px;font-size:16.5px;color:var(--tx-2);line-height:1.65;max-width:70ch} /* =========== final CTA =========== */ #pkw .cta-final{text-align:center;position:relative;overflow:hidden} #pkw .cta-final h2{margin-bottom:18px;text-wrap:balance} #pkw .cta-final .lead{margin:0 auto 32px;text-align:center} #pkw .cta-final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} #pkw .cta-final .trust-line{margin-top:30px;font-size:14px;color:var(--tx-3)} /* ---- Fiserv quote card with cover shot ---- */ #pkw .fiserv-quote{display:grid;grid-template-columns:1fr 288px;gap:48px;align-items:center} #pkw .fiserv-cover{display:flex;flex-direction:column;gap:18px} #pkw .fiserv-cover .cov-img{display:block;border-radius:12px;overflow:hidden;border:1px solid #D8DEE9; box-shadow:0 34px 64px -30px rgba(30,48,116,.55);transition:transform .3s,box-shadow .3s} #pkw .fiserv-cover .cov-img:hover{transform:translateY(-5px);box-shadow:0 46px 80px -32px rgba(30,48,116,.62)} #pkw .fiserv-cover .cov-img img{width:100%;display:block} #pkw .fiserv-cover .read{justify-content:center;font-size:16px} /* ---- Why PKWARE - coverage matrix ---- */ #pkw .why-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:stretch} #pkw .why-feat{padding:38px;display:flex;flex-direction:column} #pkw .why-feat h4{font-family:var(--serif);font-size:26px;color:var(--head);margin-bottom:12px} #pkw .why-feat p.d{font-size:15.5px;color:var(--tx-2);line-height:1.6;max-width:52ch} #pkw .why-side{display:flex;flex-direction:column;gap:22px} #pkw .why-side .card{padding:30px;flex:1;display:flex;flex-direction:column;justify-content:center} #pkw .why-side .card h4{font-family:var(--serif);font-size:21px;color:var(--head);margin-bottom:9px} #pkw .why-side .card p{font-size:14.5px;color:var(--tx-2);line-height:1.55} #pkw .why-side .ico,#pkw .why-feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px; background:rgba(9,188,239,.09);border:1px solid rgba(9,188,239,.22);color:var(--cyan-700)} #pkw .why-side .ico svg,#pkw .why-feat .ico svg{width:22px;height:22px} #pkw .cmatrix{margin-top:26px;border-top:1px solid var(--brd);padding-top:22px} #pkw .cmx{display:grid;grid-template-columns:118px repeat(5,1fr);gap:9px 4px;align-items:center} #pkw .cmx .col{text-align:center;font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3);line-height:1.25} #pkw .cmx .col.mf{color:var(--cyan-700)} #pkw .cmx .rlabel{font-weight:700;font-size:13px;color:var(--tx);display:flex;align-items:center;gap:7px} #pkw .cmx .rlabel.dim{color:var(--tx-3)} #pkw .cmx .rlabel .pkdot{width:8px;height:8px;border-radius:50%;background:var(--frost);box-shadow:0 0 8px var(--frost-glow);flex:none} #pkw .cmx .cell{display:grid;place-items:center;height:32px} #pkw .cmx .yes{width:26px;height:26px;border-radius:50%;background:rgba(15,228,162,.18);border:1px solid rgba(11,110,78,.45);display:grid;place-items:center;color:var(--frost-deep)} #pkw .cmx .yes svg{width:14px;height:14px} #pkw .cmx .yes.cy{background:rgba(9,188,239,.16);border-color:rgba(5,127,163,.5);color:var(--cyan-700)} #pkw .cmx .no{width:20px;height:2px;border-radius:2px;background:var(--brd-2)} #pkw .cmx-cap{margin-top:16px;font-size:12.5px;color:var(--tx-3);display:flex;align-items:center;gap:8px} #pkw .cmx-cap b{color:var(--cyan-700);font-weight:700} /* ---- Trust section flow ---- */ #pkw .trust-flow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:54px} #pkw .trust-proof-l{font-family:var(--serif);font-size:clamp(25px,2.7vw,36px);line-height:1.3;color:var(--tx);max-width:15ch} #pkw .trust-proof-l b{color:var(--frost-deep);font-weight:700} #pkw .trust-flow .gart{margin:0;max-width:none} #pkw .trust-flow .gart-cap{text-align:left;margin-top:12px} /* =========== latest publications =========== */ #pkw .pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} #pkw .pub{display:flex;flex-direction:column} #pkw .pub-thumb{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--brd); box-shadow:0 18px 44px -26px rgba(30,48,116,.4);transition:transform .3s,box-shadow .3s} #pkw .pub:hover .pub-thumb{transform:translateY(-6px);box-shadow:0 30px 58px -28px rgba(30,48,116,.52)} #pkw .pub-thumb>img{width:100%;height:100%;object-fit:cover;display:block} #pkw .pub-blog{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;color:#fff} #pkw .pub-blog.g1{background:linear-gradient(120deg,var(--cyan),var(--frost))} #pkw .pub-blog.g2{background:linear-gradient(125deg,var(--navy),var(--cyan))} #pkw .pub-mark{position:absolute;top:20px;right:22px;height:17px;width:auto;opacity:.96} #pkw .pub-blog-word{font-family:var(--serif);font-size:42px;color:#fff;line-height:1;margin-bottom:16px} #pkw .pub-auth{font-size:12px;line-height:1.45;color:rgba(255,255,255,.92);max-width:26ch} #pkw .pub-auth b{font-weight:700;font-size:13.5px;font-style:normal} #pkw .pub-case{background:#0A1130} #pkw .pub-case .pub-cover{width:100%;height:100%;object-fit:cover;object-position:top center} #pkw .pub-case::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,12,36,.6),transparent 42%)} #pkw .pub-case-label{position:absolute;top:16px;left:20px;z-index:2;font-weight:700;font-size:13px;color:#fff;letter-spacing:.02em} #pkw .pub-chip{margin:20px 0 14px;align-self:flex-start;font-size:11px;color:var(--frost-deep);border-color:var(--frost-deep);background:rgba(11,110,78,.06)} #pkw .pub-title{font-family:var(--serif);font-size:22px;color:var(--head);line-height:1.32;transition:color .2s} #pkw .pub:hover .pub-title{color:var(--cyan-700)} /* =========== responsive =========== */ @media(max-width:1240px){ #pkw .hero-grid{grid-template-columns:1fr;gap:44px} #pkw .why-grid,#pkw .fiserv-quote,#pkw .trust-flow{grid-template-columns:1fr;gap:32px} #pkw .fiserv-cover{max-width:320px} #pkw .bento{grid-template-columns:1fr 1fr} #pkw .bento .feat{grid-column:span 2;grid-row:auto} #pkw .stat-grid{grid-template-columns:1fr 1fr} #pkw .persona-grid{grid-template-columns:1fr 1fr} #pkw .pub-grid{grid-template-columns:1fr 1fr} #pkw .flow{flex-direction:column;gap:44px} #pkw .flow-join{display:none} #pkw .cov-art{width:106%;right:-3%;top:-40px} #pkw .cov{margin-top:78px;max-width:520px} #pkw .flow-branch{flex-direction:row;width:auto;height:auto;padding-left:0;gap:16px} #pkw .flow-branch::before{display:none} #pkw .bstep{flex:1 1 0;min-width:0} #pkw .bstep::before{display:none} #pkw .branch-head{top:-26px;left:50%;transform:translateX(-50%)} #pkw .fcap{position:static;transform:none;width:auto;margin-top:12px} #pkw .fstep{width:auto;flex-direction:column} #pkw .pipe-io{flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px} } @media(max-width:820px){ #pkw .sec{padding:76px 0} #pkw .two-col,#pkw .prod-grid{grid-template-columns:1fr;gap:28px} #pkw .flow-branch{flex-direction:column;width:100%;max-width:360px} #pkw .bstep{flex:none} #pkw .branch-head{position:static;transform:none;text-align:left;margin-bottom:4px} #pkw .hero-copy{text-align:center} #pkw .hero-copy .hero-badge,#pkw .hero-copy .eyebrow{justify-content:center} #pkw .hero-cta{justify-content:center} #pkw .hero-stats{justify-content:center} #pkw .award{margin-left:auto;margin-right:auto} #pkw .two-col .reveal{text-align:center} #pkw .two-col .eyebrow{justify-content:center} #pkw .trust-flow{text-align:center} #pkw .trust-flow .eyebrow{justify-content:center} #pkw .trust-proof-l{max-width:none} } @media(max-width:560px){ #pkw .bento,#pkw .stat-grid,#pkw .persona-grid{grid-template-columns:1fr} #pkw .pub-grid{grid-template-columns:1fr} #pkw .cov-stats{grid-template-columns:1fr} #pkw .hero-stats{flex-wrap:nowrap;gap:14px;align-items:flex-start} #pkw .hs{flex:0 1 auto} #pkw .hs-n{font-size:19px;white-space:nowrap} #pkw .hs-l{font-size:11px} #pkw .flow{gap:0;align-items:stretch} #pkw .flow-seq{flex-direction:column;gap:0;width:100%;align-items:stretch} #pkw .fconn{display:none} #pkw .fstep{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:14px 0} #pkw .fnode{flex:none} #pkw .fcap{text-align:left;margin-top:0;width:auto} #pkw .fcap b{margin-bottom:2px} #pkw .flow-branch{max-width:none;width:100%;gap:12px;margin:8px 0} #pkw .branch-head{margin-bottom:8px} #pkw .award .aw-t{font-size:16px} #pkw .award img{width:76px;height:76px} } @media(prefers-reduced-motion:reduce){ #pkw *{animation:none!important;transition:none!important} #pkw .reveal{opacity:1!important;transform:none!important} #pkw .rise{opacity:1!important;transform:none!important} #pkw .cov{transform:none!important} } /* -------------------------------------------------------------------------- pk27 GRID CSS DELIBERATELY NOT HERE - removed 2026-08-10. It was duplicated. pk27_styles() prints the same rules inline as