/* ========================================================================== Interactive Vehicle Specifications - vanilla CSS Color palette inspired by https://aussieinvader.com/ ========================================================================== */ :root { /* Deep-navy palette with light blue gradient */ --iv-bg: #020202; /* near-black page background */ --iv-text: #ffffff; --iv-accent: #1b2b68; /* primary deep navy (dot, pulse, gradient start) */ --iv-accent-hover: #3b56a8; /* medium blue for hover dot */ --iv-accent-dark: #0f1a45; /* deeper navy for stronger contrast spots */ --iv-accent-light: #5a73c0; /* light blue used as gradient end */ --iv-border: #8a9fd8; /* soft light-blue for popup border */ } * { box-sizing: border-box; } /* Standalone-only body/html styles. The standalone index.html adds the class `iv-standalone` to , so these never leak into a WordPress page (WP page scroll, background, etc. stay untouched). */ html.iv-standalone, body.iv-standalone { height: 100%; margin: 0; } body.iv-standalone { background: var(--iv-bg); color: var(--iv-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; overflow: hidden; } /* Stage that centers the vehicle. Standalone (full viewport) usage uses `.stage` directly. When embedded in WordPress, the wrapper has class `iv-stage` which keeps it self-contained inside the page flow (no fixed viewport height and a transparent background, so it inherits page styling). */ .stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } .iv-stage { width: 100%; height: auto; min-height: auto; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; padding: 16px 0; } /* Popup always floats at the bottom-center of the viewport, even when the viewer is embedded inside a WordPress page. (.spec-popup is position: fixed by default - we intentionally do NOT override it for .iv-stage.) */ .iv-stage { position: relative; } /* The wrapper that hotspots are positioned relative to */ .vehicle-wrapper { position: relative; width: 100%; max-width: 80rem; /* same vibe as Tailwind's max-w-7xl */ } /* The vehicle image - cross-fades between phases */ .vehicle-image { display: block; width: 100%; height: auto; opacity: 1; transition: opacity 0.8s ease-in-out; } .vehicle-image.fading { opacity: 0; } /* Hotspot layer overlays the image */ .hotspots { position: absolute; inset: 0; pointer-events: none; } /* Each hotspot. Positioned with inline left/top in JS. */ .hotspot { position: absolute; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; z-index: 10; /* Initial state - we animate in via .visible */ opacity: 0; transform: translate(-50%, -50%) scale(0); transition: opacity 0.3s ease, transform 0.3s ease; } .hotspot.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* The numbered dot */ .hotspot-dot { width: 25px; height: 25px; border-radius: 50%; background-color: var(--iv-accent); border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #ffffff; line-height: 1; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; position: relative; z-index: 2; } .hotspot:hover .hotspot-dot, .hotspot.active .hotspot-dot { background-color: var(--iv-accent); border-color: #ffffff; transform: scale(1.5); box-shadow: 0 0 20px rgba(59, 86, 168, 0.85); } /* The pulse ring that appears on hover. Sized + offset so it stays centred on the 25px dot (center = 12.5px, ring 70px -> offset -22.5px). */ .hotspot-pulse { position: absolute; width: 70px; height: 70px; left: -22.5px; top: -22.5px; border-radius: 50%; background-color: var(--iv-accent); opacity: 0; pointer-events: none; z-index: 1; } .hotspot:hover .hotspot-pulse, .hotspot.active .hotspot-pulse { animation: pulse 1s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2); opacity: 0; } } /* ========================================================================== Specification popup (bottom center) ========================================================================== */ .spec-popup { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(50px) scale(0.5); background: linear-gradient(135deg, var(--iv-accent) 0%, var(--iv-accent-light) 100%); color: #ffffff; padding: 24px 32px; border-radius: 12px; border: 2px solid var(--iv-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); max-width: 42rem; width: calc(100% - 32px); display: flex; align-items: flex-start; gap: 12px; opacity: 0; pointer-events: none; z-index: 50; transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .spec-popup.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } .spec-id { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #ffffff; color: var(--iv-accent); display: flex; align-items: center; justify-content: center; font-size: 1.875rem; font-weight: 700; line-height: 1; } .spec-text { margin: 0; padding-top: 8px; font-size: 1.25rem; font-weight: 600; line-height: 1.5; } @media (max-width: 640px) { .spec-popup { padding: 16px 20px; bottom: 16px; } .spec-id { width: 36px; height: 36px; font-size: 1.25rem; } .spec-text { font-size: 1rem; padding-top: 6px; } }