/* * Harbour — scroll reveal and hover effects. * * Additive only: every animated element resolves to exactly the layout the page * had before this file existed, so the design is unchanged at rest. The hidden * starting state is scoped to .hb-anim, which harbour-effects.js puts on , * so with JavaScript off or broken nothing is ever hidden. */ /* ------------------------------------------------------------ scroll reveal */ .hb-anim .hb-reveal { opacity: 0; transform: translateY(26px); } .hb-reveal { transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); } /* sideways entrance for items in a horizontal run of cards */ .hb-anim .hb-reveal.hb-reveal-left { transform: translateX(-32px); } .hb-anim .hb-reveal.hb-reveal-right { transform: translateX(32px); } /* images scale up very slightly as they arrive */ .hb-anim .hb-reveal.hb-reveal-zoom { transform: scale(0.96); } /* Must come after the directional rules above: they carry the same specificity, so source order decides. transform:none rather than translateY(0) — even an identity transform would leave these as containing blocks for any fixed/absolute descendant. */ .hb-anim .hb-reveal.hb-in, .hb-anim .hb-reveal.hb-reveal-left.hb-in, .hb-anim .hb-reveal.hb-reveal-right.hb-in, .hb-anim .hb-reveal.hb-reveal-zoom.hb-in { opacity: 1; transform: none; } /* ------------------------------------------------------------------ buttons */ .elementor-button, .elementor-button-link { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .elementor-button:hover, .elementor-button:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45); } .elementor-button:active { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.45); } /* the arrow/icon inside a button leans into the hover */ .elementor-button:hover .elementor-button-icon { transform: translateX(3px); } .elementor-button-icon { transition: transform 0.25s ease; } /* -------------------------------------------------------------------- cards */ /* hb-card is applied by harbour-effects.js to containers that sit in a run of sibling tiles — never to full-width sections, forms or maps. */ .hb-card { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease; } .hb-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); z-index: 2; } /* background-image tiles brighten a touch on hover */ .hb-card.hb-card-media:hover { filter: saturate(1.12) brightness(1.05); } /* ------------------------------------------------------------------- images */ .hb-media { overflow: hidden; } .hb-media img { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .hb-media:hover img, a:hover > .hb-media img { transform: scale(1.06); } /* ---------------------------------------------------------- post/grid cards */ .elementor-post { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .elementor-post:hover { transform: translateY(-6px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5); } .elementor-post__thumbnail { overflow: hidden; } .elementor-post__thumbnail img { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.07); } .elementor-post__title a { transition: color 0.25s ease; } /* ---------------------------------------------------------------- nav menus */ .elementor-nav-menu--main .elementor-item { position: relative; transition: color 0.25s ease; } /* underline grows out from the centre; only on the desktop menu, the mobile dropdown keeps its own full-width highlight */ .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px; background: currentColor; opacity: 0; transition: left 0.28s ease, right 0.28s ease, opacity 0.28s ease; pointer-events: none; } .elementor-nav-menu--main .elementor-item:hover::after, .elementor-nav-menu--main .elementor-item:focus-visible::after, .elementor-nav-menu--main .elementor-item.elementor-item-active::after { left: 12px; right: 12px; opacity: 1; } /* dropdown entries slide instead */ .elementor-nav-menu--dropdown .elementor-item, .elementor-nav-menu--dropdown .elementor-sub-item { transition: background-color 0.25s ease, padding-left 0.25s ease, color 0.25s ease; } .elementor-nav-menu--dropdown .elementor-item:hover, .elementor-nav-menu--dropdown .elementor-sub-item:hover { padding-left: 28px; } .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item { transition: background-color 0.25s ease, padding-left 0.25s ease, color 0.25s ease; } /* submenu panel fades down */ .elementor-nav-menu--main .elementor-nav-menu--dropdown { transform-origin: top center; } /* -------------------------------------------------------------- icon boxes */ /* never set `display` here — Elementor's own value decides the line box, and changing it shifts the layout away from the original design */ .elementor-icon-box-wrapper .elementor-icon, .elementor-widget-icon .elementor-icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease; } .elementor-widget-icon-box:hover .elementor-icon, .elementor-widget-icon:hover .elementor-icon, .hb-card:hover .elementor-icon { transform: translateY(-4px) scale(1.1); } .elementor-icon-box-title, .elementor-icon-box-description { transition: color 0.25s ease; } /* ------------------------------------------------------------ social icons */ .elementor-social-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.25s ease; } .elementor-social-icon:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5); opacity: 1; } /* --------------------------------------------------------------- icon lists */ /* contact rows in the header, footer and contact page */ .elementor-icon-list-item > a { transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease; } .elementor-icon-list-item > a:hover { transform: translateX(4px); } .elementor-icon-list-item > a .elementor-icon-list-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .elementor-icon-list-item > a:hover .elementor-icon-list-icon { transform: scale(1.18); } /* ------------------------------------------------------------- text links */ .elementor-widget-text-editor a, .elementor-widget-theme-post-content a { transition: color 0.2s ease, text-decoration-color 0.2s ease; text-decoration-color: transparent; text-underline-offset: 3px; } .elementor-widget-text-editor a:hover, .elementor-widget-theme-post-content a:hover { text-decoration: underline; text-decoration-color: currentColor; } /* --------------------------------------------------- scrap material pills */ /* .scarplist is the site's own custom CSS on the materials page */ /* These spans are inline, and the site's own rule gives them the pill padding. Forcing inline-block to allow a transform would change every line box on the page, so the hover stays on properties that work on inline boxes. */ .scarplist ul li span { transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } .scarplist ul li span:hover { background: #fff; border-color: #9a9a9a; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.45); } /* -------------------------------------------------------------- form fields */ .elementor-field-textual { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .elementor-field-textual:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); } .elementor-field-group.elementor-error .elementor-field-textual { border-color: #d9534f; } /* the success/error banner the form handler injects */ .elementor-message-group .elementor-message { animation: hb-fade-up 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes hb-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------- logo */ .elementor-widget-theme-site-logo img { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease; } .elementor-widget-theme-site-logo a:hover img { transform: scale(1.04); } /* ------------------------------------------------------- reduced motion */ /* honour the OS setting: no travel, no reveal delay, hovers reduced to colour */ @media (prefers-reduced-motion: reduce) { .hb-anim .hb-reveal, .hb-anim .hb-reveal.hb-reveal-left, .hb-anim .hb-reveal.hb-reveal-right, .hb-anim .hb-reveal.hb-reveal-zoom { opacity: 1; transform: none; transition: none; } .elementor-button:hover, .elementor-button:active, .hb-card:hover, .elementor-post:hover, .elementor-social-icon:hover, .elementor-icon-list-item > a:hover, .scarplist ul li span:hover, .elementor-widget-icon-box:hover .elementor-icon, .elementor-widget-icon:hover .elementor-icon, .hb-card:hover .elementor-icon, .hb-media:hover img, .elementor-post:hover .elementor-post__thumbnail img, .elementor-widget-theme-site-logo a:hover img { transform: none; } .elementor-message-group .elementor-message { animation: none; } * { scroll-behavior: auto !important; } }