/* ============================================================================ Outreach Pro — design layer over the Next.js build output. This build renders from a JS bundle, so editing markup alone does not stick. Styling lives here (loaded from , so React never touches it) and any new DOM is added by outreach-enhance.js. Inline styles from the bundle are beaten with specificity + !important where required. ========================================================================== */ :root { --op-violet: #6039db; --op-ink: #0d0d0d; } /* --------------------------------------------------------------------------- 1. "let's talk" form Problems fixed: the right column was capped at 400px so labels like "drag to set / 3 months" were clipped at the edge, and the submit button (absolute, bottom-right) sat on top of the final field. ------------------------------------------------------------------------ */ .letstalk-content-scroll { width: clamp(280px, 38%, 520px) !important; padding-right: 18px !important; padding-bottom: 84px !important; /* clear the absolute submit button */ scrollbar-gutter: stable both-edges; overscroll-behavior: contain; } /* placeholders were weight 200 at 60% white on black — thin and hard to read */ .letstalk-content-scroll input::placeholder, .letstalk-content-scroll textarea::placeholder, input.placeholder-white\/60::placeholder, textarea.placeholder-white\/60::placeholder, input.placeholder-white\/80::placeholder, textarea.placeholder-white\/80::placeholder { color: rgba(255, 255, 255, 0.62) !important; font-weight: 400 !important; opacity: 1 !important; } .letstalk-content-scroll input, .letstalk-content-scroll textarea { font-weight: 400 !important; letter-spacing: -0.015em !important; } /* the typed answer should read clearly stronger than the prompt */ .letstalk-content-scroll input:not([type="range"]), .letstalk-content-scroll textarea { color: #fff !important; caret-color: var(--op-violet); } /* give each numbered step room and a visible divider */ .letstalk-content-scroll > * { min-width: 0; } /* keep long slider labels on the line instead of pushing past the edge */ .letstalk-content-scroll [class*="justify-between"] { gap: 12px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- 2. Footer contact block The phone numbers sat in dead space with no label and no rhythm. outreach-enhance.js rebuilds the block; this styles it. ------------------------------------------------------------------------ */ /* the block was pinned to 190px inside a 1245px row, which is what left the numbers stranded in dead space. let it fill the row and lay the groups out as real columns. */ [data-op="footer-contact"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px 56px; align-items: start; flex: 1 1 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } [data-op="footer-group"] { display: flex; flex-direction: column; gap: 10px; min-width: 0; } [data-op="footer-contact"][data-op-theme="dark"] { color: #ffffff !important; } [data-op="footer-contact"][data-op-theme="dark"] [data-op="footer-label"] { opacity: 0.72; } [data-op="footer-contact"][data-op-theme="dark"] a, [data-op="footer-contact"][data-op-theme="dark"] span { color: #ffffff !important; } [data-op="footer-label"] { font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; margin-bottom: 2px; } [data-op="footer-group"] a, [data-op="footer-group"] span { font-family: var(--font-sans), sans-serif; font-weight: 500; font-size: 14px; line-height: 1.65; text-decoration: none; color: inherit; width: fit-content; transition: opacity 0.2s ease; } [data-op="footer-group"] a { position: relative; } [data-op="footer-group"] a::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 1px; background: currentColor; opacity: 0.28; transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } [data-op="footer-group"] a:hover::after { transform: scaleX(1); } [data-op="footer-group"] a:hover { opacity: 0.78; } /* --------------------------------------------------------------------------- 3. "meet the board" Was: light geometric names + italic serif roles, no hierarchy, ragged rows. Now: an even grid, tighter display names, and a small uppercase role that reads as a credential rather than an afterthought. ------------------------------------------------------------------------ */ [data-op="team-grid"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 56px 34px; align-items: start; } [data-op="team-name"] { font-family: var(--font-display), sans-serif !important; font-weight: 500 !important; letter-spacing: -0.035em !important; line-height: 1.02 !important; text-wrap: balance; } [data-op="team-role"] { font-family: var(--font-sans), sans-serif !important; font-style: normal !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; line-height: 1.45 !important; opacity: 0.92; padding-top: 2px; } /* a hairline between name and role gives the block a considered edge */ [data-op="team-role"]::before { content: ""; display: block; width: 22px; height: 2px; background: var(--op-violet); margin: 0 0 10px; border-radius: 2px; } [data-op="team-card"] img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; } [data-op="team-card"]:hover img { transform: scale(1.035); filter: grayscale(0) contrast(1.05); } /* --------------------------------------------------------------------------- 4. "our products" menu entries injected by outreach-enhance.js ------------------------------------------------------------------------ */ [data-op="products-label"] { font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.45; padding-top: 18px; } [data-op="product-link"] .op-desc { display: block; font-family: var(--font-sans), sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: 0.5; margin-top: 3px; } /* --------------------------------------------------------------------------- 5. Footer top row vs. the fixed nav pill The nav is `fixed top-5` and 70px tall, so it owns viewport y 20–90 and x 383–883. The footer's top row had `pt-32` (128px), but at max scroll the footer's own top sits ~41px above the viewport, leaving only 87px of real clearance — 3px short. The "telephone" label and its first number landed underneath the pill, which swallowed the clicks. Padding is measured from the footer's top, so it must cover the nav's bottom edge *plus* that offset. 200px leaves ~159px of clearance. No media query on purpose: the row's parent is `hidden md:contents`, so it is already display:none below md, and an unwrapped rule can't be defeated by a viewport that reports 0 width. ------------------------------------------------------------------------ */ footer .hidden.md\:contents > div:first-child { padding-top: 200px !important; } @media (max-width: 767px) { [data-op="footer-contact"] { gap: 30px 40px; } [data-op="team-grid"] { gap: 40px 22px; } }