/* ───────────────────────────────────────────────────────────────────────── RH Portfolio — shared styles (Uniform Journal type system) Variables drive: background shade, typography pairing, image aspect ratio. Layout variants live on body[data-layout]. ────────────────────────────────────────────────────────────────────────── */ /* Type pairings come from Google Fonts (loaded by each HTML page): Inter Tight · Source Serif 4 · Newsreader · Hanken Grotesk */ :root { /* defaults; overridden by [data-bg] / [data-type] on */ --bg: #F5F5F2; --fg: #111111; --muted: rgba(17, 17, 17, 0.58); --rule: rgba(17, 17, 17, 0.14); --rule-strong: rgba(17, 17, 17, 0.28); --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-body: 'Inter Tight', 'Helvetica Neue', Helvetica, sans-serif; --font-meta: 'Inter Tight', 'Helvetica Neue', Helvetica, sans-serif; --display-style: normal; --display-weight: 400; --display-tracking: -0.02em; --display-transform: none; --meta-tracking: 0.02em; --meta-transform: none; --meta-weight: 400; --meta-size: 13px; --img-aspect: 4/5; --pad-x: clamp(20px, 4vw, 56px); --pad-y: 22px; --maxw: 1640px; } /* Background variants */ body[data-bg="white"] { --bg: #FFFFFF; --fg: #0E0E0D; } body[data-bg="ivory"] { --bg: #F7F4EC; --fg: #1A1714; } body[data-bg="cool"] { --bg: #F5F5F2; --fg: #111110; } /* Typography variants — three pairings: editorial = Source Serif 4 + Inter Tight (serif + neutral grotesk) wide = Newsreader display + Inter Tight (wide display serif) industrial = Hanken Grotesk throughout (industrial sans) */ body[data-type="editorial"] { --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-body: 'Inter Tight', 'Helvetica Neue', sans-serif; --font-meta: 'Inter Tight', 'Helvetica Neue', sans-serif; --display-style: normal; --display-weight: 400; --display-tracking: -0.02em; --display-transform: none; --meta-transform: uppercase; --meta-tracking: 0.14em; --meta-weight: 500; --meta-size: 11.5px; } body[data-type="wide"] { --font-display: 'Newsreader', 'Cormorant Garamond', Georgia, serif; --font-body: 'Newsreader', Georgia, serif; --font-meta: 'Inter Tight', 'Helvetica Neue', sans-serif; --display-style: normal; --display-weight: 400; --display-tracking: -0.025em; --display-transform: none; --meta-transform: uppercase; --meta-tracking: 0.16em; --meta-weight: 500; --meta-size: 11.5px; } body[data-type="industrial"] { --font-display: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --font-meta: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --display-style: normal; --display-weight: 500; --display-tracking: -0.03em; --display-transform: none; --meta-transform: uppercase; --meta-tracking: 0.14em; --meta-weight: 500; --meta-size: 11.5px; } /* Legacy aliases — older saved tweak values flow into a sensible new pairing */ body[data-type="italic"] { --font-display: 'Source Serif 4', Georgia, serif; --font-body: 'Inter Tight', sans-serif; --font-meta: 'Inter Tight', sans-serif; --display-style: italic; --display-weight: 400; --display-tracking: -0.015em; --meta-transform: uppercase; --meta-tracking: 0.14em; --meta-weight: 500; --meta-size: 11.5px; } body[data-type="minimal"], body[data-type="college"], body[data-type="mono"] { --font-display: 'Hanken Grotesk', sans-serif; --font-body: 'Hanken Grotesk', sans-serif; --font-meta: 'Hanken Grotesk', sans-serif; --display-style: normal; --display-weight: 500; --display-tracking: -0.03em; --meta-transform: uppercase; --meta-tracking: 0.14em; --meta-weight: 500; --meta-size: 11.5px; } /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.5; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } img { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ── Header ─────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: baseline; padding: var(--pad-y) var(--pad-x); background: transparent; pointer-events: none; } .site-header > * { pointer-events: auto; } .hd-name { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 22px; line-height: 1; justify-self: start; } .hd-link { font-family: var(--font-meta); font-size: var(--meta-size); font-weight: var(--meta-weight); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); line-height: 1; position: relative; padding-bottom: 2px; } .hd-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .hd-link:hover::after, .hd-link[aria-current="page"]::after { transform: scaleX(1); } .hd-about { justify-self: center; } .hd-contact { justify-self: end; } /* ── Footer ─────────────────────────────────────────────────────────── */ .site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; padding: 64px var(--pad-x) 28px; margin-top: 80px; border-top: 1px solid var(--rule); font-family: var(--font-meta); font-size: var(--meta-size); font-weight: var(--meta-weight); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); color: var(--muted); } .site-footer a:hover { color: var(--fg); } .ft-col { display: flex; flex-direction: column; gap: 6px; } .ft-col .lbl { font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.4); font-weight: 500; margin-bottom: 4px; } @media (max-width: 720px) { .site-footer { grid-template-columns: 1fr 1fr; row-gap: 32px; } } /* ── Index — works list (shared DOM, layout via [data-layout]) ─────── */ .works { padding: 0; } .work a { display: block; } .work .img { position: relative; background: rgba(0,0,0,0.04); overflow: hidden; } .work .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,.61,.36,1), opacity .8s; opacity: 0; } .work .img img.loaded { opacity: 1; } .work a:hover .img img { transform: scale(1.015); } .work figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-family: var(--font-meta); font-size: var(--meta-size); font-weight: var(--meta-weight); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); color: var(--fg); } .work figcaption .t { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 22px; line-height: 1.1; color: var(--fg); } .work figcaption .m { color: var(--muted); white-space: nowrap; } .work figcaption .num { font-family: var(--font-meta); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0.14em; color: rgba(17,17,16,.45); text-transform: uppercase; } /* Layout: Centered scroll ─ one image at a time, contained with margins */ body[data-layout="centered"] .works { display: flex; flex-direction: column; padding-top: 8vh; } body[data-layout="centered"] .work { min-height: 92vh; display: grid; grid-template-rows: 1fr auto; align-items: center; padding: 24px var(--pad-x) 64px; } body[data-layout="centered"] .work a { width: 100%; max-width: min(72vw, 980px); margin: 0 auto; display: block; } body[data-layout="centered"] .work .img { aspect-ratio: var(--img-aspect); width: 100%; } body[data-layout="centered"] .work figcaption { margin: 18px auto 0; max-width: min(72vw, 980px); width: 100%; } /* Layout: Three across ─ classic gallery grid */ body[data-layout="three-across"] .works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; padding: 4vh var(--pad-x) 0; } body[data-layout="three-across"] .work .img { aspect-ratio: var(--img-aspect); } body[data-layout="three-across"] .work figcaption { margin-top: 14px; flex-direction: column; align-items: flex-start; gap: 4px; } body[data-layout="three-across"] .work figcaption .t { font-size: 19px; } body[data-layout="three-across"] .work figcaption .m { font-size: 12px; } @media (max-width: 920px) { body[data-layout="three-across"] .works { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { body[data-layout="three-across"] .works { grid-template-columns: 1fr; } } /* Layout: Full bleed ─ edge-to-edge, one per viewport */ body[data-layout="full-bleed"] .works { display: flex; flex-direction: column; padding: 0; } body[data-layout="full-bleed"] .work { width: 100%; position: relative; } body[data-layout="full-bleed"] .work a { width: 100%; } body[data-layout="full-bleed"] .work .img { aspect-ratio: var(--img-aspect); width: 100%; max-height: 100vh; } body[data-layout="full-bleed"] .work figcaption { padding: 18px var(--pad-x) 80px; font-size: 14px; } body[data-layout="full-bleed"] .work figcaption .t { font-size: 24px; } /* ── About page ────────────────────────────────────────────────────── */ .page-about { padding: 12vh var(--pad-x) 80px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 96px; } .page-about .lede { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; margin: 0 0 0.6em; } .page-about p { margin: 0 0 1em; } .page-about .col-meta { font-family: var(--font-meta); font-size: var(--meta-size); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); } .page-about dl { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 28px; margin-bottom: 36px; } .page-about dt { color: rgba(17,17,16,.45); font-weight: 500; } .page-about dd { margin: 0; } .page-about h3 { font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.45); margin: 0 0 14px; } @media (max-width: 800px) { .page-about { grid-template-columns: 1fr; gap: 48px; padding-top: 8vh; } } /* ── Contact page ──────────────────────────────────────────────────── */ .page-contact { padding: 14vh var(--pad-x) 80px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 96px; align-items: start; } .page-contact .ct-lede { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(36px, 4.5vw, 64px); line-height: 1.05; margin: 0; } .page-contact .ct-lede .em { color: rgba(17,17,16,.45); } .page-contact .ct-meta { font-family: var(--font-meta); font-size: var(--meta-size); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); display: grid; gap: 36px; } .page-contact .ct-block .lbl { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.45); font-weight: 500; margin-bottom: 8px; display: block; } .page-contact .ct-block a { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: none; font-size: 22px; line-height: 1.2; } .page-contact .ct-block a:hover { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 800px) { .page-contact { grid-template-columns: 1fr; gap: 48px; padding-top: 10vh; } } /* ── Project detail page ───────────────────────────────────────────── */ .proj { padding: 6vh var(--pad-x) 0; max-width: var(--maxw); margin: 0 auto; } .proj-hd { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; } .proj-title { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: clamp(40px, 5vw, 80px); line-height: 1; margin: 0; } .proj-meta { font-family: var(--font-meta); font-size: var(--meta-size); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); text-align: right; color: var(--muted); display: grid; gap: 4px; } .proj-meta b { color: var(--fg); font-weight: var(--meta-weight); } .proj-hero { width: 100%; aspect-ratio: var(--img-aspect); background: rgba(0,0,0,0.04); overflow: hidden; margin-bottom: 64px; } .proj-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; } .proj-hero img.loaded { opacity: 1; } .proj-body { display: grid; grid-template-columns: 1fr 2fr; gap: 64px 96px; max-width: 1200px; margin: 0 auto 96px; padding: 0 0; } .proj-body h3 { font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.45); margin: 0 0 14px; } .proj-body p { margin: 0 0 1em; } .proj-body p:last-child { margin-bottom: 0; } .proj-summary { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; grid-column: 1 / -1; margin: 0 0 16px; max-width: 1100px; } .proj-section { display: contents; } .proj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1200px; margin: 0 auto 96px; } .proj-gallery .img { aspect-ratio: 4/5; background: rgba(0,0,0,.04); overflow: hidden; } .proj-gallery .img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; } .proj-gallery .img img.loaded { opacity: 1; } .proj-gallery .img:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/9; } /* Case study text-box */ .proj-case { max-width: 760px; margin: 0 auto 96px; padding-top: 48px; border-top: 1px solid var(--rule); } .proj-case h2 { font-family: var(--font-meta); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.45); margin: 0 0 24px; } .proj-case h4 { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); font-size: 22px; margin: 36px 0 8px; } .proj-case p { margin: 0 0 1em; } .proj-case dl { margin: 24px 0 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 28px; font-family: var(--font-meta); font-size: var(--meta-size); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); } .proj-case dt { color: rgba(17,17,16,.45); } .proj-case dd { margin: 0; } .proj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; border-top: 1px solid var(--rule); padding: 28px 0 80px; font-family: var(--font-meta); font-size: var(--meta-size); letter-spacing: var(--meta-tracking); text-transform: var(--meta-transform); } .proj-nav a { display: flex; flex-direction: column; gap: 6px; color: var(--muted); } .proj-nav a:hover { color: var(--fg); } .proj-nav a.next { text-align: right; align-items: flex-end; } .proj-nav .ttl { font-family: var(--font-display); font-style: var(--display-style); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); color: var(--fg); font-size: 22px; line-height: 1; } .proj-nav .lbl { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17,17,16,.4); font-weight: 500; } @media (max-width: 800px) { .proj-hd { grid-template-columns: 1fr; align-items: start; gap: 12px; } .proj-meta { text-align: left; } .proj-body { grid-template-columns: 1fr; gap: 36px; } .proj-gallery { grid-template-columns: 1fr; } .proj-gallery .img:nth-child(3) { aspect-ratio: 4/5; } } /* ── Misc utilities ────────────────────────────────────────────────── */ .sr { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; } /* Smooth bg/typography transitions when tweaks change */ body, .work figcaption .t, .hd-name, .proj-title, .ct-lede, .page-about .lede, .proj-summary { transition: background-color .25s ease, color .25s ease; }