/* ============================================================================ Project hover preview — floating "browser window" that follows the cursor and scrolls a full-page capture of the live site. Faithful port of the styling in projets-popup-fenetre.html, adapted to enhance the existing `.work-card` grid. Behaviour lives in components/ProjectPreview.tsx. Palette: bg #0A0A0A · accent #E04E1A · lines rgba(255,255,255,.10 / .20). ============================================================================ */ .ppw, .ppw * { box-sizing: border-box; } /* The single floating window (portaled to , follows the cursor). */ .ppw { position: fixed; left: 0; top: 0; z-index: 9000; pointer-events: none; /* never steals the click — it passes through to the card */ will-change: transform; } .ppw__inner { --vh: 148px; width: 222px; border-radius: 10px; overflow: hidden; background: #0c0b0a; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); opacity: 0; transform: scale(0.92); transform-origin: top left; transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); } .ppw.show .ppw__inner { opacity: 1; transform: scale(1); } /* Browser chrome: 3 dots + lock icon + real domain. */ .ppw__bar { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; background: #161412; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ppw__dots { display: flex; gap: 4px; flex: none; } .ppw__dots i { width: 6px; height: 6px; border-radius: 50%; } .ppw__dots i:nth-child(1) { background: #ff5f57; } .ppw__dots i:nth-child(2) { background: #febc2e; } .ppw__dots i:nth-child(3) { background: #28c840; } .ppw__url { flex: 1; display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); font: 400 9px system-ui, sans-serif; color: #8c8a86; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ppw__url svg { flex: none; width: 9px; height: 9px; opacity: 0.7; } .ppw__host { font-weight: 400; } /* Scrolling viewport: the capture translates from top to bottom. */ .ppw__view { position: relative; height: var(--vh); overflow: hidden; background: #0c0b0a; } .ppw__shot { position: absolute; top: 0; left: 0; width: 100%; display: block; transform: translateY(0); will-change: transform; /* duration is set inline per-image; keep the easing here */ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0.05, 0.2, 1); } .ppw__open { position: absolute; right: 7px; bottom: 7px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 100px; background: rgba(224, 78, 26, 0.95); color: #fff; font: 600 9px system-ui, sans-serif; } /* On a project detail page, the banner (.work-img-box) and the image after the design-process section (.works-img-item) are the live-site triggers. */ .work-img-box, .works-img-item { position: relative; cursor: pointer; overflow: hidden; } .work-img-box .work-img, .works-img-item .works-img { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .work-img-box:hover .work-img, .work-img-box.hv-pp-active .work-img, .works-img-item:hover .works-img, .works-img-item.hv-pp-active .works-img { transform: scale(1.03); } .work-img-box:focus-visible, .works-img-item:focus-visible { outline: 2px solid #e04e1a; outline-offset: 4px; } /* ArchiVento's banner ships with a white frame around the screenshot; zoom in to crop it out (scoped to that image by filename, so it's no-JS safe). */ .work-img-box .work-img[src*="archivento" i] { transform: scale(1.14); } .work-img-box:hover .work-img[src*="archivento" i], .work-img-box.hv-pp-active .work-img[src*="archivento" i] { transform: scale(1.17); } /* Narrow screens that still have a pointer: shrink the window. */ @media (max-width: 520px) { .ppw__inner { width: 170px; --vh: 120px; } } /* Touch / no-hover: no floating window. Show a permanent "Voir le projet" pill so the affordance survives without hover. */ @media (hover: none) { .ppw { display: none !important; } .work-img-box::after, .works-img-item::after { content: 'Visiter le site ↗'; position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 7px 13px; border-radius: 100px; background: rgba(224, 78, 26, 0.95); color: #fff; font: 600 11.5px system-ui, sans-serif; pointer-events: none; } } /* Reduced motion: kill the follow/scroll transitions; show a clean static state. */ @media (prefers-reduced-motion: reduce) { .ppw__inner, .ppw__shot, .work-img-box .work-img, .works-img-item .works-img { transition: none !important; } .ppw__shot, .work-img-box:hover .work-img, .work-img-box.hv-pp-active .work-img, .works-img-item:hover .works-img, .works-img-item.hv-pp-active .works-img { transform: none !important; } }