/* BD Plakatbau (Büro Destruct / Typedifferent.com) — user-provided font file, fonts/BD_Plakatbau.otf. Free-tier license: personal/non-commercial use is unrestricted, but the foundry's EULA (fonts/ — see the .otf's original zip) asks that commercial use be cleared with them first and that Büro Destruct be credited as the font's designer wherever design credits are shown. This site promotes paid photography work, so that's worth acting on, not just noting here. No build step needed for this — @font-face works directly off a local file path, unlike the Google Fonts families elsewhere in this project which need their own in each page's . */ @font-face{ font-family:'BD Plakatbau'; src:url('fonts/BD_Plakatbau.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } :root{ --dawn-gold:#e5e1d8; --dawn-gold-dim:#d2cdc5; --dusk-ember:#d2cdc5; --dusk-ember-dim:#b3ada5; --twilight-violet:#b3ada5; --twilight-violet-dim:#b3ada5; --night-void:#b3ada5; --night-void-2:#b3ada5; --stage-cyan:#b3ada5; --stage-magenta:#b3ada5; --paper:#f4f3ef; --paper-glass:rgba(244,243,239,.82); /* was #b3ada5 — only ~2:1 contrast against --paper, well under the WCAG AA minimum (4.5:1) for the site's default body text color. This warm dark gray keeps the same desaturated family but actually reads (~7.7:1). */ --ink:#4a453f; /* Anton stays the brand mark's own face (.brand, footer .fbrand) — untouched here, that's a separate identity decision from section headlines. */ --font-display:'Anton', sans-serif; /* .sec-title ("Day", "DJ & Portraits", "In the studio"...) — user- provided font, see the @font-face above. Bold industrial/stencil-poster character, closer to the site's grunge-editorial identity than the Bricolage Grotesque placeholder this replaced. */ --font-section:'BD Plakatbau', sans-serif; /* Cabinet Grotesk replaces Fraunces: taste-skill flags Fraunces as one of the two most-overused "AI creative brief" serifs, and this is a sans display font from its own recommended pool — closer to the "tech but elegant" nightlife/multimedia-creator vibe than an editorial serif, while still supporting italic for the same emphasis moves (.mini-hero-title, .sec-caption) the site already relies on */ --font-body:'Cabinet Grotesk', sans-serif; /* Space Mono replaces JetBrains Mono for every label/eyebrow/timestamp on the site — JetBrains Mono reads as a neutral code-editor font; Space Mono has real character (its quirky 'a' and 'g') while staying just as legible at label sizes, and its slightly retro-tech feel still fits the nightlife/multimedia-creator identity. */ --font-mono:'Space Mono', monospace; /* shared strong ease-out curve for entering/exiting UI elements — built-in CSS easings are too weak to feel intentional (Emil Kowalski animation standards); reused everywhere instead of one-off cubic-beziers */ --ease-out-strong:cubic-bezier(.16,1,.3,1); /* grain texture used by .lava-mass::after. feColorMatrix desaturates the raw turbulence: feTurbulence generates each RGBA channel independently by default, so without it this is literally colored static — blended on top of the lava blobs that showed up as random hue fringing ("chromatic aberration"). Coarser/higher-octave than .hero-grain's own copy — bigger grain clumps with more fractal detail help mask the feDisplacementMap's own smooth "wave" banding instead of a fine, mechanically-even speckle. */ --grain-noise-coarse-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-dark:#1c1a17; --grain-mid:#57514a; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--font-body); background:var(--paper-glass); color:var(--ink); overflow-x:hidden; } ::selection{background:var(--stage-magenta);color:white;} /* ---------- lava-mass: a single, page-wide layered grunge-lava background — one continuous texture behind header, every content section, AND the footer, instead of separate per-section islands. Fixed behind the whole page (tattoo.html / nightlife.html / contacto.html only). Three real layers, in paint order: 1. base — solid pale (var(--paper)) background-color, the same tone the rest of the page already sits on. 2. .lava-mass-blobs — two heavily blurred radial-gradient blobs (dark near-black "hot spot", medium-dark secondary mass), each independently drifting via its own CSS transform keyframes. The whole wrapper is ALSO run through an SVG filter (#lava-filter-page, defined inline in each page's HTML, not in this stylesheet) combining an animated feTurbulence with feDisplacementMap, so the blob edges visibly churn and warp over time instead of sliding as rigid circles — this is what earns the word "lava" instead of "gradient". 3. .lava-mass::after — the fine feTurbulence grain/stipple already used elsewhere in this file, blended on top and slowly panned via background-position, independent of the blob motion. Colors are pale base / dark blobs — matching the rest of the page's existing light --ink-on-paper palette, so content sections no longer need their own separate dark background or text-color override. ---------- */ .lava-mass{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--paper); /* base/settle state for the page-exit/page-enter flash below — same "ease back down" duration+curve as .hero-bg img's own settle */ filter:brightness(1); transition:filter .45s ease-out; } .lava-mass-blobs{ position:absolute; inset:0; filter:url(#lava-filter-page); } .lava-mass-blobs::before, .lava-mass-blobs::after{ content:''; position:absolute; border-radius:50%; will-change:transform; } .lava-mass-blobs::before{ width:90vmax;height:90vmax; top:-30%;left:-25%; filter:blur(110px); /* several intermediate stops instead of a single hard 0%-to-transparent falloff — a plain two-stop radial-gradient has a near-linear alpha ramp that reads as a distinct "ring" once feDisplacementMap warps it; staggering the falloff rate breaks that ring into a softer, more irregular gradient before the turbulence even touches it */ background:radial-gradient(circle, var(--grain-dark) 0%, rgba(28,26,23,.75) 22%, rgba(28,26,23,.4) 40%, rgba(28,26,23,.12) 55%, rgba(28,26,23,0) 68%); animation:lava-drift-a 52s ease-in-out infinite; } .lava-mass-blobs::after{ width:65vmax;height:65vmax; bottom:-20%;right:-15%; filter:blur(100px); background:radial-gradient(circle, var(--grain-mid) 0%, rgba(87,81,74,.7) 25%, rgba(87,81,74,.35) 45%, rgba(87,81,74,0) 70%); opacity:.85; animation:lava-drift-b 41s ease-in-out infinite; } @keyframes lava-drift-a{ 0%{transform:translate(0,0) scale(1);} 22%{transform:translate(14vw,10vh) scale(1.1);} 48%{transform:translate(6vw,22vh) scale(.94);} 71%{transform:translate(-12vw,9vh) scale(1.06);} 100%{transform:translate(0,0) scale(1);} } @keyframes lava-drift-b{ 0%{transform:translate(0,0) scale(1);} 30%{transform:translate(-16vw,-12vh) scale(1.16);} 63%{transform:translate(-7vw,-22vh) scale(.88);} 100%{transform:translate(0,0) scale(1);} } .lava-mass::after{ content:''; position:absolute; inset:-10%; pointer-events:none; background-image:var(--grain-noise-coarse-svg); background-size:130px 130px; /* soft-light instead of overlay: overlay pivots hard at 50% luminance per channel, which traced a visible ring/"wave" along the blob gradient's own 50%-luma contour once warped — soft-light has no such discontinuity but still reveals grain differently in light vs dark areas */ mix-blend-mode:soft-light; opacity:.7; animation:lava-grain-pan 55s linear infinite; } @keyframes lava-grain-pan{ from{background-position:0 0;} to{background-position:195px 130px;} } @media (prefers-reduced-motion: reduce){ .lava-mass-blobs::before, .lava-mass-blobs::after, .lava-mass::after{animation:none;} } /* ---------- rail (signature element: sun-to-stage-light travel) ---------- */ /* ---------- minimal page-opener: small type hierarchy + one wide random photo, replaces the old oversized section-divider title on tattoo.html/nightlife.html ---------- */ .mini-hero{ padding-top:140px; padding-bottom:60px; } .mini-hero-text{ max-width:640px; margin-bottom:40px; } .mini-hero-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); opacity:.9; margin-bottom:16px; } .mini-hero-title{ font-family:var(--font-body); font-style:italic; font-weight:300; font-size:clamp(28px,4vw,42px); line-height:1.25; margin-bottom:16px; } .mini-hero-caption{ max-width:480px; font-size:15px; line-height:1.6; opacity:.8; } /* aspect-ratio lives on the wrapper, not the item: a random pick that turns out portrait swaps in 3 more photos as a side-by-side strip (see the mini-hero-media randomizer script in each page) instead of one vertical image stretched/cropped across the whole 21:9 band — flex:1 1 0 on each child makes that split even whether there's 1 photo or 4. */ .mini-hero-media{ width:100%; aspect-ratio:21/9; display:flex; gap:14px; } .mini-hero-media .gallery-item{ flex:1 1 0; min-width:0; height:100%; aspect-ratio:auto; } @media (max-width:640px){ .mini-hero{padding-top:110px;} .mini-hero-media{aspect-ratio:4/3;} } /* ---------- bio (contacto.html only) ---------- */ .bio{ display:flex; align-items:center; gap:60px; padding-bottom:60px; } .bio-media{ flex:0 0 34%; } .bio-photo{ position:relative; aspect-ratio:4/5; } /* the jpg is the full photo, the png the same shot cut out to a transparent-background silhouette, stacked on top of it. Both start heavily blurred into an indistinct haze; hovering drops the blur on both at once, so the portrait reads as unlocking into focus rather than just "an image sharpening". */ .bio-photo-base, .bio-photo-cutout{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px); transition:filter .5s var(--ease-out-strong); will-change:filter; } .bio-photo-base{ z-index:1; /* dissolves toward the edges instead of ending in a hard photo rectangle — same ellipse-mask trick .hero-bg uses to blend into the lava field — and sits at partial opacity so it reads as a soft glow behind the cutout rather than a second, competing photo. Small solid core (15%) means almost the whole layer is already fading out. */ -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 42%, #000 15%, transparent 100%); mask-image:radial-gradient(ellipse 60% 60% at 50% 42%, #000 15%, transparent 100%); opacity:.7; } .bio-photo-cutout{ z-index:2; /* two masks intersected: the wide radial keeps the top/sides mostly solid while softening the rectangle's corners, the linear one fades out the last stretch at the bottom so the frame's hard crop (right where a hand/arm gets cut off) reads as a dissolve instead of an edge. -webkit-mask-composite's single value covers this since there's only one layer being composited onto the base layer. */ -webkit-mask-image:radial-gradient(ellipse 88% 88% at 50% 45%, #000 68%, transparent 100%), linear-gradient(to bottom, #000 62%, transparent 96%); mask-image:radial-gradient(ellipse 88% 88% at 50% 45%, #000 68%, transparent 100%), linear-gradient(to bottom, #000 62%, transparent 96%); -webkit-mask-composite:source-in; mask-composite:intersect; transform:scale(1); transition:filter .5s var(--ease-out-strong), transform .5s var(--ease-out-strong); will-change:filter, transform; } .bio-photo:hover .bio-photo-base, .bio-photo:hover .bio-photo-cutout{filter:blur(0);} /* "selection" zoom on just the sharp cutout layer on hover — the soft jpg backdrop stays put, so the pop reads as the subject stepping forward instead of the whole composition growing */ .bio-photo:hover .bio-photo-cutout{transform:scale(1.06);} /* "this is juan pi" annotation: a hand-drawn-style arrow + label that appears alongside the blur-unlock/zoom on the same hover, instead of needing its own trigger. Pure CSS/SVG — no JS, no new dependency — the arrow's stroke draws in via stroke-dashoffset, then the arrowhead pops in once the line finishes, before the label itself settles in. */ .bio-annotation{ /* covers the photo box exactly, same as the two layers — the arrow SVG's viewBox is 0-100 on both axes with preserveAspectRatio ="none", so its path coordinates ARE percentages of this box, independent of how big the box renders at any breakpoint (fixed the earlier version: a separately-sized+positioned corner group whose max-width cap made the arrow fall short of the face once the photo rendered wider than ~330px, e.g. the two-column desktop layout) */ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .3s var(--ease-out-strong); } .bio-photo:hover .bio-annotation{ opacity:1; } .bio-annotation-text{ position:absolute; top:6%; right:6%; font-family:var(--font-section); font-weight:400; text-transform:uppercase; letter-spacing:-.005em; font-size:clamp(14px,1.8vw,17px); line-height:1; color:var(--ink); text-align:right; white-space:nowrap; } .bio-annotation-arrow{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .bio-annotation-arrow path{ fill:none; stroke:var(--ink); stroke-width:2.2; /* keeps the line a constant screen thickness regardless of how big the 0-100 viewBox renders (photo box width varies a lot across breakpoints) — without this a stroke-width authored in viewBox units would scale with the box and look wildly different at each size */ vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .5s var(--ease-out-strong) .15s; } .bio-photo:hover .bio-annotation-arrow path{ stroke-dashoffset:0; } .bio-annotation-arrow polygon{ fill:var(--ink); opacity:0; transition:opacity .2s ease .6s; } .bio-photo:hover .bio-annotation-arrow polygon{ opacity:1; } .bio-text{flex:1 1 0;} .bio-text .sec-title{margin-bottom:20px;} .bio-text p{ font-size:16px; line-height:1.7; margin-bottom:18px; max-width:560px; } .bio-text p:last-child{margin-bottom:0;} .bio-cta{ font-style:italic; font-weight:500; opacity:.9; } @media (max-width:820px){ .bio{flex-direction:column;align-items:stretch;gap:32px;} .bio-media{flex:none;width:100%;max-width:320px;margin:0 auto;} } /* ---------- contacto ---------- */ .contacto{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; } .contacto .sec-title{margin-bottom:24px;} .rail{ position:fixed; right:18px; top:6vh; height:88vh; width:2px; background:linear-gradient(to bottom, var(--dawn-gold) 0%, var(--dusk-ember) 22%, var(--twilight-violet) 45%, var(--night-void) 68%, var(--night-void) 100%); z-index:60; opacity:0.55; } .rail-dot{ position:absolute; left:50%; top:0%; width:14px;height:14px; border-radius:50%; transform:translate(-50%,-50%); background:var(--dawn-gold); box-shadow:0 0 14px 4px var(--dawn-gold); transition:background .4s ease, box-shadow .4s ease; } .rail-label{ position:absolute; right:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--ink); opacity:.45; writing-mode:vertical-rl; white-space:nowrap; } @media (max-width:820px){ .rail{display:none;} } /* ---------- nav ---------- */ header{ position:fixed;top:0;left:0;right:0; display:flex;justify-content:space-between;align-items:center; padding:22px 32px; z-index:50; mix-blend-mode:difference; } .brand{ font-family:var(--font-display); font-size:20px; letter-spacing:.04em; color:white; } nav a{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:white; text-decoration:none; margin-left:24px; opacity:1; display:inline-block; transition:opacity .2s ease, transform 160ms var(--ease-out-strong); } nav a:hover{opacity:.5;} nav a:active{transform:scale(.94);} nav{display:flex;align-items:center;} @media (max-width:640px){ nav a{margin-left:14px;} } /* ---------- language switch: EN/ES toggle living inside header's nav, so it inherits the same color:white + header's mix-blend-mode:difference trick nav links use for automatic contrast against any background ---------- */ .lang-switch{ display:flex; align-items:center; gap:8px; margin-left:24px; padding-left:24px; border-left:1px solid rgba(255,255,255,.3); } .lang-switch button{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:white; background:none; border:none; padding:0; cursor:pointer; opacity:.4; transition:opacity .2s ease, transform 160ms var(--ease-out-strong); } .lang-switch button.active{opacity:1;} .lang-switch button:hover{opacity:.75;} .lang-switch button:active{transform:scale(.9);} @media (max-width:640px){ .lang-switch{margin-left:14px;padding-left:14px;} } section{ position:relative; padding:120px 8vw 100px; overflow:hidden; } /* ---------- hero / masthead: full-bleed monochrome photo, swapped live by hovering "Nightlife" / "Tattoo & Piercing" in the top nav. No copy at all except the giant "by juanpi" signature bottom-right. ---------- */ .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-bottom:64px; color:var(--paper); /* solid, dark neutral backdrop — the lava layer is gone from this page, so this is what the 65%-opacity hero photo blends against instead */ background:#141210; } .hero-bg{ position:absolute; inset:0; z-index:2; overflow:hidden; background:var(--dawn-gold-dim); /* the whole photo+scrim+grain stack fades to transparent toward the edges, "dissolving" into the lava field behind it instead of sitting in a hard rectangle */ -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 42%, #000 56%, transparent 100%); mask-image:radial-gradient(ellipse 78% 78% at 50% 42%, #000 56%, transparent 100%); /* full-bleed (100% of the viewport), but held at 65% opacity as a whole — grunge treatment included — so the moving lava gradient blends through the photo itself rather than sitting only around its edges. This lives on the wrapper (not the ), so it stays fixed through every later hover-triggered image swap. */ opacity:.65; will-change:opacity; } .hero-bg img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; display:block; /* dissolving-grunge / photocopy treatment: pushed hard toward pure black-and-white so midtones collapse into a graphic, almost-binary print rather than a normal photograph */ filter:grayscale(1) contrast(2.2) brightness(1.1); transition:opacity .35s var(--ease-out-strong), filter .45s ease-out; will-change:opacity, filter; } /* light-flash swap: brightness spikes to near-white (masking the 's src change), then eases back down to the normal grunge exposure once the new photo is in — see swapHeroImage() in index.html. */ .hero-bg img.flash-out{ filter:grayscale(1) contrast(1.1) brightness(7); /* ease-out, not ease-in: an outgoing/exiting state should still start moving immediately, not delay the moment being watched */ transition:filter .22s var(--ease-out-strong); } .hero-bg img.flash-in{ filter:grayscale(1) contrast(1.1) brightness(7); transition:none; } .hero-scrim{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(10,9,7,.1) 0%, rgba(10,9,7,.3) 58%, rgba(10,9,7,.66) 100%); } .hero-halftone{ position:absolute;inset:0; background-image:radial-gradient(circle, rgba(10,9,7,.95) 34%, transparent 36%); background-size:5px 5px; opacity:.24; mix-blend-mode:multiply; pointer-events:none; } .hero-grain{ position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:110px 110px; opacity:.45; mix-blend-mode:hard-light; pointer-events:none; } .hero-signature{ position:relative; z-index:2; align-self:flex-end; text-align:right; color:var(--paper); } .hero-signature-img{ /* the real signature graphic (traspaso/logos/firma.png — a transparent-background brush/ink mark) replaces the typed "by juanpi". "screen" blend mode drops its dark tones out entirely — letting the photo/lava behind show straight through — while the saturated red ink lightens into a translucent wash on top; no isolation on any ancestor, so it blends against the whole stack: lava particles (z-index:1) behind the photo (z-index:2) behind this. */ display:block; width:min(50vw, 460px); height:auto; margin-left:auto; mix-blend-mode:screen; will-change:transform; } .hero-sublinks{ display:flex; justify-content:flex-end; align-items:baseline; gap:28px; /* firma.png carries its own generous transparent margin, so a small (even negative) gap here is what actually reads as "just below" the ink instead of visually floating away from it */ margin-top:-6px; padding-right:2px; font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; } .hero-sublink{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(244,243,239,.5); padding-bottom:3px; opacity:.9; cursor:pointer; display:inline-block; transition:opacity .2s ease, border-color .2s ease, transform 160ms var(--ease-out-strong); } .hero-sublink:hover{opacity:.6;border-color:var(--paper);} .hero-sublink:active{transform:scale(.94);} @media (max-width:640px){ .hero{padding-bottom:40px;} .hero-sublinks{justify-content:flex-start;} .hero-signature{align-self:flex-start;text-align:left;} } /* ---------- section header pattern ---------- */ .sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; } .timestamp{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; color:var(--ink); opacity:.9; } .sec-title{ font-family:var(--font-section); font-weight:400; /* BD Plakatbau reads as designed in caps — its poster-stencil character is built for that, not for mixed case */ text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(40px,7vw,88px); line-height:.9; } .sec-caption{ max-width:340px; font-size:15px; font-style:italic; font-weight:300; line-height:1.5; opacity:.85; } /* ---------- text reveal (tattoo.html / nightlife.html / contacto.html): same paused-then-running pattern as the gallery cascade further down — an IntersectionObserver in each page's