/* --------------------------------------------------------------------------- The contact modal (.ea-modal), and the two controls that open it. WHY THIS IS ITS OWN FILE. It started life inside home2.css, because the only thing that opened it was the /home2 hero button. It is now opened from the floating "Get in touch" control as well, which is on the real front page and on /home2, so the dialog stopped being one page's component and its stylesheet had to stop being one page's file. Nothing in the block below changed when it moved; only its home did. Loaded on is_front_page() || is_page('home2'), paired with assets/js/contact-modal.js, which builds the dialog on first click. There is no markup for it in either page. Type and colour are the site's: .eabc-card's eyebrow, heading and body treatment, on --eabc-paper, at the 6.4px radius everything else here uses. Depends on sitewide.css for the --eabc-* tokens. --------------------------------------------------------------------------- */ /* The dialog element is the box; the panel inside it paints. Sized in one place so a phone and a desktop reach it by the same rule, and capped in height so a tall form scrolls inside .ea-modal__body rather than pushing the panel off the screen. */ .ea-modal{padding:0;border:0;background:transparent;color:var(--eabc-ink,#2e2e2f); width:min(560px,calc(100vw - 2rem));max-width:none;overflow:visible} .ea-modal::backdrop{background:rgba(20,20,21,.62)} .ea-modal__panel{box-sizing:border-box;display:flex;flex-direction:column; height:min(680px,calc(100vh - 2rem)); padding:1.9rem 1.75rem 1.75rem; background:var(--eabc-paper,#fafafa);border-radius:6.4px; text-align:left} /* dvh where it exists: on a phone, 100vh is the tallest the viewport ever gets and the panel would sit under the browser's own toolbar. */ @supports (height:100dvh){ .ea-modal__panel{height:min(680px,calc(100dvh - 2rem))} } .ea-modal__panel:focus{outline:none} .ea-modal__head{display:flex;align-items:flex-start;justify-content:space-between; gap:1rem;flex:0 0 auto} .ea-modal__heading{min-width:0} /* Hidden everywhere by default; shown only on .ea-modal--full below. The five pages that open the centred dialog sit directly under this site's own header and were never asked for a second logo. */ .ea-modal__logo{display:none} .ea-modal__eyebrow{margin:0 0 .5rem;text-align:left; font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.75rem;font-weight:400;line-height:1.5;text-transform:uppercase; letter-spacing:.16em;color:var(--eabc-muted,rgba(0,0,0,.58))} .ea-modal__title{margin:0;text-align:left; font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif; font-weight:500;font-size:1.9rem;line-height:1.12;letter-spacing:-.005em; color:var(--eabc-ink,#2e2e2f)} /* A word, not a glyph. It is announced by name, understood without sight of an icon and reachable by Tab. Set as .ea-open__more is, which is this site's secondary control: a black pill here would compete with the form's own Send button below it. */ .ea-modal__close{flex:0 0 auto;margin:.15rem 0 0;padding:0; background:none;border:0;border-bottom:1px solid rgba(46,46,47,.28); font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.8rem;font-weight:400;line-height:1.5;letter-spacing:.02em; color:var(--eabc-ink,#2e2e2f);cursor:pointer} .ea-modal__close:hover{border-bottom-color:var(--eabc-ink,#2e2e2f)} .ea-modal__close:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f); outline-offset:3px} .ea-modal__intro{flex:0 0 auto;margin:1rem 0 0;text-align:left; font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif; font-size:1rem;line-height:1.55;color:var(--eabc-muted,rgba(0,0,0,.58))} /* min-height:0 so the body can be shorter than its content and scroll, which a flex item will not do by default. The form used to scroll inside its own iframe at a fixed box height; it is native markup in the body now, so the body itself is what scrolls when the form is taller than the panel. */ .ea-modal__body{flex:1 1 auto;min-height:0;margin-top:1.1rem;overflow-y:auto} .ea-modal__form{display:block;width:100%} /* The cloned form already carries eabc-form's own width/margin rules; nothing here needs to size it beyond the block above. .ea-ncf-wrap[hidden] (the success panel swap) works exactly as it does on every other surface, since this is the same markup and the same script. */ /* Gated on no-preference rather than switched off under reduce: a reader who has asked for less motion gets a dialog that simply appears. */ @media (prefers-reduced-motion:no-preference){ .ea-modal[open]{animation:ea-modal-rise .18s ease-out} .ea-modal[open]::backdrop{animation:ea-modal-fade .18s ease-out} } @keyframes ea-modal-rise{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}} @keyframes ea-modal-fade{from{opacity:0}to{opacity:1}} @media (max-width:600px){ .ea-modal{width:calc(100vw - 1.5rem)} .ea-modal__panel{padding:1.5rem 1.25rem 1.25rem; height:min(680px,calc(100vh - 1.5rem))} .ea-modal__title{font-size:1.65rem} .ea-modal__intro{font-size:.95rem} } @supports (height:100dvh){ @media (max-width:600px){ .ea-modal__panel{height:min(680px,calc(100dvh - 1.5rem))} } } /* =========================================================================== THE FULL-SCREEN VARIANT (.ea-modal--full) =========================================================================== Zeve, on /exclusive-listings: "that form should only appear on request access button. and should take up whole screen when button is pressed. like a full screen modal that makes clear ur starting the signup process. make it feel special." A VARIANT AND NOT A SECOND DIALOG. Everything below is scoped to a class that assets/js/contact-modal.js only ever puts on the dialog when the trigger that opened it carries data-ea-modal-variant="full". No rule above this line was changed, so /, /home2, /buildings, /neighborhoods, /calculators and every transaction page render the same centred 560px panel they always did: their triggers do not carry the attribute, the class is never added, and none of these selectors match. The alternative was a second implementation, which would have meant a second copy of the focus, Escape, backdrop and page-lock handling, and the two would have drifted the first time either was touched. WHAT MAKES IT FEEL LIKE ARRIVING SOMEWHERE, and none of it is a new idea: THE FIELD IS SPLIT IN TWO. Ink on the left, sand on the right, edge to edge, no card and no radius. That is the page's own two-ground composition (the ink plate over the sand FAQ) turned on its side, and it is the reason this reads as a place rather than as a box over a page. THE FORM SITS ON SAND, which is not decoration. It is .eabc-form, the same markup as every other form on the site, and .eabc-form's own field labels are dark: unreadable straight onto ink. Sand is the ground the form already had on this page and on every .eabc-card on the site. SCALE. The heading is the same Cormorant step the page's own h1 takes, so the modal opens at the size the page opened at. SPACE. About half the screen carries four short lines. That restraint is the whole effect; a full-screen panel with more in it than a 560px one is just a bigger box. No new typeface, no new radius, no accent colour, no new token. ONE HONEST DEVIATION, recorded here rather than hidden. A panel that fills the viewport leaves no backdrop to click, so backdrop-click-to-close has no target on this variant. The handler above is untouched and still governs the other five pages. Escape closes, and the Close control is a word, at the top right, in the tab order, at every width. Insetting the panel to keep a clickable margin was the alternative and it is not what "whole screen" means. --------------------------------------------------------------------------- */ /* Dialog-level properties are set on BOTH classes so they beat the .ea-modal rules inside the max-width:600px block above on specificity rather than on source order. */ .ea-modal.ea-modal--full{width:100vw;max-width:100vw;height:100vh;max-height:100vh; margin:0;top:0;left:0;overflow:hidden} @supports (height:100dvh){ .ea-modal.ea-modal--full{height:100dvh;max-height:100dvh} } /* Solid, not the base's .62 wash: nothing of the page behind should show through a screen that is meant to be the only thing there. */ .ea-modal--full::backdrop{background:#141415} /* THE SPLIT. Five rows, of which the first and the last are empty and equal, so the three text blocks sit as one object in the middle of the ink column and the form sits in the middle of the sand one. Anchoring them to the ceiling instead left a 500px void under the fineprint that read as a layout that had run out rather than as space. grid-area names rather than nth-child: the panel's children are built in assets/js/contact-modal.js and one more of them would silently reshuffle a positional layout. */ .ea-modal--full .ea-modal__panel{position:relative;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr auto auto auto 1fr; grid-template-areas: ". form" "head form" "intro form" "note form" ". form"; width:100%;height:100%;padding:0;border-radius:0; background:var(--eabc-ink,#2e2e2f);color:var(--eabc-paper,#fafafa)} /* The ink column. 6vw is the page's own gutter, so the heading in here lands on the same left margin as the h1 on the page behind it. */ .ea-modal--full .ea-modal__head{grid-area:head;display:block; padding:0 3.5rem 0 6vw} .ea-modal--full .ea-modal__heading{max-width:none} /* Left-aligned above the eyebrow, in normal block flow: it is the first child of .ea-modal__heading (see build() in contact-modal.js), which is what puts it above the text rather than beside it. Width rather than height, since the source file (500x385) is a square-ish icon-over-wordmark lockup, not a wide banner. */ .ea-modal--full .ea-modal__logo{display:block;margin:0 0 1.6rem;width:64px;height:auto} .ea-modal--full .ea-modal__eyebrow{color:rgba(250,250,250,.82);letter-spacing:.18em} /* The page's own h1 step, not the 1.9rem the centred panel uses. */ .ea-modal--full .ea-modal__title{color:var(--eabc-paper,#fafafa);font-weight:400; font-size:clamp(2.4rem,3.4vw,3.4rem);line-height:1.06;letter-spacing:-.012em} .ea-modal--full .ea-modal__intro{grid-area:intro;align-self:start; margin:1.4rem 3.5rem 0 6vw;max-width:34ch; font-size:1.15rem;line-height:1.6;color:rgba(250,250,250,.92)} /* THE HAIRLINE RULE on the inverse ground, exactly as the page's stat band sets it: border-top on the thing below, 1px, paper at low alpha. */ .ea-modal--full .ea-modal__note{grid-area:note;align-self:start; margin:2rem 3.5rem 0 6vw;padding:1.2rem 0 0;max-width:34ch; border-top:1px solid rgba(250,250,250,.26); font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.8rem;font-weight:400;line-height:1.5;letter-spacing:.02em; text-align:left;color:rgba(250,250,250,.66)} /* The sand column. Padded clear of the Close control at the top right, and the frame capped so the form does not stretch to 800px on a wide screen. CENTRED IN BOTH DIRECTIONS. The form is native markup now, not an iframe with no way to report its own height, so it takes its natural height and the column centres it; .ea-modal__body keeps the overflow-y:auto the base rule already gives it, so a viewport too short for the whole form scrolls the sand column instead of pushing the panel off the screen. */ .ea-modal--full .ea-modal__body{grid-area:form;min-height:0;margin:0; display:flex;flex-direction:column;justify-content:center; padding:5.4rem 4vw 3rem;background:var(--eabc-sand,#dbd7ce)} .ea-modal--full .ea-modal__form{flex:0 0 auto;width:100%;max-width:640px;margin:0 auto} /* THE CLOSE CONTROL. Out of the head's flow and pinned to the top right of the screen, which at this size is where a reader looks for it. Still the same