/* ============================================================ Styles custom — copie déminifiée des règles non-Tailwind du site original (clothildebouan.com/CB-public/assets/css/styles.css) ============================================================ */ /* Variables de thème. Déclarées ici (et pas seulement dans le @theme Tailwind du HTML) car Tailwind v4 supprime les variables non utilisées par ses classes utilitaires. Typographie unique : Neue Haas Grotesk (commerciale — à charger via Adobe Fonts ou tes fichiers licenciés), avec Helvetica Neue en secours. Les deux variables pointent vers la même famille ; seule la graisse distingue titres (700) et texte courant (400). */ :root { --font-grotesk: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-serif: var(--font-grotesk); --font-bold: var(--font-grotesk); --color-grey: #bcbec0; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Le body porte lui-même les marges de la page (20px) et la police serif. Particularité de l'original : la taille de texte DESCEND à 11px sur tablette (>= 48rem) puis remonte à 14px sur grand écran (>= 80rem). */ body { min-height: 100dvh; padding: 20px 20px 10px; font-family: var(--font-serif); font-weight: 400; font-size: 14px; line-height: 110%; } @media (min-width: 48rem) { body { font-size: 11px; } } @media (min-width: 80rem) { body { font-size: 14px; } } /* Titres : même taille que le texte courant, seule la police change (sans-serif bold vs slab-serif light) */ .text-title { font-family: var(--font-bold); font-weight: 700; font-size: 14px; line-height: 110%; } @media (min-width: 48rem) { .text-title { font-size: 11px; } } @media (min-width: 80rem) { .text-title { font-size: 14px; } } /* "Courant" = texte courant (les [tags] entre crochets) */ .font-courant, .text-courant { font-family: var(--font-serif); font-size: 14px; } /* ---------- Fiche projet (accordéon) ---------- Fermée : seul le titre + l'icône "+" sont visibles (content à max-height 0). .active (ajoutée au clic par main.js) : le trait vertical du "+" disparaît (il devient "−") et le contenu se déplie. */ .project-info-wrapper.active .line { opacity: 0; } .project-info-wrapper.active .content > * { opacity: 1; } .project-info-wrapper .content { opacity: 0; max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .project-info-wrapper.active .content { opacity: 1; max-height: 600px; } /* La fiche n'apparaît qu'une fois l'image de couverture chargée (lazysizes ajoute .lazyloaded à l') */ .image:has(.lazyloaded) + .project-info-wrapper, .video + .project-info-wrapper { opacity: 1; } /* ---------- Effet blur-up au lazy-load ---------- Avant chargement : image quasi invisible et très floutée. .lazyloaded : retour à la netteté avec transition. */ .custom-blur { opacity: 0.1; filter: blur(64px); transition: filter 0.4s cubic-bezier(0.4, 0, 1, 1), opacity 0.4s cubic-bezier(0.4, 0, 1, 1); } .lazyloaded.custom-blur { opacity: 1; filter: blur(0); } .lazyloaded.swiper-image { filter: none !important; opacity: 1 !important; } /* ---------- Carrousel Embla (overlay plein écran) ---------- */ .embla__container { display: flex; will-change: transform; } .embla__slide { flex: none; scroll-snap-align: center; } .embla__slide img, .embla__slide { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } /* Titres de section de la nav : graisse medium (le nom reste bold) */ .nav-links a { font-weight: 500; } /* ---------- Home : un seul écran, sans défilement ---------- */ body.home-noscroll { height: 100dvh; overflow: hidden; } /* ---------- Transition d'entrée « depuis le bas » (arrivée sur Archives) ---------- État initial rendu dès le 1er paint (via la classe .slide-enter sur ) : les éléments FIXES visibles sont décalés d'un plein écran vers le bas. Le JS les fait remonter puis retire la classe. On translate CHAQUE élément fixe directement (et pas la ), pour un rendu fiable partout (Safari inclus). */ body.slide-enter .home-grid, body.slide-enter > nav, body.slide-enter > a { transform: translateY(100vh); will-change: transform; } /* ---------- Home : grille d'images coulissante ---------- */ .home-grid { position: fixed; inset: 0; z-index: 0; overflow: hidden; cursor: grab; touch-action: none; background: #fff; } .home-grid:active { cursor: grabbing; } /* Flou gaussien sur les bords : les images se troublent en approchant du contour, au lieu d'être recouvertes de blanc. On applique un backdrop-filter masqué (transparent au centre, opaque sur les bords) pour ne flouter que le pourtour. pointer-events:none pour ne pas gêner le glissé. Couvre tout le bord (nav transparente) pour un contour net et continu. */ .home-grid::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); --edge: radial-gradient(120% 120% at 50% 50%, transparent 36%, #000 76%); -webkit-mask: var(--edge); mask: var(--edge); } /* cellules positionnées et recyclées par le JS */ .home-grid .cell { position: absolute; top: 0; left: 0; overflow: visible; will-change: transform; cursor: pointer; /* au survol d'une image : curseur « clic » (le vide garde la main) */ } /* Largeur fixée à la cellule, hauteur libre (proportion d'origine conservée, pas de recadrage), image calée en haut du cadre. */ .home-grid .cell img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; } /* ---------- Zoom des archives ---------- On zoome la vraie grille (transform sur #home-grid) ; cette couche ne sert qu'à capter le clic de fermeture et à porter les infos. */ .arch-lightbox { position: fixed; inset: 0; z-index: 100; pointer-events: none; } .arch-lightbox.is-open { pointer-events: auto; } /* la vignette agrandie EST celle de la grille : pas d'image dupliquée */ .arch-lightbox-media { display: none; } /* Les textes sont placés autour de l'image agrandie (positions posées par main.js) ; le conteneur ne capte pas la souris pour que le clic dans le vide referme, seuls les textes eux-mêmes restent cliquables. */ .arch-lightbox-info { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; /* l'opacité est pilotée par main.js (après le zoom) */ } /* Positions par défaut (repli) : le texte reste visible même si le calcul autour de l'image ne s'applique pas. main.js les remplace au clic. */ .arch-title { position: absolute; left: 20px; top: 70px; pointer-events: auto; } .arch-date { position: absolute; right: 20px; top: 70px; text-align: right; pointer-events: auto; } .arch-desc { position: absolute; left: 20px; top: 70px; max-width: 40ch; white-space: pre-line; pointer-events: auto; } /* pas de halo flou sur les bords pendant le zoom (il s'agrandirait aussi) */ .home-grid.zoomed::after { display: none; } /* pendant le zoom, on ne rogne plus : sinon une image en bordure d'écran apparaîtrait coupée (le clip est appliqué avant la mise à l'échelle) */ .home-grid.zoomed { overflow: visible; } /* ---------- About en surimpression : couche traversante ---------- Le conteneur reste pointer-events:none pour laisser passer glissé/molette vers la page du dessous (on continue à naviguer la grille/galerie derrière). Seuls les blocs de texte redeviennent cliquables, et uniquement quand la surimpression est ouverte (sinon les zones invisibles bloqueraient la page). */ #about-overlay.is-open .about-block { pointer-events: auto; } /* ---------- Page Projets : le défilé horizontal ---------- */ .strip-wrap { display: flex; } /* Desktop : le défilé est PLEINE LARGEUR (on annule le padding 20px du body qui laissait une bande blanche à gauche/droite). Le reste de la page (nav, texte) garde ses marges. */ @media (min-width: 768px) { #view-strip { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; } } /* Mobile : au lieu du défilé horizontal, on EMPILE les cartes de haut en bas (scroll vertical natif de la page). Le JS n'active pas le marquee sur mobile. */ @media (max-width: 767px) { #view-strip { display: block; height: auto; margin-top: 20px; } #view-strip > div { overflow: visible; cursor: default; } #strip-track { flex-direction: column; align-items: stretch; transform: none !important; /* annule une éventuelle translation du marquee */ } .strip-slide { width: 100% !important; margin: 0 0 8vh 0 !important; /* espace vertical entre les cartes (pour la légende) */ transform: none !important; } /* la légende (titre) est visible en permanence sur mobile (pas de survol) */ #strip-track .strip-slide span { opacity: 1 !important; transform: none !important; } } /* ---------- Blocs de texte riche (.content) ---------- */ .content p { margin-bottom: 10px; } .content p:last-child { margin-bottom: 0; } .content strong { font-family: var(--font-bold); font-size: 14px; }