/* --------------------------------------------------------------------------- The floating "Get in touch" control (.ea-fab). Zeve: "lets build a floating contact button that is in the bottom right hand of the page when you scroll away from the top hero on the homepage. clicking that button opens contact form." It opens the SAME dialog the /home2 hero button opens: see assets/css/contact-modal.css and assets/js/contact-modal.js. There is no second modal and no second Tally iframe. A DELETABLE UNIT. inc/contact-fab.php renders the markup, enqueues this file and assets/js/contact-fab.js, and is pulled in by one require_once at the foot of functions.php. Deleting that one line makes the whole thing vanish from both pages; deleting the four files removes it from the tree. A LABELLED PILL, NOT AN ICON. An unlabelled glyph would need an aria-label to have a name at all, and that name would be the only thing saying what it does: an envelope reads as "email us", a speech bubble as "live chat", neither of which is what this opens. "Get in touch" is the label the hero button already uses and the heading the dialog already carries, so the control, the panel it opens and the page it falls back to all say the same three words. Measured, the pill is 142x45 at 1440 and at 390: on the narrow viewport that is 36% of the screen width, which leaves the page's own content readable beside it, and 45px clears the 44px minimum tap target an icon button would have had to be padded up to anyway. Depends on sitewide.css for the --eabc-* tokens and .eabc-btn. --------------------------------------------------------------------------- */ /* position:fixed, and OUTSIDE #siteWrapper: inc/contact-fab.php prints it on wp_footer, so it is a direct child of and no ancestor's transform, filter or overflow can turn it into an absolutely positioned element or clip it. A fixed box is not part of the document's scrollable overflow either, so it cannot produce the horizontal page scroll the audit fails on, and it takes no space in flow: measured, documentElement.scrollHeight is identical with the control present and with it display:none, on both pages at both widths, so its arrival shifts nothing. z-index 9, deliberately one below the header's 10. The mobile menu panel is position:fixed inset:0 INSIDE #header (see the note in sitewide.css), so an open menu must cover this, and does. */ .ea-fab{position:fixed;z-index:9; right:calc(1.5rem + env(safe-area-inset-right, 0px)); bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px)); margin:0;line-height:0} /* THE RESTING STATE IS HIDDEN, and that is also the no-JavaScript state. assets/js/contact-fab.js is what adds .is-shown, so without it the control never appears. That is the right way round: "appears once the hero is scrolled past" is a decision only script can make, and the alternative default, a pill parked over the hero video permanently, is worse than no pill at all. The link itself is real markup either way, so a crawler still sees a link to /contact/. opacity + pointer-events rather than visibility:hidden or display:none, and the reason is the keyboard. See the :focus-visible rule below. transform:translateY on a fixed element, not top/bottom: it is composited, so the entrance cannot reflow anything, and there is nothing under it to reflow anyway. */ .ea-fab__btn{opacity:0;pointer-events:none;transform:translateY(10px); transition:opacity .18s ease,transform .18s ease,background .2s ease} .ea-fab.is-shown .ea-fab__btn{opacity:1;pointer-events:auto;transform:none} /* --------------------------------------------------------------------------- The plate. PAPER FILL INSIDE A 1px INK BORDER, NOT .eabc-btn's INK FILL, and that is a measurement rather than a preference. This control passes over whatever happens to be at the bottom right of the page as the reader scrolls, which on these two pages includes full-bleed photographs. Sampling the real rendered pixels in a 6px ring around this exact rectangle, at every 25px of scroll across every range where the control is visible, on both pages at 1440x900 and 390x844: worst sample's worst single median ring ring pixel ink #2e2e2f plate 1.55:1 1.00:1 paper #fafafa in ink 9.45:1 3.63:1 sand #dbd7ce in ink (hover) 4.15:1 3.07:1 RE-MEASURED after the visible range widened. This control used to be suppressed over the buildings band, over the Instagram strip on a phone, and from the contact band to the foot of the document; Zeve asked for all three suppressions gone, so it now floats over roughly 2,900px more of each page than the first reading covered. The paper row above is the re-measurement: 1,224 ring samples, 305 and 218 on the two pages at 1440 and 387 and 314 at 390, against the 165 the first reading took. The worst frame did NOT move into the new territory. It is still at the top of the visible range, scrollY 825 on the front page at 390x844, where the control arrives over a photograph; nothing below the buildings band gets anywhere near it. The ink plate is not a near miss. On that same frame the ground behind this rectangle is a photograph dark enough that half its pixels are within 1.55:1 of ink, and an ink plate on it disappears: the control comes down to a floating white label with no visible body, which reads as broken rather than as a button. WCAG 1.4.11 wants 3:1 for the boundary of a control. The paper pair cannot do that, and not by luck. The plate is TWO TONE, so whichever of {paper, ink} contrasts with the frame behind it carries the boundary: paper wins on a dark ground, the ink border wins on a light one, and the two curves cross at L=0.229 where both are 3.61:1. That crossing is the floor for the pair no matter what is behind it. The 3.63:1 in the table above is that floor, found: 1,224 samples of real page pixels could not do better than the arithmetic says and could not do worse either. That is also why widening the visible range could not put this control below 3:1 and why re-measuring it was a confirmation rather than a risk: the floor is a property of the two tones, not of what the page happens to put behind them. THIS IS NOT A NEW BUTTON. It is exactly .ea-hero-cta__btn, the hero "Get in touch" control on /home2, which reached the same construction from the same problem: see the long note in assets/css/home2.css for the frame by frame analysis behind it. The two controls are the same control in two places and they should not look like two different ones. Restated here rather than shared because home2.css is /home2 only and this is on the front page too, and because .ea-hero-cta__btn also carries grid placement that belongs to the hero. Everything else comes from .eabc-btn unchanged: the 6.4px radius, the 1px border, Hanken Grotesk uppercase at .04em tracking. THE LABEL is ink #2e2e2f on paper #fafafa, 13.00:1, on every ground, forever, because it never touches one. NO DROP SHADOW. Nothing in this design system casts one: the only box-shadow in the whole theme is the hero button's focus ring. A floating element is the obvious place to reach for one and it would have been the first. The two tone edge above is what a shadow would have been for. SIZE. .eabc-btn's own 1rem / 1.05rem 2.2rem is a hero sized control; a thing that sits on the screen the whole way down the page is a secondary one, so it is set at the .8rem the site's other persistent small controls use (.ea-modal__close, .ea-open__more, .ea-mw__archive). Trimming an .eabc-btn's padding for a tighter slot is what .ea-hood__cta, .ea-bldg__cta and .ea-nbhd-related__cta already do. white-space:nowrap because a two line pill would be a different shape, and the label is short enough that it never needs to wrap. --------------------------------------------------------------------------- */ .ea-fab__btn{display:block;font-size:.8rem;padding:.95rem 1.5rem; white-space:nowrap; background:var(--eabc-paper,#fafafa); color:var(--eabc-ink,#2e2e2f); border:1px solid var(--eabc-ink,#2e2e2f)} /* HOVER: the plate goes one step darker and the label does not move. That is the site's convention on every button it has, and paper to sand is the step below paper in the token set, so no new colour is introduced. Ink on sand is 9.45:1 for the label; the sand row of the table above is the edge. */ .ea-fab__btn:hover{background:var(--eabc-sand,#dbd7ce); color:var(--eabc-ink,#2e2e2f);text-decoration:none} /* KEYBOARD REACHABILITY, which is the part of a floating control that is usually got wrong. The markup is printed on wp_footer, so it is the LAST focusable thing on the page. That is the honest position for it: it is a shortcut to a destination the header nav, the closing Contact band and the footer all already link, so putting it early would insert a permanent extra stop between the site nav and the page content on every tab pass and buy a keyboard user nothing. Last costs them nothing and skips nobody. The state that position has to survive is the hero. A reader who tabs forward from the address bar without scrolling first walks the whole page and arrives here while the page is still at the top, which is the one place contact-fab.js hides this control. Had it been hidden with visibility or display it would not be focusable at that moment and a keyboard could never reach it AT ALL while a mouse could. Hidden with opacity it stays in the tab order the whole time, and this rule paints it back the instant it takes focus, wherever the page happens to be scrolled to. It is fixed, so taking focus scrolls nothing and the reader is not thrown. This mattered more before than it does now. The control used to be hidden over the buildings band, over the Instagram strip on a phone, and from the contact band to the foot of the document as well, so a keyboard could land on it in four different hidden states; Zeve asked for all three of those suppressions gone and only the hero is left. The rule stays exactly as it was, because one hidden state is still a hidden state and it is the one a forward tab from a fresh load walks straight into. FOCUS SHARES THE HOVER FILL, which is what .ea-hoodfilter__btn and .ea-hero-cta__btn both do: a keyboard gets the same affordance a mouse does, at the same moment. The ring is the hero button's, verbatim: a paper ring inside an ink ring, so whichever tone the ground behind it happens to be, one half of the ring has somewhere to show. This control floats over sand bands, paper bands and photographs in turn, which is exactly the case that pair was built for. */ .ea-fab__btn:focus-visible{opacity:1;pointer-events:auto;transform:none; background:var(--eabc-sand,#dbd7ce); color:var(--eabc-ink,#2e2e2f);border-color:var(--eabc-ink,#2e2e2f); outline:2px solid var(--eabc-paper,#fafafa);outline-offset:2px; box-shadow:0 0 0 4px var(--eabc-ink,#2e2e2f)} /* No entrance for a reader who has asked for less motion: it is simply there or not there. Stated on both the resting and the shown state so the element is never left holding a translate. The .2s background transition .eabc-btn ships is dropped here too, for the same reason the hero button drops it. */ @media (prefers-reduced-motion:reduce){ .ea-fab__btn{transition:none;transform:none} .ea-fab.is-shown .ea-fab__btn{transform:none} } /* Narrow. The pill is 142px against a 390px viewport, so the inset comes down to 1rem: the control sits a little further into the corner and a little further from the page's own content. The safe-area insets are kept at both widths so it never lands under an iPhone's home indicator. */ @media (max-width:600px){ .ea-fab{right:calc(1rem + env(safe-area-inset-right, 0px)); bottom:calc(1rem + env(safe-area-inset-bottom, 0px))} }