/* ============================================================ DYEGO — Sistema Visual 2026 · design tokens + component layer Fuente única de verdad. Linkeado en el de cada página. Todo lo visual está scopeado bajo .dy-* / [data-reveal], así que sólo linkear este archivo NO cambia nada hasta optar-in. ============================================================ */ /* ---------- @font-face: firma de marca (Ventilla) ---------- */ @font-face { font-family: 'Ventilla Script'; src: url('fonts/Ventilla.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* superficies (escala tonal real, no una sola nota) */ --dy-bg: #0d0d0d; --dy-surface-1: #141414; --dy-surface-2: #1a1a1a; --dy-surface-3: #212121; /* acento de marca — cada página puede redefinir estos dos */ --dy-accent: #B1C825; --dy-accent-deep: #90A419; /* tints del acento (siguen a --dy-accent vía color-mix) */ --dy-accent-a06: color-mix(in srgb, var(--dy-accent) 6%, transparent); --dy-accent-a12: color-mix(in srgb, var(--dy-accent) 12%, transparent); --dy-accent-a20: color-mix(in srgb, var(--dy-accent) 20%, transparent); --dy-accent-a45: color-mix(in srgb, var(--dy-accent) 45%, transparent); --dy-accent-a60: color-mix(in srgb, var(--dy-accent) 60%, transparent); /* líneas / bordes */ --dy-line: rgba(255,255,255,0.09); --dy-line-2: rgba(255,255,255,0.14); /* estados */ --dy-error: #e8705a; /* coral — validación de formularios */ /* texto */ --dy-text: #ffffff; --dy-text-2: #c4c4c4; --dy-text-3: #9a9a9a; --dy-text-4: #6b6b6b; /* profundidad: sombras + glow verde */ --dy-shadow-1: 0 4px 22px -10px rgba(0,0,0,0.65); --dy-shadow-2: 0 28px 64px -28px rgba(0,0,0,0.8); --dy-glow: 0 0 44px color-mix(in srgb, var(--dy-accent) 26%, transparent); --dy-glow-soft:0 0 90px color-mix(in srgb, var(--dy-accent) 14%, transparent); /* radios */ --dy-r-sm: 10px; --dy-r: 14px; --dy-r-lg: 20px; --dy-r-xl: 28px; /* easing (curvas custom — más punch que las built-in) */ --dy-ease-out: cubic-bezier(.23, 1, .32, 1); --dy-ease-io: cubic-bezier(.77, 0, .175, 1); --dy-ease-drawer: cubic-bezier(.32, .72, 0, 1); --dy-ease-emph: cubic-bezier(.2, .8, .2, 1); /* duraciones */ --dy-t-fast: 160ms; --dy-t-ui: 240ms; --dy-t-rev: 680ms; } /* ============================================================ MOTION — scroll reveal (activado por dyego-enhance.js) El JS agrega .is-in cuando el elemento entra al viewport. Regla de wrapper: aplicar data-reveal en contenedores SIN transform inline propio (o en wrappers nuevos). ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dy-t-rev) var(--dy-ease-out), transform var(--dy-t-rev) var(--dy-ease-out); transition-delay: var(--dy-reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="fade"] { transform: none; } [data-reveal="scale"] { transform: translateY(24px) scale(.965); } [data-reveal="left"] { transform: translateX(-28px); } [data-reveal="right"] { transform: translateX(28px); } [data-reveal].is-in { opacity: 1; transform: none; } /* ============================================================ COMPONENTES (opt-in por clase) ============================================================ */ /* --- Card con profundidad (reemplaza la caja plana #161616) --- */ .dy-card { position: relative; background: linear-gradient(180deg, var(--dy-surface-2), var(--dy-surface-1)); border: 1px solid var(--dy-line); border-radius: var(--dy-r); box-shadow: var(--dy-shadow-1); transition: border-color var(--dy-t-ui) var(--dy-ease-out), box-shadow var(--dy-t-ui) var(--dy-ease-out), transform var(--dy-t-ui) var(--dy-ease-out); } @media (hover: hover) and (pointer: fine) { .dy-card:hover { border-color: var(--dy-accent-a45); box-shadow: var(--dy-shadow-2), 0 0 0 1px var(--dy-accent-a20); transform: translateY(-3px); } } /* --- Media card (proyecto) con overlay + zoom origin-aware --- */ .dy-media { position: relative; overflow: hidden; border-radius: var(--dy-r); border: 1px solid var(--dy-line); background: var(--dy-surface-1); box-shadow: var(--dy-shadow-1); transition: border-color var(--dy-t-ui) var(--dy-ease-out), box-shadow var(--dy-t-ui) var(--dy-ease-out), transform var(--dy-t-ui) var(--dy-ease-out); } .dy-media > img { transition: transform 620ms var(--dy-ease-out), filter var(--dy-t-ui) ease; } @media (hover: hover) and (pointer: fine) { .dy-media:hover { border-color: var(--dy-accent-a45); box-shadow: var(--dy-shadow-2), 0 0 0 1px var(--dy-accent-a20); transform: translateY(-3px); } .dy-media:hover > img { transform: scale(1.06); } } /* --- Stats band (Sobre mí: +17M, 15+, 3, +2) --- */ .dy-stats { width: 100vw; position: relative; left: 50%; margin-left: -50vw; border-top: 1px solid var(--dy-line); border-bottom: 1px solid var(--dy-line); background: linear-gradient(180deg, color-mix(in srgb, var(--dy-accent) 5%, transparent), transparent 70%); overflow: hidden; } .dy-stats-inner { max-width: 1240px; margin: 0 auto; padding: clamp(30px, 4vw, 46px) clamp(24px, 5vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); } .dy-stat { position: relative; padding: 2px clamp(14px, 3vw, 36px); } .dy-stat:first-child { padding-left: 0; } .dy-stat + .dy-stat { border-left: 1px solid var(--dy-line); } .dy-stat-v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; color: var(--dy-accent); text-shadow: 0 0 34px color-mix(in srgb, var(--dy-accent) 32%, transparent); } .dy-stat-l { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--dy-text-3); margin-top: 13px; line-height: 1.35; max-width: 22ch; } @media (max-width: 700px) { .dy-stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } .dy-stat { padding: 2px clamp(14px, 4vw, 24px); } .dy-stat:nth-child(odd) { border-left: 0; padding-left: 0; } .dy-stat:nth-child(n+3) { border-top: 1px solid var(--dy-line); padding-top: 30px; } } /* --- Tool pills con logo (monocromo + color de marca en hover) --- */ .dy-tool { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .3px; color: var(--dy-text-2); background: var(--dy-surface-2); border: 1px solid var(--dy-line-2); border-radius: 999px; padding: 7px 15px; cursor: default; transition: border-color var(--dy-t-ui) var(--dy-ease-out), background var(--dy-t-ui) var(--dy-ease-out), color var(--dy-t-ui) var(--dy-ease-out), transform var(--dy-t-ui) var(--dy-ease-out); } @media (hover: hover) and (pointer: fine) { .dy-tool:hover { border-color: var(--dy-accent-a45); background: var(--dy-surface-3); color: var(--dy-text); transform: translateY(-2px); } } /* ícono recoloreable vía mask (el SVG es la silueta; el color lo da la caja) */ .dy-ico { width: 15px; height: 15px; flex: none; display: inline-block; background: currentColor; color: #8f8f8f; /* estado calmo (monocromo) */ -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: color var(--dy-t-ui) var(--dy-ease-out); } .dy-tool:hover .dy-ico { color: var(--brand, var(--dy-accent)); } /* revela color de marca */ /* --- Cert pills (Formación) — tintado del acento, distinto de las herramientas --- */ .dy-cert { display: inline-flex; align-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .3px; color: var(--dy-accent); background: var(--dy-accent-a06); border: 1px solid var(--dy-accent-a45); border-radius: 999px; padding: 7px 15px; transition: background var(--dy-t-ui) var(--dy-ease-out), transform var(--dy-t-ui) var(--dy-ease-out); } @media (hover: hover) and (pointer: fine) { .dy-cert:hover { background: var(--dy-accent-a12); transform: translateY(-2px); } } /* --- Retrato (Sobre mí): profundidad + grayscale→color en hover --- */ .dy-portrait { box-shadow: var(--dy-shadow-2); transition: box-shadow .45s var(--dy-ease-out); } .dy-portrait-img { filter: grayscale(1) contrast(1.02); transition: filter .6s var(--dy-ease-out), transform .6s var(--dy-ease-out); } @media (hover: hover) and (pointer: fine) { .dy-portrait:hover { box-shadow: var(--dy-shadow-2), 0 0 0 1px var(--dy-accent-a45), var(--dy-glow-soft); } .dy-portrait:hover .dy-portrait-img { filter: grayscale(0) contrast(1); transform: scale(1.02); } } /* --- Ambient glow (fondo hero / bandas) --- */ .dy-glow-amb { position: absolute; pointer-events: none; z-index: 0; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--dy-accent) 18%, transparent) 0%, transparent 70%); filter: blur(6px); opacity: .9; } /* --- Firma manuscrita como elemento gráfico --- */ .dy-sign { font-family: 'Ventilla Script', cursive; color: var(--dy-accent); line-height: .9; letter-spacing: .01em; -webkit-font-smoothing: antialiased; } /* watermark decorativo del hero: ocultar en mobile (evita overlap en pantallas chicas) */ @media (max-width: 640px) { .dy-sign[aria-hidden="true"] { display: none; } } /* --- Press feedback (para elementos SIN transform inline propio) --- */ .dy-press { transition: transform var(--dy-t-fast) var(--dy-ease-out); } .dy-press:active { transform: scale(.97); } /* --- Bento grid (portfolio destacado del home) --- Las cards salen de un loop → targeteo por nth-child, no por clase. 8 tiles: #1 destacado 2×2 + #6 wide 2×1 = 3 filas de 4 col, sin huecos. Las cards traen aspect-ratio:1/1 inline; para las que abarcan varias celdas hay que anularlo (auto) y dejar que la grilla defina el alto. */ .dy-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; grid-auto-flow: dense; /* red de seguridad: rellena huecos en breakpoints intermedios */ gap: 16px; } .dy-bento > * { min-width: 0; } .dy-bento > *:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto !important; /* la grilla (2 filas) define el alto → cuadrado */ } .dy-bento > *:nth-child(6) { grid-column: span 2; aspect-ratio: auto !important; /* 2 col × 1 fila → landscape 2:1 */ } @media (max-width: 860px) { .dy-bento { grid-template-columns: repeat(2, 1fr); } /* full-width solas → necesitan aspect-ratio propio o colapsan a 0 de alto */ .dy-bento > *:nth-child(1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 1 / 1 !important; } /* hero cuadrado */ .dy-bento > *:nth-child(6) { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1 !important; } /* banner landscape */ } @media (max-width: 560px) { .dy-bento { grid-template-columns: 1fr 1fr; gap: 12px; } .dy-bento > *:nth-child(1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 1 / 1 !important; } /* hero cuadrado full-width */ .dy-bento > *:nth-child(6) { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1 !important; } /* banner landscape */ } /* ============================================================ SHELL — realces universales keyed en hooks existentes (aditivos: sólo tocan propiedades no seteadas inline) ============================================================ */ /* preloader: glow verde en la barra de carga */ .dy-pl-bar { box-shadow: 0 0 18px color-mix(in srgb, #B1C825 55%, transparent); } /* header: sombra sutil cuando se scrollea (clase seteada por dyego-enhance.js) */ header.dy-scrolled { box-shadow: 0 14px 40px -24px rgba(0,0,0,0.9); } /* nav item: subrayado verde animado al hover (elemento de marca del menú) */ [data-r="navitem"]:hover > span:last-child { width: 100% !important; } /* botón "ver todo el portfolio": subrayado crece + flecha se desliza */ [data-r="allbtn"]:hover .dy-ul { width: 100%; } [data-r="allbtn"]:hover [data-r="allarrow"] { transform: translateX(4px); } /* ============================================================ Accesibilidad — respetar prefers-reduced-motion Mantener opacidad (comprensión), quitar movimiento. ============================================================ */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .dy-card, .dy-media, .dy-media > img, .dy-press { transition: border-color var(--dy-t-ui) ease, box-shadow var(--dy-t-ui) ease !important; } .dy-card:hover, .dy-media:hover, .dy-press:active { transform: none !important; } .dy-media:hover > img { transform: none !important; } }