/* * Emerald Bay front end, the part that only exists inside WordPress. * * The listing page is NOT styled here. It is styled by assets/listing/eb-listing.css, * which is a byte for byte copy of listing/eb-listing.css in the working tree, so the * page WordPress serves and the page the harness serves are the same page. This file * carries the two things the harness has no equivalent of: the map embed wrapper, and * the homesite index at /homesites/. * * The index inherits its type, its colour and its chrome from .eb-lp, which is the * listing stylesheet's own scope, so the two pages are one design and not two. * * What is deliberately absent, because it is what makes a page look generated: * no letterspaced capital micro-labels over anything * no heading with one word in the accent colour * no centred rule under the subtitle * no row of big numbers beside small capital words * no card inside a panel inside a section * The index is a schedule. Rows, hairlines, a figure on the right. It is the shape a * printed price list on a land brochure has, which is the thing it is. */ /* ---- spacing scale -------------------------------------------------------------------------- Every margin-bottom set through the builder's own head_css was being dropped, and every column width with it, so the page had 0px between every element and four 50/50 rows whatever the percentages said. Two Thrive rules were responsible: .thrv_wrapper.thrv_text_element, .thrv_wrapper.thrv_heading ( margin-bottom: 0 ) specificity 0,2,0 against the [data-css] attribute selector head_css writes, which is 0,1,0 .tcb--cols--2:not(.tcb-resized) > .tcb-flex-col ( max-width: 50% ) specificity 0,3,0, and it stands until a human drags a resize handle and the row picks up .tcb-resized. Adding that class is what the builder itself does, so the rows carry it now and the per column widths finally apply. A utility scale is the right shape for the first problem: it beats the blanket rule once, readably, instead of losing the same fight on forty elements. */ .thrv_wrapper.eb-sp-0 { margin-bottom: 0 !important; } .thrv_wrapper.eb-sp-xs { margin-bottom: 10px !important; } .thrv_wrapper.eb-sp-sm { margin-bottom: 18px !important; } .thrv_wrapper.eb-sp-md { margin-bottom: 28px !important; } .thrv_wrapper.eb-sp-lg { margin-bottom: 40px !important; } .thrv_wrapper.eb-sp-xl { margin-bottom: 56px !important; } /* the gutter between two columns. Thrive lays them out with flex and no gap at all. */ .tcb-flex-row.eb-gutter { column-gap: 56px; } /* A block heading carries a 26px rule above its text. Anything in the column beside it starts at the row's top edge, so the first line of a list sat 26px above the heading it belongs to. */ .tcb-flex-row.eb-gutter:has(.eb-block-h) > .tcb-flex-col:not(:has(.eb-block-h)) > .tcb-col{ padding-top:30px} @media (max-width:900px){ .tcb-flex-row.eb-gutter:has(.eb-block-h) > .tcb-flex-col:not(:has(.eb-block-h)) > .tcb-col{ padding-top:0} } @media (max-width: 900px) { /* Thrive holds two columns until 768, by which point the listing card is 203px wide: the H1 breaks with "28" alone, the address orphans its zip, the fact line wraps after a dangling separator and the button goes to two lines. Stack earlier, and give the stack a gap, since a 56px column gutter is not a vertical rhythm. */ .tcb-flex-row.eb-gutter { column-gap: 0; flex-wrap: wrap; row-gap: 34px; } .tcb-flex-row.eb-gutter > .tcb-flex-col { max-width: 100% !important; flex-basis: 100% !important; } /* a desktop offset must not survive the stack */ .tcb-flex-row.eb-gutter .thrv-content-box { margin-top: 0 !important; } } /* ---- tokens ------------------------------------------------------------------------------- These are declared in assets/listing/eb-listing.css under .eb-lp, and that stylesheet is only enqueued on the listing and index pages. Everywhere else, every var(--gold) in this file resolved to nothing and the declaration was silently dropped: the slider's hover state lost its fill and its border and came out transparent with an ink chevron. Same values, declared here so this file stands on its own. .eb-lp still wins inside the listing page, where it is scoped tighter, so nothing there changes. */ :root{ --teal: #0B2E28; --gold: #C9A15F; --gold-l: #EAD7B0; --ink: #0B2E28; } /* ------------------------------------------------------------- inside a theme */ /* The listing page and the index both bring their own measure, .eb-wrap at 1180px, so a theme that constrains its content would nest one measure inside another and leave the schedule in a column half its width. This releases the wrapper the plugin owns. It cannot escape a max-width set on an ANCESTOR, which is a theme's business, and a theme that does that should override single-homesite.php instead. */ .eb-lp--wp { max-width: none; width: 100%; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------ map embed */ .eb-map-embed { width: 100%; margin: 0; } /* This used to pin the frame to 430px under 900px wide, with !important so it beat both the shortcode's inline height and the height the map itself measures and posts back. The reasoning was sound when the map was the only thing in the frame: at 357px across the drawing is about 370px tall, and a 620px frame left empty paper below it. It stopped being sound the moment the frame also had to hold the homesite list. The map's own chip bar takes ~380px at phone width before the plan starts, so 430px cut the plan off at the knees: the bottom row of lots and a street label were simply not on the page, and because the iframe is not scrollable the clip was silent. There was no way to tell from looking that anything was missing. So the frame follows the content. postH() inside the map measures and posts its height, the shortcode listens, and a minimum keeps it from collapsing while the SVG is still parsing. */ @media (max-width: 900px) { .eb-map-embed iframe { min-height: 520px; } /* Amenity map stacks the drawing over the index; give the frame room for both. */ .eb-map-embed iframe[src*="amenity-map"] { min-height: 620px; max-height: 760px; } /* Break the plan out of whatever column it was dropped into. The map is a drawing of 73 parcels; it needs every pixel it can get on a phone. Dropped into the homesites page it inherited that page's content column and rendered 293px wide inside a 390px screen, so a quarter of the width went to margin on a page whose whole purpose is that drawing. On the map page the same embed got 335px. Rather than edit either page's section padding, which belongs to whoever laid the page out, the embed takes the viewport for itself and leaves an 8px gutter each side. calc(100vw) minus the gutter, not 100vw flat: on any browser that counts the scrollbar inside 100vw, the flat version adds a horizontal scroll to the whole page. */ /* Full-bleed without calc(50% - 50vw): Autoptimize's minifier drops that form and leaves this @media unclosed, trapping gallery rules inside it. */ .eb-map-embed { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: auto; margin-left: -50vw; margin-right: 0; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } } /* --------------------------------------------------- the key beside the inset plan The "Where it sits" band ran a 637px drawing beside a single sentence, so roughly half the row was empty paper. The three things that fill it were not invented to fill it: the plan is drawn in four colours and nothing said what they meant, the plat's own "approximate boundaries" disclaimer is hidden by body.embed and no page was carrying it, and a visitor looking at one parcel had no route to the plan it was cut from. Swatch colours are the map's own defaults from themes.json, hardcoded here because this markup is outside the iframe and cannot read its custom properties. If the palette is changed in Map colours these four go stale, which is why they are commented rather than clever. */ /* ★ These colours are for the CREAM band (#F5F2EA), not the emerald one. First draft set them all in white, on the assumption that this section matched the hero card. It does not, and the only reason the text was legible was that Thrive's own .tcb-style-wrap p rule was quietly overriding every one of them with its ink. Text that reads correctly by accident is text that disappears the day the accident stops, so the values are stated here explicitly, in ink, with the !important that rule forces. */ .eb-plankey { margin: 0; font-family: 'Public Sans', sans-serif; } .eb-plankey-adj { margin: 0 0 22px !important; font-family: 'Public Sans', sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(11, 46, 40, .82) !important; } .eb-plankey-legend { list-style: none !important; /* !important because Thrive puts margin-left:20px on every ul, which indented the legend 20px past the sentence above it in the same column. */ margin: 0 0 22px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-items: start; } .eb-plankey-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px !important; line-height: 1.4 !important; color: rgba(11, 46, 40, .78) !important; } .eb-swatch { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 2px; display: block; } /* ★ These are the DIMMED fills, because the locator dims every parcel except the subject. The first version used the palette's full-strength values, so the "Available" chip matched exactly one shape on the drawing beside it: the highlighted homesite. A reader matching key to map would have concluded a single lot was for sale. */ .eb-swatch--avail { background: #A8C4B0; } .eb-swatch--sold { background: #E2CBBF; } .eb-swatch--water { background: #35737A; } /* The distinction the drawing is actually making, which the key never mentioned. */ .eb-swatch--this { background: #C08A2E; box-shadow: 0 0 0 1px rgba(11,46,40,.35); } /* the community tracts are hatched on the plan, so the key is hatched too */ .eb-swatch--comm { background: #9FAE9B; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 5px); } .eb-plankey-link { margin: 0 0 20px; } .eb-plankey-link a { font-size: 13px !important; letter-spacing: .02em; color: #856727 !important; text-decoration: none; border-bottom: 1px solid rgba(133, 103, 39, .45); padding-bottom: 2px; transition: border-color .16s, color .16s; } .eb-plankey-link a:hover { color: #1F5245 !important; border-bottom-color: #1F5245; } .eb-plankey-link a::after { content: ' \2192'; } /* Fine print still has to be readable. .52 was chosen for a dark background this section does not have; .62 was the second guess and measured 4.18:1, which still fails. .68 measures 4.99:1 on the cream. Guessing an alpha and calling it subtle is how the footer credit ended up at 3.36. */ .eb-plankey-note { margin: 0 !important; font-family: 'Public Sans', sans-serif !important; font-size: 12px !important; line-height: 1.6 !important; color: rgba(11, 46, 40, .68) !important; max-width: 46ch; } /* ------------------------------------------------------------------ the index */ .eb-index .eb-head { margin: 54px 0 0; } .eb-index .eb-title { margin: 0; } /* One sentence, in the page's italic display face, the same treatment the deck under a lot number gets. It is a sentence, not a label. */ .eb-index .eb-said { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 24; font-style: italic; font-weight: 300; font-size: 19px; line-height: 1.42; color: var(--sub); margin: 14px 0 0; max-width: 42ch; text-wrap: balance; } .eb-schedule { margin: 44px 0 0; border-top: 1px solid var(--rule); } /* The street names the group, once, instead of standing in a column down the left of every row it owns. It is a heading in the page's display face at reading size, not a letterspaced capital label, and it is the same colour as everything else. */ .eb-schedule .street { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 36; font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: -.005em; color: var(--teal); margin: 0; padding: 30px 4px 9px; } .eb-schedule .street:first-child { padding-top: 14px; } /* The whole row is the link. A "View" link at the end of every row is a column of the same word repeated seventy times. */ .eb-schedule .srow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 7rem 9rem; gap: 24px; align-items: baseline; padding: 15px 4px 14px; border-bottom: 1px solid var(--rule-s); text-decoration: none; color: inherit; transition: background .14s; } .eb-schedule .srow:hover, .eb-schedule .srow:focus-visible { background: var(--band); } .eb-schedule .srow:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .eb-schedule .lot { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 48; font-weight: 400; font-size: 23px; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; } .eb-schedule .where { font-size: 14px; line-height: 1.35; color: var(--lab); } /* the one status that is an exception to "on the market", said in words */ .eb-schedule .where .spoken { color: var(--sold); } .eb-schedule .size, .eb-schedule .fig { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 20; font-weight: 400; font-size: 15px; color: var(--teal); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .eb-schedule .size small, .eb-schedule .fig small { font-family: 'Public Sans', sans-serif; font-size: 10px; color: var(--lab); margin-left: 4px; font-variant-numeric: normal; } /* a price nobody has published is not dressed up as one */ .eb-schedule .fig.quiet { font-family: 'Public Sans', sans-serif; font-size: 13px; color: var(--lab); } .eb-index .eb-after { margin: 30px 0 0; font-size: 14px; line-height: 1.6; color: var(--body); max-width: 46ch; } .eb-index .eb-after a { color: var(--body); text-decoration: none; border-bottom: 1px solid #c7c0ac; padding-bottom: 2px; } .eb-index .eb-after a:hover { color: var(--teal); border-color: var(--teal); } .eb-index .eb-foot { margin: 74px 0 96px; font-size: 12px; line-height: 1.62; color: var(--lab); max-width: 60ch; } @media (max-width: 720px) { .eb-schedule .srow { grid-template-columns: 2.9rem minmax(0, 1fr) auto; gap: 14px; row-gap: 4px; } /* on a phone the size moves under the street rather than squeezing a fourth column */ .eb-schedule .size { grid-column: 2; text-align: left; font-size: 13px; color: var(--lab); } .eb-schedule .fig { grid-column: 3; grid-row: 1; } .eb-index .eb-said { font-size: 17.5px; } } /* the street's own exposure, when every lot on it shares one. Lower case, quiet, on the same line: a note on the heading, not a badge beside it. */ .eb-schedule .street .q { font-family: 'Public Sans', sans-serif; font-size: 13px; font-weight: 400; color: var(--lab); margin-left: 8px; } /* The theme template's page banner. Fine on Lifestyle, wrong above a listing: it printed the page title "Homesite Detail" over stock photography and pushed the parcel, the price and the photograph below the fold. Scoped to the body class the plugin adds, so every other page keeps its banner. */ body.eb-homesite #theme-top-section{display:none} /* Thrive gives every heading a 24px padding-bottom of its own, which lands on top of whatever margin the spacing utility asks for. The block headings were set to 28px and rendering at 47. Zeroed here so a heading's gap to its body is the gap that was set, once, for all of them. */ body.eb-homesite #tve_editor h1, body.eb-homesite #tve_editor h2, body.eb-homesite #tve_editor h3{padding-bottom:0!important} /* The map page carries no featured image, so the theme's photo hero rendered the browser's broken-image glyph under a washed gradient as the first thing on the page. */ body.page-template-default.eb-map-page #theme-top-section{display:none} /* ---- the listing furniture ------------------------------------------------------------------ Shaped after the MLS listing pages on cedarcreeklake.online, because that is what a buyer has already scrolled through a hundred of: status, address, price, one line of figures, one button, then the description, then a two column detail table. Emerald Bay's own type and colour, a listing's anatomy. */ /* the fact line. Figures a buyer reads in a second, not four rows they have to parse. */ /* colour carries !important on every one of these: they are paragraphs and spans living inside a builder text block, and Thrive's .tcb-style-wrap p wins on specificity against any single class. Losing it put black type on the emerald card four separate times. */ .eb-facts{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0; font-family:'Public Sans',sans-serif;font-weight:300;font-size:13px!important; letter-spacing:1.2px;text-transform:uppercase;line-height:1.7;row-gap:4px; color:rgba(255,255,255,.62)!important} .eb-facts-sep{margin:0 11px;color:rgba(228,205,160,.9)!important} .eb-facts--dark{color:rgba(11,46,40,.86)!important} .eb-facts--dark .eb-facts-sep{color:#C9A15F!important} /* the listing card: one bordered block carrying everything above the fold */ /* Thrive adds padding-bottom:15px to every p, which was landing on top of each spacing class inside the card and turning a 0/10/18/40 rhythm into 15/25/33/55. Zeroed here so the card's spacing is the spacing that was set. */ /* Was a 5%-lighter fill inside a 40% gold outline, which at 2x is an invisible box in a visible rectangle. One 2px gold rule across the top, no outline: the flat ruled language the rest of the page already speaks. */ .eb-card{border:0;border-top:2px solid #C9A15F;background:rgba(255,255,255,.055); padding:30px 30px 34px!important} .eb-card p{padding-bottom:0!important} /* an [eb_field] with no value leaves an empty p in a wrapper that still holds its box and its margin: address and MLS together banked 62px of hole between the title and the price */ .eb-card .thrv_wrapper:has(> .fr-wrapper > p:empty), .eb-card .thrv_wrapper:has(> p:empty){display:none!important} .eb-card .thrv_wrapper{margin-bottom:0} /* A marker and a word, not a boxed label. The bordered rectangle read as a disabled input, and it was the first thing on the card. The square carries the state, so status is legible without reading the word, which is how an MLS status column works. */ .eb-status{display:inline-flex!important;align-items:center;gap:9px; font-family:'Public Sans',sans-serif;font-weight:300;font-size:11.5px!important; letter-spacing:2.2px;text-transform:uppercase;line-height:1!important; color:rgba(255,255,255,.72)!important;border:0;padding:0!important;margin:0} /* The marker earns its place on an exception, not on the default. A gold square beside the word AVAILABLE on 58 of 70 pages is decoration, and our own list cards already got this right: .rc-stat .dot is display:none except on sold. The two components disagreed; they no longer do. */ .eb-status::before{content:"";width:7px;height:7px;flex:0 0 7px;background:currentColor;display:none} .eb-status--sold::before,.eb-status--under_contract::before, .eb-status--not_for_sale::before{display:block} .eb-status--for_sale{color:#C9A15F!important} .eb-status--under_contract{color:#E4CDA0!important} .eb-status--sold,.eb-status--not_for_sale,.eb-status--community{ color:rgba(255,255,255,.62)!important} /* The card's rhythm, set on the elements themselves. Left to the wrapper utilities it came out 58 / 95 / 50 / 50 / 65 / 100 down the card, because each line's own leading and the h1's own margin were being added to whatever the utility asked for. */ /* The card's children sit inside .tve-cb, not directly under .eb-card, so the first version of this reset matched nothing. Targeted by what each row contains rather than by position, so reordering the card in the builder cannot silently break the rhythm. Thrive also gives the h1 a 24px padding-bottom of its own, which is where the extra air under the title came from. */ .eb-card .tve-cb > .thrv_wrapper{margin-bottom:0!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-status){margin-bottom:20px!important} .eb-card .tve-cb > .thrv_wrapper:has(h1){margin-bottom:8px!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-addr){margin-bottom:36px!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-mls){margin-bottom:22px!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-price){margin-bottom:12px!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-facts){margin-bottom:32px!important} .eb-card h1{padding-bottom:0!important;margin:0!important} .eb-ptitle{margin:0!important;font-family:'Fraunces',Georgia,serif!important; font-weight:300!important;font-size:38px!important;line-height:1.12!important; color:#FFFFFF!important} .eb-addr{margin:0!important;font-family:'Public Sans',sans-serif!important; font-weight:300!important;font-size:15px!important;line-height:1.55!important; color:rgba(255,255,255,.72)!important} /* The one line description, above the street address in the hero card. These used to share one paragraph, so on the twelve parcels that carry an address the sentence ran straight into the street with no space at all: "...first homesite on Ruby Way.00 Ruby Way, Caney City". Two elements, and the address drops to a quieter line beneath. */ .eb-lede-line{margin:0 0 6px!important;font-family:'Public Sans',sans-serif!important; font-weight:300!important;font-size:16px!important;line-height:1.6!important; color:rgba(255,255,255,.9)!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-lede-line){margin-bottom:36px!important} .eb-card .tve-cb > .thrv_wrapper:has(.eb-lede-line):has(.eb-addr){margin-bottom:36px!important} /* Parcels 70, 71 and 76 are held for the community. Nobody buys them and nobody builds on them, so the block describing what is in the ground for your builder, and the offer of a preferred builders list, does not belong on a page about the marina or the amenity tract. */ body.eb-kind-community .eb-build-block{display:none!important} .eb-mls{font-family:'Public Sans',sans-serif;font-weight:300;font-size:12px!important; letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.66)!important;margin:0 0 6px} .eb-price .eb-price-none{font-family:'Public Sans',sans-serif!important;font-size:19px!important; line-height:1.5!important;letter-spacing:.4px;color:rgba(228,205,160,.85)!important;display:block} /* The price and the title were 44px sans against 40px serif: two headlines, no headline, and the sans at that size reads as a dashboard metric rather than a price. One typeface, a 2.0 interval, lining figures so the comma group does not sag. */ /* font-family and letter-spacing need the same !important the colour did: .tcb-style-wrap p was winning, so the price rendered as Public Sans, the body face, at the largest size on the site, while the map card set the same datum in Fraunces. */ .eb-price{font-family:'Fraunces',Georgia,serif!important;font-weight:300!important; font-size:40px!important;letter-spacing:-.01em!important;font-variant-numeric:lining-nums tabular-nums; line-height:1.08!important;color:#E4CDA0!important;margin:0 0 18px} /* a rule over a heading, the way a listing separates its blocks */ /* margin lives on the wrapper utility, not here: Thrive's own heading reset zeroes a margin set on the h2 itself, which left all three block headings sitting flush on their text. */ .eb-block-h{position:relative;padding-top:0!important;margin:0;text-wrap:balance; font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:31px!important; line-height:1.2!important;color:#0B2E28!important} /* The rule is gone. It carried no information, it sat above every single heading, and the site's own pattern is a gold letterspaced eyebrow with real words in it, not a decoration. A heading that needs a label gets a label; the rest just get the heading. */ /* the same treatment on the dark ground */ .eb-block-h--light{color:#FFFFFF!important} /* the detail table, two columns like a listing's */ .eb-sec-rows--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px;row-gap:0} /* The row rule comes from an adjacent-sibling selector, which in a two column grid gave the top RIGHT cell a border and the top left cell none, so the two halves read as tables offset from each other by a hairline and by 1px of height. Both first rows are bare. */ .eb-sec-rows--2 > .eb-sec-row:nth-child(-n+2){border-top:0} @media (max-width:820px){ .eb-sec-rows--2{grid-template-columns:1fr} } /* ---- [eb_row] and [eb_photo] ------------------------------------------------------------- The spec schedule, on the dark hero. Rows only exist when there is something to say, so the rule and the spacing have to work for two rows as well as five. */ /* capped, because on a parcel with no photograph the column goes full width and a four row schedule stretched across 1160px reads as a table of contents, not a spec */ .eb-spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px; max-width:640px;padding:15px 0;border-bottom:1px solid rgba(201,161,95,.22)} .eb-spec-row:first-child{border-top:1px solid rgba(201,161,95,.22)} .eb-spec-k{font-family:'Public Sans',sans-serif;font-weight:300;font-size:13px; letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.62)} .eb-spec-v{font-family:'Public Sans',sans-serif;font-weight:300;font-size:16px; color:#fff;text-align:right} .eb-photo{margin:0;overflow:hidden;background:#0F3A31;position:relative} .eb-photo img{width:100%;height:100%;object-fit:cover;display:block} /* no photograph, no column. The row goes to one column and the text takes the measure. */ /* Position independent: collapse whichever column holds the marker and give the other the full measure. Written by child position it broke the moment the two hero columns were swapped. */ /* a builder wrapper whose only content is an empty section collapses with it */ .thrv_wrapper:has(> .eb-sec-none), .thrv_wrapper:has(> p > .eb-sec-none), .thrv_wrapper:has(> .fr-wrapper .eb-sec-none){display:none} /* Collapse the EMPTY ELEMENT, not the column. Hiding the column took the breadcrumb with it on every parcel with no photographs, which was three of the four audited, leaving them with no way back to the index. */ .thrv_wrapper:has(> .fr-wrapper .eb-gal-none), .thrv_wrapper:has(> p > .eb-gal-none), .thrv_wrapper:has(> .eb-gal-none), .thrv_wrapper:has(> .fr-wrapper .eb-photo-none), .thrv_wrapper:has(> p > .eb-photo-none), .thrv_wrapper:has(> .eb-photo-none){display:none} /* With the gallery gone the column it lived in is an empty half of the hero, leaving the card stranded on the right. Collapsing the column is safe again now the breadcrumb sits above the row rather than inside that column, which is what made this dangerous the first time. */ .tcb-flex-row:has(> .tcb-flex-col .eb-gal-none) > .tcb-flex-col:has(.eb-gal-none){display:none} .tcb-flex-row:has(> .tcb-flex-col .eb-gal-none) > .tcb-flex-col:not(:has(.eb-gal-none)){ max-width:100%!important} /* and the card stays card shaped rather than stretching to the full rail */ .eb-card{max-width:520px} /* the slider when it runs in the emerald hero rather than in a white band of its own */ .eb-gallery--onDark{--eb-gal-max:none} /* !important for the same reason the CTA needs it: Thrive's :not(.inc) .thrv_text_element p() outranks anything a plugin stylesheet can say about a paragraph living inside a builder text block, and the credit came out 16px black on emerald. */ .eb-gallery--onDark .eb-gal-credit, .eb-gal-credit.eb-gallery--onDark{color:rgba(255,255,255,.4)!important; font-size:11px!important;line-height:1.5!important;margin-top:12px} .eb-gallery--onDark .eb-gal-arrow{background:rgba(11,46,40,.62); border-color:rgba(201,161,95,.55);color:#E4CDA0} .eb-gallery--onDark .eb-gal-arrow:hover:not(:disabled){background:var(--gold); border-color:var(--gold);color:#0B2E28} .eb-gallery--onDark .eb-gal-dot::after{background:rgba(228,205,160,.3)} .eb-gallery--onDark .eb-gal-dot.on::after{background:#E4CDA0} .eb-gallery--onDark .eb-gal-dot:hover::after{background:rgba(228,205,160,.75)} /* ---- [eb_gallery] ----------------------------------------------------------------------- A slider by default. The scrolling is native CSS scroll-snap, so it works on touch, trackpad and keyboard with no script at all; eb-gallery.js only adds the arrows and dots. That order matters inside a page builder, where a script can easily fail to run and a JS-driven carousel would leave a blank hole where the photographs should be. */ /* ---- the lightbox ------------------------------------------------------------------------- Deliberately plain: a dark ground, the photograph, and three controls that look like every other control on the site. */ .eb-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center; background:rgba(7,26,22,.94);padding:64px 72px} .eb-lb.on{display:flex} body.eb-lb-open{overflow:hidden} .eb-lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center; justify-content:center} .eb-lb-fig img{max-width:100%;max-height:calc(100vh - 128px);width:auto;height:auto;display:block} .eb-lb-close,.eb-lb-prev,.eb-lb-next{position:absolute;width:46px;height:46px;padding:0; box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:0; border:1px solid rgba(201,161,95,.55);background:rgba(11,46,40,.55);color:#E4CDA0; font-size:20px;line-height:1;cursor:pointer; transition:background .16s,border-color .16s,color .16s,opacity .16s} .eb-lb-close:hover,.eb-lb-prev:hover:not(:disabled),.eb-lb-next:hover:not(:disabled){ background:#C9A15F;border-color:#C9A15F;color:#0B2E28} .eb-lb-close:focus-visible,.eb-lb-prev:focus-visible,.eb-lb-next:focus-visible{ outline:2px solid #C9A15F;outline-offset:2px} .eb-lb-prev:disabled,.eb-lb-next:disabled{opacity:0;pointer-events:none} .eb-lb-close{top:22px;right:22px;font-size:24px} .eb-lb-prev{left:18px;top:50%;transform:translateY(-50%)} .eb-lb-next{right:18px;top:50%;transform:translateY(-50%)} .eb-lb-count{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center; font-family:'Public Sans',sans-serif;font-weight:300;font-size:12px;letter-spacing:1.6px; color:rgba(228,205,160,.7)} .eb-gal-item a{cursor:zoom-in} @media (max-width:720px){ .eb-lb{padding:56px 12px} .eb-lb-prev{left:6px} .eb-lb-next{right:6px} .eb-lb-fig img{max-height:calc(100vh - 130px)} } /* ---- [eb_cta] --------------------------------------------------------------------------- Matched to the Thrive button it replaces, so the swap is invisible: same face, same tracking, same square corner. A sold parcel takes the quieter outline treatment, because "see available homesites" is a redirection and should not shout louder than the price it sits under. */ /* colour carries !important because Thrive styles every link inside a text element with :not(.inc) .thrv_text_element a:not(.tcb-button-link)(color:var(--tcb-skin-color-4)) which is specificity 0,3,1 and resolves to black. Losing that fight put black text on the dark emerald card for every sold parcel, which is invisible, so this is not a style preference but the difference between a readable control and no control at all. */ .eb-cta{display:block;width:100%;box-sizing:border-box;text-align:center; font-family:'Public Sans',sans-serif;font-size:14px!important;letter-spacing:2px; font-weight:500!important;text-transform:uppercase;text-decoration:none!important; letter-spacing:2px!important;padding:19px 24px;border-radius:3px;max-width:320px; background:#C9A15F;color:#0B2E28!important;border:1px solid #C9A15F; transition:background .16s,color .16s,border-color .16s} .eb-cta:hover,.eb-cta:focus-visible{background:#E4CDA0;border-color:#E4CDA0;color:#0B2E28!important} .eb-cta:focus-visible{outline:2px solid #FFFDF3;outline-offset:2px} .eb-cta--sold,.eb-cta--not_for_sale{background:transparent;color:#E4CDA0!important; border:1px solid rgba(201,161,95,.55)} .eb-cta--sold:hover,.eb-cta--not_for_sale:hover, .eb-cta--sold:focus-visible,.eb-cta--not_for_sale:focus-visible{background:rgba(201,161,95,.14); border-color:#C9A15F;color:#E4CDA0!important} /* the gallery's own heading, so it lives and dies with the photographs */ .eb-gal-eyebrow{font-family:'Public Sans',sans-serif;font-weight:300;font-size:13px; letter-spacing:2.4px;text-transform:uppercase;color:#C9A15F;margin:0 0 12px} .eb-gal-heading{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:34px; line-height:1.22;color:#0B2E28;margin:0 0 40px} /* and the band around it, when a builder section was wrapped about a parcel with no photographs */ /* Collapse a band whose ONLY content is the gallery. The direct child has to be the text element carrying the shortcode: written as "> * .eb-gal-none" this also matched a columns row, so once the slider moved into the hero the rule hid the hero, price, specs and button along with it. */ .tve-page-section-in:has(> .thrv_text_element .eb-gal-none), .tve-page-section-in:has(> .eb-gal-none){display:none} /* [eb_if] gating a whole band. Kept separate from .eb-sec-none, which collapses only the wrapper it sits in: three of those live inside the detail section and a shared class would have taken the detail section down with them. */ .tve-page-section-in:has(> .thrv_wrapper .eb-gate-off), .tve-page-section-in:has(> .eb-gate-off){display:none} .eb-gallery--slider{position:relative} .eb-gal-track{display:grid;grid-auto-flow:column; /* one photo at a time, with the next one peeking so it is obvious the strip continues */ grid-auto-columns:100%; gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch} .eb-gallery--peek .eb-gal-track{grid-auto-columns:min(86%,calc(100% - 60px))} .eb-gal-track::-webkit-scrollbar{display:none} .eb-gal-track:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .eb-gallery--slider .eb-gal-item{margin:0;scroll-snap-align:start} .eb-gallery--slider .eb-gal-item a{display:block;line-height:0} /* max-height, not a taller ratio: at 1160px of page width a 3/2 slide is 773px tall and pushes everything else past the fold. The cap crops rather than letterboxes because of object-fit, and 3/2 still governs on narrow screens where the cap never bites. */ /* 16:9, because that is what the drone shot. Half the library and eleven of the fifteen slides are 1.78-1.79, and forcing them into 3:2 was cutting 16 per cent off both sides of every aerial. Measured: 16:9 takes those from 15.7-16.3 per cent side loss down to under 1. */ .eb-gallery--slider .eb-gal-item img{width:100%;height:100%; aspect-ratio:var(--eb-gal-ratio, 16/9);object-fit:cover;object-position:50% 50%; max-height:var(--eb-gal-max, 520px);display:block} /* Anything that is not a landscape photograph is shown whole. The land title survey is a 792x1224 portrait plat: in a landscape frame it lost 57 per cent of its height, taking the title block, the legend, the north arrow, the scale and the surveyor's seal with it. That is the one image on the page unique to the parcel, so it is the one that must not be cut. */ .eb-gal-item--fit img{object-fit:contain!important;background:#0B2E28} /* documents: a thumbnail and a name, opening the lightbox where the plat is actually readable */ .eb-docs{display:flex;flex-wrap:wrap;gap:18px;margin:0} .eb-doc{margin:0;width:168px} .eb-doc a{display:block;text-decoration:none!important;color:inherit} .eb-doc img{width:168px;height:216px;object-fit:cover;object-position:50% 0;display:block; border:1px solid rgba(11,46,40,.22);background:#F5F2EA} .eb-doc figcaption{font-family:'Public Sans',sans-serif;font-weight:300;font-size:12.5px; line-height:1.45;letter-spacing:.4px;color:rgba(11,46,40,.72)!important;margin-top:9px} .eb-doc a:hover img{border-color:#C9A15F} /* Square, hairline, flush to the frame. The round drop shadowed pill is stock carousel furniture and it was the one thing on the page that did not belong to this brand: every control on the site is a rectangle with a gold hairline and letterspaced type. A disabled arrow goes away rather than sitting there at a third opacity. */ /* width and height need to hold against the theme's own button rules, which added padding and a minimum height and turned a 46px square into 88 by 68. */ /* anchored to the track, not to the gallery: .eb-gallery includes the index rules and the caption, so top:50% put both arrows 14px below the centre of the photograph. */ .eb-gal-track{position:relative} /* Centred on the TRACK, not on the gallery box. `50% - 14px` measured against the whole gallery, which includes the dot rail, and the 14px was hand tuned for a rail that is ONE row tall. On a phone the dots wrap to two rows, the rail grows, and the arrows ended up 22px below the middle of the photograph. eb-gallery.js publishes the track's measured height as --eb-gal-trackh and keeps it current through a ResizeObserver, so this is exact at any width and any number of dot rows. The fallback is the old behaviour, for the case where the script never runs. */ .eb-gal-arrow{position:absolute;top:calc(var(--eb-gal-trackh, 100%) / 2);transform:translateY(-50%);z-index:2; width:46px!important;height:46px!important;min-width:0;min-height:0;padding:0!important; box-sizing:border-box;display:flex;align-items:center;justify-content:center; border:1px solid rgba(31,82,69,.32);border-radius:0; background:rgba(255,253,243,.93);color:#1F5245;font-size:20px;line-height:1;cursor:pointer; box-shadow:none;transition:background .16s,border-color .16s,color .16s,opacity .16s} .eb-gal-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#0B2E28} .eb-gal-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .eb-gal-arrow:disabled{opacity:0;pointer-events:none} /* off the photograph. Sitting flush at left:0/right:0 the two 46px controls covered 13.9% of a 660px slide, on top of the crop already taken from those same edges. */ .eb-gal-prev{left:-23px} .eb-gal-next{right:-23px} @media (max-width:900px){ .eb-gal-prev{left:4px} .eb-gal-next{right:4px} } /* Rules, not dots. Fifteen open circles under a photograph is a lot of punctuation; a row of hairline marks reads as an index and sits with the rest of the page's rules. The button keeps a 14px target so it is still comfortably clickable at 2px of ink. */ /* centred, because the count changes per parcel and left aligned they ended short of the image by a different amount on every page */ .eb-gal-dots{display:flex!important;justify-content:center!important;gap:6px; margin:14px 0 0;flex-wrap:wrap} .eb-gal-dot{width:24px;height:26px;padding:0;border:0;border-radius:0;background:transparent; cursor:pointer;position:relative} .eb-gal-dot::after{content:"";position:absolute;left:0;right:0;top:12px;height:2px; background:rgba(31,82,69,.26);transition:background .16s} .eb-gal-dot.on::after{background:var(--gold)} .eb-gal-dot:hover::after{background:rgba(201,161,95,.7)} .eb-gal-dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* the grid remains available for anywhere a static block reads better */ .eb-gallery--grid{display:grid;gap:10px;margin:0 0 10px; grid-template-columns:repeat(var(--eb-gal-cols,3),minmax(0,1fr))} .eb-gallery--grid .eb-gal-item{margin:0} .eb-gallery--grid .eb-gal-item a{display:block;line-height:0} .eb-gallery--grid .eb-gal-item img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block} /* at the foot of the page, where a licence line belongs */ .eb-credit-foot{font-family:'Public Sans',sans-serif!important;font-size:11px!important; line-height:1.6!important;letter-spacing:.2px;color:rgba(255,255,255,.52)!important;margin:0} .eb-gal-credit{font-size:11px!important;line-height:1.5!important;color:#5C6B62!important; opacity:.75;padding-bottom:0!important;margin:10px 0 0} @media (max-width:700px){ .eb-gallery--grid{grid-template-columns:repeat(2,minmax(0,1fr))} .eb-gallery--peek .eb-gal-track{grid-auto-columns:92%} .eb-gal-arrow{width:38px;height:38px;font-size:19px} } @media (max-width:420px){ .eb-gallery--grid{grid-template-columns:1fr} } /* ---- [eb_section_*] ---------------------------------------------------------------------- Deliberately plain: a page built to its own design supplies the look, this supplies the rows and gets out of the way. Two columns on anything wider than a phone, stacked below that. */ .eb-section{margin:0 0 26px} .eb-sec-title{font-family:'Fraunces',serif;font-weight:400;font-size:20px;margin:0 0 10px; color:#1F5245} .eb-sec-rows{margin:0;padding:0} /* prose, set as prose */ .eb-prose{margin:0} .eb-prose-row{margin:0 0 20px;max-width:62ch} .eb-prose-row:last-child{margin-bottom:0} .eb-sec-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:10px 18px; padding:8px 0;border-top:1px solid rgba(31,82,69,.12)} .eb-sec-row:first-child{border-top:0} .eb-sec-row dt{margin:0;font-size:11px;font-weight:400;letter-spacing:1.6px;text-transform:uppercase; color:#5C6B62} .eb-sec-row dd{margin:0;font-size:16px;font-weight:300;color:#0B2E28} /* Prose does not belong in the value gutter: label over, paragraph under, full measure. */ .eb-sec-row--long{grid-template-columns:1fr;gap:6px} /* the fold. A quiet line the reader chooses to open, not a wall they have to scroll past. */ .eb-fold{margin:0} .eb-fold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px; font-family:'Public Sans',sans-serif;font-weight:300;font-size:13px;letter-spacing:1.6px; text-transform:uppercase;color:#0B2E28;border-bottom:1px solid rgba(201,161,95,.65); padding-bottom:4px} .eb-fold>summary::-webkit-details-marker{display:none} .eb-fold>summary::after{content:"+";font-size:15px;line-height:1;color:#C9A15F} .eb-fold[open]>summary::after{content:"\2013"} .eb-fold>summary:focus-visible{outline:2px solid #C9A15F;outline-offset:3px} .eb-fold-body{margin-top:16px} .eb-sec-row--long dd{font-size:15.5px;line-height:1.7;max-width:66ch} @media (max-width:520px){ .eb-sec-row{grid-template-columns:1fr;gap:2px} } /* ---- the composed single homesite ------------------------------------------------------- These lived only in the offline preview's inline