/* looks.css — photo filters for the grid (PRD D55). Scoped by [data-filter] on (site) or on a card (admin preview). Each tile has .shot (the photo), .fxl (a colour/light layer above it) and .stamp (a date stamp for the film looks). */ .fxl { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .45s ease; } .stamp { position: absolute; right: 5%; bottom: 6%; z-index: 1; pointer-events: none; display: none; font: 600 clamp(9px, 1.05vw, 15px)/1 "Courier New", ui-monospace, monospace; letter-spacing: .08em; color: #ff9a3c; text-shadow: 0 0 2px rgba(255,120,30,.9), 0 0 6px rgba(255,90,0,.55); opacity: .92; } [data-filter]:not([data-filter="none"]) .fxl { opacity: 1; } /* 70s: warm, faded, amber and brown, lifted blacks */ [data-filter="70s"] .shot { filter: sepia(.45) saturate(1.35) contrast(.8) brightness(1.08) hue-rotate(-8deg); } [data-filter="70s"] .fxl { background: radial-gradient(ellipse at 50% 42%, rgba(255,214,150,.18) 0%, rgba(150,78,30,.34) 100%); mix-blend-mode: soft-light; } /* 80s: punchy colour, magenta and cyan light */ [data-filter="80s"] .shot { filter: saturate(1.55) contrast(1.12) brightness(1.03) hue-rotate(-10deg); } [data-filter="80s"] .fxl { background: linear-gradient(135deg, rgba(255,0,170,.42), rgba(60,40,255,.18) 50%, rgba(0,220,255,.36)); mix-blend-mode: soft-light; } /* 90s: disposable camera with a flash — contrast, cool-green shadows, dark corners, a date stamp */ [data-filter="90s"] .shot { filter: contrast(1.18) saturate(.92) brightness(1.06) sepia(.1); } [data-filter="90s"] .fxl { background: radial-gradient(ellipse at 50% 44%, rgba(255,250,235,0) 48%, rgba(8,30,24,.62) 100%); mix-blend-mode: multiply; } [data-filter="90s"] .stamp { display: block; } [data-filter="90s"] .stamp::after { content: "'96 9 26"; } /* 2000s: point-and-shoot digicam — bright, cool, a little blown out, an LCD date */ [data-filter="2000s"] .shot { filter: brightness(1.13) contrast(1.06) saturate(1.18) hue-rotate(6deg); } [data-filter="2000s"] .fxl { background: linear-gradient(180deg, rgba(150,190,255,.22), rgba(150,190,255,.06)); mix-blend-mode: screen; } [data-filter="2000s"] .stamp { display: block; color: #ffc64a; text-shadow: 0 0 3px rgba(255,170,40,.8); font-weight: 400; } [data-filter="2000s"] .stamp::after { content: "2003/09/26 14:32"; } /* chrome: liquid metal */ [data-filter="chrome"] .shot { filter: url(#fx-chrome) contrast(1.12) brightness(1.02); } [data-filter="chrome"] .fxl { background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.16) 58%, rgba(255,255,255,0) 78%); mix-blend-mode: screen; } /* black and white */ [data-filter="bw"] .shot { filter: grayscale(1) contrast(1.18) brightness(1.02); } [data-filter="bw"] .fxl { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.28) 100%); mix-blend-mode: multiply; } /* colour washes (duotones) */ [data-filter="navy"] .shot { filter: contrast(1.2) url(#fx-navy); } [data-filter="cyan"] .shot { filter: contrast(1.15) url(#fx-cyan); } [data-filter="rose"] .shot { filter: contrast(1.18) url(#fx-rose); }