/** * Surf Shack — site-wide layout repairs. * * Small, surgical overrides for layout bugs that live OUTSIDE our own markup, where the * only alternative is editing an Elementor template in the database. Each one records * what it fixes, what it measured, and why it is scoped the way it is. * * This file is loaded on EVERY front-end page, unlike ss-marketing.css. It has to be: * the things it fixes are in the shared header and footer, so they break /account/, * /book/ and /passes/ exactly as much as they break a marketing page. * * Keep it small. Anything that belongs in our own stylesheet belongs there instead. * * @package SurfShack\Core */ /* --------------------------------------------------------------------------- * 1. The footer forced a horizontal scrollbar on every page between 768px and * 1220px wide — which includes every iPad and every small laptop. * * Elementor footer template 5464 sets `--width: 1220px` on containers * `60284c33` and `2c4760f3` inside `@media (min-width: 768px)`, with no * max-width. Elementor turns `--width` into a hard `width`, so from 768px up * to 1220px the footer is simply wider than the screen and the whole document * scrolls sideways. * * Measured before this rule, on /spa/ (a page nobody had touched, so this is * not something the rebuild introduced): * 1100px viewport -> document scrollWidth 1160 (+60) * 1024px viewport -> document scrollWidth 1122 (+98) * 768px viewport -> document scrollWidth 994 (+226) * * Capping at the viewport is the minimum change that fixes it: the container * keeps its 1220px intent on wide screens and simply stops exceeding the * screen on narrow ones. Editing the template in the database would work too, * and would not travel with the plugin to production. * * Scoped to the footer location so no Elementor container anywhere else can * be affected by it. * ------------------------------------------------------------------------- */ .elementor-location-footer .e-con { max-width: 100%; } /* --------------------------------------------------------------------------- * 2. The header and footer "Book Now" buttons were white on #F09956 — 2.24:1. * * They are the most-seen buttons on the site: Elementor header and footer * templates, so they appear on EVERY page including /account/ and /book/. * Nick's rule (15 Aug) is that orange and coral buttons carry white text, so * the fill moves rather than the label — #C25700 is the same hue at a value * white can be read on. Measured 4.51:1. * * Everything else in the chrome is left alone. The gold headings and mint * links on the dark ground are the site's identity, they were measured, and * they pass — repainting them would be a design change, not enforcement. * * `!important`, and it is the right tool here rather than laziness. Elementor * generates * .elementor-137 .elementor-element.elementor-element-1513233 .elementor-button * which is (0,4,0) AND loads after this file, so no honest selector wins: a * `body` prefix only reaches (0,3,1). The alternative is hard-coding Elementor's * element ids into our stylesheet, which breaks the moment someone edits the * header in the editor. Overriding generated CSS we do not own is exactly the * case !important exists for. * * A first attempt without it measured as still 2.24:1 on the live page — the * rule was deployed, present in the served file, and silently losing. Worth * remembering: a deployed stylesheet is not an applied stylesheet. * * HOVER, corrected 15 Aug. The first hover darkened to #A94B00 and Nick was * right that it looked wrong: that far down, the orange desaturates toward * brown and the button reads as disabled rather than active. #B35000 holds the * saturation, so it deepens without going muddy — 5.17:1 under white. * ------------------------------------------------------------------------- */ /* WIDENED 15 Aug. This was scoped to the header and footer locations, and a style * audit of /jobs/ found the same failure in the page body: "View role & apply" in * white on #F09956, 2.24:1. Measured across /jobs/, /, /spa/, /events/, /volleyball/, * /contact/ and /flowrider/, EVERY Elementor button outside the chrome renders * #F09956 with #FFFFFF — one value doing one job, seven instances, all failing. * * That is what makes an unscoped `.elementor-button` safe here rather than reckless: * there is no second Elementor button style on this site to repaint. If one is ever * added in the editor it will need its own rule, and it should — a second button * colour is a design decision, not a default. */ .elementor-button { background-color: #C25700 !important; /* No border. Elementor draws one only so it has something to recolour on hover; the fill is the affordance here and the outline just fuzzed the edge. */ border: 0 !important; /* House timing: .16s on cubic-bezier(.22,.61,.36,1), same as every other button. Colour only, the focus ring is deliberately NOT transitioned, because a keyboard user should see focus land instantly, not fade in. */ transition: background-color .16s cubic-bezier(.22,.61,.36,1), color .16s cubic-bezier(.22,.61,.36,1) !important; } @media (prefers-reduced-motion: reduce) { .elementor-button { transition: none !important; } } /* Elementor's own hover rule for this button is: * * background-color: #F4B36500; (8-digit hex, 00 alpha — fully transparent) * color: #F4B365; * border-color: #F4B365; * * Overriding only the background left the other two live, so hovering turned the * label GOLD ON ORANGE — measured 2.83:1, worse than the 2.24:1 this whole fix set * out to remove. The label has to be pinned white here, not just the fill. */ .elementor-button:hover, .elementor-button:focus { background-color: #B35000 !important; color: #fff !important; border-color: transparent !important; } /* That gold border was also the only visible focus indicator this button had, so * removing it without replacing it would trade a contrast bug for a keyboard one. * A white ring on the dark chrome measures 17.59:1, and `:focus-visible` keeps it * off mouse clicks. */ /* The ring has to change with the ground it lands on. White measures 17.59:1 on the * dark chrome and is invisible on a white page body, so the body gets the ink value * (#1F3E4A, 12.6:1 on white) and only the chrome keeps white. */ .elementor-button:focus-visible { outline: 3px solid #1F3E4A !important; outline-offset: 2px !important; } .elementor-location-header .elementor-button:focus-visible, .elementor-location-footer .elementor-button:focus-visible { outline-color: #fff !important; } /* There is a third gold rule, easy to miss because it is not on the button itself: * .elementor-...-1de5b28 .elementor-button:hover svg { fill: #F4B365; } * Without this, a button carrying an icon would hover with a white label and a gold * arrow beside it. */ .elementor-button:hover svg, .elementor-button:focus svg { fill: #fff !important; } /* --------------------------------------------------------------------------- * 3. The skip link was the last default-blue link on the site. * * `.skip-link` is invisible until a keyboard user presses Tab on page load — * which makes it the FIRST thing a keyboard user ever sees, and it was * rendering as #0000EE Times-ish default-agent styling on the dark chrome. * Found by auditing for #0000EE after the same default blue turned up on a * staff-portal link; this was the only other instance site-wide. * * Left in place, not hidden. It is the only way to skip the header nav. * ------------------------------------------------------------------------- */ .skip-link.screen-reader-text:focus { font-family: 'League Spartan', ui-sans-serif, system-ui, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #fff !important; background-color: #357B7D !important; border-radius: 4px !important; padding: 12px 20px !important; box-shadow: none !important; text-decoration: underline !important; outline: 3px solid #fff !important; outline-offset: 2px !important; } /* --------------------------------------------------------------------------- * 4. The header menu wrapped to two rows on a 1280 laptop. * * The nav went from four items to seven when the IA was restructured (Volleyball and * Availability were missing entirely, and Passes was buried inside the FlowRider * dropdown). Seven fit comfortably at 1440. They do not fit at 1280, and Elementor * does not switch to the hamburger until 1024 — so between those widths the row * wrapped and the header grew from 96px to 142px, shoving the page down. * * Measured on the live header, `padding:13px 20px` at 16px: * * shipped nav 892px needs a 1301px viewport * padding 11 + tracking nav 738px needs 1147px * padding 8 + 14px nav 626px needs 1035px * * So two tiers, each sized to the band it has to cover, and neither touching the * layout above 1400 where the shipped spacing is correct and should stay. * * Type, not truncation: shortening labels to fit was the other option and it was worse * — "Parties & Events" already became "Events" for its own reasons, and trimming * further would have cost clarity to buy pixels. Tightening the spacing costs nothing * a reader notices. * * 14px is on the Product scale. The nav sits on the dark chrome where white on * #16292F is 15.4:1, so the smaller size has contrast to spare. * * `!important` because Elementor generates per-element selectors that no honest * selector here outranks — the same reason as section 2 above. * * REMAINING GAP, stated rather than hidden: 1025-1035 is still ~10px short. That is a * window nobody sizes to deliberately, and the fix would be raising Elementor's mobile * breakpoint, which is a header-template setting rather than CSS. * ------------------------------------------------------------------------- */ /* WITHDRAWN, 15 Aug — and the reason is worth keeping. * * Two media-query tiers used to live here, tightening padding and stepping the font * down between 1025 and 1400, because seven items at 16px/700 UPPERCASE needed a * 1301px viewport and wrapped to two rows on any 1280 laptop. * * Setting the nav in sentence case at 600 (see section 5 below) took it from 892px to * 607px — it now fits from 988px up, which is below Elementor's own 1024 breakpoint, * so there is no band left to defend. Keeping the tiers would shrink a nav that * already fits. * * The general lesson: the compression hack existed to work around a type decision. * Fixing the type deleted the hack. Worth checking for, before adding the next one. */ /* --------------------------------------------------------------------------- * 5. THE HEADER MENU — subtler type, and an icon per item. * * Nick, 15 Aug: "the menu font is too much. everything blends together at first * glance. i'd rather more subtle text with icons for clarity." * * He is describing a real effect, not a preference. The nav shipped at 16px/700 * UPPERCASE with 0.8px tracking, and uppercase destroys the ascender-and-descender * profile that lets you recognise a word without reading it. Seven items set that way * are seven rectangles of near-identical height and weight — so the eye has to READ * the row rather than recognise it, every time. Going from four items to seven made * that failure mode obvious. * * Three changes, in order of how much they do: * * text-transform: none restores word shape. This is most of the fix on its own. * font-weight: 700 -> 600 the row stops competing with the BOOK NOW button. * letter-spacing: 0 tracking is for short all-caps labels, not seven words. * * And an icon before each label, at 17px and 70% opacity so it identifies the item * without shouting over it — full opacity on hover and for the current page. Painted * with `background-color: currentColor` behind a mask rather than as a coloured image, * so every icon inherits whatever the link colour is: white on the chrome, gold on * hover, and correct automatically if the header is ever recoloured. * * The icons live on `a.elementor-item::before`, which is safe HERE and worth knowing * why: this menu uses Elementor's `e--pointer-text` pointer, which changes colour only * and leaves both pseudo-elements at `content:none`. Switch the pointer to underline or * double-line in the editor and Elementor claims ::before/::after for the indicator — * at which point these icons break visibly rather than subtly, which is the right way * round for a collision. * * @package SurfShack\Core * ------------------------------------------------------------------------- */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 15px !important; display: inline-flex !important; align-items: center; gap: 7px; /* 20px each side was tuned for four uppercase items. Seven sentence-case items with icons need it back: the icons cost 294px across the row (17px + 7px gap + flex), which took the nav from 607px to 901px and wrapped it again on a 1263 window. */ padding-left: 12px !important; padding-right: 12px !important; } /* Between Elementor's 1024 breakpoint and ~1170 the row cannot hold seven labels AND * seven icons, whatever the padding. The icons are the enhancement, so they are what * gives way — the text-only row is exactly what shipped before and still reads well. * Measured: icons off + 10px padding needs a 974px viewport, so the whole band clears. */ @media (min-width: 1025px) and (max-width: 1169px) { .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::before { display: none; } .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { padding-left: 10px !important; padding-right: 10px !important; } } .elementor-location-header .elementor-nav-menu a.elementor-item::before { content: ""; /* Elementor's pointer system positions this pseudo ABSOLUTELY (it is normally a 3px underline pinned to the bottom of the link), so the first version painted each icon on top of its own label instead of beside it. Everything that positioning sets has to be handed back before the icon can sit in the flex row: position, offsets, transform, and the width:100% it uses to span the label. */ position: static !important; inset: auto !important; transform: none !important; border: 0 !important; margin: 0 !important; width: 17px !important; height: 17px !important; flex: none; background-color: currentColor; /* The fallback is a 1x1 empty SVG, and it is load-bearing. background-color is currentColor, so with no mask image the ::before paints as a solid filled square -- which is exactly what a nav item with no icon assigned used to render as. An empty mask paints nothing, so an unkeyed item is simply icon-free. */ -webkit-mask: var(--ss-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%2F%3E")) center / contain no-repeat; mask: var(--ss-ico, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%2F%3E")) center / contain no-repeat; /* !important, and this is the collision the note above predicted — just not the one expected. Elementor ships .elementor-item:not(:hover):not(:focus):not(.elementor-item-active)::before{opacity:0} as part of its pointer system, and it applies REGARDLESS of which pointer style is selected. So the icons were masked in correctly and painted at opacity 0. Measured, not guessed: computed opacity read 0 while mask-image read the data URI. */ opacity: .7 !important; transition: opacity .16s cubic-bezier(.22,.61,.36,1); } .elementor-location-header .elementor-nav-menu a.elementor-item:hover::before, .elementor-location-header .elementor-nav-menu a.elementor-item-active::before, .elementor-location-header .elementor-nav-menu li.current-menu-item > a::before { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .elementor-location-header .elementor-nav-menu a.elementor-item::before { transition: none; } } /* An item with no icon assigned gets no empty box. */ .elementor-location-header .elementor-nav-menu > li > a.elementor-item:not([style]):before { } .elementor-location-header .elementor-nav-menu > li:not([class*="menu-item-"]) > a.elementor-item::before { display: none; } /* * [Ivywild 2026-08-18, Nick] Two icons on the Passes row of the account sheet. * * Mine, from this morning's re-key. `[href$="/passes/"]` is an ENDS-WITH match, and the account * app's own nav has /account/passes/ -- which also ends in /passes/. So the account sheet's Passes * row got a --ss-ico on top of the SVG mobile-nav.php had already cloned in from that nav, and * painted both. * * The exclusion is on every icon rule, not just Passes, because the collision is structural * rather than particular: the account app mirrors the marketing sections (/account/orders/, * /account/bookings/) and the next one to be given an icon would break the same way silently. * These rules are for the MARKETING nav; the account nav brings its own glyphs. */ /* FlowRider */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/flowrider/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/flowrider/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%209c2%200%202-2.6%204-2.6S8%209%2010%209s2-2.6%204-2.6S16%209%2018%209s2-2.6%204-2.6%27%2F%3E%3Cpath%20d%3D%27M2%2015.6c2%200%202-2.6%204-2.6s2%202.6%204%202.6%202-2.6%204-2.6%202%202.6%204%202.6%202-2.6%204-2.6%27%2F%3E%3C%2Fsvg%3E"); } /* Volleyball */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/volleyball/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/volleyball/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%203c3%204.2%203%2013.8%200%2018%27%2F%3E%3Cpath%20d%3D%27M3.6%209.2c5%202%2011.8%202%2016.8%200%27%2F%3E%3C%2Fsvg%3E"); } /* Spa */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/spa/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/spa/"]:not([href*="/account/"]), .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/spa-3/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/spa-3/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4c3.5%204.1%206%207.1%206%2010.1a6%206%200%200%201-12%200c0-3%202.5-6%206-10.1z%27%2F%3E%3C%2Fsvg%3E"); } /* Food & Drink */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/menu/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/menu/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%208h11v6.5A4.5%204.5%200%200%201%2011.5%2019h-2A4.5%204.5%200%200%201%205%2014.5V8z%27%2F%3E%3Cpath%20d%3D%27M16%2010h1.4a2.5%202.5%200%200%201%200%205H16%27%2F%3E%3Cpath%20d%3D%27M5%2021.4h13%27%2F%3E%3C%2Fsvg%3E"); } /* Events */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/events/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/events/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8%203v4M16%203v4M3%2010.4h18%27%2F%3E%3C%2Fsvg%3E"); } /* Passes */ .elementor-location-header .elementor-nav-menu a.elementor-item[href$="/passes/"]:not([href*="/account/"]), .ssm-sheet-menu a[href$="/passes/"]:not([href*="/account/"]) { --ss-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M15%206.6v10.8%27%20stroke-dasharray%3D%272%202.6%27%2F%3E%3C%2Fsvg%3E"); } /* Availability */ /* 6280 Availability — REMOVED from the header menu 15 Aug at Nick's request ("not * needed, Book Now shows calendar"). The menu item is deleted, so this icon rule * would never match again; kept as a comment only so the next person adding a nav * item can see the pattern and the clock glyph is not lost. */ /* --------------------------------------------------------------------------- * 6. THE MOBILE MENU — my regression, and the fix. * * Nick: "mobile - something weird is going on. mobile menu items should be 100% and * add some l/r padding." * * Cause: `display:inline-flex` from section 5. It is correct for the desktop row — * that is what lets an icon sit beside a label — but Elementor reuses the SAME item * markup in the off-canvas panel, and inline-flex there shrinks each row to the width * of its own text. Measured on the panel: item width 142px inside a 360px container, * which is why the highlight on "Availability" stopped a third of the way across and * the rows read as floating chips rather than a list. The desktop rule is now scoped * to `.elementor-nav-menu--main`, which is Elementor's own class for that copy. * * Note `.elementor-nav-menu--dropdown` alone would be the wrong hook: Elementor puts * that class on desktop SUB-MENUS too. The off-canvas panel is the one that also * carries `.elementor-nav-menu__container`. * * What the panel gets: * full-width rows, so the tap target is the row and not the words in it; * 22px side padding, so nothing sits against the screen edge; * sub-items indented to 49px — 22 + 17 icon + 10 gap — so their labels line up * under the parent labels above them rather than floating centred, which is what * the widget's `__text-align-center` setting was doing to them; * a hairline between rows, because a list of seven needs to look like a list. * * A 48px minimum row height: this is the one surface that is only ever used with a * thumb. * ------------------------------------------------------------------------- */ .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item { display: flex !important; width: 100%; box-sizing: border-box; justify-content: flex-start !important; align-items: center; text-align: left !important; gap: 10px; min-height: 48px; padding: 12px 22px !important; } /* The children are `a.elementor-sub-item`, NOT `.elementor-item` — a rule written * against `.sub-menu a.elementor-item` matched nothing at all, which is exactly why * they were still centred and flush to the edge in Nick's screenshot while the parent * rows were already fixed. Two different classes for two levels of the same menu. */ .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item { display: flex !important; width: 100%; box-sizing: border-box; align-items: center; justify-content: flex-start !important; text-align: left !important; min-height: 44px; /* 49px = 22 gutter + 17 icon + 10 gap, so a child's label starts exactly under its parent's label rather than under the parent's icon. */ padding: 10px 22px 10px 49px !important; font-weight: 500; } .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item, .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-sub-item { border-bottom: 1px solid rgba(31, 62, 74, .10); } /* The dropdown toggle arrow belongs at the far end of the row, not tight against the label, it is the affordance for opening the group. */ .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item .sub-arrow { margin-left: auto; } /* --------------------------------------------------------------------------- * 7. MOBILE HEADER ORDER — the CTA was sitting above the brand. * * The header is four stacked rows, and on mobile they came out: * * [ Book Now ] <- a mobile-only row, full-width orange * [ logo · menu · account ] * * So the first thing on the page was a button, and the brand came second. That is the * wrong way round on any site and a strange one here, where the logo is also the way * back to the home page. * * The rows are separate Elementor containers and the header itself is `display:block`, * so there is no `order` to set until it becomes a flex column. Doing that on mobile * only, where the rows are already full-width block-level flex containers, renders * identically apart from the order. * * Hooked on `.elementor-hidden-desktop.elementor-hidden-tablet` rather than the * element id: that pair of classes IS the definition of "the mobile-only row", so the * selector says what it means and survives the header being edited. Hard-coding * `.elementor-element-1022e5b` would break the first time someone rebuilds the header, * and silently. * * Tab order follows DOM order, which is unchanged — the button is still second in the * source, so a keyboard user reaches the logo first, matching what they see. * ------------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-location-header { display: flex; flex-direction: column; } .elementor-location-header > .elementor-hidden-desktop.elementor-hidden-tablet { order: 1; } /* While we are here: the CTA is the one control on this screen that is guaranteed to be tapped, and it shipped at Elementor's `size-sm`. 48px, same floor as the menu rows, so the whole header obeys one tap-target rule. */ .elementor-location-header .elementor-hidden-desktop a.elementor-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* The hamburger and the account icon are 24px glyphs with no padding of their own, which makes them ~24px targets in the corner of a phone screen. */ .elementor-location-header .elementor-menu-toggle { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } } /* --------------------------------------------------------------------------- * 8. THE TABLET BAND — BOOK NOW was jumping to the far left. * * Nick, 15 Aug, at iPad Air (820 x 1180): "something funky with the header happens * at this width." It did: the orange CTA rendered as the FIRST thing in the header * row, hard against the left edge, with the logo pushed to the middle and the * hamburger and account icon at the right. Only between 768px and 1024px. * * WHERE IT COMES FROM. Not from us, and not from the theme — from the header * template's own generated stylesheet, `post-137.css`: * * @media (max-width: 1024px) { * .elementor-137 .elementor-element.elementor-element-1de5b28.elementor-element { * --order: -99999; --flex-grow: 1; --flex-shrink: 0; * } * } * * That is Elementor's flex "Order: Start" control, set on the widget at a * breakpoint. It took two passes to find because it is a custom property — * nothing declares `order` on the element; Elementor declares `order: var(--order)` * generically and the value arrives through `--order`. Searching the CSSOM for * rules that set `order` and match the element returns nothing at all. * * WHY IT WAS EVER SET. There are two Book Now buttons in this header: this one * (`elementor-hidden-mobile`, inside the nav row) and a full-width mobile-only row * (`elementor-hidden-desktop elementor-hidden-tablet`, handled in section 7 above). * Somebody set "Order: Start" meaning to reorder the MOBILE button — the same * intent section 7 implements — but set it on the tablet breakpoint, and in * Elementor a tablet value cascades down to mobile. On mobile it does nothing, * because this button is hidden there. So the setting has never once done what it * was for, and has only ever mis-laid out the 768–1024 band. Pure leakage. * * THE FIX is to put the widget back in source order, which is the desktop * arrangement: [logo … hamburger] [BOOK NOW] [account]. That is the same reading * order as 1170px+ — nav region, then CTA, then account — so the tablet header is * now the desktop header collapsed, rather than a third layout. * * `flex-grow` goes back to 0 with it. It is the other half of the same control and * left alone it would let the button stretch into whatever slack the row has. * * SELECTOR. Hooked on `.elementor-widget-button.elementor-hidden-mobile` rather * than `.elementor-element-1de5b28`, for the reason in section 7: "the button in * this header that is hidden on mobile" IS the inline CTA, and it stays true if * the header is rebuilt. The element id would not. * * `!important` because their declaration resolves through `--order` and beating a * custom property with a custom property means matching a (0,4,0) selector; setting * `order` directly and marking it important is shorter and cannot be out-specified * by the next Elementor regeneration. * * FLOOR AT 768 deliberately: below that the button is display:none and the mobile * row in section 7 takes over. No reason to reach into a band we are not fixing. * * PROPERLY, someone should clear the Order control on that widget in the Elementor * editor — this override exists because that is a UI edit and the generated CSS is * rewritten on every save. It is in the handoff. * ------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-location-header .elementor-widget-button.elementor-hidden-mobile { order: 0 !important; flex-grow: 0 !important; } } /* --------------------------------------------------------------------------- * 9. THE FOOTER STOPPING HALFWAY UP A SHORT PAGE. * * Nick, 15 Aug: "when a page doesn't have a lot of content and the footer goes all the * way half up the screen and below it is white or whatever bg color. make footer always * go to the bottom of the screen or lower." * * Measured on the 404 in his window (1251px tall): the footer ends at y1133 and the * remaining 118px is bare page ground under a dark footer, which reads as the page * having fallen over. Same on any thin page — a short legal page, an empty search * result, a 404. * * THE FIX is the sticky-footer pattern, and the only reason it was not already here is * that Hello Elementor leaves `body` as a block. Make it a flex column at least as tall * as the viewport and give the footer `margin-top: auto`, so every spare pixel collects * ABOVE the footer instead of below it. On a long page there is no spare space, `auto` * resolves to 0, and nothing changes — measured on /privacy/ (5,831px), unchanged. * * `min-height` and not `height`: content taller than the viewport must still push the * page down. `height:100vh` would clip it. * * `100dvh` after `100vh`, in that order, so a browser that understands the dynamic unit * uses it and one that does not keeps the static fallback. This matters on iOS, where * `100vh` is the height with the address bar HIDDEN — it would leave the page a browser * bar taller than the screen and put a scrollbar on a page that fits. * * SCOPED BY `:has()` rather than by page template or body class, because the honest * condition is "this page has a footer" and that is exactly what `:has()` asks. The app * screens are all `elementor_canvas` and render no footer at all — /account/, /passes/, * /staff-fnb/ measured: no `.elementor-location-footer` in the DOM — so they never match * and Nick's "public pages not app pages" scope holds without a list to maintain. A * browser without `:has()` drops the rule and gets today's behaviour, which is the right * way for this to fail. * * THE ADMIN BAR. WordPress puts `margin-top:32px` on when it is showing, so a * plain 100vh body is 32px taller than the space it has and every page gets a scrollbar. * Only Nick and staff ever see this, which is exactly who is looking at it. 46px below * 783px, where the bar is taller. * * Nothing renders after the footer to spoil it — checked: everything following it in * is a display:none script or a position:fixed widget, so there is nothing left * in flow to sit under it. Measured after: footer bottom 1248 in a 1248px viewport, * scrollHeight == clientHeight, gap 0. * ------------------------------------------------------------------------- */ /* SECOND FOOTER, same rule. The app screens are `elementor_canvas` and render no * Elementor footer at all — which is why the rule above correctly skipped them — but * they do have their own: `.ssr-funnelfoot`, the trust strip carrying "Secure * connection · Card payments processed by Clover", the legal links and the copyright. * Measured on /account/ at 1247px: it ends at y1056 and leaves 191px of bare ground, * which on a page whose entire job is saying "your card is safe here" is the worst * place on the site for the layout to look unfinished. * * Listed as a second selector rather than folded into one, because `:has()` cannot be * given an OR across two different children without matching pages that have neither. * The two never appear together — canvas pages have the funnel foot, templated pages * have the Elementor one — so a page picks up exactly one of these. * * `.ssr-funnelbar` above it is `position: sticky` and stays sticky as a flex item; * measured after, still pinned at the top with the admin bar's 32px offset. */ body:has(> footer.elementor-location-footer), body:has(> .ssr-funnelfoot) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.admin-bar:has(> footer.elementor-location-footer), body.admin-bar:has(> .ssr-funnelfoot) { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { body.admin-bar:has(> footer.elementor-location-footer), body.admin-bar:has(> .ssr-funnelfoot) { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); } } body:has(> footer.elementor-location-footer) > footer.elementor-location-footer, body:has(> .ssr-funnelfoot) > .ssr-funnelfoot { margin-top: auto; } /* --------------------------------------------------------------------------- * 10. THE FUNNEL CHROME — width, and the logo that was said twice. * * The funnel is /book/, /passes/, /account/ and /order/: canvas pages with their own * top bar (`.ssr-funnelbar`) instead of the marketing header. * * WIDTH. Measured at 1677px: `.ssr-funnelbar-in` is `max-width:1040px` on a content-box, * so it renders 1080 wide and its content runs x319..1359. The booking grid under it now * runs x249..1429. The bar was 70px narrower than the page it sits on top of, on both * sides, which reads as the chrome belonging to a different layout than the content. * * 1220 on a border-box gives 1180 of content — the product measure `.ssr-pa` was just * capped to, and the same number the owner console uses. Stated as border-box explicitly * rather than trusting the inherited value: this element is outside `.elementor`, so it * does NOT get Elementor's global `box-sizing: border-box` and currently computes * content-box. Setting both makes the arithmetic true either way. * * THE BIG LOGO. Every funnel page opened with a 75px centred Surf Shack mark in the * first Elementor container — directly under a bar that already carries the same logo * and the words "Surf Shack" at 34px. The brand twice, 40px apart, above content the * customer came to use. * * /account/ had already dropped it: the widget is still in that page's markup and * renders 0x0. So this is not a new decision, it is the same decision applied to the * two pages that missed it — /book/ (widget 9d1fdc9) and /passes/ (widget 898a64e). * /order/ has no image widget at all. * * Hooked on the STRUCTURE — the image widget in the first container of a page that has * a funnel bar — rather than on those two element ids, which are per-page and change * the moment either page is rebuilt in the editor. * * SPACING KEPT, per Nick. Hiding the widget alone would collapse the container from 95px * to about 20 and put the calendar hard under the chrome. 56px holds a deliberate band of * air where the logo was, which is what the logo was mostly doing anyway. * ------------------------------------------------------------------------- */ .ssr-funnelbar .ssr-funnelbar-in { box-sizing: border-box; max-width: 1220px; } body:has(> .ssr-funnelbar) .elementor > .e-con:first-child .elementor-widget-image { display: none; } body:has(> .ssr-funnelbar) .elementor > .e-con:first-child { min-height: 56px; } /* --------------------------------------------------------------------------- * 11. SWEEP FIX 1 — a scrim on the photo bands. * * `.ssm-band--photo` is the hero and feature band on twelve marketing pages: a photo * with `#5E9AA0` behind it and white text on top. Measured on /flowrider/open-sessions/: * * Open Sessions 62px/700 white on #5E9AA0 3.18 needs 3.0 passes * OPEN FLOW 17px/700 white on #5E9AA0 3.18 needs 4.5 FAILS * lede 18px/400 white on #5E9AA0 3.18 needs 4.5 FAILS * sub-headings 17px/600 white on #5E9AA0 3.18 needs 4.5 FAILS * * 82 instances across 12 pages. And 3.18 is the OPTIMISTIC number — it is the contrast * against the fallback colour. Where the photo actually loads the text sits on the * photo, and a bright patch of water behind a lede has no guaranteed ratio at all. * * So the fix is a scrim rather than a repaint: darkening the fallback would fix only * the case where the image fails to load, which is the case that already passes best. * * SHAPE OF THE GRADIENT. Measured where the text actually sits inside the band — * 26% to 74% of its height, vertically centred, on every page checked. A top-to-bottom * fade would therefore miss it. The plateau runs 22%–78% so the text is entirely inside * the strong part, and the top and bottom 22% stay light so the photograph still reads * as a photograph rather than a dark box. * * .66 CHOSEN BY MEASUREMENT, against the worst case rather than the likely one — a * blown-out white area of the image: * * over blown white #58656B white text 6.02 * over mid grey #38444B white text 10.02 * over sky blue #2F4E61 white text 8.81 * over the #5E9AA0 #21424B white text 10.79 fallback, image missing * * The floor is 6.02, against a requirement of 4.5, so the band passes for any image * anyone drops in later — which is the point of doing it with a scrim. * * `::after` and not `::before`: Elementor uses `::before` on containers for its own * background overlay, and this element is a plain
today but may not stay one. * `pointer-events:none` so the scrim cannot eat a click on the buttons underneath. * ------------------------------------------------------------------------- */ /* NOT DONE HERE. A scrim already existed on this element, in ss-marketing.css, and that * file loads after this one — so a second rule at the same specificity here was simply * dead, which is exactly what the first deploy measured: the computed `::after` on the * live page was still their `to top` gradient, not mine. The fix belongs in the rule * that already exists, and that is where it went. Two scrims on one band is how you * end up with a hero that is dim on one page and not the next. */ /* --------------------------------------------------------------------------- * 12. SWEEP FIX 2 — the page title that scrolled three pages sideways. * * /terms/, /availability/ and /book-volleyball/ use the `default` template, which * renders the theme's own page header. Measured at 390px, on all three: * * main.site-main width 390px + padding 0 10px, CONTENT-BOX -> 410px (+20) * h1.entry-title margin-right -20px, padding 0 10px -> 420px (+30) * * Two separate causes stacking. The theme sets an explicit `width` on `.site-main` and * then adds padding to it without border-box, so the element is 20px wider than the * width it was given. The title then adds its own negative right margin on top. * * Result: 420px of document in a 390px viewport, on every one of the three, and * no-horizontal-scroll is a listed invariant. * * `border-box` rather than `max-width` alone, because the width declaration is the * actual bug — capping it would leave the same arithmetic wrong on any other viewport. * * WHILE HERE, two things the same element was doing wrong: * * COLOUR. It renders #000000 — the only pure black text anywhere on the public site. * On /terms/ it is 15 elements, not one, because that page's whole prose body is * unstyled block content and every `wp-block-heading` is black too. * * FONT. On /availability/ and /book-volleyball/ the title renders in TIMES NEW ROMAN. * The theme sets no family on `.entry-title` and those two pages do not inherit one, so * the browser's serif default is what a customer sees. /terms/ happens to inherit * League Spartan, which is why the same element looks right on one page and not the * others — the kind of inconsistency that is invisible until you audit for it. * ------------------------------------------------------------------------- */ main.site-main { box-sizing: border-box; max-width: 100%; } /* The theme pairs `padding: 0 10px` with `margin-right: -20px` on the title — the * negative margin exists to cancel the padding, and cancelling only half of it left the * element 10px over instead of 30. Both go: the container already provides the gutter, * and with the padding gone the title aligns with the content beneath it instead of * sitting 10px inside it. `border-box` as well, so the arithmetic cannot come apart * again if someone puts the padding back. */ .entry-title, .page-header .entry-title { box-sizing: border-box; margin-right: 0; padding-left: 0; padding-right: 0; color: var(--ss-ink, #1F3E4A); font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* /terms/ is raw block content with no styling of its own — headings AND body, so the * colour goes on the container and everything inside inherits it. */ .page-content { color: var(--ss-ink, #1F3E4A); } /* --------------------------------------------------------------------------- * 13. SWEEP FIX 3 — four surfaces rendering in a different typeface. * * Found by auditing font-family rather than by looking, which is the only way these * turn up: each one is a component that never declared a family and inherited whatever * its context happened to provide. * * .ssr-ofcgate Times New Roman /apply-for-open-flow-card/ — the WHOLE page * .ssrfb-lite -apple-system /order-status/ * WooCommerce Roboto /cart/ and /checkout/ empty-cart notice + button * * The first is the one that matters: it is a customer-facing application form, rendering * heading and body in the browser's default serif, so it does not look like the same * company as the page the customer arrived from. `.ssr-ofcgate` sits directly on * on a canvas template, so there is nothing above it to inherit from. * * `-apple-system` on `.ssrfb-lite` is the same stack the F&B dashboard shipped with, and * it is the last of it — that dashboard moved onto League Spartan earlier today. * * The WooCommerce one is Roboto arriving from Woo's own stylesheet. Scoped to the two * elements that leak it rather than resetting `.woocommerce` wholesale, because the shop * is a surface I have not audited and a blanket font change there is not a repair. * * NOT TOUCHED: `santelia-rough-two` on one heading on /booking/. That is a real display * face from the Typekit kit, used exactly once on the whole site. It is either part of * the brand and belongs in the type scale, or it is a leftover — a decision, not a bug. * ------------------------------------------------------------------------- */ .ssr-ofcgate, .ssr-ofcgate *, .ssrfb-lite, .ssrfb-lite *, .woocommerce .woocommerce-info, .woocommerce .wc-empty-cart-message, .woocommerce a.button { font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --------------------------------------------------------------------------- * 14. THE FOOTER — same shape, a third less of it. * * Nick, 15 Aug: "too loud, too big, just overall too much." Measured on /spa/ at a * 1253px viewport before this: * * height 505px — 40% of the screen, on every page on the site * top padding 66px * headings 13px/700 #F4D266 gold, UPPERCASE, +1.5px tracking * links 15px/400, 22 of them across 5 columns * Book Now filled #C25700 button, 16px/700 white * * Four separate things were shouting at once: a gold colour used nowhere else on the * page, uppercase, letter-spacing, and a filled CTA — on top of a dark slab taking up * two fifths of the screen. Any one of them is a footer heading; all four together is * the footer competing with the page above it. * * The brief was "quieten in place", so the structure does not move: same dark ground, * same five columns, same links in the same order. What changes is volume. * * HEADINGS. Gold -> mint, and the two shout mechanics come off. Uppercase with tracking * is for a 40px hero eyebrow, not a 13px column label; at that size it costs legibility * and buys emphasis nobody asked for. Sentence case at 12px reads as a label, which is * what it is. #A3D6CB measures 7.06:1 on the ground — the gold was 7.72, so this is a * quieter colour, not a weaker one. * * BOOK NOW. The header already carries a filled Book Now, sticky, on every page. A * second filled one 500px lower is the same offer shouted twice. It becomes a text link * with its arrow — still the first thing in the first column, still obviously a link. * `!important` because the site-wide `.elementor-button` rule above sets the fill with * `!important` (it has to; Elementor's own selector is (0,4,0)), so unsetting it here * needs the same weapon plus the footer scope. * * SIZE. 66px of top padding was doing the work of a section break. 36 is still a clear * separation. With the type and gaps tightened the block lands near 340px — a third off, * without removing a single link. * * WHAT IS NOT DONE HERE, because it is content and lives in Elementor template 5464: * - Four links duplicate the header's own FlowRider dropdown: How It Works, Learn to * Flow, Open Sessions, Pricing. They belong in the nav, not twice. 22 -> 18. * - "FAQ" points at /flowrider/how-it-works, not /faq/. There is a real FAQ page. * Neither is reachable from a stylesheet. * ------------------------------------------------------------------------- */ /* The slab itself. */ .elementor-location-footer > .e-con { padding-top: 36px; padding-bottom: 28px; gap: 18px; } .elementor-location-footer > .e-con > .e-con-inner, .elementor-location-footer .e-con.e-child { gap: 28px; } /* Column headings: mint, sentence case, no tracking. */ .elementor-location-footer .elementor-widget-heading .elementor-heading-title { font-size: 12px !important; font-weight: 700 !important; color: #A3D6CB !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 2px; } /* Links and body: one step down, tighter leading. * * `* !important` inside the widget, which looks heavy-handed and is not. The footer's * link lists are text-editor widgets, not icon-lists — my first attempt targeted * `.elementor-icon-list-text` and matched NOTHING, which is why the first deploy moved * the height 505 -> 499 and no further. Inside a text-editor the markup is whatever was * typed into the editor —

, , bare lines, sometimes with an inline size — so the * only way to reach all of it is the descendant wildcard. * * The leading is the real win, not the size. Two of these widgets rendered 15px text on * a 30px line — line-height 2.0 — which on a nine-item list is 135px of pure air. 1.45 * is a list, 2.0 is a poem. */ .elementor-location-footer .elementor-widget-text-editor, .elementor-location-footer .elementor-widget-text-editor * { font-size: 14px !important; line-height: 1.45 !important; } /* The divider was a 37px-tall block drawing a 1px line, and the copyright row under it was 113px for a single 16px sentence. */ .elementor-location-footer .elementor-widget-divider { padding: 0 !important; margin: 0 !important; } .elementor-location-footer .elementor-widget-divider .elementor-divider { padding-block: 6px !important; } .elementor-location-footer .e-con.e-child { padding-top: 0 !important; padding-bottom: 0 !important; } /* Book Now: a link, not a second CTA. */ .elementor-location-footer .elementor-widget-button .elementor-button { background-color: transparent !important; color: #CBE5DC !important; padding: 0 !important; min-height: 0 !important; font-size: 14px !important; font-weight: 700 !important; border: 0 !important; } .elementor-location-footer .elementor-widget-button .elementor-button:hover { background-color: transparent !important; color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; } /* The copyright rule and line, quieter and closer. */ .elementor-location-footer .elementor-widget-divider { margin-top: 4px; margin-bottom: 4px; } /* The account pages have no Elementor header to copy icons from, so the sheet's menu is * rendered by WordPress and needs the same --ss-ico values declared against its own * markup. Each rule above now carries both selectors rather than duplicating the data * URLs, so an icon is still changed in exactly one place. * ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * * §15 Footer "Our Facilities" — one column, not two that wrap. * * Nick, 16 Aug: "footer menu facilities not good". * * WHAT IT ACTUALLY WAS. The column holds a flex ROW container * (.elementor-element-aa292d98, `flex-direction: row; gap: 28px`) with two text-editor * widgets side by side: the FlowRider group (bold parent + four indented children) and * the flat list (Volleyball … Programs). Measured at 1366 they sit at x=610 and x=784. * Below roughly 1100 the row runs out of width and the second widget wraps underneath — * which is the ragged vertical hole Nick screenshotted between "Pricing" and * "Volleyball". It was never a spacing bug; it was a two-column layout collapsing. * * Two columns inside one footer column also had no reason to exist — the neighbouring * Visit, Help and Social columns are all single flat lists. So the fix is to stop it * being a row at all, and to flatten the nesting so the eleven links read as one list * in the same voice as its neighbours. * * NOT TOUCHED: the column's own 28px heading gap and the first list's 14px lead, so * "FlowRider" still sits on the same baseline as "FAQ" and "Instagram" across the row. * ------------------------------------------------------------------------- */ .elementor-location-footer .elementor-element-aa292d98 { flex-direction: column !important; gap: 0 !important; } /* The second list now follows the first directly, so the margins that used to sit harmlessly at the ends of two side-by-side paragraphs are now stacked in the seam between them: 14px of trailing margin on the first plus 14px of lead on the second. Measured 35px between "Pricing" and "Volleyball" against a 20px row rhythm; zeroing both sides of the seam brings it to 20 and the eleven links read as one list. */ .elementor-location-footer .elementor-element-daaaf8d5 > p:last-child { margin-bottom: 0 !important; } .elementor-location-footer .elementor-element-26794917 > p:first-child { margin-top: 0 !important; } /* Flatten the FlowRider group: no bold parent, no indented children. The hierarchy was only legible when the two lists were side by side; stacked, the indent just made "Volleyball" look like it had fallen out of the group above it. */ .elementor-location-footer .elementor-element-daaaf8d5 a { padding-left: 0 !important; font-weight: 400 !important; } /* And drop the four FlowRider sub-pages entirely. They duplicate the header's FlowRider dropdown one-for-one, and "How It Works" is not a facility, the column is called Our Facilities and now lists seven of them. Approved by Nick, 16 Aug. The links are plain siblings inside one

, each carrying an inline `display: block`, so this needs !important to beat the inline style and leaves no stray line breaks behind. To restore them, delete this rule. */ .elementor-location-footer .elementor-element-daaaf8d5 > p > a:not(:first-child) { display: none !important; } /* ------------------------------------------------------------------------- * * §16 No grow-on-hover. * * Nick, 16 Aug: "get rid of the book now grow on hover hate that". Elementor's * `elementor-animation-grow` scales the element to 1.1 on hover — it is on the footer's * "Book Now →" link. A 10% scale on a text link nudges everything around it and reads * as a wobble rather than as feedback. The buttons already answer hover with a colour * change (#C25700 → #B35000), which is the system's own idiom, so nothing is lost. * * Killed wherever the class appears rather than on that one link — if the class is the * effect Nick dislikes, it is the effect he dislikes everywhere. * ------------------------------------------------------------------------- */ .elementor-animation-grow, .elementor-animation-grow:hover, .elementor-animation-grow:focus, .elementor-animation-grow:active { transform: none !important; } /* ========================================================================= * Underlines, off. * * [Ivywild 2026-08-18, Nick] "remove all underline font styles on the whole site. * underlines are annoying stop." * * Site-wide, one rule, `!important` -- because the underlines come from several places at * once (the UA sheet on every , Elementor's link styling, and a dozen of our own * `text-decoration:underline` declarations on clear links, cancel links and hints), and * chasing them individually would leave the next one to appear unaccounted for. * * Two deliberate exemptions: * - and . Someone typing an underline into page content means it, and * carries meaning (an edit) that removing the line would erase. * - line-through. `text-decoration:none` would also wipe struck-out prices and the * removed-line styling in the basket, which is not what was asked for. Anything that * needs a strike re-declares it after this block. * ========================================================================= */ a, a:hover, a:focus, a:active, a:visited, .elementor a, .elementor-widget-text-editor a, button, .ssr-btn, .ssm-acct-link, .ssr-intent-clear, .rw-pill, .rw-sechead a { text-decoration: none !important; } /* Meaning, not decoration. */ u, ins, abbr[title] { text-decoration: underline !important; } /* A strike is not an underline. */ s, del, strike, .ssb-sub-off s, [class*="strike"], [class*="line-through"] { text-decoration: line-through !important; }