/* =====================================================================
Eagles Automations — responsive fix patch
Companion to DEFECTS.md in this folder. AUDIT-ONLY: not deployed.
HOW TO APPLY (at deploy time, not before):
Link this file AFTER styles.css in index.html, e.g.
(or append its contents to the end of styles.css — every rule here is
written to win by source order / specificity / the two noted !important
overrides of inline styles).
GROUND RULES honored by every rule below:
- No color, font-family, or design changes. Sizing / flow / breakpoints
only. Desktop rendering is unchanged: all rules sit inside max-width
or coarse-pointer media queries, except §4 and §7, which are
size-neutral on desktop (see their notes).
- The /book consent form and /sms-terms copy are byte-locked for a
Twilio review — nothing here touches form markup or copy.
===================================================================== */
/* ---------------------------------------------------------------------
§1 — D1 (CRITICAL): hub node chips never scale (styles.css:593-612,
funnel.js:43/117/168). The JS scales chip POSITIONS by
containerWidth/600 but leaves each chip at full real-pixel size, so on
phones the chips clip off the hub's edges and pile onto the core.
The CSS `scale` property composes with the JS-set `transform`
(translate/rotate are separate properties), shrinking each chip
around its own anchor point — the same geometry the SVG gets from its
viewBox. Factors track the coordinate scale at each width; the
font-size trim shortens the longest labels ("Secure remote access").
--------------------------------------------------------------------- */
@media (max-width: 600px) {
.hub .node {
font-size: .62rem;
scale: .8;
}
}
@media (max-width: 420px) {
.hub .node {
scale: .7;
}
}
@media (max-width: 360px) {
.hub .node {
scale: .62;
}
}
/* ---------------------------------------------------------------------
§1b — D1 residual (round 2, Oct 20, 2026): in the "By design" state
the two inner chips (Payments, Customer portal) still landed on the
core and covered its text at phone widths, while desktop was clean.
Cause: the CSS `scale` property also scales the JS-set translate, so
each chip is dragged from its ring anchor toward its own layout-box
center by (1 - scale) x (anchor - half chip size). Desktop (scale 1)
has no drag — hence the phone-only overlap. The drag is largest for
the anchors farthest right / lowest, i.e. exactly these two chips.
Fix: hand each of the two a compensating `translate` (a separate
property that composes additively with the JS transform, so the
wires stay attached) equal to its drag at that breakpoint tier,
returning it to its ring anchor — the desktop-proven position.
Hero hub only (#heroHub); DOM order is OPS order from funnel.js
createHub: div nth-of-type 4 = Payments, 5 = Customer portal (the
core div is nth-of-type 1). Values verified by measurement at
320/360/375/390/420/430/500/600px: zero chip-on-core overlap and
every chip inside the hub in the settled By-design state.
--------------------------------------------------------------------- */
@media (max-width: 600px) {
#heroHub .node:nth-of-type(4) {
translate: 54.6px 42.4px;
}
#heroHub .node:nth-of-type(5) {
translate: 26.7px 54.2px;
}
}
@media (max-width: 420px) {
#heroHub .node:nth-of-type(4) {
translate: 72.7px 57.1px;
}
#heroHub .node:nth-of-type(5) {
translate: 34.4px 73px;
}
}
@media (max-width: 360px) {
#heroHub .node:nth-of-type(4) {
translate: 82.6px 65.8px;
}
#heroHub .node:nth-of-type(5) {
translate: 37.8px 84.2px;
}
}
/* ---------------------------------------------------------------------
§2 — D2 (HIGH): /partners comparison grid never stacks
(styles.css:2183; the ≤760px partner block at styles.css:2237-2261
changes only its padding). Stack it like every other partner grid,
and move the divider from the left edge to the top edge so the
stacked Eagles column keeps its separation.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.partner-comparison {
grid-template-columns: 1fr;
}
.partner-comparison-eagles {
border-left: 0;
border-top: 1px solid var(--line);
}
}
/* ---------------------------------------------------------------------
§3 — D3/D4 (HIGH/MEDIUM): compare-slider scraps carry inline styles
(index.html:137 `max-width:14%`, index.html:139 `width:40%`) that
defeat the mobile values styles.css already intends at ≤700px
(styles.css:1086-1091: sheet 60%, sticky 44%). Inline styles can only
be beaten with !important, which is used here for exactly those two
declarations — the values restored are the stylesheet's own.
Cleaner long-term fix: remove max-width/width from those two inline
styles in index.html and this section becomes unnecessary.
--------------------------------------------------------------------- */
@media (max-width: 700px) {
.scrap.sticky {
max-width: 44% !important;
}
.scrap.sheet {
width: 60% !important;
}
}
/* ---------------------------------------------------------------------
§4 — D6 (MEDIUM): booking confirmation overlay cannot scroll and its
card has no width (styles.css:2562-2579). On short viewports
(landscape phones) a tall card was centered with its actions cut off
and unreachable. Desktop: no visual change — the overlay only scrolls
when the card exceeds the viewport, and width:100% is capped by the
existing max-width:560px.
--------------------------------------------------------------------- */
.booking-confirmation {
overflow-y: auto;
}
.booking-confirmation-card {
width: 100%;
}
/* ---------------------------------------------------------------------
§5 — D7 (MEDIUM): hero H1 rotating phrase is nowrap at a 2.6rem
floor (styles.css:416-418, 426-428; phrases in funnel.js:264-270).
The longest phrase ("a full voicemail.", 18 chars ≈ 290–315px at
41.6px) overflows 320–340px viewports. Below 420px, scale the H1
with the viewport instead of the fixed floor — still one line,
still nowrap; ≥421px rendering is byte-identical to today.
--------------------------------------------------------------------- */
@media (max-width: 420px) {
.hero h1 {
font-size: clamp(2.2rem, 11.5vw, 2.6rem);
}
}
/* ---------------------------------------------------------------------
§6 — D8 (LOW): touch targets under 44px. The hub Today/By-design
toggle (.seg2 button, styles.css:685-699, ≈37px) and the booking
calendar's date cells (.dates button, styles.css:2487-2490, ≈40px —
its padding overrides the shared 44px min-height), plus .textlink
(styles.css:215-225, ≈39px). Coarse pointers only; mouse rendering
untouched.
--------------------------------------------------------------------- */
@media (pointer: coarse) {
.seg2 button {
min-height: 44px;
}
.dates button {
min-height: 44px;
}
.textlink {
padding-top: 12px;
padding-bottom: 12px;
}
}
/* ---------------------------------------------------------------------
§7 — D9 (LOW): funnel pages sized with 100vh (styles.css:1586) sit a
few dozen px too tall under iOS Safari's collapsing toolbar. Same
calc in svh units; browsers without svh support drop this
declaration and keep the original vh rule — a strict fallback, never
a regression. Desktop: svh == vh when no dynamic chrome exists.
--------------------------------------------------------------------- */
.fpage {
min-height: calc(100svh - 70px - 84px);
}
/* ---------------------------------------------------------------------
§8 — D11 (LOW): operations-page H1s wrap anywhere at a 3rem floor
(styles.css:2326-2330, 2744-2746), which can split a long word
mid-letter on legal/admin headings at phone widths. Shrink the
floor on small screens and prefer word-boundary breaks; `break-word`
still prevents any actual overflow.
--------------------------------------------------------------------- */
@media (max-width: 600px) {
.operations-page h1 {
font-size: clamp(2.4rem, 11vw, 3rem);
overflow-wrap: break-word;
}
}
/* =====================================================================
VERIFICATION NOTE — how to confirm each fix after deploy
(Chrome DevTools device toolbar or real devices; widths 360 / 390 /
430px, plus one 320px pass and one landscape pass)
Global, every route (/, /finder, /book, /partners, /apply, /support,
/privacy, /terms, /sms-terms): at each width,
document.scrollingElement.scrollWidth must be ≤ window.innerWidth
(no sideways scroll), and no text may be sliced at the screen edge.
§1/D1 Home hero, 360px: in BOTH hub states (Today / By design) every
chip label is fully on-screen — check the flank chips
("Automations", "Dashboard", "Secure remote access" set on the
results page) and that no label touches the gold core circle.
Repeat at 390 and 430px.
§2/D2 /partners, 390px: the "typical agency vs Eagles" comparison is
one stacked column with a horizontal divider above the Eagles
list; at 1024px it is still the original two columns.
§3/D3 Home compare slider, 360px: the yellow sticky-note scrap is
~44% of the pane wide with its text on ~3 lines, not a 46px
ribbon; the spreadsheet scrap spans ~60% with readable
Name/Paid?/Date columns.
§4/D6 /book: complete a booking in landscape (e.g. 844×390): the
confirmation card scrolls if taller than the screen and its
action buttons are reachable.
§5/D7 Home, 320px and 360px: let the hero headline rotate (~13s) —
"a full voicemail." fits on one line, end period visible.
§6/D8 DevTools touch emulation: hub toggle buttons and calendar
date cells measure ≥44px tall (Elements → Layout box).
§7/D9 iOS Safari (real device): /finder no longer opens with the
extra ~30-50px of dead scroll under the toolbar.
§8/D11 /sms-terms at 360px: "Optional Texts. / Explicit Consent."
heading breaks between words, never inside one.
Desktop regression check (1440px): home, /partners, /book must be
pixel-equivalent to pre-patch except the §4 overlay (only when the
card exceeds the viewport) — every other rule is inside a max-width
or coarse-pointer query.
===================================================================== */
/* deployed via production */