/* =================================================================== responsive.css — mobile-first responsive layer. Loaded LAST, after styles.css and overrides.css, so it wins the cascade without any of them having to be re-authored. It exists because the template underneath is desktop-first: it assumes a wide, short viewport and treats phones as a set of max-width exceptions. Everything here is written the other way round — the phone case is the unqualified rule, and larger screens opt in with min-width. The layout-mode switch itself lives in styles.css / overrides.css and now reads: compact (stacked) max-width: 900px OR max-width: 1180px AND portrait wide (desktop) everything else The portrait clause is what pulls Surface Pro 7 (912x1368) and iPad Pro (1024x1366) out of the desktop branch — on those the desktop design left a full empty viewport between blocks and pushed the 1224px hero mockup off both screen edges. Verified against the Chrome DevTools device list: Galaxy Z Fold 5 344, Galaxy S8+ 360, iPhone SE 375, iPhone 12 Pro 390, Pixel 7 / S20 Ultra / A51 412, iPhone XR 414, iPhone 14 Pro Max 430, Surface Duo 540, iPad Mini 768, iPad Air 820, Zenbook Fold 853, Surface Pro 7 912, iPad Pro 1024, Nest Hub 1024x600, Nest Hub Max 1280x800. =================================================================== */ /* ------------------------------------------------------------------- 1 · Foundations ------------------------------------------------------------------- */ :root { /* Minimum comfortable touch size (WCAG 2.5.8 target size = 24px, Apple/Material both say 44). */ --tap: 44px; } html { /* iOS inflates text in portrait->landscape rotation unless pinned. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* NOT `html { overflow-x: clip }`. It reads as the safe modern alternative to overflow:hidden, and on the ROOT element it is not: overflow on propagates to the viewport, the still-`visible` y axis computes to `auto`, and the viewport becomes the scroll container for sticky positioning. The pinned process section then never sticks — it scrolls straight past and leaves a blank screen where five panels should cross-fade. `body` already carries overflow-x:hidden in styles.css, and the device sweep measures zero horizontal overflow on all 17 viewports without any rule here. */ /* A grid/flex item's min-width defaults to auto, so one long unbreakable string (a URL, a $27,500.00, a mono label) can push its whole track wider than the screen. This is the single most common cause of a phone-only horizontal scrollbar. */ main, section, article, .block, .sect { min-width: 0; } /* Long words / URLs wrap instead of overflowing on narrow screens. */ p, li, figcaption, blockquote, dd { overflow-wrap: break-word; } /* Headings read better when the last line isn't a single orphan word — and a narrow column is where a one-word last line looks worst. Scoped to the compact branch on purpose: rebalancing the desktop headlines would rewrite line breaks the design already settled on. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { h1, h2, h3, .block__title, .showcase__title, .finalcta-title { text-wrap: balance; } } /* Media never exceeds its box, whatever intrinsic size it declares. */ img, video, svg, canvas, iframe { max-width: 100%; } /* ------------------------------------------------------------------- 2 · Viewport units — dvh, not vh ------------------------------------------------------------------- Mobile Safari and Chrome size 100vh to the viewport with the URL bar COLLAPSED, so a 100vh hero is taller than what you can actually see on load and its bottom edge is cut. 100dvh tracks the live viewport. Applied only where a full-screen box is intentional. */ @supports (height: 100dvh) { html:not(.fp-enabled) .curtain { height: 100dvh; } html:not(.fp-enabled) #fullpage .section { min-height: 100dvh; } /* The globe is the other deliberate full-screen box — 100vh with a 640px floor, pinned inside its own scroll track. */ .globe-pin-wrap > .globe-section { height: 100dvh; } } /* The compact branch already collapses those min-heights; restate it here so the @supports block above can't reintroduce them. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { html:not(.fp-enabled) #fullpage .section { min-height: auto; } } /* ------------------------------------------------------------------- 3 · Safe areas (notch / home indicator / punch-hole) ------------------------------------------------------------------- viewportFit:"cover" in layout.tsx lets the page paint under the system UI, which is what makes the hero bleed edge to edge. The cost is that anything fixed has to inset itself, or it lands under the notch in landscape and under the home indicator at the bottom. */ /* Every rule here has to ADD to the safe area, never replace a value the template already set. `padding-left: env(...)` looks harmless because it resolves to 0 off-device — but 0 is exactly the problem: it overwrote the nav's 16px and the footer's 40px with nothing. */ @supports (padding: env(safe-area-inset-left)) { /* Landscape is where a notch eats a real slice of a screen edge. max-width only ever shrinks, and the margin is 0 when there are no insets, so this is inert on every device without them — including all desktops. */ @media (orientation: landscape) { .nav, .apollo-top-cta { max-width: calc( 100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right) ); margin-left: calc( (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2 ); } } /* The drawer's vertical padding is 0 in the template, so this one can set it outright. */ .nav__drawer { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* The footer is the last thing on the page, so its final line sits under the home indicator. A spacer child adds clearance without touching the footer's own 40px of bottom padding. */ .site-footer::after { content: ""; display: block; height: env(safe-area-inset-bottom, 0px); } } /* ------------------------------------------------------------------- 4 · Touch targets ------------------------------------------------------------------- Scoped to coarse pointers so the desktop design keeps its tighter rhythm. Everything below measured under 44x44 on a real device in the audit; each fix adds hit area without moving the visual box, using padding or a ::after overlay rather than a bigger background. */ @media (pointer: coarse) { /* Wordmark — a 55x15 text link in the nav bar. */ .nav .brand { display: inline-flex; align-items: center; min-height: var(--tap); } /* Desktop nav links, on a touch screen. A Nest Hub / Nest Hub Max is 1024-1280px wide AND finger-operated, so it gets the desktop nav bar with 71x16 text links in it. Widen the rows, not the type. */ .nav .links a, .nav .right .signin { display: inline-flex; align-items: center; min-height: var(--tap); } /* Burger — 38x38 by design; the extra 6px is invisible. min-*, not width/height: these must only ever grow a target. */ .nav__burger { min-width: var(--tap); min-height: var(--tap); } /* Every pill button: ghost CTAs measured 36px tall. */ .btn, .nav .btn, .hero .ctas .btn, .apollo-top-cta__button { min-height: var(--tap); } /* Carousel arrows — 40x40 on a phone, but 50x50 already on a wide touch screen, which a flat width/height would have shrunk. */ .car-arrow { min-width: var(--tap); min-height: var(--tap); } /* "Real workflow" proof toggle — 135x40. */ .wf-proof-btn { min-height: var(--tap); } /* FAQ rows — 43px tall, one pixel short. The +2px absorbs the sub-pixel rounding of the row's own padding. */ .qa-q { min-height: calc(var(--tap) + 2px); } /* Automations filter chips. */ .s4--autos .filter-list button { min-height: var(--tap); } /* Service tabs. */ .care__card { min-height: var(--tap); } /* Footer nav links sat at 40px. `flex`, not `inline-flex`: the column stacks its links as block-level rows, and going inline put "What you get" and "Proof" on the same line. */ .site-footer .foot-col a { display: flex; align-items: center; min-height: var(--tap); } /* Footer social icons are 34x34 badges; keep the badge, grow the hit area around it so the icons don't turn into big grey squares. */ .foot-social a { position: relative; } .foot-social a::after { content: ""; position: absolute; top: 50%; left: 50%; min-width: var(--tap); min-height: var(--tap); width: 100%; height: 100%; transform: translate(-50%, -50%); } /* ...which needs breathing room, or the enlarged targets overlap. */ .foot-social { gap: max(12px, 0.6rem); } /* Drawer links are already tall; make sure the tap area spans the row. */ .nav__drawer a { min-height: var(--tap); } } /* The hero dashboard is a decorative mock-up (aria-hidden). Nothing in it is a control, so it must not read as one to a touch or a screen reader. */ .browser .sd-link, .browser .sd-btn-ghost, .browser .sd-nav-i, .browser .sd-pill { pointer-events: none; } /* ------------------------------------------------------------------- 5 · Legibility ------------------------------------------------------------------- Deliberately empty. overrides.css already floors every instrument label at 11px on `(max-width: 600px), (pointer: coarse)` with !important, which covers phones AND tablets — and 11px is the iOS caption floor, not an accident. Re-stating it here only risks two rules disagreeing. The one exception worth making is the hero eyebrow, which is white-on-gradient rather than dark-on-paper and loses more to the background than the mono labels do. */ /* Phones only: that is the one bracket where the pill's own type drops to 11px. Targeting the span rather than the pill keeps the container's inherited size — and therefore its padding and gap — exactly as authored. */ @media (max-width: 600px) { .hero .pill span { font-size: 12px; } } /* ------------------------------------------------------------------- 6 · Hero proof line ------------------------------------------------------------------- Avatar stack + "Generated $45,000 in 45 days…" is a two-column flex row. At 344px the copy is squeezed into ~200px and breaks to three ragged lines against the avatars. Below 380px it becomes a stack. */ @media (max-width: 380px) { .testibar { flex-direction: column; align-items: center; gap: 10px; } .testibar-copy, .testibar-text { text-align: center; } } /* ------------------------------------------------------------------- 7 · Hero mock-up on portrait tablets ------------------------------------------------------------------- The compact branch scales the 1224px frame with zoom:0.52, tuned for a ~390px phone. On a 912-1024px portrait tablet that leaves it floating at 636px in the middle of a wide screen. Re-scale for the real width. width is !important because the element carries an inline width:1224px from the template, which no plain rule can beat. */ @media (min-width: 901px) and (max-width: 1180px) and (orientation: portrait) { .browser { zoom: 0.72; width: min(1224px, calc((100vw - 48px) / 0.72)) !important; } } /* Same problem one step down: 768-900px portrait tablets get the phone scale. Give them a size that matches the screen. */ @media (min-width: 721px) and (max-width: 900px) and (orientation: portrait) { .browser { zoom: 0.62; width: min(1224px, calc((100vw - 40px) / 0.62)) !important; } } /* ------------------------------------------------------------------- 8 · Motion ------------------------------------------------------------------- Long scroll-driven sections are the part of this page that most often triggers motion sickness, and phones are where it is most likely to be turned on. The template covers most of it; this closes the gaps. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* The two infinite marquees: the showcase strip and the testimonial wall. Both animate a track element, not the row around it. */ .marquee, .testi-track { animation-play-state: paused !important; } } /* ------------------------------------------------------------------- 9 · Hero composition on tall portrait tablets ------------------------------------------------------------------- The hero is a 100vh curtain: centred copy near the top, the dashboard mock-up anchored near the bottom. That reads as one composition on a ~800px-tall laptop and on a phone. On a 1366px-tall iPad Pro or a 1368px Surface Pro it stretches to a ~400px band of empty gradient between the proof line and the mock-up, because the content does not grow with the viewport — only the gap does. Capping the curtain height is the honest fix: the hero stays a full screen on every device that is actually that shape, and on a very tall one it becomes a tight band with the rest of the page directly under it. Only portrait tablets are affected; phones already fit. */ @media (min-width: 721px) and (max-width: 1180px) and (orientation: portrait) { html:not(.fp-enabled) .curtain { height: min(100dvh, 940px); } /* The mock-up is bottom-anchored inside the curtain, so it follows the cap automatically — it just needs to stop reaching for the old floor. */ .browser { bottom: 72px; top: auto; } } /* ------------------------------------------------------------------- 10 · Phone polish pass ------------------------------------------------------------------- Everything below was measured on a phone at ~314 CSS px — an iPhone Pro (393pt) with Safari's per-site page zoom at 125%, which is how the site is actually being read. That is 80px narrower than the 390px the earlier phone rules were tuned for, and it is where the overlaps show up first. Each block is scoped to a phone width so nothing here reaches the desktop composition. ------------------------------------------------------------------- */ /* --- 10.1 Hero Stripe mock-up: address bar -------------------------- The chrome row is nav-glyph / URL pill / icon-glyph with 18px gaps and 18px side padding — 90px of fixed furniture that leaves the flex:1 pill ~80px on a 314px screen, so "dashboard.stripe.com" ran out over the lock and the toolbar icons. Tighten the furniture (that is what a real phone browser does) and the pill roughly doubles. The zoom on .browser is 0.62 here, so every px below renders at ~0.62 of its value. */ @media (max-width: 600px) { .browser__chrome { gap: 8px; padding: 0 10px; } .browser__nav { gap: 6px; } .browser__nav img { height: 10px !important; } .browser__icons { gap: 8px; } .browser__icons img { height: 11px !important; } /* 16px / 0.62 ≈ 10px on screen: one crisp line that clears the lock */ .browser__url { font-size: 16px; letter-spacing: 0; white-space: nowrap; padding-left: 22px; padding-right: 6px; gap: 4px; } /* the decorative circle-plus is pinned at left:8px inside the pill and was sitting under the first letter — the padding above now clears it */ .browser__url > svg { left: 5px !important; } } /* --- 10.2 "Is this you?" log panel --------------------------------- Long snake_case names are single unbreakable tokens, and the grid column is minmax(0,1fr) — so instead of wrapping they ran straight off the panel's right edge. Shrink the type one step, tighten the rhythm, and let a token break if it still cannot fit. */ @media (max-width: 600px) { .symlog__bar { gap: 8px; padding: 9px 14px; } .symlog__file { margin-left: 4px; font-size: 10px; letter-spacing: 0.08em; } .symlog__row { gap: 3px 10px; padding: 12px 14px; } .symlog__err { font-size: 11px; letter-spacing: 0.06em; } .symlog__name { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; } .symlog__sev { padding-top: 2px; } .symlog__sev i { width: 10px; height: 5px; } .symlog__sev span { margin-left: 6px; } .symlog__desc { margin-top: 2px; font-size: 11.5px; line-height: 1.5; } .symlog__foot { padding: 10px 14px 12px; } .symlog__fix { font-size: 10.5px; letter-spacing: 0.1em; } } /* --- 10.3 Drawer --------------------------------------------------- `.nav.dark .nav__burger span` (3 classes) outranked `.nav__burger.open span` (2), so over a dark section the burger kept its dark ink after the drawer bloomed open behind it — three near-invisible lines on near-black. Match the specificity and the open state wins. */ .nav.dark .nav__burger.open span, .nav .nav__burger.open span { background: #fff; } /* --- 10.4 Automations: chips like the desktop rail ------------------ The phone chips were 13px in 9x14 padding, which stacked six pills over six rows and pushed the workflow panel off the first screen. Desktop sets them at clamp(12px,1.05vw,15px) in a tight pill; match that so the set folds into two or three rows. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { .s4--autos .filter-list { gap: 6px !important; } .s4--autos .filter-list button { padding: 7px 11px !important; font-size: 12px !important; border-radius: 9px !important; letter-spacing: -0.02em; } } /* --- 10.5 Automations: the real graph, not the list ----------------- overrides.css swaps the drawn node graph for a vertical
    below 900px because the 1600-unit canvas scaled to a phone renders its 24px labels at ~4px. Keep the graph — the desktop artwork is the point — and give the stage a horizontal scroll instead: the canvas is laid out at a fixed 700px so labels land at ~10.5px, and the panel pans the way an n8n canvas does. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { .s4--autos .wf-stage { position: relative; height: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* the dimmed right edge is the "there is more this way" cue — 0.3 alpha rather than 0 so the last node is still readable at the end of the pan */ -webkit-mask-image: linear-gradient( 90deg, #000 0, #000 86%, rgba(0, 0, 0, 0.3) 100% ); mask-image: linear-gradient( 90deg, #000 0, #000 86%, rgba(0, 0, 0, 0.3) 100% ); } .s4--autos .wf-stage::-webkit-scrollbar { display: none; } /* width resolves to max(700px, the stage) — a phone pans a 700px canvas, a portrait tablet just gets the graph at full width with nothing to pan */ .s4--autos .wf-svg { display: block; position: relative; inset: auto; width: 700px; min-width: 100%; max-width: none; height: auto; } /* the vertical fallback list is what the graph replaces */ .s4--autos .wf-list { display: none !important; } /* the "Real workflow" screenshot rides the same scroll width so the two layers stay registered while the stage pans — but it is centred in that 700px box by default, which parks it off to the right of an unscrolled phone. Anchor it left so it is on screen the moment it is toggled. */ .s4--autos .wf-proof { position: absolute; inset: 0; width: 700px; min-width: 100%; height: 100%; justify-content: flex-start; } /* three stacked lines of caption was most of the panel's height */ .s4--autos .wf-rail { min-height: 36px; padding: 7px 12px; row-gap: 2px; } /* the gesture nudge, parked under the first node (its label sits at 70% of the canvas height, and every one of the five graphs starts at x=200 of 1600 — 12.5% across). It lives inside the scroller, so it pans away with the canvas as well as fading out. script.js injects and retires it. */ .wf-swipe { position: absolute; left: 12.5%; top: 70%; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 10px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(28, 28, 34, 0.92); font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(235, 235, 241, 0.72); white-space: nowrap; pointer-events: none; animation: wfSwipeNudge 1.7s ease-in-out infinite; transition: opacity 0.3s ease, transform 0.3s ease; } /* the arrowhead */ .wf-swipe i { width: 7px; height: 7px; border-top: 1.4px solid rgba(235, 235, 241, 0.72); border-right: 1.4px solid rgba(235, 235, 241, 0.72); transform: rotate(45deg); } .wf-swipe.is-gone { opacity: 0; transform: translateX(-50%) translateX(10px); animation: none; } @keyframes wfSwipeNudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateX(7px); } } @media (prefers-reduced-motion: reduce) { .wf-swipe { animation: none; } } } /* --- 10.6 Automations: Tools view ----------------------------------- Desktop runs the tiles at ~0.92 of the hub (118px vs 128px); the phone ran them at 0.72 (52px vs 72px), which read as a big hub with small satellites rather than the same orbit. Bring the ratio back and close the two gaps around the orbit. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { .s4--autos.is-tools .orbit { --tile-w: clamp(58px, 17.5vw, 80px); --tile-h: clamp(58px, 17.5vw, 80px); --lumio: clamp(64px, 19vw, 88px); /* was 34px / 92px — the caption needs ~46px of the bottom margin, the rest was dead air between the chips, the orbit and the next section */ margin: 14px auto 58px !important; } .s4--autos.is-tools .lumio-label .n { font-size: 17px; } /* The hub in the middle of the nine. Its carries an inline width:60%, which was resolving against a content box the tile's own padding had crushed to ~20px — the mark rendered at about 12px. Zero the padding and size the mark against the tile itself: 46% sits between the desktop hub's restrained third and the 55% the eight satellites use, so the mark reads at phone size without swallowing its square. */ .s4--autos.is-tools .orbit .tile.lumio { --lumio: clamp(68px, 20vw, 92px); border-radius: calc(var(--lumio) * 0.3); padding: 0; } .s4--autos.is-tools .orbit .tile.lumio img { width: 46% !important; } } /* --- 10.7 Testimonial wall ----------------------------------------- Three rows of 208px cards at 13px/1.4 ran ~235px tall each, so the wall alone was ~860px of phone. Trim the card and close the row gutters. */ @media (max-width: 640px) { .testi-wall { gap: 8px; padding: 22px 0 clamp(48px, 8vw, 88px); } .testi-track .quote { width: 178px; margin: 0 5px; } .testi-wall .quote { padding: 10px 12px 11px; border-radius: 12px; } .testi-wall .tw-head { gap: 7px; margin-bottom: 7px; } .testi-wall .quote-av { width: 30px; height: 30px; font-size: 12px; } .testi-wall .tw-name { font-size: 12px; } .testi-wall .tw-handle { font-size: 10.5px; } .testi-wall .tw-badge { width: 13px; height: 13px; } .testi-wall .tw-x { width: 14px; height: 14px; } .testi-wall .quote p { font-size: 12px; line-height: 1.38; /* A row is as tall as its tallest card, so one 235-character quote sets the height of all fifteen. Capping at eight lines only touches the longest few and levels the three rows out. */ display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } } /* --- 10.8 Service ledger caption ----------------------------------- "4 modules" + "All included" now fit the strip, but at 314px the two halves still met in the middle. Let the mono caption shrink first and keep the blue status on one line. */ @media (max-width: 600px) { .care__bar { gap: 8px; } .care__bar-s { flex: none; white-space: nowrap; } } /* ------------------------------------------------------------------- 11 · Globe section, phone composition ------------------------------------------------------------------- The globe is band-fitted: DotGlobe measures the clear space between the headline and the stat strip and sizes the sphere into it. So the way to give a phone a bigger globe is not to scale anything — it is to hand the band more room. Three moves do that: · the headline sits ~18px higher · "Live network" leaves the band entirely and sits between the nav and the headline, where it is also legible against flat gradient rather than over the sphere · the scroll scrub stops shrinking the sphere (DotGlobe) and only drifts it down The band is also where the client card opens, which is why the card hangs off the same measured --globe-band-top. ------------------------------------------------------------------- */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { /* both, because .globe-section--live re-states the base padding */ .globe-copy, .globe-section--live .globe-copy { padding-top: 102px; } /* Out of the band and up under the nav. Fixed offset, not the measured band top: the point is that it stops moving — it used to sit wherever the headline's last line happened to end. The longitude readout is hidden under 720px but shares the row on the tablets that keep it, so it moves with its twin rather than staying down in the band. */ .globe-hud--tl, .globe-hud--tr { top: 76px; color: rgba(178, 214, 255, 0.72); } .globe-hud--tl { left: 20px; } .globe-hud--tr { right: 20px; } } /* --- 11.1 Globe backdrop, phone ------------------------------------- The backdrop is a stack: a top horizon wash, an aurora bloom centred on the globe, then the deep-space linear. The bloom is sized in PERCENT of the section, so on a 1440x900 desktop it is an 835x468 ellipse sitting right behind the sphere — and on a 314x680 phone the same percentages collapse to 182x354, narrower than the globe itself. The sphere ends up on the flat dark end of the linear instead of in an atmosphere. Re-proportion the bloom for a tall narrow box: wider than the section, shallower, and centred at 58% where the phone sphere actually sits. The ::after vignette still darkens the corners, so the edge-to-centre falloff reads the same as the laptop's. */ @media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) { .globe-section { background: radial-gradient( 110% 34% at 50% -5%, rgba(19, 83, 176, 0.68) 0%, rgba(24, 57, 112, 0.3) 36%, rgba(2, 22, 55, 0) 66% ), radial-gradient( 118% 44% at 50% 58%, rgba(28, 108, 232, 0.62) 0%, rgba(14, 62, 156, 0.32) 40%, rgba(4, 26, 66, 0.12) 62%, rgba(2, 14, 36, 0) 78% ), linear-gradient( 180deg, #041f4e 0%, #021836 34%, #010d21 68%, #00060f 100% ); } }