/* ========================================================================== GS01 — VARIABLES Todo lo ajustable vive aquí. Cambia valores, no nombres. Fuentes de verdad: assets/identidad/color/gs01-color-hierarchy.txt fonts/Font Heriarchy.txt ========================================================================== */ /* -------------------------------------------------------------------------- 1. FUENTES Europa Grotesk SH OP. Los .otf declaran todos peso 400, así que el peso real se asigna aquí a mano. PENDIENTE: confirmar licencia web antes de publicar. -------------------------------------------------------------------------- */ @font-face { font-family: "Europa Grotesk"; src: url("../fonts/EUROPA/SG%20-%20Europa%20Grotesk%20SH%20OP%20DemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Europa Grotesk"; src: url("../fonts/EUROPA/SG%20-%20Europa%20Grotesk%20SH%20OP%20Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------------------ 2. PALETA — valores fijos (no cambian entre modos) ------------------------------------------------------------------------ */ --alabaster: #DEDEDE; /* Alabaster Grey */ --platinum: #EBEBEB; /* Platinum */ --silver: #BBBBBB; /* Silver */ --gunmetal: #3D3D3D; /* Gunmetal */ --onyx: #161616; /* Onyx */ /* ------------------------------------------------------------------------ 3. ROLES — MODO CLARO (por defecto) Usa siempre los roles en el código, nunca los colores directos. ------------------------------------------------------------------------ */ --c-bg: var(--alabaster); /* 60% · fondo */ --c-strong: var(--onyx); /* 15% · títulos, cursor, botones, bloques */ --c-text: var(--gunmetal); /* 10% · texto, iconos, detalles */ --c-detail: var(--platinum); /* 10% · detalles (el más claro) */ --c-text-2: var(--silver); /* 5% · texto secundario, iconos, detalles AVISO: 1,4:1 sobre Alabaster, no legible como texto */ /* ------------------------------------------------------------------------ 4. TIPOGRAFÍA — familias y pesos CAMBIAR LA FUENTE PRINCIPAL: edita solo --font-main con el nombre de la nueva familia. Si es una fuente propia (archivos en /fonts), declárala antes con su @font-face en la sección 1, con los mismos pesos (600 y 300), y añade sus archivos a la lista de dev/build-dist.mjs. Si es una fuente del sistema (p. ej. "Helvetica Neue"), basta con --font-main. ------------------------------------------------------------------------ */ --font-main: "Europa Grotesk"; /* la fuente de toda la web */ --font-family: var(--font-main), "Helvetica Neue", Arial, sans-serif; /* con reservas por si no carga */ --font-primary: 600; /* DemiBold · títulos, botones */ --font-secondary: 300; /* Light · textos, descripciones */ /* ------------------------------------------------------------------------ 5. ESCALA TIPOGRÁFICA — ESCRITORIO PROVISIONAL: no hay guía todavía. Valores de partida, ajustables. ------------------------------------------------------------------------ */ --fs-xs: 11px; /* metadatos, etiquetas */ --fs-sm: 13px; /* navegación, botones */ --fs-base: 15px; /* texto corrido */ --fs-md: 20px; /* subtítulos */ --fs-lg: 32px; /* títulos de sección */ --fs-xl: 56px; /* títulos de proyecto */ --fs-display: 120px; /* titular principal */ --lh-tight: 0.9; /* titulares grandes */ --lh-text: 1.35; /* texto corrido */ --ls-display: -0.02em; /* tracking titulares */ --ls-text: 0; /* tracking texto */ --ls-label: 0.02em; /* tracking etiquetas pequeñas */ /* ------------------------------------------------------------------------ 6. LOGO ------------------------------------------------------------------------ */ --logo-color: var(--c-strong); /* ------------------------------------------------------------------------ 7. FONDO REACTIVO — REJILLA EN REPOSO La cruz es cross.svg. Referencia original: background_test.png, a 1920 px equivalía a paso 104,8 × 75,8, cruz 32, Platinum, opacidad 1. ------------------------------------------------------------------------ */ --bg-color: var(--c-bg); /* fondo de la página */ --grid-color-rest: var(--silver); /* color de las cruces en reposo */ --grid-opacity-rest: 0.3; /* opacidad de las cruces en reposo (0–1) */ --grid-step-x: 50px; /* paso horizontal entre centros de cruz */ --grid-step-y: 50px; /* paso vertical entre centros de cruz */ --grid-cross-size: 10px; /* tamaño de la caja de cross.svg (32 = tamaño real) */ /* ------------------------------------------------------------------------ 7b. FONDO REACTIVO — AURA Y ZOOM Alrededor del cursor (o del dedo) las cruces pasan del color de reposo al activo y crecen, sin moverse de su sitio. Fuerza 1 en el centro y 0 en el borde del radio. ------------------------------------------------------------------------ */ --grid-color-active: var(--silver); /* color de las cruces en el centro del aura */ --grid-opacity-active: 0.5; /* opacidad en el centro del aura (0–1) */ --aura-radius: 600px; /* radio del aura */ --aura-hardness: 0; /* dureza del borde: 0 = caída suave desde el centro, 1 = borde seco */ --aura-scale-max: 1.5; /* escala de la cruz en el centro del aura (1 = sin zoom) */ --aura-smoothing: 0.3; /* suavizado del movimiento del aura: 0 = va pegada al cursor, 0,98 = muy lenta */ /* ------------------------------------------------------------------------ 7c. FONDO REACTIVO — INCLINACIÓN Y SCROLL El plano de cruces se inclina según la posición del cursor (eje horizontal y vertical, hasta ±--tilt-max) con perspectiva. El lienzo se agranda solo lo necesario para que no se vean sus bordes. La rueda del ratón desplaza el bloque de cruces (rueda abajo → sube). ------------------------------------------------------------------------ */ --tilt-max: 8deg; /* inclinación máxima en cada eje (negativo = sentido contrario) */ --tilt-perspective: 650px; /* distancia de perspectiva: más alto = más leve */ --grid-scroll-speed: 1; /* píxeles de desplazamiento por píxel de rueda (0 = sin scroll) */ --grid-scroll-smoothing: 0.98; /* suavizado del scroll: 0 = seco, 0,98 = mucha inercia */ /* ------------------------------------------------------------------------ 8. CURSOR assets/web-assets/cursor/cursor.txt: CURSOR1 en reposo, CURSOR2 sobre lo seleccionable, color opuesto al fondo. De estos dos colores se usa, en cada superficie, el que más contrasta con su fondo. Los nombres deben ser de la paleta (hay un SVG derivado por color). ------------------------------------------------------------------------ */ --cursor-on-light: gunmetal; /* para fondos claros (Alabaster → Gunmetal) */ --cursor-on-dark: alabaster; /* para fondos oscuros (Gunmetal → Alabaster) */ --cursor-size: 15px; /* diámetro del aro (32 = tamaño del archivo) */ --cursor-blur: 0.6px; /* desenfoque gaussiano (0 = nítido) */ /* ------------------------------------------------------------------------ 9. PANTALLA DE CARGA Brief: assets/pantalla_de_carga/pantalla_de_carga.txt Paso 1 — ruedita. Una estela de opacidad recorre las 8 barras en sentido horario; la barra de cabeza es la más opaca, larga y gruesa, y las de detrás se apagan y encogen. La ruedita dura lo que tarde la web en cargar (mínimo --loader-min-duration) y termina la vuelta en curso. La capa de color tapa el fondo real y se va haciendo transparente. ------------------------------------------------------------------------ */ --loader-bg: var(--platinum); /* color de la capa que tapa la web */ --loader-color: var(--silver); /* color de la ruedita y la cruz central */ --loader-wheel-scale: 0.4; /* tamaño de la ruedita (1 = tamaño del SVG a 1920 px de ancho) */ --loader-delay: 300ms; /* pantalla vacía antes de que aparezca la ruedita */ --loader-in-duration: 1500ms; /* duración de la aparición de la ruedita */ --loader-in-scale: 0.5; /* escala de partida de la aparición (1 = sin escala) */ --loader-min-duration: 3000ms; /* duración mínima de la ruedita aunque la web cargue antes */ --loader-lap: 1500ms; /* tiempo de una vuelta de la estela */ --loader-trail: 5; /* largo de la estela, en barras (1–8) */ --loader-bar-opacity-min: 0; /* opacidad de las barras fuera de la estela */ --loader-bar-length-min: 0.7; /* largo de las barras fuera de la estela (1 = largo del SVG) */ --loader-bar-width-min: 0.29; /* grosor de las barras fuera de la estela (1 = grosor del SVG) */ --loader-bg-wheel-end: 0.85; /* opacidad de la capa al terminar la ruedita (1 = opaca) */ --loader-out-duration: 1200ms; /* PROVISIONAL: salida mientras no existen los pasos 3–5 */ /* Paso 2 — la cruz era la llave. La cruz central gira sobre su eje vertical; de perfil se convierte en la llave (02_llave_cruz1.svg), que termina el giro centrada. Después la llave va a su sitio mientras las 8 barras viajan al centro, se alinean y se funden en la cruz de 02. */ --loader-p2-flip: 2100ms; /* giro completo cruz → llave */ --loader-p2-hold: 150ms; /* pausa con la llave centrada */ --loader-p2-gather: 900ms; /* llave a su sitio + barras al centro */ --loader-p2-twist: 45deg; /* giro de las barras diagonales al alinearse: -45 = antihorario, 45 = horario */ --loader-p2-bg-end: 0.6; /* opacidad de la capa al terminar el paso 2 */ /* Inclinación 3D de la escena según el ratón (o el dedo), en todas las paradas. Solo afecta a las formas de la carga, no al fondo. */ --loader-tilt-max: 30deg; /* inclinación máxima en cada eje (negativo = sentido contrario) */ --loader-tilt-perspective: 200px; /* distancia de perspectiva: más alto = más leve */ --loader-tilt-smoothing: 0.42; /* suavizado: 0 = pegada al ratón, 0,98 = muy lenta */ /* ------------------------------------------------------------------------ 10. LANDING PAGE Diseño: references/GS01_SKETCH/WIP _LANDPAGE (01 = reposo, 02 = W.I.P abierto), a 1920 × 1080. Las medidas sin unidad son PÍXELES DEL DISEÑO A 1920 DE ANCHO: la web las escala con el ancho de la pantalla (--u), así la composición se mantiene en cualquier escritorio. ------------------------------------------------------------------------ */ --u: calc(100vw / 1920); /* tamaño de 1 píxel del diseño en esta pantalla */ /* Home: logo + nombre, arriba a la izquierda. Un solo enlace. */ --home-logo-color: #787878; /* color del logo en el diseño. FUERA DE PALETA (≈ Gunmetal al 65 % sobre el fondo) */ --home-name-color: var(--silver); /* color del nombre */ --home-logo-size: 80; /* ancho del logo */ --home-name-size: 30; /* cuerpo del nombre */ --home-gap: 16; /* espacio entre logo y nombre */ --home-margin-top: 25; /* del borde superior al logo */ --home-margin-left: 31; /* del borde izquierdo al logo */ --home-hover-scale: 1.15; /* escala en hover (crece desde la izquierda) */ --home-duration: 250ms; /* duración de la transición de hover */ /* Main buttons: [SELECTED WORKS] y [CONTACT], alineados a la derecha */ --nav-color-rest: var(--silver); /* color en reposo (el del diseño) */ --nav-color-hover: var(--gunmetal); /* color en hover y con el teclado */ --nav-hover-scale: 1.05; /* escala en hover (crece desde la derecha) */ --nav-duration: 250ms; /* duración de la transición de hover */ --nav-size: 60; /* cuerpo del texto */ --nav-leading: 125; /* distancia entre las dos líneas (de línea a línea) */ --nav-margin-right: 202; /* del borde derecho al final del texto */ --nav-y: 52.1; /* posición vertical del centro del bloque, en % del alto de pantalla */ /* W.I.P: texto y tuerca, abajo a la derecha. Hover → Website.In.Progress */ --wip-color: #CFCECE; /* color del texto y la tuerca. FUERA DE PALETA (el de tuerca.svg y el diseño) */ --wip-text-size: 67; /* cuerpo del texto */ --wip-nut-size: 82; /* alto de la tuerca */ --wip-gap: 10; /* espacio entre el texto y la tuerca */ --wip-duration: 450ms; /* duración de la expansión */ --wip-margin-right: 202; /* del borde derecho a la tuerca */ --wip-margin-bottom: 50; /* del borde inferior a la tuerca */ /* ------------------------------------------------------------------------ 11. SELECTED WORKS Diseño: references/GS01_SKETCH/WIP_SELECTED_WORKS (01 = grid, 02 = proyecto abierto). Medidas sin unidad = píxeles del diseño a 1920. Grid invisible: cada carga coloca las portadas en sitios al azar, sin solaparse, y la página mide lo necesario para que quepan todas. ------------------------------------------------------------------------ */ --works-size: 302; /* ancho habitual de una portada */ --works-size-max: 454; /* ancho máximo (alguna portada sale más grande, hasta aquí) */ --works-gap: 60; /* separación mínima entre portadas */ --works-density: 5; /* portadas por pantalla de alto (menos = más aire y más scroll) */ --works-margin-top: 170; /* zona libre arriba, bajo el logo */ --works-margin-side: 50; /* margen libre a izquierda y derecha */ --works-margin-bottom: 140; /* zona libre abajo, sobre la etiqueta */ --works-reveal-duration: 450ms; /* aparición: la portada se descubre de arriba abajo, como en un escáner */ --works-scan-color: var(--platinum); /* color de la línea del escáner */ /* Volumen de las portadas: sombra de impreso apoyado sobre papel. Una sola luz para todo el grid, arriba a la izquierda (la sombra cae abajo a la derecha). Sin bordes redondeados. */ --works-shadow-color: var(--onyx); /* tono de la sombra */ --works-shadow-x: 5; /* desplazamiento horizontal (positivo = luz a la izquierda) */ --works-shadow-y: 7; /* desplazamiento vertical (positivo = luz arriba) */ --works-shadow-blur: 5; /* desenfoque */ --works-shadow-opacity: 0.32; /* opacidad */ /* Hover (solo ratón): la portada se levanta del papel. Crece y se inclina hacia el cursor (esa zona se hunde, la contraria sube); la sombra se aleja, se vuelve más difusa y se desplaza al lado contrario. */ --works-hover-scale: 1.1; /* escala al levantarse */ --works-tilt-max: 8deg; /* inclinación máxima (con el cursor en un borde) */ --works-tilt-perspective: 900px; /* perspectiva: más alto = más leve */ --works-tilt-duration: 350ms; /* lo que tarda en levantarse y en volver a apoyarse */ --works-tilt-smoothing: 0.85; /* suavizado de la inclinación: 0 = sigue al cursor en seco, 0,98 = muy lenta */ --works-shadow-lift: 2.2; /* cuánto se aleja la sombra al levantarse (1 = no se mueve) */ --works-open-hover-scale: 1.03; /* escala en hover de las imágenes del proyecto abierto (la inclinación es la del grid; poca escala para no tapar el título) */ /* Hover (solo con ratón): la portada va pasando por las imágenes del proyecto como un gif y aparece el título en pequeño, en Light */ --works-hover-interval: 500ms; /* tiempo de cada imagen */ --works-hover-title-size: 18; /* cuerpo del título pequeño */ --works-hover-title-color: var(--gunmetal); /* color del título pequeño */ --works-hover-title-gap: 10; /* distancia entre la portada y el título */ /* Proyecto abierto: velo sobre la página, tira horizontal de imágenes en bucle y título. Medidas del diseño a 1920 salvo donde se indica. */ --works-veil-color: #000; /* color del velo */ --works-veil-opacity: 0.88; /* opacidad del velo (en el diseño, la página queda a #1B1B1B) */ --works-open-duration: 250ms; /* fundido al abrir y cerrar */ --works-open-height: 85; /* alto de las imágenes, en % del alto de pantalla */ --works-strip-gap: 600; /* separación entre imágenes de la tira (600 ≈ en reposo solo se ve una) */ --works-wheel-sensitivity: 1; /* píxeles de tira por píxel de rueda */ --works-wheel-inertia: 0.9; /* inercia: 0 = seca, 0,98 = muy larga */ --works-curve: 20deg; /* curvatura 3D de la tira: giro de las imágenes en el borde de la pantalla (0 = plana) */ --works-curve-perspective: 300px; /* perspectiva de la curvatura */ /* Título del proyecto abierto (Europa Grotesk Light, como en el diseño) */ --works-title-color: var(--silver); --works-title-size: 47; /* cuerpo */ --works-title-weight: 300; /* peso: 300 = Light, 600 = DemiBold (las dos que se publican) */ --works-title-tracking: -0.035em; /* espaciado entre letras */ --works-title-leading: 42; /* distancia entre líneas */ --works-title-left: 1353; /* posición: desde el borde izquierdo */ --works-title-top: 84; /* posición: desde el borde superior (alineado con la imagen) */ --works-title-gap: 27; /* aire entre la imagen y el título: las imágenes anchas se reducen para no pasar por debajo */ --works-open-side: 50; /* margen lateral mínimo de las imágenes abiertas (manda en pantallas estrechas) */ /* Etiqueta [SELECTED WORKS], fija abajo a la derecha */ --works-label-color: var(--silver); --works-label-size: 44; --works-label-right: 50; --works-label-bottom: 44; /* ------------------------------------------------------------------------ 12. CONTACT Dos enlaces centrados (correo e Instagram) con el estilo de los botones del landing, pero con variables propias: cambiarlos aquí no toca el landing. Medidas sin unidad = píxeles del diseño a 1920 (× --u). ------------------------------------------------------------------------ */ --contact-color-rest: var(--silver); /* color en reposo (el de los botones del landing) */ --contact-color-hover: var(--gunmetal); /* color en hover y con el teclado */ --contact-hover-scale: 1.05; /* escala en hover (crece desde el centro) */ --contact-duration: 250ms; /* duración de la transición */ --contact-size: 60; /* cuerpo del texto (en pantallas estrechas se reduce solo para que quepa) */ --contact-leading: 125; /* separación entre los dos enlaces (de línea a línea) */ --contact-y: 0; /* desplazamiento vertical del bloque (negativo = más arriba) */ } /* -------------------------------------------------------------------------- 3b. ROLES — MODO OSCURO Se activa con . PENDIENTE: decidir si sigue al sistema, a un botón o a la sección. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --c-bg: var(--onyx); /* 60% · fondo */ --c-strong: var(--platinum); /* 15% · títulos, cursor, botones, bloques */ --c-text: var(--alabaster); /* 10% · texto, iconos, detalles */ --c-detail: var(--gunmetal); /* 10% · detalles */ --c-text-2: var(--silver); /* 5% · texto secundario, iconos, detalles */ } /* -------------------------------------------------------------------------- 5b. ESCALA TIPOGRÁFICA — MÓVIL Se diseña aparte; estos valores solo son el punto de partida. -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --fs-xs: 10px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 17px; --fs-lg: 24px; --fs-xl: 36px; --fs-display: 64px; /* Landing PROVISIONAL en móvil (falta su diseño): las mismas piezas, con el píxel de diseño más grande para que el texto se lea y los botones se toquen bien, y márgenes laterales más cortos. */ --u: calc(100vw / 950); --nav-margin-right: 40; --wip-margin-right: 40; --wip-margin-bottom: 40; /* Selected Works en móvil: grid propio (una columna irregular: cada portada a un ancho y una altura al azar, sin solaparse) y proyecto abierto con el título arriba y la imagen a casi todo el ancho */ --works-m-size-min: 58; /* ancho mínimo de portada, en % de pantalla */ --works-m-size-max: 84; /* ancho máximo de portada, en % de pantalla */ --works-m-gap: 90; /* separación vertical mínima entre portadas */ --works-margin-side: 40; --works-margin-top: 190; --works-margin-bottom: 200; --works-open-side: 40; --works-title-left: 40; --works-title-top: 190; --works-hover-title-size: 30; } }