/* ========================================================================== Spectrum IT Hub — outbound link previews -------------------------------------------------------------------------- A hover card showing a live screenshot of an outbound link's destination. Ported from an Aceternity React component (framer-motion + next/image + Tailwind), which is not usable here — no build step and no React authoring for site chrome. Same approach taken with the CONTACT flip tiles: rebuild the behaviour, drop the dependency. Pairs with link-preview.js. DESIGN DEVIATIONS FROM THE REFERENCE, ON PURPOSE - Square corners. The reference uses `rounded-xl`; this site has no rounded corners anywhere by deliberate rule (HANDOFF.md section 5). - The frame reuses the footer tooltip's exact material — #0B0C10 with a gold hairline — so a preview reads as part of this site's vocabulary rather than an imported widget. DESKTOP ONLY. Everything here is scoped to `(hover: hover)`. A touch device has no hover, and putting a preview in front of every outbound tap would be an obstacle rather than a help — link-preview.js does not even bind there. ========================================================================== */ @media (hover: hover) { /* The card is a single element reused for every link, appended to OUTSIDE the React root so the runtime cannot replace or reset it (HANDOFF.md section 6.7). It is never a child of the link it describes. */ .lp-card { position: fixed; z-index: 400; /* over the header (200s) and under nothing else */ width: 280px; pointer-events: none; /* never eat a click meant for the link */ opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0) scale(0.96); transform-origin: bottom center; background: #0B0C10; border: 1px solid rgba(232, 181, 71, 0.38); box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.85); transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 180ms; } .lp-card[data-open] { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), visibility 0s; } /* Opens downward when the link sits too near the top of the viewport. */ .lp-card[data-flip] { transform-origin: top center; } .lp-card[data-flip]:not([data-open]) { transform: translate3d(0, -8px, 0) scale(0.96); } /* Fixed 16:10 box so the card does not resize when the screenshot lands — a reflow mid-hover reads as a glitch. The shot fills it. */ .lp-shot { display: block; width: 100%; height: 175px; object-fit: cover; object-position: top center; background: #14161C; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Shown until the screenshot resolves. Microlink renders on demand, so the first hover on a cold URL is not instant. */ .lp-card[data-loading] .lp-shot { opacity: 0; } .lp-spinner { position: absolute; top: 0; left: 0; right: 0; height: 175px; display: none; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #7E8492; } .lp-card[data-loading] .lp-spinner { display: flex; } .lp-meta { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #F7F6F3; } .lp-meta::after { content: "\2197"; /* ↗ leaving the site */ margin-left: auto; color: #E8B547; } } /* --- The link affordance, at EVERY size --------------------------------- Deliberately outside the `(hover: hover)` block above. An underline marks something as a link; it is not a hover effect. Scoped with the card, an inline link like "Westgate IT Hub Private Limited" rendered as plain body text on a phone — `color: inherit` with no underline is invisible as a link and unreachable as an affordance. The PREVIEW is desktop-only; being a link is not. */ a[data-preview] { text-decoration: underline; text-decoration-color: rgba(232, 181, 71, 0.45); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 200ms ease; } @media (hover: hover) { a[data-preview]:hover { text-decoration-color: #E8B547; } } /* Buttons and tiles already carry their own affordance and hover treatment; an underline on top of that is noise. */ a[data-preview][data-preview-plain] { text-decoration: none; } /* Anyone who asked for reduced motion gets the card with no movement. */ @media (hover: hover) and (prefers-reduced-motion: reduce) { .lp-card, .lp-card[data-open] { transform: none; transition: opacity 120ms linear, visibility 0s; } }