/* ========================================================================== responsive.css — FohBoh.ai mobile overrides -------------------------------------------------------------------------- The 16 marketing pages carry no classes and no stylesheet: every box is styled with an inline `style` attribute, and the DOM is re-created at runtime by the React renderer in support.js. That renderer parses each style string into an object and hands it to React, so what ends up in the live DOM is the CSSOM's *re-serialisation* of those declarations. Consequences that shape every selector below: * colours are normalised to rgb()/rgba(), so no selector may match a hex value — `[style*="#FAF9F6"]` can never hit; * property names and px lengths survive verbatim (`padding: 48px 64px 28px`, `grid-template-columns: 1fr 1fr`), so property-name substring selectors are reliable; * shorthand values may be re-ordered (`box-shadow` puts the colour first), which is why the padding rules exclude `box-shadow`; * `` / `` render as fragments — they leave no element in the DOM, so repeated rows are real children of their card wrapper. Rules therefore lean on element/structural selectors plus property-name attribute selectors, and every one of them needs `!important` to beat the inline styles. NOTHING outside the two media queries: desktop is byte-for-byte unchanged. Breakpoints: 900px (tablet / large phone) and 560px (phone). ========================================================================== */ /* ========================================================================== TABLET AND PHONE — max-width: 900px ========================================================================== */ @media (max-width: 900px) { /* ------------------------------------------------------------------ 1. PAGE SHELL Stops anything from widening the document. `overflow-x` is set on only: it propagates to the viewport and leaves a normal block, so `position: sticky` inside the pages keeps working. The border-box reset makes the many `width: 100%` + padding boxes behave. `max-width: 100%` on every element that declares an inline width turns all the hard-coded panels (320/380/420/430/440/640/780px) fluid in one rule instead of one rule each. ------------------------------------------------------------------ */ html { overflow-x: hidden !important; } *, *::before, *::after { box-sizing: border-box; } /* `min-width: 0` is what makes the cap stick: a grid/flex item with a definite inline width gets an automatic minimum size equal to that width, which would otherwise win over `max-width` (login.html's 420px card inside a `place-items: center` grid did exactly that). */ [style*="width: "] { max-width: 100% !important; min-width: 0 !important; } /* `max-width` alone is not enough for a fixed-width box that is a grid or flex item: it still contributes its full width to the track/line and drags the container open. These are every inline width in the site wider than a phone — video cards (440), the M04 board (430/640), the sign-in card (420), the source drawer (380) — turned into full-width blocks. 320px (the Cortex phone mock) already fits and is left alone; 780px is deliberately excluded, see below. */ [style*="width: 380px"], [style*="width: 420px"], [style*="width: 430px"], [style*="width: 440px"], [style*="width: 640px"] { width: 100% !important; } /* The one `zoom`-scaled illustration (index.html hero diagram) must keep its intrinsic 780px layout width — the zoom, reduced below, does the fitting. Without this the rule above squashes the diagram instead. */ [style*="zoom"] > * { max-width: none !important; } /* ------------------------------------------------------------------ 2. SECTION PADDING + FULL-BLEED MARGINS ~82 sections use `padding: px 64px [...]` and a handful of CTA bands use `margin: px 64px [...]`. Matching on the substring "px 64px" catches every horizontal-64 shorthand (a `0` is serialised as `0px`, so `padding: 0 64px 56px` matches too) while `[style*="padding: 64px"]` picks up the plain `padding: 64px` and `padding: 64px 64px 40px` forms. box-shadow is excluded because the serialiser can leave "…32px 64px" inside a shadow value. ------------------------------------------------------------------ */ [style*="px 64px"]:not([style*="box-shadow"]), [style*="padding: 64px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="margin"][style*="64px"] { margin-left: 20px !important; margin-right: 20px !important; } /* ------------------------------------------------------------------ 3. NAV One shared nav on every page: a single flex row of 6–8 links with the logo lockup pushed left by `margin-right: auto`. Let it wrap onto several lines, tighten the 22px gap, and keep the lockup and the "Book a demo" pill intact (both are `white-space: nowrap`). ------------------------------------------------------------------ */ nav { flex-wrap: wrap !important; row-gap: 10px !important; column-gap: 16px !important; padding-top: 12px !important; padding-bottom: 12px !important; } /* The logo lockup keeps the auto margin so it still owns its own line. */ nav > a:first-child { margin-right: auto !important; max-width: 100% !important; } /* ------------------------------------------------------------------ 4. GRIDS → ONE COLUMN Every multi-column *layout* grid also declares a `gap`; the pseudo- tables (CAAR report rows, the pricing comparison) never do — they rely on cell padding instead. That single distinction separates "collapse me" from "let me scroll" (group 8) without touching a single value. `min-width: 0` on the children stops long tokens (hashes, URLs, order IDs) from blowing the track out again. ------------------------------------------------------------------ */ [style*="grid-template-columns"][style*="gap"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns"] > * { min-width: 0 !important; } /* Desktop-scale gutters are dead space once everything is stacked. */ [style*="gap: 72px"], [style*="gap: 64px"], [style*="gap: 56px"], [style*="gap: 40px"], [style*="gap: 32px"], [style*="gap: 28px"] { gap: 20px !important; } /* ------------------------------------------------------------------ 5. FLEX ROWS → WRAP ~226 inline flex containers hold card rows, stat strips, CTA bands and button groups. Allowing them to wrap is what stops them squashing. Column-direction flexes are put back to `nowrap`: with a definite height (the little connector rails in the diagrams) wrapping would turn them into multi-column boxes. ------------------------------------------------------------------ */ [style*="display: flex"] { flex-wrap: wrap !important; } [style*="flex-direction: column"] { flex-wrap: nowrap !important; } /* Flex items default to `min-width: auto`, so one long word can force the whole row wider than the screen. Items that opted into `white-space` (nowrap pills, buttons) are left alone — shrinking them would only spill their text. */ [style*="display: flex"] > *:not([style*="white-space"]) { min-width: 0 !important; } /* Segmented controls (pricing.html's M01/M02/Both/White Glove pickers) are `flex: 1` buttons with nowrap labels: at phone width the equal shares fall a few px short and clip the longest label. Letting them keep their intrinsic width makes the strip wrap instead of truncate. */ [style*="display: flex"] > button[style*="white-space"] { min-width: fit-content !important; } /* ------------------------------------------------------------------ 6. DISPLAY TYPE Headline sizes are inline and range 26–56px. A size ladder keyed on the serialised px value scales them regardless of tag — the big stat figures are plain
s, not headings, so an h1/h2/h3 rule alone would miss them. Only font-size changes; family, weight and colour are untouched. ------------------------------------------------------------------ */ [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"], [style*="font-size: 44px"] { font-size: 34px !important; } [style*="font-size: 40px"], [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 28px !important; } [style*="font-size: 32px"], [style*="font-size: 30px"], [style*="font-size: 28px"] { font-size: 24px !important; } h1, h2, h3 { overflow-wrap: break-word !important; } /* ------------------------------------------------------------------ 7. MEDIA Nothing embedded may out-measure the viewport. The two 16:9 players are absolutely positioned inside an aspect-ratio box and are already fluid; the rules below catch the fixed-size ones (the 430px M04 scroll image, the 680px-tall Vimeo/embed iframes, the logo SVGs). ------------------------------------------------------------------ */ img, svg, iframe, video, canvas, figure { max-width: 100% !important; } img { height: auto !important; } /* index.html's hero pipeline diagram is a fixed 780px board shown at `zoom: 0.5`. Scaling the zoom (rather than the board) keeps the drawing proportional instead of crushing its three columns. */ [style*="zoom"] { zoom: 0.42 !important; } /* ------------------------------------------------------------------ 8. WIDE / TABULAR BLOCKS → SCROLL IN PLACE The CAAR report tables and the pricing comparison are grids-as-tables: one grid per row, all sharing a column template, wrapped in a card that already carries `overflow: hidden`. Collapsing them would destroy the header↔cell relationship, so instead the card becomes the scroll container. `display: grid` + a single `max-content` track is the trick that keeps the columns aligned: a max-content track is not clamped by the scrollport, so it sizes to the widest row and every sibling row (and the card's own header strip) is stretched to exactly that width. Each row then resolves its own fixed px tracks identically. `:has()` with a descendant combinator reaches rows that sit one level deeper inside an `sc-if` wrapper (pricing). Restricted to `div` so index.html's hero
— which also pairs `overflow` with a gap-less grid — is left alone. ------------------------------------------------------------------ */ div[style*="overflow"]:has([style*="grid-template-columns"]:not([style*="gap"])) { display: grid !important; grid-template-columns: max-content !important; overflow-x: auto !important; overflow-y: hidden !important; } /* Shell commands in for-vendors.html scroll rather than push the page. */ pre, code { overflow-x: auto !important; overflow-wrap: anywhere !important; max-width: 100% !important; } /* ------------------------------------------------------------------ 9. FOOTER The tall footer is a `2fr 1fr 1fr 1fr 1fr 1fr` grid: rule 4 has already flattened it to one column, which makes it enormous. Two columns read better; the brand/blurb cell (with its nowrap logo lockup) spans the full width. The short footers are flex rows and wrap via rule 5. ------------------------------------------------------------------ */ /* The double attribute selector is deliberate: it has to out-specify the `[grid-template-columns][gap]` collapse rule above, which it would otherwise lose to. */ footer [style*="grid-template-columns"][style*="gap"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } footer [style*="grid-template-columns"] > *:first-child { grid-column: 1 / -1 !important; } } /* ========================================================================== PHONE — max-width: 560px Tightens what the 900px block already restructured. ========================================================================== */ @media (max-width: 560px) { /* --- Page shell: give the content a little more of the 390px ------- */ [style*="px 64px"]:not([style*="box-shadow"]), [style*="padding: 64px"] { padding-left: 18px !important; padding-right: 18px !important; } [style*="margin"][style*="64px"] { margin-left: 16px !important; margin-right: 16px !important; } /* Deep card padding (52/56px, 34px, 32px, 30px horizontal) eats most of a 390px screen. box-shadow excluded — its serialised offsets can look like a padding pair. */ [style*="px 56px"]:not([style*="box-shadow"]), [style*="px 34px"]:not([style*="box-shadow"]), [style*="px 32px"]:not([style*="box-shadow"]), [style*="px 30px"]:not([style*="box-shadow"]) { padding-left: 18px !important; padding-right: 18px !important; } /* --- Nav: let the logo lockup wrap instead of overflowing ---------- */ nav { column-gap: 14px !important; row-gap: 8px !important; } nav > a:first-child { white-space: normal !important; } /* --- Type: one more step down ------------------------------------- */ [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"], [style*="font-size: 44px"] { font-size: 29px !important; } [style*="font-size: 40px"], [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 25px !important; } [style*="font-size: 32px"], [style*="font-size: 30px"], [style*="font-size: 28px"] { font-size: 22px !important; } /* --- Media -------------------------------------------------------- */ /* 780px board must fit ~354px of content width: 780 × 0.34 ≈ 265px. */ [style*="zoom"] { zoom: 0.34 !important; } /* The two 680px-tall embeds (contact/resources) are mostly empty at phone width. */ iframe[style*="height: 680px"] { height: 520px !important; } /* Footer stays two-up at phone width — see the 900px block; a single column turns six link lists into ~20 rows of scrolling. */ } /* ========================================================================== STILL NEEDS PER-PAGE ATTENTION Things a safe, general rule cannot cover. None of these break the page or cause horizontal scroll — they are quality-of-layout items that want a human decision (and, for most of them, an edit to the page's own markup). NOTE: this list was written against the two generic layers above, before the LAYER 3 page-specific block at the bottom of this file existed. Items 2 (hero diagram), 3 (table scroll affordance), 7-ish, 8 (divider rules) and 9 (dead sticky panels) are now handled there; 1, 4, 5, 6 and 10 still stand. -------------------------------------------------------------------------- 1. NAV HAS NO MOBILE PATTERN. Seven links plus a pill wrapping onto three rows works, but it is a ~110px-tall masthead on every page. A real hamburger/disclosure needs markup + state, which this stylesheet cannot add (no JS, no HTML). 2. index.html HERO PIPELINE DIAGRAM. A 780px fixed board (`grid-template-columns: 170px 56px 1fr`) shown at `zoom: 0.5`. It is scaled to 0.34 on phones, which keeps it whole but makes its 10–13px labels genuinely tiny. It really wants a stacked mobile variant, or to be swapped for the static `assets/mge-structural-moat.png` below ~560px. 3. THE CAAR TRANSACTION TABLE (caar-example.html, Section 7). `150px 130px 1fr 110px 110px 120px` is ~800px wide; it now scrolls inside its card, but there is no visual affordance (no fade/shadow edge) telling a phone user to swipe. Same for the pricing comparison (`3fr 1fr 1fr 1fr 1fr`) and the Section 2/5/6 CAAR tables. If any of these ever loses its `overflow: hidden` wrapper, or gains a `gap`, the group-8 selector stops matching it. 4. THE GAP HEURISTIC IS THE LOAD-BEARING ASSUMPTION. "grid + gap = layout, grid without gap = table" holds for all ~60 current `grid-template-columns` declarations, but it is a convention, not a contract. Any new gap-less layout grid will refuse to collapse; any new table row that declares a gap will be flattened. 5. THE TYPE LADDER IS A LADDER, NOT A SCALE. 44px and 56px headlines both land on 34px (29px on phones), so a page that deliberately contrasted two display sizes loses that contrast. Per-page `clamp()` on the real headings would be better. 6. PSEUDO-TABLE CELLS HAVE NO LABELS. Even scrolled, a phone reader loses the header row as they swipe right. A proper mobile treatment would restack each row as label/value pairs — impossible without markup. 7. index.html SOURCE DRAWER. `position: fixed; width: 380px` overlay. It is capped to 100% width here, so on a 390px screen it covers the viewport edge to edge; the close affordance and the 34px/32px padding were designed for a 380px panel over a wide page. 8. FOUR-UP STAT STRIPS with `gap: 0` and `border-right` dividers (caar-example Section 1, index's stat bar) stack into a column where the dividers now read as stray right-hand rules. Harmless, but it wants `border-bottom` on mobile — which needs a colour-adjacent decision, deliberately out of scope here. 9. roi-simulator.html / m04-scr.html STICKY PANELS. `position: sticky; top: 20px` inside what is now a one-column grid: the panel's grid area is only as tall as the panel, so it never actually sticks. Behaviourally fine, but the sticky is now dead code. 10. PAGES NOT INSPECTED IN DEPTH: blog/ subpages, fohboh-api-docs-page.html, terms.html, privacy.html, login.html. They share the nav/footer chrome and the same inline idioms, so the general rules apply, but their long-form content was not audited. ========================================================================== */ /* ========================================================================== LAYER 3 — page-specific overrides, from the two mobile audits. Placed last on purpose: these must beat the generic rules above, so where a generic rule uses two attribute selectors these match it or exceed it. ========================================================================== */ @media (max-width: 900px) { /* --- iOS Safari zooms in on any focused input under 16px and never zooms back out, leaving the visitor panned sideways. login + roi-simulator. */ input, select, textarea { font-size: 16px !important; } button { min-height: 44px !important; } /* --- The nav lockup is a ~350px white-space:nowrap flex item on every page, so it overflows before a single link is drawn. Drop the divider and the "CERTIFIED INTELLIGENCE" tail; keep the mark and wordmark. */ nav [style*="letter-spacing: 0.16em"], nav [style*="width: 1px"][style*="height: 15px"], footer [style*="letter-spacing: 0.16em"], footer [style*="width: 1px"][style*="height: 15px"] { display: none !important; } /* --- Homepage hero: the diagram is zoom:0.5 on a 780px tree inside overflow:hidden, so it is cropped to an illegible band rather than scrolling. A static PNG of the same diagram is already in the DOM as the crossfade B layer — show that instead. */ .om-xfade-a { display: none !important; } .om-xfade-b { position: static !important; opacity: 1 !important; animation: none !important; inset: auto !important; } .om-xfade-b img { width: 100% !important; height: auto !important; max-height: none !important; } /* --- Dark CTA banner (index/sentry/cortex/mge): a 290px nowrap button in a 150px box. Stack it. */ [style*="padding: 52px 56px"] { margin-left: 16px !important; margin-right: 16px !important; padding: 28px 20px !important; flex-direction: column !important; align-items: stretch !important; } [style*="padding: 52px 56px"] a { white-space: normal !important; text-align: center !important; display: block !important; box-sizing: border-box !important; } /* --- Pseudo-tables: keep the columns, scroll them. Collapsing these to one column produces unlabelled value stacks. The cards clip with overflow:hidden today, which is why the money columns are invisible. */ div:has(> [style*="grid-template-columns: 90px 1fr 180px 140px"]), div:has(> [style*="grid-template-columns: 1.4fr 160px 1fr"]), div:has(> [style*="grid-template-columns: 180px 1fr 140px"]), div:has(> [style*="grid-template-columns: 150px 130px 1fr 110px 110px 120px"]), div:has(> [style*="grid-template-columns: 3fr 1fr 1fr 1fr 1fr"]) { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } [style*="grid-template-columns: 90px 1fr 180px 140px"] { min-width: 600px !important; } [style*="grid-template-columns: 1.4fr 160px 1fr"] { min-width: 560px !important; } [style*="grid-template-columns: 180px 1fr 140px"] { min-width: 560px !important; } [style*="grid-template-columns: 150px 130px 1fr 110px 110px 120px"] { min-width: 770px !important; } [style*="grid-template-columns: 3fr 1fr 1fr 1fr 1fr"] { min-width: 600px !important; } /* --- Trust Score bars are the one pseudo-table that carries a gap, so the generic collapse catches it. Label / bar / score only means anything on one line — narrow it instead. Two attributes to win the tie. */ [style*="grid-template-columns: 150px 1fr 40px"][style*="gap"] { grid-template-columns: 104px 1fr 32px !important; gap: 8px !important; font-size: 11.5px !important; } /* --- ROI simulator: the results panel is sticky beside the form. Stacked it goes inert and lands below ~15 fields, so inputs appear to do nothing. Move it to the top; its defaults are pre-populated. */ [style*="position: sticky"][style*="top: 20px"] { position: static !important; order: -1 !important; } /* --- Contact: Calendly needs ~1150px on mobile and JotForm ~1100px. Pinned at 680px they scroll inside the frame — a touch trap on the primary demo-booking path. Make the frame taller than its content. */ iframe[src*="calendly.com"] { height: 1150px !important; } iframe[src*="jotform.com"] { height: 1100px !important; } /* --- cortex: the suggestion-chip strip is a deliberately clipped scroller (the second chip's label is authored truncated). It must not wrap. */ [style*="margin-top: 36px"][style*="overflow: hidden"] { flex-wrap: nowrap !important; overflow-x: auto !important; } /* phone mock */ figure [style*="width: 320px"] { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; } figure[style*="justify-self: end"] { justify-self: center !important; } /* pre-existing bug: an absolutely positioned caption escaping an unpositioned parent and landing over the footer. */ [style*="aspect-ratio: 16 / 9"][style*="place-items: center"] { position: relative !important; } /* --- sentry hub-and-spoke: the SVG scales, the absolutely positioned cards don't, so they collide with the ring at narrow widths. */ figure [style*="width: 116px"] { width: 30% !important; padding: 6px 5px !important; } figure [style*="width: 104px"] { width: 46% !important; } /* --- Footer: a 6-column grid stacked one-up is ~20 rows of links. */ footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; } footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr"] > *:first-child { grid-column: 1 / -1 !important; } /* --- Four-across stat strips (index/sentry/mge) shrink to shredded text. */ [style*="justify-content: space-between"][style*="padding: 30px 64px"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; padding: 24px 16px !important; } /* --- caar: vertical cell rules land wrong once columns change. */ [style*="border-right: 1px solid"] { border-right: 0 !important; } /* --- pricing: a hand-tuned 62px spacer that aligned the Cortex price with the other cards' toggles becomes a dead hole when stacked. */ [style*="margin-top: 62px"] { margin-top: 16px !important; } [style*="min-height: 40px"] { min-height: 0 !important; } /* --- index: the fixed source drawer overflows a 360px phone. */ [style*="width: 380px"][style*="position: fixed"] { width: min(88vw, 380px) !important; } /* --- Long monospace commands are better scrolled than broken at hyphens. */ code { white-space: pre !important; overflow-x: auto !important; } /* --- Sticky needs a scrollport; clip does not create one, hidden does. */ html, body { overflow-x: clip !important; } } /* --- m04-scr: the scroll animation is hand-tuned to translateY(-449px), which is only correct while the image is 430px wide. Once it shrinks the animation overshoots onto empty black. @keyframes cannot be overridden by name (the page's own