nested inside the template's own one doubles this padding. This rule is now the ONLY thing that handles it. The server-side cleaner used to rewrite the inner

into a

, but matching openers to closers by counting left one unclosed element on every page - which is what pushed the footer inside the content container on About, Rooms & Suites and Events. Cancelling the padding in CSS cannot damage the markup. (.ce-unwrapped is kept so any page cached from the previous behaviour still renders correctly.) */ .about .ce-unwrapped, section.about section.about { padding: 0 !important; } h3.generic { padding: var(--ce-space-lg) 0; font-size: clamp(1.25rem, 2.2vw, 1.875rem); line-height: 1.6; letter-spacing: 0.12em; } h3.generic.no-padding { padding: 0; } h2.generic_sub { /* Was clamp(1.6rem, 4vw, 3.125rem) = 50px on a desktop, against 30px in the original. That single value is most of why the repaired pages read as shouty next to /orig/. */ font-size: clamp(1.25rem, 2.4vw, 1.875rem); line-height: 1.35; letter-spacing: 0.15em; margin: var(--ce-space-sm) 0; } /* A heading or paragraph the editor left blank (marked server-side, because CSS :empty does not match whitespace). h3.generic gives 60px of padding top and bottom, so one empty heading is 120px of dead space - the Family Suites gap, and the same pattern on the other room categories. */ .ce-blank { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } /* Section headings. This rule used to set `margin: 0 0 var(--ce-space-sm)`, which zeroed the top margin the original .mt-50 / .mt-40 utility classes were providing. Measured against /orig/ that removed 20px above the heading on Events and Airport Transfer and 30px on the room pages, so every inner-page heading sat hard against the photograph above it while keeping its space below - exactly the asymmetry reported. The top margin is restored as a token, so About, Concierge, Rooms and Contact now share one value instead of relying on whichever utility class a given template happened to use. */ .ce-page-title, section.about h1.text-center, section.about h2.text-center { /* 1.875rem = 30px, the size the original site used for these headings. An earlier clamp took them to 35.2px on a desktop, which is what made the room-category headings look wrong next to /orig/. Still fluid below. */ font-size: clamp(1.25rem, 2.4vw, 1.875rem); line-height: 1.35; letter-spacing: 0.14em; /* Tracked, centred capitals sit optically left of centre because the trailing letter-space is counted in the line width. Adding the same amount as first-line indent puts them back on the axis. */ text-indent: 0.14em; margin: var(--ce-heading-top) 0 var(--ce-space-sm); } /* A heading that is genuinely the first thing in its section does not need the extra space - the section's own padding already provides it. */ section.about > .container > .row:first-child .ce-page-title:only-child { margin-top: 0; } .regular-phrase, .split-view p { padding: 0 0 var(--ce-space-sm); line-height: 1.85; max-width: 72ch; margin-inline: auto; } .regular-phrase--generic, .regular-phrase--giant, .regular-phrase--medium { font-size: clamp(1.05rem, 1.6vw, 1.5625rem) !important; line-height: 1.7; } .frame { margin: var(--ce-space-md) auto; max-width: min(72ch, 100%); padding: var(--ce-space-sm); font-size: clamp(1rem, 1.4vw, 1.3125rem); line-height: 1.7; } /* Utility spacers were authored as fixed rem values that never shrink. The large ones are the ones that hurt on phones. */ @media only screen and (max-width: 767px) { .mt-100, .mb-100, .pt-100, .pb-100 { margin-top: 0; margin-bottom: 0; } .mt-100 { margin-top: var(--ce-space-md); } .mb-100 { margin-bottom: var(--ce-space-md); } .pt-100 { padding-top: var(--ce-space-md); } .pb-100 { padding-bottom: var(--ce-space-md); } .mt-80, .mt-50, .mt-40 { margin-top: var(--ce-space-sm); } .mb-80, .mb-50, .mb-40 { margin-bottom: var(--ce-space-sm); } .pt-30, .pb-30, .pr-30, .pl-30 { padding: var(--ce-space-xs); } } /* An empty grid column is a 25% wide hole on desktop and pointless on mobile; several pages use them purely as spacers. */ @media only screen and (max-width: 991px) { .row > [class*="col-md-"]:empty, .row > [class*="col-sm-"]:empty { display: none; } } /* Nested .container repeats the 15px gutter at every level. */ .container .container { width: 100%; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------------------- 7. Legacy pasted content - safety net Inline styles are stripped server-side by ce_clean_content(). These rules catch anything that reaches the browser anyway (for example content edited in the admin panel after this release). They are scoped to page content and deliberately narrow. ---------------------------------------------------------------------- */ section.about [style*="width"], section.about [style*="Width"] { max-width: 100% !important; } section.about [class*="col-"][style] { width: auto !important; padding-left: 15px !important; padding-right: 15px !important; } section.about [style*="position: absolute"], section.about [style*="position:absolute"] { position: static !important; } /* The safety net above is for geometry pasted into the admin panel. A slider that measures itself and writes the result back as an inline style is not pasted content, and clamping it breaks it: camRollSlider gives the film strip an inline width of (number of photos x 1140px), and because the strip is a flex row that is allowed to wrap, a max-width of 100% folded every photo onto its own line - the strip then slid sideways into nothing and the large picture area went blank after the first "next". The sliders are therefore exempt from all three rules above. */ section.about .crs-wrap, section.about .crs-wrap [style], section.about .owl-carousel [style] { max-width: none !important; } section.about .crs-wrap [style*="position: absolute"], section.about .crs-wrap [style*="position:absolute"], section.about .owl-carousel [style*="position: absolute"], section.about .owl-carousel [style*="position:absolute"] { position: absolute !important; } /* ------------------------------------------------------------------------- 8. Galleries (camRollSlider + lightGallery) ---------------------------------------------------------------------- */ .crs-wrap { margin-bottom: 4.5rem; } /* the thumbnail bar sits 50px outside */ .crs-wrap div.prev, .crs-wrap div.next { cursor: pointer; min-width: 44px; } .crs-wrap div.prev:focus-visible, .crs-wrap div.next:focus-visible, .crs-bar-roll-item:focus-visible, .crs-screen-item:focus-visible { outline: 3px solid var(--ce-focus); outline-offset: -3px; } .crs-bar-roll-item[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px #000 inset; } .crs-screen-item { background-color: #f2f0ed; } @media (max-width: 640px) { .crs-wrap { margin-bottom: 3.5rem; } .crs-wrap div.prev { left: 6px; } .crs-wrap div.next { right: 6px; } } /* The picture grid on the Art / Architecture page. */ div.imgthumb { height: clamp(180px, 26vw, 25rem); margin-bottom: var(--ce-space-sm); } #gal [data-src] { cursor: zoom-in; } #gal [data-src]:focus-visible { outline: 3px solid var(--ce-focus); outline-offset: 2px; } /* lightGallery must clear the fixed header. */ .lg-backdrop, .lg-outer { z-index: 10050; } .panoramic iframe { height: 100vh; height: 100dvh; } .panoramic button.close { cursor: pointer; } /* ------------------------------------------------------------------------- 9. Rooms ---------------------------------------------------------------------- */ .room-name { min-height: 100%; padding: 0.9375rem 0.5rem; } .room-name small.roomhighlight { opacity: .75; } /* Room-number cards under each category on /roomsuites. The markup centred them with an inline `display:flex; justify-content:center` on the row. That centres one line and one line only: flex containers do not wrap by default, so on a phone five cards were squeezed onto a single line at 61px each instead of falling onto a second line. Adding flex-wrap centres every line, complete or not, at every width - which is also what makes an incomplete final row sit in the middle rather than against the left edge. Scoped to this one class so no other row, grid or gallery is affected. */ .ce-room-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } /* Bootstrap 3 floats its columns. A float is ignored on a flex item, but clearing it keeps the intent explicit. Widths, padding, borders and the card itself are untouched. */ .ce-room-grid > [class*="col-"] { float: none; } /* Wrapped lines need to clear each other; a single-line group is unchanged because there is no second line for the gap to appear between. */ .ce-room-grid > [class*="col-"] + [class*="col-"] { margin-top: 0; } .ce-room-grid { row-gap: var(--ce-space-sm); } div.room-block { margin-bottom: var(--ce-space-md); } div.room-block div.room-block-data { padding: var(--ce-space-md) var(--ce-space-sm); } div.room-block div.room-block-data.mt-100 { margin-top: 4.5rem; } @media only screen and (max-width: 767px) { div.room-block div.room-block-data.mt-100 { margin-top: 3.5rem; } div.room-block div.room-block-data span.title { padding: 0.75rem 1rem; margin-bottom: 1rem; } } .rezlink { display: inline-block; padding: 0.75rem 1.5rem; min-height: 44px; } /* ------------------------------------------------------------------------- 10. Contact page The template carried an inline stylesheet with `input, textarea, button { width: 300px }`, which is what pinned the form into a narrow strip while the rest of the row sat empty. ---------------------------------------------------------------------- */ .ce-contact-grid { display: block; } #maps form { max-width: 100%; } #maps input, #maps select, #maps textarea, #maps button { width: 100%; max-width: 100%; font-size: 1rem; min-height: 48px; } #maps textarea { min-height: 160px; } #maps label { display: block; font-size: 0.95rem; font-weight: 500; padding-bottom: 0.25rem; color: var(--ce-ink); } /* The gold is the colour this button has always been: it came from the page-wide