/* ============================================================================ LOFT BABIES — base tweaks + custom comic cursor (the prototype's own keyframes/reset live inline in ) ========================================================================== */ html, body { min-height: 100%; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* selection in brand colours */ ::selection { background: #F4D11D; color: #181410; } /* keep the inertial-scroll spacer from showing a horizontal bar */ html, body { overflow-x: hidden; } /* ---- custom Keith-Haring cursor (redesign · light / modern / pop) ------ */ html.lb-cursor-on, html.lb-cursor-on * { cursor: none !important; } /* wrapper — pure mouse-follow layer (JS writes translate3d here) */ #lb-cursor { position: fixed; left: 0; top: 0; width: 53px; height: 56px; /* offset so the drawn arrow tip (svg 12,9) sits on the real pointer */ margin-left: -11px; margin-top: -8px; z-index: 99999; pointer-events: none; opacity: 0; will-change: transform; transition: opacity 0.18s ease; } /* state layer — hover / press transforms (kept off the follow + idle layers) */ .lb-cur-inner { display: block; transform-origin: 11px 8px; /* pivot on the arrow tip */ transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); } /* art layer — the idle "Haring vibration", pivoting on the tip */ .lb-cur-art { display: block; transform-origin: 20% 14%; animation: lbCurVibe 1.9s ease-in-out infinite; } .lb-cur-shape, .lb-cur-shadow { transition: fill 0.14s ease; } /* radiant energy ticks — staggered twinkle */ .lb-cur-rays line { transition: stroke 0.14s ease; } .lb-cur-rays .r1 { animation: lbCurRay 1.5s ease-in-out infinite; } .lb-cur-rays .r2 { animation: lbCurRay 1.5s ease-in-out 0.22s infinite; } .lb-cur-rays .r3 { animation: lbCurRay 1.5s ease-in-out 0.44s infinite; } /* hovering something clickable: pop + tilt, flip to brand yellow, rays flare red */ #lb-cursor.is-link .lb-cur-inner { transform: scale(1.16) rotate(-7deg); } #lb-cursor.is-link .lb-cur-shape { fill: #F4D11D; } #lb-cursor.is-link .lb-cur-rays line { stroke: #E8431F; } /* pressing: squash */ #lb-cursor.is-down .lb-cur-inner { transform: scale(0.82); } #lb-cursor.is-link.is-down .lb-cur-inner { transform: scale(1.0) rotate(-7deg); } @keyframes lbCurVibe { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes lbCurRay { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.22; } } /* respect reduced-motion: keep the cursor, drop the looping animation */ @media (prefers-reduced-motion: reduce) { .lb-cur-art { animation: none; } .lb-cur-rays line { animation: none; opacity: 0.7; } } /* touch / coarse pointers keep the native cursor */ @media (hover: none), (pointer: coarse) { #lb-cursor { display: none; } html.lb-cursor-on, html.lb-cursor-on * { cursor: auto !important; } } /* ============================================================================ EFFET PAPIER — asset « PAPER EFFECT » en surimpression (fusion « multiply », = le « Transfert » de Photoshop : une feuille de papier imprimée par-dessus). Remplace l'ancien grain feTurbulence. Posé sur la scène entière + sur chaque « chip » pop (boutons, badges, cartes — bord 3px + ombre dure). Voir site.js. ========================================================================== */ :root { --lb-paper: url("assets/paper-texture.jpg"); /* feuille crème — réf. */ --lb-grain: url("assets/paper-grain.jpg"); /* fibres contrastées (gris moyen) — chips */ --lb-tile: url("assets/paper-tile.jpg"); /* feuille crème RACCORDABLE (miroir 2×2) */ } /* nappe ambiante — la feuille est ATTACHÉE à la page : c'est la dernière enfant de #lb-content, donc elle est translatée par le scroll inertiel AVEC le contenu (et non fixée à l'écran). La tuile « miroir » se répète sans couture sur toute la hauteur → présence infinie ; on a la sensation d'avancer sur le papier. */ .lb-paper-overlay { position: absolute; inset: 0; /* couvre toute la hauteur de la page */ z-index: 6; /* au-dessus des fonds de section */ pointer-events: none; background: var(--lb-tile) repeat top center; background-size: 720px auto; /* échelle du grain ambiant */ mix-blend-mode: multiply; opacity: 0.5; } /* chips imprimés — le papier est posé À L'INTÉRIEUR de l'élément et le suit. Injecté par site.js sous le libellé → texte net, grain sur le fond. */ .lb-has-paper { isolation: isolate; } /* confine la fusion à l'élément */ .lb-paper-chip { position: absolute; inset: 0; pointer-events: none; /* grain de papier déjà contrasté et centré sur le gris moyen → « soft-light » pose les fibres CLAIRES et FONCÉES par-dessus n'importe quelle couleur d'UI (claire ou foncée) sans en délaver la teinte. Bien visible. */ background-image: var(--lb-grain); background-repeat: no-repeat; background-size: 300px auto; /* échelle des fibres */ mix-blend-mode: soft-light; opacity: 0.95; border-radius: inherit; /* épouse les coins arrondis */ } /* mobile : on garde l'esthétique mais on calme un peu l'intensité */ @media (hover: none), (pointer: coarse) { .lb-paper-overlay { opacity: 0.4; } .lb-paper-chip { opacity: 0.8; } } /* respecte un éventuel mode contraste/sobre : le papier reste décoratif */ @media (prefers-reduced-transparency: reduce) { .lb-paper-overlay { opacity: 0.34; } } /* ============================================================================ OMBRE COMIC « SCREENTONE » — la trame de points d'encre, autrefois posée en carrés flottants au hasard, devient l'OMBRE PORTÉE des éléments d'UI : un report de points qui déborde le coin bas-droit de chaque « chip » pop (boutons, badges, cartes à ombre dure), comme l'ombre tramée d'un manga / d'un comic. Injectée par site.js sur les SEULS éléments déjà dotés d'une ombre offset → une emphase nette, jamais aléatoire. ========================================================================== */ .lb-dot-shadow { position: absolute; inset: 0; z-index: -2; /* tout au fond du chip isolé */ pointer-events: none; border-radius: inherit; /* épouse pilules & coins arrondis */ background-image: radial-gradient(#181410 1.7px, transparent 1.9px); background-size: 6px 6px; /* trame Ben-Day régulière — points BRUTS */ /* décalée en bas-droite : le débord = l'ombre portée. AUCUN masque, AUCUN fondu, AUCUN dégradé — les points restent nets de bout en bout. */ transform: translate(11px, 13px); opacity: 0.92; } /* masque-face : la couleur du chip est redéposée PAR-DESSUS la trame intérieure → seule l'ombre (le débord bas-droite) reste pleine et nette ; sur la face, la trame ne fait qu'EFFLEURER la forme. Couleur injectée par site.js. */ .lb-dot-face { position: absolute; inset: 0; z-index: -1; /* au-dessus de la trame, SOUS le libellé */ pointer-events: none; border-radius: inherit; opacity: 0.9; } /* mobile : ombre un peu plus courte */ @media (hover: none), (pointer: coarse) { .lb-dot-shadow { transform: translate(8px, 9px); } }