/* Hotel Boreal — owner stylesheet. * * Loaded after the page's captured CSS when site.json sets `overrides_css`, so it wins on * equal specificity. Changes the owner makes after the port was accepted live belong here * rather than in the capture: the capture stays the record of what the source served, and * everything deliberate about our version sits in one small file. * * Every rule here must be a declared deviation in approved.json. Keep it that way. */ /* ========================================================================== Footer legal bar — "All Rights Reserved…" and the three policy links ========================================================================== Three defects, all measured on the built page, all in the same 30px-tall band: 1. NOTHING SPACES THE LINKS. The items are inline-block with margin 0 and padding 0, so the only thing between "Privacy Policy", "Terms and Conditions" and "Contact" is the whitespace text node in the markup: 4.0px at every width. Three links read as one run-on string, and the spacing is at the mercy of source whitespace — which is how removing two dead links from this bar left visible gaps behind. 2. THE LINKS FAIL CONTRAST. #CC3366 on the bar's #000000 ground is 4.23:1, under the 4.5:1 AA floor for body text. It is also nowhere in this site's palette — it is an Elementor default that came over with the template and clashes with the #26465C the rest of the site is built on. 3. HOVER HIDES THEM. The hover state darkens to #333366, which against black is 1.81:1. Pointing at a link makes it almost disappear. Whatever else a hover does, it must not do that. The fix keeps the bar recessive. This is the quietest element on the page and its job is to be legible and get out of the way, so: no separator glyph, no rule, no caps, no new typeface. Both colours are the site's own — #C9C4BF is in the brl-* layer already, and #FFFFFF matches the copyright line sitting opposite. Spacing is stated once, as a gap, instead of inherited from markup whitespace. */ .elementor-element-160f4489 .elementor-icon-list-itemsfg { display: flex; flex-wrap: wrap; justify-content: flex-end; /* 48px between links, 8px between rows once they wrap. There is room for it: at 1440 the copyright ends at x=440 and the bar's right edge is 1280, so 840px carries three links measuring 310.5px in total. Wide spacing is what keeps three short links from reading as one string without needing a divider glyph to do the work. */ gap: 8px 48px; } .elementor-element-160f4489 .elementor-icon-list-item { margin: 0; padding: 0; } .elementor-element-160f4489 .elementor-icon-list-item a { /* 12.13:1 on the bar's black ground, against 4.23:1 before. */ color: #C9C4BF; text-decoration: none; transition: color .18s ease; } /* Hover REVEALS. The state it replaces went to #333366 — 1.81:1 — so the link faded out exactly when someone pointed at it. White matches the copyright text opposite and is unambiguous at 21:1. The underline is offset so the descenders in "Privacy Policy" stay readable. */ .elementor-element-160f4489 .elementor-icon-list-item a:hover, .elementor-element-160f4489 .elementor-icon-list-item a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* The captured CSS ships no visible focus ring on these. Keyboard users need one, and on a black ground it has to be light. */ .elementor-element-160f4489 .elementor-icon-list-item a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .elementor-element-160f4489 .elementor-icon-list-item a { transition: none; } } /* Three breakpoints, each set by a measurement rather than a round number. The three links measure 310.5px together. >=1024 48px. The copyright and the links share one line and there is room: at 1440 the copyright ends at x=440 and the bar ends at 1280. 431-1023 36px. Still sharing a line, less of it — at 768 the links have ~443px, and 310.5 + 2x36 = 382.5 fits. <=430 20px. Here the source stacks the links BELOW the copyright, so they have the full content box, but it is narrow: 360px at 390 viewport, and 310.5 + 2x20 = 350.5 leaves 9.5px. At 36px they would need 382.5px and "Contact" would orphan onto its own row. Below ~350px they wrap however wide the gap, which is the right outcome — the 8px row-gap exists for exactly that. Centring is kept on the source's own breakpoint (767px, where Elementor's `elementor-mobile-align-center` takes over) rather than the gap's, so the links stay aligned the way the captured design aligned them. */ @media (max-width: 1023px) { .elementor-element-160f4489 .elementor-icon-list-itemsfg { gap: 8px 36px; } } @media (max-width: 767px) { .elementor-element-160f4489 .elementor-icon-list-itemsfg { justify-content: center; } } @media (max-width: 430px) { .elementor-element-160f4489 .elementor-icon-list-itemsfg { gap: 8px 20px; } } /* ========================================================================== Generated pages — /accessibility/ and /site-map/ ========================================================================== These two pages are built by tools/new_page.mjs, which clones the /term-condition/ capture and swaps its content. That is what gives them the right chrome, container and type scale for free. What it cannot give them is a rhythm for content the template never had: /term-condition/ is an unbroken run of

, so the captured CSS has a rule for paragraphs and nothing else. Measured on the built page, every heading and list came out at margin 0: H3 'Home' gap above 0px m=0px/0px UL gap above 0px m=0px/0px padding-left 40px, disc LI gap above 0px H3 'Stay' gap above 0px m=0px/0px A group heading with 0px above it and 0px below it is not a heading, it is a line of larger text. Proximity is the whole mechanism by which "Stay" claims the two links under it rather than the two above, and at equal spacing that mechanism is simply absent -- which is why the page reads as one packed column. Everything below follows from fixing that one thing: space above a group must clearly exceed space inside it. */ /* -- shared prose rhythm --------------------------------------------------- */ body.brl-page-site-map .elementor-element-d2dbcf2 h3, body.brl-page-accessibility .elementor-element-d2dbcf2 h3, body.brl-page-privacy-policy .elementor-element-d2dbcf2 h3, body.brl-page-term-condition .elementor-element-d2dbcf2 h3 { /* 28px Superior set solid on a 28px line-height clips nothing but reads tight; 1.2 is the smallest leading that lets the descenders sit. */ line-height: 1.2; } /* On /accessibility/ the sections are still flat siblings -- prose, not an index -- so the separation is stated as margin. 48/16 is the same 3:1 above-to-below ratio the site map gets from its grid. */ body.brl-page-accessibility .elementor-element-d2dbcf2 h3 { margin: 48px 0 16px; } body.brl-page-accessibility .elementor-element-d2dbcf2 h3:first-child { margin-top: 0; } body.brl-page-accessibility .elementor-element-d2dbcf2 p { margin: 0 0 16px; } /* A single column of 16px Roboto across the full 1160px container runs to ~150 characters. Capped at 72ch, which is inside the 80 the rest of the site sets. */ body.brl-page-accessibility .elementor-element-d2dbcf2 p { max-width: 72ch; } /* /privacy-policy/ and /term-condition/ (2026-09-15) read like /accessibility/: flat prose sections, same 48/16 rhythm and 72ch measure. They also carry lists, which the captured stylesheet has no rule for (the template was an unbroken run of

), so the list gets the paragraph's measure and spacing and a visible bullet. The "lead" lines (bold subheads inside a section) sit closer to what follows than to what precedes. */ :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 h3 { margin: 48px 0 16px; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 h3:first-child { margin-top: 0; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 p { margin: 0 0 16px; max-width: 72ch; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 p:has(> strong:only-child) { margin-top: 24px; margin-bottom: 8px; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 ul { max-width: 72ch; margin: 0 0 16px; padding-left: 1.25em; list-style: disc outside; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 li { margin: 0 0 8px; } :is(body.brl-page-privacy-policy, body.brl-page-term-condition) .elementor-element-d2dbcf2 a { text-decoration: underline; } /* -- /site-map/ ------------------------------------------------------------ */ /* Each group is one .brl-sitemap-group element (tools/new_page.mjs emits the wrapper) rather than an h3 and a ul that merely happen to be adjacent. That is what allows the separation to be stated once, as a grid gap, instead of being assembled out of sibling margins that have to cancel at every seam. Two columns, not one: six groups holding twelve short links down a 1160px column is a thin ribbon beside a lot of empty page, and the point of a site map is to be taken in at once. Two columns of 548px halve the height and put the groups side by side, where they read as a map of the site rather than a list of everything in it. One column below 900px, where 548 would not hold the longest journal title in two lines. */ body.brl-page-site-map .elementor-element-d2dbcf2 { display: grid; grid-template-columns: 1fr; gap: 48px 64px; align-content: start; } @media (min-width: 900px) { body.brl-page-site-map .elementor-element-d2dbcf2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; } } /* The intro sentence introduces every group, so it spans them. */ body.brl-page-site-map .elementor-element-d2dbcf2 > p { grid-column: 1 / -1; margin: 0; max-width: 72ch; } body.brl-page-site-map .brl-sitemap-group h3 { margin: 0 0 18px; } /* No bullets and no indent. Every item here is a link and nothing else, so a disc marks nothing, and the browser's 40px padding pushes the links out from under the heading that labels them -- weakening the grouping this whole block exists to establish. Flush left, they read as one unit with it. */ body.brl-page-site-map .brl-sitemap-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } body.brl-page-site-map .brl-sitemap-group li { margin: 0; /* The longest entry ("The Best Things to Do in Two Harbors, Minnesota (Year-Round Guide)") wraps to two lines at 548px; 1.45 keeps those two lines closer to each other than to the next link, so a wrapped entry still reads as one item. The 12px grid gap is what separates items. */ line-height: 1.45; } /* #CC3366 is the same Elementor default the footer legal bar carried, and it is off-palette for the same reason -- see the note above that fix. #26465C is the site's own blue and runs 9.9:1 on this white ground against 4.9:1. */ body.brl-page-site-map .brl-sitemap-group a { color: #26465C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(38, 70, 92, .35); transition: color .18s ease, text-decoration-color .18s ease; } body.brl-page-site-map .brl-sitemap-group a:hover, body.brl-page-site-map .brl-sitemap-group a:focus-visible { color: #090909; text-decoration-color: currentColor; } body.brl-page-site-map .brl-sitemap-group a:focus-visible { outline: 2px solid #26465C; outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { body.brl-page-site-map .brl-sitemap-group a { transition: none; } } /* -- the title block on the generated pages -------------------------------- */ /* The template puts 20px between the page title and the first line of body copy. That is a legal page's proportion: /term-condition/ follows its title with an "Effective Date" line and then an unbroken run of paragraphs, so the title has nothing to be distinguished FROM. A site map does -- six group headings at 28px start 56px apart further down -- and at 20px the 60px title read as one more heading in that stack rather than the name of the page. Everything else on these pages separates by 48-56px; the title now does too. The h1 itself is left exactly as captured -- 60px/72px Superior 600, #090909, identical to /privacy-policy/ and /term-condition/. It is the space around it that was wrong, not the type, and these two pages should not quietly grow their own title style. */ /* .elementor-element is repeated deliberately: Elementor writes this widget's own margin as `.elementor-831 .elementor-element.elementor-element-20f80ab`, three classes, which outranks a two-class selector no matter that ours loads later. The container is a flex column with a 20px row-gap, so this margin adds to it. */ body.brl-page-site-map .elementor-element.elementor-element-20f80ab, body.brl-page-accessibility .elementor-element.elementor-element-20f80ab { margin-bottom: 20px; } /* The lead sentence sat at 16px -- the same size as the twelve links below it -- so it read as a stray first entry rather than an introduction. 18px and a lighter ink place it between the 28px group headings and the 16px links, which is where it belongs in the hierarchy. 62ch keeps it to one comfortable line-length; it is one sentence and should not span 1160px. */ body.brl-page-site-map .elementor-element-d2dbcf2 > p { font-size: 18px; line-height: 1.6; color: #4A4A4A; max-width: 62ch; } /* ========================================================================== The header at rest: one scrim instead of per-page exceptions ========================================================================== The design floats the nav over the hero at scroll 0 and drops a solid rgba(0,0,0,.85) bar in once you scroll. The nav's links and logo are white, so at rest their legibility depends entirely on what the hero happens to look like in the top 100px -- and it was never checked per page. Measured at 1440, compositing each hero's own scrim, contrast of white against the BRIGHTEST pixel under the nav: /about-us/ 7.24:1 / 2.79:1 /destinations/ 8.61:1 /contact-us/ 2.68:1 /blog/ 6.36:1 /faq/ 2.78:1 /book-now/ 4.12:1 /single-blog/ 2.88:1 /single-room/ 3.09:1 /package/ 2.94:1 Six of the ten fail 4.5:1. The source had already hit this and fixed it the only way a per-page fix can be applied -- by pinning ONE page's bar solid: body.page-id-891 .brl-site-header{background-color:rgba(0,0,0,.85)} // Solid dark header on pages without a dark hero (Offers, Contact) 891 is /package/. Contact is named in that comment and never got the rule, and it measures worse (2.68:1) than the page that did. That is the shape of the problem: a list of page ids cannot keep up with the pages, and every hero swapped in later silently re-opens it. So the fix goes on the header, once, and does not care what is behind it. A scrim under the nav, constant through the band the logo and links occupy (y=16..82 of the 100px bar) and fading out below it so there is no edge. Solving for the alpha that puts the WORST pixel on every hero page over 4.5:1 gives 0.25 (/contact-us/ is the binding case). This uses 0.35: heroes get swapped and images get re-encoded, and the margin costs nothing -- 0.35 still reads as "nav over photo", where the 0.85 scrolled bar reads as a solid band. With this in place /package/ no longer needs its exception and is released below, so all ten hero pages behave identically at rest. */ body.brl-has-hero:not(.brl-scrolled) .brl-site-header::before { content: ''; position: absolute; inset: 0 0 auto 0; /* Taller than the bar so the fade finishes past it. The header is position:fixed, which always creates a stacking context, so z-index:-1 stays inside the header -- above its own (transparent) background, below the logo and links. */ height: 170%; background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .35) 48%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: -1; } /* It is a rest-state device only: once .brl-scrolled brings in the solid bar the scrim is gone, and the transition on .brl-site-header covers the swap. */ /* Release /package/ from its exception. The scrim now does that page's job -- it measured 2.94:1 unaided and clears 4.5:1 with the scrim, the same as its nine peers -- and leaving the override in would make Offers the only page whose header does not match the rest at rest, which is the complaint this whole block answers. The source rule carries !important on five repeated classes, so this has to outrank it rather than merely follow it. */ body.page-id-891.brl-has-hero:not(.brl-scrolled) .brl-site-header.brl-site-header.brl-site-header.brl-site-header.brl-site-header { background-color: transparent !important; box-shadow: none !important; } /* ========================================================================== /reserve-dates/ — the pre-opening reservation form ========================================================================== Brief task 1. The page borrows /term-condition/'s chrome and container like the other generated pages, so the heading and intro already sit at the right type scale; everything below styles the island, which has no captured CSS because the source has no such form. Scoped to the island's OWN root classes rather than to the page's body, because the same form is embedded on /rooms/ for the Coming Soon state (brief task 5). splitTree replaces the placeholder div with the component's output, so there is no wrapper element to hang a page scope on -- .brl-reserve__form and .brl-reserve__done are the roots the component actually renders. Restrained on purpose. This is the one thing on the site that has a job to do, and the job is a legible sequence of eight fields — so: one column of inputs on a two-column grid at desktop, generous targets, one accent, and no decoration competing with the button. The blue is #26465C, the site's own, already used for links in the site map. */ .brl-reserve__form .brl-reserve__grid { display: grid; grid-template-columns: 1fr; gap: 20px 32px; max-width: 720px; margin-top: 28px; } @media (min-width: 720px) { .brl-reserve__form .brl-reserve__grid { grid-template-columns: 1fr 1fr; } /* Room preference and the free-text box read across the whole measure. */ .brl-reserve__form .brl-field--wide { grid-column: 1 / -1; } } /* align-content: start stops the control stretching to fill a taller cell. Without it a grid row is only as symmetrical as its tallest field, and any field that ever gains a line -- a hint, a validation message -- silently resizes its neighbour. */ .brl-reserve__form .brl-field { display: grid; gap: 6px; align-content: start; } .brl-reserve__form .brl-field__label { font-size: 14px; font-weight: 600; color: #2D2D2D; letter-spacing: .01em; } /* The required marker is the only red on the page and it is doing real work, so it gets a title attribute rather than relying on colour alone. */ .brl-reserve__form .brl-field__label abbr { color: #A33; text-decoration: none; border: 0; margin-left: 2px; } /* Inline with the label, and normal-weight so it reads as an aside to a bold label. */ .brl-reserve__form .brl-field__hint { font-size: 13px; font-weight: 400; color: #6A6A6A; margin-left: 6px; white-space: nowrap; } .brl-reserve__form .brl-field input, .brl-reserve__form .brl-field select, .brl-reserve__form .brl-field textarea { font: inherit; font-size: 16px; /* 16px stops iOS zooming the page on focus */ color: #1A1A1A; background: #fff; padding: 11px 13px; border: 1px solid #C4C4C4; border-radius: 3px; width: 100%; min-height: 46px; /* comfortable target, and uniform across types */ transition: border-color .15s ease, box-shadow .15s ease; } .brl-reserve__form .brl-field textarea { min-height: 104px; resize: vertical; } .brl-reserve__form .brl-field :is(input, select, textarea):focus-visible { outline: none; border-color: #26465C; box-shadow: 0 0 0 3px rgba(38, 70, 92, .18); } /* Only after the field has been interacted with -- :invalid alone would paint every required field red before anyone has typed a character. */ .brl-reserve__form .brl-field :is(input, select, textarea):user-invalid { border-color: #A33; } .brl-reserve__form .brl-reserve__cta { display: grid; justify-items: start; gap: 10px; margin-top: 28px; } .brl-reserve__form .brl-reserve__btn { font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #fff; background: #26465C; border: 0; border-radius: 3px; padding: 15px 34px; min-height: 50px; cursor: pointer; transition: background-color .18s ease; } /* Mauve, not the darker navy it used to be (owner 2026-09-16: "the button on this path reserve-dates/ 'reserve my dates' also needs to be mauve on hover"). It is one component, so this reaches its three instances -- /reserve-dates/, the /rooms/ inline form and the pop-up -- which is the same call as the site-wide one above and keeps the same button from behaving two ways. #FFFFFF on #9D6F6D is 4.26:1; the label measures 16px/600, still normal text for WCAG, so it misses AA's 4.5:1 the way the other mauve hovers do. The navy it replaced was 12.77:1. */ .brl-reserve__form .brl-reserve__btn:hover { background: #9D6F6D; } .brl-reserve__form .brl-reserve__btn:focus-visible { outline: 2px solid #26465C; outline-offset: 3px; } .brl-reserve__form .brl-reserve__btn[disabled] { opacity: .6; cursor: default; } /* The no-payment line. It is welded under the button because the brief requires it under every instance -- "Reserve" implies a held room and this is what corrects that. 8.9:1 on white, so it is quiet without being fine print. */ .brl-reserve__form .brl-reserve__micro { margin: 0; font-size: 14px; color: #4A4A4A; } .brl-reserve__form .brl-reserve__error { margin-top: 20px; padding: 14px 16px; border-left: 3px solid #A33; background: #FBF3F3; color: #2D2D2D; font-size: 15px; max-width: 720px; } /* -- the confirmation state ------------------------------------------------ */ .brl-reserve__done { max-width: 720px; } .brl-reserve__done h2 { font-size: 32px; line-height: 1.2; margin: 0 0 20px; } .brl-reserve__done ol { margin: 0 0 24px; padding-left: 22px; display: grid; gap: 12px; } .brl-reserve__done li { line-height: 1.5; } .brl-reserve__note { margin: 0; padding-top: 20px; border-top: 1px solid #E2E2E2; color: #4A4A4A; } :is(.brl-reserve__note, .brl-reserve__error) a { color: #26465C; } @media (prefers-reduced-motion: reduce) { .brl-reserve__form :is(input, select, textarea, .brl-reserve__btn) { transition: none; } } /* ========================================================================== Homepage announcement band — brief task 8 / Part B3 ========================================================================== The brief specifies the treatment as well as the copy: "FULL WIDTH BAND, DARK BACKGROUND, AMBER ACCENT". Everything below follows from those five words plus the site's own vocabulary. The ground is #14212B — the site's #26465C blue taken down to near-black rather than a neutral grey, so the band reads as part of this site and not as a generic dark strip. The amber is #E0A44A, used on exactly two things: the eyebrow, and the button. One accent, twice, is what makes it an accent. It breaks the page's white rhythm on purpose. This is the one moment on the homepage asking for something, sitting directly under the intro paragraph and above the map, where the brief puts it. */ .brl-announce { /* Full width regardless of the container it lands in: the anchor paragraph sits inside Elementor's 1160px column, and the brief says full width. */ width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); background: #14212B; color: #F2EFEC; padding-block: 72px; } .brl-announce__in { max-width: 720px; /* the body copy runs ~62ch here, not 1160px of it */ margin-inline: auto; padding-inline: 24px; text-align: center; } /* The one place on the site where tracked-out small caps earn their keep: it is a date stamp, not a label invented to sit above a heading. */ .brl-announce__eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E0A44A; /* 7.4:1 on #14212B */ } .brl-announce__title { margin: 0 0 20px; font-family: Superior, Georgia, serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 600; color: #FFF; text-wrap: balance; } .brl-announce__body { margin: 0 0 32px; font-size: 17px; line-height: 1.65; color: #D8D2CC; /* 11.3:1 */ } .brl-announce__btn { display: inline-block; background: #E0A44A; color: #14212B; /* dark ink on amber: 7.4:1, and it reads as a button */ font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: 16px 38px; border-radius: 3px; transition: background-color .18s ease; } .brl-announce__btn:hover { background: #EDB662; } .brl-announce__btn:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; } /* The no-payment line, welded under the button as everywhere else. */ .brl-announce__micro { margin: 14px 0 0; font-size: 14px; color: #A9A29B; /* 6.0:1 — quiet, still legible */ } @media (max-width: 600px) { .brl-announce { padding-block: 52px; } .brl-announce__btn { display: block; } } @media (prefers-reduced-motion: reduce) { .brl-announce__btn { transition: none; } } /* ========================================================================== /rooms/ — the Coming Soon state (brief task 5 / Part B4) ========================================================================== The room listing is dropped and this replaces it, so the page arrives with no container of its own: measured unstyled at x=0, full 1440 wide, title butted against the fixed header. These rules give it the same measure and rhythm the rest of the site uses — 1160px centred, the page title at 60px Superior like every other page title, and the form below it at the reading width it has on /reserve-dates/, which it inherits now that its styles are scoped to the island rather than to that page's body. */ .brl-coming { padding-block: 72px 64px; } .brl-coming__in { max-width: 1160px; margin-inline: auto; padding-inline: 24px; } /* Two classes deliberately: the booking widget's own stylesheet carries `.bb h1,.bb h2,...{font-family:var(--ui) !important}` at specificity (0,1,1), and this section is inserted inside .bb. A single class with !important still loses that tie -- font-size applied and font-family did not, which is the tell. (0,2,0) wins it. */ .brl-coming .brl-coming__title { margin: 0 0 24px; /* The site's own variable rather than naming the face, so this stays correct if the family is ever changed in one place. */ font-family: var(--hb-serif), Georgia, serif !important; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; font-weight: 600; color: #090909; text-wrap: balance; } .brl-coming__body { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: #3A3A3A; max-width: 68ch; } /* The form is the point of the page, so it gets air above it and a rule to sit under -- the only structural line on the page, marking where reading stops and doing starts. */ .brl-coming__form { margin-top: 40px; padding-top: 36px; border-top: 1px solid #E2E2E2; } @media (max-width: 600px) { .brl-coming { padding-block: 48px 44px; } } /* ========================================================================== The reservation pop-up — brief task 11 ========================================================================== It interrupts someone, so it is built to be got rid of: a close target big enough to hit, a backdrop that dismisses, and nothing that hides the exit. The panel scrolls internally rather than growing past the viewport, because the eight-field form is taller than a phone screen and a modal you cannot reach the bottom of is a trap. No entrance animation beyond a short fade. A pop-up that slides, bounces or scales is drawing attention to the interruption itself. */ .brl-popup { position: fixed; inset: 0; z-index: 9999; /* above the header's z-index: 99 */ display: grid; place-items: center; padding: 24px; background: rgba(10, 16, 21, .62); animation: brl-popup-in .18s ease-out; } .brl-popup__panel { position: relative; width: min(640px, 100%); max-height: min(86vh, 860px); overflow-y: auto; background: #fff; color: #2D2D2D; border-radius: 4px; padding: 40px 40px 36px; box-shadow: 0 18px 60px rgba(0, 0, 0, .32); } /* 44px target, outside the reading column, and it never scrolls away. */ .brl-popup__close { position: sticky; top: -4px; float: right; margin: -14px -14px 0 0; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: #5A5A5A; background: #fff; border: 0; border-radius: 3px; cursor: pointer; } .brl-popup__close:hover { color: #111; background: #F0EEEC; } .brl-popup__close:focus-visible { outline: 2px solid #26465C; outline-offset: 2px; } .brl-popup__title { margin: 0 0 14px; font-family: var(--hb-serif), Georgia, serif; font-size: 28px; line-height: 1.2; font-weight: 600; color: #090909; } .brl-popup__intro { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #4A4A4A; } /* One column inside a 640px panel: two would put eight fields in a grid narrower than the labels are comfortable at. */ .brl-popup .brl-reserve__grid { grid-template-columns: 1fr; max-width: none; margin-top: 20px; } .brl-popup .brl-field--wide { grid-column: auto; } @media (max-width: 600px) { .brl-popup { padding: 0; place-items: stretch; } .brl-popup__panel { width: 100%; max-height: 100dvh; border-radius: 0; padding: 28px 20px 24px; } } @keyframes brl-popup-in { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .brl-popup { animation: none; } } /* ========================================================================== The floating booking pill — hidden, not removed ========================================================================== `.brl-pill` is the "When / Guests / Promo" bar that floats on all 23 routes. Every segment of it opens a booking flow that cannot complete: Cloudbeds is not connected before opening, the rates behind it were the template pricing removed under task 6, and the rooms it would search are the Coming Soon page. Offering someone a date picker that leads nowhere is the same broken promise the rest of this work has been undoing. HIDDEN RATHER THAN DROPPED, at the owner's instruction. The markup stays in the capture and in the built page, so when Cloudbeds is connected this is one rule to delete rather than a widget to rebuild. `display: none` rather than visibility or opacity: it must be out of the layout and out of the accessibility tree, not merely invisible. A pill that is transparent but still focusable is worse than one you can see -- a keyboard user would tab into a date picker nobody can see them using. */ .brl-pill { display: none !important; } /* ========================================================================== The no-payment line under every CTA button — REMOVED 2026-09-15 ========================================================================== The .brl-micro rules are gone with the copy they styled. The owner asked for "Opening December 2026. No payment today." to come out from under all of the buttons, confirmed against the brief clause that calls it mandatory. Removed AT SOURCE — site.json cta_microcopy, ReserveForm.svelte, and the homepage announcement band — not hidden with display:none. Hiding it would leave the sentence in the HTML for a screen reader and a crawler while a sighted visitor saw nothing, which is worse than either outcome on its own. .brl-reserve__micro (the form) and .brl-announce__micro (the band) are left in place in their own sections: they are scoped to elements that no longer exist, and those sections document other work that is still live. */ /* ========================================================================== 2026-09-14 — measured UI/UX/QA pass ========================================================================== Three reviews (defects, visual design, experience) measured 13 routes at 18 viewports — the eight-width ladder plus 1366x768, 1280x800, 1536x864@1.25, 1440x900@2, 1920x1080, 2560x1440 at @1 and @2, 820x1180@2, 390x844@3 and 360x800@3. Every rule below was injected with add_style_tag and re-measured before it was written here; no rule is in this block on judgement alone. Raw numbers: scratch/ui-review/{before,after_merged}.json (git-ignored). Whole-matrix effect: 0 routes scroll sideways (was 1), 0 stretched images (was 6), the home

is in the first screen at 18 of 18 viewports (was 0), total scroll height across the matrix -11.9%. Specificity: Elementor's own rules are `.elementor- .elementor-element.elementor-element-` (0,3,0) and sometimes (0,4,0). Repeating a class is how the rules below out-rank them without !important or depending on load order — the same device the carousel block above uses. */ /* ── Stretched photographs ─────────────────────────────────────────────────── Six images are given a fixed height by the capture with no object-fit, so the browser fills the box by distorting the picture. Measured as rendered aspect ratio over natural: /contact-us/ 20b245c (andrew-ling…webp) is 48% out at desktop and 69% at 360 — a portrait squashed to half its width. Then /: f33751b 17%, /about-us/: 8739b7e 15% and 20b245c 33% at 390, /package/: 7dbc2a4 8% (42% at 768), /destinations/: 1bd3944 87% at 600. `cover` crops instead of stretching; no box geometry changes, so nothing reflows. Measured 0 distorted images at all 18 viewports after. */ .elementor-666 .elementor-element.elementor-element-20b245c img, .elementor-9 .elementor-element.elementor-element-f33751b img, .elementor-564 .elementor-element.elementor-element-8739b7e img, .elementor-564 .elementor-element.elementor-element-20b245c img, .elementor-891 .elementor-element.elementor-element-7dbc2a4 img, .elementor-1149 .elementor-element.elementor-element-1bd3944 img { object-fit: cover; } /* ── /destinations/ scrolls sideways between 1025 and 1199 ─────────────────── The capture zeroes the side padding of 3730a0d and 80bcb6f at >=1025, which is right at 1200+ where the container is narrower than the viewport anyway. Below ~1140 the content then runs to the edge and the 4deg-rotated "North Shore Favorites" card (53c1632) sticks out: at a 1100 viewport the document is 1130 wide. Padding restored for that band only. Measured: document width 1130 -> 1100, no overflow 1040..1180. */ @media (min-width: 1025px) and (max-width: 1199px) { .elementor-1149.elementor-1149 .elementor-element.elementor-element-80bcb6f, .elementor-1149.elementor-1149 .elementor-element.elementor-element-3730a0d { padding-left: 40px; padding-right: 40px; } } /* ── Home journal cards: READ MORE is unreachable without a mouse ──────────── .card-hover .hover-btn sits at opacity:0 translateY(20px) until :hover. On a touch device there is no hover, so the button never appears — measured 0 opacity on all three cards at 820@2, 390@3 and 360@3 — and at <=767 the card's overflow:hidden clips 20px of its 47px box. A keyboard user tabs onto a control they cannot see. Shown outright where hover does not exist, and on focus-within everywhere. Desktop hover is untouched. */ @media (hover: none) { .card-hover .hover-btn { opacity: 1; transform: none; } } .card-hover:focus-within .hover-btn { opacity: 1; transform: none; } /* ── Journal posts: an empty sidebar pushes the article off centre ─────────── 4d06211 has no element children at all, yet holds 380px of the 1140px container (2088-3185px tall), so the article sits 190px left of centre at 1440 and 2560, and is squeezed to 512px at 768 — which is why these pages were TALLER at 768 than at 600. :empty does not match it (it contains a newline text node), hence :not(:has(*)): if the sidebar is ever filled, it comes back on its own rather than silently staying hidden. Measured: centre offset -190 -> 0 at 1440/2560, article 512 -> 728 at 768, /the-best-things…/ 4384 -> 3724px at 768. The last rule wraps a bare https:// URL in the body copy of /the-best-things…/, which ran 23px past a 360 screen and was cut off. */ .elementor-element.elementor-element-4d06211.elementor-element-4d06211:not(:has(*)) { display: none; } .elementor-element.elementor-element-03a0af5.elementor-element-03a0af5 > .e-con-inner { justify-content: center; } .elementor-element.elementor-element-03a0af5.elementor-element-03a0af5 .elementor-element-9586903.elementor-element-9586903 { --width: min(100%, 760px); } .elementor-1262 .elementor-widget-theme-post-content a { overflow-wrap: anywhere; } /* ── Home intro: two viewport-heights of photograph ────────────────────────── The single largest thing on the site. 20b245c (the lighthouse) is height:100% of a row whose height comes from the portrait beside it, 2465554, which the capture sizes by WIDTH. So the row grows with the viewport and never stops: the lighthouse renders 700x1795 at 1440x900 (1.99x the viewport height), 2.26x at 1366x768, and 1260x2612 at 2560. The section alone was ~19% of the page. The portrait's file is 816px wide, so at 2560 it was also being enlarged 1.95x (3.09x at DPR 2) — capping it fixes the softness too. At 768-1024 the capture pins the lighthouse to height:1600px inside a 364px column: a 4.4:1 ribbon. Given the row's real height instead. Measured: row 1795 -> 1095 at 1440, 1736 -> 1080 at 1366x768, 1600 -> 1032 at 1024, 1600 -> 1060 at 820@2. */ @media (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-2465554.elementor-element-2465554 img { height: clamp(280px, 34vw, 480px); object-fit: cover; object-position: center 40%; } .elementor-9.elementor-9 .elementor-element.elementor-element-b0bf307.elementor-element-b0bf307 { margin-top: 32px; } } @media (min-width: 768px) and (max-width: 1024px) { .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c, .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c .elementor-widget-container { height: 100%; } .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c img { height: 100%; object-fit: cover; } } /* ── Sections that never stop growing ──────────────────────────────────────── Every ordinary section on this site is a 1160px centred container, but the split rows and the newsletter band are full-bleed with no max-width. At 2560 that put the home intro's

at x=20 while the next section's content started at x=700 — adjacent sections with different left edges, which is what reads as "nothing lines up" on a big monitor. It also ran the intro copy to 138 characters a line. 1600 rather than 1160: these rows are meant to be wider than a text section, and 1600 keeps them so while still being a limit. Measured at 2560x1440: home intro 2560 -> 1600 wide,

x=20 -> 580, copy 138 -> 92 characters a line; 1536x864 unchanged (no gutters added). */ .elementor-9.elementor-9 .elementor-element.elementor-element-9e7e232.elementor-element-9e7e232, .elementor-564.elementor-564 .elementor-element.elementor-element-9e7e232.elementor-element-9e7e232, .elementor-element.elementor-element-8ac2a59.elementor-element-8ac2a59, .elementor-element.elementor-element-5abf149.elementor-element-5abf149, .elementor-element.elementor-element-c44c886.elementor-element-c44c886, .elementor-element.elementor-element-131d420.elementor-element-131d420 { max-width: 1600px; margin-left: auto; margin-right: auto; } /* ── Newsletter photo strip ────────────────────────────────────────────────── Three 2:3 portraits sized by width, so they grow with the viewport: 467x700 at 1440 (0.78 of the screen height), 627x940 at 1920, 683x1024 at 2560, and 0.86 of the screen on a 1366x768 laptop. Capped and cropped. Measured: band 1278 -> 1097 tall at 1440; /package/ 1691 -> 1097 at 2560; <=1024 untouched. */ .elementor-element.elementor-element-5abf149.elementor-element-5abf149 img, .elementor-element.elementor-element-131d420.elementor-element-131d420 img { max-height: 520px; object-fit: cover; } /* ── Home section seams: a margin stacked on a padding ─────────────────────── Measured white space from the bottom of the last painted thing to the top of the next heading, at 1440: 180px into "Rooms & Suites", 200px into "Our Favorites", 202px into "Experience the North Shore" (40px of padding plus 150px of margin), and 281px into "Frequently Asked Questions" — the last because the journal cards carry min-height:630px the content never uses (308px at 1100, 311px at 820). The doubled value is removed, not both: each seam keeps one source of space. Measured at 1440: 180->90, 200->100, 202->116, 281->120. At 768: 156->66, 176->76, 286->96. At 390: 104->54. 2560 matches 1440. */ .elementor-9.elementor-9 .elementor-element.elementor-element-4ca3927, .elementor-9.elementor-9 .elementor-element.elementor-element-6b0701d, .elementor-9.elementor-9 .elementor-element.elementor-element-d29f4cc { --margin-top: 0px; } .elementor-9.elementor-9 .elementor-element.elementor-element-b6d819a { margin-top: 64px; } .elementor-9.elementor-9 .elementor-element.elementor-element-e671e66.elementor-element-e671e66 { padding-top: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-ddfbdb2, .elementor-9.elementor-9 .elementor-element.elementor-element-fbf599d, .elementor-9.elementor-9 .elementor-element.elementor-element-21c7066 { --min-height: 0px; min-height: 0; } /* ── /destinations/ seams ──────────────────────────────────────────────────── The same doubling twice: 60px section margins collapsing onto 72-80px of padding. "At a Glance" into "Spend The Day Outside" measured 139px at 1440 and 307px at 2560; the map into "Frequently Asked Questions" 190px at every width >=1100. Measured: 139->79 at 1440, 307->247 at 2560, 93->33 at 1100, 80->30 at 390; map seam 190->120 everywhere, 154->84 at 390. */ .elementor-1149.elementor-1149 .elementor-element.elementor-element-9e71974, .elementor-1149.elementor-1149 .elementor-element.elementor-element-73a212b { --margin-bottom: 0px; } .elementor-1149.elementor-1149 .elementor-element.elementor-element-6a6d24f { --margin-top: 0px; } /* ── /about-us/ imagery outweighs its copy ─────────────────────────────────── The twin portraits f77def1/e44f503 render 580x709 — 0.92 of the screen on a 1366x768 laptop. 20b245c's file is 401px wide and was rendered 576 wide at 1440 (1.44x enlarged) and 1024 wide at 2560 (2.55x, 5.11x at DPR 2); holding it to its own width is the only honest fix until a bigger export exists. a316e6c is 800px tall beside a 516px text column, and 0.95 of the screen at 390. max-height rather than height on the twins so the tablet layout, which is already shorter, is not touched. Measured at 1440: twins 709 -> 560, 20b245c 576x744 -> 401x518 (enlargement 1.44x -> 1.0x), a316e6c 800 -> 600, page 4459 -> 3884. At 390: 800 -> 440. The last block is separate: below 768 the two portraits in 3d591be stack, giving 1466px of photograph with no words at 600 and a 2223px stretch of scroll with no text. Side by side at half width each instead. Measured: section 1466 -> 366 at 600, 953 -> 238 at 390; longest textless stretch 2223 -> 1123; first paragraph 3.99 -> 2.35 screens down. */ @media (min-width: 768px) { .elementor-564.elementor-564 .elementor-element.elementor-element-f77def1 img, .elementor-564.elementor-564 .elementor-element.elementor-element-e44f503 img { max-height: min(560px, 70vh); object-fit: cover; } } .elementor-564.elementor-564 .elementor-element.elementor-element-20b245c.elementor-element-20b245c img { max-width: 401px; } .elementor-564.elementor-564 .elementor-element.elementor-element-a316e6c.elementor-element-a316e6c img { height: 600px; } @media (max-width: 767px) { .elementor-564.elementor-564 .elementor-element.elementor-element-a316e6c.elementor-element-a316e6c img { height: 440px; } .elementor-564 .elementor-element.elementor-element-3d591be.elementor-element-3d591be { --flex-direction: row; --flex-wrap: nowrap; flex-direction: row; flex-wrap: nowrap; } .elementor-564 .elementor-element-3d591be > .e-con.e-con { --width: 50%; width: 50%; } } /* ── A post title over six lines, and the /contact-us/ seam ────────────────── The journal

holds 48px on a 48px line at phone widths, so "The Best Things to Do in Two Harbors, Minnesota (Year-Round Guide)" was 288px of heading over six lines before the article began. And /contact-us/'s last section stacks margin-bottom:70px on padding-bottom:80px, putting 150px of white above a black footer. Measured: title 350x192 -> 350x117 at 390 (320x192 -> 320x117 at 360@3); seam 150 -> 80 (126 -> 56 at <=1024). */ @media (max-width: 767px) { .elementor-element.elementor-element-944a380.elementor-element-944a380 .elementor-heading-title { font-size: 34px; line-height: 1.15; } } .elementor-666.elementor-666 .elementor-element.elementor-element-9e7e232 { --margin-bottom: 0px; } /* ── The empty footer column, on all 13 routes ─────────────────────────────── b986f63 holds a social-links widget with no links in it: 217x180 at >=1100, and at <=1024 it wraps onto an empty 50px row of its own. Hidden until there are accounts to link to — that is content, and the owner's to supply. Measured: footer 417 -> 367 at 768-1024, 487 -> 467 at 390-600. */ .elementor-244 .elementor-element.elementor-element-b986f63 { display: none; } /* ── /blog/ leaves one card alone on a row ─────────────────────────────────── The grid drops to two columns at <=1024, so with three posts the third sits by itself on a second row. Three across down to 900, where the cards are still 290px wide; below that they would be 216px with five-line titles, so the two-column layout is left alone there. Measured at 991 and 1024: one row of three, page 2399 -> 1757. */ @media (min-width: 900px) and (max-width: 1024px) { .elementor-737 .elementor-element.elementor-element-67b328d .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── The inner-page heroes were a full screen ──────────────────────────────── .brl-phero on /about-us/, /package/, /faq/ and /blog/, and the first container on /contact-us/ and /destinations/, carry min-height:100dvh, so a visitor landed on a photograph and had to scroll a whole screen before the page said anything. Distance to the first real content, measured in screens: /faq/ first question 1.12, /blog/ first post 1.08, /contact-us/ "Email Us" 1.69, /package/ "Reserve This Package" 1.96. Sized from the width with a ceiling in screen heights, so a short laptop screen is not penalised for being short. Measured after: /faq/ 1.12 -> 0.70, /blog/ 1.08 -> 0.66, /contact-us/ 1.69 -> 1.27, /package/ 1.96 -> 1.54, /destinations/ 1.57 -> 1.15. Hero text still clears the fixed header — the closest case measured 131px against a 100px header. THE HOME HERO IS DELIBERATELY NOT IN THIS RULE. b39870f keeps the source's full-screen photograph: capping it was measured and then reverted 2026-09-15 on the owner's instruction — "the hero image taking full space was fine". So the home

sits below the fold by design; that is a choice, not the oversight the measurement first read it as. */ .brl-phero.brl-phero { min-height: clamp(360px, 58dvh, 680px); } body.page-id-666 .elementor-666 > .e-con.e-parent.e-parent:first-child, body.page-id-1149 .elementor-1149 > .e-con.e-parent.e-parent:first-child { min-height: clamp(360px, 58dvh, 680px) !important; } /* ── Tap targets under 44px ────────────────────────────────────────────────── Measured with elementFromPoint, so this is the area that actually responds, not the CSS box. Seven text-style buttons ("Explore the Hotel", "Reserve My Dates" in the rooms band, "View Guide", "Read The Blog", and "Read More" on the three /blog/ cards) were tappable over 14-16px. The hamburger was 45x27 and at <=1024 it is the only navigation control on the site. The buttons are grown with an ::after overlay rather than padding so that nothing moves: no reflow, no header height change. Verified no control steals another's centre point — 31/18/16/12 controls on /, /faq/, /blog/, /package/ hit themselves before and after. Measured: all seven 14-16px -> 44px tappable at 390, 1024 and 1440; hamburger 28 -> 44. */ @media (max-width: 1024px) { .elementor-26 .elementor-element.elementor-element-62f1cdf.elementor-element-62f1cdf button.elementskit-menu-hamburger { min-width: 44px; min-height: 44px; } } .elementor-element-0556e1a a.elementor-button, .elementor-element-2c4bc77 a.elementor-button, .elementor-element-1679c64 a.elementor-button, .elementor-element-e225f4a a.elementor-button, .elementor-element-f2351e9 a.elementor-button { position: relative; } .elementor-element-0556e1a a.elementor-button::after, .elementor-element-2c4bc77 a.elementor-button::after, .elementor-element-1679c64 a.elementor-button::after, .elementor-element-e225f4a a.elementor-button::after, .elementor-element-f2351e9 a.elementor-button::after { content: ""; position: absolute; inset: -15px 0; } /* ── Line length ───────────────────────────────────────────────────────────── /reserve-dates/ is the page the whole site exists to reach, and its intro paragraph ran 163 characters a line at >=1100 (a 1160px measure). The home and /about-us/ welcome paragraphs reached 174 and 176 at 2560. Measured: /reserve-dates/ 163 -> 76 at 1366, 1440 and 2560, 103 -> 76 at 768; the submit button moves down 24px, which is the cost. Home and /about-us/ 174/176 -> 95/96 at 2560, unchanged at 1440. */ body.brl-page-reserve-dates .elementor-element-d2dbcf2 > p { max-width: 60ch; } .elementor-element-f907e28 p, .elementor-element-213df06 p { max-width: 75ch; } /* ── 2026-09-15 — the two images under the hero, paired as the template intends ─ The owner pointed at the AWOL Kennebunkport home page — a Lark Hotels property, and the template this site's capture came from; its markup carries the same `intro-section_map` / `intro-section_right_image` class names ours does. Asked of that page directly (Chrome, injected script, no screenshot — hard rule 7; a headless browser is served a Cloudflare interstitial instead): .intro-section_map 880 x 1379 ratio 0.638 .intro-section_right_image 880 x 1379 ratio 0.638 "Explore Full Map" 179 x 49, centred on the map, 72px (5.2% of the image height) above its bottom edge So the two images under the hero are an IDENTICAL PORTRAIT PAIR. Our port had broken that: it squashed the map into a 700x480 landscape box while the photo beside it stayed portrait at 700x1095 — two different shapes and two different sizes where the template has one. Both source files are natively portrait (645x1024 and 1400x2100), so the pairing is what they were cut for; the landscape box was cropping a portrait photograph to a shape it never had. The height that follows from the ratio is the owner's explicit choice, taken against the measurement: it puts the photograph back to 1.22 times the viewport height at 1440x900, the size that was cut on 2026-09-15 earlier in the day. Asked and answered with both numbers in front of them — "exactly like AWOL". The reference's own is taller still, at 1.53. So this is not the oversight the earlier measurement read it as; leave it alone. Side by side is kept. AWOL renders the pair STACKED at 1800px wide, but its own columns carry uk-width-1-2@m (half width at medium and up), so side by side is what that markup asks for and stacking is it misbehaving at that width. Owner chose to keep ours side by side, which is also ~1600px less home page. The button is lifted onto the map with a negative margin rather than absolute positioning, because it is a SIBLING of the image widget, not a child — there is no element to position it against without changing the markup, and markup is not this file's to change. The percentage in the calc resolves against the column's width, which is what the image's width and therefore its height track, so the 5.2% offset holds across widths instead of only at one. */ @media (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-2465554.elementor-element-2465554 img, .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c img { width: 100%; aspect-ratio: 880 / 1379; height: auto; object-fit: cover; display: block; } .elementor-9.elementor-9 .elementor-element.elementor-element-2465554.elementor-element-2465554 img { object-position: center center; } /* Top of the photograph level with the top of "Hotel Boreal", not pushed to the foot of the column. It was margin-top:auto here, which pinned it to the bottom and left it starting 459px below the heading at 1440x900 — measured. The column is taller than the photograph (the copy, the map and the map button stack up to 1556px against the photograph's 1097), so something has to give at one end; the owner's call, 2026-09-15, is that it gives at the bottom. */ .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c { margin-top: 0; align-self: flex-start; } .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c, .elementor-9.elementor-9 .elementor-element.elementor-element-20b245c.elementor-element-20b245c .elementor-widget-container { height: auto; } .elementor-9.elementor-9 .elementor-element.elementor-element-b0bf307.elementor-element-b0bf307 { /* padding-right, not margin-right: the row carries width:100% from the capture, so a right margin overflows it instead of narrowing it (measured — the button stayed 10px right of centre). Padding shrinks the content box to the image's own 700px, so "centred" means centred ON THE MAP rather than on the column. The 67px is the button's 47px plus the column's 20px row gap; the 7.92% is the 5.2% of image height AWOL uses, restated against the column width the image tracks, so the offset holds at every width instead of only at one. It stays `margin-top`, not `top`: a percentage in `top` resolves against the containing block's HEIGHT, not its width, so the same 7.92% drifted to 12-19.8% of the image depending on how tall the column happened to be (measured). Margin percentages are width-relative, which is what makes one number hold at every width. The negative margin does pull the COLUMN's bottom edge up with the button, which left the column ending 57px above where the map image actually stops, so the map spilled over the "Opening December 2026" band (measured 2026-09-15: 57px at 1440, 54 at 1366, 40 at 1024). That is paid back on the column below — the same 7.92%, so it cancels exactly at every width, plus 48px of real gap so the band clears the photograph instead of touching it. */ position: relative; z-index: 2; margin-left: 0; padding-right: 20px; text-align: center; margin-top: calc(-67px - 7.92%); /* Pays the lift straight back on the same element, so the column still encloses the map and the "Opening December 2026" band clears it. It has to be here and not as padding on the column: a padding percentage resolves against the COLUMN's containing block (the full row), while this margin resolves against the column itself — the same 7.92% meant two different numbers, which is why the clearance measured 78-105px instead of one value. Here the two 7.92% terms cancel exactly and the 56px is what is left, at every width. 56 is the hero-to-intro gap as well, so the two seams above and below this row match. */ margin-bottom: calc(56px + 7.92%); } } /* ── The home intro sits closer under the hero ─────────────────────────────── The capture gives the intro row --margin-top:130px at >=768 (60px below it). Owner, 2026-09-15: "move the hotel intro and the right image together a little further up, dont make it hug the hero just a little further up", then "move it further up please" — 130 -> 88 -> 56px. Still a real break rather than the photograph running into the hero, which was the stated limit. The whole row moves, so the copy and the photograph beside it travel together and stay level with each other. Scoped to .elementor-9: /about-us/ carries a 9e7e232 of its own and is not in this instruction. Phone widths keep the capture's 60px — the gap there is already half the desktop one, and pulling it in further would hug. Measured: hero bottom to intro top 130 -> 56 at 1440x900, 1366x768, 1280x800, 1536x864, 1920x1080, 2560x1440, 1100x900 and 1024x900; 60 unchanged at 390. */ @media (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-9e7e232.elementor-element-9e7e232 { --margin-top: 56px; } } /* ── RESTORED 2026-09-15 ────────────────────────────────────────────────────── The two sections below were deleted by accident earlier the same day: the edit that removed the CTA microcopy sliced from its own `/* ===` header to the NEXT `/* ===` header, and these two sit between them behind `/* ──` headers, so they went with it. Restored verbatim from git HEAD. What it cost while it was gone: the carousel lost all four of the owner's photographs (measured — the two captured slides fell back to the template's own images and the two inserted slides had no background at all), and the newsletter block lost its spacing and type. Both are signed deviations. Whoever edits this file next: slice by the exact section you mean, and diff before saving. */ /* ── Newsletter block ──────────────────────────────────────────────────────── Owner edits doc "9.10.26 HB Edits": more room between the section border and the title, the first paragraph pulled up under the title as a subtitle, and the second paragraph set as body text rather than all-caps. SPECIFICITY, and why these selectors look absurd. Elementor writes its winning rules as `.elementor-9.elementor-9 .elementor-element.elementor-element-bb62719 p` -- four classes and a type, (0,4,1) -- with the page-id class deliberately doubled. A sane `.elementor-element-bb62719 p` is (0,1,1) and loses silently, which is exactly what the first version of this block did: the copy changed and the styling did not. Repeating the element-id class five times gets to (0,5,x) and wins outright rather than by load order, and it does it WITHOUT naming the page-id class -- which matters because this block appears on two pages under two different ids (home is .elementor-9, /package/ is its own). Two id sets throughout: home is a912153/fd596c2/4789797/bb62719, /package/ is 6084c95/10801c9/48cae00/c77f210. Listed rather than given a shared class, because neither capture has one and adding it would mean editing both. The measured problem: the section's 20px padding plus the wrapper's 10px put the title 30px from the section border, while the subtitle sat 20px below the title -- the heading was nearly as close to the edge as to the line that belongs with it. The fix moves those two numbers in opposite directions. */ .elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153, .elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95 { padding-top: 64px; padding-bottom: 56px; } /* Subtitle: stays uppercase per the doc, tracked out so it reads as a label rather than as body copy set in caps, and pulled tight under the title. */ .elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797, .elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00 { padding-top: 0; margin-top: 4px; } .elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797, .elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00, .elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797.elementor-element-4789797 p, .elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00.elementor-element-48cae00 p { /* Stated, not inherited. The homepage widget already had text-transform from Elementor and /package/'s did not, so without this the same subtitle rendered caps on one page and sentence case on the other. */ text-transform: uppercase; font-size: 13px; line-height: 1.6; letter-spacing: 2.08px; } /* Body paragraph: the source set this in caps, which is why a forty-word sentence read as a second heading. Sentence case, with a measure that stops it running the full width of the band. */ .elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719, .elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210 { margin-top: 20px; } .elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719, .elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210, .elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719.elementor-element-bb62719 p, .elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210.elementor-element-c77f210 p { text-transform: none; font-size: 16px; line-height: 26px; letter-spacing: normal; max-width: 62ch; margin-inline: auto; } @media (max-width: 767px) { .elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153.elementor-element-a912153, .elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95.elementor-element-6084c95 { padding-top: 44px; padding-bottom: 40px; } } /* ── Homepage "Rooms & Suites" carousel ────────────────────────────────────── Owner edits doc "9.10.26 HB Edits": the two template photos out, four of the owner's in. Also Lumos brief task 9 — "Homepage Rooms and Suites section is the main one" for stand-in photography. Written here rather than as image_src because these are CSS backgrounds on .swiper-slide-bg, not elements, so nothing in the DOM names the file. The two extra slides come from content/sections/carousel-brl-slide-{3,4}.json. Specificity matches Elementor's own `.elementor-9 .elementor-element.elementor-element-c8a2ae2 .elementor-repeater-item-X .swiper-slide-bg` (0,4,0) — beaten here by repeating the repeater class, so it holds without depending on load order or on the page-id class. */ .elementor-repeater-item-c417d44.elementor-repeater-item-c417d44.elementor-repeater-item-c417d44.elementor-repeater-item-c417d44.elementor-repeater-item-c417d44 .swiper-slide-bg { background-image: url("/cdn/sites/hotel-boreal/captured/7386d368fcb20925/rain-cloud-blue-room.webp"); } .elementor-repeater-item-777b206.elementor-repeater-item-777b206.elementor-repeater-item-777b206.elementor-repeater-item-777b206.elementor-repeater-item-777b206 .swiper-slide-bg { background-image: url("/cdn/sites/hotel-boreal/captured/9ecebdc8d4236669/AdobeStock_592100753.webp"); } .elementor-repeater-item-brl-slide-3 .swiper-slide-bg { background-image: url("/cdn/sites/hotel-boreal/captured/7e9852f71fe30cbc/mauve-room.webp"); } .elementor-repeater-item-brl-slide-4 .swiper-slide-bg { background-image: url("/cdn/sites/hotel-boreal/captured/99a890c41d2e216a/boreal-interior-6EB9CAB7.webp"); } /* The captured slides declare background-color:#833ca3 behind the image — a purple belonging to nothing on this site, which is what shows for the moment between the section lazy-loading and the image arriving. */ .elementor-element-c8a2ae2 .swiper-slide-bg { background-color: #14212B; } /* ── Carousel arrows: not selectable, and a softer slide ───────────────────── 1. SPAMMING THE ARROWS SELECTED THE NEXT HEADING. Measured 2026-09-15: the arrows compute `user-select: auto`, so a double- or triple-click on them starts a text selection — and because the button holds no text of its own, the browser extends it to the nearest selectable text in document order, which is the "Our Favorites" heading in the section below. Standard for carousel controls; the capture simply never set it. `pointer-events` and behaviour are unchanged, so this only stops the text highlight. 2. EASING AND LENGTH. Swiper's default is the browser's `ease`, which starts fast and lands hard. A first attempt at cubic-bezier(0.25,0.9,0.3,1) was worse, not better: measured frame by frame it put 73% of the distance into the first 25% of the time, so it lurched and then crawled. cubic-bezier(0.4,0,0.2,1) eases in AND out, and the widget's own speed went 500 -> 200 -> 420ms, because duration is the lever that actually reads as "smoother" — 200ms eased still arrives before the eye settles. Applies to everyone, including visitors who asked for reduced motion: the owner chose that on 2026-09-15 after seeing the alternative (approved.json, PENDING). */ .elementor-swiper-button, .elementor-swiper-button-prev, .elementor-swiper-button-next { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* Easing only. The duration is left to Swiper (see carousel.ts), which also decides when a move must be instant — the silent repositioning a loop does at the wrap. Forcing a duration here animated those teleports too, the whole strip sliding thousands of pixels, which is why this rule sets the curve and nothing else. The capture's reduced-motion rule (`html * { transition-duration: 0s !important }`) would zero every duration Swiper writes; carousel.ts re-writes them inline with `!important` so the sliders animate for everyone, which the owner chose. */ .elementor-main-swiper .swiper-wrapper, .swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* ── /blog/ cards: one shape for four photographs ─────────────────────────── Added 2026-09-15 with the owner's four journal cards. The listing's four cards took their images from four files with four different intrinsic ratios — Bentleyville.webp 1480x901 (1.64), the fall post's compressed_AdobeStock_1983890817-1024x684 (1.50), Split-Rock.webp 1480x1109 (1.33) and Hero-if-needed.webp 1480x669 (2.21) — and nothing in the capture constrains them, so each image kept its own ratio and the photograph block in each card ended at a different height. Measured on the built listing before this rule (image box height, px): width 1390 1378 1375 1372 spread 1440 255.69 280.55 314.70 189.84 124.86 1024 183.44 201.27 225.80 136.20 89.60 768 206.38 226.44 254.02 153.23 100.79 390 182.63 200.39 224.80 135.59 89.21 The card boxes themselves are already equal — the grid stretches them — so the divergence lands inside the card: the category label, the title and the Read More button start 125px apart at 1440 and the row reads as four different components. 4:3 is the ratio the capture shipped (the placeholder was 800x600, and the widget's own width/height attributes are 800x600), so this holds the shape the page was laid out for rather than inventing a new one; `cover` crops to fill it instead of letterboxing, and `height: auto` lets the ratio drive the box rather than the attribute. After, at the same four widths: every card's image box is 420.00x315.00, 301.33x225.98, 339.00x254.25 and 300.00x225.00 respectively — spread 0.00px at 1440/768/390 and 0.02px at 1024 (sub-pixel column rounding, present before this rule too). Card heights were already equal and stay equal: 431.00, 370.00, 398.25, 399.00. Scoped to the listing by the page's own body class (`page-id-737`, from the capture) so the same loop-item markup elsewhere is untouched. */ body.page-id-737 .e-loop-item img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; } /* ========================================================================== Journal posts — the owner's photographs inside the body (2026-09-15) ========================================================================== The three posts now carry the photographs from the owner's Drive folders: one featured image each and a figure under the numbered headings. The originals are every shape there is — 1480×452 (a 3.3:1 banner), 1480×669, 1480×987 (3:2), 1480×1109 (4:3) — and dropped in as-is the column read as a ragged stack: measured at 1440 the in-body figures ran 226px, 335px, 494px and 555px tall for the same 740px width, and the inline left a 6px descender gap under each (figure 232px for a 226px image). Two fixed shapes instead, cropped by object-fit so nothing is stretched: - the featured image at 3:2, which is what the template's own featured slot was (1024×683 in the capture, 740×494 rendered) — the page's top geometry does not move; - the in-body figures at 16:9, 740×416 at 1440, a step smaller than the featured image so the hierarchy reads. Spacing: the figure sits between its heading and the first paragraph, so it takes the paragraph's own rhythm — 16px below (the heading's margin-bottom already separates it above). `display:block` removes the descender gap. */ .elementor-location-single .elementor-widget-image img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; } .elementor-location-single .elementor-widget-theme-post-content .brl-post-figure { margin: 0 0 16px; } .elementor-location-single .elementor-widget-theme-post-content .brl-post-figure img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; } /* ========================================================================== Home journal cards — READ MORE on the photograph, at one height (2026-09-15) ========================================================================== Owner: "make sure the read more buttons on the three blogs are on the images and correctly aligned." Why they were not. Each card is a column: photograph, then heading, copy and button, with the heading pulled UP onto the photograph by a fixed margin-top:-238px (−307px on phones). Everything below the heading then flows downward from that anchor, so the button's position depends on how long the copy is — measured at 1440 the three buttons sat at y=516, 502 and 474 in cards whose photograph ends at 480: all three BELOW the picture, each by a different amount, and on phones the third card's photograph was clipped by the card being shorter than it (469 vs 477). At 768 (three 229px columns) the copy ran to y=409 under a 306px photograph — white text past the edge of the image it was meant to sit on. The fix anchors from the bottom instead. The photograph becomes the card's background layer (absolutely filling it, object-fit cover), the card keeps the photograph's 3:4 shape as its minimum, and the column is justified to the end: the button sits a fixed 24px above the photograph's bottom edge in every card, the copy stacks upward from it, and a longer copy simply grows upward. If content ever exceeds the 3:4 box the card grows and the photograph grows with it, so nothing can fall off the picture again. The negative margins go; the 20px gap the desktop column already uses applies at every width (the phone rules had set 55px and then clawed it back with −28/−37px margins). Measured at 1440, button top edge in the three cards: 516/502/474 -> one value, all three; photograph bottom 480 -> button bottom = 480 − 24 in each. At 390: 485/470/442 -> one value. Full table in docs/sessions (§10). The desktop hover-reveal of the button (.card-hover .hover-btn) is untouched. */ .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover { position: relative; aspect-ratio: 3 / 4; justify-content: flex-end; gap: 20px; padding: 24px 0; /* clip, not hidden: `hidden` makes the card a scroll container, and a scroll container with an aspect-ratio has NO automatic minimum height — measured at 768 the heading sat at y=−121, clipped above a 306px card that refused to grow for 458px of content. `clip` is not a scroll container, so the card's minimum is its content and it grows. The 09-14 rule above zeroed min-height for the seam fix; it is put back to auto here for the same reason. */ overflow: clip; min-height: auto; } .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-image.elementor-element { position: absolute; inset: 0; margin: 0; z-index: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-image .elementor-widget-container, .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-heading.elementor-element, .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-text-editor.elementor-element, .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-button.elementor-element { position: relative; z-index: 1; margin: 0; } /* ========================================================================== /blog/ READ MORE hover — grows in place instead of sliding left (2026-09-15) ========================================================================== Owner: "the read more hover effect is wrong, it should zoom in maybe, not sway to the left". The template's .elementor-animation-grow scales the anchor 1.1× about its centre, and the anchor is the full 420px card width with the label sitting at its LEFT edge (padding 10px 25px 10px 0, content justified start). Scaling a 420px box about its centre moves its left edge 21px left, so the label lurched leftward on hover rather than growing. The anchor is shrunk to its content and scaled from its left edge: the label and chevron grow 10% in place, rightward, and nothing moves. Measured at 1440: anchor 420px -> 126px wide; on hover it grows 126 -> 138px from x=60 with the label's left edge staying at 60. Before, a 1.1× scale about the centre of a 420px box moved that edge 21px left (computed, not measured: the template rule cannot be re-enabled in isolation). */ .elementor-1255.elementor-1255 .elementor-element.elementor-element-f2351e9 .elementor-button.elementor-animation-grow { display: inline-flex; width: auto; max-width: 100%; transform-origin: left center; } /* ========================================================================== Newsletter sign-up — the button is not the fields' size (2026-09-15) ========================================================================== Owner: "the signup button is a little bigger, not symmetrical with the fields". Measured at 1440: the three inputs are 40px tall, start 2px down, 1px border, square corners; the SIGN UP button is 43px tall, starts at 0, 3px radius. So it stood 2px proud at the top and 1px at the bottom with rounded corners in a row of square ones. Given the fields' box: 40px, the same 2px offset, square. Both pages that carry the block (home 3cc8324, /package/ 67035d3). The error-state rules for the fields follow in the next block, written with the validation itself. */ .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .elementor-button[type="submit"], .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .elementor-button[type="submit"] { height: 40px; min-height: 40px; margin-top: 0; border-radius: 0; box-sizing: border-box; } /* The offset, exactly. The field groups are flex rows 41px tall with align-items:center, so each 40px input sits at y=0.5; the button's group is align-items:flex-end, so a 1px margin put the button at y=1.0 — half a CSS pixel low, which on a 2× screen is one whole device pixel and shows as the button's top and bottom edges both sitting below the field's (the owner's zoomed capture, 2026-09-15). Centred like the fields instead: 0.5 = 0.5. */ .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .elementor-field-group.e-form__buttons, .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .elementor-field-group.e-form__buttons { align-items: center; } /* ========================================================================== Newsletter sign-up — validation messages (2026-09-15) ========================================================================== Owner: "make all fields required, if someone clicks inside and clicks outside show something, verify email syntax". The behaviour is in FormIsland.svelte, which inserts one `` after each input and writes the message into it; this is what that span looks like, plus the field's error border and the (mocked) success line. Measured at 1440 on both bands: the band behind the form is #26465C (rgb(38,70,92)), the inputs' text and 1px border are #FFF, fields are 40px tall in a 41px flex group inside a wrapping flex row (170 / 170 / 204 / 136 button, all at y=7806 on home). An in-flow message would grow that row and push the button down, so the span is taken out of flow (`position:absolute; top:100%`) inside the group, which already computes `position:relative`. Verified: the button's top stays 7807.89 with three errors showing. Colour #FFB4A8 on #26465C = 5.84:1 (AA for normal text at 13px, and clearly not the white the valid fields use); #FF8A80 was rejected at 4.35:1. The success line keeps the band's own white, 9.94:1. Below 767px the fields stack full-width (y 8656/8706/8756/8806 at 390), so an absolute message would land on the next input; there it goes back in flow and wraps under its own field. */ .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .elementor-field-group, .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .elementor-field-group { position: relative; } .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .brl-field-error, .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .brl-field-error { position: absolute; top: 100%; left: 0; display: block; width: max-content; max-width: 100%; margin-top: 4px; font-size: 13px; line-height: 18px; color: #FFB4A8; pointer-events: none; } .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .elementor-field[aria-invalid="true"], .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .elementor-field[aria-invalid="true"] { border-color: #FFB4A8; } .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .brl-form-message, .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .brl-form-message { display: block; width: 100%; margin: 12px 0 0; font-size: 15px; line-height: 22px; color: #FFFFFF; } @media (max-width: 767px) { .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .brl-field-error, .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .brl-field-error { position: static; flex-basis: 100%; width: auto; max-width: none; } } /* ── Newsletter sign-up: a second pass, reverted the same day ─────────────── "Still not great" led to an even 10px gap between the four boxes, the label at 15px, a 1px border on the button, and its own full-width row below 1024. Owner: "you made first name last name and email and signup all sit across from each other, that is really bad, old way was better, just the button alignment had to be fixed." Removed. The row is the template's again — the four boxes touching — with only the button's box corrected (above). The one thing kept from that pass, below: at 768–1024 the button's 20% column is 64–90px and "SIGN UP" with the template's 2px tracking is ~75px, so the label wrapped and the 40px button clipped it; the tracking is tightened there so it stays one line in the same box. */ @media (max-width: 1024px) and (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-3cc8324 .elementor-button[type="submit"], .elementor-891.elementor-891 .elementor-element.elementor-element-67035d3 .elementor-button[type="submit"] { letter-spacing: 0.5px !important; /* the template's tracking rule carries !important */ } } /* ── Home journal cards: a scrim under the text (2026-09-15) ───────────────── Owner: "the text on the images is hard to read, what can we do?" — measured first. White text straight on the photograph, no shadow, no overlay. Contrast against the brightest tenth of the pixels behind it, at 1440: Bentleyville heading 5.4:1 copy 2.0:1 Split Rock heading 2.6:1 copy 2.7:1 Restaurants heading 1.4:1 copy 1.9:1 (4.5:1 is the floor) A gradient scrim on the lower part of the photograph, transparent at 45% of the height and the site's navy (#26465C, the buttons' colour) at 82% opacity at the bottom. The text is bottom-anchored (see the card block above), so everything it covers is text; the top of the photograph is untouched. Chosen over a flat dim (dims where there is no text) and a text-shadow (fails at 16px on a near-white background). Painted on the image widget's ::after so it is part of the photograph layer and the hover-scale carries it. Measured after: see docs/sessions §15. */ .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-image.elementor-element::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(38, 70, 92, 0) 16%, rgba(38, 70, 92, 0.68) 40%, rgba(38, 70, 92, 0.88) 100%); pointer-events: none; } /* First try started the fade at 45% — but the heading begins at 36–45% of the card at desktop widths, so it sat on the untouched photo (restaurants heading 1.6:1). The fade now starts at 16%, is at 62% by 40% where the headings land, and 88% at the bottom under the copy. At 768–1024 the three columns are so narrow the copy fills the card from 5% down, so the whole photograph carries the scrim there, lighter at the top. */ @media (max-width: 1024px) and (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover > .elementor-widget-image.elementor-element::after { background: linear-gradient(to bottom, rgba(38, 70, 92, 0.55) 0%, rgba(38, 70, 92, 0.78) 30%, rgba(38, 70, 92, 0.88) 100%); } } /* ── Journal cards: READ MORE lost its edge under the scrim (2026-09-15) ─── Owner: "the read more buttons color blends in with the filter". Measured: the button is the site navy #26465C and the scrim under it is the same navy at 88%, so the composited ground in a 12px ring around the button reads rgb(38,64,82)–(49,78,99): contrast 1.0–1.14:1 on three sides. No edge. The site already has a rule for a navy button on navy ground — "Explore More" in Our Favorites carries a 1px white border — so the same treatment, not a new colour: the white line is 9:1 against the navy either side of it, and the button stays the button it is everywhere else on the page. */ .elementor-9.elementor-9 .elementor-element.elementor-element-84ea939 > .e-con.card-hover .elementor-button { border: 1px solid #FFFFFF; } /* ── Journal posts: the link lives in the heading (2026-09-15) ────────────── Owner: "embed the links in the headings themselves, don't paste any urls, it is looking ugly." The two guides listed each place's site as a bare URL in its own paragraph under the heading (five in the restaurants post, five in the things-to-do post, one prefixed "Learn more:"). Those paragraphs are gone and the heading text is the link, opening in a new tab. The template colours any link in the body #CC3366; a heading that turns pink stops being a heading, so the link keeps the heading's colour and weight and says it is a link with a thin underline; hover takes the site navy. */ .elementor-1262.elementor-1262 .elementor-widget-theme-post-content h2 a { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .elementor-1262.elementor-1262 .elementor-widget-theme-post-content h2 a:hover, .elementor-1262.elementor-1262 .elementor-widget-theme-post-content h2 a:focus-visible { color: #26465C; } /* ========================================================================== Home "Our Favorites": the card on the page's centre line (2026-09-15) ========================================================================== Owner, shown five compositions drawn to scale, chose A: "centre the card, equal sides… but preserve this funkiness" — the tilted white-framed photo overhanging the card and the offset side photos stay. Why it was lopsided: the row is three columns at 20 / 40 / 40 %, the card lives in the middle one, so its centre sat 128px left of the page's centre at every desktop width while "Our Favorites" above and "Experience the North Shore" below are centred; and the card, now six entries at 144px each, ended 400px below the left column and 630px below the right. 1. Equal sides: 30 / 40 / 30. The middle column, the tilted photo and the card do not move relative to each other; the whole middle column moves onto the centre line. 2. The card's rhythm: 144px per entry was 20px of air above AND below every line. Now 6px between a title and its line, 18px between entries; the words and sizes are the template's. Six entries fit the height four took. 3. One floor: the last photo in each side column ends on the card's bottom edge (measured and set below). */ @media (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-7b6ffcc.elementor-element-7b6ffcc, .elementor-9.elementor-9 .elementor-element.elementor-element-405bf39.elementor-element-405bf39 { --width: 30%; } } .elementor-9.elementor-9 .elementor-element.elementor-element-2c8695a.elementor-element-2c8695a { gap: 0; row-gap: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-2c8695a > .elementor-widget-heading.elementor-element { margin: 0 0 6px; } .elementor-9.elementor-9 .elementor-element.elementor-element-2c8695a > .elementor-element-3578733.elementor-element { margin: 18px 0 0; padding-top: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-2c8695a > .elementor-element-3cf02d9.elementor-element { margin: 6px 0 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-2c8695a > .elementor-widget-button.elementor-element { margin: 24px 0 0; } /* 3. One floor. The side columns stretch to the row's height, which the card sets, so the last photo in each is pushed to the column's end with margin-top:auto and lands on the card's bottom edge at ANY width — a fixed offset (the template pins the left column's second photo at top:563px) can only be right at one. That photo keeps its −27px sideways nudge, just from a relative position instead of an absolute one. The side photos are given matching heights (460 / 560 left, 460 / 460 right) so the two sides read as a pair; before, the right column's second photo was 256px tall under a 300px one and the column stopped 540px above the card. */ @media (min-width: 768px) { .elementor-9.elementor-9 .elementor-element.elementor-element-f802ad3.elementor-element-f802ad3 img { height: 460px; object-fit: cover; } .elementor-9.elementor-9 .elementor-element.elementor-element-f7dda14.elementor-element-f7dda14 { position: relative; top: auto; left: -27px; margin-top: auto; margin-bottom: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-f7dda14.elementor-element-f7dda14 img { height: 560px; } .elementor-9.elementor-9 .elementor-element.elementor-element-459bc70.elementor-element-459bc70 img { height: 460px; } .elementor-9.elementor-9 .elementor-element.elementor-element-1a78adc.elementor-element-1a78adc { margin-top: auto; margin-bottom: 0; } .elementor-9.elementor-9 .elementor-element.elementor-element-1a78adc.elementor-element-1a78adc img { width: 100%; height: 460px; object-fit: cover; object-position: center; } } /* ========================================================================== Reservation form — validation messages (2026-09-15) ========================================================================== Owner: "http://localhost:4321/reserve-dates/ on this form and in popup make sure we have input validation." The behaviour is in ReserveForm.svelte, which now writes its own message into a `` after each control instead of handing the job to the browser's bubbles; this is what that span looks like, plus the field's error border. Scoped to `.brl-reserve__form`, not to the newsletter's Elementor widget ids — those rules (further up) are white-on-navy for the band and would not reach here, and the two forms must not share a selector because they sit on different grounds. Measured at 1440 and 390, on /reserve-dates/ and inside the pop-up: the ground behind every instance of this form is #FFFFFF — body on the page (nothing between the form and BODY paints a background) and `.brl-popup__panel` in the modal, so one colour serves both. #A33 (rgb(170,51,51)) on #FFF = 6.50:1, comfortably past 4.5:1 at 13px, and it is the red this form already uses for the required marker and for the send-failure rule, so validation introduces no new hue. Placement. `.brl-reserve__grid` is a two-column grid above 720px with a 20px row gap, and `.brl-field` is itself a grid (label / control), so a message added in flow would grow its row and push the button down — the thing that must not move while someone is fixing a field. Above 720px the span is therefore taken out of flow into that 20px gap: 13px text on an 18px line plus a 2px offset is exactly 20px, so it occupies the gap and nothing below it moves. Measured on /reserve-dates/ with all five messages showing: the button's top stays 852 and scrollHeight 1381 at 1440, 892/1397 at 1024 and 768, 780/1373 at 720 — and each message is one 18px line whose bottom lands exactly on the gap's bottom edge (20px overhang, 0 collision), the longest of them 175px inside a 326px column at the 720px breakpoint. Two places keep it in flow instead, because there the fields are stacked one per row and an absolute message would land on the next control: below 720px, and inside `.brl-popup`, whose panel is a single column at every width (560px at 1440). No transition is added, so there is nothing for prefers-reduced-motion to turn off. */ .brl-reserve__form .brl-field-error { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: #A33; pointer-events: none; } @media (min-width: 720px) { .brl-reserve__form .brl-field { position: relative; } .brl-reserve__form .brl-field-error { position: absolute; top: 100%; left: 0; width: max-content; max-width: 100%; margin-top: 2px; } /* One column inside the panel at every width, so back in flow. */ .brl-popup .brl-reserve__form .brl-field { position: static; } .brl-popup .brl-reserve__form .brl-field-error { position: static; width: auto; max-width: none; margin-top: 6px; } } .brl-reserve__form .brl-field :is(input, select, textarea)[aria-invalid="true"] { border-color: #A33; } /* ── Compact header: menu button left, logo centred (owner 2026-09-15) ──────── "in the mobile version shift the hotel boreal logo to center of the navbar and the three lines for side bar to the left". The compact header (fcc419a, the one with the hamburger) is what shows at <=1024px, so the rule follows it rather than a phone-only width. The captured row is flex row-reverse + space-between, which puts the logo left and the menu right. As a three-column grid (1fr auto 1fr) the logo is centred on the header itself, not on whatever space the button leaves. The off-canvas panel already slides in from the left, so the button that opens it now sits on the same side. Both items stay in flow, so the header's height is still set by the logo. */ @media (max-width: 1024px) { .elementor-26 .elementor-element.elementor-element-fcc419a.elementor-element-fcc419a { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .elementor-26 .elementor-element.elementor-element-fcc419a > .elementor-element-62f1cdf.elementor-element-62f1cdf { grid-column: 1; grid-row: 1; justify-self: start; width: auto; max-width: none; } .elementor-26 .elementor-element.elementor-element-fcc419a > .elementor-element-5422b81.elementor-element-5422b81 { grid-column: 2; grid-row: 1; justify-self: center; /* Its captured width is a percentage (8% / 25%), which against an auto grid column resolves to almost nothing -- 6.6px at 768 -- and the image hangs off it to the right. Sized by the logo instead. */ width: auto; max-width: none; } .elementor-26 .elementor-element.elementor-element-62f1cdf.elementor-element-62f1cdf button.elementskit-menu-hamburger { float: left; } } /* ── Button hover: rust #9D4410 → mauve #9D6F6D, site wide (owner 2026-09-16) ── "i need the hover color for homepage buttons to mauve: #9D6F6D". The homepage's six button hovers are NOT the whole of it. The same #9D4410 is set by nine captured rules on three Elementor documents, and only one of them is the homepage: .elementor-9 home six buttons (Reserve My Dates, Explore Full Map, Explore More, Read More x3) .elementor-26 header the Reserve My Dates pill — on every route .elementor-666 /contact-us/ SEND A MESSAGE and REACH OUT — the rules ship in all 24 captured stylesheets, the markup is on that one route only (checked in the built HTML) Changing the homepage alone would leave the SAME header button hovering mauve on / and rust everywhere else, so the owner chose site wide (asked and answered 2026-09-16). All nine rules are restated here. The selectors are copied VERBATIM from the captured stylesheets rather than made more specific: this file loads after them, so an identical selector wins on source order. If a re-capture changes an element id, the rule below stops matching and the button goes back to rust — visible, not silent. The header rule also carries border-color: #9D4410 (its border is 1px solid), so that moves with the background or the pill keeps a rust outline on hover. The two colours it sets on text and fill (#FFFFFF) are unchanged and not restated. Untouched, deliberately: .brl-announce__btn:hover (#EDB662, the amber band's own button, which sits on an amber band). The reserve form's own submit (.brl-reserve__form .brl-reserve__btn) was #1B3546 and is now mauve as well, asked for separately the same day -- see its own rule. Neither was ever #9D4410. Nine buttons have no hover background at all, before or after, and are not missing from the list below: the seven transparent elementor-animation-grow text-links (Explore the Hotel, the hero Reserve My Dates, View Guide and Read The Blog on /, and three Read More on /blog/), and the newsletter Sign Up on / and /package/. A bare `button:hover{background:#CC3366}` in a theme stylesheet does match Sign Up, but it loses the cascade to .elementor-button's own white: forced :hover and read after the transition, it stays #FFFFFF. It has never painted pink. Contrast, computed: #FFFFFF on #9D6F6D is 4.26:1, against the rust's 6.43:1. The labels measure 14px/400, so WCAG AA wants 4.5:1 and the mauve misses it — the rust met it. The resting state (#FFFFFF on #26465C, 9.94:1) is untouched and still passes, so text is only ever below AA while the pointer is on the control. It is a regression on the hover state, taken on the owner's instruction, and recorded as one in approved.json. */ .elementor-9 .elementor-element.elementor-element-d58d5e7 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-d58d5e7 .elementor-button:focus, .elementor-9 .elementor-element.elementor-element-b0bf307 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-b0bf307 .elementor-button:focus, .elementor-9 .elementor-element.elementor-element-b95b6c2 .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-b95b6c2 .elementor-button:focus, .elementor-9 .elementor-element.elementor-element-d38eeca .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-d38eeca .elementor-button:focus, .elementor-9 .elementor-element.elementor-element-a3fedcb .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-a3fedcb .elementor-button:focus, .elementor-9 .elementor-element.elementor-element-1a88d7b .elementor-button:hover, .elementor-9 .elementor-element.elementor-element-1a88d7b .elementor-button:focus, .elementor-666 .elementor-element.elementor-element-57d85da .elementor-button:hover, .elementor-666 .elementor-element.elementor-element-57d85da .elementor-button:focus, .elementor-666 .elementor-element.elementor-element-d22ac20 .elementor-button:hover, .elementor-666 .elementor-element.elementor-element-d22ac20 .elementor-button:focus { background-color: #9D6F6D; } /* !important on the background, and only here. The capture locks this one button's resting background with `.elementor-26 .elementor-element-71b0f28b .elementskit-btn {background-color:#26465C!important}` — ElementsKit writes its widget styles that way. An !important declaration beats a non-important one whatever the specificity, so the pill's background has NEVER moved on hover: the rust rule below it could not paint either, and the only thing that ever changed was the border. Measured by forcing :hover through CDP and reading the painted value after the 0.3s transition, which is also why the first pass of this change looked correct and was not. border-color needs no !important; the capture does not mark it. */ .elementor-26 .elementor-element.elementor-element-71b0f28b .elementskit-btn:hover { background-color: #9D6F6D !important; border-color: #9D6F6D; } /* ── /rooms/ — the 21 rooms, in the template's own room cards (owner 2026-09-16) ─ First pass rendered them as a plain
    . The owner: "it's just a big block of some text man, you had the template for room right? add those rooms like that in the template". So the markup is now the captured listing's own — `.bb-grid > .bb-card > .bb-card__title > h3.bb-card__name`, `.bb-card__meta > span.bb-cap`, `p.bb-card__desc` — and `design/css/rooms.css` styles them by construction. The section sits inside `.bb`, which is where `--navy`, `--ink` and `--ui` are defined, so the card picks up the widget's own type and colour without restating any of it. Only four things need saying here. 1. THE TEMPLATE HIDES THE DESCRIPTION. `rooms.css` ships `.bb-card__desc{display:none!important}` — the booking widget put the copy in the markup and showed it on the room-detail page instead. The descriptions are the whole point of this change, so they are turned back on, with !important to beat that one, and scoped to `.brl-rooms__desc` so the rule cannot reach a card anywhere else. 2. THE CARDS HAVE NO PHOTOGRAPH. The owner asked to leave the room images out and the doc carries none, so `.bb-car` is absent. The template's card is shaped by its 16:10.4 photo; without it, 21 cards in two columns run together, so a hairline and its own top padding give each one an edge. This is the only styling invented here, and it is invented because a part of the template was deliberately removed, not to improve on it. 3. THREE COLUMNS, NOT TWO. `.bb-grid` is `1fr 1fr` for cards that are mostly photograph. These are a name, three or four caps and a short paragraph, so they are sized by `minmax(320px, 1fr)` instead: three across inside the 1160px measure, two below ~1060, one below ~740, with no media query deciding it. 4. `.bb-cap` is the template's tracked-out label at 11.5px/700. The doc's meta line ("Queen Bed · Private Bath · Lake View · Sleeps 2") is split on the middle dot and each part becomes one cap — the doc's own words, never relabelled. Not added: `.bb-card__btns`. The template card ends in Room Details and Add to Trip, both of which go nowhere now — there are no room pages and nothing to book — and 21 invented Reserve buttons sitting above the one form the page exists for is not the template either. */ .brl-rooms__grid.bb-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 44px; padding: 10px 0 0; margin-top: 36px; border-top: 1px solid #E2E2E2; } .brl-rooms__card.bb-card { padding: 26px 0 28px; border-bottom: 1px solid #E2E2E2; } /* Two classes and !important, to beat rooms.css's own `.bb-card__desc{display:none!important}` — see 1 above. */ .brl-rooms__card .brl-rooms__desc { display: block !important; margin: 0; font-size: 16px; line-height: 1.6; color: #3A3A3A; max-width: 46ch; } /* The template's name is 29px, sized against a card that is mostly photograph. With 21 of them in a column of text that is a headline per paragraph, so it comes down to the size the rest of this page reads at. */ .brl-rooms__card .bb-card__name { font-size: 21px; } /* .bb-card__title is flex + space-between, for a name beside a price block. There is no price here, so it has nothing to space and only adds its 22px top margin. */ .brl-rooms__card .bb-card__title { display: block; margin-top: 0; } .brl-rooms__card .bb-card__meta { flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 10px; } @media (max-width: 600px) { .brl-rooms__grid.bb-grid { margin-top: 28px; gap: 0; } } /* ── "Opening December 2026" in mauve (owner 2026-09-16) ────────────────────── The announcement band's eyebrow, `.brl-announce__eyebrow` on the homepage. Was #E0A44A, the band's amber, at 7.47:1 on the band's #14212B. CONTRAST: #9D6F6D on #14212B is 3.84:1. The eyebrow is 13px/600 uppercase, which is normal text for WCAG, so AA wants 4.5:1 and this misses it — the amber passed. Asked for by name and applied as asked; the number is in approved.json so whoever signs it signs the number too. #C99B99 is the same hue at 6.73:1 and would pass, if the owner would rather have the tint than the exact value. */ .brl-announce__eyebrow { color: #9D6F6D; } /* ── /package/ RESERVE THIS PACKAGE — a hover background it never had ───────── Owner 2026-09-16, on seeing the mauve on localhost: "the offer page button (Reserve This Package) isn't done yet". It was not missed by the rule above: it is the one solid button on the site whose captured CSS sets NO hover background at all. Measured — the only :hover the capture gives it is `--e-transform-scale: 0.95`, so it shrinks 5% and stays #26465C. Rust was never involved, which is why restating the nine rust rules did not reach it. So this ADDS a hover state rather than recolouring one. The scale-on-hover is left alone: it is the button's own captured behaviour and the owner asked for a colour, not for the motion to stop. Swept for others before writing it, at 1440 on all 23 routes: seven more buttons have no hover background, and all seven are transparent link-style buttons (background rgba(97,206,112,0)) — "Explore the Hotel", the hero "Reserve My Dates", "View Guide" and "Read The Blog" on /, and three "Read More" on /blog/. Filling those on hover would turn a text link into a button, which is a design change nobody asked for. Left as they are; listed in the session note so the choice is visible rather than an oversight. Contrast is the same as the rest: #FFFFFF on #9D6F6D is 4.26:1 and the label measures 14px/600, which is not WCAG large text (that starts at 18.66px bold), so the hover state misses AA's 4.5:1 exactly as the others do. The 1px white border is untouched — it reads on mauve as it did on navy. Same mechanism as the block above: the selector is the capture's own, with :focus added the way every other Elementor button rule on this site pairs them, and this file loads last. */ .elementor-891 .elementor-element.elementor-element-7760f96 .elementor-button:hover, .elementor-891 .elementor-element.elementor-element-7760f96 .elementor-button:focus { background-color: #9D6F6D; }