/* CustmBubble v1.0.91 — homepage Jobs/Shifts CTA finish. * Homepage-only enhancement. The theme still owns the links, copy, arrow and * width; the height is locked by JS to the theme's original height. */ .custm-home-booking-cta { isolation: isolate; overflow: hidden; box-sizing: border-box !important; height: var(--custm-cta-height, auto) !important; /* The theme's column container is only 70px tall; with overflow hidden the * buttons would otherwise be allowed to shrink below their locked height. */ flex-shrink: 0 !important; padding: 4px 48px 4px 8px !important; /* 8px each side of the white face; 40px arrow */ opacity: 1 !important; border: 1px solid #2A6AF6 !important; border-radius: 6px !important; text-shadow: none !important; background-color: #FFFFFF !important; background-image: linear-gradient(180deg, #FFFFFF 0%, #F6F9FF 52%, #E7EFFF 100%) !important; box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(42,106,246,.12), 0 4px 0 #1A4FC4, 0 6px 0 rgba(10,38,110,.35), 0 12px 22px rgba(6,24,72,.38) !important; /* !important: the theme's .homeBT transition loads later and would win. */ transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background-color .22s ease !important; } /* Glossy sheen that sweeps across on hover. */ .custm-home-booking-cta::after { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); opacity: 0; } /* Theme arrow panel (.iconK): raised blue key with a bevel. */ .custm-home-booking-cta .iconK { border-radius: 0 5px 5px 0 !important; background-color: #2A6AF6 !important; background-image: linear-gradient(180deg, #5C94FF 0%, #2A6AF6 55%, #1A4FC4 100%) !important; box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(7,34,106,.30), -1px 0 0 rgba(13,53,131,.18) !important; } .custm-home-booking-cta .iconK svg { transition: transform .22s ease; } /* One-time entrance, applied by CSS from the first paint (not added later by * JS), so the buttons never render, disappear and then fade in again. * `backwards` fill only: no transform is retained after the entrance, so the * hover/press transforms keep working. */ @media (prefers-reduced-motion: no-preference) { .homeBT-container .homeBT { animation: custm-home-cta-enter .7s cubic-bezier(.2, .82, .28, 1) .12s backwards; } .homeBT-container .homeBT ~ .homeBT { animation-delay: .26s; } } @keyframes custm-home-cta-enter { 0% { opacity: 0; transform: perspective(600px) translateY(14px) rotateX(28deg) scale(.94); } 70% { opacity: 1; transform: perspective(600px) translateY(-1px) rotateX(-3deg) scale(1.01); } 100% { opacity: 1; transform: none; } } @keyframes custm-home-cta-sheen { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } } /* No shadows on any text, including the theme's pre-existing labels. */ .custm-home-booking-cta * { text-shadow: none !important; } /* Gradient is applied to existing blue portions only. In particular, do not * replace the theme's white text panel with a solid blue CTA. */ .custm-home-booking-cta--blue-base, .custm-home-booking-cta .custm-home-booking-cta__blue-panel { background-color: #2A6AF6 !important; background-image: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,0) 49%, rgba(5,32,101,.10)), linear-gradient(133deg, #78ABFF 0%, #4A89FB 28%, #2A6AF6 61%, #1648C4 100%) !important; background-size: 160% 160% !important; background-position: 15% 15% !important; transition: background-position .38s ease, filter .22s ease, box-shadow .2s ease; } .custm-home-booking-cta .custm-home-booking-cta__blue-panel { box-shadow: inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(7,34,106,.17) !important; } /* When the existing two labels share a text panel, place all three lines * together in the same vertical stack. This centres the complete group rather * than pinning the third line independently to the bottom of the button. */ .custm-home-booking-cta .custm-home-booking-cta__text-panel { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 2px !important; text-align: center !important; flex: 1 1 auto !important; min-width: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* The theme's
between labels is an extra flex row; the stack replaces it. */ .custm-home-booking-cta .custm-home-booking-cta__text-panel > br { display: none !important; } .custm-home-booking-cta .custm-home-booking-cta__text-panel > * { align-self: center !important; text-align: center !important; margin-top: 0 !important; margin-bottom: 0 !important; max-width: 100%; } .custm-home-booking-cta .custm-home-booking-cta__title, .custm-home-booking-cta .custm-home-booking-cta__detail { text-align: center !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; text-decoration: none !important; } .custm-home-booking-cta .custm-home-booking-cta__title { color: #205BCF !important; font-weight: 750 !important; line-height: 1.12 !important; letter-spacing: -.012em; } .custm-home-booking-cta .custm-home-booking-cta__detail { color: #35598C !important; font-weight: 600 !important; line-height: 1.14 !important; } /* Supporting line is an ordinary flex child in the preferred layout. */ .custm-home-booking-cta .custm-home-booking-cta__tagline { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; text-align: center !important; font-family: inherit !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.16 !important; text-transform: none !important; text-decoration: none !important; color: #647080 !important; white-space: normal; overflow-wrap: normal; pointer-events: none; text-shadow: none !important; } /* Defensive fallback for unfamiliar theme nesting or intrinsic-size CTAs: * keep the third line visible without increasing width or height. */ .custm-home-booking-cta > .custm-home-booking-cta__tagline--overlay { position: absolute !important; z-index: 3; left: 4px; right: var(--custm-cta-arrow-width, 10%); bottom: 3px; } .custm-home-booking-cta .custm-home-booking-cta__tagline--panel-overlay { position: absolute !important; z-index: 3; left: 4px; right: 4px; bottom: 3px; } .custm-home-booking-cta .custm-home-booking-cta__text-panel--fallback > .custm-home-booking-cta__title, .custm-home-booking-cta .custm-home-booking-cta__text-panel--fallback > .custm-home-booking-cta__detail { transform: translateY(-4px); } /* Neutralise the theme's .homeBT:hover (opacity .9 + grey background). */ .custm-home-booking-cta:hover { opacity: 1 !important; background-color: #FFFFFF !important; border-color: #1F57C4 !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .custm-home-booking-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(42,106,246,.12), 0 6px 0 #1A4FC4, 0 8px 0 rgba(10,38,110,.35), 0 18px 28px rgba(6,24,72,.42) !important; } .custm-home-booking-cta:hover::after { animation: custm-home-cta-sheen .75s ease-out; } .custm-home-booking-cta--blue-base:hover, .custm-home-booking-cta:hover .custm-home-booking-cta__blue-panel { background-position: 90% 82% !important; } .custm-home-booking-cta:hover .iconK svg, .custm-home-booking-cta:hover .custm-home-booking-cta__arrow-panel svg, .custm-home-booking-cta:hover .custm-home-booking-cta__arrow-panel i { transform: translateX(3px); transition: transform .2s ease; } } .custm-home-booking-cta:active { transform: translateY(4px); transition-duration: .06s !important; box-shadow: inset 0 2px 4px rgba(6,33,91,.14), 0 0 0 #1A4FC4, 0 2px 0 rgba(10,38,110,.30), 0 4px 8px rgba(6,24,72,.25) !important; } .custm-home-booking-cta:focus-visible { outline: 3px solid #78E4DB; outline-offset: 3px; } @media (max-width: 767px) { .custm-home-booking-cta .custm-home-booking-cta__text-panel { gap: 1px !important; } .custm-home-booking-cta .custm-home-booking-cta__tagline { font-size: 8px !important; line-height: 1.15 !important; } } @media (max-width: 500px) { .custm-home-booking-cta { padding: 3px 31px 3px 6px !important; /* theme arrow is 25px here */ } } @media (max-width: 479px) { .custm-home-booking-cta .custm-home-booking-cta__text-panel { gap: 0 !important; } .custm-home-booking-cta .custm-home-booking-cta__tagline { font-size: 7.5px !important; line-height: 1.14 !important; } } @media (prefers-reduced-motion: reduce) { .homeBT-container .homeBT, .custm-home-booking-cta::after { animation: none !important; } .custm-home-booking-cta, .custm-home-booking-cta--blue-base, .custm-home-booking-cta .custm-home-booking-cta__blue-panel, .custm-home-booking-cta .custm-home-booking-cta__arrow-panel svg, .custm-home-booking-cta .custm-home-booking-cta__arrow-panel i, .custm-home-booking-cta .iconK svg { transition: none !important; } .custm-home-booking-cta:hover, .custm-home-booking-cta:active { transform: none !important; } }