/* ============================================================ VanDiex — Proyectos Sistema visual. Edita las variables de :root para re-marcar todo el sitio sin tocar nada más. ============================================================ */ :root { /* --- Color: tema oscuro (predeterminado) --- */ --ink: #0A0A0B; /* fondo */ --ink-2: #121214; /* superficies elevadas */ --ink-3: #1C1C1F; /* bordes suaves */ --bone: #EDEAE4; /* texto principal */ --bone-dim: #8C8880; /* texto secundario */ --bone-faint: #4A4842; /* texto terciario */ --bronze: #B08343; /* acento */ --bronze-lo: #6B4E28; /* Derivados que cambian con el tema */ --scrim: 10, 10, 11; /* base rgb de los degradados sobre foto */ --hairline: 237, 234, 228; --grain-op: .035; --header-blend: difference; --f-hero: grayscale(.25) brightness(.52) contrast(1.05); --f-card: grayscale(.35) brightness(.85); --f-mat: brightness(.8); --tint: rgba(176,131,67,.13); /* Velo del hero. En oscuro basta oscurecer de arriba y abajo. */ --hero-scrim: linear-gradient(to bottom, rgba(var(--scrim),.72) 0%, rgba(var(--scrim),.25) 38%, rgba(var(--scrim),.92) 100%), radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(var(--scrim),.55) 100%); /* --- Tipografía --- */ --serif: "Instrument Serif", "Times New Roman", ui-serif, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Escala fluida */ --t-mono: clamp(0.62rem, 0.58rem + 0.18vw, 0.72rem); --t-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem); --t-lead: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); --t-h3: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); --t-h2: clamp(2.6rem, 1.4rem + 5.4vw, 6.5rem); --t-h1: clamp(3.6rem, 0.5rem + 13vw, 15rem); /* --- Ritmo --- */ --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3.5rem); --section-y: clamp(5rem, 3rem + 9vw, 12rem); --maxw: 1680px; /* --- Movimiento --- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* salida suave */ --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1); /* entrada/salida */ --dur: 0.85s; /* --- Texturas --- */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --fade-mask: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); } /* --- Tema claro ------------------------------------------------------ Se activa con data-theme="claro" en . El botón del header lo alterna y guarda la elección; sin elección, sigue al sistema. ------------------------------------------------------------------- */ :root[data-theme="claro"] { --ink: #F5F3EE; --ink-2: #EAE7E0; --ink-3: #D7D3CA; --bone: #101013; --bone-dim: #4E4A44; /* oscurecido: sobre fondo hueso necesita más peso */ --bone-faint: #7C776D; --bronze: #7A5518; --bronze-lo: #B79C6A; --scrim: 245, 243, 238; --hairline: 22, 22, 26; --grain-op: .015; --header-blend: normal; /* La foto se aclara y se dessatura mucho: en claro compite con el texto */ --f-hero: grayscale(.55) brightness(1.16) contrast(.82); --f-card: grayscale(.15) brightness(1.01); --f-mat: brightness(1.01); --tint: rgba(122,85,24,.11); /* Velo direccional: casi sólido donde vive el texto, abierto a la derecha para que la fotografía siga respirando. */ --hero-scrim: linear-gradient(100deg, rgba(var(--scrim),.985) 0%, rgba(var(--scrim),.94) 34%, rgba(var(--scrim),.62) 62%, rgba(var(--scrim),.34) 100%), linear-gradient(to bottom, rgba(var(--scrim),.55) 0%, rgba(var(--scrim),0) 26%, rgba(var(--scrim),0) 64%, rgba(var(--scrim),.93) 100%); } /* Transición al cambiar de tema */ :root.theming, :root.theming * { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important; } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.has-smooth { scroll-behavior: auto; } /* el scroll con inercia lo maneja JS */ body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; font-weight: 350; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.is-locked { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, p, figure, ul { margin: 0; padding: 0; } ul { list-style: none; } ::selection { background: var(--bronze); color: var(--ink); } :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; } /* Utilidades tipográficas --------------------------------- */ .mono { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; } .serif { font-family: var(--serif); font-weight: 400; } .italic { font-family: var(--serif); font-style: italic; } .dim { color: var(--bone-dim); } .tnum { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .rule { height: 1px; background: var(--ink-3); border: 0; margin: 0; } /* ============================================================ Capas globales: grano, cursor, progreso ============================================================ */ .grain { position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: var(--grain-op); background-image: var(--grain-url); background-size: 180px; animation: grain 6s steps(6) infinite; will-change: transform; } @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); } } .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--bronze); z-index: 8000; pointer-events: none; } /* Cursor personalizado — solo con puntero fino */ .cursor, .cursor-dot { display: none; } @media (hover: hover) and (pointer: fine) { body.has-cursor { cursor: none; } body.has-cursor a, body.has-cursor button { cursor: none; } .cursor { display: block; position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--bone-faint); border-radius: 50%; z-index: 9500; pointer-events: none; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s; display: grid; place-items: center; } .cursor__label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .25s; white-space: nowrap; } .cursor-dot { display: block; position: fixed; top: 0; left: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--bone); border-radius: 50%; z-index: 9501; pointer-events: none; transition: opacity .3s; } .cursor.is-hover { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--bronze); border-color: var(--bronze); } .cursor.is-hover .cursor__label { opacity: 1; } .cursor.is-hover + .cursor-dot { opacity: 0; } } /* ============================================================ Preloader ============================================================ */ .preloader { position: fixed; inset: 0; background: var(--ink); z-index: 9800; display: grid; place-items: end stretch; padding: var(--gutter); transition: opacity .8s var(--ease), visibility .8s; } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--ink-3); padding-top: 1rem; } .preloader__name { font-family: var(--serif); font-size: clamp(2rem, 1rem + 4vw, 4.5rem); line-height: 1; } .preloader__count { font-family: var(--mono); font-size: clamp(2rem, 1rem + 4vw, 4.5rem); font-variant-numeric: tabular-nums; line-height: 1; } .preloader__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: 0 50%; } /* ============================================================ Header ============================================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 7000; padding: clamp(1rem, 2vw, 1.6rem) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; mix-blend-mode: var(--header-blend); transition: transform .6s var(--ease); } .header.is-hidden { transform: translateY(-120%); } .header__brand { display: flex; align-items: baseline; gap: .55rem; } .header__logo { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -0.01em; line-height: 1; } .header__since { color: var(--bone); opacity: .55; } .header__nav { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; } .header__nav a { position: relative; } .header__nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); } .header__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .themetoggle { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .16em; text-transform: uppercase; padding: .4rem .9rem .4rem .55rem; border: 1px solid currentColor; border-radius: 100px; opacity: .75; transition: opacity .4s var(--ease); } .themetoggle:hover { opacity: 1; } .themetoggle__dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); } @media (max-width: 720px) { .header__nav .is-optional { display: none; } .themetoggle span:last-child { display: none; } .themetoggle { padding: .4rem; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--gutter) * 3) var(--gutter) var(--gutter); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io), opacity 1.4s var(--ease-io); will-change: clip-path, opacity; } .hero__slide.is-active { opacity: 1; clip-path: inset(0 0 0 0); } .hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 9s linear; filter: var(--f-hero); } .hero__slide.is-active img { transform: scale(1); } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim); } .hero__inner { position: relative; z-index: 2; align-self: center; width: 100%; max-width: var(--maxw); margin-inline: auto; } .hero__kicker { display: flex; align-items: center; gap: .75rem; color: var(--bronze); margin-bottom: clamp(1rem, 2vw, 2rem); } .hero__kicker::before { content: ""; width: clamp(28px, 5vw, 64px); height: 1px; background: var(--bronze); transform-origin: 0 50%; } .hero__title { font-family: var(--serif); font-size: var(--t-h1); line-height: 0.86; letter-spacing: -0.035em; font-weight: 400; } .hero__title .italic { color: var(--bronze); } /* Revelado por línea con máscara */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); } .is-ready .reveal-line > span { transform: translateY(0); } .is-ready .reveal-line:nth-child(2) > span { transition-delay: .1s; } .hero__entry { margin-top: clamp(1.5rem, 3vw, 2.6rem); max-width: 46ch; font-size: var(--t-lead); line-height: 1.45; color: var(--bone-dim); opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease) .45s, transform 1s var(--ease) .45s; } .is-ready .hero__entry { opacity: 1; transform: none; } .hero__foot { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: end; border-top: 1px solid rgba(var(--hairline),.18); padding-top: 1.1rem; opacity: 0; transition: opacity 1s var(--ease) .7s; } .is-ready .hero__foot { opacity: 1; } .hero__metrics { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); } .hero__metric { display: flex; align-items: baseline; gap: .5rem; } .hero__metric b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 1rem + 2vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; } .hero__now { display: flex; align-items: center; gap: .6rem; color: var(--bone-dim); } .hero__now b { color: var(--bone); font-weight: 400; } .hero__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); animation: pulse 2.4s var(--ease-io) infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @media (max-width: 720px) { .hero__foot { grid-template-columns: 1fr; } .hero__now { order: -1; } } /* ============================================================ Manifiesto — texto que se enciende al hacer scroll ============================================================ */ .manifest { padding: var(--section-y) 0; } .manifest__grid { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); } @media (max-width: 900px) { .manifest__grid { grid-template-columns: 1fr; } } .manifest__label { color: var(--bronze); padding-top: .6rem; } .manifest__text { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2.6vw, 3.4rem); line-height: 1.24; letter-spacing: -0.02em; } .manifest__text p + p { margin-top: 1.2em; } /* cada palabra se aclara conforme entra en pantalla */ .w { color: var(--bone-faint); transition: color .5s var(--ease); } .w.on { color: var(--bone); } /* ============================================================ Índice de proyectos ============================================================ */ .projects { padding-bottom: var(--section-y); position: relative; } .section-head { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: baseline; justify-content: space-between; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .section-head h2 { font-family: var(--serif); font-size: var(--t-h2); line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; } .section-head h2 .italic { color: var(--bronze); } .controls { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; } .filters { display: flex; gap: .4rem; flex-wrap: wrap; } .filter { padding: .5rem 1.05rem; border: 1px solid var(--ink-3); border-radius: 100px; color: var(--bone-dim); transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .filter:hover { color: var(--bone); border-color: var(--bone-faint); } .filter[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); } .filter sup { font-size: .8em; opacity: .5; margin-left: .3em; vertical-align: super; } .viewtoggle { display: flex; border: 1px solid var(--ink-3); border-radius: 100px; overflow: hidden; } .viewtoggle button { padding: .5rem 1rem; color: var(--bone-dim); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; transition: color .35s, background-color .35s; } .viewtoggle button[aria-pressed="true"] { background: var(--ink-3); color: var(--bone); } /* --- Vista lista --- */ .list { border-top: 1px solid var(--ink-3); } .row { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.1fr) 2.5rem; gap: 1.5rem; align-items: center; padding: clamp(1.1rem, 2.2vw, 1.9rem) 0; border-bottom: 1px solid var(--ink-3); width: 100%; text-align: left; transition: opacity .5s var(--ease); } .row::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; bottom: 0; background: var(--ink-2); opacity: 0; transition: opacity .5s var(--ease); z-index: -1; } .row:hover::before { opacity: 1; } .row__num { font-family: var(--mono); font-size: var(--t-mono); color: var(--bone-faint); font-variant-numeric: tabular-nums; } .row__name { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; transition: transform .6s var(--ease), color .4s var(--ease); } .row:hover .row__name { transform: translateX(14px); } .badge { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--bronze-lo); padding: .22em .6em; border-radius: 100px; white-space: nowrap; } .row__place { color: var(--bone-dim); } .row__brands { color: var(--bone-faint); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__arrow { justify-self: end; color: var(--bone-faint); transition: transform .6s var(--ease), color .4s var(--ease); } .row:hover .row__arrow { transform: translate(6px, -6px); color: var(--bronze); } .row.is-out { display: none; } .row.no-photo .row__num { color: var(--bronze-lo); } @media (max-width: 1100px) { .row { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; } .row__brands { display: none; } } @media (max-width: 640px) { .row { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; row-gap: .35rem; } .row__place { grid-column: 2; font-size: .88rem; } .row:hover .row__name { transform: none; } } /* Imagen flotante que sigue al cursor */ .peek { position: fixed; top: 0; left: 0; width: clamp(220px, 22vw, 380px); aspect-ratio: 4 / 3; z-index: 6000; pointer-events: none; overflow: hidden; opacity: 0; transform-origin: 50% 50%; transition: opacity .45s var(--ease); will-change: transform; border-radius: 2px; } .peek.is-on { opacity: 1; } .peek img { width: 100%; height: 100%; object-fit: cover; } .peek__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--bone-faint); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; } @media (hover: none), (pointer: coarse) { .peek { display: none; } } /* --- Vista malla --- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); /* Fila mucho más holgada que columna: el rótulo vive debajo de cada imagen y necesita separarse de la fila siguiente. */ gap: clamp(3rem, 5vw, 6rem) clamp(1.5rem, 2.4vw, 3rem); } /* display:block es obligatorio: .card es