/* Responsive layer for the design export — handoff.md gap #1. * * The export was authored at desktop width and carries ZERO @media rules * across 68 pages; every layout value is an inline style, which outranks any * stylesheet rule. Hence !important throughout, scoped to narrow viewports so * desktop rendering is untouched. Selectors match inline-style substrings * because the export has almost no classes to hang rules on. * * Breakpoints are Webflow's 991 / 767 / 479, the ones the live vijil.ai is * designed against, so this layer stages the same way the original does * rather than inventing its own. * * Reference measurements taken from the live site at a 390px viewport: * nav 75px tall (hamburger, one row), h1 52.76px, headline top 126px. */ /* ======================================================================== Product diagram swap — desktop artwork vs. hand-laid-out mobile variant ======================================================================== Six diagrams draw into a 1096px viewBox. Scaled into 350px their labels land near 4px, so they are redrawn rather than shrunk (one module per diagram in scripts/mobile-diagrams/). The converter wraps each desktop svg together with its variant in .vj-dia-swap; these two rules pick one. display:none rather than visibility or opacity, so the hidden one leaves the accessibility tree — otherwise a screen reader reads both aria-labels for the same figure. */ .vj-dia-swap > .vj-dia-mobile { display: none; } /* lifecycle-graph is a custom element, so it needs its own half of the swap — `svg:not(.vj-dia-mobile)` below cannot match a non-svg sibling. */ .vj-dia-swap > lifecycle-graph { display: block; } /* ======================================================================== Hamburger nav — mirrors the live site's Webflow navbar (data-collapse=all) ======================================================================== */ .vj-burger { display: none; } @media (max-width: 991px) { .vj-burger { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 44px; /* 44px is the minimum comfortable tap target */ height: 44px; padding: 0; margin-left: auto; border: 0; background: none; cursor: pointer; flex: none; } .vj-burger span { display: block; height: 2px; width: 24px; background: currentColor; /* inherits the nav's ink, dark or light */ transition: transform .18s ease, opacity .18s ease; } .vj-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .vj-burger.is-open span:nth-child(2) { opacity: 0; } .vj-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* The panel holds the real link row, moved rather than cloned. */ .vj-mobile-panel { padding: 8px 20px 20px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 14%, transparent); } .vj-mobile-links { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; } .vj-mobile-links > * { width: 100%; } .vj-mobile-links a { padding: 11px 0; display: block; } /* Desktop dropdowns open on :hover, which never fires on touch. Flatten them so every destination is visible in one scrollable list. */ .vj-mobile-links .vj-dd { display: block !important; } .vj-mobile-links .vj-dd-m { display: block !important; position: static !important; padding-top: 0 !important; } .vj-mobile-links .vj-dd-m > div { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 0 0 14px !important; min-width: 0 !important; } /* The pill CTAs stay pills, sized to the panel. The export sets them content-box with 18-20px of horizontal padding, so width:100% became 390 + 36 = 426px and they ran past the frame. border-box folds the padding back inside the width. */ .vj-mobile-links a[style*="border-radius:999px"] { box-sizing: border-box !important; width: 100% !important; text-align: center; margin-top: 8px; } /* Same trap anywhere else a padded element is stretched to full width. */ .vj-mobile-panel *, .vj-mobile-links * { box-sizing: border-box; } } /* ======================================================================== Layout — everything below 991px ======================================================================== */ @media (max-width: 991px) { /* --- Page scrolling ---------------------------------------------------- * The homepages put every panel inside ONE nested scroll container: *
* On a phone that breaks scrolling outright: the document never scrolls so * the address bar never collapses, 100vh exceeds the visible area while * browser chrome shows so panel bottoms are unreachable, and mandatory * snapping fights touch momentum. Give the page back to the browser. */ [data-snap="true"] { height: auto !important; max-height: none !important; overflow-y: visible !important; scroll-snap-type: none !important; } [style*="scroll-snap-align"] { scroll-snap-align: none !important; } /* Desktop snaps one full-viewport panel at a time. Mobile scrolls * continuously (the snap container is released above), so a panel no longer * needs to fill the screen — and pinning it to one leaves the short panels * padded out with blank space. Measured on the risk-owner homepage: the * Platform panel held 568px of content in an 844px box, and the page * carried 796px of slack in total. * * Panels size to their content instead. svh, not vh, wherever a viewport * height is still wanted: vh predates mobile browser chrome and ignores it. */ [style*="height:100vh"] { height: auto !important; min-height: 0 !important; } [style*="min-height:100vh"] { min-height: 0 !important; } /* The hero is the exception — it should still fill the first screen. */ [data-snap] > *:first-child, [data-snap] > *:first-child > [style*="scroll-snap-align"] { min-height: 100svh !important; } /* 120px/96px vertical padding is a desktop rhythm; on a phone it reads as a * gap rather than as breathing room. */ [style*="padding:120px"] { padding-top: 56px !important; padding-bottom: 48px !important; } [style*="padding:96px"] { padding-top: 48px !important; } [style*="padding-top:120px"] { padding-top: 56px !important; } [style*="padding-bottom:96px"] { padding-bottom: 48px !important; } /* --- Nav must not overlap the hero ------------------------------------- * The homepages pin the nav absolute and compensate with padding-top:96px * sized for a one-row desktop nav. In flow, that padding double-counts. */ nav[style*="position:absolute"], nav[style*="position: absolute"] { position: static !important; } /* The panels are `display:grid; align-content:center` inside min-height:100vh. * When the content is TALLER than the panel — which happens in portrait, * where a narrow column makes everything taller, but not in landscape — a * centred grid overflows equally in BOTH directions, so the top of one * panel rides up over the bottom of the previous one. That is the terminal * image appearing to occlude the subheading above it. Packing to the start * lets the panel grow downward instead. */ [style*="align-content:center"], [style*="align-content: center"] { align-content: start !important; } [style*="scroll-snap-align"][style*="padding:96px"] { padding-top: 28px !important; } /* --- Grids ------------------------------------------------------------- * Track is minmax(0,1fr), NOT 1fr: bare 1fr means minmax(auto,1fr), whose * floor is the content's min-content width, so a long code line still * forces the page wider than the screen. The 0 floor is what lets it * shrink. The second rule catches IMPLICIT grids that declare no columns at * all — one of those handed a 326px container a 964px track. */ [style*="grid-template-columns"], [style*="display:grid"], [style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; } [style*="display:grid"] > *, [style*="display: grid"] > *, [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0 !important; } /* --- Flow --------------------------------------------------------------- */ [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; } /* Terminal comments. The wrap rule above breaks a `$ command # note` row onto two lines, and the orphaned note then reads as a comment on the NEXT command — "# in-agent guards" appearing to annotate the line below it. The command is the content; the note is decoration. Drop the decoration rather than let it lie. Matches only the dimmed, flex:none note spans inside the dark terminal blocks; every element this selects starts with "#". */ [style*="color:rgba(230,237,245,.4)"][style*="flex:none"] { display: none !important; } /* Terminal commands. With the note hidden (above) a long command still ellipsises, so the reader loses the back half of the one line they came for -- "vijil protect my-agent --guards prompt_inj...". A command is not decoration; let the row scroll instead of truncating it. Scoped to the dark terminal block, not the small inline code chips that share the ground token. */ [style*="border-radius:10px"][style*="--vj-ground-ink"] [style*="white-space:nowrap"] { overflow-x: auto !important; } [style*="border-radius:10px"][style*="--vj-ground-ink"] [style*="text-overflow:ellipsis"] { overflow: visible !important; text-overflow: clip !important; } /* Logo marquees are a width:max-content flex track translated by a keyframe animation inside an overflow:hidden window. Wrapping it, or capping it at max-width:100%, turns the scrolling row into a tall stacked column with 72px gaps. Animated tracks and their immediate rows keep their own flow. */ /* div[...] rather than [...] on purpose. The generic [style*="width:"] { max-width: 100% } rule below has the same specificity and comes later, so it was winning and capping this track at the column width — which squashed the two loop copies onto each other and made the logos appear to repeat and overlap. The element qualifier outranks it. */ div[style*="animation:om-marq"], div[style*="animation: om-marq"], div[style*="animation:om-marq"] > *, div[style*="animation: om-marq"] > * { flex-wrap: nowrap !important; max-width: none !important; width: max-content !important; flex: none !important; } /* Keep each mark's own inline width. width:auto collapses a background-image div to zero (no content to size from), and the flex-children min-width:0 rule above lets it shrink to nothing; flex:none pins it. */ div[style*="animation:om-marq"] [role="img"] { flex: none !important; max-width: none !important; /* keep the mark's own 130px, not 100% of the row */ } /* Step sequences (Scan -> Fingerprint -> Attest) stack rather than wrap: a wrapped connector arrow points nowhere. */ [style*="display:flex"][style*="align-items:stretch"], [style*="display: flex"][style*="align-items: stretch"] { flex-direction: column !important; } [style*="width:"] { max-width: 100% !important; } /* The export bakes a measured width AND height onto some elements — this * paragraph carries "width:964px; height:29px", the height of ONE line at * desktop width. Narrowing it reflows the text to three lines, but the * pinned height stays at one, so the text spills over whatever follows. * That is the portrait-only occlusion in "Plugs in to": in landscape the * column is wide enough that the text still fits its pinned height. * * Released on text blocks only. Of 56 elements with a pinned width+height, * exactly one overflows, and spans are left alone because several use a * pinned height as a shape (colour dots, badges) that auto would collapse. */ p[style*="height:"], h1[style*="height:"], h2[style*="height:"], h3[style*="height:"], h4[style*="height:"], li[style*="height:"], blockquote[style*="height:"], figcaption[style*="height:"] { height: auto !important; min-height: 0 !important; } [style*="min-width:"] { min-width: 0 !important; } img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; } /* clip, not hidden: hidden makes the element a scroll container and would resurrect the nested-scrolling bug that broke the homepage. */ html, body { overflow-x: clip; } } /* ======================================================================== Type and rhythm — tablet down ======================================================================== */ @media (max-width: 767px) { /* Scaled to land near the live site's 52.76px h1 at a 390px viewport (13.5vw ~= 52.7px there) rather than to an invented ladder. */ [style*="font-size:72px"], [style*="font-size:76px"], [style*="font-size:80px"] { font-size: clamp(36px, 13.5vw, 60px) !important; line-height: 1.06 !important; } [style*="font-size:64px"], [style*="font-size:68px"] { font-size: clamp(34px, 12vw, 54px) !important; line-height: 1.08 !important; } [style*="font-size:56px"], [style*="font-size:60px"] { font-size: clamp(32px, 11vw, 48px) !important; line-height: 1.1 !important; } [style*="font-size:44px"], [style*="font-size:48px"] { font-size: clamp(28px, 8.5vw, 38px) !important; line-height: 1.15 !important; } [style*="font-size:40px"] { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.18 !important; } /* Hard line breaks are set for a desktop measure. On a phone they leave orphans mid-sentence ("systems that" alone on a line), so let text reflow. display:inline rather than display:none: hiding the
also removes the whitespace it stood for, which ran words together ("systems thatremain reliable"). The ::after restores the space. Verified in the browser against all three candidate techniques. */ .vj-softbr::before { content: none !important; } /* nowrap belongs on nav items and pills, not on headings and body, where it forces horizontal overflow. */ h1, h2, h3, h4, p, li, td, th, figcaption, blockquote { white-space: normal !important; } nav [style*="white-space:nowrap"], a[style*="border-radius:999px"] { white-space: nowrap !important; } [style*="padding:0 32px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="padding:96px 32px"] { padding-left: 20px !important; padding-right: 20px !important; } } /* ======================================================================== Phone ======================================================================== */ @media (max-width: 767px) { /* ---- Logos: one size for every set ------------------------------------ * Two different mechanisms carry logos. Customer marks are *
with a background image, sized * 176x44 (and NEAR at 112x28, already inconsistent). Analyst and award * marks are at 36-48px. Both are normalised to the same 34px so the * rows read as one system. * * The selector keys on the inline opacity every decorative logo carries and * the nav wordmark does not, so the wordmark keeps its size. */ img[style*="opacity:.9"], img[style*="opacity: .9"], img[style*="opacity:.85"], img[style*="opacity: .85"], img[style*="opacity:.8"], img[style*="opacity: .8"] { width: auto !important; object-fit: contain; } /* Equal height is not equal presence. Measured intrinsic ratios: * award badges 0.92 - 0.93 (square) * investor marks 2.89 - 7.72 (wordmarks) * customer marks 3.71 - 9.89 (wordmarks) * At a shared 34px the square badges were ~32px wide and the wordmarks * 126-336px — roughly four times the visual mass. Heights now move in * opposite directions to meet in the middle: wordmarks down to 28, square * badges up to 42. Filename is the discriminator because CSS cannot select * on aspect ratio, and the award- and inv- prefixes are stable names. * (Do not write a star-slash pair inside this comment: it closes it early * and silently turns the rules below into garbage.) */ img[src*="award-"] { height: 48px !important; max-height: 48px !important; } img[src*="inv-"] { height: 22px !important; max-height: 22px !important; align-self: center !important; /* Mayfield sat high against the others */ vertical-align: middle !important; object-fit: contain; } /* Gradient's mark is 193x25 — ratio 7.7 against Mayfield's 2.9 — so at an equal height it runs 170px wide and dominates the row. Capping width brings its visual weight back in line; BrightMind is capped for the same reason, being the heaviest of the three by area. */ img[src*="inv-gradient"] { max-width: 112px !important; height: auto !important; } /* Mayfield's artwork sits high in its own PNG, so at a shared centre line its ink reads about 3px above the others. Nudge the box down by that much rather than changing its size. */ img[src*="inv-mayfield"] { position: relative !important; top: 3px !important; } img[src*="inv-brightmind"] { max-width: 100px !important; height: auto !important; } /* The row's 22px desktop gap pushed the third mark onto a second line, which read as one logo sitting higher than the others rather than as a wrap. Tighter gap keeps all three on one row. */ [style*="display:flex"]:has(> img[src*="inv-"]) { gap: 12px !important; align-items: center !important; flex-wrap: nowrap !important; } /* Customer logos: a 2 x 3 grid rather than a wrapping flex row, which left ragged rows of two-then-one. :has() selects the row by what it contains, since the container itself has no class to target. */ /* [style*="flex-wrap:wrap"] is the discriminator, and it matters: the framework marquee is ALSO a flex row of [role=img] marks, but sits inside an animated width:max-content track and does not wrap. Without this the grid rule collapsed the marquee and width:100% blew each mark up to the full row, leaving that section blank. */ [style*="display:flex"][style*="flex-wrap:wrap"]:has(> [role="img"][aria-label]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 16px !important; align-items: center !important; justify-items: stretch !important; } [style*="display:flex"][style*="flex-wrap:wrap"]:has(> [role="img"][aria-label]) > [role="img"][aria-label] { width: 100% !important; } /* Justify the grid: left column's artwork to the left margin, right column's to the right edge, with the slack falling between them. The box already fills its cell, so the alignment is done by where the background image sits inside it rather than by resizing anything. */ [style*="display:flex"][style*="flex-wrap:wrap"]:has(> [role="img"][aria-label]) > [role="img"][aria-label]:nth-child(odd) { background-position: left center !important; } [style*="display:flex"][style*="flex-wrap:wrap"]:has(> [role="img"][aria-label]) > [role="img"][aria-label]:nth-child(even) { background-position: right center !important; } /* Height applies to every mark, marquee included, so both sets read as one system. Width is left alone outside the grid. */ [role="img"][aria-label] { height: 22px !important; background-size: contain !important; } /* The NEAR mark is a PNG cropped tight to its glyphs, where the others are SVGs carrying their own internal whitespace. At an equal box height it therefore reads noticeably larger. Scaling the artwork inside the same box gives it matching optical padding without changing the grid. */ [role="img"][aria-label="NEAR"] { background-size: auto 78% !important; } /* ---- Diagrams --------------------------------------------------------- * lorenz-loop and lifecycle-graph draw into a ~1044px viewBox. Scaled into * 350px their labels render at about 4px. The wrapper (added by the * converter) scrolls instead, so the diagram stays legible and swipeable. */ .vj-diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100% !important; /* the 720px host must not widen the page */ width: 100% !important; } /* The component sizes its own diagram from viewport HEIGHT: * .vj-loop figure { max-width: min(1080px, max(420px, * calc((100vh - 400px) * 1.678))) } * On a phone that resolves to ~600px however wide the host is, so the stage * labels (spec, evolve, evaluate, ...) render at roughly 58% and vanish. * That rule is inside a shadow root, so it is fixed in the component's own * stylesheet (design/lorenz-loop.js) rather than from here. This wrapper * only provides the horizontal scroll. */ /* No min-width here any more. Forcing the whole component to 1044px took its heading and lede off-screen with it, so the section opened scrolled past its own title. The component now scrolls only its
internally (see design/lorenz-loop.js), leaving the prose at viewport width. This wrapper stays for lifecycle-graph, which has no such internal treatment. */ .vj-diagram-scroll > * { display: block; max-width: 100% !important; } /* ---- CTA buttons ------------------------------------------------------ * Centre any row of pill CTAs. Selected by content, as the row has no class. */ [style*="display:flex"]:has(> a[style*="border-radius:999px"]) { justify-content: center !important; } /* An image set to width:112% deliberately overhangs its column on desktop; on a phone that is 2px of horizontal overflow and a crowded figure. */ img[style*="width:112%"], div[style*="width:112%"] { width: 100% !important; max-width: 100% !important; } } @media (max-width: 479px) { /* Stack the CTA pills once a side-by-side pair would be cramped. */ [style*="display:flex"]:has(> a[style*="border-radius:999px"]) { flex-direction: column !important; align-items: center !important; } a[style*="border-radius:999px"] { box-sizing: border-box !important; width: 100% !important; max-width: 320px !important; text-align: center !important; } [style*="padding:0 32px"] { padding-left: 16px !important; padding-right: 16px !important; } [style*="gap:88px"] { gap: 48px !important; } [style*="gap:64px"] { gap: 36px !important; } [style*="gap:56px"] { gap: 32px !important; } } /* Desktop behaviour of the converted
replacements: ::before injects the * newline the original
provided. The span itself holds a space, so the * mobile rule above (content:none) leaves words correctly separated. */ .vj-softbr::before { content: "\A"; white-space: pre; } /* ======================================================================== Product diagram swap — the breakpoint half ======================================================================== Its own block at the end of the file for two reasons. The generic `img, svg, ... { max-width:100% !important }` rule in the 991 block would otherwise tie with the variant's sizing, and last-wins settles it. And an earlier attempt anchored these rules on a nearby comment that turned out to sit inside the 767 block, so the swap silently fired a breakpoint late — scripts/check-css-breakpoints.mjs now asserts the enclosure. */ @media (max-width: 991px) { /* The desktop svg is any direct svg child that is not the variant, so no class has to be injected into the export's own markup. */ .vj-dia-swap > svg:not(.vj-dia-mobile) { display: none !important; } .vj-dia-swap > lifecycle-graph { display: none !important; } .vj-dia-swap > .vj-dia-mobile { display: block !important; width: 100% !important; max-width: 350px !important; height: auto !important; margin: 0 auto !important; } } /* ======================================================================== Lifecycle variant — the chase around the loop ======================================================================== Six chips sit on a rectangle. Each lights in turn, and the connector leaving it travels to the next, so the motion runs clockwise around the perimeter once every 7s. That IS the argument: the lifecycle is a loop, not a line. Keyframes live here rather than in a