/* Responsive layer for the baked marketing pages. * * The pages are baked from the design project with everything inline-styled, so * these rules need !important to win against inline declarations (an !important * author rule beats a normal inline one). Keeping the responsive work in one * shared file rather than editing hundreds of inline styles means a re-bake * only has to re-add the two lines, not redo all of this. * * Desktop rendering is intentionally untouched: everything below lives inside a * max-width media query. */ /* The page wrapper carries min-width:900px (621px on enterprises), which is * what forced phones into a clipped desktop layout. */ [data-screen-label] { min-width: 0 !important; } img { max-width: 100% !important; } /* Highlighted words in headings: the tight heading line-height (1.04-1.08) * makes the next line's highlight background paint OVER the previous line's * descenders (the y in "layer", the g in "operating"). Multiply lets the * black descender show through the yellow instead of being clipped by it. * Every highlight sits on a light section (verified), so multiply is safe. */ h1 span[style*="background:#EBFF80"], h2 span[style*="background:#EBFF80"] { mix-blend-mode: multiply; } /* ===================== tablet and below ===================== */ @media (max-width: 900px) { /* Section gutters: 40px a side out of 375 is most of the screen. */ section[style*=" 40px"] { padding-left: 24px !important; padding-right: 24px !important; } /* Two-column editorial grids hard-floor at minmax(320px)+minmax(400px) = * 720px+, which is the actual source of horizontal overflow. */ [style*="grid-template-columns:minmax"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Dense icon/stat rows: keep them multi-column but let them wrap. */ [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* Logo grids use the gap-as-border trick (gray parent background showing * through 1px gaps), so an unfilled slot renders as a large gray box. The * 5-logo agencies grid at 3 columns leaves one: let the last logo fill the * remainder of its row. */ .ent-ag > :last-child:nth-child(3n + 2) { grid-column: span 2; } /* Anything that still refuses to fit scrolls in its own box rather than * pushing the page sideways. */ [style*="grid-template-columns:repeat(12,1fr)"], [style*="grid-template-columns:repeat(10,1fr)"] { grid-template-columns: repeat(4, 1fr) !important; } /* ---------- nav ---------- */ .yb-burger { display: inline-flex !important; margin-left: 4px !important; } header nav { display: none !important; } /* Keep the primary CTA reachable -- it is the main conversion action -- but * stop it dominating a 375px header. Tagged by nav.js; a :last-child rule * would break as soon as the burger is appended after it. */ .yb-cta { padding: 9px 14px !important; font-size: 13px !important; } /* The header's backdrop-filter makes it a containing block for fixed * descendants, which would size the panel against the header instead of the * viewport. Suspend it while the panel is open (the panel is opaque anyway). */ body.yb-nav-open header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; } body.yb-nav-open header nav { display: flex !important; position: fixed !important; top: 56px; left: 0; right: 0; bottom: 0; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 20px 24px 40px !important; background: #fff; border-top: 1px solid #e5e5e6; overflow-y: auto; z-index: 60; } /* Dropdowns become plain stacked sections in the panel. */ body.yb-nav-open header nav .yb-dd { width: 100%; margin: 0 !important; padding: 0 !important; } body.yb-nav-open header nav .yb-dd > span { display: flex !important; width: 100%; padding: 14px 0 !important; font-size: 17px !important; border-bottom: 1px solid #f0f0f1; } body.yb-nav-open header nav .yb-dd-menu { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: 0 !important; min-width: 0 !important; padding: 4px 0 12px 12px !important; pointer-events: auto !important; } body.yb-nav-open header nav > a { width: 100%; padding: 14px 0 !important; font-size: 17px !important; border-bottom: 1px solid #f0f0f1; } body.yb-nav-open { overflow: hidden; } } /* ===================== phone ===================== */ @media (max-width: 600px) { section[style*=" 40px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns:repeat(12,1fr)"], [style*="grid-template-columns:repeat(10,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* Same gray-hole fix at 2 columns: an odd-count logo grid's last cell * spans the full row. */ .ent-ag > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* Footer link columns. */ footer [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; } }