:root { --azul: #113D9E; --azul-sup: #1C4AAE; } /* v18.108: azul elegido 8 nov (antes #1F30B5 / #283BC6) */ /* Homepage nueva (28 oct). Sale del research del feeling: mate, lento, fisico, un evento por pantalla. Reglas: RA en 3 tallas (XL/L/M), Barlow 500 a 17 y 14, crema/tinta, outremer mas presente, verde ingles con medida. Color = funcion y todo pasa contraste AA: naranja = firma y accion (letra tinta honda 5.5), verde = disponible / lo-fi, amarillo = resalta una cifra (tinta 8.4), Klein = segundo color (pared de Tools y fondo del oscuro). Oscuro (.noche, "Prime time"): Klein profundo var(--azul) (crema encima 8.0, amarillo 6.0, verde ingles 6.3). */ @font-face { font-family: "RA"; src: url("f/RA-kern-C.woff2") format("woff2"); font-display: swap; } /* v18.72: RA con aire emparejado + pares (kerning C) */ @font-face { font-family: "Barlow"; font-weight: 500; src: url("f/Barlow-500-latin.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Red Hat Display"; font-weight: 900; font-style: italic; src: url("f/RedHatDisplay-900-italic-latin.woff2") format("woff2"); font-display: swap; } :root { --page: #f5f5f3; --ink: #2f2e2c; --ink-hondo: #1d1c1b; --hueso: #E8E6E1; --sup: #e8e6df; --linea: rgba(47, 46, 44, .16); --outremer: #0E2D58; --sobre-outremer: #ECE8E0; --ingles: #C6D4BD; --firma: #FF5C00; --firma-sombra: #b84200; --verde: #12B76A; --amarillo: #FFC21A; --tecla: var(--ink); --tecla-txt: var(--hueso); --tecla-sombra: var(--ink-hondo); --xl: clamp(56px, 11svh, 116px); --l: clamp(44px, 7.6svh, 80px); --m: clamp(26px, 4.2svh, 38px); --pad: clamp(20px, 4vw, 64px); --lento: cubic-bezier(.22, .68, .12, 1); --hdr-h: 72px; } .noche { --page: var(--azul); --ink: #ECE8E0; --hueso: var(--azul); --sup: var(--azul-sup); --linea: rgba(236, 232, 224, .2); --outremer: #1C1B19; --tecla: #ECE8E0; --tecla-txt: var(--azul); --tecla-sombra: #b9b4aa; } * { box-sizing: border-box; } html.lenis, html.lenis body { height: auto; } body { margin: 0; background: var(--page); color: var(--ink); font: 500 17px/1.55 "Barlow", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3, p, ol, ul, dl, dd, blockquote, figure { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } .t-xl, .t-l, .t-m { font-family: "RA", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .25px; line-height: 1; text-wrap: balance; } /* v18.74: aire 2½ (antes -.5px), ver KERNING-RA.md */ .t-xl { font-size: var(--xl); } .t-l { font-size: var(--l); } .t-m { font-size: var(--m); } .etq { font-size: 14px; line-height: 1.3; } .txt { max-width: 42ch; } .punto { color: #F25500; } /* naranja apenas mas hondo para pasar 3:1 sobre crema; en el oscuro, el de siempre */ .noche .punto { color: var(--firma); } .fila { display: flex; gap: 14px; flex-wrap: wrap; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: fixed; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--page); padding: 10px 14px; } .skip:focus { top: 12px; } :focus-visible { outline: 2px solid var(--firma); outline-offset: 3px; } .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; } .lnk { width: fit-content; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: 14px; } /* ---------- teclas ---------- */ .tecla { display: inline-grid; border: 0; padding: 0; cursor: pointer; font: 500 14px/1 "Barlow", sans-serif; text-align: left; border-radius: 6px; background: var(--tecla); color: var(--tecla-txt); box-shadow: 0 4px 0 var(--tecla-sombra); letter-spacing: .04em; overflow: hidden; transition: transform .12s, box-shadow .12s; white-space: nowrap; } .tecla > span { padding: 14px 18px; } .tecla small { padding: 9px 18px; background: var(--sup); color: var(--ink); font-size: 14px; letter-spacing: 0; } .tecla:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--tecla-sombra); } .tecla:active, .tecla.aprieta { transform: translateY(4px); box-shadow: 0 0 0 var(--tecla-sombra); } /* la accion principal: naranja con letra tinta honda (5.5 : 1) */ .cta > span, .principal > span { background: var(--firma); color: var(--ink-hondo); } .cta, .principal { --tecla-sombra: var(--firma-sombra); } /* ---------- menu A ---------- */ .hdr { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--hdr-h); display: flex; align-items: center; gap: 26px; padding: 0 var(--pad); background: var(--hdr-bg, var(--page)); color: var(--hdr-ink, var(--ink)); transition: background .9s var(--lento), color .9s var(--lento); } .logo { font: italic 900 19px/1 "Red Hat Display", sans-serif; margin-right: auto; } .nav { display: flex; align-items: center; gap: 24px; } .nl { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; } .nl .ic { transition: transform .5s var(--lento); } .nl:hover .ic { transform: translateY(-3px); } .perilla { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--tecla); display: grid; place-content: center; gap: 4px; cursor: pointer; box-shadow: inset 0 -3px 0 var(--tecla-sombra); transition: transform .9s var(--lento); flex: none; } .perilla i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tecla-txt); } .perilla[aria-expanded="true"] { transform: rotate(90deg); } .guia { position: fixed; z-index: 29; left: 0; right: 0; top: var(--hdr-h); background: var(--sup); overflow: hidden; height: 0; transition: height 1.2s var(--lento); } #pagina { transition: transform 1.2s var(--lento); } .guia-in { padding: 24px var(--pad) 26px; display: grid; gap: 20px; } .canales { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 40px; } .canales a { display: grid; grid-template-columns: 3ch auto 1fr; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--linea); } .canales b { font: 500 14px/1 "Barlow", sans-serif; opacity: .8; font-variant-numeric: tabular-nums; } .canales .t-m { font-size: var(--m); transition: transform .6s var(--lento); } .canales a:hover .t-m { transform: translateX(6px); } .guia-pie { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* ---------- la esfera real y su boton ---------- */ .esf { position: fixed; z-index: 1; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; transition: transform 1.6s var(--lento), width 1.6s var(--lento), height 1.6s var(--lento); } .esf-lienzo, .esf-lienzo canvas { width: 100% !important; height: 100% !important; display: block; } .esf-boton { position: fixed; z-index: 21; right: calc(var(--pad) - 8px); bottom: 26px; width: 64px; height: 64px; border-radius: 50%; opacity: 0; pointer-events: none; } .esf-boton span { position: absolute; right: 0; bottom: calc(100% + 8px); white-space: nowrap; font-size: 14px; background: var(--page); color: var(--ink); padding: 6px 9px; border-radius: 6px; box-shadow: 0 0 0 1px var(--linea); opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s var(--lento); } .esf-boton.on { pointer-events: auto; } .esf-boton.on:hover span, .esf-boton.on:focus-visible span { opacity: 1; transform: none; } .esf.sube { translate: 0 -4px; } /* ---------- escenas ---------- */ main { padding-top: var(--hdr-h); } .esc { position: relative; z-index: 2; padding: 16svh var(--pad); } .hero { min-height: calc(100svh - var(--hdr-h)); display: flex; align-items: center; padding-top: 6svh; padding-bottom: 6svh; } .hero-in { display: grid; gap: 20px; } .just { min-height: 70svh; display: grid; align-content: center; gap: 5svh; } .just-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--linea); padding-top: 22px; } .just-datos dt { opacity: .8; margin-bottom: 4px; } .led-lnk { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; } .led { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(18, 183, 106, .18); } .wid { padding-left: calc(var(--pad) + var(--xl) * 1.4); min-height: 120svh; display: grid; align-content: center; } .lateral { position: absolute; left: calc(var(--pad) - .14em); top: 0; bottom: 0; width: calc(var(--xl) * 1.05); clip-path: inset(0 -.3em); font: 400 var(--xl)/1 "RA", sans-serif; } /* corta arriba y abajo (donde corre el texto) pero deja respirar la tinta de las letras: con overflow hidden se mochaban 2 px */ .lat-rollo { position: absolute; left: 0; top: 50%; white-space: nowrap; transform-origin: 0 0; transform: rotate(-90deg) translateX(var(--x, 0)); } /* home.js pone --x: corren solas y el scroll las empuja */ .bloque { background: var(--ingles); color: #2f2e2c; border-radius: 14px; padding: 7svh 4vw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .bloque article { display: grid; gap: 12px; align-content: start; } .bloque img { width: 88px; height: 88px; object-fit: contain; } .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .tags li { font-size: 14px; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(47, 46, 44, .25); } /* cortinilla y clientes sobre outremer */ .corte { position: relative; z-index: 2; height: 220svh; } .fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; } .corte-b { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: var(--outremer); color: var(--sobre-outremer); clip-path: inset(0 0 0 calc(var(--cb, 1) * 100%)); } .cli { position: relative; z-index: 2; height: 330svh; background: var(--outremer); color: var(--sobre-outremer); } .cli-in { position: absolute; inset: var(--hdr-h) var(--pad) 0; display: grid; align-content: center; justify-items: center; gap: 16px; } /* la tele se ajusta al alto: en una laptop chaparrita (ej. 1280 x 585 con Windows al 150 %) no cabia y el titulo y la cifra quedaban pegados a las orillas */ .cli-in { --tele: min(600px, 100%, calc((100svh - var(--hdr-h) - 230px) * 1.6)); } .cli-cab, .cli-pie { width: var(--tele); } .cli-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; } /* v18.98: si el titulo no cabe (MIS PROYECTOS en cel), las rayitas y el contador bajan a otro renglon en vez de salirse */ .cli-cab .etq { opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; } .cli-marco { width: var(--tele); aspect-ratio: 16 / 10; padding: 14px; background: #f5f5f3; border-radius: 14px; } .cli-marco img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 6px; filter: saturate(.85); transition: filter 1.2s var(--lento), opacity .5s; } .viva .cli-marco img { filter: none; } .cli-pie { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: end; } .cli-pie .etq { opacity: .8; margin-top: 6px; } .cli-cifra { grid-column: 1 / -1; font-size: 17px; } .cli-cifra mark { background: var(--amarillo); color: #2f2e2c; padding: 0 6px 2px; border-radius: 6px; } /* v18.98: centrado optico (Barlow deja 5 px arriba de mayusculas/numeros y 3 abajo; antes 6/4, se veia bajo) */ .cli-pie .lnk { grid-row: 1; grid-column: 2; } /* la resena: cita grande; el nombre llega como letrero y la empuja */ .res { position: relative; z-index: 2; height: 175svh; } .res-in { position: absolute; inset: var(--hdr-h) var(--pad) 0; display: grid; align-content: center; justify-items: center; text-align: center; gap: 22px; } .res-q { max-width: 24ch; transition: transform 1.5s var(--lento); transform: translateY(calc(var(--qy, 0px) + (.5 - var(--pr, .5)) * 60px)); } .res-in.con-tercio .res-q { --qy: -40px; } .tercio { height: 0; position: relative; width: 100%; display: flex; justify-content: center; } .tercio-panel { position: absolute; top: 0; display: inline-flex; align-items: baseline; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 16px 22px 14px; background: var(--tecla); color: var(--tecla-txt); border-radius: 6px; transform: translateY(60svh); transition: transform 1.5s var(--lento); } .tercio-panel .t-m { font-size: var(--m); } .res-in.con-tercio .tercio-panel { transform: translateY(-10px); } .stack { display: grid; gap: 7svh; padding-left: 0; padding-right: 0; } .stack h2 { padding: 0 var(--pad); } .banda { overflow: hidden; border-block: 1px solid var(--linea); padding: 14px 0; } .banda-rollo { white-space: nowrap; font: 400 var(--xl)/1 "RA", sans-serif; letter-spacing: .75px; /* v18.74 */ transform: translateX(var(--x, 0)); } .filo { min-height: 120svh; display: grid; align-content: center; gap: 6svh; background: var(--outremer); color: var(--sobre-outremer); } .filo h2 { max-width: 18ch; } .filo-txt { display: grid; gap: 14px; max-width: 60ch; } .about { padding-left: calc(var(--pad) + var(--xl) * 1.4); min-height: 110svh; display: grid; align-content: center; } .about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; } .about-foto { width: 100%; height: auto; max-width: 460px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; } .about-txt { display: grid; gap: 16px; max-width: 46ch; } /* contacto: cada campo llega como letrero y empuja a los de antes */ .con { position: relative; z-index: 2; height: 300svh; } .con-in { position: absolute; inset: var(--hdr-h) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5vw; align-items: end; padding-bottom: 8svh; } .con-cab { display: grid; gap: 16px; align-self: center; } .con-pila { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; } .barra { display: grid; gap: 6px; padding: 0 20px; border: 0; margin: 0; background: var(--tecla); color: var(--tecla-txt); border-radius: 6px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(40px); transition: max-height 1.4s var(--lento), padding 1.4s var(--lento), transform 1.4s var(--lento), opacity .8s; } .barra.on { max-height: 160px; padding: 14px 20px; opacity: 1; transform: none; } .barra legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; } .barra input:not([type=checkbox]) { background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--tecla-txt) 40%, transparent); color: inherit; font: 500 17px/1.4 "Barlow", sans-serif; padding: 4px 0; outline: none; } .barra input::placeholder { color: color-mix(in srgb, var(--tecla-txt) 72%, transparent); } .noche .barra input::placeholder { color: color-mix(in srgb, var(--tecla-txt) 86%, transparent); } /* en el oscuro el 72 % daba 4.3; con 86 % pasa */ .chips { display: flex; flex-wrap: wrap; gap: 6px; clear: both; } .chips input { position: absolute; opacity: 0; } .chips span { display: inline-block; font-size: 14px; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tecla-txt) 45%, transparent); cursor: pointer; transition: background .3s; } .chips input:checked + span { background: var(--tecla-txt); color: var(--tecla); } .chips input:focus-visible + span { outline: 2px solid var(--firma); } .con-pila .tecla { opacity: 0; transition: opacity .8s, transform .12s, box-shadow .12s; width: fit-content; } .con-pila .tecla.on { opacity: 1; } .con-ok:empty { display: none; } .thanks { min-height: 100svh; display: grid; align-content: center; gap: 14px; } .pie { position: relative; z-index: 2; padding: 12svh var(--pad) 6svh; display: grid; gap: 7svh; border-top: 1px solid var(--linea); background: var(--page); } .pie-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .pie-col { display: grid; gap: 8px; align-content: start; } .pie-col img { width: 76px; height: 76px; object-fit: contain; margin-bottom: 6px; transition: transform .8s var(--lento); } .pie-col:hover img { transform: translateY(-6px) rotate(-4deg); } .pie-col a { width: fit-content; border-bottom: 1px solid transparent; transition: border-color .4s; } .pie-col a:hover { border-color: currentColor; } .pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px; padding-top: 22px; border-top: 1px solid var(--linea); } .pie-mail { font-size: var(--l); overflow-wrap: break-word; } .pie-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; } .switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 0; color: inherit; font: inherit; } .sw-pista { width: 44px; height: 24px; border-radius: 999px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea); position: relative; transition: background .6s; } .sw-bola { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .7s var(--lento); } .switch[aria-pressed="true"] .sw-pista { background: var(--verde); } .switch[aria-pressed="true"] .sw-bola { transform: translateX(20px); background: #fff; } @media (max-width: 760px) { /* en cel, las tallas exactas de las reglas (antes salian del alto de la pantalla y en un cel alto se desbordaban) */ :root { --xl: 56px; --l: 44px; --m: 26px; } .nl span { display: none; } .nav { gap: 16px; } .hdr { gap: 16px; } .res-q { max-width: 20ch; } .canales { grid-template-columns: 1fr; } .just-datos { grid-template-columns: 1fr 1fr; } .wid, .about { padding-left: calc(var(--pad) + var(--xl) * 1.05); } .bloque { grid-template-columns: 1fr; padding: 28px 22px; } .about-in { grid-template-columns: 1fr; } .con { height: 360svh; } .con-in { grid-template-columns: 1fr; align-content: end; gap: 22px; } .con-cab .txt { display: none; } .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ================= h2 (28 oct): arreglos de la entrega 1 y pruebas ================= */ /* la esfera ya no es semitransparente: un disco blanco solido detras del dibujo (el motor la dibuja al 96 % del lienzo) */ .esf::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background: #fff; } .esf-lienzo { position: relative; } /* "UP NEXT" antes de la cortinilla; la esfera lo cambia por SELECTED WORK */ .corte-a { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } /* el switch de oscuro: un circulo mitad crema, mitad outremer que gira */ .modo { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } .modo-ic { transition: transform .9s var(--lento); } .modo-ic .modo-mitad { fill: currentColor; stroke: none; } .modo[aria-pressed="true"] .modo-ic { transform: rotate(180deg); } /* pildora con icono (WhatsApp, LinkedIn) */ .pld { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 14px 9px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); transition: transform .5s var(--lento); } .pld:hover { transform: translateY(-2px); } .pld .ic { width: 18px; height: 18px; } /* logos reales de WhatsApp y LinkedIn, en los colores del sitio: en tinta (o crema en el oscuro) */ .red-ic { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; } .red-ic svg { width: 100%; height: 100%; fill: currentColor; } .pie-red { display: inline-flex; align-items: center; gap: 6px; } .pie-red .red-ic { width: 15px; height: 15px; } /* el envio, sin tecla doble */ .envia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; opacity: 0; transition: opacity .8s; } .envia.on { opacity: 1; } .con-pila .envia .tecla { opacity: 1; } /* la resena junto a su marquesina lateral (elegida en h2) */ .res-lat { display: block; z-index: 1; } .res-in { left: calc(var(--pad) + var(--xl) * 1.5); justify-items: start; text-align: left; } .res .tercio { justify-content: flex-start; } #res-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* la marquesina ya dice KIND WORDS */ /* dos paredes brillantes, cada una en su pantalla: Tools en Klein (blanco 7.25) y Contact en amarillo (tinta 8.4) */ .stack { background: #2338F0; color: #fff; } .stack .banda { border-color: rgba(255, 255, 255, .3); } .con { background: #FFC21A; color: #2f2e2c; --tecla-sombra: #1d1c1b; } .con .principal > span { background: #2f2e2c; color: #f5f5f3; } /* en el oscuro Klein: Tools se invierte a crema (si no, seria azul sobre azul) y Philosophy, casi negra, lleva una linea arriba y abajo */ .noche .stack { background: #ECE8E0; color: #2f2e2c; } .noche .stack .banda { border-color: rgba(47, 46, 44, .2); } .noche .filo { box-shadow: inset 0 1px 0 rgba(236, 232, 224, .22), inset 0 -1px 0 rgba(236, 232, 224, .22); } @media (max-width: 760px) { /* en cel cada canal en dos renglones: el nombre arriba y la frase abajo */ .canales a { grid-template-columns: 3ch 1fr; row-gap: 2px; padding: 10px 0; } .canales .etq { grid-column: 2; } .pie-mail { font-size: var(--m); } .nav { gap: 14px; } .res-in { left: calc(var(--pad) + var(--xl) * 1.15); } } /* ================= h5 (29 oct): lo elegido en la h4 ================= */ /* What I do en azul Klein con texto blanco (7.25); en el oscuro se invierte a crema, como Tools */ .bloque { background: #2338F0; color: #fff; } .bloque .tags li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } .noche .bloque { background: #ECE8E0; color: #2f2e2c; } .noche .bloque .tags li { box-shadow: inset 0 0 0 1px rgba(47, 46, 44, .25); } /* el "cuarto apagado" del oscuro (Selected work, Philosophy, cortinilla): Klein hondo, crema encima 11.4 */ .noche { --outremer: #18236E; } /* ================= h7 (29 oct) ================= */ /* titulos de seccion en L (elegido en la h6); el nombre se parte en dos lineas y el acento de ADRIAN pide aire */ /* v18.110: sin el 1.14 de tu nombre; lo cubre la regla de acentos */ /* idioma: siempre visible en la barra, EN | ES como un interruptor de dos posiciones */ .idioma { display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font: 500 14px/1 "Barlow", sans-serif; letter-spacing: .04em; flex: none; } .idioma a { padding: 8px 11px; border-radius: 999px; } .idioma a[aria-current] { background: currentColor; } .idioma a[aria-current] span { color: var(--hdr-bg, var(--page)); } .guia-pie .idioma { font-size: 14px; } .guia-pie .idioma a { padding: 11px 16px; } /* el globo va pegado al interruptor de idioma; en cel queda solo el globo con "ES" (About sale de la barra del cel: sigue en el menu) */ .lang { display: inline-flex; align-items: center; gap: 8px; flex: none; } .lang-cel { display: none; align-items: center; gap: 5px; font: 500 14px/1 "Barlow", sans-serif; letter-spacing: .04em; } .lang-cel b { font-weight: 500; } /* el boton de oscuro no se mueve: guarda el ancho de su etiqueta mas larga */ .modo #modo-txt { display: inline-grid; text-align: left; } .modo #modo-txt::after { content: "Prime time"; grid-area: 1 / 1; visibility: hidden; } .modo #modo-txt > span { grid-area: 1 / 1; } /* lo-fi: mientras baja la pista */ .switch.cargando .etq::after { content: " · tuning in"; opacity: .8; } /* menu en cel sin las frases de cada canal (elegido 29 oct): asi cabe completo en una pantalla */ @media (max-width: 760px) { .canales .etq { display: none; } .canales a { padding: 7px 0; } } /* en cel la barra ya no tiene lugar (logo, 3 iconos y la perilla): el idioma va hasta arriba del menu, grande */ .idioma-cel { display: none; } @media (max-width: 760px) { .modo #modo-txt { display: none; } .hdr .lang, .guia-pie .idioma, .nl-about { display: none; } .lang-cel { display: inline-flex; } .idioma-cel { display: inline-flex; justify-self: start; } .logo { white-space: nowrap; } } /* pantallas chaparritas en compu (laptop con Windows al 150 %: 585 px de alto): el formulario completo no cabia y se metia bajo la barra */ @media (min-width: 761px) and (max-height: 680px) { .con-in { padding-bottom: 4svh; } .con-pila { gap: 8px; } .barra.on { padding: 10px 18px; } .barra legend { margin-bottom: 6px; } } /* Just me pasa por DETRAS de la esfera grande (pedido 29 oct): la esfera tapa los datos que le quedan debajo */ @media (min-width: 761px) { .just { z-index: 0; } } /* solo en compu: en cel la esfera queda abajo y tapaba el titulo */ /* menos estilos (regla 29 oct): un solo "tenue", 80 %, para numeros del menu, etiquetas y datos del cliente */ /* el LO-FI tambien vive en el menu (elegido 29 oct: en compu y en cel); en cel toma el lugar de la hora, que sigue en el footer */ @media (max-width: 760px) { .guia-hora { display: none; } } /* ================= v18.1 (29 oct): pruebas ================= */ /* el velo que atenua la pagina cuando el menu esta abierto */ #pagina::after { content: ""; position: fixed; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--lento); z-index: 50; } /* la esfera vive fuera de la pagina: se apaga igual, si no se queda brillante encima de lo atenuado */ .esf { transition: transform 1.6s var(--lento), width 1.6s var(--lento), height 1.6s var(--lento), filter 1.2s var(--lento); } .menu-abierto #pagina { cursor: pointer; } /* ================= v18.2 (29 oct) ================= */ /* cel: la foto de About vuelve a como estaba en v18.0 (alta, vertical); el arreglo de height:auto es solo para compu */ @media (max-width: 760px) { .about-foto { height: 887px; } } /* compu: la foto en tele (elegido 29 oct), con la foto completa: marco crema como las teles de Selected work */ @media (min-width: 761px) { .about-foto { aspect-ratio: 1; width: min(420px, 58svh); max-width: none; padding: 12px; background: #f5f5f3; border-radius: 14px; justify-self: end; } .noche .about-foto { background: #ECE8E0; } } /* el menu abierto atenua la pagina (elegido 29 oct); ?tinte=outremer|klein prueba atenuar con color */ #pagina::after { background: var(--tinte, var(--ink)); } .menu-abierto #pagina::after { opacity: var(--tinte-op, .28); } .menu-abierto .esf { filter: brightness(.72); } .t-outremer { --tinte: #0E2D58; --tinte-op: .42; } .t-klein { --tinte: #2338F0; --tinte-op: .32; } .noche.t-klein { --tinte: #0E2D58; --tinte-op: .42; } /* Klein sobre Klein no se notaria */ /* la resena: mas aire entre renglones (estaba muy apretada) */ .res-q { line-height: 1.14; } /* cel: la cortinilla UP NEXT -> SELECTED WORK dejaba una franja sin pintar abajo cuando se esconde la barra del navegador */ .corte .fijo { height: 100lvh; } /* ?barra=rapida · el cambio de color de la barra en un tercio de segundo (hoy .9 s) */ .b-rapida .hdr { transition: background .35s var(--lento), color .35s var(--lento); } /* capsulas en renglones, como el menu (elegido 29 oct): What I do y las opciones del formulario */ html .tags { display: grid; gap: 0; } html .tags li { box-shadow: none !important; padding: 7px 0; border-radius: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); } html .tags li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); } html .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } html .chips span { display: flex; justify-content: space-between; box-shadow: none; border-radius: 0; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--tecla-txt) 25%, transparent); } html .chips span::after { content: "+"; opacity: .8; } html .chips input:checked + span { background: none; color: inherit; } html .chips input:checked + span::after { content: "✓"; opacity: 1; } /* ?form=pasos · el formulario por pasos: una tarjeta a la vez, las anteriores quedan como renglon resumen */ .pasos-cab, .pasos-nav { display: none; } .f-pasos .pasos-cab { display: block; font-variant-numeric: tabular-nums; } .f-pasos .con-in { align-items: center; padding-bottom: 0; } .f-pasos .con-pila { justify-content: flex-start; } .f-pasos .pasos-nav { display: flex; align-items: center; gap: 14px; } .f-pasos .pasos-nav .tecla { opacity: 1; } @media (hover: none) { .f-pasos .pasos-nav .etq { display: none; } } /* en cel no hay Enter a la vista */ .f-pasos .pasos-nav.fin { display: none; } .f-pasos .barra { max-height: 0; opacity: 0; padding: 0 20px; transform: translateY(40px); } .f-pasos .barra.actual { max-height: 170px; padding: 14px 20px; opacity: 1; transform: none; } .f-pasos .barra.hecha { max-height: 44px; padding: 10px 20px; opacity: 1; transform: none; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; } .f-pasos .barra.hecha input, .f-pasos .barra.hecha .chips { display: none; } .f-pasos .barra.hecha .etq::after, .f-pasos .barra.hecha legend::after { content: " · " attr(data-resumen); font-weight: 500; } .f-pasos .envia { display: none; } .f-pasos .envia.fin { display: flex; opacity: 1; } /* ?aro=1|2|3 · un mensajito que de vez en cuando gira alrededor de la esfera chica (Barlow 14 en mayusculas, la misma talla de los botones) */ .esf-aro { position: fixed; z-index: 22; right: 0; bottom: 0; width: 116px; height: 116px; margin: 0 2px -4px 0; pointer-events: none; opacity: 0; color: var(--aro-ink, var(--ink)); transition: opacity .6s; } .esf-aro svg { width: 100%; height: 100%; overflow: visible; } .esf-aro text { font: 500 14px/1 "Barlow", sans-serif; letter-spacing: .04em; fill: currentColor; text-transform: uppercase; } .esf-aro.on { opacity: 1; } .aro-gira { transform-origin: 0 0; opacity: 0; } @keyframes aro-anillo { 0% { opacity: 0; transform: rotate(-40deg); } 6% { opacity: 1; } 52% { opacity: 1; } 62% { opacity: 0; transform: rotate(300deg); } 100% { opacity: 0; transform: rotate(300deg); } } @keyframes aro-orbita { 0% { opacity: 0; transform: rotate(-90deg); } 8% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0; transform: rotate(270deg); } 100% { opacity: 0; transform: rotate(270deg); } } .aro-1 .aro-gira, .aro-2 .aro-gira { animation: aro-anillo var(--aro-t, 18s) cubic-bezier(.45, 0, .2, 1) var(--aro-espera, 4s) infinite; } .aro-3 .aro-gira { animation: aro-orbita var(--aro-t, 16s) cubic-bezier(.45, 0, .2, 1) var(--aro-espera, 4s) infinite; } .aro-demo { --aro-t: 9s; --aro-espera: .4s; } @media (prefers-reduced-motion: reduce) { .esf-aro { display: none; } } @media (max-width: 760px) { .esf-aro svg { transform: scale(.8); } } /* ================= v18.3 (29 oct) ================= */ /* el velo del menu abierto: outremer elegido; ?velo= prueba la fuerza y una version clara */ .v-o30 { --tinte: #0E2D58; --tinte-op: .3; } .v-o18 { --tinte: #0E2D58; --tinte-op: .18; } .v-crema { --tinte: #F5F5F3; --tinte-op: .55; } .noche.v-crema { --tinte: #ECE8E0; --tinte-op: .32; } .v-crema.menu-abierto .esf { filter: none; opacity: .55; } .v-cremablur { --tinte: #F5F5F3; --tinte-op: .45; } .v-cremablur.menu-abierto #pagina { filter: blur(2px); } .v-cremablur.menu-abierto .esf { filter: blur(2px); opacity: .55; } #pagina { transition: transform 1.2s var(--lento), filter 1.2s var(--lento); } /* formulario por pasos con escalones: al bajar, los pasos que faltan van llegando uno a uno como renglones (y el lado izquierdo tambien) */ .f-pasos .barra.llego:not(.actual):not(.hecha) { max-height: 44px; padding: 10px 20px; opacity: .85; transform: none; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); } .f-pasos .barra.llego:not(.actual):not(.hecha) input, .f-pasos .barra.llego:not(.actual):not(.hecha) .chips { display: none; } .f-pasos .barra.llego:not(.actual):not(.hecha) .etq::before, .f-pasos .barra.llego:not(.actual):not(.hecha) legend::before { content: attr(data-n) " "; font-variant-numeric: tabular-nums; } .f-pasos .barra.actual:not(.llego) { max-height: 0; opacity: 0; padding: 0 20px; transform: translateY(40px); } .f-pasos .con-cab > * { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform 1.2s var(--lento); } .f-pasos .con-cab > .llego { opacity: 1; transform: none; } .f-pasos .pasos-nav { opacity: 0; transition: opacity .8s; } .f-pasos .pasos-nav.llego { opacity: 1; } /* la orbita de la esfera (elegida 29 oct) con variaciones: ?arot= letra · ?aroa= animacion */ .arot-normal .esf-aro text { text-transform: none; letter-spacing: 0; } .arot-17 .esf-aro text { text-transform: none; letter-spacing: 0; font-size: 17px; } .arot-ra .esf-aro text { font: 400 var(--m) "RA", sans-serif; letter-spacing: -.5px; } .arot-ra .esf-aro { width: 190px; height: 190px; } @keyframes aro-flota { 0% { opacity: 0; transform: rotate(-120deg); } 12% { opacity: 1; } 45% { opacity: 1; } 58% { opacity: 0; transform: rotate(-40deg); } 100% { opacity: 0; transform: rotate(-40deg); } } .aroa-flota .aro-gira { animation-name: aro-flota !important; animation-timing-function: cubic-bezier(.3, 0, .3, 1) !important; } .aroa-escribe .aro-gira { animation: none !important; opacity: 1; transform: rotate(var(--giro, -100deg)); transition: opacity .8s; } .aroa-escribe .aro-gira.fuera { opacity: 0; } /* ?logos=1 · el logo de cada herramienta en la marquesina de Tools, en vez del punto (un solo color, del alto de las mayusculas) */ .banda-rollo .tl { display: inline-flex; align-items: center; gap: .28em; margin-right: .55em; } .banda-rollo .tl svg { width: .66em; height: .66em; fill: currentColor; flex: none; transform: translateY(-.04em); } /* ================= v18.4 (29 oct) ================= */ /* el velo del menu: outremer muy suave, 18 % (elegido 29 oct); se nota que el sitio sigue abajo */ .t-outremer { --tinte: #0E2D58; --tinte-op: .18; } /* la barra cambia de color en un tercio de segundo (elegido 29 oct) */ .hdr { transition: background .35s var(--lento), color .35s var(--lento); } /* ================= v18.5 (29 oct) ================= */ /* formulario por pasos: la columna izquierda completa desde el inicio; la derecha empieza limpia */ .f-pasos .con-cab > * { opacity: 1 !important; transform: none !important; } .f-pasos .barra.llego:not(.actual):not(.hecha) { max-height: 0 !important; opacity: 0 !important; padding: 0 20px !important; } .f-pasos .barra.actual:not(.llego) { max-height: 0; opacity: 0; padding: 0 20px; transform: translateY(40px); } /* el numero del paso: RA en contorno, sin relleno, en su talla L (no es talla nueva); "/ 04" chiquito al lado */ .f-pasos .pasos-cab { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; opacity: 0; transform: translateY(30px); transition: opacity .9s, transform 1.2s var(--lento); } .f-pasos .pasos-cab.llego { opacity: 1; transform: none; } .paso-num { color: transparent; -webkit-text-stroke: 1.5px #2f2e2c; font-variant-numeric: tabular-nums; line-height: 1; transition: opacity .26s, transform .26s; } .paso-num.cambia { opacity: 0; transform: translateY(-12px); } /* la cortinilla UP NEXT -> SELECTED WORK mas pesada (pedido 29 oct): mas recorrido para la misma rueda/dedo, se aprecia el cruce de la esfera */ .corte { height: 380svh; } /* ================= v18.6 (29 oct) ================= */ /* la cortinilla todavia mas pesada (pedido 29 oct) */ .corte { height: 560svh; } /* formulario: un paso a la vez; los terminados ya no se quedan como renglon (el numero dice en que paso vas) */ .f-pasos .barra.hecha { max-height: 0 !important; opacity: 0 !important; padding: 0 20px !important; transform: translateY(-20px) !important; pointer-events: none; } /* mientras escribes, la pista "or press Enter" se va: queda solo la tarjeta y NEXT */ .paso-hint { transition: opacity .4s; } .pasos-nav.escribiendo .paso-hint { opacity: 0; } .paso-atras { background: none; border: 0; padding: 0 0 1px; color: inherit; font: inherit; font-size: 14px; cursor: pointer; margin-left: auto; } .paso-atras[hidden] { display: none; } .envia .paso-atras { margin-left: auto; } /* ?banda=sinlineas · la marquesina de Tools sin las dos lineas finas */ .bn-sinlineas .banda { border-block: 0; } /* ================= v18.7 (29 oct) ================= */ /* la cortinilla: 30 % menos pesada que en la v18.6 (560 -> 390) */ .corte { height: 390svh; } /* el autollenado de Chrome: sin el fondo azul claro; el campo se queda en la tarjeta oscura, con su tinta y su linea */ .barra input:-webkit-autofill, .barra input:-webkit-autofill:hover, .barra input:-webkit-autofill:focus { -webkit-text-fill-color: var(--tecla-txt); caret-color: var(--tecla-txt); -webkit-box-shadow: 0 0 0 1000px var(--tecla) inset; box-shadow: 0 0 0 1000px var(--tecla) inset; transition: background-color 99999s ease 0s; font: 500 17px/1.4 "Barlow", sans-serif; } .barra input:autofill { background: transparent; } /* ================= v18.8 (29 oct) ================= */ /* ?cli=desliza · Selected work: las tres paginas en una tira que el scroll recorre dentro de la tele */ .cli-desliza .cli-marco { overflow: hidden; position: relative; } .cli-tira { height: 300%; display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; transform: translateY(calc(var(--cy, 0) * -33.333% - var(--cy, 0) * 4.7px)); will-change: transform; } .cli-tira img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 6px; } .cli-desliza .cli-pie { transition: opacity .22s; } .cli-seg { display: inline-flex; gap: 4px; margin-right: 10px; vertical-align: middle; } .cli-seg i { width: 22px; height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); position: relative; overflow: hidden; } .cli-seg i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--f, 0)); transform-origin: left; } .cli-cab .etq { display: inline-flex; align-items: center; } /* ?pista=flecha · una pista chiquita para seguir bajando (se va en el ultimo cliente) */ .cli-flecha { width: var(--tele); opacity: .8; transition: opacity .6s; } .cli-flecha.fuera { opacity: 0; } /* ================= v18.9 (29 oct) ================= */ /* Selected work con iman: la tira se desliza completa de un cliente al otro (no sigue el scroll a medias) */ .cli-tira { transition: transform 1.1s var(--lento); } /* ================= v18.10 (29 oct) ================= */ /* Selected work: la ventana recorta exacto a una pagina; la tira avanza de pagina en pagina (100 % + el hueco) */ .cli-ventana { height: 100%; overflow: hidden; border-radius: 8px; } /* v18.110: es foto, 8 px */ .cli-tira { height: 100%; display: flex; flex-direction: column; gap: 14px; transform: translateY(calc(var(--cy, 0) * (-100% - 14px))); } .cli-tira img { flex: 0 0 100%; height: 100%; border-radius: 0; } /* la esfera chica responde al mouse y al clic, despacito (sin brincos) */ .esf-lienzo { transition: transform .6s var(--lento); } .esf-encima .esf-lienzo { transform: scale(1.12); } .esf-pica .esf-lienzo { transform: scale(.94); transition-duration: .15s; } .esf-boton span { display: none; } /* el aviso de hover de antes ya lo hace el mensajito */ .esf-boton { cursor: pointer; } /* ?tools=doble · segunda marquesina en RA contorno, al reves */ .banda-2 { border-block: 0; padding-top: 0; } .banda-rollo-2 { color: transparent; -webkit-text-stroke: 1.5px #fff; } .noche .banda-rollo-2 { -webkit-text-stroke-color: #2f2e2c; } .tl-doble .stack { gap: 4svh; } /* ?tools=escena · Tools se queda en pantalla un rato (como las otras escenas) mientras las marquesinas corren */ .tl-escena .stack { height: 170svh; padding-top: 0; padding-bottom: 0; display: block; } .stack-fijo { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 7svh; } /* Just me: la esfera grande tapa los datos (What, How, Where, Since) en compu Y en cel; el titulo siempre queda encima de la esfera */ .just { z-index: auto !important; } .just > * { position: relative; z-index: 0; } .just > #just-t { z-index: 2; } /* ================= v18.11 (29 oct) ================= */ /* la doble marquesina de Tools: cada tira con aire arriba y abajo para que la RA no se moche (la tira recorta de lado, no de alto) */ .banda { padding: 14px 0; overflow-x: clip; overflow-y: visible; } /* recorta solo de lado; arriba y abajo la letra respira (con overflow visible la pagina se ensanchaba en cel) */ .banda-2 { padding: 8px 0 14px; } /* Tools nunca se ensancha por la marquesina: la columna mide lo que la pantalla */ .stack, .stack-fijo { grid-template-columns: minmax(0, 1fr); } .banda { min-width: 0; max-width: 100%; } /* ================= v18.12 (29 oct) ================= */ /* ?tools=aire · una sola tira, pero la seccion respira: mas alta y centrada (como pausa entre escenas) */ .tl-aire .stack { min-height: 92svh; align-content: center; gap: 9svh; } /* ?tools=chica · abajo de los logos, una tira chiquita en Barlow 14 (la de las etiquetas) que corre al reves: textura sin volumen */ .tl-chica .banda-rollo-2 { font: 500 14px/1 "Barlow", sans-serif; letter-spacing: .04em; color: inherit; -webkit-text-stroke: 0; opacity: .8; } .tl-chica .banda-2 { padding: 4px 0 10px; } .tl-chica .stack { min-height: 80svh; align-content: center; } /* ?fotocel=tele | retrato | chica · tu foto en cel (hoy: alta, 887 px, casi dos pantallas) */ @media (max-width: 760px) { .fc-tele .about-foto { height: auto; aspect-ratio: 1; width: 100%; max-width: 340px; padding: 10px; background: #f5f5f3; border-radius: 12px; } .noche.fc-tele .about-foto { background: #ECE8E0; } .fc-retrato .about-foto { height: auto; aspect-ratio: 4 / 5; width: 100%; object-position: 50% 20%; } .fc-chica .about-foto { height: auto; aspect-ratio: 1; width: 64%; } } /* ================= v18.13 (29 oct) ================= */ /* Contact: escena mas corta (antes 300 / 360 de alto, con un tramo largo donde ya no pasaba nada y parecia el final del sitio) */ .con { height: 185svh; } @media (max-width: 760px) { .con { height: 205svh; } } /* ================= v18.14 (29 oct) ================= */ /* ?tools=telon · Tools queda quieta a pantalla completa (fija, recortada por su propia seccion): Kind words se va hacia arriba destapandola y Philosophy sube tapandola */ .tl-telon .stack { height: 170svh; padding: 0; display: block; clip-path: inset(0); } .tl-telon .stack-fijo { position: fixed; inset: 0; height: 100svh; background: inherit; color: inherit; display: grid; align-content: center; gap: 9svh; } /* ================= v18.15 (29 oct) ================= */ /* Tools como telon por default. Con el menu abierto la pagina baja (transform): el telon se queda donde estaba y baja con todo */ .tl-empuja .stack-fijo { top: var(--tl-y, 0); bottom: auto; } /* ================= v18.16 (29 oct) ================= */ /* Kind words: la tarjeta de Jorge ya no entra desde abajo (llegaba tarde y casi no se veia). Esta desde el principio bajo la cita y se mueve con ella, poquito */ .res-q, .res-in.con-tercio .res-q { --qy: -40px; } .tercio-panel, .res-in.con-tercio .tercio-panel { transition: none; transform: translateY(calc(-10px + (.5 - var(--pr, .5)) * 60px)); } /* la marquesina del telon lleva el azul en su propia franja: asi el revisor de contraste lo encuentra (blanco sobre Klein, 6.6:1) */ .tl-telon .banda { background: inherit; } .tl-telon .stack-fijo { visibility: hidden; } .tl-telon.tl-ve .stack-fijo { visibility: visible; } /* ================= v18.17 (29 oct) ================= */ /* Kind words: la cita y la tarjeta de Jorge quietas, una sola pieza; entran y se van juntas con su seccion */ .res-q, .res-in.con-tercio .res-q { transition: none; transform: translateY(-40px); } .tercio-panel, .res-in.con-tercio .tercio-panel { transition: none; transform: translateY(-10px); } /* ?viaje= · el velo del viaje: crema mate, lento */ .viaje-velo { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: grid; place-items: center; background: var(--page); color: var(--ink); opacity: 0; visibility: hidden; } .viaje-t { margin: 0; text-align: center; padding: 0 var(--pad); } /* fundido: se vuelve crema despacito y regresa mas despacito */ .vj-fundido .viaje-velo { transition: opacity .6s var(--lento), visibility 0s .9s; } .vj-fundido .viaje-velo.on { opacity: 1; visibility: visible; transition: opacity .6s var(--lento); } .vj-fundido .viaje-velo.sale { visibility: visible; transition: opacity .9s var(--lento); } /* velo: vidrio crema mate; el viaje se adivina detras */ .vj-velo .viaje-velo { background: color-mix(in srgb, var(--page) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: opacity .7s var(--lento), visibility 0s .7s; } .vj-velo .viaje-velo.on { opacity: 1; visibility: visible; transition: opacity .35s var(--lento); } /* cortinilla: una cortina crema sube con el nombre del destino y sigue de largo (como UP NEXT y el telon) */ .vj-cortinilla .viaje-velo { opacity: 1; transform: translateY(100%); transition: transform 0s, visibility 0s; } .vj-cortinilla .viaje-velo.on { visibility: visible; transform: translateY(0); transition: transform .75s var(--lento); } .vj-cortinilla .viaje-velo.sale { visibility: visible; transform: translateY(-100%); transition: transform .9s var(--lento); } /* ================= v18.18 (29 oct) ================= */ /* la cortinilla del viaje pasa por debajo de la barra (la barra no se quita) pero tapa la esfera */ .viaje-velo { z-index: 28; } /* durante el viaje la barra se ve inactiva: el mismo velo que cae sobre la pagina cuando se abre el menu */ .hdr::after { content: ""; position: absolute; inset: 0; background: var(--tinte, var(--ink)); opacity: 0; pointer-events: none; transition: opacity .6s var(--lento); } .viajando .hdr::after { opacity: var(--tinte-op, .28); } .viajando .hdr { pointer-events: none; } /* ================= v18.19 (29 oct) ================= */ /* el velo outremer sobre la barra se veia raro (parpadeaba entre colores): fuera. Durante el viaje la barra es crema como la cortinilla y su contenido baja a medio tono */ .hdr::after { content: none; } .hdr > * { transition: opacity .6s var(--lento); } .viajando .hdr > * { opacity: .45; } /* ================= v18.20 (30 oct) · pruebas de la ronda nueva ================= */ /* ?just= · NO AGENCY. JUST ME con mas alto */ .just-pantalla .just { min-height: 100svh; align-content: space-between; padding-top: calc(var(--hdr-h) + 8svh); padding-bottom: 10svh; } .just-columnas .just { min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-content: center; align-items: start; column-gap: 6vw; row-gap: 5svh; } .just-columnas #just-t { grid-row: 1 / span 2; } .just-columnas .just-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5svh; } .just-ficha .just { min-height: 100svh; } .just-ficha .just-datos { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; } .just-ficha .just-datos > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; padding: 2.6svh 0; border-bottom: 1px solid var(--linea); } .just-ficha .just-datos dt { margin: 0; } @media (max-width: 760px) { .just-pantalla .just { padding-top: calc(var(--hdr-h) + 6svh); } .just-columnas .just { grid-template-columns: minmax(0, 1fr); } .just-columnas #just-t { grid-row: auto; } .just-columnas .just-datos { grid-template-columns: 1fr 1fr; } .just-ficha .just-datos > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } } /* ?caja= · el fondo de la tarjeta de What I do (en oscuro sigue crema) */ html:not(.noche).caja-lavado .bloque { background: #A9B6F2; color: #2f2e2c; } /* Klein lavado: tinta 6.9 */ html:not(.noche).caja-ingles .bloque { background: #C6D4BD; color: #2f2e2c; } /* verde ingles palido: tinta 8.8 */ html:not(.noche).caja-durazno .bloque { background: #F4B48C; color: #2f2e2c; } /* durazno: tinta 7.6 */ html:not(.noche):is(.caja-lavado, .caja-ingles, .caja-durazno) .bloque .tags li { box-shadow: inset 0 0 0 1px rgba(47, 46, 44, .25); } /* ?kw= · el paso de Kind words a Tools (hoy: la cita se queda quieta 75 % de una pantalla y luego se va de golpe) */ .kw-corta .res { height: 130svh; } .kw-sin .res { height: 100svh; } .kw-flota .res-q, .kw-flota .res-in.con-tercio .res-q { transform: translateY(calc(-40px - var(--pr, 0) * 14svh)); } .kw-flota .tercio-panel, .kw-flota .res-in.con-tercio .tercio-panel { transform: translateY(calc(-10px - var(--pr, 0) * 14svh)); } /* tele: el telon de Tools entra y sale como una pantalla con esquinas redondas (la ventana del telon se redondea) */ .kw-tele.tl-telon .stack { clip-path: inset(0 round 40px); } @media (max-width: 760px) { .kw-tele.tl-telon .stack { clip-path: inset(0 round 26px); } } /* ?th= · THANKS FOR WATCHING mas largo: se queda fija con la esfera grande */ :is(.th-larga, .th-creditos, .th-senal) .thanks { min-height: 0; padding: 0; display: block; } .th-larga .thanks { height: 170svh; } .th-creditos .thanks { height: 230svh; } .th-senal .thanks { height: 200svh; } .th-fijo { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 14px; padding: 0 var(--pad); } .th-lista { list-style: none; display: grid; gap: 6px; margin: 10px 0 8px; } .th-lista li { opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--lento), transform 1.4s var(--lento); } .th-lista li.on { opacity: .8; transform: none; } .th-linea { display: block; width: min(420px, 70vw); height: 2px; background: var(--linea); position: relative; overflow: hidden; border-radius: 2px; } .th-linea::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--pth, 0)); } .th-linea ~ .txt, .th-linea ~ .lnk { opacity: 0; transition: opacity 1.6s var(--lento); } .fin .th-linea ~ .txt, .fin .th-linea ~ .lnk { opacity: 1; } /* ================= v18.21 (30 oct) ================= */ /* pausas parejas: en cada escena fija, cuando ya llego lo ultimo, quedan unos 30 % de pantalla quietos antes de salir (antes: Kind words 75, Tools 70, Contact 47, Thanks 62) */ .pausas-parejas.tl-telon .stack { height: 130svh; } .pausas-parejas .con { height: 165svh; } .pausas-parejas.th-creditos .thanks { height: 185svh; } @media (max-width: 760px) { .pausas-parejas .con { height: 185svh; } } /* ================= v18.23 (30 oct) ================= */ /* ?idioma= · el switch de idioma (barra, menu y pie), mas chico */ :is(.idioma-chica, .idioma-siglas) .idioma a, :is(.idioma-chica, .idioma-siglas) .guia-pie .idioma a { padding: 5px 9px; } .idioma-texto .idioma { box-shadow: none; gap: 14px; letter-spacing: 0; } .idioma-texto .idioma a, .idioma-texto .guia-pie .idioma a { padding: 0 0 2px; border-radius: 0; opacity: .8; } .idioma-texto .idioma a[aria-current] { background: none; opacity: 1; border-bottom: 1px solid currentColor; } .idioma-texto .idioma a[aria-current] span { color: inherit; } /* ?blanco=todo · la esfera con el mismo blanco papel de los dibujos (#FAF9F3, en vez de blanco puro) */ .blanco-todo .esf::before { background: #FAF9F3; } /* ?tinta=contorno · la esfera chica con un aro de tinta, como el globito dibujado */ .tinta-contorno .esf::after { content: ""; position: absolute; inset: 2%; border-radius: 50%; box-shadow: inset 0 0 0 1.6px rgba(56, 62, 70, .8); opacity: 0; transition: opacity .9s var(--lento); pointer-events: none; } .tinta-contorno.esf-chica .esf::after { opacity: 1; } /* ================= v18.27 (30 oct) ================= */ /* la esfera vive dentro de #pagina: con el menu abierto (pagina empujada) se mide desde la pagina, como el telon */ .tl-empuja .esf { top: var(--tl-y, 0); } /* ================= v18.28 (30 oct) ================= */ /* en cel no hay mouse: al tocar, el :hover se quedaba pegado (los iconos de la barra se quedaban levantados). Ahi el movimiento de hover no aplica */ @media (hover: none) { .tecla:hover { transform: none; box-shadow: 0 4px 0 var(--tecla-sombra); } .nl:hover .ic, .canales a:hover .t-m, .pie-col:hover img, .pld:hover { transform: none; } } .con-pila.enviado .envia .tecla { opacity: .45; pointer-events: none; } /* ================= v18.31 (30 oct) ================= */ /* Thanks: la seccion traia "centrar" de cuando no era escena; Chrome ya centra tambien bloques y el texto empezaba 248 px abajo y subia. Ahora llega ya en su lugar */ :is(.th-larga, .th-creditos, .th-senal) .thanks { align-content: normal; } /* el saltito al tocar en cel: sube y regresa solo, lento */ @keyframes salta-y { 0% { transform: none; } 35% { transform: translateY(-3px); } 100% { transform: none; } } @keyframes salta-x { 0% { transform: none; } 35% { transform: translateX(6px); } 100% { transform: none; } } @keyframes salta-dibujo { 0% { transform: none; } 35% { transform: translateY(-6px) rotate(-4deg); } 100% { transform: none; } } @keyframes salta-pld { 0% { transform: none; } 35% { transform: translateY(-2px); } 100% { transform: none; } } @media (hover: none) { .nl.toque .ic { animation: salta-y .8s var(--lento); } .canales a.toque .t-m { animation: salta-x .8s var(--lento); } .pie-col.toque img { animation: salta-dibujo .8s var(--lento); } .pld.toque { animation: salta-pld .8s var(--lento); } } /* ?escenas=cortas · en cel, la cortinilla y Selected work piden menos dedo para entrar y salir */ @media (max-width: 760px) { .escenas-cortas .corte { height: 280svh; } .escenas-cortas .cli { height: 270svh; } } /* ================= v18.32 (30 oct) ================= */ /* sin el cuadrito azul que pinta Chrome de Android al tocar (no es de la paleta) */ html { -webkit-tap-highlight-color: transparent; } /* el saltito al tocar en cel, mas notorio (pedido 30 oct): sube mas, crece un poco y regresa lento */ @keyframes salta-y { 0% { transform: none; } 30% { transform: translateY(-7px) scale(1.14); } 100% { transform: none; } } @keyframes salta-x { 0% { transform: none; } 30% { transform: translateX(12px); } 100% { transform: none; } } @keyframes salta-dibujo { 0% { transform: none; } 30% { transform: translateY(-12px) rotate(-7deg); } 100% { transform: none; } } @keyframes salta-pld { 0% { transform: none; } 30% { transform: translateY(-5px) scale(1.04); } 100% { transform: none; } } @media (hover: none) { .nl.toque .ic { animation-duration: .95s; } .canales a.toque .t-m, .pie-col.toque img, .pld.toque { animation-duration: .95s; } } /* ================= v18.34 (30 oct) ================= */ /* en cel, NEXT quedaba pegado a la orilla de abajo: ahora termina a la misma altura que la esfera chica (24 px de la orilla) */ @media (max-width: 760px) { .f-pasos .con-in { padding-bottom: 24px; } } /* ================= v18.35 (30 oct) ================= */ /* Thanks se sentia el final de la pagina: menos tiempo fija antes de que suba el pie (hoy 185svh = 85 quieta) */ :root.thalto-165 .thanks { height: 165svh; } :root.thalto-150 .thanks { height: 150svh; } :root.thalto-135 .thanks { height: 135svh; } /* ================= v18.36 (30 oct) ================= */ /* Thanks todavia se sentia larga en 150: ahora 125 (el letrero quieto como rueda y media) */ :root.thalto-125 .thanks { height: 125svh; } :root.thalto-115 .thanks { height: 115svh; } /* ================= v18.37 (30 oct) ================= */ /* en cel nada puede ensanchar la pagina (antes solo el body recortaba de lado; en Android eso no siempre frena el arrastre lateral) */ html { overflow-x: clip; } /* ================= v18.38 (30 oct) ================= */ /* ?jw= · Just me se muda a What I do: titulo a la izquierda y los datos a la derecha, como hoy pero sin pantalla propia */ .wid { --latw: calc(var(--xl) * 1.4); } .jw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 4vw; row-gap: 3svh; align-items: start; } .jw #just-t { grid-row: 1 / span 2; } .jw .just-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3svh; } .jw .led-lnk { margin: 0; } .jw-encima .jw { margin-bottom: 9svh; } .jw-debajo .jw { margin-top: 9svh; } .jw-dentro .bloque > .jw { grid-column: 1 / -1; padding-bottom: 5svh; margin-bottom: 1svh; border-bottom: 1px solid rgba(47, 46, 44, .25); } .jw-dentro .bloque > .jw .just-datos { border-top-color: rgba(47, 46, 44, .25); } .noche.jw-dentro .bloque > .jw .led-lnk { color: #2f2e2c; } /* ?jt=no · sin el titulo (lo siguen leyendo Google y los lectores de pantalla) */ .jt-no #just-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .jt-no .jw { grid-template-columns: minmax(0, 1fr); } .jt-no .jw .just-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ?widin= · la marquesina y la tarjeta llegan en tiempos, lentas, y al salir se deshacen al reves */ /* empuja: la tarjeta llega a todo lo ancho; luego la marquesina entra de lado y la empuja a su lugar */ .widin-empuja .wid .bloque { opacity: 0; transform: translateY(26px); margin-left: calc(-1 * var(--latw)); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento), margin-left 1.8s var(--lento); } .widin-empuja .wid.w1 .bloque { opacity: 1; transform: none; } .widin-empuja .wid.w2 .bloque { margin-left: 0; } .widin-empuja .wid .lateral { transform: translateX(calc(-1 * var(--latw) - var(--pad))); transition: transform 1.8s var(--lento); } .widin-empuja .wid.w2 .lateral { transform: none; } /* franja: primero una franja del color de la tarjeta en el carril de la marquesina; luego el texto la puebla; al final la tarjeta */ .widin-franja .wid { --banda-wid: #A9B6F2; } .noche.widin-franja .wid { --banda-wid: #ECE8E0; } .widin-franja .wid .lateral { clip-path: inset(var(--bq-top, 0) 0 calc(100% - var(--bq-top, 0px) - var(--bq-h, 100%)) round 14px); color: #2f2e2c; } .widin-franja .wid .lateral::before { content: ""; position: absolute; left: 0; right: 0; top: var(--bq-top, 0); height: var(--bq-h, 100%); background: var(--banda-wid); border-radius: 14px; transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.5s var(--lento); } .widin-franja .wid.w1 .lateral::before { transform: none; } .widin-franja .wid .lat-rollo { opacity: 0; transition: opacity 1.4s var(--lento); } .widin-franja .wid.w2 .lat-rollo { opacity: 1; } .widin-franja .wid .bloque { opacity: 0; transform: translateY(26px); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento); } .widin-franja .wid.w3 .bloque { opacity: 1; transform: none; } /* corre: la marquesina sube corriendo por su carril y se asienta; la tarjeta llega despues */ .widin-corre .wid .lateral { transform: translateY(60svh); opacity: 0; transition: transform 2.4s var(--lento), opacity 1.2s var(--lento); } .widin-corre .wid.w1 .lateral { transform: none; opacity: 1; } .widin-corre .wid .bloque { opacity: 0; transform: translateY(26px); transition: opacity 1.4s var(--lento), transform 1.4s var(--lento); } .widin-corre .wid.w2 .bloque { opacity: 1; transform: none; } @media (max-width: 760px) { .wid { --latw: calc(var(--xl) * 1.05); } .jw { grid-template-columns: minmax(0, 1fr); } .jw #just-t { grid-row: auto; } .jt-no .jw .just-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* v18.38 · el mensaje (paso 4): cuatro renglones a la vista, rayados como hoja, y crece solo mientras escribes */ .barra textarea { display: block; width: 100%; box-sizing: border-box; background: transparent; border: 0; color: inherit; font: 500 17px/1.6 "Barlow", sans-serif; padding: 0; margin: 2px 0 0; outline: none; resize: vertical; min-height: calc(4 * 1.6em); max-height: 42svh; overflow-y: auto; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.6em - 1px), color-mix(in srgb, var(--tecla-txt) 30%, transparent) calc(1.6em - 1px) 1.6em); background-attachment: local; } .barra textarea::placeholder { color: color-mix(in srgb, var(--tecla-txt) 72%, transparent); } .noche .barra textarea::placeholder { color: color-mix(in srgb, var(--tecla-txt) 86%, transparent); } .f-pasos .barra.msg.actual { max-height: 62svh; } .f-pasos .barra.hecha textarea { display: none; } .pasos-nav.en-msg .paso-hint { opacity: 0; } /* v18.38 · ya enviado: SEND IT y Back se van despacio; llega un letrero con su nombre, en tres tiempos */ .con-pila .envia { transition: opacity .8s var(--lento), transform .8s var(--lento); } .con-pila.saliendo .envia { opacity: 0 !important; transform: translateY(12px); pointer-events: none; } .con-pila.enviado .envia { display: none !important; } .con-pila.enviado .con-ok { display: grid; gap: 12px; margin-top: 4px; } .con-ok > span { display: block; opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--lento), transform 1.4s var(--lento); } .con-ok > span.on { opacity: 1; transform: none; } .con-ok .ok-1 { display: inline-flex; align-items: center; gap: 10px; } .con-ok .ok-3 { max-width: 34em; } .con-pila.enviado .con-ok { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; } @media (max-width: 760px) { .con-pila.enviado .con-ok { padding-right: 66px; } } /* la esfera chica vive en esa esquina */ /* ================= v18.39 (31 oct) ================= */ /* ?jlado=der · Just me con el titulo a la derecha (pegado a la orilla) y los datos a la izquierda */ @media (min-width: 761px) { .jlado-der .jw { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .jlado-der .jw #just-t { grid-column: 2; grid-row: 1 / span 2; text-align: right; } .jlado-der .jw .just-datos, .jlado-der .jw .led-lnk { grid-column: 1; } } /* ?lat=der · la marquesina de What I do vive del lado derecho; todo lo demas se recorre a la izquierda */ .lat-der .wid { padding-left: var(--pad); padding-right: calc(var(--pad) + var(--latw)); } .lat-der .wid .lateral { left: auto; right: calc(var(--pad) - .14em); } /* ================= v18.40 (31 oct) ================= */ /* ?widin=tiempos · el bloque grande respira en el tiempo, no en el espacio: 1 la tarjeta llega vacia (y la marquesina), 2 Just me, 3 la linea se dibuja, 4 los servicios uno tras otro. Al salir, al reves */ .widin-tiempos .wid .lateral { opacity: 0; transition: opacity 1.6s var(--lento); } .widin-tiempos .wid.w1 .lateral { opacity: 1; } .widin-tiempos .wid .bloque { opacity: 0; transform: translateY(26px); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento); } .widin-tiempos .wid.w1 .bloque { opacity: 1; transform: none; } .widin-tiempos .wid .bloque > .jw > * { opacity: 0; transform: translateY(18px); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento); } .widin-tiempos .wid.w2 .bloque > .jw > * { opacity: 1; transform: none; } .widin-tiempos.jw-dentro .bloque > .jw { border-bottom: 0; position: relative; } .widin-tiempos.jw-dentro .bloque > .jw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(47, 46, 44, .25); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.5s var(--lento); } .widin-tiempos .wid.w3 .bloque > .jw::after { transform: none; } .widin-tiempos .wid .bloque > article { opacity: 0; transform: translateY(22px); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento); } .widin-tiempos .wid.w4 .bloque > article.ve { opacity: 1; transform: none; } @media (min-width: 761px) { /* en compu los tres llegan uno tras otro; al salir se van al reves */ .widin-tiempos .wid.w4 .bloque > article:nth-of-type(2) { transition-delay: .4s; } .widin-tiempos .wid.w4 .bloque > article:nth-of-type(3) { transition-delay: .8s; } .widin-tiempos .wid:not(.w4) .bloque > article:nth-of-type(1) { transition-delay: .6s; } .widin-tiempos .wid:not(.w4) .bloque > article:nth-of-type(2) { transition-delay: .3s; } } /* ================= v18.41 (31 oct) ================= */ /* ?jd=linea|minimo · los datos de Just me en una sola frase, con la misma linea arriba que tenian */ .just-linea { margin: 0; border-top: 1px solid var(--linea); padding-top: 22px; max-width: 30em; } .jw-dentro .bloque > .jw .just-linea { border-top-color: rgba(47, 46, 44, .25); } /* ================= v18.42 (31 oct) ================= */ /* la frase de Just me ya no lleva linea arriba (pedido 31 oct) */ .just-linea, .jw-dentro .bloque > .jw .just-linea { border-top: 0; padding-top: 0; } /* ?jpos=abajo · la frase y el indicador debajo del titulo; el lado derecho queda vacio, como el resto del sitio */ @media (min-width: 761px) { .jpos-abajo .jw { row-gap: 2.4svh; } .jpos-abajo .jw #just-t { grid-row: auto; } .jpos-abajo .jw > * { grid-column: 1; } .jpos-abajo .jw #just-t { margin-bottom: .6svh; } } /* ?led= · el indicador de Available */ .led-sin .jw .led { display: none; } .led-tinta .jw .led { background: #2f2e2c; box-shadow: 0 0 0 4px rgba(47, 46, 44, .12); animation: led-respira 3.2s ease-in-out infinite; } @keyframes led-respira { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .led-senal .jw .led { display: inline-flex; align-items: flex-end; gap: 2px; width: auto; height: 12px; background: none; box-shadow: none; border-radius: 0; } .led-senal .jw .led b { width: 3px; background: #2f2e2c; border-radius: 1px; animation: led-barra 2.6s ease-in-out infinite; } .led-senal .jw .led b:nth-child(1) { height: 5px; } .led-senal .jw .led b:nth-child(2) { height: 8px; animation-delay: .35s; } .led-senal .jw .led b:nth-child(3) { height: 12px; animation-delay: .7s; } @keyframes led-barra { 0%, 100% { opacity: .3; } 35%, 65% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .led-tinta .jw .led, .led-senal .jw .led b { animation: none; } } /* ================= v18.43 (31 oct) ================= */ /* ?avail=der · con la frase debajo del titulo: Available se va a la derecha, en el mismo renglon, y los dos se apoyan en la linea divisoria */ @media (min-width: 761px) { .avail-der .jw > .led-lnk { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; } .avail-der.jpos-abajo .jw > .just-linea { align-self: end; } } /* ================= v18.44 (31 oct) ================= */ /* ?avail=fuera · Available fuera de la tarjeta, abajo a la derecha */ .avail-fuera .wid > .led-lnk { justify-self: end; margin: 2.6svh 2px 0 0; } /* afuera la senal (o el punto) usa el color de la letra: en Prime time tambien se ve */ .led-senal .wid > .led-lnk .led { display: inline-flex; align-items: flex-end; gap: 2px; width: auto; height: 12px; background: none; box-shadow: none; border-radius: 0; } .led-senal .wid > .led-lnk .led b { width: 3px; background: currentColor; border-radius: 1px; animation: led-barra 2.6s ease-in-out infinite; } .led-senal .wid > .led-lnk .led b:nth-child(1) { height: 5px; } .led-senal .wid > .led-lnk .led b:nth-child(2) { height: 8px; animation-delay: .35s; } .led-senal .wid > .led-lnk .led b:nth-child(3) { height: 12px; animation-delay: .7s; } .led-tinta .wid > .led-lnk .led { background: currentColor; box-shadow: none; animation: led-respira 3.2s ease-in-out infinite; } .led-sin .wid > .led-lnk .led { display: none; } @media (prefers-reduced-motion: reduce) { .led-senal .wid > .led-lnk .led b, .led-tinta .wid > .led-lnk .led { animation: none; } } /* ================= v18.45 (31 oct) ================= */ /* la esfera grande (capa 1) pasaba un instante por DETRAS de la tarjeta de What I do (capa 2) mientras entraba, y luego brincaba encima al hacerse chica. Misma regla que ya tenia Just me: la esfera pasa por encima de la tarjeta y de la marquesina; el titulo NO AGENCY. JUST ME siempre queda encima de la esfera. Solo cambia el orden de capas; la esfera se mueve igual (la chica sigue en su capa 20) */ .esc.wid { z-index: auto; } .wid .bloque { position: relative; } .wid #just-t { position: relative; z-index: 2; } /* ================= v18.46 (31 oct) ================= */ /* Available, fuera de la tarjeta, se va a la IZQUIERDA (alineado con la orilla de la tarjeta): la derecha es de la esfera chica, y en la home casi nada va al centro */ .avail-fuera .wid > .led-lnk { justify-self: start; margin: 2.6svh 0 0 2px; } /* ================= v18.48 (31 oct) ================= */ /* la esfera al hacerse widget (y al crecer de regreso): antes usaba la curva --lento, que hace casi todo el movimiento al principio y se sentia abrupta. Ahora arranca suave y llega suave, un poco mas lenta (2.1 s) */ :root { --esf-curva: cubic-bezier(.55, .05, .25, 1); } .esf { transition: transform 2.1s var(--esf-curva), width 2.1s var(--esf-curva), height 2.1s var(--esf-curva), filter 1.2s var(--lento); } /* en cel la cortinilla UP NEXT / SELECTED WORK pide menos dedo (390 -> 300) y SELECTED WORK solo dura menos */ @media (max-width: 760px) { .corte { height: 300svh; } } /* la marquesina vertical arrancaba a media seccion y crecia hacia arriba: la mitad de abajo (Vibe coding en cel) quedaba vacia hasta que el texto bajaba. Ahora arranca desde abajo; como el texto ya mide mas que la seccion, siempre la cubre entera */ .lat-rollo { top: 100%; } /* ================= v18.51 (31 oct) ================= */ /* el paso del formulario aparecia creciendo desde alto 0 y empujaba el resto (brinco de layout al llegar a Contact). Ahora aparece igual (se desvanece y sube), pero con su espacio ya reservado */ .f-pasos .barra.actual:not(.llego) { max-height: 170px; padding: 14px 20px; } .f-pasos .barra.msg.actual:not(.llego) { max-height: 62svh; } @media (max-width: 760px) { .f-pasos .barra.actual:not(.llego) { padding: 10px 18px; } } /* ================= v18.52 (3 nov) ================= */ /* el pie crecia: la marquesina vertical de About (y las otras) se recortaba solo a la vista (clip-path) y al correr se salia por abajo de su seccion; el navegador lo contaba como pagina y aparecia espacio vacio bajo el pie, cada vez mas grande. overflow-y: clip recorta de verdad arriba y abajo; de lado sigue respirando la tinta de las letras */ .lateral { overflow-y: clip; } /* la esfera se mueve con home.js (su propia animacion con la misma curva): CSS solo anima el filtro y la opacidad del menu */ .esf { transition: filter 1.2s var(--lento), opacity 1.2s var(--lento); } /* prueba ?inicio=prime: el hero abre con los colores de Prime time (Klein y crema) aunque el sitio este en Daytime; lo demas sigue normal */ html:not(.noche).inicio-prime .hero { --page: var(--azul); --ink: #ECE8E0; --hueso: var(--azul); --linea: rgba(236, 232, 224, .2); --tecla: #ECE8E0; --tecla-txt: var(--azul); --tecla-sombra: #b9b4aa; background: var(--page); color: var(--ink); } html:not(.noche).inicio-prime .hero .punto { color: var(--firma); } /* el fondo Klein del hero tapaba la esfera (la seccion va en la capa 2 y la esfera en la 1): el fondo baja a la capa de la pagina y el texto sigue encima de la esfera */ html:not(.noche).inicio-prime .hero { z-index: auto; } html:not(.noche).inicio-prime .hero-in { position: relative; z-index: 2; } /* al cargar, la esfera ya no entra viajando desde la esquina de arriba a la izquierda: aparece en su lugar (y no se ve hasta que home.js la acomoda) */ .esf:not([style*="translate"]) { visibility: hidden; } /* ================= v18.53 (3 nov) ================= */ /* pruebas del fondo del hero (ronda 25): solo con los dos azules que ya existen (Klein var(--azul) de Prime y el lavado #A9B6F2 de la tarjeta). El fondo baja a la capa de la pagina (debajo de la esfera) y el texto sigue encima de la esfera, como en ?inicio=prime */ html:not(.noche).inicio-lavado .hero { z-index: auto; } html:not(.noche).inicio-lavado .hero-in { position: relative; z-index: 2; } /* ?inicio=lavado: el hero con el azulito de la tarjeta de What I do (tinta encima 6.9) */ html:not(.noche).inicio-lavado .hero { background: #A9B6F2; } /* ?atm=halo: la esfera como planeta con atmosfera (anillos de senal en lavado y un resplandor Klein); va pegada a la esfera y solo en el hero */ .atm-halo .esf::after { content: ""; position: absolute; inset: 2%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--lento); box-shadow: 0 0 0 2.2vmin rgba(169, 182, 242, .8), 0 0 0 5vmin rgba(169, 182, 242, .38), 0 0 0 8vmin rgba(169, 182, 242, .16), 0 0 20vmin 8vmin rgba(31, 48, 181, .26); } html:not(.noche).atm-halo.en-hero .esf::after { opacity: 1; } /* ?atm=horizonte y ?atm=bruma viven en una capa fija detras de todo (como la esfera): no se cortan donde termina el hero, se quedan con la esfera y se desvanecen cuando ella se vuelve widget */ .atm-capa { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.4s var(--lento); } html:not(.noche).en-hero .atm-capa { opacity: 1; } .tl-empuja .atm-capa { top: var(--tl-y, 0); bottom: auto; height: 100vh; } /* ?atm=horizonte: la esfera sale como un planeta sobre un horizonte azul (Klein abajo, lavado y luego crema) */ .atm-horizonte .atm-capa { background: linear-gradient(to top, var(--azul) 0%, #A9B6F2 30%, rgba(169, 182, 242, 0) 62%); } /* ?atm=bruma: dos manchas de luz (lavado y Klein) que respiran muy despacio detras de todo */ .atm-bruma .atm-capa::before, .atm-bruma .atm-capa::after { content: ""; position: absolute; border-radius: 50%; } .atm-bruma .atm-capa::before { width: 80vmax; height: 80vmax; left: -30vmax; top: -24vmax; background: radial-gradient(circle, rgba(169, 182, 242, .8), rgba(169, 182, 242, 0) 66%); animation: bruma-a 38s ease-in-out infinite alternate; } .atm-bruma .atm-capa::after { width: 70vmax; height: 70vmax; right: -24vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(31, 48, 181, .38), rgba(31, 48, 181, 0) 66%); animation: bruma-b 46s ease-in-out infinite alternate; } @keyframes bruma-a { to { transform: translate(16vmax, 9vmax) scale(1.12); } } @keyframes bruma-b { to { transform: translate(-14vmax, -10vmax) scale(.9); } } @media (prefers-reduced-motion: reduce) { .atm-bruma .atm-capa::before, .atm-bruma .atm-capa::after { animation: none; } } /* ================= v18.54 (3 nov) ================= */ /* La esfera grande pasa por ENCIMA del titulo NO AGENCY. JUST ME (pedido 3 nov): al bajar del hero el titulo le pasaba encima antes de hacerse widget. Cambia la regla del 29/31 oct (titulo encima de la esfera). Solo baja la capa del titulo a la de su seccion; la esfera se mueve igual (grande capa 1, cortinilla 25, chica 20), y la tarjeta y los datos siguen por debajo de ella como antes */ .just > #just-t, .wid #just-t { z-index: 0; } /* ================= v18.55 (3 nov) ================= */ /* RODRIGO ADRIAN en About con la RA mediana, la de los letreros (pedido 3 nov: no la mas grande). ?nombre=hoy la regresa */ .nombre-m #about-t { font-size: var(--m); } /* v18.110: sin el 1.14 */ /* Kind words mas chicas (pedido 3 nov: cada resena quedaba muy grande en RA). Pruebas, el default sigue igual: ?kwt=barlow la cita en Barlow (la letra del texto), mas chica y en minusculas; el nombre sigue en RA en su letrero ?kwt=ra la cita sigue en RA pero a 2/3 del tamano */ .kwt-barlow .res-q { font-family: "Barlow", system-ui, sans-serif; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: clamp(20px, 3.1svh, 28px); line-height: 1.42; max-width: 32ch; text-wrap: pretty; } .kwt-ra .res-q { font-size: clamp(20px, 2.9svh, 27px); line-height: 1.16; max-width: 30ch; } @media (max-width: 760px) { .kwt-barlow .res-q { font-size: 20px; max-width: 28ch; } .kwt-ra .res-q { font-size: 21px; max-width: 24ch; } } /* Kind words con dos resenas (3 nov: la de Jose, curso de SEO 2023). Las dos en el mismo lugar; una a la vez segun el scroll, la escena un poco mas larga */ .res-par { grid-area: 1 / 1; margin: 0; display: grid; gap: 22px; justify-items: inherit; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--lento), transform .9s var(--lento); pointer-events: none; } .res-par.va { opacity: 1; transform: none; pointer-events: auto; } .res-in { grid-template-areas: none; } .kw-corta .res, .res { height: 200svh; } @media (prefers-reduced-motion: reduce) { .res-par { transition: none; transform: none; } } /* ================= v18.56 (3 nov) ================= */ /* Kind words con tamanos de la guia (pedido 3 nov: "que su tamano no sea ajeno al resto del sitio"). Nada nuevo: parrafo Barlow 17, letrero RA M, radio 14 y el lavado de la tarjeta de What I do ?kwt=parrafo la cita en Barlow 17 / 1.55 como cualquier parrafo ?kwt=ficha lo mismo dentro de una tarjeta lavado (como la de What I do), el letrero del nombre abajo ?kwt=comilla parrafo Barlow 17 con una comilla grande en RA L (44) arriba, como unico adorno */ :is(.kwt-parrafo, .kwt-ficha, .kwt-comilla) .res-q { font: 500 17px/1.55 "Barlow", system-ui, sans-serif; text-transform: none; letter-spacing: 0; max-width: 34ch; text-wrap: pretty; } html:not(.noche).kwt-ficha .res-q { background: #A9B6F2; color: #2f2e2c; border-radius: 14px; padding: 26px 28px; max-width: 36ch; } .noche.kwt-ficha .res-q { background: #2338F0; color: #fff; border-radius: 14px; padding: 26px 28px; max-width: 36ch; } .kwt-ficha .res-in.con-tercio .res-q { --qy: -24px; } .kwt-comilla .res-q::before { content: "“"; display: block; font: 400 44px/.6 "RA", sans-serif; margin: 0 0 14px; } .kwt-comilla .res-q { text-indent: 0; } /* ================= v18.64 (4 nov) ================= */ /* Auditoria contra REGLAS-DE-ESTILO.md. Pruebas, el default no cambia: ?guia=1,2,3,4,5 (cualquier combinacion) 1 la marquesina de nombres de Tools en L, como su titulo (hoy XL) 2 THANKS FOR WATCHING en M (hoy L) 3 interlineado 1.1 en titulos de tres o mas renglones (hoy 1.0) 4 el letrero SELECTED WORK con -1 px entre letras (hoy -0.5) 5 el 01 de contorno del formulario con 1.2 px (hoy 1.5) */ .g1 .banda-rollo { font-size: var(--l); } .g2 #thanks-t { font-size: var(--m); } .g3 #just-t, .g3 #filo-t, .g3 .pie-mail { line-height: 1.1; } .g4 #corte-b .t-xl, .g4 #corte-b.t-xl { letter-spacing: -.25px; } /* v18.74: antes -1px */ .g5 #paso-n { -webkit-text-stroke-width: 1.2px; } /* v18.65: ?tlm=m · los nombres de Tools en M (26), el tamano mas chico de RA */ .tl-m .banda-rollo { font-size: var(--m); } /* v18.67: ?tlt=xl|m · el titulo TOOLS I USE MOST en XL o en M (hoy L) */ .tlt-xl #stack-t { font-size: var(--xl); } .tlt-m #stack-t { font-size: var(--m); } /* v18.77 PRUEBAS (selector abajo a la izquierda) */ /* 1) punto propio en las marquesinas laterales: el "·" sigue en el texto pero invisible; encima un circulo de CSS igual en todos los aparatos */ .lat-rollo .sep { display: inline-block; position: relative; width: .42em; -webkit-text-fill-color: transparent; } .lat-rollo .sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--punto, .2em); height: var(--punto, .2em); margin: calc(var(--punto, .2em) / -2) 0 0 calc(var(--punto, .2em) / -2); border-radius: 50%; background: currentColor; } .punto-s { --punto: .14em; } .punto-m { --punto: .2em; } .punto-l { --punto: .27em; } /* 2) interlineado de los titulos RA (no toca menu ni pie); tu nombre se queda en 1.14 por el acento y NO AGENCY / Philosophy en 1.1 */ .lh-100 :is(.t-xl, .t-l, .t-m):not(.canales .t-m):not(.pie-col .t-m):not(.res-q) { line-height: 1; } .lh-105 :is(.t-xl, .t-l, .t-m):not(.canales .t-m):not(.pie-col .t-m):not(.res-q) { line-height: 1.05; } .lh-110 :is(.t-xl, .t-l, .t-m):not(.canales .t-m):not(.pie-col .t-m):not(.res-q) { line-height: 1.1; } /* 3) v18.78 marquesinas laterales "ventana": la columna se queda fija en la pantalla y su seccion la destapa y la tapa como cortinilla; corre cuando ya se ve 70% */ .lat-sticky :has(> .lateral) { clip-path: inset(0 -100vw); } /* la seccion es la ventana: recorta arriba y abajo, nunca a los lados */ .lat-sticky .lateral { position: fixed; top: 0; bottom: auto; height: 100lvh; } /* v18.90: siempre del alto de la pantalla SIN barra del navegador: con la barra visible, lo que sobra queda fuera de la pantalla; al esconderse la barra no cambia de tamano (v18.89 crecia de golpe y el texto saltaba) */ /* v18.89: antes height 100svh dejaba un hueco abajo en cel cuando la barra del navegador se esconde; con top 0 y bottom 0 sigue el alto real, como la esfera */ /* fija de verdad: la mueve el navegador, no el script (sin brincos al hacer scroll) */ .lat-sticky .lat-rollo { top: 100%; } /* v18.82: los otros proyectos de Selected work estan en el HTML pero solo se muestra uno a la vez */ .cli-pie.cli-otro { display: none; } /* v18.87: pantalla "en produccion" (links a paginas internas que aun no existen). Sube como la cortinilla, con los tamanos del sitio: titulo XL (L si no cabe), texto 17, boton y link 14 */ .pronto { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: var(--page); color: var(--ink); transform: translateY(100%); transition: transform .75s var(--lento); overflow-y: auto; } .pronto[hidden] { display: none; } .pronto.on { transform: translateY(0); } .pronto.sale { transform: translateY(-100%); transition: transform .9s var(--lento); } .pronto-in { width: 100%; padding: 12svh var(--pad); text-align: center; display: grid; justify-items: center; gap: 22px; } .pronto-de { margin: 0; } .pronto-t { margin: 0; line-height: 1.05; } .pronto-x { margin: 0; font-size: 17px; line-height: 1.55; max-width: 30em; } .pronto-bt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 6px; } @media (prefers-reduced-motion: reduce) { .pronto, .pronto.sale { transition: none; } } /* v18.91: Kind words: su marquesina lateral vive dentro de la escena fija (.fijo, 100svh, overflow hidden) y ahi se cortaba: hueco abajo en cel al esconderse la barra. La escena mide 100lvh, como la cortinilla (.corte .fijo) */ .res .fijo { height: 100lvh; } /* v18.93 (ronda 32): sin gris en el texto: etiquetas al 100% (numeros del menu, idioma inactivo, 01 / 03 y descripciones de Selected work) */ .canales b, .idioma-texto .idioma a, .idioma-texto .guia-pie .idioma a, .cli-cab .etq, .cli-pie .etq { opacity: 1; } /* v18.103: cambio de idioma: la cortinilla tapa todo, barra incluida, para que el cambio de pagina quede escondido (sin parpadeo) */ .vj-idioma .viaje-velo { z-index: 90; } /* ===== borrador paleta-ef (8 nov 2026): una sola paleta. E = azul var(--azul) + indigo solo en Selected work + un claro #F5F5F3 + amarillo. F = igual pero Selected work tambien azul. Sin boton Prime/Daytime. ===== */ .pal-e #kind-words, .pal-e #about { --page:#F5F5F3;--ink:#2f2e2c;--hueso:#E8E6E1;--sup:#e8e6df;--linea:rgba(47,46,44,.16);--tecla:#2f2e2c;--tecla-txt:#E8E6E1;--tecla-sombra:#1d1c1b;background:var(--page);color:var(--ink); } .pal-e #kind-words .lateral, .pal-e #about .lateral { color: #2f2e2c; } .pal-e .res .tercio-panel { background: #2f2e2c; color: #E8E6E1; } .pal-e .filo { --page:#F5F5F3;--ink:#2f2e2c;--hueso:#E8E6E1;--sup:#e8e6df;--linea:rgba(47,46,44,.16);--tecla:#2f2e2c;--tecla-txt:#E8E6E1;--tecla-sombra:#1d1c1b;background:var(--page);color:var(--ink); --outremer: #F5F5F3; --sobre-outremer: #2f2e2c; background: #F5F5F3; color: #2f2e2c; box-shadow: inset 0 1px 0 rgba(47,46,44,.14); } .pal-e .punto { color: var(--firma); } .pal-e #kind-words .punto, .pal-e #about .punto, .pal-e .filo .punto { color: #F25500; } .pal-e .stack { background: var(--azul); color: #ECE8E0; } .pal-e .stack .banda { border-color: rgba(236,232,224,.3); } .pal-e .banda-rollo-2 { -webkit-text-stroke-color: #ECE8E0; } .pal-e .bloque { background: #F5F5F3; } .pal-f .cli { background: var(--azul); } .pal-f .corte, .pal-f #corte { --outremer: var(--azul); } .pal-e #modo, .pal-e .modo { display: none !important; } /* borrador paleta-g (8 nov): G = F + cruce. UP NEXT en claro con letras azules; MY PROJECTS barre encima en azul y aterriza en Selected work (azul). Mismos 3 colores, sin marino */ .pal-g .corte { background: #F5F5F3; } .pal-g .corte-a { color: var(--azul); } .pal-g .corte, .pal-g #corte { --outremer: var(--azul); --sobre-outremer: #ECE8E0; } /* ?cierre=claro: Thanks for watching y pie en el claro de About */ .pal-cierre .thanks, .pal-cierre .pie { --page:#F5F5F3;--ink:#2f2e2c;--hueso:#E8E6E1;--sup:#e8e6df;--linea:rgba(47,46,44,.16);--tecla:#2f2e2c;--tecla-txt:#E8E6E1;--tecla-sombra:#1d1c1b;background:var(--page);color:var(--ink); } .pal-cierre .thanks .punto, .pal-cierre .pie .punto { color: #F25500; } /* ?cierre=pie: Thanks se queda azul (cierre de transmision) y solo el pie en claro */ .pal-pie .pie { --page:#F5F5F3;--ink:#2f2e2c;--hueso:#E8E6E1;--sup:#e8e6df;--linea:rgba(47,46,44,.16);--tecla:#2f2e2c;--tecla-txt:#E8E6E1;--tecla-sombra:#1d1c1b;background:var(--page);color:var(--ink); } .pal-pie .pie .punto { color: #F25500; } /* paleta-g2 (8 nov): con Thanks claro la esfera grande desaparecia: la esfera vive en .esf (fixed, z 1) y Thanks era z 2 con fondo, asi que su fondo la tapaba. Thanks deja de ser capa propia (su fondo queda abajo de la esfera) y su texto sube a z 2 (arriba de la esfera), como en la Thanks azul. */ .pal-cierre .thanks { z-index: auto; } .pal-cierre .thanks > * { position: relative; z-index: 2; } /* paleta-g2 ronda 2 (8 nov): pruebas por URL */ .pal-ens-tinta.pal-g .corte-a { color: #2F2E2C; } /* ?ens=tinta: EN SEGUIDA con la letra oscura normal */ .pal-menu-claro .guia { --sup:#F5F5F3; --ink:#2f2e2c; --linea:rgba(47,46,44,.16); --tecla:#2f2e2c; --tecla-txt:#E8E6E1; --tecla-sombra:#1d1c1b; background:#F5F5F3; color:#2f2e2c; } .pal-menu-azulito .guia { --sup:#A9B6F2; --ink:#2f2e2c; --linea:rgba(47,46,44,.18); --tecla:#2f2e2c; --tecla-txt:#E8E6E1; --tecla-sombra:#1d1c1b; background:#A9B6F2; color:#2f2e2c; } /* paleta-g2 ronda 3 (8 nov): EN SEGUIDA en tinta ya es lo normal en la G (Rodrigo lo eligio) */ .pal-g .corte-a { color: #2F2E2C; } /* ?menu=claro-acento: menu claro y el canal en el que estas (o al pasar el mouse) en azulito */ .pal-menu-claro-acento .guia { --sup:#F5F5F3; --ink:#2f2e2c; --linea:rgba(47,46,44,.16); --tecla:#2f2e2c; --tecla-txt:#E8E6E1; --tecla-sombra:#1d1c1b; background:#F5F5F3; color:#2f2e2c; } .pal-menu-claro-acento .guia ol a { border-radius: 6px; transition: background .25s; } .pal-menu-claro-acento .guia ol a.aqui, .pal-menu-claro-acento .guia ol a:hover { background: #A9B6F2; box-shadow: 0 0 0 6px #A9B6F2; } /* menu claro (con o sin acento): una linea finita abajo para que no se funda con las secciones claras */ .pal-menu-claro .guia, .pal-menu-claro-acento .guia { box-shadow: 0 1px 0 rgba(47,46,44,.16), 0 10px 24px rgba(0,0,0,.08); } /* ?aire=1: mas aire entre Philosophy y About (mismo claro) */ .pal-aire #about { padding-top: calc(var(--pad) + 14svh); } /* v18.108: la foto de About en compu sin marquito (pedido 8 nov), con sus esquinas redondeadas */ @media (min-width: 761px) { .about-foto, .noche .about-foto { padding: 0; background: none; border-radius: 8px; } /* 8 px: la regla de fotos */ } /* v18.110: la franja entre el menu claro y la pagina se tapa con una tira clara pegada arriba de la pagina (baja con ella). Antes (v18.108) se ponia claro el fondo del body y las secciones transparentes (hero, What I do, Thanks) se aclaraban con el menu abierto. */ #pagina { position: relative; } .pal-menu-claro #pagina::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100lvh; background: #F5F5F3; pointer-events: none; } /* v18.109 regla de acentos (ver REGLAS-DE-ESTILO): titulo RA en 2+ lineas con acento, tilde o dieresis en una linea de abajo */ .lh-acento, .lh-acento * { line-height: 1.2 !important; } /* v18.110: apenitas (pedido 8 nov); con 1.2 la tilde queda 2-3 px separada */ /* v18.110: las marquesinas de lado llevan el mismo +0.25 px que todos los titulos RA */ .lat-rollo { letter-spacing: .25px; } /* v18.111: el boton del menu gira al abrir y cerrar al mismo paso que el menu (1.2 s, misma curva). Otra regla le habia dejado solo la transicion de opacidad y el giro salia de golpe */ #perilla { transition: opacity .6s var(--lento), transform 1.2s var(--lento), box-shadow .3s; } /* v18.111: nombres de proyecto en una sola linea; si no cabe junto al link, el link baja */ .cli-pie h3 { white-space: nowrap; } .cli-pie.cli-pie-apila { grid-template-columns: 1fr; } .cli-pie.cli-pie-apila .lnk { grid-row: auto; grid-column: 1; justify-self: start; } /* v18.114: se quitaron las cortinillas de v18.113 (EN SEGUIDA y Philosophy), pedido 8 nov */ /* v18.115: la raya azulada entre Philosophy y Sobre mi era el fondo azul de la pagina colandose por medio pixel (la orilla de Sobre mi cae en fraccion y su recorte la suaviza). Philosophy se extiende 3 px por debajo con su mismo claro. */ #philosophy { box-shadow: inset 0 1px 0 rgba(47, 46, 44, .14), 0 3px 0 #F5F5F3; }