/* ========================================================================= Joaquina Salgado — Portfolio Standalone rebuild of the original Cargo.site portfolio. Fonts: Space Grotesk (OFL) used as a free stand-in for Monument Grotesk. ========================================================================= */ /* ---------- Fonts ---------- @font-face declarations live in ../fonts/space-grotesk.css, which is linked before this file in every page's . */ /* ---------- Design tokens ---------- */ :root { --swatch-1: rgba(0, 0, 0, 0.85); --swatch-2: rgba(0, 0, 0, 0.75); --swatch-3: rgba(0, 0, 0, 0.6); --swatch-4: rgba(0, 0, 0, 0.4); --swatch-5: rgba(0, 0, 0, 0.25); --ink: rgba(0, 0, 0, 0.85); --ink-soft: rgba(0, 0, 0, 0.75); --accent: #310fce; --accent-nav: #0f48ce; --caption-link: rgba(2, 21, 93, 0.85); --card-bg: #f7f9ff; --card-border: rgba(0, 47, 104, 0.85); --font-main: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-size: 1.65rem; /* base body text (+2px over Cargo's 1.45rem) */ --nav-width: 24rem; /* blue "metal shader" palette — desaturated blues + cool grays only (no warm/gold) */ --metal-0: #33415a; /* deep steel shadow */ --metal-1: #47566d; /* dark steel */ --metal-2: #7f90a8; /* mid steel-blue */ --metal-3: #9fb0c6; /* light steel */ --metal-4: #c1d0e4; /* pale blue */ --metal-5: #eef4fd; /* cool highlight */ --metal-conic: conic-gradient(from var(--metal-angle), var(--metal-0) 0deg, var(--metal-2) 30deg, var(--metal-5) 62deg, var(--metal-2) 96deg, var(--metal-1) 140deg, var(--metal-4) 192deg, var(--metal-5) 224deg, var(--metal-1) 276deg, var(--metal-3) 320deg, var(--metal-0) 360deg); } /* registered so the conic sheen angle can be animated (graceful static fallback) */ @property --metal-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { font-size: 62.5%; /* 1rem = 10px, matches Cargo's rem scale */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-main); color: var(--ink-soft); background-color: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img { max-width: 100%; height: auto; } a { color: inherit; } /* ---------- Font-scale mechanism (mirrors Cargo's --font-scale) ---------- */ [style*="--font-scale"] { font-size: calc(var(--font-scale) * var(--font-size)); } /* ---------- Typography ---------- */ bodycopy { display: block; --font-size: 1.65rem; font-size: 1.65rem; font-weight: 400; color: var(--ink-soft); line-height: 1.55; letter-spacing: 0; } bodycopy a { color: var(--ink-soft); text-decoration: none; } bodycopy a:hover { color: var(--accent); } h1 { --font-size: 2.10rem; font-family: var(--font-main); font-weight: 400; margin: 0; font-size: 2.10rem; line-height: 1.1; color: var(--ink); letter-spacing: 0; } h1 a { color: var(--ink); text-decoration: none; } h2 { --font-size: 3.60rem; font-family: var(--font-main); font-weight: 500; margin: 0; color: var(--ink); font-size: 3.60rem; line-height: 1.05; letter-spacing: 0; } h2 a { color: var(--ink); text-decoration: none; } h3 { --font-size: 1.9rem; font-family: var(--font-main); font-weight: 700; margin: 0; color: var(--ink); font-size: 1.9rem; line-height: 1.2; letter-spacing: 0; } h3 a { color: var(--ink); text-decoration: none; } .caption { --font-size: 1.45rem; font-size: 1.45rem; font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: 0; display: block; } .caption a { color: var(--caption-link); text-decoration: underline; } small { font-size: 0.8em; } hr { background: rgba(0, 0, 0, 0.75); border: 0; height: 1px; display: block; margin: 1rem 0; } ul { margin: 0; padding: 0 0 0 2.0em; } ol { margin: 0; padding: 0 0 0 2.5em; } blockquote { margin: 0; padding: 0 0 0 2em; } a:active { opacity: 0.7; } /* ---------- Cargo layout primitives ---------- */ .column-set { display: flex; flex-wrap: wrap; gap: var(--gutter, 1rem); width: 100%; align-items: flex-start; } .column-unit { flex: var(--span, 1) 1 0; min-width: 0; } .column-unit img, .column-unit video, .column-unit .media-item { width: 100%; height: auto; display: block; } .gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gutter, 1rem); width: 100%; } /* Legacy Cargo grid attributes left in the source markup */ [grid-row] { display: flex; flex-wrap: wrap; gap: 0; width: 100%; } [grid-col] { flex: 1 1 0; min-width: 0; } [grid-col="x12"] { flex-basis: 100%; } /* media */ .media-item, bodycopy img, bodycopy video { max-width: 100%; height: auto; display: block; } img.zoomable, .media-item.zoomable { cursor: zoom-in; } .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0.5rem 0; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* raw iframes embedded in page copy (e.g. Vimeo) */ bodycopy iframe { max-width: 100%; border: 0; display: block; margin: 1rem auto; } /* ========================================================================= NAV CARD ========================================================================= */ .nav-card { position: fixed; top: 1.1rem; left: 1.1rem; width: var(--nav-width); max-height: calc(100vh - 2.2rem); overflow-y: auto; overflow-x: visible; z-index: 50; padding: 0.4rem 0.6rem 1.2rem 0.2rem; /* no outer container card — sidebar sits directly on the page */ background: transparent; border: none; box-shadow: none; border-radius: 0; scrollbar-width: none; /* remove the scroll-position indicator */ -ms-overflow-style: none; } .nav-card::-webkit-scrollbar { width: 0; height: 0; display: none; } .nav-card .nav-title { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.4rem; color: var(--ink); text-decoration: none; } .nav-about { display: block; font-size: 1.6rem; font-weight: 700; margin: 0 0 1.4rem; color: var(--ink); text-decoration: none; } .nav-about:hover, .nav-about.active { color: var(--accent-nav); } /* sidebar category labels — same outlined/stretched style as the home headers */ .nav-section { display: inline-block; font-size: 1.9rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 0.825px rgba(0, 0, 0, 0.85); text-stroke: 0.825px rgba(0, 0, 0, 0.85); paint-order: stroke fill; margin: 1.8rem 0 1rem; text-transform: uppercase; letter-spacing: 0.02em; transform: scaleY(1.5); transform-origin: left center; } .nav-card a { text-decoration: none; color: var(--ink); } /* ---- interactive project cards (sidebar) — metallic border + image reveal ---- */ /* cylindrical "wheel/drum" 3D context (scroll stays on the .nav-card ancestor) */ .nav-card-list { display: flex; flex-direction: column; gap: 0.9rem; perspective: 1000px; transform-style: preserve-3d; overflow: visible; /* must stay visible so preserve-3d isn't flattened */ pointer-events: none; /* cards translated behind z=0 would otherwise be blocked by this container — re-enabled per card */ } .nav-proj-card { --bw: 2.55px; --mx: 50%; --my: 50%; --start: 0; --active: 0; position: relative; display: block; overflow: hidden; isolation: isolate; height: 7rem; border: none; border-radius: 0.8rem; background: transparent; pointer-events: auto; /* re-enable hits (parent list is pointer-events:none) */ transform-origin: center center; backface-visibility: hidden; will-change: transform, height; transition: height 0.35s ease-in-out, box-shadow 0.3s ease, --start 0.8s cubic-bezier(0.16, 1, 0.3, 1), --active 0.3s ease; } .nav-proj-card:hover, .nav-proj-card.active { height: 11rem; box-shadow: 0 0.6rem 1.6rem rgba(15, 72, 206, 0.22); } /* metallic border layer — same animated shader as the home project cards */ .nav-proj-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(calc(var(--active) * 260px) circle at var(--mx) var(--my), #ffffff 0%, #eef2f6 22%, #cbd5e1 48%, transparent 72%), conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)); } /* base face inside the border ring */ .nav-proj-card::after { content: ""; position: absolute; inset: var(--bw); z-index: 1; border-radius: calc(0.8rem - var(--bw)); background: var(--card-bg); } .npc-img { position: absolute; inset: var(--bw); z-index: 2; object-fit: cover; border-radius: calc(0.8rem - var(--bw)); opacity: 0; transform: scale(1); transition: opacity 0.4s ease, transform 0.5s ease-out; } .nav-proj-card:hover .npc-img, .nav-proj-card.active .npc-img { opacity: 1; transform: scale(1.05); } .npc-overlay { position: absolute; inset: var(--bw); z-index: 3; border-radius: calc(0.8rem - var(--bw)); background: rgba(0, 0, 0, 0.35); /* softer overlay — the image stays visible */ opacity: 0; transition: opacity 0.3s ease; } .nav-proj-card:hover .npc-overlay, .nav-proj-card.active .npc-overlay { opacity: 1; } /* content */ .npc-body { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 1.3rem; } .npc-title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #000000; -webkit-text-stroke: 1px #ffffff; text-stroke: 1px #ffffff; paint-order: stroke fill; transition: text-shadow 0.3s ease; } .npc-sub { font-size: 1.15rem; color: var(--ink-soft); margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; } .npc-desc { font-size: 1.05rem; line-height: 1.35; color: #ffffff; margin-top: 0.5rem; max-height: 0; opacity: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transition: max-height 0.35s ease, opacity 0.35s ease; } .nav-proj-card:hover .npc-desc, .nav-proj-card.active .npc-desc { max-height: 6rem; opacity: 1; } .nav-proj-card:hover .npc-sub, .nav-proj-card.active .npc-sub { color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* title keeps black fill + white stroke; add a soft halo when over the dark image */ .nav-proj-card:hover .npc-title, .nav-proj-card.active .npc-title { text-shadow: 0 0 6px rgba(255, 255, 255, 0.55); } .nav-links { margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.7; } .nav-links a { color: var(--ink); text-decoration: none; } .nav-links a:hover { color: var(--accent-nav); } /* nav toggle (mobile) */ .nav-toggle { display: none; position: fixed; top: 1.1rem; right: 1.1rem; z-index: 60; width: 4.4rem; height: 4.4rem; border-radius: 0.8rem; border: 0.1rem solid var(--card-border); background: var(--card-bg); box-shadow: 0.2rem 0.2rem 0.6rem rgba(88, 74, 141, 0.25); font-size: 2rem; cursor: pointer; color: var(--ink); } .nav-backdrop { display: none; } /* ========================================================================= CONTENT PAGES ========================================================================= */ .content-page .page { min-height: 100vh; padding: 4rem 4rem 8rem; padding-left: calc(var(--nav-width) + 4rem); } .content-page .page-content { max-width: 92rem; margin: 0 auto; } .content-page .page-content > bodycopy { display: block; } /* tidy centered headings used across project pages */ .page-content [style*="text-align: center"] { text-align: center; } .page-content [style*="text-align: right"] { text-align: right; } .page-content [style*="text-align: left"] { text-align: left; } .text-icon { font-style: normal; display: inline-block; } /* ========================================================================= HOME — full-screen hero + antikythera-style 4-column projects ========================================================================= */ .home { background: #0e0f12; } /* hide the page scrollbar on the home so the columns reach a true 100vw (hero <-> projects navigation is by wheel + the hover-reveal below) */ html:has(body.home) { scrollbar-width: none; -ms-overflow-style: none; } html:has(body.home)::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ---- header ---- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2.4rem; color: #fff; mix-blend-mode: difference; pointer-events: none; } .site-header a { pointer-events: auto; color: #fff; text-decoration: none; } .site-header .brand { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; } .site-header .header-nav { display: flex; gap: 2rem; font-size: 1.5rem; } .site-header .header-nav a:hover { opacity: 0.65; } /* ---- hero ---- */ .hero { position: relative; height: calc(100vh - 150px); /* leave the ticker + "Selected Work" peeking below */ height: calc(100svh - 150px); min-height: 360px; width: 100%; overflow: hidden; } .hero-img { position: absolute; inset: 0; z-index: 0; /* fallback poster, behind the video */ width: 100%; height: 100%; object-fit: cover; display: block; } /* looped, muted YouTube background — sized to cover the hero like object-fit: cover */ .hero-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; /* let hover/scroll pass through to the page */ } .hero-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 */ min-width: 177.78vh; /* cover tall/narrow viewports */ min-height: 100vh; border: 0; pointer-events: none; } .hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.4rem 2.4rem 4rem; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); color: #fff; } .hero-title { margin: 0 0 0.5rem; line-height: 1; font-weight: 700; } /* main name rendered as SVG so the blue metal shader can be a text-stroke (outline) */ .metal-name { display: block; width: min(92vw, 78rem); height: auto; filter: drop-shadow(0 0.2rem 0.5rem rgba(0, 0, 0, 0.45)); } .hero-sub { font-size: clamp(1.5rem, 2vw, 2.2rem); margin-top: 0.6rem; opacity: 0.9; } .scroll-cue { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); color: #fff; font-size: 2.6rem; text-decoration: none; animation: cue-bob 2.2s ease-in-out infinite; z-index: 2; } @keyframes cue-bob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(0.6rem);} } /* ---- Home: upcoming-presentations sliding ticker (between egg hero and projects) ---- */ .ticker { display: flex; align-items: stretch; background: #f3f5fb; border-top: 1px solid rgba(15, 23, 42, 0.14); border-bottom: 1px solid rgba(15, 23, 42, 0.14); overflow: hidden; } .ticker-head { flex: none; display: flex; align-items: center; padding: 0.9rem 2.2rem; background: #e7ecf6; border-right: 1px solid rgba(15, 23, 42, 0.14); } .ticker-head span { display: inline-block; font-size: 1.55rem; /* smaller than the 2.3rem project titles */ font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; color: transparent; -webkit-text-stroke: 0.7px rgba(15, 23, 42, 0.9); text-stroke: 0.7px rgba(15, 23, 42, 0.9); paint-order: stroke fill; transform: scaleY(1.45); /* stretched, outlined header */ transform-origin: left center; white-space: nowrap; } .ticker-viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; } .ticker-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: ticker-scroll 40s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tk-item { display: inline-flex; align-items: baseline; gap: 0.7rem; padding: 0 1.2rem; font-size: 1.5rem; letter-spacing: 0.04em; transform: scaleY(1.22); /* stretched subtitle typography */ color: var(--ink); white-space: nowrap; } .tk-date { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .tk-link { color: var(--accent-nav); text-decoration: none; font-weight: 600; } .tk-link:hover { text-decoration: underline; } .tk-loc { color: var(--ink-soft); font-size: 0.84em; } .tk-dot { color: var(--accent-nav); padding: 0 0.5rem; font-size: 0.9rem; } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } @media (max-width: 760px) { .ticker-head { padding: 0.7rem 1.2rem; } .ticker-head span { font-size: 1.25rem; } .tk-item { font-size: 1.3rem; } } /* ---- projects section (viewport-height, independently scrolling columns) ---- */ .projects { background: #f3f5fb; color: var(--ink); padding: 4.5rem 0 0; /* full-bleed: no side or bottom padding */ height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; } .projects-inner { max-width: none; /* span full viewport width */ width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .section-label { display: flex; justify-content: flex-start; align-items: baseline; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); padding: 0 1.6rem 0.4rem; margin-bottom: 2rem; flex: 0 0 auto; } .proj-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; /* full-width, columns flush edge-to-edge */ align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; /* parent grid never scrolls */ } /* each column scrolls independently (antikythera-style), scrollbars hidden */ .proj-col { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.6rem; /* spacing between columns, no divider lines */ scrollbar-width: none; /* Firefox: no scrollbar */ -ms-overflow-style: none; /* IE/Edge legacy */ } .proj-col::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit: no scrollbar */ .col-head { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0 1rem; margin-bottom: 1.6rem; position: sticky; /* category label stays while its column scrolls */ top: 0; background: #f3f5fb; z-index: 2; } /* section headers in the article-title style: outlined + stretched/expanded */ .col-name { display: inline-block; font-size: 2.3rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 0.825px rgba(0, 0, 0, 0.85); text-stroke: 0.825px rgba(0, 0, 0, 0.85); paint-order: stroke fill; transform: scaleY(1.5); transform-origin: left center; } .col-count { font-size: 1.3rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* embedded subgroup header (e.g. IMG inside the Interface column) — same type, not sticky */ .col-head.col-sub { position: static; margin-top: 3.2rem; padding-top: 0.4rem; } .col-cards { display: flex; flex-direction: column; gap: 2.4rem; padding-bottom: 2.4rem; } /* card border styling — matches the left nav menu on project pages */ .proj-card { display: block; position: relative; text-decoration: none; color: var(--ink); background: var(--card-bg); border: 0.1rem solid var(--card-border); box-shadow: 0.4rem 0.4rem 1rem 0.2rem rgba(88, 74, 141, 0.25); border-radius: 0.9rem; padding: 1rem 1rem 1.3rem; transition: box-shadow 0.25s ease, transform 0.25s ease; } .proj-card:hover { box-shadow: 0.5rem 0.5rem 1.2rem 0.25rem rgba(88, 74, 141, 0.32); transform: translateY(-0.2rem); } .pc-thumb { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.5rem; background: #e2e8f5; } .pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); } .proj-card:hover .pc-thumb img { transform: scale(1.05); } .pc-title { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin: 1rem 0 0.3rem; } .proj-card:hover .pc-title { color: var(--accent-nav); } .pc-meta { display: block; font-size: 1.2rem; color: var(--ink-soft); letter-spacing: 0.02em; } .pc-desc { display: block; font-size: 1.3rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.6rem; } /* ---- home footer ---- */ .home-footer { background: #f3f5fb; color: var(--ink-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 1.3rem; padding: 3rem 2.4rem; border-top: 1px solid rgba(0,0,0,0.12); } .home-footer a { color: var(--ink); text-decoration: none; } .home-footer a:hover { color: var(--accent-nav); } /* ========================================================================= METALLIC BORDER — bright, mouse-reactive (project cards + buttons) Palette: white/silver highlights, icy blues, cool slate darks. Robust two-layer model: gradient border layer + inset face; no fragile masks. ========================================================================= */ @property --start { syntax: ""; inherits: true; initial-value: 0; } @property --active { syntax: ""; inherits: true; initial-value: 0; } :root { /* liquid-metal border stops — bright silver/white specular, no blue tones */ --metal-stops: #64748b 0deg, #cbd5e1 40deg, #ffffff 85deg, #eef2f6 130deg, #ffffff 175deg, #cbd5e1 220deg, #94a3b8 270deg, #f1f5f9 315deg, #64748b 360deg; } /* ---- project cards: metallic border layer + inner face + hover spotlight ---- */ .proj-card { --bw: 2.125px; --mx: 50%; --my: 50%; --start: 0; --active: 0; border: none; overflow: hidden; isolation: isolate; transition: transform 0.25s ease, box-shadow 0.25s ease, --start 0.8s cubic-bezier(0.16, 1, 0.3, 1), --active 0.3s ease; } .proj-card::before { /* metallic border layer (bottom) */ content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(calc(var(--active) * 240px) circle at var(--mx) var(--my), #ffffff 0%, #eef2f6 24%, #cbd5e1 50%, transparent 74%), conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)); } .proj-card::after { /* inner face — only the border ring stays visible */ content: ""; position: absolute; inset: var(--bw); z-index: 1; border-radius: calc(0.9rem - var(--bw)); background: var(--card-bg); } .proj-card > * { position: relative; z-index: 2; } /* content sits above the face */ /* ---- interactive buttons: rotating metallic ring ---- */ .metal-btn { position: relative; } .nav-toggle, .metal-btn { --start: 0; border: 2px solid transparent; border-radius: 0.8rem; background: linear-gradient(var(--btn-face, #f7f9ff), var(--btn-face, #f7f9ff)) padding-box, conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)) border-box; transition: --start 0.8s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .proj-card, .nav-toggle, .metal-btn, .metal-link-card { transition: none; } } /* ---- external-link card with the animated metal border (GlowingEffect) ---- */ .metal-link-card { --bw: 3px; --mx: 50%; --my: 50%; --start: 0; --active: 0; position: relative; display: block; max-width: 53rem; /* slightly wider button */ margin: 1rem auto 0; overflow: hidden; isolation: isolate; border-radius: 1rem; text-decoration: none; color: var(--ink); transition: box-shadow 0.3s ease, transform 0.25s ease, --start 0.8s cubic-bezier(0.16, 1, 0.3, 1), --active 0.3s ease; } .metal-link-card:hover { box-shadow: 0 0.6rem 1.8rem rgba(15, 72, 206, 0.22); transform: translateY(-0.2rem); } .metal-link-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(calc(var(--active) * 300px) circle at var(--mx) var(--my), #ffffff 0%, #eef2f6 22%, #cbd5e1 48%, transparent 72%), conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)); } .metal-link-card::after { content: ""; position: absolute; inset: var(--bw); z-index: 1; border-radius: calc(1rem - var(--bw)); background: var(--card-bg); } .mlc-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.7rem 2rem; text-align: center; } .mlc-title { font-size: 1.55rem; font-weight: 700; color: var(--ink); } .mlc-url { font-size: 1.35rem; color: var(--accent-nav); word-break: break-word; } .metal-link-card:hover .mlc-url { text-decoration: underline; } /* larger variant */ .metal-link-card.mlc-big { max-width: 62rem; } .metal-link-card.mlc-big .mlc-body { padding: 2.6rem 2.4rem; gap: 0.6rem; } .metal-link-card.mlc-big .mlc-title { font-size: 2.2rem; } .metal-link-card.mlc-big .mlc-url { font-size: 1.55rem; } /* ---- Artist Rejector body (image + text + big link card) ---- */ .ar-body { max-width: 64rem; margin: 0 auto; } .ar-shot { width: 100%; height: auto; display: block; border-radius: 0.6rem; margin-bottom: 2.4rem; } .ar-text { margin-bottom: 2.6rem; } .ar-text p { margin: 0 0 1.2rem; } .ar-text ul { margin: 1.2rem 0; } .ar-text li { margin-bottom: 0.3rem; } /* ---- About page: bio + metallic accordions ---- */ .about-body { max-width: 66rem; margin: 0 auto; } .about-bio { font-size: 1.6rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 2.8rem; } .about-bio p { margin: 0 0 1.4rem; } .about-bio p:last-child { margin-bottom: 0; } .about-contact { font-size: 1.6rem; line-height: 1.7; color: var(--ink-soft); margin: 1.6rem 0 2.8rem; } .about-contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } .about-contact a:hover { color: var(--accent); } .acc-list { display: flex; flex-direction: column; gap: 1.1rem; } /* flat card with a static liquid-metal border ring */ .accordion { --bw: 2.5px; --start: 210; /* fixed angle -> static metal (no rotation) */ position: relative; border: none; border-radius: 0.9rem; overflow: hidden; isolation: isolate; background: transparent; padding: var(--bw); /* keep children off the metal ring */ } .accordion::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)); } .accordion::after { content: ""; position: absolute; inset: var(--bw); z-index: 1; border-radius: calc(0.9rem - var(--bw)); background: var(--card-bg); /* flat inner face */ } .accordion > * { position: relative; z-index: 2; } .acc-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.7rem; min-height: 3rem; font-size: 1.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); background: transparent; /* flat */ border-radius: calc(0.9rem - var(--bw)); transition: background 0.25s ease; -webkit-tap-highlight-color: transparent; } .acc-head::-webkit-details-marker { display: none; } .acc-head:hover { background: rgba(20, 40, 80, 0.05); } details[open] > .acc-head { background: rgba(20, 40, 80, 0.07); color: var(--ink); border-radius: calc(0.9rem - var(--bw)) calc(0.9rem - var(--bw)) 0 0; } .acc-group { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); margin: 1.6rem 0 0.4rem; } .acc-group:first-child { margin-top: 0; } .chev { flex: none; font-size: 1.4rem; color: var(--accent-nav); transition: transform 0.3s ease; } details[open] > .acc-head .chev { transform: rotate(180deg); } .acc-body { padding: 1.4rem 1.7rem 1.7rem; font-size: 1.35rem; line-height: 1.5; color: var(--ink-soft); } .acc-body ul { list-style: none; margin: 0; padding: 0; } .acc-body li { padding: 0.55rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .acc-body li:last-child { border-bottom: none; } .acc-body a { color: var(--accent-nav); text-decoration: underline; } .acc-note { margin: 1.1rem 0 0; } details[open] > .acc-body { animation: acc-reveal 0.28s ease; } @keyframes acc-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ========================================================================= Old-TV / CRT overlay — full-screen, above everything, non-interactive ========================================================================= */ .crt-scanlines, .crt-rollbar, .crt-vignette { position: fixed; inset: 0; pointer-events: none; /* never blocks clicks or scroll */ z-index: 9000; } /* 1) fixed horizontal scanlines */ .crt-scanlines { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 10, 40, 0.28) 3px, rgba(0, 10, 40, 0.28) 3px ); background-size: 100% 3px; mix-blend-mode: multiply; opacity: 0.7; } /* 2) soft white band rolling down in a loop */ .crt-rollbar { height: 40%; background: linear-gradient( to bottom, transparent 0%, rgba(180, 210, 255, 0.05) 45%, rgba(200, 225, 255, 0.12) 50%, rgba(180, 210, 255, 0.05) 55%, transparent 100% ); animation: crt-roll 7s linear infinite; } @keyframes crt-roll { 0% { transform: translateY(-60%); } 100% { transform: translateY(260%); } } /* 3) dark edge vignette (tube curvature) */ .crt-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 2, 15, 0.275) 100%); box-shadow: inset 0 0 160px rgba(0, 2, 20, 0.425); } /* project/detail pages: vignette 10% softer */ .content-page .crt-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 2, 15, 0.2475) 100%); box-shadow: inset 0 0 160px rgba(0, 2, 20, 0.3825); } @media (prefers-reduced-motion: reduce) { .crt-rollbar { animation: none; } } /* ========================================================================= One More Sim — heat-reveal hero A paints a white layer over the photo; the pointer trail punches grid-cell holes (destination-out) to reveal it, refilling in ~2s. Effect parameters live in main.js (buildHeatReveal) and are kept unchanged. ========================================================================= */ .oms-home { /* compact full-bleed banner. Exact width/offset set by JS (layoutOmsHero) so it edge-to-edges without the scrollbar throwing off a 100vw calc. */ position: relative; width: 100%; margin: 0 0 2.6rem; height: clamp(28rem, 34vh, 32rem); /* compact banner ~280–320px (was 86vh) */ overflow: hidden; display: flex; align-items: center; } html:has(body.content-page) { overflow-x: hidden; } /* clip any full-bleed overflow */ .mw-photo { position: absolute; inset: 0; z-index: 0; background: url("../img/studyingMyPain.png") center center / cover no-repeat; } .mw-heat { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } /* inner wrapper — JS aligns it to the article column (width + left offset) */ .mw-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; /* title + tags centered within the article column */ } .mw-title { width: 100%; text-align: center; margin: 0; text-transform: uppercase; letter-spacing: -0.055em; font-size: clamp(2.6rem, 8vw, 8rem); line-height: .9; white-space: nowrap; transform: scaleY(1.85); transform-origin: center center; color: #fff; -webkit-text-stroke: 2px #0a0a0a; paint-order: stroke fill; user-select: none; } /* project metadata directly below the title, aligned to the article column */ .mw-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 3rem; pointer-events: none; } .mw-tags span { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a; padding: 0.35rem 0.85rem; border: 1px solid rgba(10, 10, 10, 0.5); border-radius: 10rem; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(2px); } @media (max-width: 1100px) { .proj-columns { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.4rem; } } /* Below this width a single column flows with the page instead of scrolling in place */ @media (max-width: 680px) { .projects { height: auto; display: block; padding-top: 6rem; } .projects-inner { display: block; min-height: 0; } .proj-columns { grid-template-columns: 1fr; gap: 3.5rem; overflow: visible; } .proj-col { height: auto; min-height: 0; overflow: visible; padding: 0; border-left: none; } .col-head { position: static; } .pc-thumb { aspect-ratio: 16 / 10; } .site-header { padding: 1.2rem 1.6rem; } .site-header .header-nav { display: none; } /* hide Work / About / Instagram links on mobile */ .projects, .home-footer { padding-left: 1.6rem; padding-right: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } } /* ========================================================================= IMAGE LIGHTBOX ========================================================================= */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); display: none; align-items: center; justify-content: center; z-index: 999; cursor: zoom-out; padding: 3rem; } .lightbox.open { display: flex; } .lightbox img { max-width: 96vw; max-height: 94vh; width: auto; height: auto; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 980px) { :root { --nav-width: 30rem; } .nav-toggle { display: block; } .nav-card { transform: translateX(calc(-100% - 2rem)); transition: transform 0.32s ease; max-height: calc(100vh - 2.2rem); } .nav-card.open { transform: translateX(0); background: #fff; } .nav-backdrop { position: fixed; inset: 0; background: #fff; /* opaque white so the projects behind don't bleed through */ z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nav-backdrop.open { display: block; opacity: 1; pointer-events: auto; } .content-page .page { padding: 7rem 1.6rem 6rem; } } @media (max-width: 700px) { html { font-size: 60%; } .column-set { flex-direction: column; gap: var(--mobile-gutter, var(--gutter, 1rem)); } .gallery-grid { grid-template-columns: 1fr; } [grid-row] { flex-direction: column; } h2 { font-size: 2.6rem; } .home .eye-stage img { width: 86vw; } } /* ========================================================================= Misc project-page tweaks ========================================================================= */ /* nitef: a stretched / deformed line */ .deformed { display: inline-block; transform: scaleY(1.65) scaleX(0.96); transform-origin: center; letter-spacing: -0.01em; } /* play-link cards: stretched uppercase label, like the title (a touch smaller) */ .mlc-title { text-transform: uppercase; letter-spacing: 0.16em; /* tracking-wider */ font-stretch: expanded; transform: scaleY(1.4) scaleX(1.04); transform-origin: center; } /* cleaner, coherent image grid on project pages */ .column-unit img, .column-unit video, .column-unit .media-item, bodycopy > .media-item { border-radius: 0.5rem; } .column-set { align-items: flex-start; } /* Simulación de lo esencial: normalize oversized images to a balanced grid */ .page-sdle .column-unit img, .page-sdle .media-item img, .page-sdle bodycopy img { max-height: 72vh; max-width: 100%; width: auto; height: auto; margin-left: auto; margin-right: auto; display: block; } /* Fluido.obj: give the embedded video (and its caption text) the full content width */ .page-fluido-obj [grid-row]:has(> [grid-col] > .video-embed) { display: block; } .page-fluido-obj [grid-col]:has(> .video-embed) { width: 100%; flex-basis: 100%; } .page-fluido-obj [grid-row]:has(> [grid-col] > .video-embed) > [grid-col]:not(:has(.video-embed)) { display: none; } .page-fluido-obj .video-embed { margin: 1.4rem auto 1.8rem; } .page-fluido-obj blockquote { max-width: 66rem; margin-left: auto; margin-right: auto; } /* Water Nodes: tame the oversized image and vertically balance the two-column layout */ .page-water-nodes .column-set { align-items: center; gap: clamp(1.6rem, 3vw, 3rem); } .page-water-nodes .column-unit img, .page-water-nodes .media-item { max-height: 64vh; max-width: 100%; width: auto; height: auto; margin: 0 auto; } .page-water-nodes bodycopy iframe, .page-water-nodes .column-unit iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 1rem 0; } /* ---- One More Sim: right-pinned rail, cards slide in on scroll ---- */ .side-rail { position: fixed; right: 18px; top: 96px; width: min(212px, 46vw); z-index: 30; display: flex; flex-direction: column; gap: 13px; align-items: flex-end; max-height: none; /* don't cap: capping made flex shrink & crop the cards */ pointer-events: none; transition: opacity .4s ease; } .side-rail.hush { opacity: 0; } .side-card { --bw: 3px; --start: 210; /* fixed angle -> static liquid metal (no rotation) */ pointer-events: auto; position: relative; flex: 0 0 auto; /* keep natural height so the image is never cropped */ border: none; border-radius: 14px; padding: 13px 16px; overflow: hidden; isolation: isolate; box-shadow: 0 18px 38px -22px rgba(10, 10, 10, .35); width: 100%; opacity: 0; transform: translateX(72px); transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .9s cubic-bezier(.22, 1, .36, 1); } .side-card::before { /* static liquid-metal ring (no spotlight, no rotation) */ content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: conic-gradient(from calc(var(--start) * 1deg), var(--metal-stops)); } .side-card::after { /* flat inner face */ content: ""; position: absolute; inset: var(--bw); z-index: 1; border-radius: calc(14px - var(--bw)); background: #fff; } .side-card > * { position: relative; z-index: 2; } .side-card.on { opacity: 1; transform: translateX(0); } .side-card:nth-child(2) { transition-delay: .06s; } .side-card:nth-child(3) { transition-delay: .12s; } .side-card:nth-child(4) { transition-delay: .18s; } .side-tag { font-size: .92rem; text-transform: uppercase; color: #0a0a0a; font-weight: 800; margin: 0 0 13px; display: inline-block; transform: scaleY(1.5); transform-origin: left top; } .side-body { font-size: .95rem; line-height: 1.55; color: #444; margin: 0; } .side-card--img { padding: 11px; } /* white matte frame around each image (uniform card width) */ .side-img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 6px; } /* natural aspect, fully visible, no crop */ /* Artist Rejector: no white matte, larger image, roomier gap, slower staggered reveal */ .page-artist-rejector .side-rail { gap: 32px; width: min(244px, 52vw); } .page-artist-rejector .side-card--img { padding: var(--bw); } /* drop the white border; image fills to the metal ring */ .page-artist-rejector .side-card { transition-duration: 1.25s, 1.25s; } .page-artist-rejector .side-card:nth-child(1) { transition-delay: .10s; } .page-artist-rejector .side-card:nth-child(2) { transition-delay: .40s; } .page-artist-rejector .side-card:nth-child(3) { transition-delay: .70s; } .cta { display: inline-block; margin-top: 12px; font-size: 1rem; padding: 11px 20px; background: #fff; color: #0a0a0a; border: 1.5px solid #0a0a0a; border-radius: 10px; cursor: pointer; transition: background .18s, color .18s; } .cta:hover { background: #0a0a0a; color: #fff; } @media (max-width: 760px) { .side-rail { position: static; width: auto; margin: 1.6rem 0 0; align-items: stretch; pointer-events: auto; max-height: none; } .side-card { opacity: 1; transform: none; transition: none; } }