/* ========================================================================== St Helen's — brand update layer -------------------------------------------------------------------------- Source: "St Helen's Hotel Website: Brand Update — Scope confirmation form", issued 16 Sep 2026, ref sthelenshotel.ie / ticket #87220381. Load order: 1. assets/css/brand-map.css generated, re-states every hard-coded old-brand rule with a token 2. assets/css/theme-overrides.css <- this file. Tokens + the rules that must win over the generated map. The mirrored wp-content/ files are NEVER edited, so the capture stays faithful and this layer survives a re-pull. Every value below is tagged with the form item it comes from: [A1] etc. = confirmed in the form [?] = the form leaves it open; flagged in README under "Open items" EDITOR PARITY (added): the per-element content rules below (Discover More, View Rooms / Learn More, the light-section text) carry !important. On the front end this file loads last and wins ties on source order; inside the Elementor editor, Elementor injects each element's generated CSS AFTER this file, so an equal-specificity rule would win there and the canvas would show the old colours. !important makes these win on specificity in BOTH contexts, so backend and frontend match. ========================================================================== */ :root { /* ---- confirmed palette [A1] ------------------------------------------ */ --sth-bg: #EAE4D9; /* [A1] main background confirmed Yes */ --sth-sage: #717966; /* [A1] header, sage green amended 8 Oct 2026 from 8F9784 */ --sth-text: #232C1C; /* [A1] body + heading text amended from 4B3621 */ --sth-copper: #A85C48; /* [A1] hover state, warm copper confirmed Yes */ --sth-white: #FFFFFF; /* ---- open items ------------------------------------------------------ */ /* [D1] The live site alternates two background tones, which gives the page its banding. The new palette supplies only one background. D1 asks whether to flatten to one colour or keep the bands, and is UNANSWERED. Default here KEEPS the banding (the less destructive reading), using a tint of --sth-bg. This tone is derived, it is not in the brandbook. To flatten instead, set this to var(--sth-bg). */ --sth-bg-alt: #F5F1EB; /* [A2] DECIDED (David, 30 Sep 2026): #2B2E27, the second of the two options in the form (4.55:1 on the ORIGINAL sage #8F9784). AMENDED (David, 8 Oct 2026): the sage went one shade darker to #717966, which drops #2B2E27 to 3.04:1, below AA. White is 4.54:1 on the darker sage, so everything in the sticky header is now white — text, buttons, social icons and the logo (which is the original white artwork anyway). */ --sth-nav-on-sage: #FFFFFF; /* the form's two dark options were #2B2E27 (3.04:1) and #392919 (3.08:1) on the darker sage - neither passes AA for normal text */ /* [C13] Copper on sage is 1.62:1, so copper cannot be a hover colour on the header. The form asks for a second hover colour and is UNANSWERED. Using the nav text colour so hover stays legible. */ --sth-header-hover: var(--sth-nav-on-sage); /* Transport panel background. Was the OLD brand brown #4B3621 (David, 30 Sep 2026); changed to the dark sage to match the header (David, 8 Oct 2026). White text on it is 4.54:1. */ --sth-transport-bg: var(--sth-sage); /* Footer (David, 12 Oct 2026): the darker sage with white content, replacing the pale background and old-brand brown of 30 Sep 2026. Everything in the footer — text, links, social glyphs, the sister-hotel lock-up and the box borders — reads from these two tokens, so the whole block follows. White on #5A6152 is 6.6:1; the cream hover is 5.2:1. Copper is NOT usable here: it manages about 2:1 on the sage. */ --sth-footer-bg: var(--sth-sage-dark); --sth-footer-text: var(--sth-white); --sth-footer-hover: var(--sth-bg); /* Cookie notice text (David, 12 Oct 2026). The panel is pale, so it keeps the old brand brown it has had since 1 Oct. It borrowed --sth-footer-text until the footer went white, which left this text white on cream, and it is a literal rather than an alias of --sth-light-section-text so that it did not follow those sections to the dark green. */ --sth-cookie-text: #4B3621; /* Current page in the mobile menu (David, 1 Oct 2026). Note #4B3621 is the OLD brand brown, not an A1 palette colour. */ --sth-nav-active: #4B3621; /* Discover More / section button hover (David, 30 Sep 2026). The single hover tone: Discover More, the section buttons, and the dropdown menus (--sth-copper-dark points here). */ --sth-btn-hover: #964E3C; /* Non-sticky (transparent) header buttons on hover: pale fill, brown text. Note #4b3621 is the OLD brand brown — it is not in the new A1 palette. */ --sth-btn-hover-fill-hero: #EAE4D9; --sth-btn-hover-text-hero: #4b3621; /* Header button hover fill (David, 12 Oct 2026): copper, replacing the #232C1C the live design used. The border takes the same value so the button becomes one solid block rather than a ring. The label goes WHITE on it (4.9:1) — the cream --sth-bg used before manages only 3.9:1 on copper, under AA at the 15px the buttons run at. */ --sth-btn-hover-fill: var(--sth-copper); --sth-btn-hover-text: var(--sth-white); /* The darker copper, used for the dropdown hover. Same value as --sth-btn-hover (David, 30 Sep 2026 - the two were unified). 4.9:1 on the pale panel, so it clears AA; the standard copper manages only 3.87:1 there, which is exactly the shortfall [A3] describes. NOTE: about 2:1 on the sage, so it must never be used on the header. */ --sth-copper-dark: var(--sth-btn-hover); /* Light sage for the hero booking widget's frosted panel (David, 8 Oct 2026). Derived: the dark sage lifted about 60% towards white. Not a brandbook colour. Kept translucent so the 8px blur behind it still reads as frosted glass; at 0.82 the tint hid the blur, 0.5 keeps it visible. */ --sth-sage-light: #C8CDC0; --sth-sage-light-glass: rgba(200, 205, 192, 0.5); /* Darker sage for the dropdown item hover (David, 8 Oct 2026). Derived: the dark sage taken down about 20%. Not a brandbook colour. White on it is 6.5:1. */ --sth-sage-dark: #5A6152; /* Booking widget text (David, 8 Oct 2026): the brown instead of the near-black the widget ships (#2C2D26 / #000). Same OLD brand brown as the footer text; not an A1 palette colour. */ --sth-widget-text: #4B3621; /* Text on the light (pale) sections (David, 8 Oct 2026; 12 Oct 2026). From 8 Oct this was the old brand brown #4B3621; since 12 Oct it is the [A1] dark green, so headings, body copy and the text links in those sections all read in one colour. Kept as a separate token because the scoping still matters — it is only these sections that are addressed. */ --sth-light-section-text: var(--sth-text); /* [A3] Copper falls below AA as link text on the pale background and needs one shade darker for links only. Still UNANSWERED for body links, so they take the text colour. --sth-copper-dark above is the obvious candidate if the same shade is wanted sitewide. */ --sth-link: var(--sth-text); /* [D2] Section and hero image overlays fade to this. On the live site it is the old dark green. D2 (whether to adopt the darker new overlay) is UNANSWERED; it follows the text colour for now. */ --sth-overlay: var(--sth-text); /* ---- typography [B1] ------------------------------------------------- */ --sth-font-display: "Playfair Display", Sans-serif; --sth-font-body: "Plus Jakarta Sans", Sans-serif; /* ---- Astra globals -> tokens ----------------------------------------- */ --ast-global-color-0: var(--sth-bg); --ast-global-color-1: var(--sth-text); --ast-global-color-2: var(--sth-text); --ast-global-color-3: var(--sth-text); --ast-global-color-4: var(--sth-bg-alt); --ast-global-color-5: var(--sth-white); --ast-global-color-6: var(--sth-text); --ast-global-color-7: var(--sth-text); --ast-global-color-8: #c9cfd4; } /* ---- Elementor globals -> tokens --------------------------------------- These MUST also be declared on .elementor-kit-6, which sits on . Custom properties resolve from the nearest ancestor that defines them, so a definition on beats one on :root no matter what the load order is. Declaring both covers elements inside and outside the kit wrapper. */ :root, body, .elementor-kit-6 { --e-global-color-astglobalcolor0: var(--sth-bg); --e-global-color-astglobalcolor1: var(--sth-text); --e-global-color-astglobalcolor2: var(--sth-text); --e-global-color-astglobalcolor3: var(--sth-text); --e-global-color-astglobalcolor4: var(--sth-bg-alt); --e-global-color-astglobalcolor5: var(--sth-white); --e-global-color-astglobalcolor6: var(--sth-text); --e-global-color-astglobalcolor7: var(--sth-text); --e-global-color-astglobalcolor8: #c9cfd4; /* [A1] primary was the brown that served as both text and the header. Under the new brand it is the text colour; the header is sage, set explicitly on the header rules below. */ --e-global-color-primary: var(--sth-text); --e-global-color-secondary: var(--sth-bg); --e-global-color-text: var(--sth-text); --e-global-color-accent: var(--sth-overlay); /* [B1] Elementor's own typography globals */ --e-global-typography-primary-font-family: "Playfair Display", Sans-serif; --e-global-typography-secondary-font-family: "Plus Jakarta Sans", Sans-serif; --e-global-typography-text-font-family: "Plus Jakarta Sans", Sans-serif; --e-global-typography-accent-font-family: "Plus Jakarta Sans", Sans-serif; } /* ========================================================================== B1/B4 — typography Headings Playfair Display, body and buttons Plus Jakarta Sans. ========================================================================== */ body, button, input, select, textarea, .ast-button, .ast-custom-button, p, li, td, th, label, blockquote, figcaption { font-family: var(--sth-font-body); } h1, h2, h3, h4, h5, h6, .entry-title, .site-title, .elementor-heading-title, .widget-title { font-family: var(--sth-font-display); } /* [B1] "Keep Playfair Display, but not all caps" — heading widgets only. Buttons keep their existing case: the form changes their typeface, not their casing, and [C1]/[F2] leave case alone. (Navigation case was changed separately on 8 Oct 2026 - see the Navigation rule below.) */ .elementor-widget-heading .elementor-heading-title, h1.elementor-heading-title, h2.elementor-heading-title { text-transform: none; } /* [B4] Three faces confirmed for replacement with the new brand typography: the booking widget (Helvetica Neue / Cambon), the pullquote quote mark, and EB Garamond. These are handled rule-by-rule in brand-map.css, generated from the widget's own custom.css / daterangepicker.css, so icon fonts are left alone. Only the quote mark needs stating here. */ .wp-block-pullquote, .wp-block-pullquote cite, blockquote::before { font-family: var(--sth-font-display); } /* [B1] Buttons: Plus Jakarta Sans Regular 400 */ .elementor-widget-button .elementor-button, .ast-custom-button, .ast-button, button, input[type="submit"] { font-family: var(--sth-font-body); font-weight: 400; } /* Button labels centre in the box. Astra gives the mobile-header buttons a fixed width (90px) but leaves text-align at start, so the label sits left of centre; the desktop pair already centres. */ .ast-custom-button, .ast-button, .elementor-widget-button .elementor-button { text-align: center; } /* [B1] Navigation. The form kept Playfair Display here; AMENDED (David, 8 Oct 2026): main nav and dropdowns are Plus Jakarta Sans, sentence case, 3% letter-spacing. Top-level items are bold (700), dropdown items regular (400). The local Jakarta files are the variable font with 700 declared in plus-jakarta-sans.css, so the bold is a real cut. Astra sets the case on ".ast-builder-menu-1 .menu-item > .menu-link", so that shape is restated. */ .ast-builder-menu-1, .main-header-menu .menu-link, .main-header-menu .menu-item > .menu-link, .ast-builder-menu-1 .menu-item > .menu-link, .main-header-menu .sub-menu .menu-link, #ast-fixed-header .main-header-menu .menu-link { font-family: var(--sth-font-body); font-weight: 400; text-transform: none; letter-spacing: 0.03em; } /* top level only: direct children of the menu list, not the sub-menus. 15px (David, 8 Oct 2026, up from Astra's 14px); dropdowns stay 14px. */ .main-header-menu > .menu-item > .menu-link, .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link, .ast-builder-menu-1 .menu-item > .menu-link, #ast-fixed-header .main-header-menu > .menu-item > .menu-link { font-weight: 700; font-size: 15px; } .main-header-menu .sub-menu .menu-item > .menu-link, .ast-builder-menu-1 .sub-menu .menu-item > .menu-link { font-size: 14px; } .main-header-menu .sub-menu .menu-item > .menu-link { font-weight: 400; } /* ========================================================================== A1/A2/C5 — header [C5] behaviour is unchanged: transparent over the homepage hero, solid on scroll. Only the solid state takes the sage green. ========================================================================== */ /* The solid header bar. On the live site this took Astra global 1, the same brown as the body text. Under the new brand those two roles separate: text is #232C1C, the header is sage. */ .ast-primary-header-bar.ast-primary-header, .ast-sticky-active .main-header-bar, .ast-sticky-active .ast-below-header-bar, .ast-primary-sticky-header-active .main-header-bar { background-color: var(--sth-sage); background-image: none; } /* [C5] but the homepage header stays transparent over the hero. Astra's transparent-header rule has the same specificity as the one above and would lose on source order, so it is restated here. */ .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header, .ast-theme-transparent-header .main-header-bar, .ast-theme-transparent-header.ast-header-break-point .main-header-bar { background-color: transparent; background-image: none; } .ast-theme-transparent-header .ast-sticky-active.main-header-bar, .ast-theme-transparent-header .ast-sticky-active .main-header-bar { background-color: var(--sth-sage); } /* Astra's sticky-header clone (#ast-fixed-header) paints itself from global 1 with an ID selector, so it needs matching specificity. On the live site that global was the brown used for BOTH body text and the header; under the new brand those roles separate, so the sticky bar is restated as sage. */ #ast-fixed-header .main-header-bar, .ast-transparent-header #ast-fixed-header .main-header-bar, .ast-main-header-wrap .main-header-bar.ast-header-sticked { background: var(--sth-sage); } /* [A2] On the sage green, navigation and button text take --sth-nav-on-sage (white since 8 Oct 2026, dark before that). */ #ast-fixed-header .main-header-bar .menu-link, #ast-fixed-header .main-header-bar .ast-custom-button, #ast-fixed-header .main-header-bar a, .main-header-bar.ast-header-sticked .menu-link, .main-header-bar.ast-header-sticked .ast-custom-button { color: var(--sth-nav-on-sage); } #ast-fixed-header .main-header-bar .ast-custom-button, .main-header-bar.ast-header-sticked .ast-custom-button { border-color: var(--sth-nav-on-sage); } /* menu links only — the buttons get their own inverted hover further down */ #ast-fixed-header .main-header-bar .menu-link:hover, #ast-fixed-header .main-header-bar .menu-link:focus { color: var(--sth-header-hover); } /* Header buttons, desktop sizing (David, 8 Oct 2026): 15px, semi-bold 600, 3% letter-spacing, 20px side padding. Astra pins these at 16px/700/1px with "padding: 10px 1px !important" and a 190px wrapper from 1301px up, and "padding-left/right: 8px !important" on a min-width rule, so !important is needed here and the wrapper width is released so the box follows the text. Phone and tablet keep the smaller sizes set in the mobile-header block. */ @media (min-width: 922px) { body .ast-header-button-1 .ast-custom-button, body .ast-header-button-4 .ast-custom-button, body .ast-header-button-5 .ast-custom-button, body .ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button, body .ast-header-button-4[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button, body .ast-header-button-5[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; padding-left: 20px !important; padding-right: 20px !important; } body .ast-header-button-1 .ast-builder-button-wrap, body .ast-header-button-4 .ast-builder-button-wrap, body .ast-header-button-5 .ast-builder-button-wrap { width: auto; } } /* -------------------------------------------------------------------------- Header buttons (Book Now / Book Dining) fill with COPPER on hover (David, 12 Oct 2026 — was the #232C1C of the live design). The border takes the fill colour so the button reads as one solid block, and the label goes white against it (4.9:1). White text here does NOT contradict [A2]: on hover the button is no longer sage, it is the copper fill. The button is a
inside an , so the link's hover state is what actually fires in use. -------------------------------------------------------------------------- */ .site-header .ast-custom-button:hover, .site-header .ast-custom-button:focus, .site-header a:hover .ast-custom-button, .site-header a:focus .ast-custom-button, .site-header a:focus-visible .ast-custom-button, #ast-fixed-header .main-header-bar .ast-custom-button:hover, #ast-fixed-header .main-header-bar .ast-custom-button:focus, #ast-fixed-header .main-header-bar a:hover .ast-custom-button, #ast-fixed-header .main-header-bar a:focus .ast-custom-button, #ast-fixed-header .main-header-bar a:focus-visible .ast-custom-button, .ast-primary-header-bar.ast-primary-header .ast-custom-button:hover, .ast-primary-header-bar.ast-primary-header a:hover .ast-custom-button { color: var(--sth-btn-hover-text); /* border matches the fill, so the outline disappears into it and the button reads as one solid block. Both come from the same token so they cannot drift apart. */ background-color: var(--sth-btn-hover-fill); border-color: var(--sth-btn-hover-fill); } /* Non-sticky header (transparent, over the hero): the buttons invert the other way — pale fill, brown text. The resting transparent-header rule is (0,5,0), so these have to out-specify it. */ .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) .ast-custom-button:hover, .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) .ast-custom-button:focus, .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) a:hover .ast-custom-button, .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) a:focus .ast-custom-button, .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) a:focus-visible .ast-custom-button { color: var(--sth-btn-hover-text-hero); background-color: var(--sth-btn-hover-fill-hero); border-color: var(--sth-btn-hover-fill-hero); } /* -------------------------------------------------------------------------- [A2] Everything in the sticky bar takes the one header tone — text, icons, arrows, social glyphs and the logo. Sub-menus are excluded: they drop onto the pale dropdown panel, which is a different surface ([C11]). -------------------------------------------------------------------------- */ #ast-fixed-header .main-header-bar :where(a, .menu-link, .ast-custom-button, .site-title):not(.sub-menu *), #ast-fixed-header .ast-builder-social-element, #ast-fixed-header .ahfb-svg-iconset { color: var(--sth-nav-on-sage); } /* inline SVGs: the social glyphs carry an explicit fill, the menu arrows and the mobile toggle follow currentColor */ #ast-fixed-header .ast-header-social-wrap .ast-builder-social-element svg, #ast-fixed-header .ast-builder-social-element svg, #ast-fixed-header .ast-arrow-svg, #ast-fixed-header .ahfb-svg-iconset svg { fill: var(--sth-nav-on-sage); } /* sub-menu contents follow the dropdown scheme [C11]: white on dark sage */ #ast-fixed-header .sub-menu .menu-link, #ast-fixed-header .sub-menu .ast-arrow-svg { color: var(--sth-white); fill: var(--sth-white); } #ast-fixed-header .ast-builder-social-element:hover svg, #ast-fixed-header .ast-builder-social-element:focus svg { fill: var(--sth-header-hover); } /* The logo is a WHITE transparent PNG, so it cannot simply be recoloured with `color`. The link box is exactly the image box, so the image is hidden and the link is painted in the brand tone through a mask of the same artwork. Scoped to #ast-fixed-header, so the logo over the hero stays white. Since 8 Oct 2026 the header tone IS white, so this paints the logo exactly as the PNG looks; the mask is kept so that a future change to --sth-nav-on-sage still recolours the logo with everything else. LOGO SWAP (David, 8 Oct 2026): the sticky bar shows the house drawing (assets/img/logo-hotel.png) and the hero header the wordmark (assets/img/logo-text.png) - see "Logo artwork" below. */ /*#ast-fixed-header .sticky-custom-logo, #ast-fixed-header .site-logo-img .custom-logo-link { background-color: var(--sth-nav-on-sage); -webkit-mask-image: url('../img/logo-hotel.png'); mask-image: url('../img/logo-hotel.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }*/ #ast-fixed-header .sticky-custom-logo img, #ast-fixed-header .site-logo-img .custom-logo-link img { /*opacity: 0;*/ } /* if masking is unavailable, leave the logo as the original white artwork rather than showing an empty box */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { #ast-fixed-header .sticky-custom-logo, #ast-fixed-header .site-logo-img .custom-logo-link { background-color: transparent; } #ast-fixed-header .sticky-custom-logo img, #ast-fixed-header .site-logo-img .custom-logo-link img { opacity: 1; } } .ast-primary-header-bar.ast-primary-header .menu-link, .ast-primary-header-bar.ast-primary-header .ast-custom-button, .ast-sticky-active .main-header-bar .menu-link, .ast-sticky-active .main-header-bar .ast-custom-button, .ast-sticky-active .main-header-bar .ast-builder-menu-1 .menu-link, .ast-primary-sticky-header-active .main-header-bar .menu-link { color: var(--sth-nav-on-sage); } .ast-primary-header-bar.ast-primary-header .ast-custom-button, .ast-sticky-active .main-header-bar .ast-custom-button { border-color: var(--sth-nav-on-sage); } /* over the hero the header is transparent, so the nav keeps its light text */ .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) .menu-link, .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) .ast-custom-button { color: var(--sth-bg); } .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header:not(.ast-sticky-active) .ast-custom-button { border-color: var(--sth-bg); } /* [C13] hover on the green header — copper is unusable here (1.62:1). Menu links only; the Book Now / Book Dining buttons invert instead. */ .ast-primary-header-bar.ast-primary-header .menu-link:hover, .ast-primary-header-bar.ast-primary-header .menu-link:focus, .ast-sticky-active .main-header-bar .menu-link:hover, .ast-sticky-active .main-header-bar .menu-link:focus { color: var(--sth-header-hover); } /* [C11] dropdown menus. The form proposed panel #eae4d9 with item text #8f9784 (about 1.9:1), and the 30 Sep build used the pale panel with dark text and a copper hover. AMENDED (David, 8 Oct 2026): the panel is now the dark sage with white items (4.54:1), matching the header. Copper text is 1.08:1 on the sage, so the hover is a darker sage fill with the text staying white (6.5:1) rather than copper (David, 8 Oct 2026). The mobile menu [C12] is untouched: its rules are longer and !important, so they still win on phones. */ .main-header-menu .sub-menu, .ast-builder-menu-1 .sub-menu, ul.sub-menu { background-color: var(--sth-sage) !important; background-image: none !important; border-color: var(--sth-sage); border-top-width: 0 !important; } .main-header-menu .sub-menu .menu-link, .ast-builder-menu-1 .sub-menu .menu-link, ul.sub-menu .menu-link { color: var(--sth-white) !important; background-color: transparent !important; } /* dropdown hover: darker sage fill, white text */ .main-header-menu .sub-menu .menu-link:hover, .main-header-menu .sub-menu .menu-link:focus, .ast-builder-menu-1 .sub-menu .menu-link:hover, .ast-builder-menu-1 .sub-menu .menu-link:focus, ul.sub-menu .menu-link:hover, ul.sub-menu .menu-link:focus, #ast-fixed-header .sub-menu .menu-link:hover, #ast-fixed-header .sub-menu .menu-link:focus { color: var(--sth-white) !important; background-color: var(--sth-sage-dark) !important; } #ast-fixed-header .sub-menu .menu-link:hover .ast-arrow-svg, .main-header-menu .sub-menu .menu-link:hover .ast-arrow-svg { fill: var(--sth-white); } .main-header-menu .current-menu-item > .menu-link, .main-header-menu .current-menu-ancestor > .menu-link { color: var(--sth-bg); } /* ========================================================================== Logo artwork (David, 8 Oct 2026) Two new white-on-transparent PNGs replace the single combined logo: hero / default header -> assets/img/logo-text.png (wordmark, 843x161) sticky bar -> assets/img/logo-hotel.png (house, 617x343) The page markup is not edited: `content: url()` on the swaps the artwork in every current browser and overrides src/srcset. The sticky bar also masks its link with the house (above), and the img swap here is what the no-mask fallback shows. The wordmark is 5.2:1, far wider than the 1.9:1 logo Astra sized at 220px, so it gets its own widths per breakpoint (Astra's are 220/120/80). ========================================================================== */ /*.site-logo-img .custom-logo-link img, .site-logo-img .transparent-custom-logo img { content: url('../img/logo-text.png'); } #ast-fixed-header .site-logo-img .custom-logo-link img, #ast-fixed-header .sticky-custom-logo img { content: url('../img/logo-hotel.png'); }*/ /* wordmark widths, hero header only. Astra sizes the transparent-header logo with ".ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img" (220 / 120 / 100px) and repeats the 80px phone value with !important, so these restate that selector and use !important too. */ .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img, header .site-logo-img .custom-logo-link:not(.sticky-custom-logo) img { width: 280px !important; max-width: 280px !important; height: auto !important; } @media (max-width: 921px) { .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img, header .site-logo-img .custom-logo-link:not(.sticky-custom-logo) img { width: 170px !important; max-width: 170px !important; } } @media (max-width: 543px) { /* On phones the row is logo + two 90px buttons + the 43px trigger, so the wordmark is fluid: up to 150px, shrinking to whatever is left. Without this a 390px screen overflowed by 23px and the open menu scrolled sideways. */ /* "body" prefix: the mobile-header block further down sets this section to flex: 0 0 auto at (0,1,0) and would otherwise win on source order */ body .site-header-primary-section-left { flex: 0 1 auto; min-width: 0; } body .site-header-primary-section-left .site-logo-img, body .site-header-primary-section-left .custom-logo-link { display: block; min-width: 0; } .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img, header .site-logo-img .custom-logo-link:not(.sticky-custom-logo) img { width: 100% !important; max-width: 150px !important; } /* and the two booking buttons size to their text instead of Astra's fixed 90px each, which gives the wordmark about 40px more on a 360px phone */ body .ast-header-button-1 .ast-builder-button-wrap, body .ast-header-button-5 .ast-builder-button-wrap, body .ast-primary-header-bar .ast-builder-button-wrap .ast-custom-button, body .ast-primary-header-bar .ast-custom-button { width: auto; min-width: 0; } } /* sticky bar: the house keeps Astra's own steps for the sticky logo (104 desktop, 96 tablet, 80 phone), height from the artwork */ #ast-fixed-header .site-logo-img img { width: auto; max-width: 104px; height: auto; } @media (max-width: 921px) { #ast-fixed-header .site-logo-img img { max-width: 96px; } } @media (max-width: 543px) { #ast-fixed-header .site-logo-img img { max-width: 80px; } } /* ========================================================================== Hover states [A1] Copper is the hover colour everywhere except on the sage header. ========================================================================== */ .elementor-button:hover, .ast-custom-button:hover, .elementor-widget-button .elementor-button:hover { color: var(--sth-copper); border-color: var(--sth-copper); } a:hover, a:focus { color: var(--sth-copper); } /* [A3] Links take the body colour until the darker copper is agreed. That is already what brand-map.css does (it maps the old "a, .page-title" rule), so nothing is restated here on purpose: a broader rule such as ".entry-content a" outranks Elementor's "heading-title > a { color: inherit }" and turns white heading links on photography dark. When A3 is settled, change --sth-link and apply it to "a, .page-title" only. */ /* ========================================================================== A4 — keyboard navigation states Confirmed by note: nothing currently indicates position when tabbing. ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--sth-copper); outline-offset: 2px; border-radius: 2px; } /* copper is invisible on sage, so the header ring switches to the dark tone */ .ast-sticky-active .main-header-bar :focus-visible, .main-header-bar :focus-visible { outline-color: var(--sth-nav-on-sage); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.55); } /* the hero sits on photography — give the ring a light halo so it reads */ .elementor-location-header :focus-visible { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35); } /* skip link must become visible when focused */ .skip-link:focus, .screen-reader-text:focus { position: fixed !important; top: 0.5rem; left: 0.5rem; z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none; padding: 0.75rem 1.25rem; background: var(--sth-bg); color: var(--sth-text); outline: 3px solid var(--sth-copper); } ::selection { background-color: var(--sth-text); color: var(--sth-white); } /* ========================================================================== HERO BOOKING WIDGET (David, 8 Oct 2026) The widget's own custom.css loads late in the body at (0,3,0) for the row and (0,5,0) for the button, so these restate the same selectors and win on source order. ========================================================================== */ /* the frosted panel: light sage instead of 21% white, 4px corners, blur kept */ .hero_booking_widget .booking_widget_main .booking_widget_row { background-color: var(--sth-sage-light-glass); border-radius: 4px; } /* Widget text and icons in the brown. The widget's own rules are (0,5,0) to (0,7,0) and load late in the body, so each is restated here; the chevron and calendar SVGs carry fill attributes, which CSS fill overrides. The Check Availability button, the Add Room button and the sage counters keep their white. */ .hero_booking_widget .booking_widget_main .booking_widget_row .top_small_label, .hero_booking_widget .booking_widget_main .booking_widget_row .date_nights_group .booking_widget_column_date input, .hero_booking_widget .booking_widget_main .booking_widget_row .date_nights_group .booking_widget_column_nights .selectric .label, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms .booking_widget_column_rooms .booking_widget_column_rooms_count *, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms .booking_widget_column_rooms .booking_widget_column_rooms_guest, .hero_booking_widget .booking_widget_main .booking_widget_row .booking_widget_column.promo_code input, .hero_booking_widget .booking_widget_main .booking_widget_row .booking_widget_column.promo_code input::placeholder, .hero_booking_widget .booking_widget_main .booking_widget_row .date_nights_group .booking_widget_column_date input::placeholder, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_popout_heading, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_heading, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .room_number, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_type, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_desc, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_num { color: var(--sth-widget-text); } .hero_booking_widget .booking_widget_main .booking_widget_row .booking_widget_column:not(.submit_button) svg:not(.rooms_popout *), .hero_booking_widget .booking_widget_main .booking_widget_row .booking_widget_column:not(.submit_button) svg:not(.rooms_popout *) path { fill: var(--sth-widget-text); color: var(--sth-widget-text); } /* Nights / Guests chevrons on phones (David, 8 Oct 2026). Below 768px the widget sets their background-position to "right center", which puts the 24px glyph flush against the field edge; inset it like the desktop. */ @media (max-width: 767px) { .hero_booking_widget .booking_widget_main .booking_widget_row .rooms .booking_widget_column_rooms .booking_widget_column_rooms_guest_select::after, .hero_booking_widget .booking_widget_main .booking_widget_row .date_nights_group .booking_widget_column_nights .selectric .button { background-position: right 14px center; } } /* Check Availability: dark sage with white text, hovering to copper on pale like Discover More and the cookie-banner buttons. The widget's 4px radius and all sizing are untouched. */ .hero_booking_widget .booking_widget_main .booking_widget_row .submit_button .check_availability { background-color: var(--sth-sage) !important; color: var(--sth-white) !important; border-color: var(--sth-sage) !important; font-weight: 600; /* semi-bold, as the header buttons (David, 8 Oct 2026) */ } .hero_booking_widget .booking_widget_main .booking_widget_row .submit_button .check_availability:hover, .hero_booking_widget .booking_widget_main .booking_widget_row .submit_button .check_availability:focus-visible { background-color: var(--sth-btn-hover) !important; color: var(--sth-bg) !important; border-color: var(--sth-btn-hover) !important; } /* Rooms & guests popout (David, 8 Oct 2026): the +/- counters and Add Room go sage with white marks, hovering to the darker sage. The counter artwork is a PNG of a near-black disc with a white symbol, so it cannot be recoloured or masked. The image is hidden and the disc and symbol are drawn in CSS instead; size (19px) and shape are the widget's own. The delete-room (bin) button next to Add Room is left as the widget ships it. */ .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_minus, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus { position: relative; background-color: var(--sth-sage); transition: background-color 0.3s ease; } .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_minus:hover, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus:hover, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_minus:focus-visible, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus:focus-visible { background-color: var(--sth-sage-dark); } .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_minus img, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus img { display: none; } /* the minus bar, shared; the plus adds a vertical bar */ .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_minus::before, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus::before, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; background-color: var(--sth-white); transform: translate(-50%, -50%); pointer-events: none; } .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_item .rooms_selection_item_counter_plus::after { width: 2px; height: 9px; } /* Add Room: solid sage, white label; darker sage on hover (was a grey outline hovering to black) */ .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_controls .rooms_selection_controls_add { background-color: var(--sth-sage); border-color: var(--sth-sage); color: var(--sth-white); } .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_controls .rooms_selection_controls_add:hover, .hero_booking_widget .booking_widget_main .booking_widget_row .rooms_popout .rooms_selection_controls .rooms_selection_controls_add:focus-visible { background-color: var(--sth-sage-dark); border-color: var(--sth-sage-dark); color: var(--sth-white); } /* Hero heading "5 Star Hotel Escape at the Gateway to Dublin" (David, 8 Oct 2026): Playfair Display Medium (500) with 3% letter-spacing, was 700 with none. Playfair 500 is served locally from assets/fonts/google-fonts.css. */ .elementor-24 .elementor-element.elementor-element-9d28f39 .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-9d28f39 h1.elementor-heading-title { font-weight: 500; letter-spacing: 0.03em; } /* ========================================================================== Floral icon under the "About Us" and "Local Attractions" headings (David, 8 Oct 2026) assets/img/floral-icon.svg is a single-colour cream mark, so it is used as a mask and painted in the copper; swap --sth-floral-colour to recolour. Added from the layer as a pseudo-element, no markup change. ========================================================================== */ .elementor-24 .elementor-element.elementor-element-8cf0d58 .elementor-widget-container::after, .elementor-24 .elementor-element.elementor-element-d869409 .elementor-widget-container::after { content: ""; display: block; width: 24px; height: 24px; margin: 14px auto 0; background-color: var(--sth-floral-colour, var(--sth-copper)); -webkit-mask: url('../img/floral-icon.svg') center / contain no-repeat; mask: url('../img/floral-icon.svg') center / contain no-repeat; } .elementor-widget-heading.floral .elementor-widget-container::after { content: ""; display: block; width: 24px; height: 24px; margin: 14px auto 0; background-color: var(--sth-floral-colour, var(--sth-copper)); -webkit-mask: url('../img/floral-icon.svg') center / contain no-repeat; mask: url('../img/floral-icon.svg') center / contain no-repeat; } /* ========================================================================== About Us layout (David, 8 Oct 2026, to match the supplied mock) Elementor pads the boxed inner 44px top / 144px bottom, so the block sat high; the padding is made symmetric and the inner centres its content in a fixed minimum height. Widget gaps close from 48px to 20px, the paragraph centres, and the button gets more air above it. ========================================================================== */ .elementor-24 .elementor-element.elementor-element-30e423a > .e-con-inner { padding: 60px 0; min-height: 540px; align-items: center; } .elementor-24 .elementor-element.elementor-element-30e423a .elementor-element.elementor-element-7f72d42 { gap: 20px; } .elementor-24 .elementor-element.elementor-element-30e423a .elementor-element.elementor-element-915384d { gap: 44px; } .elementor-24 .elementor-element.elementor-element-30e423a .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-30e423a .elementor-widget-text-editor p { text-align: center; } /* Local Attractions intro (David, 8 Oct 2026): same treatment as About Us. Elementor pads this boxed inner 144px top / 0 bottom; the tiles follow directly below, so the padding is balanced rather than centred in a fixed height. Widget gap is already 20px. */ .elementor-24 .elementor-element.elementor-element-dd9c703 > .e-con-inner { padding: 72px 0 32px; } .elementor-24 .elementor-element.elementor-element-dd9c703 .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-dd9c703 .elementor-widget-text-editor p { text-align: center; } /* ========================================================================== Text on the light sections (David, 8 Oct 2026; 12 Oct 2026) About Us, Rooms & Suites, Conferencing, Dining, Events and the Local Attractions intro: headings, body copy and the View Rooms / Learn More text links all take the dark green. They took the dark brown from 8 Oct until 12 Oct 2026. The filled Discover More buttons keep their own rule (same specificity, later in the file, so it wins), and the Learn More hover stays copper for the same reason. !important added for editor parity (see file header). ========================================================================== */ .elementor-24 .elementor-element.elementor-element-30e423a .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-30e423a .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-widget-text-editor, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button, .elementor-24 .elementor-element.elementor-element-dd9c703 .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-dd9c703 .elementor-widget-text-editor { color: var(--sth-light-section-text) !important; } .elementor-24 .elementor-element.elementor-element-30e423a .elementor-widget-text-editor p, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-widget-text-editor p, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-widget-text-editor p, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-widget-text-editor p, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-widget-text-editor p, .elementor-24 .elementor-element.elementor-element-dd9c703 .elementor-widget-text-editor p { color: inherit !important; } /* View Rooms / Learn More set bold (David, 12 Oct 2026). Elementor leaves these buttons without a font-weight of their own, so this is the only declaration in play. */ .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button { font-weight: 700; } /* ========================================================================== DISCOVER MORE buttons + the four content sections ========================================================================== */ /* Elementor writes these as ".elementor-24 .elementor-element.elementor-element-X", so the overrides have to match that shape to win. */ /* Discover More: solid sage block, white text (8 Oct 2026, was dark on the lighter sage), no border, no text shadow. !important added for editor parity (see file header). */ .elementor-24 .elementor-element.elementor-element-f96f72f .elementor-button, .elementor-24 .elementor-element.elementor-element-93c89be .elementor-button { /* colours only - padding, font-size and border WIDTH are untouched, so the box stays exactly the size and shape it was. The border simply takes the fill colour so the button reads as one solid block. */ background-color: var(--sth-sage) !important; color: var(--sth-white) !important; border-color: var(--sth-sage) !important; text-shadow: none; } .elementor-24 .elementor-element.elementor-element-f96f72f .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-f96f72f .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-93c89be .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-93c89be .elementor-button:focus { background-color: var(--sth-btn-hover) !important; color: var(--sth-bg) !important; border-color: var(--sth-btn-hover) !important; } /* Rooms & Suites / Conferencing / Dining / Events — section background. Both the full-width row and the inner text panel are painted. */ /* Elementor's own rule carries a :not(...) suffix, so these must too. */ .elementor-24 .elementor-element.elementor-element-56336e8:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-32e66ab:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-a220bfb:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-28aeada:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-7bdaf04:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-bb42e32:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-074c1aa:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-0052007:not(.elementor-motion-effects-element-type-background) { background-color: var(--sth-bg); } /* no text shadow anywhere in those four sections */ .elementor-24 .elementor-element.elementor-element-56336e8 *, .elementor-24 .elementor-element.elementor-element-a220bfb *, .elementor-24 .elementor-element.elementor-element-7bdaf04 *, .elementor-24 .elementor-element.elementor-element-074c1aa *, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button { text-shadow: none; } /* View Rooms / Learn More in those sections hover to the same tone, and show an underline on hover and keyboard focus (David, 8 Oct 2026) */ .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; } .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-56336e8 .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-a220bfb .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-7bdaf04 .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-074c1aa .elementor-button:focus { color: var(--sth-btn-hover) !important; border-color: var(--sth-btn-hover) !important; } /* ========================================================================== MOBILE HEADER Astra lays the mobile bar out as a three-column grid: logo left, the two booking buttons centre, the menu trigger right. This groups the buttons against the trigger on the right and stops "BOOK DINING" wrapping. ========================================================================== */ @media (max-width: 921px) { /* grid -> flex, logo pinned left, everything else pushed to the right */ .ast-primary-header-bar .ast-builder-grid-row, .ast-mobile-header-wrap .ast-builder-grid-row { display: flex !important; align-items: center; gap: 10px; } .site-header-primary-section-left { margin-right: auto; flex: 0 0 auto; } .site-header-primary-section-center { flex: 0 1 auto; justify-content: flex-end; gap: 8px; max-width: none; } .site-header-primary-section-right { flex: 0 0 auto; } /* both buttons on one line, sized to their text */ .ast-primary-header-bar .ast-builder-layout-element[class*="ast-header-button"] { width: auto; flex: 0 0 auto; } .ast-primary-header-bar .ast-custom-button, .ast-primary-header-bar .ast-builder-button-wrap .ast-custom-button { white-space: nowrap; font-size: 11px; letter-spacing: 0.06em; padding: 8px 12px; line-height: 1.1; } /* menu trigger: dark sage square, white lines (David, 8 Oct 2026; was a pale square with dark lines) */ [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill, .ast-header-break-point [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill, .menu-toggle.ast-mobile-menu-trigger-fill { background: var(--sth-sage); color: var(--sth-white); border: none; } /* Astra sets the icon fill on a four-class selector, so match its shape */ [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg, .ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg, .ast-mobile-menu-trigger-fill .ast-mobile-svg, .ast-mobile-menu-trigger-fill svg { fill: var(--sth-white); } } /* very narrow screens: tighten further so the row still fits on one line */ @media (max-width: 400px) { .ast-primary-header-bar .ast-custom-button, .ast-primary-header-bar .ast-builder-button-wrap .ast-custom-button { font-size: 10px; padding: 7px 9px; letter-spacing: 0.04em; } .ast-primary-header-bar .ast-builder-grid-row, .ast-mobile-header-wrap .ast-builder-grid-row { gap: 6px; } .site-header-primary-section-center { gap: 6px; } } /* ========================================================================== NOT changed, deliberately [F1] all four new behaviours are marked "Leave as it is": the sliding underline under menu items, image zoom on the Local Attractions tiles, the header shadow on scroll, and rounded corners / shadows on the tiles and booking widget. Nothing here adds them. [C1] no structural or layout changes. [C3] no decorative leaf illustrations. [C4] logo unchanged. [D3] Rose Blush and Peony Pink are not used. ========================================================================== */ /* ========================================================================== HERO VIDEO The Vimeo background is domain-restricted and returns 401 everywhere, including on the live site, so the hero falls back to its poster image. Dropping an mp4 at assets/video/hero.mp4 makes this play instead — no other change needed. With no file present the poster shows, exactly as now. ========================================================================== */ .sth-local-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .sth-local-hero-video { display: none; } } /* ========================================================================== FOOTER Darker sage with white content (David, 12 Oct 2026), replacing the pale background and brown content of 30 Sep 2026. Hover is the cream, not copper — copper manages about 2:1 on sage. ========================================================================== */ .site-footer, .site-above-footer-wrap, .site-primary-footer-wrap, .site-below-footer-wrap, .hfe-before-footer-wrap { background-color: var(--sth-footer-bg); } .site-footer, .site-footer p, .site-footer li, .site-footer span, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer .widget-title, .site-footer a, .site-footer .ast-footer-copyright, .site-footer .ast-footer-copyright p { color: var(--sth-footer-text); } .site-footer svg, .site-footer .ast-builder-social-element svg, .site-footer .ahfb-svg-iconset svg { fill: var(--sth-footer-text); } .site-footer a:hover, .site-footer a:focus { color: var(--sth-footer-hover); } .site-footer .ast-builder-social-element:hover svg, .site-footer .ast-builder-social-element:focus svg { fill: var(--sth-footer-hover); } /* the sister-hotel logo lock-up sits in a bordered box */ .site-footer [class*="elementor-element"] { border-color: var(--sth-footer-text); } /* Astra paints these with [data-section="..."] attribute selectors, so the overrides need the same shape to win. */ .site-above-footer-wrap[data-section="section-above-footer-builder"], .site-primary-footer-wrap[data-section="section-primary-footer-builder"], .site-below-footer-wrap[data-section="section-below-footer-builder"] { background-color: var(--sth-footer-bg); } /* footer navigation and any builder element links */ .site-footer .ast-builder-layout-element a, .site-footer .ast-builder-menu a, .site-footer .menu-link, .site-footer .ast-footer-html a, .site-footer nav a, .site-footer [data-section] a { color: var(--sth-footer-text); } .site-footer .ast-builder-layout-element a:hover, .site-footer .menu-link:hover, .site-footer nav a:hover, .site-footer [data-section] a:hover { color: var(--sth-footer-hover); } .site-footer [data-section] svg, .site-footer .ast-builder-layout-element svg { fill: var(--sth-footer-text); } /* the footer menu is addressed by ID, so it needs matching specificity */ #astra-footer-menu .menu-item > a, #astra-footer-menu .menu-item.current-menu-item > a, #astra-footer-menu .menu-link { color: var(--sth-footer-text); } #astra-footer-menu .menu-item > a:hover, #astra-footer-menu .menu-item > a:focus { color: var(--sth-footer-hover); } /* The sister-hotel lock-up (Hayfield / Great Southern / Killarney Royal / St Helen's / SCALLY) is a single WHITE PNG drawn for the old dark footer, so no colour property reaches it. Same treatment as the sticky logo: hide the bitmap and paint the link through a mask of the artwork. */ .site-footer .ast-builder-html-element a:has(> img.wp-image-1801) { /* display: inline-block; line-height: 0; background-color: var(--sth-footer-text); -webkit-mask-image: url('../../wp-content/uploads/2025/09/SHC-Test-Footer.png'); mask-image: url('../../wp-content/uploads/2025/09/SHC-Test-Footer.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;*/ } .site-footer .ast-builder-html-element a:has(> img.wp-image-1801) > img { /* opacity: 0; */ } /* if :has() or masking is unavailable, leave the original artwork visible */ @supports not selector(a:has(> img)) { .site-footer .ast-builder-html-element a > img.wp-image-1801 { opacity: 1; } } /* footer social icons: hover tone */ .site-footer .footer-social-item:hover, .site-footer .footer-social-item:focus, .site-footer .ast-builder-social-element:hover, .site-footer .ast-builder-social-element:focus { color: var(--sth-footer-hover); } .site-footer .footer-social-item:hover svg, .site-footer .footer-social-item:focus svg, .site-footer .ast-builder-social-element:hover svg, .site-footer .ast-builder-social-element:focus svg, .site-footer [data-section] .ast-builder-social-element:hover svg, .site-footer [data-section] .ast-builder-social-element:focus svg { fill: var(--sth-footer-hover); } /* Astra scopes the footer social hover to .ast-footer-social-1-wrap .ast-social-color-type-custom, so match that shape to win. */ .ast-footer-social-1-wrap .ast-social-color-type-custom .ast-builder-social-element:hover, .ast-footer-social-1-wrap .ast-social-color-type-custom .ast-builder-social-element:focus, .ast-footer-social-1-wrap .ast-builder-social-element:hover .social-item-label, .ast-footer-social-1-wrap .ast-builder-social-element:focus .social-item-label { color: var(--sth-footer-hover); } .ast-footer-social-1-wrap .ast-social-color-type-custom .ast-builder-social-element:hover svg, .ast-footer-social-1-wrap .ast-social-color-type-custom .ast-builder-social-element:focus svg { fill: var(--sth-footer-hover); } /* [A4] Keyboard ring in the footer. The sitewide ring is copper, which is about 2:1 on the sage the footer now uses, so it switches to white — the same move the sage header makes. */ .site-footer :focus-visible { outline-color: var(--sth-footer-text); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35); } /* ========================================================================== TRANSPORT PANEL (#getting-here — Dublin Bus / DART / UCD / Aviva / Blackrock / Dublin Bay). Elementor paints it from --e-global-color-primary, which is the sitewide text colour, so it is overridden per-element here rather than by moving the global. ========================================================================== */ .elementor-24 .elementor-element.elementor-element-403ab988:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-403ab988 > .elementor-motion-effects-container > .elementor-motion-effects-layer, #getting-here { background-color: var(--sth-transport-bg); } /* The small transit / graduation-cap / football icons in front of the journey times are removed (David, 8 Oct 2026). The lists are centred, so the text simply re-centres without the icon. */ .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-icon-list-icon, #getting-here .elementor-icon-list-icon { display: none; } /* Typography and spacing (David, 8 Oct 2026, to match the supplied mock): place names in Plus Jakarta Sans semi-bold, no tracking, sentence case (the caps are typed into the content, so brand-fixes.js retitles them); the two lines beneath tightened, and the column row gap closed up. */ .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-widget-heading div.elementor-heading-title, #getting-here .elementor-widget-heading div.elementor-heading-title { font-family: var(--sth-font-body); font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; } .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-widget-heading p.elementor-heading-title, #getting-here .elementor-widget-heading p.elementor-heading-title { font-size: 15px; line-height: 1.4; } .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-icon-list-item, .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-icon-list-text, #getting-here .elementor-icon-list-item, #getting-here .elementor-icon-list-text { font-size: 14px; line-height: 1.4; letter-spacing: normal; padding: 0; } .elementor-24 .elementor-element.elementor-element-403ab988 .e-con.e-child, #getting-here .e-con.e-child { row-gap: 2px; } /* On the dark sage the panel text goes white, as in the header: the pale --sth-bg it inherited is only 3.59:1 there, white is 4.54:1. The headings are links, so the anchor is named too in case a link rule outranks inherit. */ .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-heading-title, .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-heading-title a, .elementor-24 .elementor-element.elementor-element-403ab988 .elementor-icon-list-text, #getting-here .elementor-heading-title, #getting-here .elementor-heading-title a, #getting-here .elementor-icon-list-text { color: var(--sth-white); } /* ========================================================================== [C12] MOBILE MENU (David, 1 Oct 2026; recoloured 8 Oct 2026) Was a pale panel with copper links. Now the dark sage with white links and white chevrons, matching the header and dropdowns. Astra ships the open panel white and paints the top-level items with a dark green fill, so both the panel and the per-item fill still have to be reset. ========================================================================== */ .ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content, .ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .main-navigation, .ast-mobile-popup-drawer .ast-mobile-popup-inner { background-color: var(--sth-sage) !important; } /* While the menu is open the header bar above it goes sage too, so the logo and the booking buttons sit on the same green as the menu rather than on the hero photo (David, 8 Oct 2026). brand-fixes.js keeps the body class in step with whether a nav is actually open. */ body.ast-header-break-point.ast-main-header-nav-open #ast-mobile-header .ast-primary-header-bar, body.ast-header-break-point.ast-main-header-nav-open #masthead .ast-primary-header-bar.ast-primary-header, body.ast-header-break-point.ast-main-header-nav-open .ast-theme-transparent-header .ast-primary-header-bar.ast-primary-header { background-color: var(--sth-sage) !important; background-image: none !important; } /* and the trigger, now sage on sage, gets the same white keyline the sticky bar's trigger has, so the close X still reads as a button */ body.ast-header-break-point.ast-main-header-nav-open .menu-toggle.ast-mobile-menu-trigger-fill { box-shadow: inset 0 0 0 1px var(--sth-white); } /* items: no per-item fill, white label */ .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .sub-menu, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle { background-color: transparent !important; } .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .sub-menu .menu-link, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item > a, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle { color: var(--sth-white) !important; } .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link:hover, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link:focus { color: var(--sth-bg) !important; } /* the faint square around each chevron is a box-shadow Astra puts on the toggle; removed (David, 8 Oct 2026) */ .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link { box-shadow: none !important; border-color: transparent !important; } /* submenu arrows follow the link colour */ .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle .ast-arrow-svg, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .ast-menu-toggle svg, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-link .ast-arrow-svg { fill: currentColor; } /* [C12] the submenu arrows on the right of each item. Astra paints them with `.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle {color: white !important}` — five classes plus !important, so the copper needs a longer selector, not just !important. */ body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.menu-item-has-children > .ast-menu-toggle, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.menu-item-has-children > .ast-menu-toggle .ast-icon, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-item > .ast-menu-toggle, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-ancestor > .ast-menu-toggle { color: var(--sth-white) !important; } body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.menu-item-has-children > .ast-menu-toggle .ast-arrow-svg, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.menu-item-has-children > .ast-menu-toggle svg { fill: var(--sth-white) !important; } /* [A2] The sticky-bar menu trigger (David, 1 Oct 2026; 8 Oct 2026). Was a dark square with sage lines; now the same dark sage square with white lines as over the hero, for the burger and the close X alike. On the sage bar it is picked out by a one-pixel white keyline. */ #ast-fixed-header .menu-toggle .ast-mobile-svg, #ast-fixed-header .menu-toggle .ast-menu-svg, #ast-fixed-header .menu-toggle .ast-close-svg, #ast-fixed-header .menu-toggle svg, #ast-fixed-header .ast-mobile-menu-trigger-fill .ast-mobile-svg, #ast-fixed-header .ast-mobile-menu-trigger-fill svg { fill: var(--sth-white) !important; } #ast-fixed-header .menu-toggle, #ast-fixed-header .ast-mobile-menu-trigger-fill { color: var(--sth-white); background: var(--sth-sage) !important; box-shadow: inset 0 0 0 1px var(--sth-white); } /* [C12] The current page in the mobile menu (David, 1 Oct 2026; 8 Oct 2026). Was the brown on the pale panel. On the sage every item is white, so the current page is marked with an underline instead. Five-class selectors plus !important in Astra, so these need the longer form. */ body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-item > .menu-link, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-ancestor > .menu-link, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item.current-menu-item > .menu-link .menu-text, body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link { color: var(--sth-white) !important; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; } /* ========================================================================== COOKIE NOTICE (CookiePro / OneTrust) — David, 1 Oct 2026 Pale panel, brown text, buttons matching Discover More. The banner markup is injected at runtime from cookie-cdn.cookiepro.com with its own stylesheet and inline styles, so every declaration here needs !important. Text is #4B3621, the OLD brand brown. It used to borrow --sth-footer-text; it has had its own token since 12 Oct 2026, when the footer went white. ========================================================================== */ #onetrust-banner-sdk, #onetrust-banner-sdk .ot-sdk-container, #onetrust-banner-sdk #onetrust-group-container, #onetrust-banner-sdk #onetrust-policy, #onetrust-banner-sdk #onetrust-button-group-parent { background-color: var(--sth-bg) !important; } #onetrust-banner-sdk, #onetrust-banner-sdk #onetrust-policy-title, #onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-b-addl-desc, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-dpd-title, #onetrust-banner-sdk #onetrust-policy-text a, #onetrust-banner-sdk .ot-cookie-policy-link, #onetrust-banner-sdk a[href] { color: var(--sth-cookie-text) !important; } #onetrust-banner-sdk #onetrust-policy-text a, #onetrust-banner-sdk .ot-cookie-policy-link { text-decoration: underline !important; } #onetrust-banner-sdk #onetrust-policy-text a:hover, #onetrust-banner-sdk .ot-cookie-policy-link:hover, #onetrust-banner-sdk #onetrust-policy-text a:focus, #onetrust-banner-sdk .ot-cookie-policy-link:focus { color: var(--sth-btn-hover) !important; } /* the close X */ #onetrust-banner-sdk #onetrust-close-btn-container button, #onetrust-banner-sdk .ot-close-icon { color: var(--sth-cookie-text) !important; filter: none !important; } /* Buttons: same colouring as Discover More on the homepage — solid sage with white text, hovering to copper on pale. */ #onetrust-banner-sdk #onetrust-accept-btn-handler, #onetrust-banner-sdk #onetrust-pc-btn-handler, #onetrust-banner-sdk #onetrust-reject-all-handler, #onetrust-banner-sdk .ot-sdk-button, #onetrust-banner-sdk button.ot-pc-refuse-all-handler { background-color: var(--sth-sage) !important; border-color: var(--sth-sage) !important; color: var(--sth-white) !important; text-shadow: none !important; opacity: 1 !important; } #onetrust-banner-sdk #onetrust-accept-btn-handler:hover, #onetrust-banner-sdk #onetrust-accept-btn-handler:focus, #onetrust-banner-sdk #onetrust-pc-btn-handler:hover, #onetrust-banner-sdk #onetrust-pc-btn-handler:focus, #onetrust-banner-sdk #onetrust-reject-all-handler:hover, #onetrust-banner-sdk #onetrust-reject-all-handler:focus, #onetrust-banner-sdk .ot-sdk-button:hover, #onetrust-banner-sdk .ot-sdk-button:focus, #onetrust-banner-sdk button.ot-pc-refuse-all-handler:hover, #onetrust-banner-sdk button.ot-pc-refuse-all-handler:focus { background-color: var(--sth-btn-hover) !important; border-color: var(--sth-btn-hover) !important; color: var(--sth-bg) !important; } /* ========================================================================== VIEW ROOMS / LEARN MORE take the DISCOVER MORE box (David, 13 Oct 2026) Elementor had these four as bare text links (padding 0, border 0, transparent). They now carry the same box as Discover More, measured off it: 13px/23px padding, 1px solid border, square corners, sage fill, white label, and the same 400 weight (David, 13 Oct 2026 - this supersedes the 700 set on 12 Oct, which suited the old bare text links). Same selector shape as Elementor's own rules and later in the file, so these win on order. !important added for editor parity (see file header). ========================================================================== */ .elementor-24 .elementor-element.elementor-element-9e5cd49 .elementor-button, .elementor-24 .elementor-element.elementor-element-b3b1a6b .elementor-button, .elementor-24 .elementor-element.elementor-element-0bd0d1a .elementor-button, .elementor-24 .elementor-element.elementor-element-b9f5fe3 .elementor-button { padding: 13px 23px !important; font-weight: 400 !important; border-style: solid !important; border-width: 1px !important; border-radius: 0 !important; background-color: var(--sth-sage) !important; border-color: var(--sth-sage) !important; color: var(--sth-white) !important; fill: var(--sth-white) !important; text-shadow: none; } /* The icon span is empty in the markup but the content wrapper still carries a 16px gap, which would push the label off-centre inside the new box. */ .elementor-24 .elementor-element.elementor-element-9e5cd49 .elementor-button .elementor-button-content-wrapper, .elementor-24 .elementor-element.elementor-element-b3b1a6b .elementor-button .elementor-button-content-wrapper, .elementor-24 .elementor-element.elementor-element-0bd0d1a .elementor-button .elementor-button-content-wrapper, .elementor-24 .elementor-element.elementor-element-b9f5fe3 .elementor-button .elementor-button-content-wrapper { gap: 0; } /* Hover matches Discover More: the whole block goes copper, label to the page background. Overrides the section-level copper-text + underline rules that suited the old text-link treatment. */ .elementor-24 .elementor-element.elementor-element-9e5cd49 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-9e5cd49 .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-9e5cd49 .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-b3b1a6b .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-b3b1a6b .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-b3b1a6b .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-0bd0d1a .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-0bd0d1a .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-0bd0d1a .elementor-button:focus-visible, .elementor-24 .elementor-element.elementor-element-b9f5fe3 .elementor-button:hover, .elementor-24 .elementor-element.elementor-element-b9f5fe3 .elementor-button:focus, .elementor-24 .elementor-element.elementor-element-b9f5fe3 .elementor-button:focus-visible { background-color: var(--sth-btn-hover) !important; border-color: var(--sth-btn-hover) !important; color: var(--sth-bg) !important; fill: var(--sth-bg) !important; text-decoration: none; } /* ========================================================================== Global content button — boxed sage, copper on hover. Scoped to #content (Astra's content wrapper) so the header and footer buttons are excluded automatically. #content is an ID, so this wins over Elementor's per-element CSS and the old per-ID blocks, in editor + front end. ========================================================================== */ #content .elementor-button { padding: 13px 23px !important; font-weight: 400 !important; border-style: solid !important; border-width: 1px !important; border-radius: 0 !important; background-color: var(--sth-sage) !important; border-color: var(--sth-sage) !important; color: var(--sth-white) !important; fill: var(--sth-white) !important; text-shadow: none !important; } #content .elementor-button .elementor-button-content-wrapper { gap: 0; } /* hover / focus: whole block goes copper, label to the page background */ #content .elementor-button:hover, #content .elementor-button:focus, #content .elementor-button:focus-visible { background-color: var(--sth-btn-hover) !important; border-color: var(--sth-btn-hover) !important; color: var(--sth-bg) !important; fill: var(--sth-bg) !important; text-decoration: none !important; } /* ========================================================================== Mobile header fit (≤543px / ≤414px / ≤360px) Fixes the sticky header row overflowing its container on small phones. ========================================================================== */ @media (max-width: 543px) { /* Sticky header: Astra gives the sticky logo a fixed 104px width that doesn't scale, so the row overflows. Let it shrink like the main logo. */ #ast-fixed-header .site-header-primary-section-left { min-width: 0; flex: 0 1 auto; } #ast-fixed-header .site-logo-img img { width: 100% !important; /* override Astra's fixed 104px */ max-width: 80px !important; /* same cap as the main mobile logo */ height: auto; } } @media (max-width: 414px) { /* Slightly tighter side padding on both headers (default 20px) */ #masthead .ast-mobile-header-wrap .ast-primary-header-bar, #ast-fixed-header .ast-mobile-header-wrap .ast-primary-header-bar { padding-left: 12px; padding-right: 12px; } /* Smaller gap between the logo / buttons / hamburger columns (was 10px) */ #masthead .ast-mobile-header-wrap .ast-builder-grid-row, #ast-fixed-header .ast-mobile-header-wrap .ast-builder-grid-row { gap: 6px; } /* Gap between Book Now and Book Dining */ .ast-mobile-header-wrap .site-header-primary-section-center { gap: 6px !important; } /* Remove Astra's extra 10px side padding on the button wrappers */ .ast-mobile-header-wrap .ast-header-button-1, .ast-mobile-header-wrap .ast-header-button-5 { padding: 0 !important; } /* Smaller header buttons. !important is needed because Astra's [data-section] button selectors outrank the child theme rules. */ .ast-mobile-header-wrap .ast-custom-button { padding: 8px !important; font-size: 11px !important; letter-spacing: 0.04em !important; } /* Hamburger: 12px → 8px padding */ .ast-mobile-header-wrap .menu-toggle { padding: 8px !important; } } @media (max-width: 360px) { /* Very small phones (360px and below): shrink buttons further so the logo doesn't get squeezed out */ .ast-mobile-header-wrap .ast-custom-button { padding: 7px 6px !important; font-size: 10px !important; letter-spacing: 0.02em !important; } .ast-mobile-header-wrap .site-header-primary-section-center { gap: 4px !important; } }