.darkmode-switcher + p{display:none;} /* ============================= APLICACIÓN A BLOQUES COMUNES ============================= */ body { background-color: var(--dl-bg-color); color: var(--dl-text-color); font-family: var(--dl-font-family); transition: background 0.3s, color 0.3s; } header.wp-block-template-part { max-width: fit-content; margin-left: auto; } .wp-block-button .wp-block-button__link { background-color: var(--dl-bg-color); color: var(--dl-text-color); font-weight: bold; text-decoration: none; } main.site-content{ padding-top:0!important; margin-top:-88px!important; } main .entry-content { width:100%; overflow:hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :root{ --grid-line-color: #8400ff2e; --bg-purple-color: #ded6ff; --darkmode-circle-x: 0px; --darkmode-circle-y: 0px; /* --bounce: linear( 0, 1 37.8%, 0.883 44.2%, 0.855 47.1%, 0.846 50%, 0.853 52.7%, 0.875 55.5%, 1 65.5%, 0.967 69.4%, 0.957 73.1%, 0.964 76.5%, 1 84.5%, 0.993 89.3%, 1 ); */ --spring-bounce: linear(0, 0.224 1.9%, 1.355 6.2%, 1.51, 1.568, 1.543, 1.448 10.3%, 0.794 14.7%, 0.709, 0.677, 0.691 17.7%, 0.745 18.8%, 1.117 23.2%, 1.184 25.2%, 1.176, 1.145 27.2%, 0.934 31.6%, 0.896, 0.917 35.7%, 1.038 40.1%, 1.059 42.1%, 1.051 43.8%, 0.983 48.2%, 0.966 50.6%, 0.971 52.3%, 1.01 56.7%, 1.019 59%, 0.989, 1.006, 0.997 84.1%, 0.999 ); --spring-typical: linear(0, 0.007, 0.027 2.1%, 0.11 4.5%, 0.592 14%, 0.7, 0.79, 0.865, 0.926, 0.973 26.2%, 1.007 28.9%, 1.023, 1.035, 1.041 35.3%, 1.043 37.9%, 1.038 42.4%, 1.011 55.5%, 1.001 63.6%, 0.998 74%, 1 ); --spring-smooth: linear(0, 0.005, 0.02 2.3%, 0.081 5%, 0.463 16.6%, 0.558, 0.639, 0.71, 0.77 29.7%, 0.821, 0.864 37.1%, 0.902 41.5%, 0.932 46.4%, 0.956 51.9%, 0.973 58.1%, 0.985 65.2%, 0.992 73.8%, 0.997 84.7%, 0.999 ); } @property --r { syntax: ""; inherits: false; initial-value: 0px; } @property --osc { syntax: ""; inherits: false; initial-value: 0px; } @property --scale { syntax: ""; inherits: false; initial-value: 0; } /* ============================= HERO WORDS ============================= */ .hero-word-icon { --r: 0px; --osc: 0px; --amp: 5px; --angle: calc(var(--index) * 45deg); --scale: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(var(--scale, 1)) translate(calc(var(--r) + var(--osc))) rotate(calc(-1 * var(--angle, 0deg))); animation-play-state: paused; } .hero-word-icon.paused-animation { animation-play-state: paused !important; } .hero-word:hover .hero-word-icon, .hero-word:focus-visible .hero-word-icon { --r: 70px; --scale:1; transition: transform 300ms linear(0 0%, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726 13.7%, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357 40.52%, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 100%); transition-duration: 650ms; transition-delay: calc(var(--index, 0) * 40ms); /* animation: wobble-around 1s ease-in-out infinite alternate; */ /* animation-delay: calc(var(--index) * 0.3s); */ } @keyframes wobble-around { from { --osc: calc(-1 * var(--amp)); } to { --osc: var(--amp); } } .emoji-sprite { width: 120px; height: 150px; background: url("https://dele.eus/wp-content/uploads/2025/06/hand-emoji-sprite.png") no-repeat top left; background-position: -480px 0; /* animation: emojiAnim 1s steps(7) infinite; */ /* animation: emojiAnim .1s linear infinite alternate; */ } .emoji-sprite:hover { background-position: -600px 0; animation: emojiAnim .1s linear infinite alternate; } @keyframes emojiAnim { /* from { background-position: 0 0; } to { background-position: -840px 0; } */ from { transform:rotateX(-40deg); } to { transform:rotateX(20deg); } } /* Mobile hero words */ svg.pointer-svg.hidden-view{ visibility:hidden!important; } svg.pointer-svg path { stroke: #fffd64!important; } svg.pointer-svg circle{ fill: #fffd64!important; } svg.pointer-svg path{ stroke-width: 2px; animation: pointer-effect 3.5s infinite; transform-origin: center bottom; } /*@media (max-width: 767.98px) { svg.pointer-svg:not(.item-1){ display:none; } } */ @keyframes pointer-effect { 0%, 5.1% { transform: translate(0, 0) scale(1); opacity:1; stroke-width: 5px; } 4.99%, 9.99% { opacity: 0.6 } 5%, 10%, 100% { transform: translate(0, -15px) scale(1.5); opacity:0; stroke-width: 10px; } } canvas#spline{width:300px!important;} /* ============================= HEADERS FADE IN ANIMATION ============================= */ .h2-title { overflow: hidden; } .h2-title > span { --fill: hsl(0 0% 70%); --accent: hsl(290, 67%, 76%); --underline-color: hsl(0 0% 50% / 0.15); --underline-width: 1lh; --underline-block-width: 100vmax; text-decoration: none; background-image: /* First one is the highlight */ linear-gradient(90deg, transparent calc(100% - 8ch), var(--accent) calc(100% - 8ch)), linear-gradient(90deg, var(--fill), var(--fill)), linear-gradient(90deg, var(--underline-color), var(--underline-color)); background-size: var(--underline-block-width) var(--underline-width), var(--underline-block-width) var(--underline-width), 100% var(--underline-width); background-repeat: no-repeat; background-position-x: 0; background-position-y: 100%; background-clip: text; color: hsl(0, 0%, 0%); } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .h2-title { view-timeline-name: --scroller; } .h2-title > span { background-position-x: calc(var(--underline-block-width) * -1), calc(var(--underline-block-width) * -1), 0; color: transparent; animation-name: fill-up, color-in; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-timeline: --scroller; animation-range: 150px 500px, 150px 700px; } @keyframes fill-up { to { background-position-x: 0, 0, 0; } } @keyframes color-in { to { color: var(--finish-fill); } } } } /* ============================= HEXAGON SKILLS SECTION ============================= */ .hexagon-canvas { position: absolute; inset: 0; z-index: 0; /* Hace que el propio canvas se desvanezca arriba/abajo */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 17%, black 50%, black 65%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 17%, black 50%, black 65%, transparent 100%) } @property --scroller-bg-angle { syntax: ''; inherits: false; initial-value: 0deg; } .scroller-filter{ filter: url(#noiseFilter); mix-blend-mode: hard-light; opacity: 0.35; } .scroller-bg{ /* Conic gradient morado usando el ángulo animable */ --scroller-bg-angle: 0deg; z-index:-1; /* clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); */ clip-path: polygon(50% 0%, 50% 0, 50% 8%, 50% 8%, 50% 20%, 50% 32%, 50% 8%, 50% 8%, 50% 0); background: radial-gradient(50% 90% at center top, #ad9bff4d, #0b0c164d ), linear-gradient(var(--scroller-bg-angle),#bc92cc, #625897); } @keyframes scroller-bg-spin { to { --scroller-bg-angle: 360deg; } } @keyframes scroller-bg-clip { to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } @keyframes scroller-bg-conic-clip { 0% { clip-path: polygon(50% 0%, 50% 0, 50% 8%, 50% 8%, 50% 20%, 50% 32%, 50% 8%, 50% 8%, 50% 0); } 15% { clip-path: polygon(50% 0%, 100% 0, 100% 8%, 50% 8%, 50% 20%, 50% 32%, 50% 8%, 0 8%, 0 0); } 85% { clip-path: polygon(50% 0, 100% 0, 100% 100%, 92% 100%, 92% 92%, 8% 92%, 8% 100%, 0 100%, 0 0); } 100% { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 92%, 50% 92%, 50% 100%, 0 100%, 0 0); } } /* 4) Scroll-linked animation (spec moderna) */ @supports (animation-timeline: view()) { .scroller-bg{ animation-name: scroller-bg-conic-clip; animation-duration: 1s; /* duración "virtual": mapea el progreso del scroll */ animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(block); animation-range: entry 80% entry 110%; } } /* (Opcional) Respetar usuarios con reducción de movimiento */ @media (prefers-reduced-motion: reduce) { .scroller-bg{ animation: none !important; --angle: 0deg; /* o un ángulo fijo que te guste */ } } .scroller{ --header-h: 64px; /* alto del encabezado */ --gap: 12px; --bg: #fff; --fg: #111; --accent: #111827; max-height: calc(var(--section-count, 3) * var(--header-h)); overflow: auto; position: relative; background: transparent; transition: max-height 0.85s var(--spring-bounce); /* Firefox */ scrollbar-width: thin; scrollbar-color: #fff644 #000000; /* thumb | track */ } .block-editor-page .scroller{ max-height: 600px; } /* WebKit (Chrome, Edge, Safari) */ .scroller::-webkit-scrollbar{ width: 12px; height: 12px; } .scroller::-webkit-scrollbar-track{ background: #000000; /* pale yellow track */ border-radius: 8px; } .scroller::-webkit-scrollbar-thumb{ background: #fff644; /* yellow thumb */ border-radius: 8px; border: 2px solid #000000; /* creates a gap effect */ box-shadow: inset 0 0 0 1px #0000001a; } .scroller::-webkit-scrollbar-thumb:hover{ background: #fff644; /* darker on hover */ } .scroller::-webkit-scrollbar-thumb:active{ background: #fff644; /* even darker when active */ } .scroller::-webkit-scrollbar-corner{ background: #000000; } /* Secciones */ .skill-details-section{ position: relative; } h3.section__title{ position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .6rem; color: #000000; height: var(--header-h); margin: 0; padding: 0 16px; background: linear-gradient(45deg, #ded6ff, #9c90ce); font-weight: 800; letter-spacing: .5px; font-size: 1.3rem; font-family: "Wotfard", sans-serif; border-bottom: 0.5px solid #0000004a; border-top: 0.5px solid #0000004a; } .section__body{ padding: 14px 23px 24px; line-height: 1.5; background: var(--dl-bg-color); box-shadow: 0 1px 0 rgba(255, 255, 255, .12), inset 0 10px 24px rgb(0 0 0 / 19%), inset 0 -10px 20px rgb(255 255 255 / 8%); color:#3b3b3b; font-size:1.1rem; width: 97%; margin-inline: auto; } .section__body p{font-size:1.1rem;} .section__body ul{ padding-left: 1.2rem; margin: .5rem 0; } .section__body ul li svg{ width:20px;height:20px; } /* Pila inferior (vive dentro del MISMO contenedor, pegada abajo) */ .dock{ position: sticky; bottom: 0; z-index: 3; /* degradado para separar visualmente la pila del contenido que pasa por detrás */ background: linear-gradient(#fffffffa, #fffffffa); border-top: 1px solid var(--border); } .dock__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; /* por si hay más elementos de los que caben */ } .dock__item{border-top: 0.5px solid #0000004a;background-color: var(--dl-bg-color);} .dock__item.hidden{ display: none; } .dock__btn{ all: unset; /* reset */ display: flex; width: 100%; align-items: center; gap: .6rem; height: var(--header-h); color: #000000; padding: 0 16px; cursor: pointer; background: linear-gradient(45deg, #ded6ff, #9c90ce); font-weight: 700; letter-spacing: .5px; font-size:1.3rem; font-family: "Watfard", sans-serif; } .dock__btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; } /* ============================= SKILLS FILTER ============================= */ .skills-filter { --filter-ease: linear( 0 0%, 0.0027 3.64%, 0.0106 7.29%, 0.0425 14.58%, 0.0957 21.87%, 0.1701 29.16%, 0.2477 35.19%, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987 68.28%, 0.875 75%, 0.9297 81.25%, 0.9687 87.5%, 0.9922 93.75%, 1 100% ); --duration: 0.26; --delay: 0.5; --theme: light; --b-r: 0px; } @property --x { syntax: ''; inherits: false; initial-value: 0; } @property --x2 { syntax: ''; inherits: false; initial-value: 100; } .trackdrop { clip-path: inset( 0 calc(var(--x2) * 100%) 0 calc(var(--x) * 100%) round var(--b-r, 100px) ); } .trackdrop::before { clip-path: inset( 0 calc((var(--x2) * 100%) + 1px) 0 calc((var(--x) * 100%) + 1px) round var(--b-r, 100px) ); } .trackdrop::after { clip-path: inset( 0 calc((var(--x2) * 100%) + 5px) 0 calc((var(--x) * 100%) + 5px) round var(--b-r, 100px) ); } .skills-filter[data-initiated='true'] { opacity: 1; } [data-initiated='true'] .trackdrop::before, [data-initiated='true'] .trackdrop::after, [data-initiated='true'] .trackdrop { opacity: 1; transition-property: --x, --x2, translate, transform; --d: calc((var(--duration) * var(--delay)) * 1s); transition-timing-function: var(--filter-ease); transition-duration: calc(var(--duration) * 1s), calc(var(--duration) * 1s), 0.26s, 0.16s; } [data-direction='positive'] .trackdrop::before, [data-direction='positive'] .trackdrop::after, [data-direction='positive'] .trackdrop { transition-delay: var(--d), 0s, 0s; } [data-direction='positive'] .trackdrop{ transform: skewX(-33deg); } [data-direction='negative'] .trackdrop::before, [data-direction='negative'] .trackdrop::after, [data-direction='negative'] .trackdrop { transition-delay: 0s, var(--d), 0s; } [data-direction='negative'] .trackdrop{ transform: skewX(33deg); } .trackdrop { z-index: 2; } .track:not(.trackdrop) label { opacity: 0.8; transition: opacity 0.26s ease, color 0.5s ease; color:var(--dl-text-color); } .track:not(.trackdrop) label:has(+ input:not(:checked)):hover { opacity: 1; } .skills-filter label { padding-inline: 1.7rem; padding-block: 0.75rem; display: inline-block; border-radius: 5px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: -1px; cursor: pointer; color:black; @media all and (max-width: 700px){ font-size:1rem; padding-inline:1.1rem; } } .skills-filter label:has(+ input:checked) { color: #fff644; } main { scrollbar-width: none; height: 100%; display: grid; place-items: center; padding: 0.5rem; } .skills-filter { opacity: 0; position: relative; transition: opacity 0.75s ease; } .trackdrop { opacity: 0; } .trackdrop { position: absolute; inset: 0; pointer-events: none; background: #000; border-radius: var(--b-r, 100px); color: canvas; translate: 0 0; transform: skewX(33deg); &::before { content: ''; position: absolute; top: 1px; left: 0; right: 0; bottom: 1px; border-radius: var(--b-r, 100px); opacity: 0.5; } &::after { content: ''; position: absolute; top: 1px; left: 0; right: 0; height: calc(50% - 1px); border-radius: 3px; opacity: 0.5; } } .skills-filter .track { display: flex; gap: 1rem; z-index: 0; } /* ============================= SKILLS GRID ============================= */ :root{ --gap: 12px; --cell: 200px; --radius: 14px; --bg: #0f172a; /* slate-900 */ --tile: #1e293b; /* slate-800 */ --tile-hi: #334155; /* slate-700 */ --text: #e2e8f0; /* slate-200 */ } .skills-section > div { container-type: inline-size; } .skills-section .skill-card .skill-more-info span{ display:flex; align-items: center; } .skills-section .skill-card .skill-more-info span > span:first-of-type{ background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmZkNzgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+IDxwYXRoIGQ9Ik0xMS4yODk2IDMuMzY2MzdDMTEuNTE5MyAyLjkyNDI3IDExLjYzNDIgMi43MDMyMyAxMS43ODgxIDIuNjMxMzlDMTEuOTIyMSAyLjU2ODgzIDEyLjA3NyAyLjU2ODgzIDEyLjIxMSAyLjYzMTM5QzEyLjM2NDkgMi43MDMyMyAxMi40Nzk4IDIuOTI0MjcgMTIuNzA5NSAzLjM2NjM3TDE0LjIyMjUgNi4yNzg2NUMxNC4zMjE2IDYuNDY5MzQgMTQuMzcxMSA2LjU2NDY4IDE0LjQ0NTQgNi42MjgwM0MxNC41MTEgNi42ODM5NCAxNC41ODk5IDYuNzIxOTUgMTQuNjc0NSA2LjczODM3QzE0Ljc3MDQgNi43NTY5NyAxNC44NzU4IDYuNzM2MjUgMTUuMDg2NyA2LjY5NDgxTDE4LjMwNjkgNi4wNjE5N0MxOC43OTU4IDUuOTY1OSAxOS4wNDAyIDUuOTE3ODYgMTkuMTkyMyA1Ljk5MzQyQzE5LjMyNDggNi4wNTkyMSAxOS40MjE0IDYuMTgwMjcgMTkuNDU2IDYuMzI0MDZDMTkuNDk1OCA2LjQ4OTIgMTkuMzk0NiA2LjcxNjgxIDE5LjE5MjIgNy4xNzIwM0wxNy44NTg2IDEwLjE3MDdDMTcuNzcxMyAxMC4zNjcxIDE3LjcyNzYgMTAuNDY1MyAxNy43MjQ0IDEwLjU2MjhDMTcuNzIxNiAxMC42NDkgMTcuNzQxMSAxMC43MzQ0IDE3Ljc4MSAxMC44MTA4QzE3LjgyNjIgMTAuODk3MyAxNy45MDgyIDEwLjk2NjggMTguMDcyIDExLjEwNThMMjAuNTc0NiAxMy4yMjlDMjAuOTU0NSAxMy41NTEzIDIxLjE0NDUgMTMuNzEyNCAyMS4xODAzIDEzLjg3ODVDMjEuMjExNCAxNC4wMjMxIDIxLjE3NyAxNC4xNzQgMjEuMDg2MiAxNC4yOTA4QzIwLjk4MTkgMTQuNDI0OSAyMC43NDA4IDE0LjQ4NzYgMjAuMjU4NyAxNC42MTMyTDE3LjA4MjcgMTUuNDQwMkMxNi44NzQ4IDE1LjQ5NDQgMTYuNzcwOCAxNS41MjE1IDE2LjY5MjUgMTUuNTc5OEMxNi42MjM0IDE1LjYzMTMgMTYuNTY4OCAxNS42OTk4IDE2LjUzNCAxNS43Nzg2QzE2LjQ5NDUgMTUuODY4IDE2LjQ5MTIgMTUuOTc1NCAxNi40ODQ3IDE2LjE5MDFMMTYuMzg1MSAxOS40NzA1QzE2LjM3IDE5Ljk2ODUgMTYuMzYyNCAyMC4yMTc1IDE2LjI1NDkgMjAuMzQ5QzE2LjE2MTMgMjAuNDYzNSAxNi4wMjE4IDIwLjUzMDcgMTUuODczOSAyMC41MzI1QzE1LjcwNCAyMC41MzQ1IDE1LjUwNDcgMjAuMzg1MiAxNS4xMDU5IDIwLjA4NjVMMTIuNDc5MSAxOC4xMTkxQzEyLjMwNzEgMTcuOTkwMyAxMi4yMjExIDE3LjkyNTkgMTIuMTI2NyAxNy45MDExQzEyLjA0MzQgMTcuODc5MSAxMS45NTU4IDE3Ljg3OTEgMTEuODcyNCAxNy45MDExQzExLjc3OCAxNy45MjU5IDExLjY5MiAxNy45OTAzIDExLjUyIDE4LjExOTFMOC44OTMyIDIwLjA4NjVDOC40OTQ0NCAyMC4zODUyIDguMjk1MDYgMjAuNTM0NSA4LjEyNTIxIDIwLjUzMjVDNy45NzczMSAyMC41MzA3IDcuODM3OCAyMC40NjM1IDcuNzQ0MTggMjAuMzQ5QzcuNjM2NjcgMjAuMjE3NSA3LjYyOTExIDE5Ljk2ODUgNy42MTM5OSAxOS40NzA1TDcuNTE0MzkgMTYuMTkwMUM3LjUwNzg3IDE1Ljk3NTQgNy41MDQ2MSAxNS44NjggNy40NjUxNCAxNS43Nzg2QzcuNDMwMzEgMTUuNjk5OCA3LjM3NTY5IDE1LjYzMTMgNy4zMDY1OCAxNS41Nzk4QzcuMjI4MjkgMTUuNTIxNSA3LjEyNDMyIDE1LjQ5NDQgNi45MTYzNiAxNS40NDAyTDMuNzQwNDIgMTQuNjEzMkMzLjI1ODMgMTQuNDg3NiAzLjAxNzI0IDE0LjQyNDkgMi45MTI5NSAxNC4yOTA4QzIuODIyMTQgMTQuMTc0IDIuNzg3NjggMTQuMDIzMSAyLjgxODg0IDEzLjg3ODVDMi44NTQ2MyAxMy43MTI0IDMuMDQ0NTggMTMuNTUxMyAzLjQyNDQ4IDEzLjIyOUw1LjkyNzA2IDExLjEwNThDNi4wOTA5MyAxMC45NjY4IDYuMTcyODYgMTAuODk3MyA2LjIxODA4IDEwLjgxMDhDNi4yNTggMTAuNzM0NCA2LjI3NzQ5IDEwLjY0OSA2LjI3NDY3IDEwLjU2MjhDNi4yNzE0OCAxMC40NjUzIDYuMjI3ODIgMTAuMzY3MSA2LjE0MDUgMTAuMTcwN0w0LjgwNjk0IDcuMTcyMDNDNC42MDQ1IDYuNzE2ODEgNC41MDMyOCA2LjQ4OTIgNC41NDMwOSA2LjMyNDA2QzQuNTc3NzUgNi4xODAyNyA0LjY3NDMgNi4wNTkyMSA0LjgwNjc3IDUuOTkzNDJDNC45NTg5MSA1LjkxNzg2IDUuMjAzMzMgNS45NjU5IDUuNjkyMTkgNi4wNjE5N0w4LjkxMjQ1IDYuNjk0ODFDOS4xMjMzIDYuNzM2MjUgOS4yMjg3MyA2Ljc1Njk3IDkuMzI0NTggNi43MzgzN0M5LjQwOTIgNi43MjE5NSA5LjQ4ODEyIDYuNjgzOTQgOS41NTM3MSA2LjYyODAzQzkuNjI4MDIgNi41NjQ2OCA5LjY3NzU1IDYuNDY5MzQgOS43NzY2MiA2LjI3ODY1TDExLjI4OTYgMy4zNjYzN1oiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPiA8L3N2Zz4=") no-repeat center/contain; display:inline-block; position:relative; width: 50px; height: 50px; } .skills-section .skill-card .skill-more-info span > span:first-of-type > span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#000000; font-weight: 800; font-size: 1.2rem; } /* ---------- View Transitions ---------- */ /* Nombres únicos ya vienen definidos en cada .skills-card (inline) */ @supports (view-transition-name: none){ /* ::view-transition-group(*){ animation-duration: 350ms; animation-timing-function: cubic-bezier(.18,.89,.32,1.28); } .big-skill-container:not(.active) ::view-transition-group(*){ animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 3); } */ ::view-transition-group(*){ animation-duration: 367ms; animation-timing-function: var(--spring-smooth); } ::view-transition-old(*), ::view-transition-new(*){ mix-blend-mode: normal; } ::view-transition-old(*){ display: none; } ::view-transition-new(*){ animation: none; } html:active-view-transition .skill-card .scroller { max-height:400px; @starting-style { max-height: 0; } } } /* Accesibilidad: respeta reduce motion */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(*){ animation-duration: 1ms !important; } .skill-card{ transition: none; } } /* view transition will cross-fade in user prefers reduced motion */ @media (prefers-reduced-motion: no-preference) { ::view-transition-new(root) { display:block; animation: 1.3s cubic-bezier(.25, 1, .30, 1) diamond-in-hesitate forwards; z-index:1; } ::view-transition-old(root) { display:block; animation:none; } ::view-transition { pointer-events: none; } } @keyframes fade-out{ to { opacity: 0; } } @keyframes diamond-in-hesitate { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } 50% { clip-path: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%); } 100% { clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%); } } /* ============================= SKILLS GRID ITEMS ============================= */ .skills-grid{ --glowing-bg: hsl(246 44% 7%); --glowing-border: hsl(280 10% 50% / 1); --glowing-card: hsl(237 36% 10%); --glowing-color: hsl(240 18% 80%); --glowing-border-width: 5px; --glowing-gradient: conic-gradient(from 180deg at 50% 70%, rgb(228 201 255) 0deg, #765e8a 72.0000010728836deg, rgb(114 96 144) 144.0000021457672deg, #8878aa 216.00000858306885deg, #957cb3 288.0000042915344deg, rgb(181, 141, 222) 1turn); --spread: 60; --blur: 15; } .skills-card-filter{ position: absolute; inset: 0; z-index: 0; background: #000; filter: url(#noiseFilter); opacity: 16%; /* clip-path: url(#rounded-clip); */ mix-blend-mode: hard-light; transition: all ease 0.3s; } .skill-card .inner { position:relative; background: radial-gradient(50% 90% at top, var(--radial-center), var(--radial-edge)), linear-gradient(135deg, var(--card-grd1), var(--card-grd2)); width: 100%; height: 100%; display: flex; flex-direction: column; place-items: center; padding: 0 1rem; gap: 1rem; aspect-ratio: sqrt(3)/ 2; } /* Método 1: media query que apunta a dispositivos SIN hover */ @media (any-hover: none) and (pointer: coarse) { .submenu-label{ display:flex!important; align-items: center; } .skill-card .skill-body{ row-gap:0!important; padding-top:0!important; } .skill-card .skill-more-info{ opacity:1!important; max-height: unset!important; transform:none!important; transition:none!important; margin-bottom:12px; } .skill-card { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); } .skill-card .skill-logo{ transform:none!important; margin:unset!important; transition:none!important; } .skill-card .skill-title, .skill-card .skill-header{ opacity:1!important; transform:none!important; transition:none!important; } } @property --grad-bg1 { syntax: ''; initial-value: 0; inherits: false; } @property --grad-bg2 { syntax: ''; initial-value: 0; inherits: false; } /* ============================= PROJECTS SECTION ============================= */ .projects-header { position: sticky; top: 0; background: rgba(255, 255, 255, 0); backdrop-filter: blur(4px); mask: linear-gradient(to bottom, black 50%, rgba(0, 0, 0, 0)); padding-bottom: 7rem; } .projects-header:after { content: ""; position: absolute; top: 0; width: 100%; height: 292px; background: rgba(255, 255, 255, 0.5); filter: blur(4px); z-index: -1; } .projects-header:before { content: ""; position: absolute; top: 0; width: 100%; height: 157px; background: rgb(255 255 255); filter: blur(3px); z-index: -1; } .wax-seal-wrapper img.hidden{ opacity:0!important; pointer-events: none; transition: opacity 0.2s ease; } .corners span:nth-of-type(even) { animation-name: moveEven; animation-duration: 10s; animation-timing-function: ease-out; animation-iteration-count: infinite; } /* impares: se mueven en X */ .corners span:nth-of-type(odd) { animation-name: moveOdd; animation-duration: 10s; animation-timing-function: ease-out; animation-iteration-count: infinite; } .corners svg{ animation: spinSVG 10s linear infinite; } @keyframes moveOdd { 0%, 93% { transform: translateX(0); } 100% { transform: translateX(100cqi); } } @keyframes moveEven { 0%, 93% { transform: translateY(0); } 100% { transform: translateY(100cqh); } } @keyframes spinSVG { 0%, 93% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================= BALLON SPRITE ANIMATION ============================= */ .ballon-sprite{ /* animation: float 20s infinite linear; */ bottom:-234px; opacity: 0.6; } .ballon-sprite.popped{ background-position-x: 240px; } .ballon-sprite.falling::after{ content:""; position:absolute; width:200px; height:106px; top:0; right:-150px; background-image: url(https://dele.eus/wp-content/uploads/2025/09/irainak.webp); } .ballon-sprite.falling{ background-position-x: 120px; } /* ============================= VARIABLES POR TEMA VISUAL ============================= */ /* DEFAULT */ body { --dl-bg-color: #ffffff; --dl-text-color: #000000; --dl-primary-color: #000000; --dl-font-family: "Inter", "Segoe UI", system-ui, sans-serif; --dl-font-headers: "Inter", "Segoe UI", system-ui, sans-serif; --dl-padding: 1.5rem; --dl-btn-padding: .75rem 1rem; --dl-border-radius: 6px; --dl-border: 1px solid #ddd; --dl-box-shadow: 0 1px 3px rgba(0,0,0,0.1); } body.darkmode { --dl-bg-color: #121212; --dl-text-color: #e0e0e0; --dl-primary-color: #ffffff; } /* MINIMALISTA */ body.theme-minimalista { --dl-bg-color: #fafafa; --dl-text-color: #111; --dl-font-family: 'Helvetica Neue', sans-serif; --dl-padding: 2rem; --dl-border-radius: 0px; --dl-border: 1px solid #eaeaea; --dl-box-shadow: none; } /* BRUTALISTA */ body.theme-brutalista { --dl-bg-color: #fffc00; --dl-text-color: #000; --dl-font-headers: "Chicle", "Segoe UI", system-ui, sans-serif; --dl-font-family: "Chicle", "Segoe UI", system-ui, sans-serif; --dl-padding: 0.5rem; --dl-border-radius: 4px; --dl-border: 1px solid black; --dl-box-shadow: .25rem .25rem 0rem var(--dl-primary-color); --dl-btn-bg-color: rgb(255 144 232); } /* GLASSMORFISMO */ body.theme-glass { --dl-bg-color: rgba(255, 255, 255, 0.15); --dl-text-color: #ffffff; --dl-font-family: 'Segoe UI', sans-serif; --dl-padding: 1.5rem; --dl-border-radius: 12px; --dl-border: 1px solid rgba(255, 255, 255, 0.3); --dl-box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* RETRO */ body.theme-retro { --dl-bg-color: #fffcf2; --dl-text-color: #2e2e2e; --dl-font-family: 'Press Start 2P', monospace; --dl-padding: 0.75rem; --dl-border-radius: 0px; --dl-border: 2px dashed #ff69b4; --dl-box-shadow: 2px 2px 0px #000; } /* CYBERPUNK */ body.theme-cyberpunk { --dl-bg-color: #0d0d0d; --dl-text-color: #00fff7; --dl-font-family: 'Orbitron', sans-serif; --dl-padding: 1rem; --dl-border-radius: 4px; --dl-border: 2px solid #ff00cc; --dl-box-shadow: 0 0 10px #ff00cc, 0 0 5px #00fff7; } /* DARK MODE */ body.theme-dark { --dl-bg-color: #121212; --dl-text-color: #e0e0e0; --dl-font-family: 'Inter', sans-serif; --dl-padding: 1.5rem; --dl-border-radius: 6px; --dl-border: 1px solid #333; --dl-box-shadow: none; } /* BRUTALISTA TÍTULOS EXTRA */ body.theme-brutalista h1, body.theme-brutalista h2 { text-transform: uppercase; border: 3px solid black; padding: 0.2em; } /* ============================== */ /* 🎯 ESPECIFICACIONES VISUALES */ /* ============================== */ /* ============================== */ /* 🎯 BOTONES */ /* ============================== */ .dl-button { padding: var(--dl-btn-padding); border: var(--dl-border); border-radius: var(--dl-border-radius); box-shadow: var(--dl-box-shadow); background-color: var(--dl-btn-bg-color); color: var(--dl-text-color); font-family: var(--dl-font-family); text-decoration: none; display: inline-block; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } /* Minimalista */ body.theme-minimalista .dl-button { background-color: transparent; border: 1px solid #ccc; color: #333; font-weight: 500; box-shadow: none; } /* Brutalista */ body.theme-brutalista .dl-button { text-transform: uppercase; font-family: var(--dl-font-family); background-color:var(--dl-btn-bg-color); } /* Glassmorfismo */ body.theme-glass .dl-button { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } /* Retro */ body.theme-retro .dl-button { background-color: #ff69b4; border: 2px dashed black; color: black; font-family: 'Press Start 2P', monospace; box-shadow: 2px 2px 0 black; font-size: 0.75rem; } /* Cyberpunk */ body.theme-cyberpunk .dl-button { background-color: #ff00cc; color: #00fff7; border: 2px solid #00fff7; box-shadow: 0 0 10px #ff00cc, 0 0 5px #00fff7; font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: 1px; } /* Dark Mode */ body.theme-dark .dl-button { background-color: #1e1e1e; color: #e0e0e0; border: 1px solid #444; box-shadow: none; font-weight: 500; } /* ============================== */ /* 🎯 SECTIONS */ /* ============================== */ .dl-section { padding: var(--dl-padding); border-radius: var(--dl-border-radius); border: var(--dl-border); box-shadow: var(--dl-box-shadow); background-color: var(--dl-bg-color); color: var(--dl-text-color); } /* ============================== */ /* 🎯 CONTAINERS */ /* ============================== */ .dl-container { padding: var(--dl-padding); border-radius: var(--dl-border-radius); border: var(--dl-border); box-shadow: var(--dl-box-shadow); background-color: var(--dl-bg-color); color: var(--dl-text-color); } /* Brutalista */ body.theme-brutalista .dl-container { font-family: var(--dl-font-family); background-color:var(--dl-bg-color); --dl-box-shadow: .75rem .5rem 0 var(--dl-primary-color); } /* ============================== */ /* 🎯 GENERAL TAGS */ /* ============================== */ .dl-tag { padding: calc(var(--dl-padding) / 2); display:inline-flex; border-radius: var(--dl-border-radius); border: var(--dl-border); box-shadow: var(--dl-box-shadow); background-color: var(--dl-bg-color); color: var(--dl-text-color); font-size: 0.875rem; text-transform: uppercase; letter-spacing: .1rem; } /* Brutalista */ body.theme-brutalista .dl-tag { font-family: var(--dl-font-family); background-color:var(--dl-bg-color); } /* ============================== */ /* 🎯 KNOWLEDGE CARDS */ /* ============================== */ .dl-knowledge-card { position:relative; padding: var(--dl-padding); display:flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: var(--dl-border-radius); border: var(--dl-border); box-shadow: var(--dl-box-shadow); background-color: var(--dl-bg-color); color: var(--dl-text-color); } .dl-knowledge-card--background{ position:absolute; inset:0; background: radial-gradient(94.68% 316.73% at 0% 0%, #151515, #070707), linear-gradient(0deg, #ffffff03, #ffffff03); border: 1px solid #323232; border-radius: 14px; } .dl-knowledge-card--logo { width: 50px; height: 50px; margin-right: calc(var(--dl-padding) / 2); } .dl-knowledge-card--logo svg { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; } /* Brutalista */ body.theme-brutalista .dl-knowledge-card { font-family: var(--dl-font-family); background-color:var(--dl-bg-color); } /* ============================= APLICACIÓN A SECCIONES ESPECÍFICAS ============================= */ :root { --dl-hero-img-background: url('https://dele.eus/wp-content/uploads/2025/06/perfil.png'); } .dl-hero { background-size: cover; background-position: center; } /* Brutalista */ body.theme-brutalista .dl-hero { --dl-hero-img-background: url('https://dele.eus/wp-content/uploads/2025/06/perfil-multidispersos.jpg'); } /* ============================= DARK MODE ============================= */ body.darkmode .pre-hero { background-color:black; border:0.5px solid #ffffff4a; } body.darkmode .linkedin-link svg, body.darkmode .menu-expander svg { fill: #fffcf2; } body.darkmode .trackdrop{ background-color:#2d2a1b; } body.darkmode .projects-header:after { background-color:rgb(18 18 18); } body.darkmode .projects-header:before { display:none } body.darkmode .trp-language-item-name, body.darkmode .trp-language-item:hover .trp-language-item-name{ color:#fff; } body.darkmode .section__body{ color:#ffffffd8; background-color:#212121; } body.darkmode #gspb_iconsList-id-gsbp-0e86120.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-cad206c.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-15a4b91.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-30e3ec1.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-66eb404.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-76fdb5a.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-a64553c.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-d50eda2.gspb_iconsList .gspb_iconsList__item svg path, body.darkmode #gspb_iconsList-id-gsbp-4e1d95e.gspb_iconsList .gspb_iconsList__item svg path { fill:#fffd64!important; } body.darkmode .gspb_iconsList .gspb_iconsList__item .gspb_iconsList__iconbox{ background-color:#222222!important; } body.darkmode .project-grid-inner-cell p{ color:#b9b9b9; } /* ============================= LANG SWITCHER ============================= */ .trp-shortcode-switcher__wrapper{ display:flex; --bg: transparent!important; --bg-hover: #bf66ff36!important; --border:0!important; } .trp-shortcode-switcher__wrapper .trp-flag-image{ width: 30px; filter: grayscale(1); } .trp-shortcode-switcher__wrapper .trp-shortcode-arrow, .trp-shortcode-switcher__wrapper p, .trp-shortcode-switcher__wrapper br{ display:none; } .trp-shortcode-switcher__wrapper .trp-language-item{ padding: 0 0.7rem; min-height: 48px; overflow: hidden; border-radius: 8px; } .trp-shortcode-switcher__wrapper .trp-shortcode-switcher{ padding:0; } .trp-shortcode-switcher__wrapper .trp-switcher-dropdown-list .trp-language-item{ margin-top:0px; } .trp-shortcode-switcher__wrapper .trp-current-language-item__wrapper{ padding-right:0; } .trp-shortcode-switcher__wrapper .trp-current-language-item__wrapper .trp-language-item{ pointer-events:auto; }