/* ============================================ jihae.info — site chrome Landing index + the footer that reproduces it. Shared by index.html, the case studies and the project pages. ============================================ */ @font-face{font-family:'Knockout';src:url('./fonts/Knockout-HTF46-Flyweight.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Light.woff2') format('woff2');font-weight:300;font-display:swap;} @font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Regular.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Bold.woff2') format('woff2');font-weight:500 700;font-display:swap;} :root{ --ink:#161616; --idx:#b3b1b1; --muted:#8f8f8f; --link:#4758fb; --sans:'HelveticaStd',Helvetica,Arial,sans-serif; --display:'Knockout','Arial Narrow',sans-serif; --title:clamp(30px,5.6vw,66px); --capa:0.1419; --capb:-3.38px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{background:#fff;color:var(--ink);font-family:var(--sans);font-weight:400; -webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} /* ---------- top nav ---------- */ .landing-nav{display:flex;justify-content:space-between;align-items:baseline; gap:16px;margin-bottom:3vw;} .landing-nav__left{display:flex;align-items:baseline;gap:12px;} .landing-nav__link{font-family:var(--display);font-weight:400; font-size:var(--title);line-height:1;color:var(--ink);} /* ---------- index list ---------- */ .idx{padding:0 2%;} /* the page's top gap matches its left gap optically: the type's own cap gap (the space above the capitals inside the line box) is taken off the top */ .idx--top{padding-top:calc(2% - var(--title) * 0.152);} @media(max-width:800px){.idx{padding:0 16px;} .idx--top{padding-top:calc(16px - var(--title) * 0.152);}} .group{margin-bottom:8px;} .group-label{font-size:14px;line-height:1.4;color:var(--muted); margin:3vw 0 4px;} .group:first-of-type .group-label{margin-top:0;} /* the hover target stops at the middle of the page: the list is a left-hand column, and the reveal image lives on the right */ .project-item{display:flex;align-items:flex-start;margin-bottom:-1.1vw;} .idx .project-item{width:50%;} .project-title{font-family:var(--display);font-weight:400;font-size:var(--title); line-height:1;color:var(--idx);white-space:nowrap;flex-shrink:0; transition:color .2s ease;} .project-title:hover{color:var(--ink);} /* the label's ink top sits on the title's cap top: --capo is solved per size */ .project-subtitle{font-size:14px;line-height:1.4;color:var(--muted); white-space:nowrap;margin-left:14px;align-self:flex-start; padding-top:calc(var(--title) * var(--capa) + var(--capb)); opacity:0;transition:opacity .2s ease;} .project-item:hover .project-subtitle{opacity:1;} @media(max-width:900px){ .project-subtitle{display:none;} .project-item{margin-bottom:-2px;} } /* hover reveal, sits behind the type */ /* one box, one size — whatever the source image's own ratio is */ /* the picture hangs from the first group's label line, and the gap it leaves at the foot of the screen matches that top gap — so it sits as large as the window allows */ .reveal-image{position:fixed;top:var(--reveal-top,50%);left:50%;transform:translateX(-50%); height:calc(100vh - 2 * var(--reveal-top,20vh));width:auto;max-width:78vw;aspect-ratio:16/9; background-position:50%;background-size:cover;background-repeat:no-repeat; opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:0;} .reveal-image.is-visible{opacity:1;} .idx{position:relative;z-index:2;} @media(max-width:900px){.reveal-image{display:none;}} /* ---------- footer: the index, reprised ---------- Always a direct child of , never nested in a .wrap, so the left margin is identical on every page. */ .site-foot{padding:0 2% 2%;margin-top:clamp(96px,13vw,190px);} @media(max-width:800px){.site-foot{padding:0 16px 24px;}} /* the footer nav and index carry the landing's own sizes, so the foot of an inner page reads as the index itself rather than a shrunken echo of it */ .site-foot .landing-nav{margin-bottom:3vw;} /* Back to top rides the last project row, right-aligned, so the two share one baseline instead of the link hanging below the list. */ .site-foot__top{margin-left:auto;} /* in the footer the labels are always on: there is no hover picture to wait for */ .site-foot .project-subtitle{opacity:1;margin-left:7px;} /* half the index's gap */ .site-foot .project-item{margin-bottom:calc(-1.1vw + 4px);} /* a touch more air between titles */ @media(max-width:900px){.site-foot__top{margin-left:auto;} /* in the footer the labels are always on: there is no hover picture to wait for */ .site-foot .project-subtitle{opacity:1;margin-left:7px;} /* half the index's gap */ .site-foot .project-item{margin-bottom:calc(-1.1vw + 4px);} /* a touch more air between titles */} /* ---------- passcode gate ---------- */ .gate{position:fixed;inset:0;z-index:9999;background:#fff;display:flex; align-items:center;justify-content:center;padding:24px;} .gate__box{width:100%;max-width:320px;text-align:left;} .gate__k{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);margin-bottom:14px;} .gate__t{font-weight:500;font-size:20px;line-height:1.45;letter-spacing:-.01em; margin-bottom:8px;} .gate__d{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:24px;} .gate__row{display:flex;gap:8px;} .gate__in{flex:1;min-width:0;font-family:var(--sans);font-size:16px; padding:12px 14px;border:0;background:#f4f4f4;border-radius:8px;color:var(--ink);} .gate__in:focus{outline:2px solid var(--link);outline-offset:0;} .gate__go{font-family:var(--sans);font-size:15px;font-weight:500;color:#fff; background:var(--ink);border:0;border-radius:8px;padding:12px 18px;cursor:pointer;} .gate__err{font-size:13px;line-height:1.7;color:#e0323c;margin-top:12px; visibility:hidden;} .gate__err.is-on{visibility:visible;} .gate__back{display:inline-block;font-size:13px;color:var(--muted);margin-top:26px;} .gate__back:hover{color:var(--ink);} html.is-locked body{overflow:hidden;} html.is-locked body>*:not(.gate){visibility:hidden;} /* ---------- phones: the index type and the footer row ---------- --title bottoms out at 30px, and the titles never wrap, so on a 390px screen the nav row and the last footer row run past the edge. Two fixes: let the type go smaller than 30px, and drop "back to top" onto its own line. */ @media(max-width:600px){ .landing-nav{flex-wrap:wrap;row-gap:6px;} /* back to top stays on the last project's line, flush right like .archive above */ .site-foot__top{margin-left:auto;} } /* ---- narrow screens only (max-width:860px) ---- */ @media(max-width:860px){ /* the nav and index type keeps a readable size instead of shrinking with the width */ :root{--title:clamp(40px,11.2vw,48px);} /* footer rows sit closer: the gap between titles is about two thirds of what it was */ .site-foot .project-item{margin-bottom:-1.1vw;} }