inside too — a bare
carries its own margin the wrapper cannot override. */ .crc-eyebrow, .crc-eyebrow p { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--crc-red); } .crc-eyebrow p { margin: 0 0 10px; } /* Intro paragraph under a section heading. */ .crc-lede, .crc-lede p { color: var(--crc-slate); font-size: 1.03rem; line-height: 1.65; } .crc-lede { max-width: 62ch; } .crc-lede--center { margin-inline: auto; } /* ========================================================================== 4. BUTTONS Base colors / padding / typography live in Site Settings → Theme Style → Buttons. Only motion + effects here. ========================================================================== */ .elementor-button { transition: transform var(--crc-t), background-color var(--crc-t), color var(--crc-t), box-shadow var(--crc-t); } .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--crc-shadow-md); } /* Outlined navy button. Class: crc-btn-ghost */ .crc-btn-ghost .elementor-button { background-color: transparent; color: var(--crc-navy); border: 2px solid var(--crc-navy); } .crc-btn-ghost .elementor-button:hover { background-color: var(--crc-navy); color: var(--crc-white); } /* -------------------------------------------------------------------------- THE RED-TEXT-ON-BLUE HOVER The two hero CTAs are GLOBAL widgets (elementor-global-328 and -331), and each carries its own hover Text Colour set in the panel. Elementor writes that as .elementor-295 .elementor-element.elementor-element-eed10d0 .elementor-button:hover { color: #BE1D24; } which is 0-5-0. The rules above are 0-2-0 and 0-4-0, so on hover the fill rises navy (mine) while the label turns red (Elementor's). Hence red on blue. The footer looks different again because there some properties land from the panel and others from my CSS, so you get a mix of the two. THE REAL FIX, and it takes one minute: open either CTA, Style → Text Colour and Hover → click the reset arrow on every colour field. They're global widgets, so doing it once fixes the hero and the footer together. Button colour then comes from Site Settings → Theme Style → Buttons plus the classes here — one source of truth instead of three. THE FALLBACK below wins anyway, at 0-6-0, by repeating class names. It's deliberately ugly so it doesn't get mistaken for something worth keeping. Delete this block once the panel values are cleared. -------------------------------------------------------------------------- */ .elementor .crc-btn-ghost.crc-btn-ghost .elementor-button.elementor-button { color: var(--crc-navy); border-color: var(--crc-navy); background-color: transparent; } .elementor .crc-btn-ghost.crc-btn-ghost .elementor-button.elementor-button:hover, .elementor .crc-btn-ghost.crc-btn-ghost .elementor-button.elementor-button:focus { color: var(--crc-white); } .elementor .crc-btn-shimmer.crc-btn-shimmer .elementor-button.elementor-button:hover, .elementor .crc-btn-shimmer.crc-btn-shimmer .elementor-button.elementor-button:focus { color: var(--crc-white); } /* Outlined button on a dark background. Class: crc-btn-ghost-light */ .crc-btn-ghost-light .elementor-button { background-color: transparent; color: var(--crc-white); border: 2px solid rgba(255, 255, 255, .55); } .crc-btn-ghost-light .elementor-button:hover { background-color: rgba(255, 255, 255, .12); } /* -------------------------------------------------------------------------- Water-shimmer sweep. Class: crc-btn-shimmer CORRECTION to my earlier note: the previous `isolation: isolate` + `z-index: -1` version was NOT broken. In the CSS painting order, a stacking context paints its own background first and negative-z-index children second, so the sweep landed above the fill and below the label, exactly as intended. I was wrong about that — apologies. This version does the same job without depending on `isolation`: sweep at z-index 0, label lifted to 1. Slightly easier to reason about when other effects get layered on the same button (see crc-btn-fill below, which uses the identical pattern), but either would have worked. Elementor's label lives in `.elementor-button-content-wrapper`, the button's only element child, so `> *` is safe. -------------------------------------------------------------------------- */ .crc-btn-shimmer .elementor-button { position: relative; overflow: hidden; } .crc-btn-shimmer .elementor-button > * { position: relative; z-index: 1; } .crc-btn-shimmer .elementor-button::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .55s var(--crc-ease); } .crc-btn-shimmer .elementor-button:hover::after { left: 120%; } /* Water-fill hover — the fill rises from the bottom edge like a filling basin. Pair with crc-btn-ghost: `crc-btn-ghost crc-btn-fill`. Replaces the ghost button's instant background swap. */ .crc-btn-fill .elementor-button { position: relative; overflow: hidden; } .crc-btn-fill .elementor-button > * { position: relative; z-index: 1; } .crc-btn-fill .elementor-button::before { content: ""; position: absolute; inset: auto 0 0 0; height: 0; z-index: 0; background: var(--crc-navy); transition: height .32s var(--crc-ease); } .crc-btn-fill.crc-btn-ghost .elementor-button:hover { background-color: transparent; /* let the fill do the work instead */ color: var(--crc-white); } .crc-btn-fill .elementor-button:hover::before { height: 100%; } /* On mobile the phone CTA should be the loud one and the quote CTA quiet. The old version relied on BOTH buttons carrying crc-swap-mobile and then used a compound `.crc-swap-mobile.crc-btn-ghost` .elementor-kit-169 to walk one of them back. That's fragile — remove the class from one button and the pair silently inverts. These two classes are independent instead: crc-swap-mobile → on the PHONE button (goes solid red on mobile) crc-quiet-mobile → on the QUOTE button (goes outlined on mobile) Neither does anything above 767px. */ @media (max-width: 767px) { /* Hardened to the same repeated-class pattern as the desktop fallbacks, for the same reason: the pair kept losing individual properties to whichever other button rule tied at 0-2-0, which is how you get a red fill keeping a navy label. These set EVERY colour property, so the button can't end up half one scheme and half another. */ .elementor .crc-swap-mobile.crc-swap-mobile .elementor-button.elementor-button { background-color: var(--crc-red); color: var(--crc-white); border-color: var(--crc-red); } /* A fill-on-hover sweep makes no sense on touch, and it would paint navy over the red. */ .crc-swap-mobile .elementor-button::before { content: none; } .elementor .crc-quiet-mobile.crc-quiet-mobile .elementor-button.elementor-button { background-color: transparent; color: var(--crc-navy); border: 2px solid var(--crc-navy); } } .crc-full-width .elementor-button { width: 100%; } /* ========================================================================== 5. NAVIGATION The nav widget is set to pointer "none" (.e--pointer-none), so Elementor isn't drawing anything on ::after — safe for us to use. ========================================================================== */ .e--pointer-none .elementor-nav-menu--main .elementor-item { position: relative; } .e--pointer-none .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--crc-water); transform: scaleX(0); transform-origin: left center; transition: transform var(--crc-t); } /* current-menu-ancestor is included because on this site the "current" item is often a SUB-item (the homepage is matched by the custom "/" link nested under About Us), which leaves the top-level parent marked as an ancestor rather than as the current item. Without this the active underline never appears on the homepage. */ .e--pointer-none .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:hover::after, .e--pointer-none .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > .elementor-item::after, .e--pointer-none .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after { transform: scaleX(1); } /* ========================================================================== 6. CARDS Apply .crc-card to a Container. Set padding/radius/border in Elementor; this only adds hover behaviour, variants, and internal alignment. ========================================================================== */ .crc-card { background: var(--crc-white); border: 1px solid var(--crc-line); border-radius: var(--crc-radius); transition: transform var(--crc-t), box-shadow var(--crc-t), border-color var(--crc-t); } .crc-card:hover { transform: translateY(-5px); box-shadow: var(--crc-shadow-md); border-color: var(--crc-water-200); } /* Cards in a grid are as tall as the tallest one, which leaves the "Request this service →" links floating at different heights. This pins them to the bottom edge so the row reads as a row. Requires the card container to be flex-column, which Elementor's e-flex containers already are. */ .crc-card > .crc-card__link { margin-top: auto; padding-top: 6px; } /* Variant with no chrome — for the "why" columns, which sit on a tinted band and shouldn't look like raised cards. Keeps the hover hooks working. */ .crc-card--plain { background: transparent; border-color: transparent; } .crc-card--plain:hover { transform: none; box-shadow: none; border-color: transparent; } /* Rounded-square icon tile inside a card. Put on the Icon widget. Leave the panel's Background Color EMPTY or it beats the tint below. */ .crc-card__icon .elementor-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--crc-red-tint); color: var(--crc-red); display: flex; align-items: center; justify-content: center; transition: background-color var(--crc-t), color var(--crc-t); } .crc-card__icon .elementor-icon svg { fill: currentColor; } .crc-card:hover .crc-card__icon .elementor-icon { background: var(--crc-red); color: var(--crc-white); } /* "Request this service →" link — arrow slides on hover. */ .crc-card__link a { font-size: .9rem; font-weight: 700; color: var(--crc-red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .crc-card__link a::after { content: "→"; transition: transform var(--crc-t); } .crc-card:hover .crc-card__link a::after { transform: translateX(4px); } /* Inverted navy card (the "see more reviews" tile). Background stays in the panel — see the note in section 7. */ .crc-card--invert { border-color: transparent; } .crc-card--invert :is(h1, h2, h3, h4, h5, h6, p) { color: var(--crc-white); } /* ========================================================================== 7. WATER AESTHETIC ========================================================================== */ /* --- Section bands --------------------------------------------------------- IMPORTANT: set the BACKGROUND COLOR in the Elementor panel (Container → Style → Background). A panel background is 0-3-0 and beats anything here, so these classes deliberately do NOT set one. They handle the things the panel can't: whole-subtree text-colour flips and overlay texture. --tint : light band (water-50). Text stays dark. Used on #crc-area. --water : light band with a faint caustic wash. Used on #crc-why. --navy : dark band. Text flips to white. --------------------------------------------------------------------------- */ .crc-band--navy :is(h1, h2, h3, h4, h5, h6) { color: var(--crc-white); } .crc-band--navy p { color: #B7C4CE; } .crc-band--tint, .crc-band--water { position: relative; isolation: isolate; } /* A very faint second light-source on the water band, so it doesn't read as a flat rectangle of pale blue. Weaker than the hero's. */ .crc-band--water::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70ch 40ch at 88% 0%, rgba(46,143,191,.10), transparent 62%), radial-gradient(55ch 34ch at 4% 100%, rgba(255,255,255,.85), transparent 68%); } /* --- Caustic light wash behind the hero ----------------------------------- Layered radial gradients — Elementor's gradient control only does two stops, so this has to be CSS. The slow drift makes it read as moving water rather than a static blob. 22s and transform-only, so it's free. */ .crc-caustics { position: relative; isolation: isolate; background-color: var(--crc-white); } .crc-caustics::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(60ch 40ch at 82% -10%, rgba(46,143,191,.16), transparent 65%), radial-gradient(50ch 34ch at 8% 105%, rgba(207,224,234,.55), transparent 70%); } @media (prefers-reduced-motion: no-preference) { .crc-caustics::before { animation: crc-drift 22s ease-in-out infinite; } } @keyframes crc-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); } } /* --- Wave divider --------------------------------------------------------- Class: crc-wave-top (white wave) or crc-wave-top crc-wave-top--tint. Put it on the section BELOW the join; the wave takes the colour of the section ABOVE and spills down into this one. Uses a mask rather than a background image so the colour stays a token — one variable to change if the palette moves. */ .crc-wave-top { position: relative; } .crc-wave-top::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--crc-wave-h); z-index: 1; pointer-events: none; background-color: var(--crc-wave-color); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L1440,0 L1440,22 C1200,56 960,56 720,32 C480,8 240,8 0,32 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,0 L1440,0 L1440,22 C1200,56 960,56 720,32 C480,8 240,8 0,32 Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .crc-wave-top--tint { --crc-wave-color: var(--crc-water-50); } /* --- Wave divider, BOTTOM edge ------------------------------------------- Class: crc-wave-bottom. Sits at the bottom of a section and paints the colour of whatever comes NEXT down into it. WHY BOTH DIRECTIONS EXIST, and which to use: crc-wave-top needs to know the colour of the section above it. crc-wave-bottom needs to know the colour of the section below it. Pick whichever end has the colour you're most sure of. For the join into the footer that's the footer — it's navy-deep and always will be — whereas the Service Area tint has now changed twice. So the footer join uses crc-wave-bottom on #crc-area, painted navy, and the footer itself carries no wave at all. One known colour instead of one guessed one. Uses ::before, so don't combine it with .crc-band--water, which also uses ::before for its caustic wash. .crc-band--tint is free. */ .crc-wave-bottom { position: relative; } .crc-wave-bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--crc-wave-h); z-index: 1; pointer-events: none; background-color: var(--crc-wave-color); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,60 L1440,60 L1440,38 C1200,4 960,4 720,28 C480,52 240,52 0,28 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,60 L1440,60 L1440,38 C1200,4 960,4 720,28 C480,52 240,52 0,28 Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .crc-wave-bottom--navy::before { background-color: var(--crc-navy-deep); } .crc-wave-bottom > .e-con-inner { position: relative; z-index: 2; } /* Keep the section's real content above the wave. */ .crc-wave-top > .e-con-inner { position: relative; z-index: 2; } @media (max-width: 767px) { :root { --crc-wave-h: 32px; } } /* Droplet radius — one corner squared off, like a falling drop. USE THIS ON ONE ELEMENT, NOT SIX. On all six service cards at once it stops reading as a motif and starts reading as a broken border-radius — which is exactly how you flagged it. A single squared corner is only legible as deliberate when it's rare. Recommendation: strip crc-droplet from the six service cards and keep it on the footer CTA strip alone. Or drop it entirely; the design does not depend on it. */ .crc-droplet { border-radius: var(--crc-radius) var(--crc-radius) var(--crc-radius) 4px; } /* --- Ripple --------------------------------------------------------------- Two concentric rings behind a circular icon. Put .crc-ripple on the Icon widget. They expand on hover — of the icon itself, or of any .crc-card wrapping it, which is the more forgiving target. The "Why CRC" columns carry .crc-card--plain, so hovering anywhere in the column fires it. The ambient .crc-ripple--live pulse has been removed. Four things breathing in a row pulled the eye away from the copy, and a ripple means more when it answers something the reader did. The class is now inert — you can strip it off the four icon widgets whenever, nothing targets it. */ .crc-ripple .elementor-icon { position: relative; } .crc-ripple .elementor-icon::before, .crc-ripple .elementor-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--crc-water); opacity: 0; transform: scale(.85); pointer-events: none; transition: opacity .45s var(--crc-ease), transform .45s var(--crc-ease); } .crc-ripple .elementor-icon::after { inset: -14px; } .crc-ripple:hover .elementor-icon::before, .crc-card:hover .crc-ripple .elementor-icon::before { opacity: .45; transform: scale(1); } .crc-ripple:hover .elementor-icon::after, .crc-card:hover .crc-ripple .elementor-icon::after { opacity: .22; transform: scale(1); transition-delay: .08s; } /* ========================================================================== 8. FORMS (Elementor Pro Form widget) Elementor's form controls cannot reach ::placeholder or the focus state, so those live here. Colors/sizing stay in the widget's Style tab. ========================================================================== */ /* IMPORTANT: qualify by element. Elementor puts the class `elementor-field` on non-input wrappers too — most notably the invisible reCAPTCHA field, which is a bare