/* ==========================================================================
protect.css — image protection layer for Pixpop Studio
--------------------------------------------------------------------------
WHERE TO PUT THIS FILE
public_html/protect.css (same folder as index.html)
HOW TO INCLUDE IT — add this line inside of EVERY page,
AFTER your own stylesheet so it always wins:
If a page sits in a subfolder (e.g. /work/bramato.html) use a root path:
Nothing here changes layout, hover states, transitions or animations —
it only turns off selection / dragging / callouts and styles the
transparent shields that protect.js creates.
========================================================================== */
/* 1. Images cannot be selected, dragged, or long-press-saved ------------- */
img,
picture,
svg,
video,
canvas {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
user-drag: none;
-webkit-touch-callout: none; /* kills the iOS "Save Image" sheet */
-webkit-tap-highlight-color: transparent;
}
/* Pointer events land on the shield above the image instead of the image
itself, so the browser never offers "Save image as…" / "Copy image".
Hover effects keep working because the shield is INSIDE the hovered
parent — :hover on .card / .tile / a still fires normally. */
img {
pointer-events: none;
}
/* 2. The transparent shield injected by protect.js ---------------------- */
.ip-shield {
position: absolute;
z-index: 1; /* above the image, below text overlays (z 3+) */
display: block;
margin: 0;
padding: 0;
border: 0;
background: transparent; /* invisible; also blocks the image bitmap */
pointer-events: auto; /* it is the element the user actually touches */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
cursor: inherit; /* keeps your custom cursor / pointer states */
will-change: auto; /* no compositing cost */
}
/* Some browsers show a text caret over an empty absolute box */
.ip-shield::selection { background: transparent; }
.ip-shield::-moz-selection { background: transparent; }
/* 3. Ancestors that had to become a positioning context ---------------- */
.ip-host { position: relative; }
/* 4. Printing / "Save as PDF" strips the imagery ------------------------ */
@media print {
img,
video,
canvas,
.ip-shield {
visibility: hidden !important;
}
body::after {
content: "Images on this page are protected and cannot be printed. © Pixpop Studio";
display: block;
padding: 24px 0;
font: 400 12px/1.6 Poppins, sans-serif;
letter-spacing: .12em;
color: #000;
}
}
/* 5. Accessibility / performance: never fight reduced-motion users ------ */
@media (prefers-reduced-motion: reduce) {
.ip-shield { transition: none !important; animation: none !important; }
}