:root { --container-max: 1280px; --gap-col: 32px; --gap-row: 64px; --radius-media: 30px; --font: "Geist", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* Text hierarchy (per theme): heading = h1 + portfolio title · text = body/ description · title = grid item titles (softer, integrated) · muted = meta. */ --heading: #141414; --text: #5e5e5e; --title: #3f3f3f; --muted: #9a9a9a; --tile-ar-w: 3; --tile-ar-h: 4; --accent: #ff0044; /* Theme color tokens — :root is the Light default; [data-theme] blocks below override per portfolio. Per-portfolio accent/CTA colors are layered on top inline via (buildThemeVars). */ --bg: #ffffff; --cta-bg: #111111; --cta-text: #ffffff; --cta-border: transparent; --placeholder: #e6e6e6; --placeholder-fg: #888888; --border: rgba(0,0,0,0.12); --code-bg: rgba(0,0,0,0.06); --lightbox-backdrop: #b3b3b3; /* light stays flat + opaque (technical) */ --lightbox-blur: 0px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-128: 128px; --article-max: 900px; } /* ===== Theme presets (per-portfolio appearance). Light = :root above. accent + a fitting default CTA are baked into each theme. Non-light lightboxes get a frosted (blurred + translucent) backdrop; light stays flat opaque gray. ===== */ [data-theme="cream"] { /* warm paper · espresso heading, taupe body, oxblood accent */ --bg:#f6f1e7; --heading:#241a12; --text:#7c6e5a; --title:#5a4c3c; --muted:#a89a84; --accent:#9e3b40; --cta-bg:#241a12; --cta-text:#f6f1e7; --placeholder:#e7ddc9; --placeholder-fg:#a2927a; --border:rgba(60,40,20,0.14); --code-bg:rgba(60,40,20,0.06); --lightbox-backdrop:rgba(246,241,231,0.55); --lightbox-blur:18px; } [data-theme="sage"] { /* sage green · layered greens, warm clay accent */ --bg:#e7ece4; --heading:#1b2a20; --text:#69756a; --title:#485a4d; --muted:#909a8f; --accent:#b0542e; --cta-bg:#2b3a30; --cta-text:#e7ece4; --placeholder:#d6ddd2; --placeholder-fg:#828f84; --border:rgba(20,40,25,0.14); --code-bg:rgba(20,40,25,0.05); --lightbox-backdrop:rgba(231,236,228,0.55); --lightbox-blur:18px; } [data-theme="fog"] { /* technical silver gray · monochrome, layered grays */ --bg:#c7c8ca; --heading:#161718; --text:#565b64; --title:#3d424a; --muted:#797d84; --accent:#1a1a1c; --cta-bg:#18181a; --cta-text:#e8e8e8; --placeholder:#b9babd; --placeholder-fg:#6e7176; --border:rgba(0,0,0,0.16); --code-bg:rgba(0,0,0,0.06); --lightbox-backdrop:rgba(199,200,202,0.55); --lightbox-blur:18px; } [data-theme="charcoal"] { /* neutral warm dark · bright heading, soft body, coral accent */ --bg:#1c1c1e; --heading:#f6f6f4; --text:#999a9e; --title:#c6c6c9; --muted:#6f6f74; --accent:#ff6b6b; --cta-bg:#f0efe9; --cta-text:#1c1c1e; --placeholder:#2a2a2d; --placeholder-fg:#7d7d82; --border:rgba(255,255,255,0.12); --code-bg:rgba(255,255,255,0.08); --lightbox-backdrop:rgba(20,20,22,0.5); --lightbox-blur:18px; } [data-theme="plum"] { /* dark aubergine · lavender heading, mauve body, magenta accent */ --bg:#1a1020; --heading:#f4eaf6; --text:#a08ea6; --title:#cdbed3; --muted:#74627d; --accent:#e879f9; --cta-bg:#e7d5ee; --cta-text:#1a1020; --placeholder:#251632; --placeholder-fg:#8a6f95; --border:rgba(255,255,255,0.10); --code-bg:rgba(255,255,255,0.07); --lightbox-backdrop:rgba(22,14,28,0.5); --lightbox-blur:18px; } [data-theme="oxide"] { /* deep navy · cool blue text, warm coral-orange accent */ --bg:#0f1b2d; --heading:#e8eef6; --text:#8a99ad; --title:#b9c5d6; --muted:#56657a; --accent:#ff6a3d; --cta-bg:#ff6a3d; --cta-text:#0f1b2d; --placeholder:#182539; --placeholder-fg:#4e5d72; --border:rgba(232,238,246,0.10); --code-bg:rgba(232,238,246,0.06); --lightbox-backdrop:rgba(15,27,45,0.5); --lightbox-blur:18px; } [data-theme="terminal"] { /* near-black · phosphor-green hierarchy, bright green accent */ --bg:#0c0f0d; --heading:#e2efe4; --text:#7e9683; --title:#aec4b1; --muted:#54685a; --accent:#3ddc84; --cta-bg:#3ddc84; --cta-text:#0c0f0d; --placeholder:#131a15; --placeholder-fg:#436b4b; --border:rgba(157,209,168,0.12); --code-bg:rgba(157,209,168,0.07); --lightbox-backdrop:rgba(12,15,13,0.55); --lightbox-blur:18px; } [data-theme="obsidian"] { /* true-black OLED · neutral grays, gold accent */ --bg:#000000; --heading:#f5f5f5; --text:#969696; --title:#c4c4c4; --muted:#5e5e5e; --accent:#d9a441; --cta-bg:#f5f5f5; --cta-text:#000000; --placeholder:#161616; --placeholder-fg:#5a5a5a; --border:rgba(255,255,255,0.10); --code-bg:rgba(255,255,255,0.06); --lightbox-backdrop:rgba(0,0,0,0.6); --lightbox-blur:18px; } [data-theme="kanagawa"] { /* sumi ink · cool off-white heading, warm sand body, crystal-blue accent */ --bg:#1f1f28; --heading:#f2eee0; --text:#9b9579; --title:#cac4a6; --muted:#6f6c59; --accent:#7e9cd8; --cta-bg:#dcd7ba; --cta-text:#1f1f28; --placeholder:#2a2a37; --placeholder-fg:#54546d; --border:rgba(220,215,186,0.10); --code-bg:rgba(220,215,186,0.06); --lightbox-backdrop:rgba(31,31,40,0.5); --lightbox-blur:18px; } [data-theme="tokyonight"] { /* deep blue-black · periwinkle heading, blue-gray body, cyan accent */ --bg:#16161e; --heading:#c8d1f7; --text:#7e8ab8; --title:#98a3d4; --muted:#495071; --accent:#7dcfff; --cta-bg:#7aa2f7; --cta-text:#16161e; --placeholder:#1f2030; --placeholder-fg:#545c7e; --border:rgba(192,202,245,0.10); --code-bg:rgba(192,202,245,0.06); --lightbox-backdrop:rgba(22,22,30,0.5); --lightbox-blur:18px; } [data-theme="slate"] { /* cool graphite · bright heading, cool-gray body, teal accent */ --bg:#1a1d23; --heading:#f0f3f7; --text:#929aa6; --title:#c2c7d0; --muted:#616873; --accent:#2dd4bf; --cta-bg:#2dd4bf; --cta-text:#0a0f0e; --placeholder:#23272f; --placeholder-fg:#5a626e; --border:rgba(238,241,245,0.10); --code-bg:rgba(238,241,245,0.06); --lightbox-backdrop:rgba(26,29,35,0.5); --lightbox-blur:18px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); } img, video { display: block; max-width: 100%; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ========================= Type ========================= */ .text-h1 { font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--heading); } .text-h2 { font-size: 32px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; } .text-title { font-size: 24px; font-weight: 400; line-height: 1.35; } .text-small { font-size: 14px; font-weight: 400; line-height: 1.55; } .text-muted { color: var(--muted); } .mb-24 { margin-bottom: var(--space-24); } .mb-32 { margin-bottom: var(--space-32); } .mb-64 { margin-bottom: var(--space-64); } .mb-128 { margin-bottom: var(--space-128); } /* Clamp 2 lines (title/desc) */ .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; /* para calmar al linter */ overflow: hidden; text-overflow: ellipsis; } /* ========================= Profile block ========================= */ .profile { padding-top: 56px; margin-bottom: var(--space-128); } .profile-top, .profile-bottom { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; } .profile-top { margin-bottom: 32px; } .profile-desc { font-size: 24px; font-weight: 400; line-height: 1.45; white-space: pre-line; margin: 0; } .profile-avatar-wrap { display: flex; justify-content: flex-end; } .profile-avatar { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; background: var(--placeholder); } @media (min-width: 1024px) { .profile-top { grid-template-columns: 1fr 1fr; align-items: start; } .profile-avatar-wrap { justify-content: flex-end; } } @media (max-width: 1023.98px) and (min-width: 640px) { .text-h1 { font-size: 36px; } .profile-desc { font-size: 20px; } .profile-avatar { width: 100px; height: 100px; } } @media (max-width: 639.98px) { .text-h1 { font-size: 24px; margin-bottom: 32px; } .profile-desc { font-size: 16px; } .profile-avatar { width: 80px; height: 80px; } .container { padding: 0 20px; } } .profile-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 10px; background: var(--cta-bg); color: var(--cta-text); box-shadow: inset 0 0 0 1.5px var(--cta-border, transparent); font-family: var(--font); font-size: 16px; font-weight: 600; border: 0; text-decoration: none; cursor: pointer; line-height: 1; } .profile-cta svg { width: 16px; height: 16px; fill: currentColor; } .profile-socials { display: flex; gap: 16px; justify-content: flex-end; align-items: center; } .profile-socials a { display: inline-flex; width: 24px; height: 24px; color: var(--text); text-decoration: none; } .profile-socials svg { width: 24px; height: 24px; fill: currentColor; } @media (max-width: 380px) { .profile-socials { gap: 12px; } } /* ========================= Grid Title spacing ========================= */ #gridTitle { margin-bottom: var(--space-64); color: var(--heading); } /* ========================= Filter ========================= */ .filter { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-bottom: var(--space-64); } .filter__item { position: relative; appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font-family: var(--font); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--text); cursor: pointer; } .filter__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; } .filter__item[aria-selected="true"] { color: var(--accent); } .filter__item[aria-selected="true"]::after { transform: scaleX(1); } .filter__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 6px; border-radius: 6px; } @media (max-width: 639.98px) { .filter { gap: 16px; } .filter__item { font-size: 16px; } } /* ========================= Grid ========================= */ .grid { display: grid; column-gap: var(--gap-col); row-gap: var(--gap-row); grid-template-columns: 1fr; grid-auto-flow: row dense; --double-h: auto; } /* Breathing room below the last grid row on portfolio + hub pages */ #listView { padding-bottom: 80px; } /* ========================= Portfolio Hub (stacked covers, Tilt 3D on hover) ========================= */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 56px 40px; margin-top: 8px; } .hub-stack { text-decoration: none; color: inherit; display: block; } .hub-stack-imgs { position: relative; aspect-ratio: 4/3; margin-bottom: 18px; perspective: 900px; } .hub-layer { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.12); background: var(--placeholder); transition: transform 340ms cubic-bezier(.2,.7,.2,1), box-shadow 340ms ease; } .hub-layer picture, .hub-layer img { width: 100%; height: 100%; display: block; } .hub-layer img { object-fit: cover; } .hub-layer.l3 { transform: rotate(-5deg) translate(-10px, 8px) scale(0.94); z-index: 1; } .hub-layer.l2 { transform: rotate(3deg) translate(8px, 4px) scale(0.97); z-index: 2; } .hub-layer.l1 { transform: rotate(0deg); z-index: 3; } .hub-layer-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--placeholder-fg); font-size: 13px; font-weight: 500; } /* Tilt 3D fan on hover (desktop pointers only) */ @media (hover: hover) and (pointer: fine) { .hub-stack:hover .hub-layer.l3 { transform: rotateX(8deg) rotate(-7deg) translate(-26px, 10px) scale(0.94); } .hub-stack:hover .hub-layer.l2 { transform: rotateX(8deg) rotate(5deg) translate(22px, 6px) scale(0.97); } .hub-stack:hover .hub-layer.l1 { transform: rotateX(8deg) translateY(-8px); box-shadow: 0 22px 44px rgba(0,0,0,0.22); } } .hub-stack-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .hub-stack-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; } .hub-stack-count { font-size: 13px; color: var(--muted, #888); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .hub-layer { transition: none; } } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* >=1024: por defecto 3 cols, pero si el JSON define data-cols, lo respeta (incluye pantallas grandes) */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .grid-item { min-width: 0; } /* Nivel 2: positioning generalizado via CSS variables por item. Cada
. En mobile/tablet (<1024px) los spans se ignoran y los items fluyen 1 o 2 columnas. */ @media (min-width: 1024px) { .grid-item { grid-column: var(--col-start, auto) / span var(--col-span, 1); grid-row: var(--row-start, auto) / span var(--row-span, 1); } } @media (max-width: 1023.98px) { .grid-item { grid-column: auto !important; grid-row: auto !important; } } .card { display: block; text-decoration: none; color: inherit; } .card-media { border-radius: var(--radius-media); overflow: hidden; background: var(--placeholder); } /* Default tile uses portfolio's aspect ratio; wide tiles (col-span >= 2 with row-span 1) match the double-h sync from JS. */ .grid-item:not(.is-wide) .card-media { aspect-ratio: var(--tile-ar-w) / var(--tile-ar-h); } @media (min-width: 1024px) { .grid-item.is-wide .card-media { height: var(--double-h); } } @media (max-width: 1023.98px) { .grid-item.is-wide .card-media { height: auto; aspect-ratio: var(--tile-ar-w) / var(--tile-ar-h); } } /* Progress bar (SPA navigation) */ .nprogress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 10000; transition: width 200ms ease, opacity 200ms ease 100ms; pointer-events: none; opacity: 0; } .nprogress.is-active { opacity: 1; } /* Lightbox error state */ .lightbox__error { color: var(--muted); font-size: 14px; text-align: center; padding: 24px; } /* All tiles cover-crop so mixed cover ratios sit consistently in the grid (no letterbox bars). Per-image object-position is set inline from cover.focalX/Y when the user moves the focal dot. */ .card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-cover-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; text-align: center; background: var(--placeholder); color: var(--placeholder-fg); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; } .card-cover-empty span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .card-title { margin-top: var(--space-16); color: var(--title); } .card-desc { margin-top: 6px; } @media (hover: hover) { .card:hover .card-media { filter: brightness(0.985); } } /* ========================= Article view (Markdown) ========================= */ .article { padding-top: 56px; padding-bottom: 80px; } .article__header { max-width: var(--article-max); margin: 0 auto 24px auto; } .article__back { display: inline-block; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.4; } .article__back:hover { text-decoration: underline; } .article__content { max-width: var(--article-max); margin: 0 auto; } /* Typography */ .article__content h1 { font-size: 40px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px 0; color: var(--heading); } .article__content h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; margin: 40px 0 12px 0; color: var(--heading); } .article__content h3 { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 28px 0 10px 0; } .article__content h4, .article__content h5, .article__content h6 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 22px 0 8px 0; } .article__content p { font-size: 16px; line-height: 1.75; margin: 0 0 14px 0; color: var(--text); } .article__content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .article__content hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; } .article__content blockquote { margin: 18px 0; padding: 0 0 0 16px; border-left: 3px solid var(--border); color: var(--muted); } .article__content ul, .article__content ol { margin: 0 0 16px 22px; padding: 0; } .article__content li { margin: 6px 0; line-height: 1.7; } .article__content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; background: var(--code-bg); padding: 2px 6px; border-radius: 6px; } .article__content pre { margin: 16px 0 22px 0; padding: 14px 16px; border-radius: 12px; background: var(--code-bg); overflow: auto; } .article__content pre code { background: transparent; padding: 0; border-radius: 0; display: block; font-size: 13px; line-height: 1.65; } .article__content img { width: 100%; height: auto; border-radius: 18px; margin: 18px 0; background: var(--placeholder); } /* GFM tables: marked emits a bare ; wrap-free overflow keeps wide tables scrollable on narrow viewports without altering the rendered HTML. */ .article__content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 22px 0; font-size: 15px; line-height: 1.5; } .article__content th, .article__content td { padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid var(--border); } .article__content th { font-weight: 600; background: var(--code-bg); } .article__content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 4%, transparent); } @media (max-width: 639.98px) { .article__content h1 { font-size: 28px; } .article__content h2 { font-size: 22px; margin-top: 28px; } } /* ========================= Lightbox (overlay) — FIXED + CAPTION ========================= */ .lightbox { position: fixed; inset: 0; z-index: 9999; } .lightbox[hidden] { display: none; } /* Backdrop real */ .lightbox__backdrop { position: absolute; inset: 0; background: var(--lightbox-backdrop); -webkit-backdrop-filter: blur(var(--lightbox-blur, 0px)); backdrop-filter: blur(var(--lightbox-blur, 0px)); } /* Inner “canvas” con padding visible alrededor (inset) */ .lightbox__inner { position: fixed; /* IMPORTANTE: fijo al viewport */ inset: 24px; /* mobile default */ display: grid; place-items: center; } /* Desktop: inset 64px (tu requerimiento) */ @media (min-width: 1024px) { .lightbox__inner { inset: 64px; } } /* Media container: columna (imagen arriba, caption abajo) */ .lightbox__media { width: 100%; height: 100%; display: flex; /* en vez de grid */ flex-direction: column; align-items: center; justify-content: center; gap: 14px; } /* Si tu JS mete , lo centramos y lo hacemos “tomar” el espacio */ .lightbox__media picture { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } /* Imagen: NO usar height:100% porque eso rompe el padding abajo. Mejor max-height calculado por inset + un extra para caption. */ .lightbox__media img { max-width: 100%; max-height: calc(100vh - 48px - 90px); /* mobile: 24*2 + ~caption */ object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; } /* Desktop: respeta inset 64px y deja espacio extra para caption */ @media (min-width: 1024px) { .lightbox__media img { max-height: calc(100vh - 128px - 90px); /* 64*2 + ~caption */ } } /* Caption debajo */ .lightbox__caption { width: min(900px, 100%); padding: 0 8px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--text); user-select: none; } /* Iframe (se usa dentro de wrapper) */ .lightbox__media iframe { border: 0; display: block; } /* Wrapper video 16:9 para YouTube/Vimeo */ .lightbox__video { width: 100%; height: auto; max-width: 1200px; aspect-ratio: 16 / 9; } .lightbox__video iframe { width: 100%; height: 100%; } /* Close: SIEMPRE respecto al viewport */ .lightbox__close { position: fixed; top: 32px; right: 32px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2; } .lightbox__close svg { width: 24px; height: 24px; display: block; } /* Counter: SIEMPRE respecto al viewport */ .lightbox__counter { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); font-size: 14px; line-height: 1; letter-spacing: 0.08em; color: var(--text); user-select: none; z-index: 2; }