/** * Responsive layer. * * The design was authored desktop-only: 5,013 inline style attributes, 588 * classes, and exactly one layout media query. Inline styles beat stylesheet * rules, so every override here needs !important — a property of the markup, * not a shortcut. * * IMPORTANT — two spellings of every inline style * The raw template writes `grid-template-columns:1fr 1fr` (no space). * React re-serializes through the CSSOM when it renders, producing * `grid-template-columns: 1fr 1fr` (with a space). The live DOM is the * React-rendered form, so selectors written only against the template's * spelling match nothing at all once the app mounts. Rules that need a value * therefore list both spellings. * * Where a property name alone is enough to select on, prefer that — it is * immune to the spacing difference. That is why the grid rule below matches * `[style*="grid-template-columns"]` rather than enumerating track lists. * * Breakpoints * 1024px tablet — relax the widest fixed grids * 860px the real phone break: stack, shrink type, tighten spacing * 560px small phones — tighter still */ /* ------------------------------------------------------------------ */ /* Tablet */ /* ------------------------------------------------------------------ */ @media (max-width: 1024px) { [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; } } /* ------------------------------------------------------------------ */ /* Phone / small tablet */ /* ------------------------------------------------------------------ */ @media (max-width: 860px) { /* --- grids ------------------------------------------------------- */ /* Every multi-column grid becomes a single column. Selecting on the property name alone sidesteps the two-spellings problem entirely, and at this width the auto-fit grids would collapse to one track anyway. minmax(0, 1fr) rather than 1fr: a bare `1fr` track is minmax(auto, 1fr), and that `auto` floor refuses to shrink below the item's min-content width. Wide content (the RMD calculator's results table) then pushed the track past the viewport even though the grid was nominally one column. */ [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } /* Same reasoning one level down: grid and flex children default to min-width:auto, which lets wide content override the parent's width. */ [style*="display: grid"] > *, [style*="display:grid"] > *, [style*="display: flex"] > *, [style*="display:flex"] > * { min-width: 0; } /* --- type scale -------------------------------------------------- */ :root { --fs-display-xxl: 34px; --ls-display-xxl: -0.7px; --fs-display-xl: 30px; --ls-display-xl: -0.6px; --fs-display-lg: 25px; --ls-display-lg: -0.4px; --fs-display-md: 21px; --fs-heading-lg: 19px; --fs-heading-md: 18px; --sp-section: 40px; --sp-section-lg: 52px; } [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 32px !important; letter-spacing: -0.6px !important; } [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 30px !important; letter-spacing: -0.6px !important; } [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 29px !important; letter-spacing: -0.5px !important; } [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 28px !important; letter-spacing: -0.5px !important; } [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 27px !important; letter-spacing: -0.5px !important; } [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 26px !important; letter-spacing: -0.4px !important; } [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 25px !important; letter-spacing: -0.4px !important; } [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 24px !important; letter-spacing: -0.4px !important; } [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 23px !important; letter-spacing: -0.3px !important; } [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 22px !important; } [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 21px !important; } [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 20px !important; } /* --- fluid type -------------------------------------------------- These clamps were tuned for desktop: at 390px the vw term is tiny, so every one of them resolves to its *minimum*, which is still a desktop size — clamp(40px, 5.4vw, 68px) renders at 40px on a phone. Matching on the clamp minimum alone is safe against the two-spellings problem: React inserts spaces after commas, but never after `clamp(`, so the `clamp(40px` prefix is identical in both forms. Where a minimum is also used by a padding clamp (30px, 36px) the vw term disambiguates, and both spellings are listed. */ [style*="clamp(46px"] { font-size: 30px !important; letter-spacing: -0.6px !important; } [style*="clamp(44px"] { font-size: 29px !important; letter-spacing: -0.6px !important; } [style*="clamp(42px"] { font-size: 28px !important; letter-spacing: -0.5px !important; } [style*="clamp(40px"] { font-size: 27px !important; letter-spacing: -0.5px !important; } [style*="clamp(38px"] { font-size: 26px !important; letter-spacing: -0.5px !important; } [style*="clamp(32px"] { font-size: 23px !important; letter-spacing: -0.3px !important; } [style*="clamp(26px"] { font-size: 20px !important; } [style*="clamp(24px"] { font-size: 19px !important; } [style*="clamp(19px"] { font-size: 17px !important; } [style*="clamp(17px"] { font-size: 16px !important; } [style*="clamp(16px"] { font-size: 15px !important; } [style*="clamp(36px,3.8vw"], [style*="clamp(36px, 3.8vw"] { font-size: 24px !important; } [style*="clamp(30px,3.8vw"], [style*="clamp(30px, 3.8vw"] { font-size: 22px !important; } /* --- vertical rhythm --------------------------------------------- */ [style*="padding:96px 24px"], [style*="padding: 96px 24px"] { padding: 44px 18px !important; } [style*="padding:90px 24px"], [style*="padding: 90px 24px"] { padding: 42px 18px !important; } [style*="padding:88px 24px"], [style*="padding: 88px 24px"] { padding: 42px 18px !important; } [style*="padding:80px 24px"], [style*="padding: 80px 24px"] { padding: 40px 18px !important; } [style*="padding:70px 24px"], [style*="padding: 70px 24px"] { padding: 36px 18px !important; } [style*="padding:64px 24px"], [style*="padding: 64px 24px"] { padding: 34px 18px !important; } [style*="padding:26px 24px"], [style*="padding: 26px 24px"] { padding: 20px 18px !important; } [style*="padding:40px 32px"], [style*="padding: 40px 32px"] { padding: 24px 18px !important; } [style*="padding:34px 40px"], [style*="padding: 34px 40px"] { padding: 20px 16px !important; } [style*="padding:56px"], [style*="padding: 56px"] { padding: 30px 20px !important; } [style*="padding:48px"], [style*="padding: 48px"] { padding: 26px 18px !important; } /* Padding clamps — disambiguated from the font clamps by their vw term. */ [style*="clamp(30px,3.6vw"], [style*="clamp(30px, 3.6vw"] { padding: 24px 20px !important; } [style*="clamp(36px,4.4vw"], [style*="clamp(36px, 4.4vw"] { padding: 26px 20px !important; } [style*="clamp(48px,7vw"], [style*="clamp(48px, 7vw"] { padding: 28px 20px !important; } [style*="clamp(64px,9vw"], [style*="clamp(64px, 9vw"] { padding: 32px 20px !important; } /* Hero overlays sit absolutely over a fixed-height image, so their content clips instead of expanding. Trim the padding to buy room for the text. */ [style*="padding:40px 32px"], [style*="padding: 40px 32px"] { padding: 18px 16px !important; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 18px !important; padding-right: 18px !important; } /* --- heroes ------------------------------------------------------ Kept reasonably tall: the overlay text is absolutely positioned over the image, so an over-aggressive height clips the headline and CTA. */ [style*="clamp(600px"] { height: clamp(380px, 56vh, 440px) !important; } [style*="clamp(460px"] { height: clamp(360px, 52vh, 420px) !important; } [style*="clamp(440px"] { height: clamp(360px, 52vh, 420px) !important; } [style*="clamp(430px"] { height: clamp(350px, 50vh, 410px) !important; } [style*="clamp(400px"] { height: clamp(340px, 48vh, 400px) !important; } [style*="clamp(360px"] { height: clamp(320px, 46vh, 380px) !important; } [style*="clamp(340px"] { height: clamp(300px, 44vh, 360px) !important; } /* The landing split is a full-viewport two-panel grid; once stacked, the 100vh floor would make each panel a full screen tall. */ [style*="min-height:calc(100vh - 56px)"], [style*="min-height: calc(-56px + 100vh)"], [style*="min-height: calc(100vh - 56px)"] { min-height: 0 !important; } /* --- decorative hero corner labels -------------------------------- */ /* 35 of these across the site: an uppercase category label bottom-left and a "SCROLL" cue bottom-right, both absolutely positioned inside the hero. Once the hero shrinks for mobile they sit underneath the CTA buttons. They are ornamental, so hide rather than reflow. */ [style*="position:absolute"][style*="bottom:22px"], [style*="position: absolute"][style*="bottom: 22px"] { display: none !important; } /* --- header ------------------------------------------------------ */ /* The desktop tab strip and mega menu are replaced by the hamburger panel (src/mobile-menu.js). Hiding rather than reflowing: the mega menu is a hover-driven multi-column layout with no touch equivalent. */ header nav { display: none !important; } header [style*="position: absolute"][style*="top: 100%"], header [style*="position:absolute"][style*="top:100%"] { display: none !important; } header > div > div:first-child { padding: 10px 14px !important; gap: 10px !important; justify-content: space-between !important; } /* --- deliberate side-by-side flex rows --------------------------- */ /* Only large gaps: those are real two-column layouts. Small gaps are chips, icons, and button groups that should stay inline. */ [style*="gap: 36px"], [style*="gap:36px"], [style*="gap: 40px"], [style*="gap:40px"], [style*="gap: 44px"], [style*="gap:44px"], [style*="gap: 48px"], [style*="gap:48px"], [style*="gap: 56px"], [style*="gap:56px"], [style*="gap: 64px"], [style*="gap:64px"] { flex-direction: column !important; gap: 22px !important; } /* --- tap targets -------------------------------------------------- */ /* The footer link columns render as 20px-tall text links, well under the ~32px minimum for reliable touch (Google flags these under mobile usability). Padding rather than height so the columns keep their rhythm. */ footer a { display: inline-block !important; padding-top: 7px !important; padding-bottom: 7px !important; } header button, header a[role="button"] { min-height: 38px !important; } /* Phone and email links render at ~21px. The support page lists a dozen provider phone numbers — the single most likely thing a participant taps on a phone — so these need a real touch area. */ a[href^="tel:"], a[href^="mailto:"] { display: inline-block !important; padding-top: 6px !important; padding-bottom: 6px !important; /* participants@navigate401k.com is one unbreakable token wider than a phone-width card; without this it renders clipped. */ overflow-wrap: anywhere !important; max-width: 100% !important; } /* --- overflow guards --------------------------------------------- */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } img, svg, video { max-width: 100% !important; } /* Backstop for residual sub-pixel overflow (the header scroller still leaked ~14px at 360px after every element individually fit). `clip`, not `hidden`: overflow:hidden on an ancestor silently disables position:sticky, which would break the sticky header. */ html, body { overflow-x: clip; } } /* ------------------------------------------------------------------ */ /* Small phones */ /* ------------------------------------------------------------------ */ @media (max-width: 560px) { :root { --fs-display-xxl: 29px; --fs-display-xl: 26px; --fs-display-lg: 23px; --sp-section: 32px; --sp-section-lg: 40px; } [style*="max-width:1180px"], [style*="max-width: 1180px"] { padding-left: 14px !important; padding-right: 14px !important; } [style*="padding:56px"], [style*="padding: 56px"] { padding: 24px 16px !important; } }