/* Site overrides that must survive re-copying a page from its Design file. * * Anything in a page's own style block is overwritten the next time * that page is re-copied from Claude Design. Rules that we own — rather than * the designer — belong here, and the we inject on every re-copy links * this file, so they persist. * * Keep these narrow and additive: they should never fight the design at * desktop widths. */ /* --------------------------------------------------------------------------- * Re-copying index.html from its Design file resets the markup. Three edits * have to be re-applied by hand each time (the is regenerated anyway): * 1. "For individuals" and the footer Pricing link -> real site paths * 2. data-demo-cta="1" on the "Talk directly with Catalex" anchor * 3. the nav logo's href="#" -> href="/" so it does not append a bare hash * ------------------------------------------------------------------------- */ /* Mobile nav: hamburger first, then the logo. * The design orders the bar [logo] … [burger][theme]; we want * [burger][logo] … [theme]. Done with flex `order` so the markup is untouched. * Matches the 860px breakpoint the design already uses. */ @media (max-width: 860px) { [data-cx-nav] { justify-content: flex-start; } [data-cx-nav] > button[data-cx-burger] { order: 1; margin-left: 0 !important; margin-right: 2px; } [data-cx-nav] > a { order: 2; } /* the theme toggle is the nav's other button */ [data-cx-nav] > button:not([data-cx-burger]) { order: 3; margin-left: auto; } } /* Footer grid: the design uses * grid-template-columns: minmax(220px,1.4fr) repeat(3,minmax(140px,1fr)) * with a 36px gap. Those minimums sum to 748px and never collapse, so below * roughly 850px the footer is wider than the screen and the whole document * scrolls sideways. Inline styles need !important to override. * Desktop is untouched — these only apply below the design's own breakpoint. */ @media (max-width: 860px) { #dc-root footer > div:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } } @media (max-width: 520px) { #dc-root footer > div:first-of-type { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; } } /* for-individuals.html, below 860px. * Two causes, neither of which the design's own @media(max-width:880px) covers: * - the hero status line is white-space:nowrap inside a flex row, so it cannot * shrink and pushes the page wider than the viewport * - #flow becomes a single column, but its children keep a min-content width * larger than the track; min-width:0 lets them shrink (grid/flex items * default to min-width:auto) */ @media (max-width: 860px) { #dc-root header span[style*="nowrap"] { white-space: normal !important; } #dc-root #flow > div > div, #dc-root #flow > div > div > div { min-width: 0 !important; } } /* enterprise.html: .hero-orbit is an absolutely-positioned decoration whose * orbiting tool icons sit on the circumference and stick out past the right * edge, widening the document below ~1100px. Clip it at the section instead. * overflow-x:clip rather than hidden — hidden would force overflow-y to auto * and could add a scrollbar inside a 100svh hero. Pre-existing on main. */ .hero { overflow-x: clip; } /* for-individuals.html, continued. * - the pricing/bento card uses repeat(auto-fit,minmax(340px,1fr)) inside a * 44px-padded card, so its track alone is wider than a 390px viewport * - the "builds your team" rows end in a flex-shrink:0 badge that cannot * give way; let the row wrap instead */ @media (max-width: 860px) { #dc-root section > div[style*="auto-fit"] { grid-template-columns: 1fr !important; padding: 28px 20px !important; gap: 28px !important; } #dc-root #flow div[style*="border-radius: 15px"] { flex-wrap: wrap !important; gap: 10px !important; } } /* Nav order: "For individuals" second, after "How it works". The design lists * it last, behind Docs and Blog. Applied to both the desktop link row and the * mobile drawer so the two agree, and matching the shared nav enterprise.html * already uses. * * Keyed on href rather than :nth-child so it still holds if the design reorders * or adds links, and done with flex `order` — both containers are flex — so the * markup is untouched. */ [data-cx-navlinks] > a[href="#coworkers"], [data-cx-navlinks] > a[href="#flow"], [data-cx-nav] > div[style*="top: 100%"] > a[href="#coworkers"], [data-cx-nav] > div[style*="top: 100%"] > a[href="#flow"] { order: 1; } [data-cx-navlinks] > a[href="for-individuals.html"], [data-cx-navlinks] > a[href="/"], [data-cx-nav] > div[style*="top: 100%"] > a[href="for-individuals.html"], [data-cx-nav] > div[style*="top: 100%"] > a[href="/"] { order: 2; } [data-cx-navlinks] > a[href^="https://docs"], [data-cx-nav] > div[style*="top: 100%"] > a[href^="https://docs"] { order: 3; } [data-cx-navlinks] > a[href^="https://blog"], [data-cx-nav] > div[style*="top: 100%"] > a[href^="https://blog"] { order: 4; } /* The homepage's nav markup is now shared with for-individuals.html, but its * mobile rules live in the homepage's own block. Restate them here so * the copied nav collapses to a hamburger on that page too. Duplicated on the * homepage, which is harmless. */ @media (max-width: 860px) { [data-cx-nav] { gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; } [data-cx-nav] img { width: 36px !important; height: 36px !important; } [data-cx-navlinks] { display: none !important; } [data-cx-burger] { display: flex !important; } }