/* ============================================================================ * engine-layout.css - the three-pane desktop engine * --------------------------------------------------------------------------- * Everything that makes >=1280px a locked three-pane application: list | detail | * map, the viewport lock, the detail deck and its tabs, the booking pane. * * LOAD ORDER: 4 of 5. After base, before surface. * * Below 1280 this file largely stands down and the page falls back to the single * column in engine-base.css. The mobile work (option B then C) belongs HERE or in * a sibling engine-mobile.css - not back inside the page. * ==========================================================================*/ /* ══ BOOKING-ENGINE CHROME (group 1, Elec 2026-08-15): headers in place from page load — nav is solid immediately (no .scrolled fade-in), sits in flow (sticky), filter bar directly beneath it, both vertically compact. ══ */ nav, nav.scrolled { position:sticky; top:0; background:rgba(5,29,64,0.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding:0.85rem 4vw 0.1rem; /* Elec: headers at 0.1rem separation */ /* Elec: "no gold bar between 2 header sections" */ border-bottom:none; border-image:none; transition:none; } /* Elec: amenity chips were rounder than everything else — radius now matches the dates box / header buttons (--radius-sm, not 999px pills). */ .filter-btn { border-radius:var(--radius-sm); } /* Elec: the transient "Checking those dates…" status must not push layout — it floats in the empty area UNDER the available-property count (right side of the bar), out of the document flow. */ .date-msg { position:absolute; right:4vw; top:2.15rem; margin:0; text-align:right; pointer-events:none; } /* Elec: "Stay dates" / "Amenities filter" labels — letters stretched a touch further (casual sprawl), and they brighten by 1/3 when the guest hovers the FIELDS they label. Hovering the labels themselves does nothing (keyed off the field cells via :has, never the label). */ .fb-datelabel, .fb-labelrow .filter-label { letter-spacing:0.26em; transition:filter 0.25s ease; } .filter-bar:has(.fb-datecell:hover) .fb-datelabel { filter:brightness(1.33); } .filter-bar:has(.fb-chips:hover) .fb-labelrow .filter-label { filter:brightness(1.33); } /* Elec: Guest Support's hover was too loud — same subtle hover grammar as the amenity filter chips (soft gold wash, gold border, no slate flood). */ .nav-cta:hover { background:rgba(201,169,110,0.1); border-color:var(--gold); color:var(--parchment) !important; } /* Elec: the pop-out's INTERNALS were fine all along — the ugly spacing was its top border stacking on the gold bar under the header (measured: pop top 141 vs bar 143). Drop the pop-out clear of the bar instead. */ .dr-pop { top:calc(100% + 24px); } /* halfway back from 22px — clears the gold bar without lining up with the columns' top edge */ /* Elec: the HEADER pop-out calendar matches the centre calendar's ring treatment — 2px gold ring over a translucent fill, no solid block. */ .dr-pop .dr-cell.sel, .dr-pop .dr-cell.sel-start, .dr-pop .dr-cell.sel-end { border-radius:50%; background:rgba(201,169,110,0.18); box-shadow:inset 0 0 0 2px var(--gold); color:var(--parchment); font-weight:700; } .dr-pop .dr-cell.sel.tdy::after { background:var(--gold); } /* Elec: checkout ring must read identically to check-in. They only looked different because the square in-between band butted the circle. The band is now a slim centred connector, so both endpoints sit clean. */ .dr-pop .dr-cell.mid, .cd-wrap .dr-cell.mid { background:linear-gradient(rgba(201,169,110,0.13), rgba(201,169,110,0.13)) center/100% 58% no-repeat; } /* Elec: while picking check-out, the preview cells were rectangular bands, so moving date to date flashed a square before the circle caught up. Preview cells are now round like the hover itself — nothing goes square. */ .dr-pop .dr-cell.pre, .cd-wrap .dr-cell.pre { border-radius:50%; background:rgba(201,169,110,0.10); } /* Elec: the hover highlight went SQUARE on band/preview cells — those carry border-radius:0 for the connector. The hovered day is always a circle. */ .dr-pop .dr-cell:hover:not(:disabled):not(.sel), .cd-wrap .dr-cell:hover:not(:disabled):not(.sel) { border-radius:50%; background:rgba(201,169,110,0.22); } /* Elec: Stay dates + Guests hover like the amenity chips — the same soft gold background wash. Their BORDERS stay put (already gold; no ring, no colour change). The chips keep their own behaviour untouched. */ .date-field { padding:0.55rem 1rem; transition:background 0.18s, color 0.18s; } .date-field:hover, .date-field[aria-expanded="true"] { background:rgba(201,169,110,0.1); box-shadow:none; } /* Elec: the Stay dates box is "the heartbeat of this whole thing" — a BRIGHT pulse until dates are set, then a minimal one that keeps beating. ID selectors so they outrank the .has-dates rule that used to stop it. */ /* ⚑ ONE TEMPO: every pulse on this page runs at 2.6s (Elec 2026-08-16) — header dates/guests, the pin+card pair and Book & Pay. Intensity varies by state, frequency never does. Keep new pulses on 2.6s. */ /* Visually-hidden H1 (audit): present for crawlers and screen readers, takes no space and never paints. */ .engine-h1 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* Elec: BOTH search boxes carry the same heartbeat — bright until dates are set, minimal but continuing after. Keyed off body.dates-set so the Guests box matches the Stay dates box exactly (it used to run its own pulse). */ body:not(.dates-set) .date-field { animation:dateBeatStrong 2.6s ease-in-out infinite; } body.dates-set .date-field { animation:dateBeatSoft 2.6s ease-in-out infinite; } /* …unless the guest count is still unanswered — then Guests stays bright. */ body.dates-set #gpBtn:not(.guests-set) { animation:dateBeatStrong 2.6s ease-in-out infinite; } /* Elec 2026-08-16: all scroll-related sidebar chrome dropped 33% in opacity — thumb, track and the Firefox scrollbar-color pair. Applies to the page, the list column and the Details pane alike. */ ::-webkit-scrollbar-thumb { background:rgba(90,106,125,0.67); } ::-webkit-scrollbar-thumb:hover { background:rgba(201,169,110,0.67); } ::-webkit-scrollbar-track { background:rgba(5,29,64,0.67); } * { scrollbar-color:rgba(90,106,125,0.67) transparent; } .browse-section, .browse-detail, .browse-detail.bd-scroll { scrollbar-color:rgba(201,169,110,0.23) transparent; } /* Elec 2026-08-16: while the pop-out calendar is open, the LIST column fuzzes out like the header does. The header's blur comes from .dr-veil, which cannot be reused here — the filter bar's own backdrop-filter makes it the containing block for that fixed element, clipping the veil to a 78px strip (measured). So the column gets the equivalent treatment directly. It clears itself when the pop-out closes on date selection. */ .browse-section { transition:filter 0.3s ease; } body.dr-open .browse-section { filter:blur(2.5px) brightness(0.62); pointer-events:none; } /* Elec 2026-08-16: "the rest of header and left column should fuzz out just like calendar pop" — the guest-support pop-out gets the same treatment. The HEADER fuzzes too, which the calendar's veil does for it; here the filter bar and nav are dimmed directly, for the same reason the column is (the bar's own backdrop-filter clips a fixed veil to a 78px strip). ⚠ Everything EXCEPT the pop-out itself, which now lives on and so is not a descendant of anything being blurred — that reparenting is what makes this possible at all. */ #nav, .filter-bar { transition:filter 0.3s ease; } body.gs-open .browse-section, body.gs-open .filter-bar { filter:blur(2.5px) brightness(0.62); pointer-events:none; } /* ⛑ Elec 2026-08-16: "the guest support button should continue to look prominent while open and after closure. should actually match modal while open." The nav USED to be dimmed as a whole, with a brightness(1.6) on the button trying to claw it back — which never works properly, because a filter on a parent applies to every descendant and a child cannot undo it. So only the LOGO SIDE fuzzes now, and the button is left alone and styled directly. While open it takes the pop-out's own ground and gold edge, so the two read as one object — the same trick the active tab uses to join its pane. Closed, it returns to its normal prominent state untouched. */ body.gs-open .nav-left { filter:blur(2.5px) brightness(0.62); pointer-events:none; } body.gs-open #gsBtn { background-color:#182E51 !important; border-color:var(--gold) !important; color:var(--parchment) !important; } /* Elec 2026-08-16: the count keeps its line (right-aligned) and the "as low as" price hangs on its own line beneath, still right-aligned. Absolutely positioned so line 2 costs the header no extra height. */ .filter-count { position:relative; display:block; text-align:right; } /* Elec 2026-08-16: the properties-available line matches "Stay dates" — same size, uppercase, and the same 0.26em tracking the two header labels carry (.filter-label + the .fb-datelabel override above). */ /* Elec 2026-08-16: "slight text spacing increase" on the header text above the map — 0.26 → 0.30em on both lines of the count block, so they stay a matched pair. It is right-aligned, so the extra width grows leftward into the map track rather than moving the mirrored right margin. */ .filter-count .fc-main { display:block; white-space:nowrap; font-size:0.72rem; letter-spacing:0.30em; text-transform:uppercase; color:var(--sage); } /* Elec 2026-08-16: the VARIABLES carry the emphasis — the count, the date range, the guest number — while "properties available" and the rest stay exactly as they were. Sized in em so they scale with the line rather than needing their own number. */ .filter-count .fc-main .fc-v { font-size:1.2em; font-weight:700; color:var(--parchment); letter-spacing:0.2em; } /* Elec 2026-08-16 ("yes to matching price line to caps and space"): the words on the from-price line take the same header treatment. The gold amount keeps its own size/tracking via .fc-amt below — a numeral is unaffected by uppercase, so only the words actually change. */ .filter-count .fc-low { position:absolute; top:100%; right:0; margin-top:0.28rem; white-space:nowrap; color:var(--sage); font-size:0.72rem; letter-spacing:0.30em; text-transform:uppercase; } /* Elec 2026-08-16: "golden price should have the same pulse as the book button" — literally the same: dateBeatStrong at the one 2.6s tempo, the animation .bk-reserve uses. inline-block is required for it, because the pulse is a box-shadow ring and an inline box does not paint one predictably. */ /* Elec 2026-08-16: "can its background filled to? tho the opacity could drop for ring and back fill." So this one gets its OWN keyframes rather than the shared dateBeatStrong — the ring and a background wash breathe together, both at 0.13 instead of the ring's 0.208. Kept at the 2.6s page tempo; only intensity differs, which is the standing rule. ⚠ dateBeatStrong is deliberately untouched: Book & Pay, the date box and the guests box all share it, and this was meant to change one number. */ .filter-count .fc-amt { font-size:1.06rem; font-weight:700; color:var(--gold); letter-spacing:0.01em; display:inline-block; border-radius:var(--radius-sm); padding:0.02rem 0.3rem; animation:amtBeat 2.6s ease-in-out infinite; } /* Elec 2026-08-16: "× All dates" rests at 70%, eases up to full on hover, and gives a quick double flash on click as the dates clear and the centre calendar returns. No underline. */ .date-clear { text-decoration:none; opacity:0.7; transition:opacity 0.35s ease; } .date-clear:hover, .date-clear:focus-visible { opacity:1; } .date-clear.flash { animation:clearFlash 0.42s ease-in-out; } /* Elec: faint echo of the pet checkbox on the right of the Guests box — unchecked and quiet by default, gold and checked once a pet is coming. */ #gpBtn { position:relative; padding-right:2.3rem; } #gpBtn::after { content:"\2610\00A0\1F43E"; position:absolute; right:0.6rem; top:50%; /* Elec 2026-08-16: "increase opacity on faint checkbox and pet in guest box" — 0.32 → 0.55. The gold ON state (0.95) is untouched, so the off→on jump is smaller but still clearly a state change. */ transform:translateY(-50%); font-size:0.72rem; opacity:0.55; letter-spacing:0; } #gpBtn.gp-pet-on::after { content:"\2611\00A0\1F43E"; opacity:0.95; color:var(--gold); } /* Elec: the Stay dates box carries the same emphasis as Guests — once dates are chosen it used to dim to gold-line while Guests stayed full gold. The border now stays bright (the pulse continues too, softer). */ .date-field.has-dates { border-color:var(--gold); } /* PET LOCK visual (Elec): the Pet Friendly chip while a pet rides the search. 2026-08-23 (Elec: "the lock icon leaves the boarder of the chip", freeze-band 127px chips): measured text+lock at 111px in 112px of inner space — on the border. The LOCKED state alone tracks slightly tighter (0.09->0.045em frees ~7px on 12 caps, invisible at 600 weight) and the lock drops to 0.6em with an nbsp gap — glyph now clears the border with real margin at every band. */ .filter-btn.locked { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.22); cursor:default; letter-spacing:0.045em; } .filter-btn.locked::after { content:"\00a0\1F512"; font-size:0.6em; } /* Engine footer: one slim strip, hidden below 1280 (the site footer serves there). */ .engine-footer { display:none; } @media(min-width:1280px) { .engine-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.35rem 4vw; font-size:0.75rem; color:var(--sage); border-top:1px solid var(--gold-line); background:rgba(5,29,64,0.97); } .engine-footer a { color:var(--sage); text-decoration:none; } .engine-footer a:hover { color:var(--gold); } } /* GROUP 4: label row over the date box — "Stay dates" left, "× All dates" right. Elec: the clear must cap at the DATE BOX's right edge (265px = the date-field's width), not run on above the guest box. */ .fb-datelabelrow { grid-column:1; grid-row:1; display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; width:265px; } /* Elec (final, after seeing both): the gold bar IS wanted beneath the headers, above the columns — full width, solid, no fade. Plus "a little more padding above and below" it (padding-bottom = above the bar). */ /* ⚠ LONGHANDS, deliberately: `border-bottom:1px solid var(--gold)` is a shorthand containing var(), which Chrome keeps as a pending-substitution value — that silently beat the higher-specificity fade rule below and cost a debugging round. Do not collapse these back into the shorthand. */ .filter-bar { top:56px; padding:0.1rem 4vw 1.7rem; border-image:none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#C9A96E; } /* ⚠ NO transition on border-bottom-color: a transition outranks even !important in the cascade, and one here pinned the bar to full gold — inline !important could not move it. Cost a long debugging round. */ /* Elec: the gold bar fades while the calendar is open, the way the header above it does. Declared AFTER the rule above so it isn't out-ordered. */ body.dr-open .filter-bar { border-bottom-color:rgba(201,169,110,0.16); } /* ⚠ THIS is the rule that actually wins — the bar always carries .has-dates, so padding set on the bare .filter-bar above never applied. Header gap and the space above the gold bar must be set HERE. */ .filter-bar.has-dates { padding:0.1rem 4vw 0.85rem; row-gap:0.35rem; } @media(min-width:1280px) { .filter-bar { position:static; top:auto; } } /* ══ Elec 2026-08-16: the date/guest GROUP ("Stay dates" label + date box + guests box) keeps its internal layout and spacing, but sits CENTRED OVER THE LEFT COLUMN. The nav/logo above is untouched. Mechanics: grid column 1 is widened to exactly the left column's track (--col-left) and the bar's LEFT padding is dropped to 0, so the track and the list column share an origin; the datecell then centres its own group inside it. The label row is NOT centred on the group — it must stay flush with the DATE BOX's left edge (group 4 rule: "× All dates" caps at the date box's right edge), so it takes the same computed offset by hand. The date box shrinks 265 → 190 because the group could not otherwise fit a column this narrow — Elec: "boxes shrink in width if necessary". ⚠ --fb-date-w drives BOTH the date field and the label row. Change it in one place only; they are coupled by the rule above. ══ */ @media(min-width:1280px) { .filter-bar.has-dates { /* --fb-guest-w was 120px until the caps treatment: "GUESTS" tracked at 0.26em measures 129px, so the button overran its own variable and every figure derived from it drifted — the "× All dates" clear ended up 4px past the date box's right edge, breaking the group-4 rule. The variable now matches what the widest guests label actually measures. ⚠ If that label ever gains words, re-measure it here. */ --col-left:26vw; --fb-date-w:190px; --fb-guest-w:130px; --fb-gap:0.6rem; --fb-group-w:calc(var(--fb-date-w) + var(--fb-gap) + var(--fb-guest-w)); /* Elec 2026-08-16: "stretch dates and guests boxes to take up width remaining over left column, by at least 50% of what's remaining." --fb-fill is that share; the two boxes split it evenly, so they grow with the window instead of sitting fixed in a widening column. The leftover is small at 1280 (~13px) and large on a wide screen (~180px at 1920), which is where it was visible. */ --fb-fill:0.5; /* How far the amenities group rises into the nav's empty middle band. Elec: "the top row of amenities split should all land in top nav header space. not elongating the row to expand entire 2nd header." 81px lands the first chip row at 29→62, i.e. exactly inside the 62px nav band and level with the wordmark, with the title above it at 20→40. (76px left the row 5px proud of the boundary — measured.) ⚠ The second row cannot also clear the band: the row pitch is 35px and the nav is 62px tall, so with row 1 inside it, row 2 necessarily starts around the boundary. Both grounds are the same rgba(5,29,64,0.97), so that edge does not read as a seam. */ /* ⛑ RE-AIMED (Elec: "that kinda got the idea but still looks bad.. and no hard seem"). Hugging the nav boundary was the wrong target. The anchor is now the LAYOUT: the BOTTOM chip row lines up with the date and guests boxes, the top row sits a clear gap above it, the title a clear gap above that — three evenly spread lines using the vertical room rather than cramming against an edge. Title and chips take SEPARATE lifts because they have to open up relative to each other, not travel as one block. ⚠ Both stay negative margins, so the bar's height — and with it the GOLD BAR at its foot — does not move: the chips' contribution to grid row 2 stays under the 35px datecell either way. */ /* 47px, measured in two passes (64 → 53 → 47): it lands the BOTTOM chip row on 90, the exact top of the date and guests boxes, which is the anchor Elec named. The lift does not translate 1:1 into movement — 64→53 moved the row 5px, not 11 — because shrinking the negative margin also changes what the chips contribute to the grid row. Tuned by measuring, not by arithmetic. */ --fb-lift:44px; --fb-lift-title:84px; /* Inset from the centre column's sides. Used by BOTH the chips and the title, which is exactly what puts the title over the "All" chip. */ --fb-chip-inset:22px; --fb-slack:calc((var(--col-left) - var(--fb-group-w)) * var(--fb-fill)); --fb-date-stretch:calc(var(--fb-date-w) + var(--fb-slack) / 2); --fb-guest-stretch:calc(var(--fb-guest-w) + var(--fb-slack) / 2); --fb-group-stretch:calc(var(--fb-group-w) + var(--fb-slack)); /* The gap the STRETCHED group leaves at the viewport's left edge. Elec 2026-08-16: the count/from-price block over the map mirrors it on the right — "justified to the right matching the margin width as stay dates group has to the left side". One value, both sides, and it halves as the boxes take their share so the mirror still holds. */ --fb-edge:calc((var(--col-left) - var(--fb-group-stretch)) / 2); /* THREE tracks matching the columns below: list | centre | map. ⚠ --col-centre must stay in step with .browse-split's middle value (42%). They are separate declarations of the same layout. */ --col-centre:42vw; grid-template-columns:var(--col-left) var(--col-centre) 1fr; /* ⚠ column-gap MUST be 0 here. .filter-bar.has-dates carries a 1.5rem column-gap from browse.css, and with explicit tracks that gap pushes track 2 off the centre column below — measured 24px adrift, chips at 357→895 against a centre column of 333→871. The tracks only line up with the columns when nothing sits between them. */ column-gap:0; padding-left:0; padding-right:var(--fb-edge); } /* Elec 2026-08-16: "amenities filter group should break into 2 lines centered and spaced to fill area above central column." A 4-column GRID, not a wrapping flex row: wrapping would break wherever the chip widths happened to run out (3/5 or 5/3 depending on the label lengths), while this guarantees 4 + 4 whatever the words are. justify-items keeps each chip its own natural pill width and spaces them evenly across the track rather than stretching them edge to edge. */ .filter-bar.has-dates .fb-chips { grid-column:2; grid-row:2; padding-right:0; /* ⛑ Elec, superseding the per-column rule one round earlier: "make all chips equal in width to the largest width of the group". So `1fr` — four equal tracks — rather than `auto`, which sized each column to its own widest chip. `stretch` then fills every track, so all eight chips are one width. ⚠ Equal-to-the-widest does not fit at the old proportions: four 125px chips + gaps + the 22px insets came to 544px in a 538px track. The chips' side padding drops 0.72 → 0.4rem so the widest LABEL ("Pet Friendly", ~102px of text) still clears the resulting track with room to spare — the width now comes from the track, not the padding, so the padding only has to avoid forcing an overflow. */ justify-content:space-between; justify-items:stretch; display:grid; grid-template-columns:repeat(4,1fr); /* Elec 2026-08-16: "tighten the chip row gap" — row gap 0.4 → 0.15rem. Column gap untouched; it is what keeps the two rows reading as one block rather than a grid of buttons. */ /* Elec: "add padding back in between the two rows of chips" (9px), and "maintain a padding from the sides of the column too, bringing all chips proportional back toward center and closer relatively to each other horizontally while seperating vertically" — the inset does both: it pulls the block in from the column edges AND, because space-between then has less room to spread into, closes the gaps between chips. Chip side padding is trimmed 1.05 → 0.8rem so the inset is affordable; the four columns total 504px in a 538px track, which left almost nothing to give. */ row-gap:9px; column-gap:10px; align-items:center; padding-inline:var(--fb-chip-inset); /* Elec 2026-08-16: "padding between amenities header and first row can drop too." Done as a negative margin on the chips, NOT by cutting the bar's row-gap: that row-gap is shared with track 1, where it sets the space between "Stay dates" and the date box, which is tuned. */ margin-top:calc(-1 * var(--fb-lift)); } /* ── Elec 2026-08-16: "should have moved further up overlapping and covering empty space in nav header above. Title should stay right justified above chips which remain centered." The lift is a NEGATIVE MARGIN, not `top`: it moves the group up AND gives the height back. Row 2 is sized by max(datecell 37px, chips), so once the chips' contribution drops below 37px the bar loses the whole 32px the second chip line cost. `top` would have moved them and left dead space behind. Row 1 is sized by the date label, so lifting the title costs nothing there either. ⚠ The bar must OUTRANK the nav or the lift is invisible: #nav is sticky at z-index 100 over a 0.97-opaque ground, and .filter-bar's own backdrop-filter traps its children in its stacking context — so the bar itself has to be raised, not the children. */ /* ⚠ `top:0 !important` — and the !important is earned, not lazy. browse.js SETS `style.top` on this element at runtime (the sticky offset; the CSS `top:82px` is only its pre-JS fallback). Measured here as an inline `top:63px`. While the bar was position:STATIC that inline value was inert; making it relative activated it and dropped the bar 63px below the nav while .browse-split stayed in flow and overlapped it (bar 125→202, split from 139). A plain `top:0` cannot beat an inline style. The offset is still wanted below 1280, where the bar really is sticky — which is why this is scoped to this media block. */ .filter-bar.has-dates { position:relative; top:0 !important; z-index:101; } /* Elec: "move title to left side of chip row, above the all option." Same inset as the chips, so its left edge and the "All" chip's left edge are the same number rather than two values that look aligned. */ .filter-bar.has-dates .fb-labelrow { grid-column:2; grid-row:1; justify-content:flex-start; padding-inline:var(--fb-chip-inset); margin-top:calc(-1 * var(--fb-lift-title)); } /* 0.4rem: with equal 1fr tracks the chip's WIDTH no longer comes from its padding, so this only has to be small enough that no label forces the track wider than its share. (History: 0.8rem overran the right inset by 6px; 0.72rem fixed that but could not survive equal widths.) */ .filter-bar.has-dates .fb-chips .filter-btn { padding-left:0.4rem; padding-right:0.4rem; } /* The count leaves the label row and takes the map track on its own. */ .filter-bar.has-dates .filter-count { grid-column:3; grid-row:1; } /* Elec 2026-08-16: "increase spacing between guest support button in header and properties text beneath" — measured 5px, now 16px. Nudged on the count alone (it is already position:relative, and .fc-low hangs off it at top:100%, so both move together) rather than on the bar padding: the page is height-locked at this width, so padding here comes straight out of the columns, and the centre's quote state measures 0 overflow with nothing to give. ⚠ Trade-off: the count now sits 11px below the "Stay dates" / "Amenities filter" line instead of on it. */ .filter-bar.has-dates .filter-count { top:11px; } .filter-bar.has-dates .fb-datecell { justify-content:center; gap:var(--fb-gap); } /* Elec 2026-08-16: "the text in both dates and guest boxes in header should match the all caps font and style of 'stay dates'." One rule reaches both — the guests button carries .date-field as well as .gp-field. Size and colour are deliberately NOT taken from the label: at 0.72rem sage the fields would read as captions rather than the controls they are. Face is already the same (Inter/var(--body)). */ /* Elec 2026-08-16, in three steps that land here: caps like "Stay dates", then "lower size and opacity slightly", then "make it match that of the amenities filter boxes fonts" — which supersedes the first two on type. These are .filter-btn's exact values (browse.css / the inline copy): 0.78rem, weight 600, 0.09em tracking, uppercase. Both fields take the same size, so the old step between the date line and the guests line is gone by intent, not by accident. ⚠ COLOUR IS THE ONE THING NOT TAKEN. Measured, not assumed: the chips compute to FULL parchment rgb(245,240,232) here — .filter-btn declares var(--sage) but the clarity pass overrides it — while these stay the same parchment at 0.82 alpha, which is the "lower opacity" he asked for one message earlier. So the dimming is the only difference left between a field and a chip. Specificity 0,3,0 so .date-field.has-dates cannot take the colour back. */ .filter-bar.has-dates .date-field { font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:rgba(245,240,232,0.82); } .filter-bar.has-dates .date-field { min-width:var(--fb-date-stretch); } .filter-bar.has-dates .gp-field { min-width:var(--fb-guest-stretch); } .filter-bar.has-dates .fb-datelabelrow { width:var(--fb-date-stretch); margin-left:calc((100% - var(--fb-group-stretch)) / 2); } } /* Calendar field stays the loudest control but on a shorter leash */ /* ══ ≥1280px: the engine locks to the viewport — header + filter bar + three panes fill the screen exactly. NO page scroll, NO scroll on the center or map columns (list keeps its own). Trailing content is gone; the footer only exists below 1280 where the page still flows. ══ */ /* ⚑ WIDENED 2026-08-17 (1280 → 1025) so the LAPTOP BAND can show the booking pane. Elec's reading in the work record: "two panes, list and booking, with the map behind a button." The booking pane's whole interior — the deck, its two panes, the trust strip, the quote typography — is defined once, below, and now applies from 1025 up instead of being restated for a second band. ⚠ WHAT MUST STAY ≥1280 IS NESTED IMMEDIATELY BELOW, and it is exactly the things that assume THREE columns and a height-locked page: the viewport lock, the 3-column grid, and the list column's own scroll. Below 1280 the page flows and scrolls normally, which is what the narrow bands need. The laptop band's own column layout lives in engine-responsive.css. */ @media(min-width:0px) { /* ⚑ 1025 -> 768, 2026-08-23 (Elec: extend the detail overlay to tablet). ⚑ 768 -> 0, 2026-08-24 (Elec: the overlay reaches the PHONE now — same audit logic: without these the phone modal renders raw). The booking pane INTERIOR (deck, tabs, quote type, trust strip) is defined once here; at tablet .browse-detail used to be display:none so these were inert, and the new overlay rendered raw - black tab blobs, lost typography, modal overflowing. AUDITED before widening: all 63 top-level selectors in this block are .browse-detail-scoped except 3 card-price rules, which the tablet band re-declares in engine-responsive (loads later, so it still wins) — the PHONE card blocks in engine-responsive load later too and were screenshot-checked after the 2026-08-24 widening. The three-column geometry + viewport lock stay nested at >=1280 below. */ /* ⚑ `and (min-height:620px)` added 2026-08-17. The lock is correct on a desktop and wrong on a short viewport — a laptop at 150% browser zoom, a phone held sideways — where locking the page means content has nowhere to go and cannot be reached at all. Below 620px tall the page simply flows and scrolls; engine-responsive.css supplies the fallback column layout. */ @media(min-width:1280px) and (min-height:620px) { html, body { height:100%; overflow:hidden; } body { display:flex; flex-direction:column; } body > footer { display:none; } main#main { flex:1; min-height:0; display:flex; flex-direction:column; } /* Center column is the WIDEST of the three — it is the heart of the engine (calendar + booking flow). */ .browse-split { flex:1; min-height:0; display:grid; grid-template-columns:minmax(270px,26%) minmax(0,42%) minmax(0,32%); } /* Elec 2026-08-16: left column +2% ("grow in width a little") so the date/guest group can centre over it; the 2% comes from the MAP, not the centre — the centre's width is what keeps quote-state overflow at 0. ⚠ Keep --col-left in the filter-bar rule below in step with this. */ .browse-section { position:static; top:auto; height:100%; overflow-y:auto; padding:0.7rem 0.7rem 0.9rem 1vw; } /* The map column only exists at three panes; in the laptop band the map moves behind the Map button (engine-responsive.css). */ .browse-map-panel { position:static; top:auto; height:100%; border-left-width:2px; } } /* Elec 2026-08-16: the centre modal is a FIXED height that fills the column, with the gap under the gold bar and the gap above the footer strip EQUAL. Top and bottom padding are therefore the same 0.7rem — they were 0.7 / 0.9, so the modal sat 3px closer to the footer than to the bar. */ .browse-detail { position:relative; top:auto; height:100%; overflow:hidden; padding:0.7rem 0.9rem; border-left:none; } /* Elec: no divider between the list and centre columns */ /* The modal takes the pane's content box exactly, instead of growing to its own content and being clipped by the pane. Measured before: content 638px inside a 550px pane, i.e. 99px of it — Book & Pay included — was simply cut off at short viewport heights. */ .browse-detail .bd-modal { height:100%; box-sizing:border-box; position:relative; display:flex; flex-direction:column; } .browse-detail .modal-header { flex:0 0 auto; } /* ══ THE DECK (Elec 2026-08-16) — two panes in ONE modal, like the apex site's modal, stacking on the z-axis instead of swapping. "the details button will activate the other pane, which i'd like to look like its hiding behind the book pane… where the receipt/book tab is more right oriented, the details will be more left oriented, both having the same background… leaving an uncovered strip on either side that still shows the other tab but somewhat transparent or obscured." HOW THE STRIP WORKS, because it is not obvious from the numbers: each pane is (100% − strip) wide and anchored to its OWN side — Book right, Details left. They overlap across the middle, so whichever is on top leaves exactly one strip of the other showing at the opposite edge. No clipping, no masks; the geometry does it. The inactive pane is dimmed, blurred and scaled back TOWARD ITS OWN SIDE (transform-origin), so it reads as sliding behind rather than shrinking in place. */ .browse-detail .modal-body.bd-deck { /* Elec: "increase the size of the visible strip to each side by 50%" */ --deck-strip:69px; flex:1 1 auto; min-height:0; position:relative; padding:0; overflow:hidden; } .browse-detail .bd-deck .bd-pane { position:absolute; top:0; bottom:0; width:calc(100% - var(--deck-strip)); display:block; box-sizing:border-box; padding:0.8rem 1rem 0.9rem; background:var(--pine); transition:transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out), filter 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); will-change:transform, opacity; } /* Each pane's INNER edge carries the boundary line — the seam the other pane appears to slide behind. */ /* Elec 2026-08-16: boundary lines 1px → 2px — they are the seam the other pane slides behind, so they carry more weight than a hairline. */ /* Elec 2026-08-16: "would like curve on top of added vertical boundary line" — the boundary now turns a corner where it meets the header instead of ending square against it, so the line reads as continuing round rather than being cut off. Radius echoes the tab flare (16px). Each pane curves on its OWN boundary side only. */ .browse-detail .bd-deck .bd-pane-book { right:0; transform-origin:100% 50%; border-left:2px solid rgba(201,169,110,0.30); border-top-left-radius:16px; } .browse-detail .bd-deck .bd-pane-details { left:0; transform-origin:0% 50%; border-right:2px solid rgba(201,169,110,0.30); border-top-right-radius:16px; } /* Inactive: behind, quiet, and untouchable. Elec: "somewhat transparent or obscured, keeping it from feeling distracting and more intriguing and mysterious." */ /* ★ Elec 2026-08-16: "lets try clearing it up, use the photo peak as enticement." WAS opacity 0.30 + blur(1.6px) + saturate(0.72) — which is what made the strip read as bleed-through rather than depth: at 30% behind a blur, the photograph lost its subject while stray words ("6 GUESTS", "Hot Tub") stayed just legible enough to look like a fault. Measured: the pane is offset 69px, so that strip is all the guest sees. Reversed deliberately — the blur goes, opacity comes up, saturation returns most of the way. The strip is now a photograph of the home behind the price, which is the enticement he asked for; it reads as a second card in a deck rather than a ghost. Saturation stays a touch under 1 so it still sits behind the active pane. */ .browse-detail .bd-deck .bd-pane { z-index:1; opacity:0.58; transform:scale(0.955); filter:saturate(0.92); pointer-events:none; } /* Active: forward, full strength, and the shadow is what sells "on top". ⚑ Elec: "book needs to be more opaque, can see through it too much to actually read." CAUSE, measured not guessed: `--pine` is rgba(54,66,83,0.40) — the pane ground was only 40% opaque, so the pane behind genuinely showed through the text. #182E51 is that exact colour composited over the page ground (0.4·#364253 + 0.6·#0A2247), so the tone does not change; it just stops being see-through. The INACTIVE pane keeps the translucent --pine, which is what makes the strip read as a ghost behind rather than a second solid card. */ /* ⛑ 2026-08-28 (Elec: "the booking page is ugly here the background is wrong, solid block of color. makes me cringe" -> after a first fix aimed one layer too low, "still flat slab to me and i reloaded"; then "no date booking page"). THE PAINTER IS HERE, not on .bd-modal. Probed on his own screen: the topmost painted ground under the sheet's text is `.tab-pane.bd-pane` at an OPAQUE rgb(24,46,81) - it covers the modal entirely, so the ground I gave .bd-modal was never visible. Measure the element that actually paints before styling one that merely contains it. ⚠ THE OPACITY IS A CONSTRAINT, NOT AN OVERSIGHT - see the note above: --pine at 40% let the pane behind show through the text ("can see through it too much to actually read"), and #182E51 is precisely --pine composited over the page ground, chosen so the tone did not shift. So the base colour STAYS and stays opaque; the depth is layered on top of it: a lift at the head where the title and CTA sit, a settle along the bottom edge, and the page's own mottle grain so the sheet reads as the same material as everything around it. Tone at the midpoint is unchanged - this adds light and grain, it does not recolour. */ .browse-detail .bd-deck .bd-pane.active { z-index:2; opacity:1; transform:scale(1); filter:none; pointer-events:auto; background-color:#182E51; background-image: linear-gradient(168deg, rgba(32,70,124,0.55) 0px, rgba(24,46,81,0) 340px), linear-gradient(0deg, rgba(5,17,38,0.55) 0px, rgba(5,17,38,0) 280px), var(--mottle); background-repeat:no-repeat, no-repeat, repeat; box-shadow:0 0 34px rgba(5,29,64,0.55); } /* ⚠ The panes are display:block here, overriding .tab-pane's display:none — the whole point is that the hidden one is still rendered. */ .browse-detail .bd-deck .tab-pane { display:block; } /* Details is the long pane; it scrolls inside its own box now that it is absolutely positioned and the outer column cannot scroll it. */ .browse-detail .bd-deck .bd-pane-details.active { overflow-y:auto; overscroll-behavior:contain; } /* Elec 2026-08-16: "might as well put a scroll on book too" — unparking the item held since the quote-state overflow was found. The Book pane was deliberately LOCKED (only Details scrolled), which is why Book & Pay clipped off the bottom on viewports under ~780px tall: the content had nowhere to go. Same treatment as Details; `overscroll-behavior:contain` keeps a scroll that reaches the end from chaining out to the page behind, which is what would otherwise break the locked-viewport layout. */ .browse-detail .bd-deck .bd-pane-book.active { overflow-y:auto; overscroll-behavior:contain; } /* Elec 2026-08-16: "adjust mini footer height as relative to bottom of pane, keeping spacing and padding even with as much space below footer bar above and bottom border below." The trust block carries the gold rule ("footer bar") plus the two mini lines; it now sits AGAINST the modal's bottom instead of wherever the quote happens to end — measured 158px of dead space below it before. --bk-foot-gap is used twice on purpose: once as the space under the rule, once as the drop to the modal's bottom border, so the two cannot drift apart. Side insets match .modal-body's 1rem padding. ⚠ Absolute, not a flex push: the alternative meant turning .bd-modal, .modal-body, .tab-pane and one anonymous wrapper into a flex chain, four structural changes to move one element. It stays hidden with its pane on the Details tab, because a hidden ancestor is not rendered. */ /* ⛑ ABSOLUTE PIN RETIRED 2026-08-23 (Elec: "on book now tab, we need to add scrollability.. seems like some items on the tab are aligned oddly and causing overlap instead of scrolling" — screenshot showed the trust line striking through BOOK & PAY at a short pane). The pin put the footer at the modal's bottom REGARDLESS of the quote's height, so once content outgrew the pane the footer lay on top of it. Now the sticky-footer-in-scroll-container pattern: the pane is a flex column and the trust block pushes to the bottom via margin-top:auto — bottom-anchored when space allows (the 08-16 dead-space fix preserved), in flow and scrolling with the content when it doesn't (his scrollability ruling). */ .browse-detail .bd-deck .bd-pane-book.active { display:flex; flex-direction:column; } .browse-detail .bk-trust { --bk-foot-gap:12px; position:static; margin-top:auto; padding-top:var(--bk-foot-gap); padding-bottom:var(--bk-foot-gap); } /* GROUP 4 (Elec): Details tab may scroll; Book tab + calendar stay locked. */ .browse-detail.bd-scroll { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--gold-line) transparent; } /* Elec: map divider doubled to 2px. ⛑ MOVED 2026-08-17 into the nested ≥1280 block at the top of this media query — it belongs with the three-column geometry, not with the deck. It is declared in ONE place; do not restate it here. */ /* Elec: white text in the LIST + CENTER columns — clearer, slightly larger, stronger. Brighter inks over the navy ground, a step up in size/weight on the smaller runs, and antialiasing on both panes. */ .browse-section, .browse-detail { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .browse-section .card-price { color:#F7F2E8; position:relative; } /* Elec: a faint "starting at" sits just above the nightly price, tucked slightly behind it — below the card's internal gold rule, never touching it. The price keeps its own layer so it stays crisp. */ /* Elec 2026-08-16: it should sit "almost centering above the '/' in /night", a hair lower and slightly more opaque. ⚠ The anchor MOVED from .card-price to the : prices on screen run $84 → $313, so the slash is ~10px further right on a 3-digit card than a 2-digit one and a fixed offset can only be right for one of them. strong's right edge IS the slash's left edge, so left:100% + half a slash width, centred by translateX, tracks every card. Sizes are re-expressed against strong's 16.32px em (was card-price's 13.12px) so the label's own rendered size is unchanged at 12.86px. */ .browse-section .card-price strong::before { content:"starting at"; /* ⚠ em in top/left on a pseudo resolves against the PSEUDO's own font-size (12.86px), not strong's — the first pass read -0.83em as 10.7px and dropped the label 7.5px, not a hair. -1.30em puts it 1.5px below its old position, measured. */ position:absolute; left:calc(100% + 0.15em); top:-1.30em; transform:translateX(-50%); font-family:var(--display); font-style:italic; font-weight:400; font-size:0.788em; letter-spacing:0.03em; white-space:nowrap; color:rgba(245,240,232,0.42); pointer-events:none; } .browse-section .card-price strong { position:relative; z-index:1; } .browse-section .card-footer { padding-top:1.15rem; } /* room for the label under the gold rule */ .browse-detail .modal-title { color:#FFFFFF; } .browse-detail .bk-ctl-label { color:#FFFFFF; } .browse-detail .bk-ctl-sub { font-size:0.72rem; color:#CDD4DA; } /* GOLD, per Elec 2026-08-28 ("the 'select your date..' line should be the all cap font in gold"). This rule is why the first attempt came out pale: booking.css sets the hint gold at `.bk-hint` (0,1,0) but this one is `.browse-detail .bk-hint` (0,2,0), so it won on specificity no matter that booking.css loads later. Fixed HERE, at the rule that actually decides the colour, rather than stacking a louder selector on top of it. */ .browse-detail .bk-hint { color:var(--gold); } .browse-detail .detail-summary { font-size:0.92rem; color:#DEE3E8; } /* Elec (Book tab quote): the fee DESCRIPTIONS and their PRICES sit tight together as a right-grouped receipt — dead space moves to the LEFT of the description column. Prices keep a neat aligned column. */ .browse-detail .bk-q-line { justify-content:flex-end; gap:2.2rem; font-size:0.78rem; color:#FAF7F0; margin-bottom:0.3rem; } .browse-detail .bk-q-line span:last-child { min-width:5.2rem; text-align:right; } .browse-detail .bk-q-total .val { min-width:5.2rem; text-align:right; font-size:1.3rem; } /* Elec: description lines share one LEFT-justified start (fixed label column inside the right-grouped receipt). */ .browse-detail .bk-q-line span:first-child { min-width:13rem; text-align:left; } .browse-detail .bk-q-total .lbl { min-width:13rem; text-align:left; } /* Elec: Guests/Pets rows move over the same way but sit a tab (~2rem) further LEFT than the quote receipt below — a header column. */ .browse-detail .bk-ctl { justify-content:flex-end; gap:2.2rem; border-top:none; border-image:none; padding-top:0.3rem; padding-bottom:0.3rem; } /* 13.9rem = 15rem − 18px: lines the Guests/Pets labels up with the "B" glyph of BOOK NOW, not the button's border edge (measured). */ /* Elec 2026-08-16: "'Guests: up to (max)' single line even with countable clicker opposite it. Same with 'Pets: fee may apply'." The label and its sub-line were stacked, making each control 60px tall for one number. They now sit on ONE baseline with the colon added in CSS, so the copy in booking.js is untouched and the stay pages that share it are unaffected. */ /* ⛑ 13.9rem → 11.9rem (Elec 2026-08-16): the Guests/Pets label column started 32px LEFT of the quote's label column below it — measured 637 vs 669 — because both rows are right-anchored and this one was 2rem wider. Trimming exactly that 2rem puts both starts on 669. The old 13.9rem existed to line these labels up with the "B" of BOOK NOW; that button moved into the modal header, so the reference is gone and the quote receipt below is the thing to align to now. */ .browse-detail .bk-ctl > div:first-child { min-width:11.9rem; text-align:left; display:flex; align-items:baseline; gap:0.35rem; } .browse-detail .bk-ctl-label::after { content:":"; } /* Elec: the gold total-rule and the Book & Pay button match the RECEIPT width exactly — description start to price-column end (13 + 2.2 + 5.2). */ /* Elec: the gradient "gold bar" above Total reads oddly — make it a plain rule like the one above the footer, a little darker/more evident than that one (footer 0.35 → 0.55), at the receipt width. */ .browse-detail .bk-q-total { justify-content:flex-end; gap:2.2rem; width:20.4rem; margin-left:auto; margin-top:0.45rem; padding-top:0.45rem; border-image:none; border-top:1px solid rgba(201,169,110,0.55); } .browse-detail .bk-reserve { display:block; width:20.4rem; margin-left:auto; margin-top:0.45rem; padding:0.7rem; background:rgba(201,169,110,0.15); } /* Elec 2026-08-16: "'have questions..?' line should fall directly under the book and pay button." It was full pane width (570px) and centred across all of it, while Book & Pay is the 20.4rem receipt width — so it read as a separate element floating below, not as that button's footnote. Same width, same right anchor, same 0.45rem rhythm as every other block gap in the quote. */ .browse-detail .bk-inquire { display:block; width:20.4rem; margin-left:auto; margin-right:0; margin-top:0.45rem; } /* Elec: "excess vertical spacing removed between and evened up throughout quote." One rhythm now: 0.3rem between receipt lines, 0.45rem between blocks (total rule, Book & Pay, the questions line). The Guests/Pets controls dropped from 8px to 0.3rem padding, which is the same unit — they were 60px tall each to show one number. */ /* Elec 2026-08-16: "shift the group slightly to the left by increasing padding on the right side of the group." Every row in the receipt is RIGHT-anchored — the fixed-width blocks by margin-left:auto, the flex rows by justify-content:flex-end — so one padding on their shared container moves all of them together and cannot disturb the spacing between them, which is the point. #bdBook is that container (the Book pane's wrapper); the Details pane is untouched. ⚑ The trust band does NOT move with it: it is positioned against the modal, not this wrapper, and it is centred rather than part of the right-anchored column. */ /* ⛑ Elec 2026-08-16: "center receipt in book pane." The receipt used to be right-anchored against the whole centre column and nudged left with a padding; now that the Book pane is its own box, it centres inside it instead. Every row switches from a right anchor to a centred one: margin-right:auto on the fixed-width blocks, justify-content:center on the flex rows. The padding-right that did the old nudge is gone — it would fight the centring. */ .browse-detail #bdBook { padding-right:0; } .browse-detail .bk-q-line, .browse-detail .bk-ctl, .browse-detail .bk-q-total { justify-content:center; } .browse-detail .bk-q-total, .browse-detail .bk-reserve, .browse-detail .bk-inquire, .browse-detail .bk-subtitle { margin-left:auto; margin-right:auto; } /* Elec 2026-08-16: subtitle above the receipt with "another faint solid gold line under it… same width as the line under lodging tax" — that line is .bk-q-total's border-top, so this matches it at 20.4rem. Fainter than that one on purpose (0.35 vs 0.55): he called this one faint and the total rule is meant to be the more evident of the two. ⚠ The 1.5rem right margin duplicates #bdBook's padding-right by hand. The subtitle is a SIBLING of that wrapper, not a child, so it does not inherit the shift that moves the receipt — without this the two would sit 24px out of line. Change them together. */ .browse-detail .bk-subtitle { /* ⛑ was `margin:0.1rem 1.5rem 0.75rem auto` — a right-anchored margin from when the receipt hung off the column's right edge. It is a SHORTHAND declared after the centring rule above, so it silently beat it and left the subtitle 62px right of the receipt it captions (measured 645 vs 583). Centred now, like everything it sits over. */ /* Elec 2026-08-16: "increase padding above subtitle in book pane to bring entire receipt a little further down" — 0.1 → 1.15rem, which moves the whole receipt with it since everything below stacks off it. */ width:20.4rem; margin:1.15rem auto 0.75rem; padding-bottom:0.45rem; text-align:center; font-family:var(--body); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); line-height:1.55; border-image:none; border-bottom:1px solid rgba(201,169,110,0.35); } /* Elec: "increasing size of booking direct and letter spacing to stretch the words out by a fair amount." Sized in em so it stays relative to the line it heads; 0.30em matches the page header's tracking, which is the widest setting anywhere on this surface. ⚠ Headroom checked, not assumed: "BOOKING DIRECT" at this size and tracking measures ~180px inside the 326px receipt box, so the stretch has room before it would wrap. */ .browse-detail .bk-subtitle strong { color:var(--parchment); font-weight:700; font-size:1.2em; letter-spacing:0.30em; } /* ⛑ Elec 2026-08-16: "background of book and pay is too much in hover state, change hover action to something more appropriate and similar to other effects already present." The fill jump 0.15 → 0.35 was doing all the work and read as a slab. The button already carries a 2px solid gold border and a gold fill at rest, so there is nothing left to "turn on" the way a chip's border turns on. The page's other grammar for warming an already-complete control is a BRIGHTNESS lift — the same move the filter labels and the date/guest fields use on hover. So: brightness does the work, and the fill steps only 0.15 → 0.20 to give it a little body. (History: 0.25/0.75 → 0.15/0.35 → this.) */ .browse-detail .bk-reserve { transition:background 0.18s, filter 0.18s; } .browse-detail .bk-reserve:hover:not(:disabled) { background:rgba(201,169,110,0.20); filter:brightness(1.12); } /* Elec: Book & Pay beats too once it's live — same heartbeat family as the search boxes, at the bright tempo since it IS the call to act. Disabled ("Select dates to continue") stays still. */ .browse-detail .bk-reserve:not(:disabled) { animation:dateBeatStrong 2.6s ease-in-out infinite; } /* Elec: mini footer centered. */ .browse-detail .bk-trust-mini, .browse-detail .bk-t-co { text-align:center; } /* ⛑ REMOVED 2026-08-16: `.modal-tab[data-bdtab='book'] { margin-left:auto; margin-right:16.4rem }` pushed Book Now across the body to sit over the Guests label. The tabs now live in the header beside the title, so that alignment has nothing to align to — left in place it would have thrown the pair 262px apart inside a 606px header. */ /* ══ FILE-TAB TREATMENT (Elec 2026-08-16): "drop its bottom border and extend its side borders down to the header gold bar, and the section of gold bar between the two extended sides of the active button would be removed… the inactive button would not have the bar removed." MECHANISM, because it is not a drawing trick: the gold bar is the HEADER's border-bottom, and in CSS paint order a child's background paints OVER its parent's border. So the active tab does not "erase" anything — it simply sits 2px lower than the bar (margin-bottom) and its own opaque ground, the same #182E51 as the active pane, covers the bar where it crosses. The inactive tab is transparent, so the bar shows straight through it and its tab stays closed. That also gives the swap for free: the background is already on a 0.28s transition, so the bar closes behind the leaving pane as it opens under the arriving one. */ /* Elec 2026-08-16: "increase padding in header to make for an even split" — 0.65 → 0.8rem, an even 12.8px, so the space above and below the title divides without the odd leftover pixel. The title's compensating margin below tracks it (see .modal-title). */ .browse-detail .modal-header { align-items:stretch; padding-top:0.8rem; padding-bottom:0; position:relative; } /* Elec 2026-08-16: the property name should sit with equal space above and below. It did not — measured 17px above, 7px below. CAUSE: the header's padding-bottom was set to 0 so the tabs could reach the gold bar, while padding-top stayed 0.65rem. `align-self:center` centres within the CONTENT box, so that asymmetry pushed the title half the top padding too low. A matching bottom margin is counted in the centring and cancels it exactly — without giving the header a bottom padding, which would lift the tabs off the bar again. */ .browse-detail .modal-title { align-self:center; margin-bottom:0.8rem; } .browse-detail .modal-header-right { align-items:flex-end; } .browse-detail .modal-header-right .modal-tabs { margin-bottom:0; gap:0.5rem; flex-wrap:nowrap; align-items:flex-end; } /* ⛑ Elec 2026-08-16: "notate the opacity discrepancy on nonactive." Correct, and it was mine: the flare arcs were changed to the BAR's solid #C9A96E last round while the inactive tab's own sides stayed at gold-line 0.35, so a faint outline ran straight into a solid curve. Both tabs now draw their outline in the bar's colour — they are all the same drawn line — and active vs inactive is carried by the FILL and the text instead, which is the difference that actually means something. */ /* ⛑ Elec 2026-08-16: "the side border lines continue to extend straight down even after curved section has made contact higher." CAUSE: the flare arc joins the side at --flare ABOVE the tab's bottom edge, but a CSS border cannot stop early — it ran the remaining 16px to the bottom, leaving a straight tail below the curve. FIX: the side lines are no longer borders. They are two 1px background gradients sized `100% - flare` tall from the top, so each line ends exactly where its arc begins and the curve carries on from there. border-top is kept for the tab's top edge and its rounded corners. */ /* ⛑ THE BORDER CONSTRUCTION IS GONE (2026-08-16). No border, no gradient side lines, no pseudo-element flares — browse.js paints one SVG path per tab and that path IS the outline and the fill. Everything below is just placement; the shape lives in paintTabShapes(). */ .browse-detail .modal-tab { border:none; background-color:transparent; background-image:none; margin-bottom:-1px; padding-bottom:calc(0.5rem + 1px); position:relative; z-index:1; } .browse-detail .mt-svg { position:absolute; top:0; height:100%; overflow:visible; pointer-events:none; z-index:-1; } /* Elec 2026-08-16: "make lines thicker" — 1 → 2px, and the HEADER BAR goes to 2px with it. A 2px tab outline running into a 1px bar would be a new mismatch of exactly the kind he has been catching all evening; the pane boundary lines are already 2px, so this puts every line on this surface at the same weight. */ .browse-detail .mt-svg path { stroke:#C9A96E; stroke-width:1; vector-effect:non-scaling-stroke; transition:fill 0.28s, opacity 0.28s; } .browse-detail .mt-outline { fill:var(--pine); } .browse-detail .modal-tab.active .mt-outline { fill:#182E51; } /* The closed base: drawn on the inactive tab, gone on the active one. */ .browse-detail .mt-base { fill:none; opacity:1; } .browse-detail .modal-tab.active .mt-base { opacity:0; } /* ⚠ background-COLOR, not the shorthand: `background:` would reset background-image and wipe the two gradient side lines above. */ .browse-detail .modal-tab.active { background-color:#182E51; border-color:var(--gold); z-index:2; } /* ── THE INACTIVE TAB READS AS *BEHIND* (Elec 2026-08-16). Three things the file-tab metaphor implies, rather than three taste guesses: 1. It has BODY, not emptiness — filled with the same translucent --pine as the pane behind, so it looks like the card back there rather than a hole in the header. 2. It SITS LOWER. Shorter by 3px with the tabs bottom-aligned, so its top edge falls below the active tab's — the way a back tab does. 3. It DIMS AS ONE PIECE. Opacity on the whole element, so outline, flare and label fade together. ⚠ This is deliberately NOT a fainter border colour: that is exactly the discrepancy Elec caught last round, where a faint outline met a solid flare at the join. */ /* ⛑ Elec 2026-08-16: "drop the height diff and rely on fill and dimming." The 3px shortening made the two tabs' side lines different lengths — 30px against 36px, since both lose the same 16px to their flare — and that mismatch read worse than the depth cue was worth. Same height now; "behind" is carried by the translucent fill and the 0.72 dim alone, which are the two cues that do not disturb the shared geometry. */ .browse-detail .modal-tab:not(.active) { background-color:var(--pine); opacity:0.72; transition:opacity 0.22s var(--ease-out), filter 0.22s var(--ease-out), color 0.22s, letter-spacing 0.22s var(--ease-out), background-color 0.28s; } /* Elec 2026-08-16: "make the tab text of the inactive tabs more reactive on hover to indicate their interactivity." The back tab COMES FORWARD rather than just changing colour — the same gesture the deck itself makes, so the hover previews what the click will do: it lifts out of its dim, brightens to parchment, and the label opens up a little. Faster (0.22s) than the 0.55s deck swap, because a hover should answer immediately while the swap is a considered move. ⚠ background-COLOR only. `.modal-tab:hover` in the base block uses the `background:` shorthand, which resets background-image — on hover that would erase the two gradient side lines and take the flare join with them. This rule is later and restores the colour without the shorthand. */ /* 🔴 `letter-spacing:0.13em` REMOVED 2026-08-16 (Elec: "both tabs still move or swell on hover and it moves things around.. no geometry here, only visual. geo is good in other places"). It was the whole bug, and it was not obviously geometric: the tabs are `white-space:nowrap`, so widening the tracking from 0.09em to 0.13em across ~7 uppercase characters at 12.48px grew the button by ~3.5px. That is the same ~4px that had been re-wrapping the property title and dropping the header 22px — the "wraps and jumps on hover" report. One tracking value, two symptoms. ⛑ It also survived a measurement that said hover changed nothing: the baseline was captured with the pointer already resting on the tab, so hover was being compared against hover. Move the pointer away first, or the test proves nothing. Hover is now purely visual — lift out of the dim, brighten, go parchment, warm the ground. Nothing that occupies space changes. */ .browse-detail .modal-tab:not(.active):hover { opacity:1; filter:brightness(1.18); color:var(--parchment); background-color:rgba(201,169,110,0.12); } /* ══ THE FLARE (Elec 2026-08-16: "i meant the flare out when meeting the header bar"). Where each side border reaches the gold bar it curves OUTWARD into it, the way a file tab splays into its shelf, instead of stopping square. Construction: a --flare-sized box sits just outside each bottom corner with its INNER corner rounded, so its border draws a concave quarter arc continuing the side line into the bar. The active tab additionally fills that box with the pane colour via a spread box-shadow — the standard inverted-corner recipe — so the flare is solid and the bar stays hidden right up to where the curve lands. The inactive tab gets the ARC ONLY, no fill: its tab is closed, so the gold bar must keep running underneath. Rounding present on both, as asked. */ /* ⛑ Elec 2026-08-16 round 2: "outer flares need work… also needed where side boundary meets back in to header bar back inward." TWO fixes, both visible in his screenshot: (a) RADIUS 10 → 16px. At 10 the arc turned too tightly to read as a flare — it looked like a hook hanging off the tab rather than the side sweeping into the shelf. A wider radius is tangent to the bar over a longer run, which is what makes it "meet back in". (b) ARC COLOUR is now the BAR's colour, not the tab's. It inherited the tab border, so the inactive tab's flare drew at gold-line 0.35 while the bar it joins is solid #C9A96E — the curve visibly died before it reached the line. The flare belongs to the bar; it should match the bar in both states. */ .browse-detail .modal-tab { --flare:16px; overflow:visible; } /* The tabs sit shoulder to shoulder, so the gap between them must clear two flares plus a little air — the SVG overhangs its button by --flare on each side. */ .browse-detail .modal-header-right .modal-tabs { gap:calc(2 * var(--flare, 16px) + 0.35rem); } /* Elec 2026-08-16: "the tops of the tabs should reach the top boarder that they fall just short of." Measured, not guessed: panel top 154, tab top 173 — a 19px shortfall, which is the header's own top padding holding them down. Pulled up by exactly that, so the tab tops meet the panel's top border and the shapes read as folder tabs cut into the edge rather than floating below it. Applied to the TABS ONLY (negative margin on the group) — moving the header's padding instead would drag the property title up with them. */ .browse-detail .modal-header-right .modal-tabs { margin-top:-19px; } /* explicit close of the >=1025 media block opened at ~L472 (2026-08-23) - browsers were auto-closing it at EOF, identical behavior, but the missing brace made every structural assert read +1 and hid real defects. */ }