/* ========================================================================== Santiago Vargas Borja — portfolio Black canvas, editorial scale, one violet accent. No framework, no build. ========================================================================== */ :root{ /* colour */ --void:#000000; --bone:#ffffff; --ash:#9a9a9a; --silver:#bdbdbd; --iris:#8052ff; --saffron:#ffb829; --verdant:#15846e; /* hairlines — the only "surfaces" on the page */ --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); /* type */ --font:'PPNeueMontreal',Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; --fs-cap:12px; --fs-nav:14px; --fs-body:18px; --fs-sm:clamp(20px,2.2vw,24px); --fs-md:clamp(30px,5vw,48px); --fs-lg:clamp(38px,7vw,78px); --fs-dsp:clamp(46px,9.2vw,113px); /* rhythm — base unit 6px */ --u:6px; --gap:calc(var(--u) * 10); /* 60 */ --gap-l:calc(var(--u) * 16); /* 96 */ --gap-xl:calc(var(--u) * 20); /* 120 */ --shell:1280px; --pad:clamp(20px,5vw,48px); --ease:cubic-bezier(.2,.7,.2,1); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; } html{background:var(--void)} body{ margin:0; background:transparent; color:var(--bone); font-family:var(--font); font-size:var(--fs-body); font-weight:200; line-height:1.6; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} ul,ol{margin:0;padding:0;list-style:none} p{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} ::selection{background:var(--iris);color:var(--bone)} :focus-visible{ outline:2px solid var(--iris); outline-offset:4px; border-radius:2px; } .vh{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .skip{ position:absolute;top:-100px;left:var(--pad);z-index:200; padding:12px 18px;background:var(--iris);color:var(--bone); font-size:var(--fs-nav);font-weight:600;text-transform:uppercase; letter-spacing:.025em;border-radius:24px; } .skip:focus{top:18px} .wrap{ width:100%;max-width:var(--shell); margin-inline:auto;padding-inline:var(--pad); } /* --------------------------------------------------------------- field -- */ /* Fixed behind the whole page. z-index:-1 works only because the page's black lives on , not — on it would paint over this. */ .field{ position:fixed;inset:0;z-index:-1; pointer-events:none;user-select:none; contain:strict; } .field canvas{display:block;width:100%;height:100%} /* ---------------------------------------------------------------- type -- */ .display{ margin:0; font-size:var(--fs-dsp); font-weight:400; line-height:.94; letter-spacing:-.04em; } .h-lg{ margin:0; font-size:var(--fs-lg); font-weight:400; line-height:1.02; letter-spacing:-.038em; } .h-md{ margin:0; font-size:var(--fs-md); font-weight:400; line-height:1.04; letter-spacing:-.035em; } .h-sm{ margin:0; font-size:var(--fs-sm); font-weight:400; line-height:1.2; letter-spacing:-.02em; } .dim{color:var(--ash)} .body{ font-size:var(--fs-body); font-weight:200; line-height:1.66; color:var(--silver); } .body em{font-style:normal;color:var(--bone)} .body b{font-weight:400;color:var(--bone)} .lede{ max-width:52ch; font-size:clamp(17px,1.5vw,20px); font-weight:200; line-height:1.62; color:var(--silver); } .label{ margin:0; font-size:var(--fs-cap); font-weight:600; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); } .label-amber{ display:inline-flex;align-items:center;gap:10px; color:var(--saffron); } .tick{ width:5px;height:5px;border-radius:50%; background:var(--saffron);flex:none; } .num{ margin:0 0 calc(var(--u) * 3); font-size:var(--fs-cap); font-weight:600; letter-spacing:.14em; color:var(--ash); transition:color .4s var(--ease); } /* ------------------------------------------------------------ controls -- */ .pill{ display:inline-flex;align-items:center;gap:10px; padding:14px 24px; background:var(--iris);color:var(--bone); font-size:var(--fs-nav);font-weight:600; letter-spacing:.025em;text-transform:uppercase; border-radius:24px; transition:background .3s var(--ease),transform .3s var(--ease); } .pill span{transition:transform .3s var(--ease)} .pill:hover{background:#6f3dff} .pill:hover span{transform:translateX(4px)} .pill:active{transform:translateY(1px)} /* :hover still matches a disabled button, so this has to come after it */ .pill:disabled,.pill:disabled:hover{ background:rgba(128,82,255,.30);color:var(--ash);cursor:not-allowed;transform:none; } .pill:disabled span{transform:none} .ghost{ display:inline-flex;align-items:center; padding:14px 4px; font-size:var(--fs-nav);font-weight:600; letter-spacing:.025em;text-transform:uppercase; color:var(--ash); border-bottom:1px solid var(--line); transition:color .3s var(--ease),border-color .3s var(--ease); } .ghost:hover{color:var(--bone);border-bottom-color:var(--bone)} .row{ display:flex;flex-wrap:wrap;align-items:center; gap:calc(var(--u) * 5); margin-top:calc(var(--u) * 7); } .out{ font-size:var(--fs-nav);font-weight:600; letter-spacing:.025em;text-transform:uppercase; color:var(--iris); transition:color .3s var(--ease); } .out:hover{color:var(--saffron)} /* ------------------------------------------------------------ nav bar --- */ .nav{ position:fixed;inset:0 0 auto;z-index:100; transition:background .4s var(--ease),backdrop-filter .4s var(--ease); } .nav.is-past{background:rgba(0,0,0,.9)} @supports (backdrop-filter:blur(2px)){ .nav.is-past{backdrop-filter:saturate(120%) blur(10px)} } .nav-in{ display:flex;align-items:center;gap:calc(var(--u) * 6); width:100%;max-width:var(--shell); margin-inline:auto;padding:calc(var(--u) * 5) var(--pad); } .mark{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase; white-space:nowrap; transition:color .3s var(--ease); } .mark:hover{color:var(--iris)} .mark-short{display:none} .nav-links{ display:flex;gap:calc(var(--u) * 5); margin-left:auto; } .nav-links a{ position:relative; font-size:var(--fs-nav);font-weight:600; letter-spacing:.025em;text-transform:uppercase; color:var(--ash); transition:color .3s var(--ease); } .nav-links a::after{ content:"";position:absolute;left:0;bottom:-6px; width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease); } .nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{transform:scaleX(1)} .nav-links a.is-here{color:var(--bone)} .nav-links a.is-here::after{transform:scaleX(1);background:var(--iris)} .burger{ display:none;position:relative;margin-left:auto; width:32px;height:32px;z-index:95; } .burger-bar{ position:absolute;left:5px;width:22px;height:1px; background:var(--bone); transition:transform .3s var(--ease); } .burger-bar:first-of-type{top:13px} .burger-bar:last-of-type{top:19px} .burger[aria-expanded="true"] .burger-bar:first-of-type{transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] .burger-bar:last-of-type{transform:translateY(-3px) rotate(-45deg)} .menu{ position:fixed;inset:0;z-index:90; background:var(--void); display:flex;align-items:center; opacity:0;transition:opacity .35s var(--ease); } /* an author `display` beats the UA [hidden] rule — without this the closed overlay stays in the layer and eats every click on the page underneath */ .menu[hidden]{display:none} .menu.is-open{opacity:1} .menu-in{ display:flex;flex-direction:column;gap:calc(var(--u) * 4); width:100%;padding:0 var(--pad); } .menu-in a{ display:flex;align-items:baseline;gap:16px; font-size:clamp(30px,9vw,44px);font-weight:400; line-height:1;letter-spacing:-.035em; } .menu-in i{ font-size:var(--fs-cap);font-weight:600;font-style:normal; letter-spacing:.14em;color:var(--ash); } .menu-in .menu-cta{ align-self:flex-start;margin-top:calc(var(--u) * 6); font-size:var(--fs-nav); } /* ---------------------------------------------------------------- hero -- */ .hero{ position:relative; display:flex;align-items:center; /* deliberately past one screen: the extra travel is the entrance, a beat where the field is the only thing on stage before Work starts */ min-height:118svh; padding:calc(var(--u) * 18) 0 calc(var(--u) * 30); } .hero-grid{display:block} .hero-copy{max-width:min(66%,880px)} .hero-copy .display{ margin-top:calc(var(--u) * 5); font-size:clamp(46px,6.8vw,96px); } .hero-copy .lede{margin-top:calc(var(--u) * 5);max-width:44ch} .hero-copy .row{margin-top:calc(var(--u) * 5)} .cue{ position:absolute;left:var(--pad);bottom:calc(var(--u) * 6); display:flex;align-items:center;gap:10px; font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--ash); transition:color .3s var(--ease); } .cue svg{width:16px;height:16px;animation:nudge 2.6s var(--ease) infinite} .cue:hover{color:var(--bone)} @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ------------------------------------------------------------ sections -- */ .sec{padding:var(--gap-xl) 0} /* stations the field performs at get scroll distance to do it in */ #about,#experiments,#contact{padding-block:calc(var(--gap-xl) * 1.35)} #contact{min-height:96svh;display:flex;align-items:center} .sec-end{padding-bottom:var(--gap-l)} .sec-head{max-width:820px;margin-bottom:var(--gap-l)} .sec-head .h-lg{margin-top:calc(var(--u) * 4)} .sec-note{margin-top:calc(var(--u) * 5);max-width:46ch} /* ------------------------------------------------------------ projects -- */ .proj{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:var(--gap-l); padding:var(--gap) 0; border-top:1px solid var(--line-soft); } .proj:first-of-type{border-top:0} .proj.flip .proj-copy{order:2} .proj.flip .proj-vis{order:1} .proj-copy .h-md{margin-bottom:calc(var(--u) * 4)} .proj-copy .body{max-width:44ch} .proj:hover .num{color:var(--saffron)} .proj .h-md{transition:color .4s var(--ease)} .proj:hover .h-md{color:var(--iris)} .meta{ display:flex;flex-wrap:wrap;gap:calc(var(--u) * 5) calc(var(--u) * 8); margin:calc(var(--u) * 7) 0 0; } .meta dt{ margin:0 0 8px; font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--ash); } .meta dd{ margin:0;max-width:34ch; font-size:15px;font-weight:200;line-height:1.5; color:var(--silver); } .disc-btn{ display:inline-flex;align-items:center;gap:10px; margin-top:calc(var(--u) * 6);padding-bottom:6px; font-size:var(--fs-nav);font-weight:600; letter-spacing:.025em;text-transform:uppercase; color:var(--bone); border-bottom:1px solid var(--line); transition:color .3s var(--ease),border-color .3s var(--ease); } .disc-btn:hover{color:var(--iris);border-bottom-color:var(--iris)} .disc-arrow{transition:transform .3s var(--ease)} .disc-btn:hover .disc-arrow{transform:translateX(4px)} .disc-close{display:none} .disc-btn[aria-expanded="true"] .disc-open{display:none} .disc-btn[aria-expanded="true"] .disc-close{display:inline} .disc-btn[aria-expanded="true"] .disc-arrow{transform:rotate(90deg)} .disc{margin-top:calc(var(--u) * 6)} .disc p{margin-top:calc(var(--u) * 5)} .js .disc:not([hidden]){animation:unfold .5s var(--ease) both} @keyframes unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .pts{display:grid;gap:calc(var(--u) * 3);max-width:52ch} .pts li{ position:relative;padding-left:22px; font-size:16px;font-weight:200;line-height:1.6; color:var(--silver); } .pts li::before{ content:"";position:absolute;left:0;top:.62em; width:8px;height:1px;background:var(--iris); } .pts b{font-weight:400;color:var(--bone)} .pts-note{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--saffron); } .pts-lab{margin:calc(var(--u) * 5) 0 calc(var(--u) * 3)} /* Every project visual is the same 1.44:1 frame — the delivered sites are all captured at one size, so the rhythm down the page holds instead of jumping between crops. */ .proj-vis{overflow:hidden;aspect-ratio:1440/1000} .proj-vis img{ width:100%;height:100%;object-fit:cover;object-position:top center; /* no grayscale: these are design artefacts, the colour is the evidence */ filter:brightness(.86); transition:transform .8s var(--ease),filter .8s var(--ease); will-change:transform; } .proj:hover .proj-vis img{transform:scale(1.02);filter:brightness(1)} /* --------------------------------------------------------- two columns -- */ .two{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--gap-l); margin-top:calc(var(--u) * 8); } .two-b > .body + .body{margin-top:calc(var(--u) * 5)} .two-b .body{max-width:56ch} .stick{position:sticky;top:120px} .stick .label + .h-lg{margin-top:calc(var(--u) * 3)} .stick .h-lg{margin-top:calc(var(--u) * 4)} .stick .ghost{margin-top:calc(var(--u) * 8)} .cap-lab{margin:var(--gap) 0 calc(var(--u) * 5)} .caps{ display:flex;flex-wrap:wrap; column-gap:calc(var(--u) * 5);row-gap:calc(var(--u) * 2); max-width:56ch; } .caps li{ font-size:clamp(18px,1.9vw,24px);font-weight:200; line-height:1.35;letter-spacing:-.02em;color:var(--ash); transition:color .3s var(--ease); cursor:default; } .caps li:hover{color:var(--bone)} .caps-cv li{font-size:clamp(16px,1.5vw,19px)} /* ------------------------------------------------------ resume teaser --- */ .snap{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--u) * 7) calc(var(--u) * 8); margin:calc(var(--u) * 9) 0; } .snap dt{ margin:0 0 10px; font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); } .snap dd{ margin:0; font-size:17px;font-weight:200;line-height:1.5;color:var(--silver); } .snap b{font-weight:400;color:var(--bone)} /* ------------------------------------------------------------- resume --- */ .cv-lab{ padding-top:calc(var(--u) * 5); border-top:1px solid var(--line); margin-bottom:calc(var(--u) * 8); } .cv > .cv-lab:not(:first-child){margin-top:var(--gap-l)} .role{margin-bottom:var(--gap)} .role:last-of-type{margin-bottom:0} .yr{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); } .yr span{margin-left:14px;color:rgba(255,255,255,.28)} .role .h-sm{margin:calc(var(--u) * 3) 0 6px} .role-t{ font-size:15px;font-weight:400;letter-spacing:.01em; color:var(--iris); } .role .body{margin-top:calc(var(--u) * 4);max-width:56ch} .role .pts{margin-top:calc(var(--u) * 4)} .rec{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:calc(var(--u) * 7); } .rec-t{ margin-top:10px; font-size:17px;font-weight:200;line-height:1.45;color:var(--silver); } .dl{ margin-top:var(--gap-l);padding-top:calc(var(--u) * 8); border-top:1px solid var(--line); } .dl .pill{margin-top:calc(var(--u) * 5)} /* -------------------------------------------------------- experiments --- */ .exps{display:grid} .exp{ display:grid;grid-template-columns:minmax(0,84px) minmax(0,1fr); gap:calc(var(--u) * 4); padding:calc(var(--u) * 8) 0; border-top:1px solid var(--line-soft); transition:border-color .4s var(--ease); } .exp:last-child{border-bottom:1px solid var(--line-soft)} .exp:hover{border-top-color:rgba(128,82,255,.45)} .exp .num{margin:0;padding-top:6px} .exp:hover .num{color:var(--iris)} .exp-cat{ margin-bottom:calc(var(--u) * 3); font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--verdant); } .exp .h-sm{transition:color .4s var(--ease)} .exp:hover .h-sm{color:var(--bone)} .exp .body{margin-top:calc(var(--u) * 3);max-width:56ch;font-size:17px} /* ------------------------------------------------------------ contact --- */ #contact .display{margin-top:calc(var(--u) * 5)} #contact .lede{margin-top:calc(var(--u) * 6)} /* No panels anywhere on this site, so the fields are hairlines too: a bottom rule that goes violet on focus, and nothing else. */ /* One column, and narrow. The field is at its densest behind this section, and a second column would put Email in the thick of it. */ .form{max-width:34rem;margin-top:calc(var(--u) * 9)} .f{margin:0} .f + .f{margin-top:calc(var(--u) * 6)} .f > .label{display:block;margin-bottom:calc(var(--u) * 2)} .input{ display:block;width:100%; padding:10px 0 12px; background:transparent;color:var(--bone); font-family:inherit;font-size:17px;font-weight:200;line-height:1.5; letter-spacing:-.005em; border:0;border-bottom:1px solid var(--line);border-radius:0; transition:border-color .3s var(--ease); } .input::placeholder{color:rgba(255,255,255,.26)} .input:hover{border-bottom-color:rgba(255,255,255,.26)} .input:focus{border-bottom-color:var(--iris)} .input:focus-visible{outline-offset:6px} .input:disabled{opacity:.4;cursor:not-allowed} textarea.input{min-height:112px;resize:vertical} .form-foot{ display:flex;flex-wrap:wrap;align-items:center; gap:calc(var(--u) * 4) calc(var(--u) * 6); margin-top:calc(var(--u) * 8); } .fine{ max-width:36ch; font-size:13px;font-weight:200;line-height:1.5;color:var(--ash); } /* Lives outside the form, because a success swaps the form out and the status has to survive that. */ .form-note{ margin-top:calc(var(--u) * 6); max-width:52ch; font-size:17px;font-weight:200;line-height:1.6; color:var(--silver); } /* Collapsed, but never display:none — a live region has to already be in the accessibility tree for a screen reader to announce what lands in it. */ .form-note:empty{margin:0;height:0;overflow:hidden} .form-note:focus{outline:none} .form-note.is-ok{color:var(--bone)} .form-note.is-bad{color:var(--saffron)} .socials{ display:flex;flex-wrap:wrap;gap:calc(var(--u) * 8); margin-top:var(--gap);padding-top:calc(var(--u) * 6); border-top:1px solid var(--line-soft); } .socials a{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); transition:color .3s var(--ease); } .socials a:hover{color:var(--iris)} /* ------------------------------------------------------------- footer --- */ .foot{padding:calc(var(--u) * 8) 0 calc(var(--u) * 10);border-top:1px solid var(--line-soft)} .foot-in{ display:flex;flex-wrap:wrap;align-items:baseline; gap:calc(var(--u) * 4) calc(var(--u) * 8); } .foot-name{font-size:var(--fs-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase} .foot-tag,.foot-year{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); } .foot-links{display:flex;gap:calc(var(--u) * 6);margin-left:auto} .foot-links a{ font-size:var(--fs-cap);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); transition:color .3s var(--ease); } .foot-links a:hover{color:var(--bone)} /* ------------------------------------------------------------ reveals --- */ .js .r{opacity:0;transform:translateY(18px)} .js .r.in{ opacity:1;transform:none; transition:opacity .9s var(--ease),transform .9s var(--ease); } .js .r.in.d1{transition-delay:.08s} .js .r.in.d2{transition-delay:.16s} .js .r.in.d3{transition-delay:.24s} /* --------------------------------------------------------- responsive --- */ @media (max-width:1080px){ :root{--gap-l:calc(var(--u) * 13);--gap-xl:calc(var(--u) * 16)} .hero-grid{gap:var(--gap)} .proj,.two{gap:var(--gap)} } @media (max-width:900px){ html{scroll-padding-top:80px} .nav-links,.nav-cta{display:none} .burger{display:block} .mark-full{display:none} .mark-short{display:inline} .hero{min-height:96svh;padding:calc(var(--u) * 24) 0 calc(var(--u) * 18)} .hero-copy{max-width:none} .cue{display:none} .proj{grid-template-columns:1fr;gap:calc(var(--u) * 8);padding:calc(var(--u) * 12) 0} .proj.flip .proj-copy,.proj.flip .proj-vis{order:0} .proj-vis{order:-1} .proj-copy .body,.meta dd{max-width:none} .two{grid-template-columns:1fr;gap:calc(var(--u) * 8)} .stick{position:static} .stick .ghost{margin-top:calc(var(--u) * 6)} .exp{grid-template-columns:1fr;gap:calc(var(--u) * 3)} .exp .num{padding-top:0} .foot-links{margin-left:0;width:100%} } @media (max-width:560px){ :root{--fs-body:17px} .hero-copy .display{font-size:52px} .snap{grid-template-columns:1fr;gap:calc(var(--u) * 5)} .form-foot .pill{width:100%;justify-content:center} .row{gap:calc(var(--u) * 3);flex-direction:column;align-items:flex-start} .row .pill,.row .ghost{width:100%;justify-content:center} .meta{gap:calc(var(--u) * 4)} .socials{gap:calc(var(--u) * 5)} } /* ------------------------------------------------------ reduced motion -- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js .r{opacity:1;transform:none} .proj:hover .proj-vis img{transform:none} } /* --------------------------------------------------------------- print -- */ @media print{ .nav,.menu,.cue,.field,.proj-vis,.disc-btn,.skip{display:none !important} body{background:#fff;color:#000} .body,.lede,.dim,.label,.yr{color:#333} .disc[hidden]{display:block !important} } /* ---------- legal pages ---------- */ .legal-wrap{padding:calc(var(--nav-h,72px) + 4rem) 0 6rem} .legal-wrap .display{font-size:clamp(2rem,5vw,3.2rem);margin:.6rem 0 0} .legal-wrap .lede{max-width:60ch;margin:1rem 0 0} .legal-s{max-width:68ch;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)} .legal-s h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin:0 0 1rem;font-weight:500} .legal-s p{margin:0 0 1rem;max-width:68ch} .legal-more{margin-top:4rem}