/* --------------------------------------------------------------------------- /notable-transactions, the twenty-nine closed deals (.ea-tx). THIS IS NOT A NEW CARD. It is assets/css/buildings-archive.css's .ea-bidx card with its two text roles swapped. Read that file, and assets/css/nbhd-archive.css beside it, and keep all three in step: same 1180px field, same 6vw gutter, same 3.2rem/2rem grid gaps, same 4:3 crop, same 6.4px radius, same stretched link, same three faces, same --eabc-* tokens, same 1024 and 767 breakpoints. TWO THINGS DIVERGE FROM THOSE TWO, both measured, both argued where they are written: the column count at 1024, and what the index becomes at 767. Read those two notes before bringing this "back in line" with its siblings. WHY IT EXISTS. Zeve: "can we do better on the design of this page? doesnt really make a big deal of any of these transactions." The page was still rendering the ported Squarespace `blog-basic-grid` card, and the note at the top of buildings-archive.css already said this listing would need a pass of its own. Measured before this file existed: - the card printed the post TITLE verbatim, pipes included, so the record sale read "150 Charles Street, Residence 9A | West Village | $60,000,000" as ONE centred 13.4px line under a 428px photograph, wrapping between "West Village |" and "$60,000,000". Address, neighborhood and price at one size in one sentence. - centred, and every title a different length, so no two prices on the page shared an edge. Twenty-nine figures whose only job is to be read against each other and not one of them lined up with another. That is the same arithmetic market-watch.css measured on three stacked stat tiles and rebuilt them sideways to fix. - $60,000,000 and $8,000,000 typographically identical. - 10528px tall at 1440 and 13551px at 390 to carry 29 lines of text. THE ONE DECISION. A building's punch is its photograph and its name, so .ea-bidx puts the name in Cormorant at 1.5rem over a muted 1rem supporting line. A transaction's punch is the NUMBER. So the price takes the Cormorant slot and the address takes the supporting line, and nothing else about the card moves. Everything below is either a value .ea-bidx already uses or a value assets/css/sitewide.css already defines for the Market Watch figures (.ea-mw__stat-value's clamp, and its 2.4rem phone step). No new colour, face, button or spacing step is introduced here. FIGURES ARE SET AS FIGURES, WHICH THEY WERE NOT BEFORE. Cormorant Garamond ships OLDSTYLE, PROPORTIONAL numerals by default, which is why "$60,000,000" and "$11,995,000" measured 279.53px and 257.33px at the same size: two prices of the same digit count, 22px apart, in a column that is meant to be compared down its length. `font-variant-numeric: lining-nums tabular-nums` puts both at 291.92px, and the face carries both features, so the column is a ledger rather than a set of unrelated captions. Every figure on this page gets it. Every property that Squarespace's bundle also sets globally (font, margin, colour, text-align, letter-spacing) is stated explicitly. Anything left to inherit is a rule someone else gets to win. --------------------------------------------------------------------------- */ /* Ground. The hero band above resolves to the `bright` theme, so paper here is a step down from it rather than a second colour: the grid reads as its own field and there is no visible seam. Identical padding to .ea-bidx, whose top value is the grid's own row gap. */ .ea-tx{padding:3.2rem 6vw 5.5rem;background:var(--eabc-paper,#fafafa);color:var(--eabc-ink,#2e2e2f)} .ea-tx__inner{max-width:1180px;margin:0 auto} /* --- The two tiers ------------------------------------------------------ */ /* THE LEAD ROW. The collection is hand ordered by menu_order and opens on the $60M record at 150 Charles Street; see the pre_get_posts note in functions.php. Two cards, so the 27 that follow are nine complete rows of three, and so the page opens on the two largest figures it has side by side rather than on a uniform wall in which the record is one tile of twenty-nine. Its bottom margin is the grid's own ROW gap, so the distance from the lead row to the index is the distance one index row keeps from the next, and the two tiers read as one field rather than as two blocks. */ .ea-tx__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem 2rem;margin:0} .ea-tx__grid--lead{grid-template-columns:repeat(2,1fr);margin:0 0 3.2rem} /* position: the card is the containing block for the stretched link below. min-width:0 stops a long unbroken address blowing a grid column past 100%, which is how horizontal overflow gets onto this site. */ .ea-tx__card{position:relative;margin:0;min-width:0} /* A deal with no photograph keeps its place in the index rather than being dropped, and takes the hairline in place of the crop. All twenty-nine carry an image today; this is here so that stops being load-bearing. NOT a list divider, so THE HAIRLINE RULE at the top of sitewide.css does not apply and the first row keeps its rule: this hairline stands in for a missing photograph on one card and belongs to that card the way the crop belongs to the others. Same reasoning, same rule, as .ea-bidx__card--flat. */ .ea-tx__card--flat{padding-top:1.1rem;border-top:1px solid rgba(0,0,0,.16)} /* --- The crop ----------------------------------------------------------- */ /* Fixed ratio so a tall stair hall and a wide living room sit on the same baseline. The fills it and is cropped rather than letterboxed. 4:3 in the index, the same crop /buildings and /neighborhoods use. */ .ea-tx__media{overflow:hidden;border-radius:6.4px;background:rgba(0,0,0,.06);aspect-ratio:4/3} .ea-tx__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%; transition:transform .45s ease} /* The lead crop is wider, not taller. A 574px card at 4:3 is 430px of photograph before a single word, which is the shape the OLD two-up listing had and the reason it ran to 10528px. 3:2 keeps the lead visibly larger than the index without giving one row a third of the screen. */ .ea-tx__grid--lead .ea-tx__media{aspect-ratio:3/2} /* aspect-ratio is not honoured by every engine the ported bundle targets; the padding box keeps the crop from collapsing to zero where it is missing. */ @supports not (aspect-ratio:4/3){ .ea-tx__media{height:0;padding-bottom:75%;position:relative} .ea-tx__grid--lead .ea-tx__media{padding-bottom:66.6667%} .ea-tx__media img{position:absolute;inset:0} } .ea-tx__body{padding:1.1rem .1rem 0;text-align:left} /* --- The kicker --------------------------------------------------------- */ /* The neighborhood, in the position and at the step .ea-bidx__meta already gives it, above the figure rather than below it: a category reads as a kicker, and .ea-bldg carries the neighborhood in exactly this place. IT IS ON EVERY CARD AND IT IS ALWAYS ONE LINE. That is load-bearing, not decoration: this line sets the top edge of the price, so if it wrapped on one card in a row that card's figure would sit 16px below its neighbours' and the whole point of the treatment would be gone. The longest value in the set is "Greenwich Village", 130px at this step against a 372px card, and the three deals with no neighborhood print their own eyebrow ("Closed Off-Market") instead of nothing. archive-transaction.php never emits this element empty. Linked to the neighborhood guide where one exists and plain text where it does not, so the line never changes shape either way. */ .ea-tx__meta{margin:0 0 .5rem; font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em; line-height:1.4;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))} /* --- The figure --------------------------------------------------------- */ /* 2.4rem is the step market-watch.css settled on for a figure that has to sit in a narrow column beside a label, and this card is 372px wide. Against a 1rem address it is a 2.4 ratio, deliberately steeper than the 1.5 the rest of the site uses between a heading and its body copy, because here the two are not heading and prose: they are the achievement and the thing it happened to. lining-nums tabular-nums: see the head of this file. Without it the column is set in oldstyle proportional figures and no two prices are the same width. THE STRING IS PRINTED VERBATIM, including a trailing "+" on an approximate figure and a "/M" on a lease. Nothing here shrinks, superscripts or otherwise re-sets those two marks: they are the difference between an approximation, a monthly rent and a closed sale price, and a reader must not have to work out which they are looking at from a size change. */ .ea-tx__price{margin:0; font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif; font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:-.01em; text-align:left;color:var(--eabc-ink,#2e2e2f); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1} /* The lead figures take the SAME clamp sitewide.css gives .ea-mw__stat-value, which is the site's one display-figure step; there is no new size here, only the existing one used where there is room for it. 4rem at 1440 sets "$60,000,000" 311px wide in a 574px card. */ .ea-tx__grid--lead .ea-tx__price{font-size:clamp(2.6rem,5vw,4rem)} /* --- The address -------------------------------------------------------- */ /* The

, and the card's one link. 1rem in the body face, the same step and the same face .ea-bidx__line and .ea-nbhd__line use for the line under a name, but in INK rather than muted: on those cards it supports a name that is already ink, and here it is the name. The unit stays part of it, unsplit, because "56 Leonard Street, PH53" and "56 Leonard Street, Unit 44W" are three different deals in this listing and the unit is what tells them apart. */ .ea-tx__addr{margin:.55rem 0 0; font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif; font-size:1rem;line-height:1.5;font-weight:400;letter-spacing:0; text-align:left;color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word} .ea-tx__grid--lead .ea-tx__addr{font-size:1.05rem} .ea-tx__link{color:inherit;text-decoration:none} /* Stretched link: one anchor per card, so the whole tile is clickable without nesting a second link inside the image or duplicating the destination for a screen reader. The ported card had two anchors per card to the same page. */ .ea-tx__link::after{content:"";position:absolute;inset:0} .ea-tx__card:hover .ea-tx__media img{transform:scale(1.04)} .ea-tx__card:hover .ea-tx__link{text-decoration:underline;text-underline-offset:3px} .ea-tx__link:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px} /* --- The two tail lines ------------------------------------------------- */ /* THESE TWO ARE THE ONLY CONDITIONAL ELEMENTS IN THE CARD AND THEY ARE LAST, which is the whole reason they are allowed to be conditional. /neighborhoods printed a count line in the MIDDLE of its card on nine of fifteen and left the six without one with their supporting line riding 20px higher than their neighbours'; the fix there was an unconditional fallback string. There is no honest fallback for either of these: five of the twenty-nine deals carry a record line the firm wrote, eleven of the addresses have a building page on this site, and inventing a sentence for the others would be inventing copy about a closed transaction. So they are placed where being absent costs nothing: below every line that has to align, with nothing under them but the card's own bottom edge, in a grid whose row height is set by its tallest card and which draws no rule at the foot. THE RECORD LINE IS SET IN THE LABEL FACE, not as prose, and that is a casing decision rather than a stylistic one. The five are written in three different casings in their own pages ("THE HIGHEST SALE IN DOWNTOWN MANHATTAN HISTORY", "record breaking penthouse sale at the jenga building", "ONE OF THE HIGHEST PRICED DUPLEX RESIDENCES"). Uppercasing in CSS is the one way to make five quotations consistent without editing a word of them. Ink rather than the muted grey the kicker uses, because it is the firm's claim about the deal and not a field label. */ .ea-tx__note{margin:.7rem 0 0; font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em; line-height:1.55;text-align:left;color:var(--eabc-ink,#2e2e2f)} .ea-tx__more{margin:.7rem 0 0; font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif; font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em; line-height:1.4;text-align:left} /* The two links that are NOT the card's own destination: the neighborhood guide in the kicker and the building page at the foot. position and z-index lift them above .ea-tx__link::after, which covers the entire card. Underlined at rest rather than on hover. Inside a tile that is itself one large link, a link that looks like plain text until it is pointed at is a control nobody finds. The rest-state rule is the QUIET one sitewide.css gives .ea-mw__archive, the secondary way out from under the Market Watch button: the same rgba(46,46,47,.28) that steps up to full ink when the link is pointed at. Two lines of underlined small caps per card at full strength read as form fields; at 28 percent they read as what they are, a way through that is not the card's own destination. */ .ea-tx__out{position:relative;z-index:1;color:inherit; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:rgba(46,46,47,.28)} .ea-tx__out:hover{color:var(--eabc-ink,#2e2e2f);text-decoration-color:var(--eabc-ink,#2e2e2f)} .ea-tx__out:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px} /* --- The enquiry card at the foot --------------------------------------- */ /* template-parts/cta.php, the site's one enquiry card, sits below the paper field on the page ground. The distance between the two is this field's own padding-bottom above and nothing else; sitewide.css zeroes .ea-autocta's own 3rem for this page as it does for /buildings and /neighborhoods, and says why. Nothing about it is set here. */ /* --- Narrow ------------------------------------------------------------- */ /* ------------------------------------------------------------------------ THE 1024 STEP IS THE ONE PLACE THIS DIVERGES FROM /buildings AND /neighborhoods, and it is a measured divergence rather than a preference. Both of those go three columns to TWO at 1024. Written that way here, the page measured 11237px at 1024 and 10090px at 768, against 8772px and 7825px for the ported grid this replaces: a redesign whose whole argument is that the old page was too tall would have made the tablet band 28 percent TALLER. The cause is arithmetic, not styling. Two columns of a 4:3 crop in an 869px field is 350px of photograph per deal before a word of text, fourteen times over. It stays at three, and only the FIGURE steps down, to .eabc-heading's 2.1rem. That is the one number that could not simply reflow: a 279px card at 1024 and a 204px card at 768 both hold "$50,000,000+" at 2.1rem with room to spare, and at 2.4rem the widest string would have set 204px in a 204px card and broken the line. Everything else in the card is prose or a label and wraps as it always did. WHY THE OTHER TWO INDEXES ARE STILL RIGHT TO DROP TO TWO. Their card carries a NAME, which can reflow to any width; this one carries a FIGURE, which cannot, and whose whole purpose is to be read down a column against the figures above and below it. Narrowing the column costs those two nothing and costs this one the comparison. --------------------------------------------------------------------- */ @media (max-width:1024px){ .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__price{font-size:2.1rem} } @media (max-width:767px){ .ea-tx{padding:2.8rem 6vw 3.5rem} /* The lead cards stay photographic cards, one up, exactly as /buildings and /neighborhoods do at this width. */ .ea-tx__grid--lead{gap:2.8rem;margin-bottom:2.8rem} /* ------------------------------------------------------------------------ THE INDEX TURNS ON ITS SIDE, the way market-watch.css turns its stat tiles. MEASURED, not preferred. Twenty-seven one-up photographic cards at 390 is the 13551px page this redesign is for: 29 crops at 258px each to carry 29 short blocks of text, which is most of a phone screen spent per deal and nothing at all on screen at once. A reader on a phone cannot compare two prices that are 450px apart. Turned sideways the thumbnail keeps the deal recognisable, the text takes the rest of the row, and every price in the listing starts on ONE left edge 120px in, which with tabular figures makes the column readable as a column. That is the same argument the Market Watch tiles were rebuilt on and it is the same component language: a fixed narrow track, the text ranged against it, a hairline between rows. WHY THIS DIVERGES FROM /buildings AND /neighborhoods AT THIS WIDTH, when everything else here matches them. Those two index buildings and places, where the photograph IS the item and shrinking it to 104px would be throwing away the content. This indexes figures. The photograph is supporting evidence for a number, and the number is what has to be scannable. THE HAIRLINE RULE, from the top of sitewide.css: border-top on every row, removed from the first row, never a border-bottom anywhere. One column, so N is 1 and step 2 degenerates to :first-child. The lead grid above is not a ruled list and takes none of this. --------------------------------------------------------------------- */ .ea-tx__grid{grid-template-columns:1fr;gap:0} /* THE THUMBNAIL TRACK IS FIXED AT 104px AND DOES NOT GROW WITH THE ROW, which was measured both ways. A proportional track (minmax(104px, 26%)) makes the crop 175px at 767 and looks better on a small tablet, and it costs 1073px of page there, because above about 500px wide the row stops being as tall as its text and starts being as tall as its picture. This layout exists to be dense. The stamp stays a stamp and the rows stay text-height. */ .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__card{ display:grid;grid-template-columns:104px minmax(0,1fr); column-gap:1rem;align-items:start; padding:1.4rem 0;border-top:1px solid rgba(0,0,0,.16)} .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__card:first-child{border-top:0} /* A row whose deal has no photograph gives the track back rather than leaving a 104px hole. Its own substitute rule above is dropped here: the row already carries the divider, and two hairlines 1.4rem apart is a box. */ .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__card--flat{ grid-template-columns:1fr;padding-top:1.4rem;border-top-color:rgba(0,0,0,.16)} .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__media{border-radius:4px} /* The body's own top padding belongs to a card that has a crop above it. In a row the crop is beside it and the padding would drop the kicker below the top of the photograph. */ .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__body{padding:0} /* 1.75rem, the step sitewide.css already uses for .ea-mw__title at this width. "$60,000,000" sets 136px against a 223px text column. */ .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__price{font-size:1.75rem} .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__addr{margin-top:.35rem;font-size:.95rem} .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__note, .ea-tx__grid:not(.ea-tx__grid--lead) .ea-tx__more{margin-top:.5rem} .ea-tx__grid--lead .ea-tx__addr{font-size:1rem} } /* --------------------------------------------------------------------------- THE CARD IN A BAND, not in the index (.ea-tx__grid--band). Two surfaces now paint three of these cards at the foot of an article rather than twenty nine of them on a listing: "More notable transactions" on a single transaction, and "Notable transactions in " on a guide. Both want the CARD, and the index's phone layout above turns the card into a ruled row with a 104px thumbnail. THAT LAYOUT IS RIGHT ON THE INDEX AND WRONG IN A BAND, and the reason is in its own note: it exists because twenty seven photographic cards at 390 is a 13551px page and because the whole point of that listing is scanning figures against each other down a column. A band holds at most three cards. There is nothing to scan, nothing to compare down a column and no page height to claw back, so three ruled rows with postage stamps on them would be a listing pretending to be a recommendation. The card stays a card. Written here, in the file that owns the card, rather than twice in the two band stylesheets: it is the same decision in both places and two copies would eventually disagree. Each restatement is the desktop value of the rule directly above it, reached with the same class count plus one and a later source position rather than with !important. HOW MANY COLUMNS. The band sets --ea-tx-cols to the number of cards it actually has, so one deal is one column and two deals are two, and no band ever renders a row with a hole in it where a third card would have been. THE CARD IS THE SAME SIZE AT EVERY COUNT, which is the decision the uneven distribution forces. Nine of the fifteen guides have no transaction at all, five have exactly one, Greenwich Village has two and West Village has ten. Stretching one card across the 1180px field, or promoting it to the index's 574px lead card, would make the guide with ONE deal shout louder than the guide with ten, which is a claim the data does not support. So the width is derived from the count instead: the field is exactly as wide as that many index cards, and centred. max = (1180px + 2rem) / 3 * n - 2rem n = 1, 2, 3 = 372px, 776px, 1180px 1180px is .ea-tx__inner's measure and 2rem is this grid's own column gap, so the arithmetic re-derives itself if either changes rather than pinning three measured pixel values that would drift apart. */ .ea-tx__grid--band{grid-template-columns:repeat(var(--ea-tx-cols,3),1fr); max-width:calc((1180px + 2rem) / 3 * var(--ea-tx-cols,3) - 2rem); margin-left:auto;margin-right:auto;row-gap:2.8rem} @media (max-width:767px){ .ea-tx__grid.ea-tx__grid--band{grid-template-columns:1fr;gap:2.8rem; max-width:none} .ea-tx__grid.ea-tx__grid--band .ea-tx__card{display:block;padding:0;border-top:0} .ea-tx__grid.ea-tx__grid--band .ea-tx__media{border-radius:6.4px} .ea-tx__grid.ea-tx__grid--band .ea-tx__body{padding:1.1rem .1rem 0} .ea-tx__grid.ea-tx__grid--band .ea-tx__price{font-size:2.4rem} .ea-tx__grid.ea-tx__grid--band .ea-tx__addr{margin-top:.55rem;font-size:1rem} }