/* ========================================================================== Red Sea Tour & Travel — floating social dock Public site only (flights, car rental, booking). Mounted into by js/components/socialDock.js, so it lives OUTSIDE the `.rs` scope and carries its own copy of the tokens it needs. Stacking: 100. Above .rs-header (90) and .rs-svcnav (95), deliberately below .rs-navoverlay (110) / .rs-navpanel (120) so the mobile menu covers the dock instead of fighting it. Nothing here sets z-index inline, and the root element never fills the viewport — both matter because Router.cleanupBlockingUI() strips body children that are fixed, z-index >= 50 and fullscreen-sized, plus anything carrying an inline z-index of 50/9999/10000. Motion budget: transform, opacity and filter only. Every duration under 420ms, every curve custom — the default CSS easings are too weak here. ========================================================================== */ .rs-social-dock { --sd-cyan: #2CABE0; --sd-cyan-ink: #0E6E93; --sd-cyan-lit: #1B96CC; --sd-cyan-deep: #0A5675; --sd-surface: #FFFFFF; --sd-ink: #0C1B26; --sd-ink-dim: #3F5566; --sd-line: #D7E3EC; --sd-shadow: 0 12px 28px -10px rgba(16, 42, 60, .22); --sd-shadow-lg: 0 22px 48px -18px rgba(16, 42, 60, .30); --sd-glow: 0 0 0 1px rgba(44, 171, 224, .30), 0 16px 38px -14px rgba(14, 110, 147, .48); --sd-e-out: cubic-bezier(.23, 1, .32, 1); --sd-e-spring: cubic-bezier(.34, 1.56, .48, 1); --sd-e-in: cubic-bezier(.4, 0, .68, .06); --sd-font: 'Plus Jakarta Sans', system-ui, sans-serif; --sd-fab: 3rem; position: fixed; inset-block-end: max(1.25rem, env(safe-area-inset-bottom)); inset-inline-end: max(1.25rem, env(safe-area-inset-right)); z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: .625rem; font-family: var(--sd-font); /* The root is a bare positioning frame — clicks pass through the gaps between the pills and the button to the page underneath. */ pointer-events: none; } .rs-social-dock[hidden] { display: none; } /* ── Scrim ──────────────────────────────────────────────────────────────── A child of the dock, not a body sibling: as a sibling it would be a fullscreen fixed element and the router's navigation cleanup would delete it. Barely-there tint — this panel is small and local, a heavy dim would read as a modal. */ .rs-social-scrim { position: fixed; inset: 0; background: rgba(12, 27, 38, .18); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .34s var(--sd-e-out), visibility .34s; } .rs-social-dock.is-open .rs-social-scrim { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Account stack ───────────────────────────────────────────────────── */ .rs-social-stack { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; margin: 0; padding: 0; list-style: none; pointer-events: none; } .rs-social-dock.is-open .rs-social-stack { pointer-events: auto; } /* Each pill is parked slightly low, small and soft-focused, then springs up into place. Never scale(0) — nothing in the real world appears out of nothing. --i is the paint order set by the component: 0 for the pill nearest the button on open, reversed on close so the stack collapses from the top down rather than all at once. */ .rs-social-item { --sd-delay: calc(var(--i, 0) * 52ms); opacity: 0; transform: translate3d(0, 14px, 0) scale(.9); filter: blur(3px); transition: opacity .3s var(--sd-e-out) var(--sd-delay), transform .42s var(--sd-e-spring) var(--sd-delay), filter .3s var(--sd-e-out) var(--sd-delay); will-change: transform, opacity; } .rs-social-dock.is-open .rs-social-item { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } /* Closing is quicker and unwinds without the overshoot — a spring on the way out reads as indecision. */ .rs-social-dock:not(.is-open) .rs-social-item { transition: opacity .16s var(--sd-e-in) var(--sd-delay), transform .2s var(--sd-e-in) var(--sd-delay), filter .16s var(--sd-e-in) var(--sd-delay); } /* ── The pill ─────────────────────────────────────────────────────────── */ .rs-social-link { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2.875rem; /* 46px — clears the 44px touch minimum */ padding: .3125rem .875rem .3125rem .3125rem; border-radius: 999px; background: var(--sd-surface); box-shadow: var(--sd-shadow), inset 0 1px 0 rgba(255, 255, 255, .6); color: var(--sd-ink); text-decoration: none; overflow: hidden; transition: transform .26s var(--sd-e-out), box-shadow .26s var(--sd-e-out), color .2s ease; } .rs-social-link:focus-visible { outline: 2px solid var(--sd-cyan-lit); outline-offset: 3px; } .rs-social-link:active { transform: scale(.97); } /* Sheen sweep — a light pass across the pill on hover. Pure transform on a pseudo-element, so it costs nothing on the main thread. */ .rs-social-link::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 55%; background: linear-gradient(100deg, transparent, rgba(44, 171, 224, .14) 45%, transparent); transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; pointer-events: none; } .rs-social-avatar { position: relative; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden; background: linear-gradient(140deg, #EDF3F8, #D7E3EC); display: grid; place-items: center; font-size: .875rem; font-weight: 800; color: var(--sd-cyan-ink); box-shadow: inset 0 0 0 1px rgba(14, 110, 147, .14); transition: transform .32s var(--sd-e-spring); } .rs-social-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .rs-social-name { font-size: .8125rem; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; } /* Hover is desktop-only: on touch these fire on tap and read as lag. */ @media (hover: hover) and (pointer: fine) { .rs-social-link:hover { transform: translate3d(-.3rem, 0, 0); box-shadow: var(--sd-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .6); color: var(--sd-cyan-deep); } .rs-social-link:hover::after { opacity: 1; transform: translate3d(320%, 0, 0) skewX(-18deg); transition: transform .7s var(--sd-e-out), opacity .2s ease; } .rs-social-link:hover .rs-social-avatar { transform: scale(1.08) rotate(-4deg); } } /* ── The button ──────────────────────────────────────────────────────── */ .rs-social-fab { position: relative; flex-shrink: 0; width: var(--sd-fab); height: var(--sd-fab); border: 0; border-radius: 999px; padding: 0; cursor: pointer; pointer-events: auto; background: radial-gradient(120% 120% at 30% 20%, var(--sd-cyan) 0%, var(--sd-cyan-lit) 48%, var(--sd-cyan-deep) 100%); color: #F7FCFF; box-shadow: var(--sd-glow), var(--sd-shadow); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--sd-e-spring), box-shadow .3s var(--sd-e-out); } .rs-social-fab:focus-visible { outline: 2px solid var(--sd-cyan-deep); outline-offset: 4px; } .rs-social-fab:active { transform: scale(.94); } @media (hover: hover) and (pointer: fine) { .rs-social-fab:hover { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(44, 171, 224, .45), 0 22px 46px -14px rgba(14, 110, 147, .62), var(--sd-shadow); } } /* Orbit — a dashed ring turning slowly with a brighter arc running over it, and a small plane riding the path. Echoes the boot loader in index.html so the dock reads as part of the same system. */ .rs-social-orbit { position: absolute; inset: -.375rem; pointer-events: none; color: rgba(44, 171, 224, .55); } .rs-social-orbit svg { width: 100%; height: 100%; display: block; overflow: visible; } .rs-social-orbit-ring { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 2 7; stroke-linecap: round; transform-origin: 50% 50%; animation: rs-sd-spin 14s linear infinite; } .rs-social-orbit-arc { fill: none; stroke: var(--sd-cyan); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 34 130; transform-origin: 50% 50%; animation: rs-sd-spin 5.5s linear infinite; } .rs-social-plane { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: .5rem; height: .5rem; color: var(--sd-cyan-deep); offset-path: circle(calc(var(--sd-fab) * .458) at 50% 50%); offset-rotate: auto; animation: rs-sd-orbit 5.5s linear infinite; } .rs-social-plane svg { width: 100%; height: 100%; display: block; fill: currentColor; stroke: none; } /* Attention breath — a ring that expands out of the button and fades. Runs three times on first paint, then stops: a pulse that never ends is a pulse nobody sees. Suppressed once the panel has been opened. */ .rs-social-fab::before { content: ''; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(44, 171, 224, .5); pointer-events: none; animation: rs-sd-breath 2.8s var(--sd-e-out) 3; } .rs-social-dock.is-open .rs-social-fab::before, .rs-social-dock.has-engaged .rs-social-fab::before { animation: none; } .rs-social-dock.is-open .rs-social-orbit-arc { animation-duration: 2.4s; } .rs-social-dock.is-open .rs-social-plane { animation-duration: 2.4s; } /* ── Icon morph ────────────────────────────────────────────────────────── Two glyphs stacked in the same grid cell, cross-rotated. The share mark turns out as the cross turns in — no gap where the button is empty. */ .rs-social-glyph { position: absolute; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; transition: opacity .2s var(--sd-e-out), transform .34s var(--sd-e-spring); } .rs-social-glyph svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .rs-social-glyph-share { opacity: 1; transform: rotate(0) scale(1); } .rs-social-glyph-close { opacity: 0; transform: rotate(-60deg) scale(.6); } .rs-social-dock.is-open .rs-social-glyph-share { opacity: 0; transform: rotate(60deg) scale(.6); } .rs-social-dock.is-open .rs-social-glyph-close { opacity: 1; transform: rotate(0) scale(1); } /* ── Hover label ───────────────────────────────────────────────────────── Sits to the left of the button, desktop only, hidden while open (the pills are the label at that point). */ .rs-social-tip { position: absolute; inset-inline-end: calc(100% + .625rem); inset-block-start: 50%; padding: .3125rem .625rem; border-radius: 8px; background: var(--sd-ink); color: #F2F7FB; font-size: .6875rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(.375rem, -50%, 0); transition: opacity .18s var(--sd-e-out), transform .24s var(--sd-e-out); } @media (hover: hover) and (pointer: fine) { .rs-social-dock:not(.is-open) .rs-social-fab:hover + .rs-social-tip, .rs-social-dock:not(.is-open) .rs-social-fab:focus-visible + .rs-social-tip { opacity: 1; transform: translate3d(0, -50%, 0); } } @media (hover: none) { .rs-social-tip { display: none; } } /* ── Keyframes ───────────────────────────────────────────────────────── */ @keyframes rs-sd-spin { to { transform: rotate(360deg); } } @keyframes rs-sd-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes rs-sd-breath { 0% { box-shadow: 0 0 0 0 rgba(44, 171, 224, .5); } 70% { box-shadow: 0 0 0 14px rgba(44, 171, 224, 0); } 100% { box-shadow: 0 0 0 0 rgba(44, 171, 224, 0); } } /* ── Small screens ───────────────────────────────────────────────────── Below 640px .rs-svcnav (css/landing-v2.css) stops being a centred pill in the header and becomes a full-width bar pinned to the bottom of the screen. The dock sits at z-index 100 against that bar's 95, so at the default offset it landed squarely on top of the Pay tab. Lift the whole dock clear of the bar instead of lowering its stacking — the pills have to stay above the bar when the panel is open. Bar height: .5rem padding + 46px tab + .5rem padding, plus the safe-area inset it already adds for itself. */ @media (max-width: 639.98px) { .rs-social-dock { --sd-svcnav-h: calc(3.875rem + env(safe-area-inset-bottom)); inset-block-end: calc(var(--sd-svcnav-h) + .75rem); } } @media (max-width: 480px) { .rs-social-dock { --sd-fab: 2.875rem; gap: .5rem; } .rs-social-name { max-width: min(9.5rem, 42vw); } } /* Landscape phones have almost no vertical room; a tall stack would run off the top of the screen, so the stack scrolls inside itself. */ @media (max-height: 460px) { .rs-social-stack { max-height: 58vh; overflow-y: auto; padding-block: .125rem; scrollbar-width: thin; } } /* ── Reduced motion ────────────────────────────────────────────────────── Fewer and gentler, not zero: opacity still carries the state change, all movement and the perpetual orbit stop. */ @media (prefers-reduced-motion: reduce) { .rs-social-orbit-ring, .rs-social-orbit-arc, .rs-social-plane, .rs-social-fab::before { animation: none !important; } .rs-social-plane { offset-distance: 12%; } .rs-social-item, .rs-social-dock.is-open .rs-social-item, .rs-social-dock:not(.is-open) .rs-social-item { transform: none; filter: none; transition: opacity .2s ease var(--sd-delay); } .rs-social-glyph { transition: opacity .15s ease; } .rs-social-glyph-share, .rs-social-glyph-close, .rs-social-dock.is-open .rs-social-glyph-share, .rs-social-dock.is-open .rs-social-glyph-close { transform: none; } .rs-social-link, .rs-social-fab, .rs-social-avatar, .rs-social-tip { transition: opacity .15s ease, box-shadow .15s ease, color .15s ease; } .rs-social-link:hover, .rs-social-fab:hover, .rs-social-fab:active, .rs-social-link:active { transform: none; } .rs-social-link:hover::after { display: none; } }