/* ══════════════════════════════════════════════════════════════════════ TheTryck Sound · BOQUETES METALIZADOS ---------------------------------------------------------------------- El fondo NO es un degradado de arriba abajo. Son manchas de metal azulado repartidas por la pagina — boquetes de luz que se van encontrando al bajar — mas unas vetas diagonales de metal pulido. Como funciona: una capa absoluta colgada del . Al ser absoluta mide lo que mide el documento entero, asi que los porcentajes verticales reparten los boquetes por TODO el scroll y no por la pantalla. El tamano de cada mancha va en vw/vh: cada boquete ocupa mas o menos una pantalla, se vea donde se vea. SOBRE LAS RAYAS — que es de lo que va medio fichero: en tonos tan oscuros, ocho bits por canal no dan para pasar de un color al siguiente sin escalones, y ademas cualquier transicion corta se lee como una raya. Por eso aqui: · cada mancha se apaga con SEIS paradas en vez de dos, y muere en transparente muy lejos del centro. Nada de bordes mas claros: era justo eso lo que dibujaba el cerco; · las vetas ocupan un cuarto de la diagonal en vez de un 5%; · y por encima va una capa de grano finisimo que rompe las bandas que aun asi queden (el truco de siempre: dither). Para que se vea, las secciones de encima tienen que ser translucidas. Con se apaga el fondo de pagina entera y el metal se pone solo donde se quiera, con .zona-metal. ══════════════════════════════════════════════════════════════════════ */ body{position:relative;isolation:isolate} /* ── los boquetes y las vetas ─────────────────────────────────────────── */ body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: /* — vetas de metal pulido: anchas y sin filo — */ linear-gradient(112deg, transparent 0%, rgba(220,232,247,.016) 6%, rgba(220,232,247,.050) 12%, rgba(220,232,247,.016) 19%, transparent 26%), linear-gradient(112deg, transparent 24%, rgba(207,224,242,.012) 30%, rgba(207,224,242,.038) 36%, rgba(207,224,242,.012) 43%, transparent 50%), linear-gradient(68deg, transparent 44%, rgba(127,212,232,.013) 50%, rgba(127,212,232,.042) 56%, rgba(127,212,232,.013) 62%, transparent 69%), linear-gradient(112deg, transparent 64%, rgba(220,232,247,.014) 70%, rgba(220,232,247,.046) 76%, rgba(220,232,247,.014) 82%, transparent 89%), linear-gradient(68deg, transparent 82%, rgba(168,194,221,.013) 87%, rgba(168,194,221,.042) 92%, rgba(168,194,221,.013) 96%, transparent 100%), /* — arriba a la derecha · acero — */ radial-gradient(52vw 38vh at 84% 3%, rgba(79,106,140,.58) 0%, rgba(79,106,140,.44) 16%, rgba(79,106,140,.30) 32%, rgba(86,114,150,.175) 48%, rgba(96,126,163,.085) 64%, rgba(110,142,180,.032) 80%, transparent 94%), /* — izquierda alta · turquesa — */ radial-gradient(42vw 30vh at 5% 14%, rgba(53,196,192,.30) 0%, rgba(53,196,192,.22) 18%, rgba(53,196,192,.14) 35%, rgba(70,190,205,.075) 52%, rgba(90,190,215,.03) 70%, transparent 90%), /* — centro · plata — */ radial-gradient(56vw 34vh at 52% 27%, rgba(207,224,242,.17) 0%, rgba(190,212,236,.12) 18%, rgba(170,198,228,.072) 36%, rgba(150,182,216,.038) 54%, rgba(140,172,208,.014) 72%, transparent 90%), /* — derecha media · celeste — */ radial-gradient(46vw 32vh at 97% 39%, rgba(127,212,232,.33) 0%, rgba(120,200,226,.24) 17%, rgba(110,180,214,.155) 34%, rgba(100,155,196,.085) 51%, rgba(93,133,175,.035) 69%, transparent 88%), /* — izquierda media · acero profundo — */ radial-gradient(52vw 36vh at 0% 52%, rgba(79,106,140,.50) 0%, rgba(79,106,140,.38) 17%, rgba(79,106,140,.26) 34%, rgba(86,114,150,.15) 51%, rgba(96,126,163,.07) 68%, rgba(110,142,180,.026) 84%, transparent 96%), /* — centro bajo · turquesa — */ radial-gradient(44vw 30vh at 62% 65%, rgba(53,196,192,.27) 0%, rgba(53,196,192,.195) 18%, rgba(53,196,192,.125) 35%, rgba(70,190,205,.068) 52%, rgba(90,190,215,.027) 70%, transparent 90%), /* — izquierda baja · plata — */ radial-gradient(48vw 32vh at 12% 78%, rgba(168,194,221,.25) 0%, rgba(158,186,216,.185) 18%, rgba(146,176,210,.118) 35%, rgba(130,160,196,.062) 52%, rgba(118,146,182,.025) 70%, transparent 90%), /* — cierre · acero a la derecha — Mas flojo y mas ancho que los demas: cerraba demasiado fuerte y se le notaba el contorno por encima del catalogo. */ radial-gradient(62vw 44vh at 92% 93%, rgba(93,122,158,.26) 0%, rgba(91,119,155,.20) 17%, rgba(88,115,150,.135) 34%, rgba(90,118,154,.078) 51%, rgba(98,128,166,.035) 68%, rgba(112,144,182,.012) 84%, transparent 97%); } /* Paginas que ponen el metal por zonas y no de fondo general */ body.metal-zonas::before{content:none} /* ── el grano que rompe las bandas ───────────────────────────────────── Va fijo y por encima de todo, pero sin tocar nada (pointer-events none). Es lo unico que impide que en los casi-negros se dibujen los escalones de color: ningun degradado, por muchas paradas que lleve, lo evita del todo. Al 3,5% no se ve como textura, solo alisa. */ body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none; opacity:.035; background-repeat:repeat;background-size:200px 200px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E")}