/* ===================================================================== * MakeArtReveal — habillage visuel de la lightbox PhotoSwipe v5. * Polices : Syne Variable (boutons, flèches ← →) + General Sans * (@font-face copiés depuis admin.css). * ===================================================================== */ @font-face { font-family: "Syne Variable"; src: url("../fonts/Syne-VariableFont_wght.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; } /* Le lien de la galerie produit WooCommerce n'a plus de `href` (retiré en * JS pour supprimer l'aperçu d'URL du navigateur au survol, voir * lightbox-init.js) — sans `href`, le navigateur ne considère plus l'`` * comme un lien et n'affiche donc plus son curseur "main" par défaut. On le * restaure explicitement, uniquement sur l'`` elle-même (pas sur tout * le conteneur du module) pour que le curseur cliquable ne s'affiche que * sur l'image, pas sur l'espace vide autour. */ .woocommerce-product-gallery__image img { cursor: pointer; } .pswp.mar-reveal { --mar-reveal-bg: #0d0e11; --mar-reveal-radius: 8px; /* Recolore les icônes/boutons PhotoSwipe par défaut avec nos couleurs. */ --pswp-bg: var(--mar-reveal-bg); --pswp-icon-color: #ffffff; --pswp-icon-color-secondary: rgba(255, 255, 255, 0.7); font-family: "General Sans", sans-serif; /* 100dvh sur mobile plutôt que 100vh (fallback vh d'abord pour les * navigateurs sans support dvh). */ height: 100vh; height: 100dvh; } /* L'overlay natif `.pswp__bg` reste transparent : `.pswp` porte son propre * `contain: size layout style` + `position: fixed` (CSS core PhotoSwipe), * ce qui confine tout `backdrop-filter` posé sur un de ses descendants à * l'intérieur de ce périmètre — il ne peut alors plus flouter la vraie page * derrière (vérifié en direct : blur(6px), voire blur(40px), sur * `.pswp__bg` ne produit aucun flou visible). La teinte + le flou sont donc * gérés par `.mar-reveal-backdrop`, un calque à part entière inséré comme * enfant direct de `` — hors du confinement de `.pswp` — voir * showBackdrop()/hideBackdrop() dans lightbox-init.js. */ .mar-reveal .pswp__bg { background: transparent !important; } /* Calque de fond flouté, frère de `.pswp` (pas descendant). */ .mar-reveal-backdrop { position: fixed; inset: 0; z-index: 999998; background-color: rgba(13, 14, 17, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .mar-reveal-backdrop--visible { opacity: 1; } /* Pas de compteur de position : déjà exclu de la création via l'option * PhotoSwipe `counter: false` — cette règle est une sécurité défensive si * jamais l'option venait à changer de comportement entre versions. */ .mar-reveal .pswp__counter { display: none !important; } /* ----------------------------------------------------------------------- * Curseur du cycle de zoom (voir imageClickZoomCycle dans * lightbox-init.js) : `imageClickAction` étant une fonction custom plutôt * que la chaîne native "zoom"/"zoom-or-close", PhotoSwipe n'ajoute jamais * sa classe `pswp--click-to-zoom` et retombe sur le curseur de secours fixe * de photoswipe.css (zoom-out en permanence). On gère donc le curseur * nous-mêmes : loupe + par défaut (palier suivant = zoom avant), loupe - * uniquement au dernier palier du cycle (palier suivant = retour à "fit"), * togglée en JS via la classe `mar-reveal-zoom-out` sur `.pswp`. * --------------------------------------------------------------------- */ .mar-reveal.pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .mar-reveal.pswp--zoom-allowed.mar-reveal-zoom-out .pswp__img { cursor: zoom-out; } /* ----------------------------------------------------------------------- * Bouton fermer : toujours visible, jamais de fondu. Même principe que les * flèches : glyphe typographique ("X" de Syne Variable, injecté en HTML par * lightbox-init.js) plutôt que l'icône SVG native, noir fixe, aucun fond, * aucun changement de couleur au survol — seule l'épaisseur varie. * --------------------------------------------------------------------- */ .mar-reveal .pswp__button--close { opacity: 1 !important; visibility: visible !important; overflow: visible; } .mar-reveal .pswp__button--close .mar-reveal-close-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Syne Variable", sans-serif; font-weight: 700; font-size: clamp(24px, 2vw, 40px); line-height: 1; color: #ffffff; pointer-events: none; transition: font-weight 0.2s ease; } .mar-reveal .pswp__button--close:hover .mar-reveal-close-glyph, .mar-reveal .pswp__button--close:focus-visible .mar-reveal-close-glyph { font-weight: 900; } /* ----------------------------------------------------------------------- * Flèches desktop : caractères typographiques ← / → (glyphes natifs de Syne * Variable, injectés en HTML par lightbox-init.js), pas de SVG. Noir fixe * (#0d0e11) — aucun changement de couleur au survol. Seule l'épaisseur * varie : 700 au repos, 800 au survol/focus (le fichier vendorisé plafonne * réellement à 800 malgré son nom — vérifié dans sa table `fvar`, donc pas * 900 comme demandé littéralement, mais le même principe : la police * variable gère la graisse nativement, sans image à maintenir). Masquées * par défaut (PhotoSwipe gère nativement pswp--touch / pswp--has_mouse), * avec un fondu d'entrée/sortie piloté par la classe mar-reveal-idle * (togglée en JS sur mousemove + timeout 2s). Sur tactile, .pswp--touch * garde le dessus et masque toujours les flèches (règle de secours en plus * de celle du CSS core PhotoSwipe). * --------------------------------------------------------------------- */ .mar-reveal .pswp__button--arrow { opacity: 1; overflow: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; } .mar-reveal .pswp__button--arrow .mar-reveal-arrow-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Syne Variable", sans-serif; font-weight: 700; /* clamp() : au moins 32px, grandit avec la largeur de viewport, plafonné * à 72px sur très grand écran — plus la petite taille fixe précédente. */ font-size: clamp(32px, 3vw, 72px); line-height: 1; color: #ffffff; pointer-events: none; transition: font-weight 0.2s ease; } .mar-reveal .pswp__button--arrow:hover .mar-reveal-arrow-glyph, .mar-reveal .pswp__button--arrow:focus-visible .mar-reveal-arrow-glyph { /* Demandé à 900 comme pour le X : le fichier vendorisé plafonne * réellement à 800 (vérifié dans sa table fvar), donc le rendu visuel * s'arrêtera là malgré cette valeur — inoffensif de la déclarer, le * navigateur clampe automatiquement à la graisse max disponible. */ font-weight: 900; } .mar-reveal.mar-reveal-idle .pswp__button--arrow { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } .mar-reveal.pswp--touch .pswp__button--arrow { opacity: 0 !important; visibility: hidden !important; } /* border-radius: 8px reste cantonné aux éléments d'UI (boutons) ci-dessus — * jamais appliqué à l'image affichée elle-même. */