/* isaachoff.com — faithful static rebuild Typography note: the original Squarespace site used Adobe Fonts "adelle-sans" (headings/site title) and "degular" (meta). This build self-hosts free lookalikes (Source Sans 3 / Hanken Grotesk). If you have Adobe CC, create an Adobe Fonts web project with adelle-sans + degular, paste its tag into the of the pages, and swap the --font-heading / --font-meta values below back to the originals. */ @import url('fonts.css'); :root { --white-hsl: 0, 0%, 100%; --black-hsl: 0, 0%, 0%; --accent-hsl: 218.18, 37.29%, 23.14%; /* dark slate blue */ --light-accent-hsl: 60, 7.46%, 86.86%; --dark-accent-hsl: 330, 2.44%, 16.08%; --bg: hsl(var(--white-hsl)); --text: hsl(var(--black-hsl)); --font-heading: 'adelle-sans', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-meta: 'degular', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --page-pad: 6vw; --max-w: 1960px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; } /* ---------- header ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.6vw var(--page-pad); min-height: 72px; } .site-title { font-family: var(--font-heading); font-weight: 300; font-size: 1.7rem; letter-spacing: 0; text-decoration: none; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: 1.4em; } .site-nav a { text-decoration: none; font-size: 0.95rem; } .site-nav a.active { text-decoration: underline; text-underline-offset: 4px; } .site-nav a:hover { opacity: 0.7; } .socials { display: inline-flex; align-items: center; gap: 1em; margin-left: 0.4em; } .social { display: inline-flex; align-items: center; } .burger { display: none; } /* ---------- portfolio grid (grid-overlay, 16:9, text on hover) ---------- */ .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 9px; grid-row-gap: 4px; max-width: var(--max-w); margin: 0 auto; padding: 3.3vw var(--page-pad); min-height: 33vh; } .grid-item { position: relative; display: block; overflow: hidden; text-decoration: none; } .grid-item .grid-image { position: relative; padding-bottom: 56.25%; line-height: 0; } .grid-item .grid-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .grid-item .overlay { position: absolute; inset: 0; background: hsl(var(--white-hsl)); opacity: 0; transition: opacity ease 200ms; z-index: 2; } .grid-item .overlay-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity ease 200ms; z-index: 3; padding: 0 8%; } .grid-item .overlay-text h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.05rem; line-height: 1.35; margin: 0; color: hsl(var(--black-hsl)); } .grid-item:hover .overlay, .grid-item:focus .overlay { opacity: 0.49; } .grid-item:hover .overlay-text, .grid-item:focus .overlay-text { opacity: 1; } /* ---------- project pages ---------- */ .project { max-width: 1200px; margin: 0 auto; padding: 2.5vw var(--page-pad) 5vw; } .block { margin: 0 0 2.2rem; } .video-block video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; } .video-block.video-vertical video { max-width: 420px; margin: 0 auto; aspect-ratio: 9 / 16; } .embed-block .ratio { position: relative; padding-bottom: 56.25%; height: 0; } .embed-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .image-block img { margin: 0 auto; } .text-block { text-align: center; } .text-block h1, .text-block h2, .text-block h3, .text-block h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.35em; } .text-block p { margin: 0.35em 0; } .text-block a { text-underline-offset: 3px; } /* ---------- prev / next ---------- */ .item-pagination { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.5vw var(--page-pad) 4vw; max-width: var(--max-w); margin: 0 auto; } .pag { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; font-size: 0.95rem; max-width: 44%; } .pag:hover { opacity: 0.7; } .pag .chev { font-size: 2rem; font-weight: 300; line-height: 1; } .pag.next { text-align: right; } /* ---------- about ---------- */ .about-page { max-width: 640px; margin: 0 auto; padding: 4vw var(--page-pad) 8vw; } .about-page .text-block { text-align: left; } /* ---------- footer ---------- */ .site-footer { padding: 2vw var(--page-pad); } /* ---------- responsive ---------- */ @media (max-width: 767px) { .portfolio-grid { grid-template-columns: 1fr; } .site-nav { display: none; position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; font-size: 1.4rem; z-index: 50; } .site-nav a { font-size: 1.4rem; } .socials { margin: 1rem 0 0; } body.nav-open .site-nav { display: flex; } .burger { display: block; background: none; border: 0; padding: 8px; z-index: 60; cursor: pointer; } .burger span { display: block; width: 26px; height: 1px; background: var(--text); margin: 7px 0; } .pag .pag-title { display: none; } .pag { max-width: none; } }