/* ========================================================================== Kapintelligence — mobile foundation Desktop (>=768px) is deliberately untouched: no rule below applies there, so the existing inline styles remain authoritative. Overrides use !important because the desktop layer is inline-styled. ========================================================================== */ html { -webkit-text-size-adjust: 100%; } /* Never allow document-level horizontal scroll */ @media (max-width: 1009px) { html, body { overflow-x: clip; max-width: 100%; } } /* -------------------------------------------------------------------------- TABLET AND BELOW -------------------------------------------------------------------------- */ @media (max-width: 1009px) { /* --- Page gutters: 24px from 480–1009 --- */ [style*="max-width: 1"][style*="margin: 0px auto; padding: "], [style*="max-width: 8"][style*="margin: 0px auto; padding: "], [style*="max-width: 9"][style*="margin: 0px auto; padding: "] { padding-left: 24px !important; padding-right: 24px !important; } /* --- Section rhythm: 56–64px instead of 88–104px --- */ /* Vertical rhythm is carried by padding-TOP alone; most sections author padding-bottom:0, so forcing a bottom value would double-count every junction. */ /* only zone-closing containers author a bottom pad (>=96px) */ [style*="margin: 0px auto; padding: "][style*="4vw, 32px) 104px"], [style*="margin: 0px auto; padding: "][style*="4vw, 32px) 96px"] { padding-bottom: 56px !important; } [style*="margin: 0px auto 80px"] { margin-bottom: 40px !important; } /* Zone boundaries: the last section before a background change needs its own bottom space — the next zone's padding-top sits on the other side of the seam. */ /* wrapper-level safety net: a zone whose final child is a card, not a section */ [style*="margin: 0px auto 64px"] { margin-bottom: 36px !important; } [style*="padding: 44px"], [style*="padding: 40px"], [style*="padding: 38px"], [style*="padding: 36px"], [style*="padding: 34px"], [style*="padding: 30px"] { padding: 24px !important; } /* CTA stacking is handled structurally via [data-kx-cta] — see the block at the end of this file. Substring selectors cannot see the runtime style attr. */ /* --- Display type: keep long headings from breaking badly --- */ h1 { letter-spacing: -.02em !important; } } /* -------------------------------------------------------------------------- FORMS — 16px prevents iOS zoom-on-focus -------------------------------------------------------------------------- */ @media (max-width: 1009px) { input, select, textarea { font-size: 16px !important; min-height: 48px !important; } textarea { min-height: 96px !important; } input[type="checkbox"] { min-height: 0 !important; } } /* -------------------------------------------------------------------------- MOBILE NAVIGATION SHEET -------------------------------------------------------------------------- */ :root { --mobile-header-height: 80px; } .kx-sheet { position: fixed; /* Starts at the real header height (measured into --kx-nav-h on mount and resize), so the header never moves and no strip of page shows above the panel. The fallback matches the authored header: 60px content + 2*10px padding. */ top: var(--kx-nav-h, var(--mobile-header-height, 80px)); left: 0; right: 0; bottom: 0; height: auto; min-height: 0; z-index: 90; display: flex; flex-direction: column; background: #05060d; padding-bottom: calc(env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; } .kx-sheet__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 20px 20px; } .kx-sheet__foot { flex: none; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .08); background: #05060d; } body.kx-locked { overflow: hidden !important; /* scrollbar-gutter keeps the viewport width stable so the page cannot shift */ scrollbar-gutter: stable; overscroll-behavior: none; } /* the sheet must remain touch-scrollable while the background is locked */ .kx-sheet { touch-action: pan-y; } .kx-sheet__scroll { touch-action: pan-y; } /* -------------------------------------------------------------------------- MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== kx-mobile-redesign — mobile-only refinements (desktop untouched) ========================================================================== */ @media (max-width: 1009px) { /* Security card: a 290px child inside a narrower content box forced overflow */ [style*="flex: 1 1 380px"], [style*="flex: 1 1 420px"], [style*="flex: 1 1 300px"] { flex-basis: 100% !important; min-width: 0 !important; } [style*="min-width: 290px"], [style*="min-width: 280px"], [style*="min-width: 300px"] { min-width: 0 !important; } /* Case-study facts: stack label above value, both left-aligned */ [style*="grid-template-columns: minmax(0, auto) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; } [style*="grid-template-columns: minmax(0, auto) minmax(0, 1fr)"] > span { text-align: left !important; } /* Final CTA: tighter box */ [style*="border-radius: 24px"][style*="padding: 60px"] { padding: 28px 20px !important; } [style*="border-radius: 20px"][style*="padding: 44px"] { padding: 24px 20px !important; } } @media (max-width: 479px) { /* Phone end of the 56–64px band */ [style*="margin: 0px auto; padding: "][style*="4vw, 32px) 104px"], [style*="margin: 0px auto; padding: "][style*="4vw, 32px) 96px"] { padding-bottom: 56px !important; } /* All five proof points stay visible on mobile — no content suppression. */ /* Challenge: the two weakest cards fold away so it stops echoing the hero */ /* All four challenge cards stay visible on mobile. */ /* Headline must not drop to single-word lines */ h1 { text-wrap: balance; hyphens: none; } } /* Full-screen viewer must never be clipped by the mobile overflow guard */ [role="dialog"][aria-modal="true"] { max-width: 100vw; } /* ========================================================================== SECTION RHYTHM — scoped, authored as one contiguous block Only elements the page marks as a top-level marketing section receive page rhythm. Nested wrappers and card-internal
elements are untagged and keep their own compact padding (this protects the Sample IC Pack sheets). A section owns its OUTER vertical spacing; nothing else adds to it. ========================================================================== */ /* Anchors clear the sticky header using the shared token. */ [id]:not(body) { scroll-margin-top: var(--kx-nav-h, var(--mobile-header-height, 80px)); } /* --- Equal-card grids: one shared pattern for comparable sibling cards --- */ @media (min-width: 768px) { [data-equal-card-grid] { align-items: stretch !important; grid-auto-rows: 1fr !important; } [data-equal-card-grid] > * { height: 100% !important; min-width: 0; box-sizing: border-box; } } @media (max-width: 767px) { [data-equal-card-grid] { grid-auto-rows: auto !important; align-items: start !important; } [data-equal-card-grid] > * { height: auto !important; } } /* --- Interaction stability: selection changes colour, never geometry --- */ [role="tab"], [aria-pressed], [data-equal-card-grid] > * { transition-property: background-color, border-color, color, box-shadow, opacity; } [role="tab"]:active, [aria-pressed]:active { transform: none !important; } /* --- Tablet and phone rhythm --- */ @media (max-width: 1009px) { [data-page-section] { padding-top: 64px !important; padding-bottom: 0 !important; } [data-theme] > [data-page-section]:first-child { padding-top: 56px !important; } [data-page-section]:last-of-type { padding-bottom: 64px !important; } [data-page-section]:only-child { padding-bottom: 64px !important; } } @media (max-width: 479px) { /* CTA rows stack only on phones. The direct child is a display:contents wrapper, so the width has to reach .kx-btn itself. */ [data-kx-cta] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100%; } [data-kx-cta] .kx-btn, [data-kx-cta] > a[style*="min-height: 48px"] { width: 100% !important; } [data-page-section] { padding-top: 56px !important; } [data-theme] > [data-page-section]:first-child { padding-top: 48px !important; } [data-page-section]:last-of-type { padding-bottom: 56px !important; } [data-page-section]:only-child { padding-bottom: 56px !important; } } /* --- Desktop and ultrawide rhythm. 50 of 59 sections author padding-bottom:0 because the vertical rhythm is carried by padding-top. That is correct INSIDE a colour zone and wrong at its edge: the closing section then sits flush on the background boundary. The mobile rules fixed this with !important; the desktop rules did not, so inline padding-bottom:0 won and large screens lost the junction spacing entirely. padding-top is deliberately left alone — the few 24/48/56/64px sections are intentional continuations. --- */ @media (min-width: 1010px) { [data-page-section]:last-of-type, [data-page-section]:only-child { padding-bottom: 88px !important; } } /* Spacing must not scale with the monitor. One cap from 1600px up — no 34-inch one-off. */ @media (min-width: 1600px) { [data-equal-card-grid] { column-gap: clamp(16px, 1.4vw, 24px); row-gap: clamp(16px, 1.4vw, 24px); } } /* Nesting guard last: it must beat the :last-of-type closer at equal specificity. */ [data-page-section] [data-page-section] { padding-top: 0 !important; padding-bottom: 0 !important; } /* --- Touch targets: every control reaches 44px on touch widths. Inline text links inside prose are excluded on purpose — they are read, not tapped as buttons, and forcing 44px there would wreck the line rhythm. !important is required because several controls carry an inline min-height. --- */ @media (max-width: 1009px) { button, a.kx-btn, a[href][style*="inline-flex"], a[href][style*="min-height"] { min-height: 44px !important; } /* Controls that are deliberately a fixed square (dots, close, chevrons) opt out. */ [data-kx-dot], [aria-label="Close"], [aria-label="Previous"], [aria-label="Next"] { min-height: 0 !important; } }