/* ========================================================================== MegaTel — "Coming soon" spotlight reveal Component styles. All tunable values live in js/spotlight-reveal.config.js; this file only consumes the custom properties that the script writes. Single source of truth for the position, set by JS on .spotlight-reveal: --spotlight-x centre X, in px, in viewport (client) coordinates --spotlight-y centre Y, in px, in viewport (client) coordinates --spotlight-size diameter, in px --spotlight-feather width of the soft edge, in px The reveal mask AND the "Coming Soon" label are both positioned from those same three variables, so they physically cannot drift apart. Structure (created by the script, never present when the effect is off): .spotlight-reveal fixed, pointer-events: none, holds vars .spotlight-reveal__a11y one stable visually hidden sentence .spotlight-reveal__overlay dark + blurred, radial-masked .spotlight-reveal__shield optional invisible click blocker .spotlight-reveal__label sharp "Coming Soon" text, unblurred .spotlight-reveal__toast bottom-centred announcement The toast is the one part that is NOT tied to the spotlight position: it is pinned to the bottom edge of the viewport and centred horizontally, driven by its own set of variables, all written by the script: --spotlight-toast-offset gap below it, in px --spotlight-toast-gutter minimum gap to the side edges, in px --spotlight-toast-max-width widest it may grow, in px --spotlight-toast-duration fade/slide length, in ms ========================================================================== */ .spotlight-reveal { /* Fallbacks only: the script overwrites every one of these inline. */ --spotlight-x: 50vw; --spotlight-y: 40vh; --spotlight-size: 520px; --spotlight-feather: 90px; --spotlight-blur: 10px; --spotlight-overlay-rgb: 17, 19, 24; --spotlight-overlay-opacity: 0.88; --spotlight-label-size: 22px; /* Toast fallbacks, likewise overwritten inline whenever it is built. */ --spotlight-toast-offset: 16px; --spotlight-toast-gutter: 16px; --spotlight-toast-max-width: 420px; --spotlight-toast-radius: 16px; --spotlight-toast-blur: 14px; --spotlight-toast-rgb: 17, 19, 24; --spotlight-toast-bg-opacity: 0.82; --spotlight-toast-title-size: 16px; --spotlight-toast-body-size: 14px; --spotlight-toast-body-opacity: 0.78; --spotlight-toast-duration: 320ms; position: fixed; inset: 0; z-index: 9000; /* The wrapper never eats input. Only the optional shield does. */ pointer-events: none; } /* Derived geometry, shared by the mask and by the fallback gradient. --spotlight-core is the fully clear centre; the feathered band runs from there out to the radius. max() keeps a large edgeFeather from inverting it. */ .spotlight-reveal__overlay { --sr-radius: calc(var(--spotlight-size) / 2); --sr-core: max(0px, var(--sr-radius) - var(--spotlight-feather)); position: absolute; inset: 0; pointer-events: none; /* ------------------------------------------------------------------ BASELINE / FALLBACK PATH. Browsers without backdrop-filter or CSS masks get a dark translucent overlay with a feathered radial opening painted straight into the background. No blur, but the effect still reads correctly and the site stays usable. This is also what prints. ------------------------------------------------------------------ */ background-image: radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), rgba(var(--spotlight-overlay-rgb), 0) 0, rgba(var(--spotlight-overlay-rgb), 0) var(--sr-core), rgba(var(--spotlight-overlay-rgb), calc(var(--spotlight-overlay-opacity) * 0.45)) calc(var(--sr-core) + var(--spotlight-feather) * 0.5), rgba(var(--spotlight-overlay-rgb), calc(var(--spotlight-overlay-opacity) * 0.85)) calc(var(--sr-core) + var(--spotlight-feather) * 0.8), rgba(var(--spotlight-overlay-rgb), var(--spotlight-overlay-opacity)) var(--sr-radius)); background-repeat: no-repeat; } /* ---------------------------------------------------------------------- ENHANCED PATH. Where both backdrop-filter and CSS masks exist, the overlay becomes a flat tinted pane that blurs whatever is behind it, and the radial mask punches the spotlight out of the pane itself. This is why the blur is NEVER applied to the page container: a child cannot cancel an inherited filter, but a masked-away region of an overlay simply is not painted. ---------------------------------------------------------------------- */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and ((-webkit-mask-image: radial-gradient(#000, #000)) or (mask-image: radial-gradient(#000, #000))) { .spotlight-reveal__overlay { /* Same stop ramp as the fallback, but in alpha, so the two paths feather identically. Opaque black = overlay kept, transparent = overlay removed and the site shows through untouched. */ --sr-mask: radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--sr-core), rgba(0, 0, 0, 0.45) calc(var(--sr-core) + var(--spotlight-feather) * 0.5), rgba(0, 0, 0, 0.85) calc(var(--sr-core) + var(--spotlight-feather) * 0.8), rgba(0, 0, 0, 1) var(--sr-radius)); background-image: none; background-color: rgba(var(--spotlight-overlay-rgb), var(--spotlight-overlay-opacity)); -webkit-backdrop-filter: blur(var(--spotlight-blur)); backdrop-filter: blur(var(--spotlight-blur)); -webkit-mask-image: var(--sr-mask); mask-image: var(--sr-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } /* ---------------------------------------------------------------------- Invisible interaction shield. Present only when disableUnderlyingInteraction is true. It is the topmost hit-testable layer, so pointer presses land here instead of on links and buttons — no page component is modified to achieve that. Because it is not itself scrollable, wheel and touch panning chain straight through to the document, so scrolling and pinch-zoom keep working normally. ---------------------------------------------------------------------- */ .spotlight-reveal__shield { position: absolute; inset: 0; pointer-events: auto; background-color: transparent; } /* Opt-in via config.showCustomCursor. */ .spotlight-reveal__shield--hide-cursor { cursor: none; } /* ---------------------------------------------------------------------- The "Coming Soon" label. A sibling of the overlay rather than a child, so it is never touched by the backdrop blur or the mask — it stays sharp. Positioned from the same --spotlight-x / --spotlight-y as the mask and centred on itself, so it is always dead centre in the spotlight, on every device and during every kind of movement. ---------------------------------------------------------------------- */ .spotlight-reveal__label { position: absolute; left: var(--spotlight-x); top: var(--spotlight-y); transform: translate(-50%, -50%); margin: 0; max-width: calc(var(--spotlight-size) * 0.8); font-family: var(--font-primary, "Montserrat", system-ui, sans-serif); font-size: var(--spotlight-label-size); line-height: 1.3; text-align: center; text-wrap: balance; white-space: pre-line; /* Never intercepts input, never gets selected or dragged. */ pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* ---------------------------------------------------------------------- The bottom toast. Pinned to the bottom edge of the viewport and centred on the vertical mid-line of the screen, sitting --spotlight-toast-offset above the bottom. It shrink-wraps its text up to --spotlight-toast-max-width, and on a narrow screen the gutter cap takes over so it never touches the edges. Like the label it is a sibling of the overlay, so the backdrop blur never touches it, and it inherits pointer-events: none from the wrapper: the toast can never swallow a click meant for the page beneath it. ---------------------------------------------------------------------- */ .spotlight-reveal__toast { position: absolute; left: 50%; bottom: var(--spotlight-toast-offset); width: max-content; max-width: min(var(--spotlight-toast-max-width), calc(100% - var(--spotlight-toast-gutter) * 2)); padding: 14px 20px; border-radius: var(--spotlight-toast-radius); background-color: rgba(var(--spotlight-toast-rgb), var(--spotlight-toast-bg-opacity)); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); font-family: var(--font-primary, "Montserrat", system-ui, sans-serif); text-align: center; text-wrap: balance; /* Hidden start state. The script adds .is-visible one frame later, so the transition runs from here rather than from nothing. */ opacity: 0; transform: translate(-50%, 12px); transition: opacity var(--spotlight-toast-duration) ease, transform var(--spotlight-toast-duration) ease; pointer-events: none; user-select: none; -webkit-user-select: none; } /* Blur behind the panel only where the browser supports it. Everywhere else the translucent background alone carries the legibility. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .spotlight-reveal__toast { -webkit-backdrop-filter: blur(var(--spotlight-toast-blur)); backdrop-filter: blur(var(--spotlight-toast-blur)); } } .spotlight-reveal__toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Belt and braces: the script hides the toast with the `hidden` attribute once it has faded out, and this guarantees it stays out of the layout even if a later stylesheet gives divs an explicit display value. */ .spotlight-reveal__toast[hidden] { display: none; } .spotlight-reveal__toast-title { margin: 0; font-size: var(--spotlight-toast-title-size); font-weight: 600; line-height: 1.35; } .spotlight-reveal__toast-body { margin: 4px 0 0; font-size: var(--spotlight-toast-body-size); font-weight: 400; line-height: 1.45; opacity: var(--spotlight-toast-body-opacity); } /* Only one line present: nothing to separate. */ .spotlight-reveal__toast-body:first-child { margin-top: 0; } /* --------------------------- Reduced motion ----------------------------- The global reduce block in styles.css already neutralises transitions and animations. The script additionally stops the follow/bounce loops, so there is nothing left to damp here; this only guards against a stray transition being introduced later. */ @media (prefers-reduced-motion: reduce) { .spotlight-reveal, .spotlight-reveal__overlay, .spotlight-reveal__label, .spotlight-reveal__toast { transition: none !important; animation: none !important; } /* No slide either - it appears and disappears in place. */ .spotlight-reveal__toast { transform: translate(-50%, 0); } } /* The overlay is decoration: never let it into a printout. */ @media print { .spotlight-reveal { display: none !important; } }