/* ========================================================================== BRAND TOKENS — defined at :root, and they must stay here. ⚠ THESE USED TO BE DECLARED ONLY ON `.fp-shop`, `.page-id-21960` AND `.page-id-21630`, WHICH BROKE THE CHECKOUT. `cm_shop_body_class()` adds `.fp-shop` when `is_woocommerce()` is true — and is_woocommerce() is FALSE on the cart and checkout pages. So on the one page where a customer hands over their card details, every `var(--fp-navy)` and `var(--fp-yellow)` referred to a property that did not exist. An undefined custom property does NOT simply skip the declaration. It makes it invalid at computed-value time, and the property falls back to `inherit`. For `color` that meant the country dropdown inherited white text on a white field: you could open the list and pick a country, and the choice you had made was then invisible. Reported from a real order, 28 Aug 2026. Defining them at :root costs nothing — the scoped copies below still win on specificity and carry identical values — and it means a declaration can never silently evaporate because a body class was absent. ========================================================================== */ :root { --fp-yellow: #fdd215; --fp-navy: #12506f; } /* ========================================================================== Critical Media overrides Deliberately short. Everything that used to be in this file was working around a broken foundation, not a genuine styling need. THE ROOT CAUSE, for the record The child theme carried stale copies of Salient's css/custom.php, css/colors.php, css/fonts.php and header.php. get_template_part() prefers the child theme, so the site generated ALL of its CSS from template code several Salient versions behind the installed theme. The header rendered as 'left-header' regardless of the header_format setting, which is why the menu sat on one side and the dropdown had nothing to anchor to. Removing those copies fixed it at the source. The following then became settings changes rather than CSS fights, and now live in bin/apply-db-changes.sh so they survive the cutover import: - header background #ffffff -> #70bce5 - dropdown panel background #1F1F1F -> #70bce5 - dropdown link colour -> #fdd215 - navigation line-height 1px -> 1.4 - header-bg-opacity 1 -> 100 - megamenu restored on Your Visit / What's On (columns-2) Only add to this file when a setting genuinely cannot express the change. ========================================================================== */ /* -------------------------------------------------------------------------- Nested megamenu links. Salient offers one colour for dropdown links, and the design needs two: the first level ("Times & Prices", "Useful Info") in brand yellow, and the items nested beneath a heading ("How to find us", "Vacancies") in white at a smaller size. The option covers the first level; this covers the second. -------------------------------------------------------------------------- */ #header-outer nav > ul > li.megamenu > ul > li > ul li > a, #header-outer nav > ul > li.megamenu > ul > li > ul li > a .menu-title-text { color: #ffffff; font-weight: 400; } #header-outer nav > ul > li.megamenu > ul > li > ul li > a:hover, #header-outer nav > ul > li.megamenu > ul > li > ul li > a:hover .menu-title-text { color: #fdd215; } /* --------------------------------------------------------------------------- Megamenu column flow. Salient lays .columns-2 out as a flex row where every top-level item is 50% wide, so seven items wrap two-per-row: Times & Prices Annual Passes Birthday Parties Schools & Groups Food and Drink Accommodation Useful Information The mockup wants them to FLOW down the first column and only then move to the second, so "Useful Information" and its children own column two: Times & Prices Useful Info Annual Passes How to find us Birthday Parties Vacancies Schools & Groups ... Food & Drink Accommodation CSS multi-column does exactly that. break-inside: avoid keeps a heading welded to its own child list instead of splitting it across the gap. --------------------------------------------------------------------------- */ #header-outer nav > ul > li.megamenu.columns-2 > ul.sub-menu { display: block !important; column-count: 2; column-gap: 44px; } /* Salient makes these inline-block and 50% wide. Inside a multi-column container they have to be full-width blocks, or they shrink to their text and sit side by side. */ #header-outer nav > ul > li.megamenu.columns-2 > ul.sub-menu > li { display: block !important; float: none !important; width: 100% !important; break-inside: avoid; -webkit-column-break-inside: avoid; } /* =========================================================================== Dropdowns that stem from the menu bar. Dougal, repeatedly: "when there is no background, as in, onload, the drop down has nowhere to stem from so just sits on the banner"; "on mouse over, the background of the menu appears (and not just on scroll) so that the drop downs have something to drop from"; "I feel it should come from the menu, like all pop up menus". Two parts: give the transparent header a background on hover, and take the panel off Salient's full-width track so it hangs under its own word. Salient positions the panel from JS, which writes inline styles — a stylesheet !important is the one thing that outranks those, so the widths and offsets below are all marked. =========================================================================== */ /* 1. On hover the bar fills in, so there is something for the panel to hang from. Deliberately translucent (0.85) rather than matching the scrolled bar's solid fill: the mockup's top-of-page frame shows the hero read- able through the band, and only the scrolled frame is solid. */ #header-outer.transparent{ transition: background-color .25s ease; } /* Salient holds the transparent header down with body #header-outer[data-transparent-header="true"].transparent at !important. That is one element-selector more specific than a plain #header-outer.transparent:hover, so it wins the tiebreak and the bar stays see-through. Match its shape to outrank it. */ body #header-outer[data-transparent-header="true"].transparent:hover, body #header-outer[data-transparent-header="true"].transparent:focus-within, body #header-outer.transparent:hover, body #header-outer.transparent:focus-within{ background-color: rgba(45, 162, 218, .85) !important; } /* 2. The panel hangs off its own menu item rather than the whole bar. */ #header-outer nav > ul > li.megamenu{ position: relative !important; } /* CENTRED on its own item, not left-aligned to it. The mockup centres the panel under the word: with "Your Visit" at cx 330 and "What's On" at cx 446 (1600px viewport), a centred 520px panel spans 70..590 and 186..706, and the centred logo starts at 745 — so neither one reaches under it. Left-aligned at 620px the panel ran 275..895 and buried 150px of the logo. The ceiling is 598px: What's On is the rightmost megamenu, so the panel's right edge is 446 + W/2 and that has to stay clear of the logo at 745. margin-left rather than translateX because Salient animates this panel with jQuery .animate(), which writes inline styles; a transform is one more thing for that to fight over, and a negative margin is not. */ #header-outer nav > ul > li.megamenu > ul.sub-menu{ position: absolute !important; top: 100% !important; /* flush to the bar — no gap to fall through */ left: 50% !important; right: auto !important; width: 520px !important; max-width: 92vw !important; /* Centred on the word by default. js/nav-clamp.js overrides the variable when centring would push the panel under the centred logo or off the side of the screen — a clamp CSS cannot express on its own. */ margin: 0 0 0 var(--fp-panel-shift, -260px) !important; padding: 26px 34px 30px !important; border-radius: 0 0 14px 14px !important; /* square where it meets the bar, rounded below */ box-shadow: 0 14px 34px rgba(0, 0, 0, .18); z-index: 3 !important; /* above the hover tab and the menu word */ } /* 3. Tighter rhythm — "really loose" was the complaint about the old spacing. */ #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a{ padding: 4px 0 !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a{ padding: 3px 0 !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li + li{ margin-top: 2px !important; } /* =========================================================================== Bar height and type scale. "reduce the height of the blue background on hover" "I am happy for the blue bar to go under the logo" "increase the text on the nav and in the drop down ... it needs to fill the spaces much better - currently it's a little weak" =========================================================================== */ /* The bar is a band across the TOP of the header rather than the full 166px, so the logo overhangs its bottom edge as it does in the mockup. Painting it as a background-size band rather than shrinking the header matters: shrinking on hover moves the menu word out from under the pointer, which un-hovers it, which grows it back — a flicker loop. Nothing moves this way. The panel then starts at the band's bottom edge, not the header's, so there is still no gap for the dropdown to fall through. One variable keeps the two in step. */ #header-outer{ --fp-bar-height: 118px; } body #header-outer[data-transparent-header="true"].transparent:hover, body #header-outer[data-transparent-header="true"].transparent:focus-within, body #header-outer.transparent:hover, body #header-outer.transparent:focus-within{ background-color: transparent !important; background-image: linear-gradient(rgba(45, 162, 218, .85), rgba(45, 162, 218, .85)) !important; background-repeat: no-repeat !important; background-position: top center !important; background-size: 100% var(--fp-bar-height) !important; } /* (Superseded: the panel now hangs off var(--fp-bar-height) in BOTH states, because the stuck bar is a band too. See the single rule further down.) */ /* --- Type scale ---------------------------------------------------------- */ /* Was 16px/600 with a 10px line-height on the nav, and 12px/400 throughout the panel — far too small for the space, and the tight leading clipped descenders. Sizes below are taken off the mockup at its own scale. */ body #header-outer #top nav > ul > li > a, body #header-outer #top nav > ul > li > a .menu-title-text{ font-size: 19px !important; font-weight: 600 !important; line-height: 1.4 !important; } body #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a, body #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a .menu-title-text{ font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; } body #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a, body #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a .menu-title-text{ font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; } /* Breathing room to match the larger type. Measured off the mockup: the first item's text starts ~28px in from the panel edge and ~26px down from its top, with a slightly deeper foot. 40px of side padding was sized for the old 620px panel and leaves the two columns too narrow at 520px. */ #header-outer nav > ul > li.megamenu > ul.sub-menu{ padding: 26px 30px 30px !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a{ padding: 6px 0 !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a{ padding: 5px 0 !important; } /* =========================================================================== The hover tab. In the mockup the hovered word sits on a solid block of the panel's own blue, running the full height of the bar and butting straight onto the panel below it, so the two read as one shape. That is the part that removed the "grey area about how it works": the bar can stay translucent while the tab and panel stay solid, and the eye follows the solid shape down. Sampled off the mockup to be sure: the tab pixel and the panel pixel are the SAME colour, rgb(72,158,212) — the tab is not a lighter highlight, it is the panel extended upwards. So it takes the panel's #2da2da flat, not the bar's translucent version. Drawn as a pseudo-element on the li rather than a background on the , because the is only as tall as its own line box plus padding and the tab has to reach the full height of the band. =========================================================================== */ /* (The megamenu-only tab that used to live here is now covered by the li.menu-item rules further down, which give every link the same block.) */ /* =========================================================================== Panel indent and rhythm, measured against the mockup. The panel's own padding was set to 30px but the text was landing 63px in. Enumerating every rule that matched the item found the culprit rather than guessing at it: Salient's header-megamenu.css puts #header-outer nav > ul > .megamenu > ul > li { padding: 0 0 0 30px } on each top-level megamenu item, which is how it separates its own flex columns. We lay the panel out with CSS multi-column instead, where the gutter is column-gap, so that 30px is pure double-indent. Zero it and the text lands where the panel padding says it should. =========================================================================== */ #header-outer nav > ul > li.megamenu > ul.sub-menu > li{ padding-left: 0 !important; } /* Flush with their heading, not stepped in. This carried a 12px indent, read off the mockup. Dougal: the words are plainly sub-items already, so the step earns nothing and just softens the left edge of the column. Zeroed, so every line in the panel starts on the same axis as "Useful Info" above it. */ #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul{ padding-left: 0 !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li{ padding-left: 0 !important; } /* Vertical rhythm. The mockup steps ~37px between headings and ~30px between children (at the 1600px scale it was drawn to); we were at 41px and 34px, which read loose next to it. Line-height carries most of the step, so this is a small trim to the padding rather than a squeeze on the leading. */ #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a{ padding: 4px 0 !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a{ padding: 3px 0 !important; } /* =========================================================================== ONE BAR HEIGHT, BOTH STATES. "I like the way the main logo bleeds out of the blue bar on mouse over on the main menu — can you use that same affect on the sticky menu, pushing up the blue bar to be in the same place as the main menu mouse over bar." Measured rather than guessed. At the top of the page the header is 166px, the band is 118px and the logo runs 28..138 — so it hangs 20px below the band. Scrolled, the header is 121px and the logo runs 16..106, so the same 20px overhang puts the band at 86px. The nav text sits at 47..74 when scrolled, which still clears an 86px band by 12px. The mockup already drew it this way: in the two scrolled frames the logo bottom sits below the bar, exactly as it does at the top of the page. So --fp-bar-height simply takes a second value when the header is stuck, and everything that hangs off the band — the band itself, the hover tab, the megamenu panel and the cart dropdown — follows it without knowing which state it is in. =========================================================================== */ #header-outer.small-nav{ --fp-bar-height: 86px; } /* The stuck bar becomes a band across the top rather than a full-height fill. Same background-size technique as the hover bar, and for the same reason: nothing is allowed to change the header's HEIGHT on hover or the menu word moves out from under the pointer and flickers. */ body #header-outer.small-nav{ background-color: transparent !important; /* SOLID here, unlike the 0.85 hover bar at the top of the page. There the translucency shows the hero through the band, which the mockup wants; once scrolled there is only body copy behind it and it just reads as ghosting. */ background-image: linear-gradient(#2da2da, #2da2da) !important; background-repeat: no-repeat !important; background-position: top center !important; background-size: 100% var(--fp-bar-height) !important; box-shadow: none !important; /* the shadow drew a line at 121px, below the band */ } /* The panel now hangs off the band in BOTH states, so the two rules collapse into one. (This replaces the earlier .transparent-only override.) */ #header-outer nav > ul > li.megamenu > ul.sub-menu{ top: var(--fp-bar-height) !important; } /* =========================================================================== A hover state on every menu item, not just the ones with dropdowns. "can we have some kind of mouse over affect on the nav generally, so that those links without drop downs, look like their being used." The tab already existed for the two megamenus; this gives the same block to Home, About Us, Shop and Contact so every item acknowledges the pointer. Scoped to li.menu-item on purpose — that is the six real links. The Book a Visit button, the basket and the search icon are NOT .menu-item, so they keep their own treatments and never get a blue block behind them. =========================================================================== */ #header-outer #top nav > ul > li.menu-item::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--fp-bar-height); background-color: #489ED4; opacity: 0; transition: opacity .18s ease; pointer-events: none; z-index: 1; } #header-outer #top nav > ul > li.menu-item{ position: relative; } #header-outer #top nav > ul > li.menu-item:hover::before, #header-outer #top nav > ul > li.menu-item:focus-within::before, #header-outer #top nav > ul > li.menu-item.sfHover::before{ opacity: 1; } #header-outer #top nav > ul > li.menu-item > a{ position: relative; z-index: 2; } /* The hidden mobile-only duplicate would otherwise paint a stray block. */ #header-outer #top nav > ul > li.mobShow::before{ display: none; } /* =========================================================================== The basket dropdown, attached to the bar. "when I mouse over the basket icon, the drop down showing whats in my basket is floating in the middle of the banner and is not attached to the blue menu bar." It was pinned at top: 166px — the full height of the header — while the blue band stops at 118px, so it hung 48px clear of the bar with the hero showing through the gap. Same fix as the megamenu: start at the band's bottom edge, which now also means it follows the band when the header is stuck. =========================================================================== */ /* Only the dropdown itself. .cart-menu is the 22x22 basket ICON — moving that pushes the icon out of the bar and leaves it floating on the page. */ #header-outer .widget_shopping_cart{ top: var(--fp-bar-height) !important; margin-top: 0 !important; } /* =========================================================================== Footer weather. See includes/weather.php for why this is not a plugin. Sized to fill its footer column rather than sit in the corner of it: the place name up top so it is obvious the forecast is FOR the farm and not the visitor's own location, and five days ahead instead of three. =========================================================================== */ .fp-weather{ font-family: inherit; color: #ffffff; width: 100%; max-width: 340px; } .fp-weather-place{ margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.2; color: #fdd215; } .fp-weather .fpw-i{ width: 30px; height: 30px; flex: 0 0 auto; display: block; } .fp-weather-now{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .fp-weather-now .fpw-i{ width: 60px; height: 60px; } .fp-weather-now-t{ display: flex; flex-direction: column; line-height: 1.05; } .fp-weather-temp{ font-size: 40px; font-weight: 700; } .fp-weather-label{ font-size: 14px; opacity: .85; } /* Five equal cells that share whatever width the column gives them, rather than a fixed gap that overflows the moment a fifth day is added. */ .fp-weather-days{ display: flex; justify-content: space-between; gap: 4px; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); list-style: none; } .fp-weather-days li{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .fp-weather-dow{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } .fp-weather-hi{ font-size: 15px; font-weight: 700; } .fp-weather-lo{ font-size: 12px; opacity: .7; } /* =========================================================================== Breathing room inside the dropdown hover. "put some padding on the left of the mouse over in the menus." Salient paints a background on the dropdown link itself (header-dropdown-background-hover-color), and every horizontal padding on those links had been zeroed to kill Salient's own 30px indent — so the highlight started exactly where the letters did and the text sat welded to its left edge. The panel's own padding drops 30 -> 18px and the links take 12px back, so every word lands in exactly the same place as before and only the highlight grows outward. Nothing shifts: heading 18 + 12 = 30 (unchanged) child 18 + 12 (ul) + 12 = 42 (unchanged) Right padding too, so the block is not flush on that side either, and a small radius so it reads as a deliberate highlight rather than a bleed. =========================================================================== */ #header-outer nav > ul > li.megamenu > ul.sub-menu{ padding: 26px 18px 30px !important; } #header-outer nav > ul > li.megamenu > ul.sub-menu > li > a, #header-outer nav > ul > li.megamenu > ul.sub-menu > li > ul > li > a{ padding-left: 12px !important; padding-right: 12px !important; border-radius: 4px; } /* The column gutter has to grow by the same 12px the links just gained, or the two columns lose the gap they had. */ #header-outer nav > ul > li.megamenu.columns-2 > ul.sub-menu{ column-gap: 32px; } /* =========================================================================== Event listings. See includes/events-list.php for why these are not a plugin. Date-led on purpose: only one of the 23 events has a featured image, so a picture grid would be mostly empty boxes. Every event has a date. =========================================================================== */ .fp-events{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .fp-events--grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .fp-events li{ list-style: none; margin: 0; padding: 0; } .fp-event-link{ display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #ffffff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; } .fp-event-link:hover{ box-shadow: 0 8px 22px rgba(0, 0, 0, .18); transform: translateY(-2px); } /* The date block carries the listing, so it gets the brand colour. */ .fp-event-date{ flex: 0 0 auto; width: 62px; padding: 8px 0; border-radius: 10px; background: #2da2da; color: #ffffff; text-align: center; line-height: 1.05; } .fp-event-d{ display: block; font-size: 26px; font-weight: 900; } .fp-event-m{ display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fdd215; } .fp-event-img{ flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; } .fp-event-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fp-event-title{ font-size: 18px; font-weight: 700; line-height: 1.2; color: #12506f; } .fp-event-when{ font-size: 14px; color: #4a6b7c; } /* =========================================================================== Three fixes from Dougal, 2026-08-19. =========================================================================== */ /* --- 1. The thin white line above every dropdown ------------------------- Not a positioning gap — measured, the panel sits at exactly 86px with a gap of 0. It is a real border: Salient gives the sub-menu `border-top: 1px solid #eeeeee` from its header-separator-color setting, which read as a hairline between the sticky bar and the panel. */ #header-outer nav > ul > li.megamenu > ul.sub-menu, #header-outer .widget_shopping_cart{ border-top: 0 !important; } /* --- 2. Rounded bottom corners, square top ------------------------------ Square where the panel meets the bar so the two still read as one shape, rounded where it ends. The basket dropdown gets the same treatment. */ #header-outer .widget_shopping_cart{ border-radius: 0 0 14px 14px !important; overflow: hidden; /* so a child background cannot square the corners off */ } /* --- 3. A dark glow on the nav when there is no bar behind it ------------- "as there is a busy video behind, the white letters can go missing." Only while the header is transparent AND unhovered — which is exactly the state with no blue band. The moment the bar fills on hover, or the header sticks (.small-nav is not .transparent, so it is excluded automatically), the glow goes and the letters sit on flat colour as designed. Deliberately a soft halo rather than a hard drop shadow: it lifts the text off the video without reading as a shadow in its own right. Icons take the same treatment through a filter, since text-shadow does nothing to an SVG. */ body #header-outer[data-transparent-header="true"].transparent:not(:hover):not(:focus-within) #top nav > ul > li > a, body #header-outer[data-transparent-header="true"].transparent:not(:hover):not(:focus-within) #top nav > ul > li > a .menu-title-text, body #header-outer.transparent:not(:hover):not(:focus-within) #top nav > ul > li > a, body #header-outer.transparent:not(:hover):not(:focus-within) #top nav > ul > li > a .menu-title-text{ text-shadow: 0 0 14px rgba(0, 0, 0, .55), 0 0 5px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); transition: text-shadow .25s ease; } /* The basket and search are icons, not text. */ body #header-outer.transparent:not(:hover):not(:focus-within) #top .cart-menu-wrap, body #header-outer.transparent:not(:hover):not(:focus-within) #top #search-btn{ filter: drop-shadow(0 0 8px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); transition: filter .25s ease; } /* The yellow Book a Visit button already sits on its own solid colour, so it is left alone — a glow on it would just look like a printing error. */ /* =========================================================================== Contact form. Rebuilt in CF7 from the recovered Forminator definition — see includes/forminator-bridge.php. It sits on the green panel, where Salient's default field styling is a transparent box with a faint border: on that background the inputs were effectively invisible. These give the fields a solid surface of their own. =========================================================================== */ .fp-cf7{ max-width: 560px; } .fp-cf7-row{ margin: 0 0 16px; } .fp-cf7 label, .fp-cf7-legend{ display: block; margin-bottom: 6px; font-weight: 700; color: #ffffff; } .fp-cf7 .fp-req{ color: #fdd215; } .fp-cf7 input[type="text"], .fp-cf7 input[type="email"], .fp-cf7 input[type="tel"], .fp-cf7 textarea{ width: 100% !important; max-width: 100% !important; padding: 12px 14px !important; background: #ffffff !important; border: 2px solid rgba(0, 0, 0, .08) !important; border-radius: 8px !important; color: #12506f !important; font-size: 16px !important; box-shadow: none !important; transition: border-color .15s ease; } .fp-cf7 input[type="text"]:focus, .fp-cf7 input[type="email"]:focus, .fp-cf7 input[type="tel"]:focus, .fp-cf7 textarea:focus{ border-color: #fdd215 !important; outline: none !important; } .fp-cf7 textarea{ min-height: 150px; resize: vertical; } /* The six enquiry options. Salient hides the native box and draws its own, which does not survive on this background, so they are shown plainly and laid out as a wrapping two-column list rather than a ragged run-on line. */ .fp-cf7 .wpcf7-checkbox{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; } .fp-cf7 .wpcf7-list-item{ margin: 0 !important; } .fp-cf7 .wpcf7-list-item label{ display: flex; align-items: flex-start; gap: 9px; margin: 0; font-weight: 400; cursor: pointer; } .fp-cf7 input[type="checkbox"]{ appearance: auto !important; -webkit-appearance: checkbox !important; opacity: 1 !important; position: static !important; width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; accent-color: #fdd215; flex: 0 0 auto; } .fp-cf7-consent .wpcf7-list-item label{ font-weight: 400; } .fp-cf7-consent{ line-height: 1.45; } /* Brand submit button. */ .fp-cf7 input[type="submit"]{ padding: 14px 34px !important; background: #fdd215 !important; border: 0 !important; border-radius: 8px !important; color: #12506f !important; font-size: 17px !important; font-weight: 700 !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .fp-cf7 input[type="submit"]:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); } .fp-cf7 .wpcf7-not-valid-tip{ color: #ffe9a8; font-size: 14px; } .fp-cf7 .wpcf7-response-output{ margin: 14px 0 0 !important; padding: 12px 16px !important; border-radius: 8px; border-width: 2px !important; color: #ffffff; } /* =========================================================================== The animal / attractions banner slider. See includes/animal-slider.php for what it replaces and why. The photo is the point. Where the old plugin dropped a solid yellow panel across the middle of the picture, the caption here is a band along the bottom over a gradient, so the animals stay visible behind it. =========================================================================== */ .fp-animalslider{ position: relative; overflow: hidden; border-radius: 14px; background: #eef4f7; } /* scroll-snap does the carousel; the JS only adds arrows and dots. */ .fp-animalslider-track{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .fp-animalslider-track::-webkit-scrollbar{ display: none; } .fp-animalslider-slide{ position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; } /* The slide shape comes from the artwork, via --fp-slide-ratio set in animal-slider.php. See the long note there: the "Website Square Images" set carries a flat brand-yellow band across its top 42% — where the OLD plugin printed its title — so those are cropped to the 58% that is photograph and anchored to the bottom. The animal photographs have no band and keep their own proportions. NOTE THE SELECTOR. Salient's `.row .col img { height: auto }` carries two classes and an element, so it beat a plain `.fp-animalslider-img` and the height here never applied — the image rendered at its natural size, yellow band and all. This is the same specificity trap as the megamenu padding and the transparent header; enumerate what matches before trusting a rule. */ .fp-animalslider .fp-animalslider-img{ display: block; width: 100%; height: auto; aspect-ratio: var(--fp-slide-ratio, 1920 / 742); object-fit: cover; } .fp-animalslider.is-banded .fp-animalslider-img{ /* Crop from the top: the photograph is the bottom of the file. */ object-position: center bottom; } /* With a shape of its own the slider no longer fills a stretched equal-height column, so centre it rather than leaving it stranded at the top. */ .vc_column-inner:has(> .wpb_wrapper > .fp-animalslider){ align-items: center; } .fp-animalslider-cap{ position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 44px 28px 20px; /* The gradient is what keeps the picture readable instead of a solid panel. */ background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .fp-animalslider-title{ display: block; font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--fp-cap-accent, #fdd215); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); } .fp-animalslider-text{ display: block; margin-top: 5px; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.35; color: var(--fp-cap-color, #ffffff); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); } /* A link should say so. */ .fp-animalslider-slide[href] .fp-animalslider-img{ transition: transform .5s ease; } .fp-animalslider-slide[href]:hover .fp-animalslider-img{ transform: scale(1.03); } /* --- arrows --- */ .fp-animalslider-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #12506f; cursor: pointer; box-shadow: 0 3px 14px rgba(0, 0, 0, .28); transition: background .15s ease, transform .15s ease; z-index: 2; } .fp-animalslider-nav:hover{ background: #fdd215; transform: translateY(-50%) scale(1.06); } .fp-animalslider-nav svg{ width: 22px; height: 22px; } .fp-animalslider-prev{ left: 14px; } .fp-animalslider-next{ right: 14px; } /* --- dots --- */ .fp-animalslider-dots{ position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2; } .fp-animalslider-dot{ width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .15s ease, transform .15s ease; } .fp-animalslider-dot.is-active{ background: #fdd215; transform: scale(1.35); } .fp-animalslider.is-single .fp-animalslider-nav, .fp-animalslider.is-single .fp-animalslider-dots{ display: none; } @media (max-width: 690px){ .fp-animalslider-cap{ padding: 34px 18px 26px; } .fp-animalslider-nav{ width: 38px; height: 38px; } } /* =========================================================================== Accordion and image toggle. See includes/cq-shortcodes.php. Both are
/, so the open/close behaviour is the browser's. =========================================================================== */ .fp-accordion{ max-width: 900px; } .fp-accordion-item{ border: 1px solid rgba(0, 0, 0, .10); border-radius: 10px; background: #ffffff; margin-bottom: 10px; overflow: hidden; } .fp-accordion-summary{ display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 17px; font-weight: 700; color: #12506f; cursor: pointer; list-style: none; transition: background .15s ease; } .fp-accordion-summary::-webkit-details-marker{ display: none; } .fp-accordion-summary:before{ content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2.5px solid #2da2da; border-bottom: 2.5px solid #2da2da; transform: rotate(-45deg); transition: transform .2s ease; } .fp-accordion-item[open] > .fp-accordion-summary:before{ transform: rotate(45deg); } .fp-accordion-summary:hover{ background: #f2f8fb; } .fp-accordion-body{ padding: 0 18px 16px 37px; color: #333333; line-height: 1.6; } /* --- image toggle: the "Explore the Park" panels ------------------------ Dougal: "two white boxes that look horrible ... a heap of clickable bullet points ... really they're a mess (crashing into each other too) - get rid of the white, make more of the headlines and lay them out better." Everything wrong with them, measured: - the two cards sat at 78..700 and 700..1322 — touching exactly, no gutter - the links were #fdd215 yellow on white: 1.46:1, effectively unreadable - 17 links in one centred column, so one card ran three times the height of its neighbour with a sea of empty space beside it - blank list items left holes in the middle of the list Now brand yellow instead of white (navy on #fdd215 is 6.0:1), the heading given real weight, and the links laid out as a wrapping grid of chips rather than a single tall column — which is also what stops the two cards being wildly different heights. */ .fp-imagetoggle{ margin: 0 12px 24px; border-radius: 16px; background: #fdd215; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); overflow: hidden; } /* Icon on top, centred, with the title beneath it — the side-by-side version left the badge and a short word like "Attractions" stranded at opposite ends of a 600px card. Stacked, both are the same optical size and the card reads as one unit. */ .fp-imagetoggle-head{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 24px 6px; cursor: pointer; list-style: none; text-align: center; } .fp-imagetoggle-head::-webkit-details-marker{ display: none; } .fp-imagetoggle .fp-imagetoggle-img{ width: 116px !important; height: 116px !important; max-width: 116px !important; flex: 0 0 auto; border-radius: 50%; object-fit: contain; background: rgba(255, 255, 255, .6); padding: 10px; } .fp-imagetoggle-title{ display: block; font-size: clamp(28px, 2.8vw, 40px); font-weight: 900; line-height: 1.05; color: #12506f; } .fp-imagetoggle-body{ padding: 0 24px 26px; line-height: 1.5; text-align: left; } /* The "Find more about our attractions by clicking on them!" line sits under the centred header, so it is centred too — and given room to breathe. */ .fp-imagetoggle-body h3{ margin: 4px 0 20px; font-size: 19px; font-weight: 700; line-height: 1.3; color: #12506f; text-align: center; } /* The links become a wrapping grid of chips. White on the yellow so each one reads as a target, navy text at 8.7:1. */ /* !important, and enumerated rather than assumed: the LEFT column carries Salient's `centered-text` class, so responsive.css sets `.col.centered-text ul { display: block !important }` — which beat a plain `display: grid` and left seventeen chips stacked in one narrow column beside an empty half-card, while the right-hand list (no `centered-text`) gridded correctly. Same reason for the text-align. */ .fp-imagetoggle-body ul{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none !important; text-align: left !important; } .fp-imagetoggle-body li{ margin: 0; padding: 0; list-style: none !important; } /* Several list items are empty — they were leaving holes mid-list. */ .fp-imagetoggle-body li:empty{ display: none; } /* The chip is the LI, not the link. Several activities have no page of their own — "Goat Feeding", "Meet the Babies" and others are plain with no — so styling only the anchor gave half the list a white plate and left the rest as bare text floating on the yellow. */ .fp-imagetoggle-body li{ display: flex; border-radius: 10px; background: #ffffff; transition: background .15s ease, transform .15s ease; } .fp-imagetoggle-body li a, .fp-imagetoggle-body li > strong, .fp-imagetoggle-body li > b{ display: flex; align-items: center; width: 100%; padding: 11px 15px; color: #12506f !important; font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none !important; } /* Only the ones that actually go somewhere behave like buttons. */ .fp-imagetoggle-body li:has(a):hover{ background: #12506f; transform: translateY(-2px); } .fp-imagetoggle-body li:has(a):hover a, .fp-imagetoggle-body li:has(a):hover a b, .fp-imagetoggle-body li:has(a):hover a strong{ color: #ffffff !important; } /* Not a link: a quieter plate, so it does not promise a click it cannot keep. */ .fp-imagetoggle-body li:not(:has(a)){ background: rgba(255, 255, 255, .55); } /* The bold/strong tags inside the links carry their own colour on this site. */ .fp-imagetoggle-body li a b, .fp-imagetoggle-body li a strong{ color: inherit !important; font-weight: 700; } /* =========================================================================== Carousel item fallback — see vc_templates/item.php. Matches how the Useful Information page already presents these same six destinations: the title above, then the purpose-made "Website Tile" image. No white card — Dougal, on the old version: "it also uses white which again jars with the rest of the site". The tiles ARE the design; they just were never wired up here. =========================================================================== */ .fp-carditem{ display: block; height: 100%; } .fp-carditem-title{ display: block; margin-bottom: 12px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 900; line-height: 1.15; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, .22); } .fp-carditem-media{ display: block; overflow: hidden; border-radius: 16px; /* No shadow: the card frame already carries one, and a second inside it made the tile look like it was floating off the plate. */ background: rgba(255, 255, 255, .16); } .fp-carditem .fp-carditem-img{ display: block; width: 100% !important; height: auto !important; max-width: none !important; transition: transform .45s ease; } .cell:hover .fp-carditem-img{ transform: scale(1.04); } /* Nothing to show: keep a readable plate rather than a bare word on green. */ .fp-carditem--noimg{ padding: 22px 24px; border-radius: 16px; background: #fdd215; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .fp-carditem--noimg .fp-carditem-title{ margin: 0; color: #12506f; /* 6.0:1 on the brand yellow */ text-shadow: none; } /* =========================================================================== Terms & Conditions. See includes/terms.php. A 32-page legal document, so this is built for FINDING things: a sticky contents list, numbered anchors, and generous measure. =========================================================================== */ .fp-tc{ display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 32px 38px 44px; /* Not white — "too harsh and not used anywhere else on the site". A soft tint of the brand yellow instead: navy on #fdf3cf is 7.9:1, better than the white it replaces (8.7:1 is barely different to read) and it belongs to the palette. Full #fdd215 across 32 pages of legal text would be punishing to read, so the saturated yellow is kept for the header rule and the accents. */ background: #fdf3cf; border-radius: 14px; box-shadow: 0 4px 26px rgba(0, 0, 0, .14); color: #2b3a42; line-height: 1.65; } /* Every section is a direct child of .fp-tc otherwise, so the 2-column grid dealt them alternately left/right like newspaper columns. The body needs to be ONE grid item. */ .fp-tc-body{ grid-column: 2; min-width: 0; } .fp-tc-head{ grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 3px solid #fdd215; margin-bottom: 8px; } .fp-tc-title{ margin: 0 0 6px; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; color: #12506f; } .fp-tc-meta{ margin: 0 0 16px; font-size: 15px; color: #5d7079; } .fp-tc-downloads{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .fp-tc-dl{ display: inline-block; padding: 11px 20px; border-radius: 8px; background: #fdd215; color: #12506f !important; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; } .fp-tc-dl:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } .fp-tc-dl-alt{ background: #fff6d4; } /* --- contents --- */ .fp-tc-toc{ position: sticky; top: 150px; /* clears the 118px header band */ max-height: calc(100vh - 190px); overflow-y: auto; padding-right: 6px; font-size: 14px; } .fp-tc-toc-h{ margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: #5d7079; } .fp-tc-toc-list{ list-style: none; margin: 0; padding: 0; counter-reset: none; } .fp-tc-toc-list li{ margin: 0 0 2px; list-style: none; } .fp-tc-toc-list a{ display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 5px 8px; border-radius: 6px; color: #12506f !important; text-decoration: none !important; line-height: 1.35; transition: background .12s ease; } .fp-tc-toc-list a:hover{ background: #fbe9a8; } .fp-tc-toc-n{ color: #7d9aa8; font-variant-numeric: tabular-nums; } /* --- body --- */ .fp-tc-section{ scroll-margin-top: 150px; /* so an anchor does not land under the header */ padding-bottom: 6px; } .fp-tc-h2{ display: grid; grid-template-columns: 44px 1fr; align-items: baseline; gap: 4px; margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid #e2ebef; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; color: #12506f; } .fp-tc-num{ color: #2da2da; font-variant-numeric: tabular-nums; } .fp-tc-sub{ margin: 22px 0 8px; font-size: 18px; color: #12506f; } .fp-tc p{ margin: 0 0 13px; } /* Salient resets list-style on lists inside content, which stripped the numbering off a numbered legal document — the points still have to be citable as "19.4". */ .fp-tc-list{ margin: 0 0 16px; padding-left: 30px; list-style: decimal outside !important; } .fp-tc-list li{ margin-bottom: 8px; padding-left: 4px; list-style: decimal outside !important; } /* A warm off-white against the cream rather than the cool blue tint it started as — on #fdf3cf that read as a different design system. The brand blue stays as the rule down the side. */ .fp-tc-defs{ margin: 0 0 18px; padding: 18px 22px; background: #fffdf3; border-left: 4px solid #2da2da; border-radius: 0 8px 8px 0; } .fp-tc-defs dt{ margin-top: 12px; font-weight: 700; color: #12506f; } .fp-tc-defs dt:first-child{ margin-top: 0; } .fp-tc-defs dd{ margin: 2px 0 0; } @media (max-width: 900px){ .fp-tc{ grid-template-columns: 1fr; gap: 24px; padding: 22px 20px 30px; } .fp-tc-body{ grid-column: 1; } .fp-tc-toc{ position: static; max-height: none; padding: 16px 18px; background: #f4f9fb; border-radius: 10px; } } /* The clause numbers are in the MARKUP, not a CSS counter — the source restarts and skips numbers in places, and a clause has to keep the number it was signed off with. So the list itself carries no marker. */ .fp-tc-list, .fp-tc-list li{ list-style: none !important; } .fp-tc-list{ margin: 0 0 16px; padding-left: 0; } .fp-tc-list li{ display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px; margin-bottom: 9px; padding-left: 0; } .fp-tc-li-n{ color: #2da2da; font-weight: 700; font-variant-numeric: tabular-nums; } /* =========================================================================== Nav adjustments, 2026-08-19. =========================================================================== */ /* --- 1. Home's hover tab had no left padding ----------------------------- Measured rather than guessed: every nav link carries `margin: 0 15px`, so the word sits 15px inside its own box and the tab has even padding either side. Salient gives the FIRST item `margin: 0 15px 0 0` — no left margin — so Home's text sat flush against the left edge of its tab while every other item had a gap. Restore the missing 15px. */ #header-outer #top nav > ul > li.menu-item:first-child > a{ margin-left: 15px !important; } /* --- 2. Bigger logo, only where there is no blue behind it ---------------- "our navigation logo - the one shown without the blue background - is too small - needs to be at least 30% bigger - no need to change it anywhere else." 110px -> 143px, exactly 30%. Scoped to .transparent, so the stuck header's 90px logo is untouched. It still fits: the header is 166px tall, so a 143px logo centres at roughly 11..154 and simply overhangs the 118px band further, which is the effect Dougal already liked. */ /* Grown with a TRANSFORM, not by changing the height. Setting height:143px on the image made #logo 143px tall too, which pushed the whole header from 166px to 199px — and every measurement that hangs off it (the 118px band, the panel top, the tab) is calibrated to 166. A scale leaves the layout box at 110px and paints the logo 30% larger over it, so nothing else moves. #logo already has overflow:visible, so it is free to spill. */ body #header-outer.transparent #logo img, body #header-outer[data-transparent-header="true"].transparent #logo img{ /* 1.3 -> 1.56, i.e. another 20% on what was already there. Painted size goes 179x143 to 215x172; the layout box stays 110px, so the header is still 166px and nothing calibrated to it moves. The .transparent state only — the sticky logo carries no transform at all and is deliberately left alone. */ /* translateY nudges it clear of the viewport's top edge: at 1.56 the logo spilled above y=0 and the circle was clipped flat. 7px because the breakpoint at 1280 gives the header 176px and scales the logo with it, so 4px cleared 1920/1440 and still cut 1280 by 2. Transforms apply right to left, so this scales first and then moves it down by a true 7px rather than a scaled one. The bottom overhang is unaffected. */ transform: translateY(7px) scale(1.56); transform-origin: center center; } /* Below 1200 the logo and the nav words run out of room. Measured at 1100: the two collide at EVERY scale, including the original 1.3 — the gap to "What's On" is already -17px there — so this is a pre-existing squeeze at that width, not something the enlargement introduced. It is left for Dougal to judge separately. What this does do is avoid making it worse: from 1199 down the logo returns to the size it was before today. Verified clear at 1200 and above, where 1.56 leaves 11px to the left menu and 23px to the right. */ @media only screen and (max-width: 1199px) { body #header-outer.transparent #logo img, body #header-outer[data-transparent-header="true"].transparent #logo img{ transform: translateY(4px) scale(1.3); } } /* --- 3. Bigger nav words, sitting closer to the logo ---------------------- "slightly bigger and closer to the logo, not closer to the edges of the site." 19 -> 21px, and both groups move inward. The left menu is left-anchored, so padding-left walks it toward the centre. The right group is RIGHT-anchored and ends with the Book a Visit button, basket and search, which should stay where they are — so rather than move the group, the button gets a left margin. The ul grows leftward from its fixed right edge, which carries Shop and Contact toward the logo and leaves the icons alone. */ body #header-outer #top nav > ul > li > a, body #header-outer #top nav > ul > li > a .menu-title-text{ font-size: 21px !important; } /* The shift has to be RESPONSIVE. Measured across widths: the 30% bigger logo eats ~20px either side, the 21px type widens both groups, and the inward shift closes the rest — together they overlapped the logo at every width below 1600px (at 1440 the gap was -4px, at 1200 it was -68px). So the full shift only applies where there is genuinely room for it, halves in the middle, and disappears on smaller laptops where the nav already fills the bar. !important on the right-hand one because Salient sets `margin: 0 14px` at a higher specificity — without it the group moved 12px, not 125. */ @media (min-width: 1600px){ #header-outer #top nav > ul#menu-main-left-1{ padding-left: 90px; } #header-outer #top nav > ul > li.nectar-header-text-content-wrap{ margin-left: 125px !important; } } @media (min-width: 1400px) and (max-width: 1599px){ #header-outer #top nav > ul#menu-main-left-1{ padding-left: 45px; } #header-outer #top nav > ul > li.nectar-header-text-content-wrap{ margin-left: 62px !important; } } /* A list item that is neither a link nor a bolded activity is a footnote, not an item — the Activities list ends with "*Activities change with seasons...". It was inheriting the page's white text on a pale chip with no padding, which made it both unreadable and pretending to be a button. Span the full grid, drop the plate, and set it as the aside it is. */ .fp-imagetoggle-body li:not(:has(a)):not(:has(strong)):not(:has(b)){ grid-column: 1 / -1; display: block; background: none; padding: 4px 2px 0; color: #12506f; font-size: 14px; font-style: italic; line-height: 1.45; } /* =========================================================================== The Privacy page, given the same treatment as Terms. Its content is 20KB of WPBakery in a single text block and lives in the database, so it is dressed from the outside via the fp-legal-page body class rather than rebuilt — see includes/legal-pages.php. =========================================================================== */ .fp-legal-page .main-content .wpb_text_column{ max-width: 1180px; margin: 0 auto; padding: 34px 40px 44px; background: #fdf3cf; border-radius: 14px; box-shadow: 0 4px 26px rgba(0, 0, 0, .14); color: #2b3a42; line-height: 1.65; } /* The Terms page renders through [fp_terms] and brings its own panel, so it must not get a second one wrapped around it. */ .fp-legal-page .main-content .wpb_text_column:has(.fp-tc){ max-width: none; padding: 0; background: none; border-radius: 0; box-shadow: none; } .fp-legal-page .main-content .wpb_text_column h1, .fp-legal-page .main-content .wpb_text_column h2, .fp-legal-page .main-content .wpb_text_column h3, .fp-legal-page .main-content .wpb_text_column h4{ color: #12506f; } .fp-legal-page .main-content .wpb_text_column h2{ margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(18, 80, 111, .16); } .fp-legal-page .main-content .wpb_text_column a{ color: #12506f; text-decoration: underline; } .fp-legal-page .main-content .wpb_text_column ul, .fp-legal-page .main-content .wpb_text_column ol{ padding-left: 26px; margin-bottom: 16px; } .fp-legal-page .main-content .wpb_text_column li{ margin-bottom: 7px; list-style: inherit; } /* =========================================================================== Leading on headings that wrap. Dougal: "the leading crashes the titles - see grab - can we add more space so that if a title goes over two lines, it doesn't crash into itself." THE ROOT CAUSE, and it is not one thing. Salient sets its heading leading in FIXED PIXELS, sized for its own default font-sizes — `h3 { font-size: 22px; line-height: 34px }`. WPBakery then sets font-size INLINE on every heading and leaves line-height alone. So an h3 rendered at 42px keeps the 34px leading meant for 22px type: ratio 0.81, and the two lines physically overlap. Measured across the site, the worst was 0.59 (75px type on 44px leading). A blanket `h1..h6 { line-height: 1.15 }` would be wrong — where Salient's fixed value is generous relative to the font-size (22px/34px = 1.55) it would TIGHTEN it. So this is scoped to the elements WPBakery sizes inline. No !important on purpose: an inline line-height still wins, which is what the headings fixed at source by apply-db-changes.sh step 17 carry. =========================================================================== */ .vc_custom_heading{ line-height: 1.15; } /* Shop loop titles: 36px type on 23px leading, ratio 0.64. Both the product and the CATEGORY title class — the shop landing page uses the category one, which is what the sweep actually caught. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-loop-product__title, .woocommerce-loop-category__title{ line-height: 1.25 !important; } /* Button labels, not headings — but they wrap and crash the same way. Salient gives .nectar-button a fixed 20px leading while the label renders at 24px (ratio 0.83), so a three-line button label overlaps itself. */ .nectar-button, .nectar-button span{ line-height: 1.3 !important; } /* Slider Revolution hero text. SR7 writes line-height inline in PIXELS equal to the font size — 180px type on 180px leading, ratio 1.00 — so a hero that wraps has the descenders of line one sitting on the capitals of line two. That is the case in Dougal's screenshot. 1.1 rather than the 1.15 used elsewhere: these are 120-180px display sizes where a little leading goes a long way, and SR positions layers absolutely, so the smaller the change the less it disturbs a designed layout. !important is unavoidable — SR sets it inline. */ #header-outer ~ * sr7-txt, sr7-txt.sr7-layer, h1.sr7-layer, h2.sr7-layer, a.sr7-layer{ line-height: 1.1 !important; } /* The tabbed-section headings on the map attraction pages: 48px type on 48px leading, wrapping to three lines. Last one caught by the sweep. */ h2.tab-nav-heading, h2.tab-nav-heading a, h2.tab-nav-heading span{ line-height: 1.15 !important; } /* =========================================================================== Testimonials and rating badges — see includes/reviews.php. Cream cards on the brand green, navy text, yellow stars. Same family as the Terms panel and the Explore the Park cards: no white, nothing that jars. =========================================================================== */ .fp-reviews{ max-width: 1240px; /* The shortcode usually sits at the very top of a page, directly under the header band — without this the badges tuck under the overhanging logo. */ margin: 0 auto; padding: 40px 20px 10px; } /* --- the two rating badges ------------------------------------------------ */ .fp-badges{ display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 34px; } .fp-badge{ display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 1 300px; padding: 20px 26px; background: #fdf3cf; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .14); text-decoration: none !important; color: #12506f !important; transition: transform .15s ease, box-shadow .15s ease; } a.fp-badge:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); } /* Sized by HEIGHT only, so every mark sits on the same optical baseline whatever its proportions — the official Tripadvisor wordmark is 561x86 (about 6.5:1) while the drawn Google one is 3:1. A max-width tight enough to clip the wider one would letterbox it inside its own box. */ .fp-badge-mark{ height: 24px; width: auto; max-width: 100%; display: block; } /* The Tripadvisor wordmark carries a lot of horizontal weight at the same height, so it is nudged down slightly to match Google's optical size. */ .fp-badge--tripadvisor .fp-badge-mark{ height: 21px; } .fp-badge-score{ display: flex; flex-direction: column; align-items: center; gap: 3px; } .fp-badge-text{ font-size: 14px; color: #4a6b7c; } .fp-badge-text strong{ font-size: 17px; color: #12506f; } /* --- stars, with halves --------------------------------------------------- */ .fp-stars{ display: inline-flex; gap: 2px; line-height: 1; font-size: 19px; } /* Each star is a grey glyph with a yellow one clipped over it, so 4.7 shows as four and a half rather than being rounded to five. */ .fp-star{ position: relative; display: inline-block; color: rgba(18, 80, 111, .22); } .fp-star-on{ position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5b301; } /* --- carousel ------------------------------------------------------------- */ .fp-reviews-title{ margin: 0 0 20px; text-align: center; font-size: clamp(26px, 3vw, 40px); font-weight: 900; line-height: 1.1; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, .22); } .fp-reviews-carousel{ position: relative; padding: 0 46px; } /* Flex, not grid. `grid-auto-columns` with a percentage inside an overflowing scroll container resolved against the wrong box and packed all six cards into one view — which also made the pager think there was a single page. flex-basis on the item is unambiguous. */ .fp-reviews-track{ display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; } .fp-reviews-track::-webkit-scrollbar{ display: none; } .fp-review{ flex: 0 0 calc(100% - 0px); } @media (min-width: 760px){ .fp-review{ flex: 0 0 calc(50% - 9px); } } @media (min-width: 1080px){ .fp-review{ flex: 0 0 calc(33.333% - 12px); } } .fp-review{ display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px 26px 22px; background: #fdf3cf; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .14); scroll-snap-align: start; } /* Salient styles every blockquote with a left rule and italics; inside a testimonial card that reads as a stray yellow bar down the text. Reset it here rather than avoiding
, which is the correct element. */ .fp-reviews .fp-review-quote, .fp-reviews blockquote.fp-review-quote{ margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 0 !important; background: none !important; font-size: 16px !important; font-style: normal !important; line-height: 1.55 !important; color: #2b3a42; quotes: none; } .fp-reviews .fp-review-quote:before, .fp-reviews .fp-review-quote:after{ content: none !important; } .fp-review-quote p{ margin: 0 0 10px; } .fp-review-quote p:last-child{ margin-bottom: 0; } .fp-review-by{ margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(18, 80, 111, .14); } .fp-review-name{ display: block; font-weight: 700; color: #12506f; } .fp-review-meta{ display: block; font-size: 13px; color: #6b8492; } /* --- arrows and dots ------------------------------------------------------ */ .fp-reviews-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fdd215; color: #12506f; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, .25); transition: transform .15s ease; z-index: 2; } .fp-reviews-nav:hover{ transform: translateY(-50%) scale(1.08); } .fp-reviews-nav svg{ width: 20px; height: 20px; } .fp-reviews-prev{ left: 0; } .fp-reviews-next{ right: 0; } .fp-reviews-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .fp-reviews-dot{ width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .15s ease, transform .15s ease; } .fp-reviews-dot.is-active{ background: #fdd215; transform: scale(1.35); } /* Everything fits on one page: not a carousel. */ .fp-reviews-carousel.is-static .fp-reviews-nav, .fp-reviews-carousel.is-static .fp-reviews-dots, .fp-reviews.is-static .fp-reviews-nav{ display: none; } @media (max-width: 700px){ .fp-reviews-carousel{ padding: 0 8px; } .fp-reviews-nav{ display: none; } } /* "as of Aug '26" under each badge. Deliberately quiet — it qualifies the figure without competing with it. */ .fp-badge-asof{ display: block; margin-top: 2px; font-size: 12px; color: #7d95a2; } /* ========================================================================== CONTACT PAGE (page-id-21960) -------------------------------------------------------------------------- Styling only. Page content lives in the DATABASE and the cutover imports a fresh copy of live, which would discard an editor change; a stylesheet change survives it. The structure this leans on, confirmed in the DOM rather than assumed: h5.vc_custom_heading + div.wpb_text_column <- each info block .wpb_column.contactForm <- the form column The h5 becomes a card head and the text column after it becomes the body. CSS cannot wrap two siblings in one box, but styling them as a matched pair reads as one card. ========================================================================== */ .page-id-21960 { --fp-yellow: #fdd215; --fp-navy: #12506f; --fp-ink: #143d52; } /* --- The two intro headings were an H1 and an H2, so they set at different sizes side by side. Match them; they are peers on the page. ---------- */ .page-id-21960 .wpb_column > .vc_column-inner > .wpb_wrapper > h1.vc_custom_heading, .page-id-21960 .wpb_column > .vc_column-inner > .wpb_wrapper > h2.vc_custom_heading { font-size: 52px !important; line-height: 1.1 !important; margin-bottom: 14px !important; } /* --- Info blocks as full-yellow cards. Navy on #fdd215 is 6.0:1. --------- */ .page-id-21960 h5.vc_custom_heading:has(+ .wpb_text_column) { background: var(--fp-yellow); color: var(--fp-navy) !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 24px 0 0 !important; padding: 20px 26px 0; border-radius: 16px 16px 0 0; } .page-id-21960 h5.vc_custom_heading + .wpb_text_column { background: var(--fp-yellow); margin: 0 0 6px !important; padding: 10px 26px 22px; border-radius: 0 0 16px 16px; } .page-id-21960 h5.vc_custom_heading + .wpb_text_column, .page-id-21960 h5.vc_custom_heading + .wpb_text_column p { color: var(--fp-ink); font-size: 18px; line-height: 1.6; } .page-id-21960 h5.vc_custom_heading + .wpb_text_column p { margin-bottom: 10px; } .page-id-21960 h5.vc_custom_heading + .wpb_text_column p:last-child { margin-bottom: 0; } /* --- Links. They were yellow text on green at 1.55:1 — barely legible and not obviously clickable. A yellow chip would now vanish into the yellow card, so they are navy pills with white text: 8.8:1. inline-block so a pill never breaks across lines mid-sentence. -------- */ .page-id-21960 .wpb_text_column a { display: inline-block; background: var(--fp-navy); color: #fff !important; font-weight: 700; font-size: 17px; text-decoration: none !important; padding: 5px 16px; border-radius: 999px; line-height: 1.4; transition: background-color .15s ease, transform .15s ease; } .page-id-21960 .wpb_text_column a:hover, .page-id-21960 .wpb_text_column a:focus-visible { background: #1b6d95; transform: translateY(-1px); } .page-id-21960 .wpb_text_column a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* ========================================================================== The form — no panel, a chunky outline, white type on the page green ========================================================================== */ .page-id-21960 .contactForm .wpcf7 { background: transparent; /* 8px to match the carousel cards below the map — same frame, same page. */ border: 8px solid var(--fp-yellow); border-radius: 20px; padding: 30px 30px 26px; margin-top: 6px; } /* CF7 wraps each field in a