; V4 paragraphs handle their own spacing */ p.e-paragraph-base, [data-e-type="widget"].e-paragraph-base { padding-bottom: 0 !important; } /* Spotwave: nav centred between logo and actions */ [data-id="4d92d3d7"] { flex: 1 1 auto; justify-content: center; } /* ---------- Header: Spotwave look over hero, deinsocialmedia bar on scroll ---------- */ [data-id="5731a3bd"] { padding-top: 104px !important; } [data-id="46558a20"] { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 100% !important; box-sizing: border-box; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; } [data-id="46558a20"].wd-scrolled { position: fixed !important; top: 0; left: 0; transform: none; max-width: none !important; width: 100% !important; padding: 14px max(32px, calc((100vw - 1240px) / 2 + 32px)) !important; background: #ffffff; box-shadow: 0 1px 0 #e6ebef, 0 10px 30px -18px rgba(7, 20, 37, .35); animation: wd-drop .35s ease; } [data-id="46558a20"].wd-scrolled [data-id="26eee004"] { filter: brightness(0) saturate(100%); } [data-id="46558a20"].wd-scrolled [data-id="4d92d3d7"] button, [data-id="46558a20"].wd-scrolled [data-id="4d92d3d7"] a, [data-id="46558a20"].wd-scrolled [data-id="c30a48c"] { color: #071425 !important; } [data-id="46558a20"].wd-scrolled [data-id="7d1172f8"] { background: #071425 !important; color: #fff !important; box-shadow: none !important; } @keyframes wd-drop { from { transform: translateY(-100%); } to { transform: none; } } /* Breathing ring on the header CTA (Spotwave) */ [data-id="7d1172f8"] { animation: wd-breathe 2s ease infinite; } @keyframes wd-breathe { 0% { box-shadow: 0 0 0 3px rgba(75, 193, 205, .35); } 70% { box-shadow: 0 0 0 12px rgba(75, 193, 205, 0); } 100% { box-shadow: 0 0 0 3px rgba(75, 193, 205, 0); } } /* Mobile menu (Chaerry-style: logo left, burger right, full overlay) */ .wd-burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center; } .wd-burger span, .wd-burger span::before, .wd-burger span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .25s; } .wd-burger span::before, .wd-burger span::after { content: ""; position: absolute; left: 0; } .wd-burger span::before { top: -6px; } .wd-burger span::after { top: 6px; } .wd-scrolled .wd-burger { color: #071425; border-color: #d5dde3; } .wd-menu { position: fixed; inset: 0; z-index: 9998; background: #071425; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 32px; opacity: 0; pointer-events: none; transition: opacity .25s; } .wd-menu.is-open { opacity: 1; pointer-events: auto; } .wd-menu a { color: #fff; font: 600 30px/1.3 Figtree, sans-serif; text-decoration: none; padding: 8px 0; } .wd-menu a.wd-menu-cta { margin-top: 20px; align-self: flex-start; font-size: 17px; background: #4BC1CD; color: #071425; padding: 14px 26px; border-radius: 100px; } .wd-menu-close { position: absolute; top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 26px; cursor: pointer; } @media (max-width: 1024px) { .wd-burger { display: inline-flex; } [data-id="7d1172f8"] { display: none !important; } } @media (max-width: 767px) { [data-id="5731a3bd"] { padding-top: 86px !important; } } /* ---------- Hero logo marquee with edge fade ---------- */ [data-id="5332a0af"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } [data-id="7b59ead9"] { animation: wd-marquee 60s linear infinite; will-change: transform; } [data-id="5332a0af"]:hover [data-id="7b59ead9"] { animation-play-state: paused; } @keyframes wd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } [data-id="7b59ead9"] img, [data-id="508ddcb7"] img { filter: brightness(0) invert(1); } /* Linked e-images are wrapped in a shrinking flex ; size the wrapper instead */ a[data-interaction-id="26eee004"], a[data-interaction-id="7e348cac"] { width: auto !important; flex: 0 0 auto !important; } img[data-id="26eee004"], img[data-id="7e348cac"] { width: 150px !important; max-width: 150px !important; height: auto !important; } @media (max-width: 767px) { img[data-id="26eee004"] { width: 120px !important; max-width: 120px !important; } } [data-id="53fddd9d"] a.e-image-link-base { width: 62%; margin: auto; display: block; } [data-id="53fddd9d"] a.e-image-link-base img { width: 100% !important; height: auto; } /* Placeholder logos on navy until the device mockups are uploaded */ [data-id="53fddd9d"] img[src*="-logo"] { filter: brightness(0) invert(1); } [data-id="7b59ead9"] img { flex-shrink: 0; width: auto !important; } /* Headline highlights */ [data-id="20e3fb3d"] span { color: #8fe0e8; } [data-id="6d0a75eb"] span { color: #4BC1CD; } /* ---------- Reference slider (Spotwave) ---------- */ [data-id="53fddd9d"] { scrollbar-width: none; padding-inline: calc(50vw - 190px) !important; } [data-id="53fddd9d"]::-webkit-scrollbar { display: none; } [data-id="53fddd9d"] > .e-con { opacity: .45; transform: scale(.9); } [data-id="53fddd9d"] > .e-con.is-active { opacity: 1; transform: none; box-shadow: 0 30px 60px -30px rgba(13, 33, 58, .35); } [data-id="53fddd9d"] img { transition: transform .5s ease; } [data-id="53fddd9d"] > .e-con.is-active:hover img { transform: scale(1.03); } @media (max-width: 767px) { [data-id="53fddd9d"] { padding-inline: 9vw !important; } } /* ---------- FAQ (deinsocialmedia) ---------- */ [data-id="1c8211a"] summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; } [data-id="1c8211a"] summary::-webkit-details-marker { display: none; } [data-id="1c8211a"] summary::after { content: "+"; flex-shrink: 0; color: #4BC1CD; font: 300 40px/1 Figtree, sans-serif; transition: transform .3s ease; } [data-id="1c8211a"] details[open] > summary::after { transform: rotate(45deg); } /* ---------- Floating contact button ---------- */ .wd-float { position: fixed; right: 24px; bottom: 24px; z-index: 9990; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 100px; background: #4BC1CD; color: #071425; text-decoration: none; font: 700 15px/1 Figtree, sans-serif; box-shadow: 0 12px 28px -10px rgba(7, 20, 37, .55); transform: translateY(140%); transition: transform .35s ease, background .2s; } .wd-float.is-visible { transform: none; } .wd-float:hover { background: #8fe0e8; } @media (max-width: 767px) { .wd-float span { display: none; } .wd-float { padding: 16px; right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-id="7b59ead9"], [data-id="7d1172f8"], [data-id="46558a20"].wd-scrolled { animation: none !important; } }