/* ---- Rody Luton — portfolio site ---- */ /* Neue Haas Grotesk is served via Adobe Fonts (Typekit kit bcg7bfa), linked in each page's . Properly licensed for web use. Kit includes weights 400 and 700 only (no 500/Medium). */ :root { --bg: #f6f5f2; --ink: #1a1a1a; --muted: #9a9a9a; --hair: #e7e5e1; --accent: #5c6b74; /* muted dusty blue-grey, pulled from the paintings */ /* one shared width/gutter so the header, gallery, and page content all line up on the same left/right edges */ --max: 1240px; --gutter: clamp(40px, 8vw, 140px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'neue-haas-grotesk-text', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Sticky footer: on short pages (Contact, an empty Exhibitions list) the footer sits right under the content by default, leaving a big gap below it. Stretching
to fill the leftover viewport height pins the footer to the bottom instead, without affecting taller pages like Work, where main already exceeds the viewport on its own. */ body { min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; /* Explicit, not relying on stretch: main's own content is entirely position:absolute (the masonry grid), so it has no intrinsic width for cross-axis stretch to size against and collapses to fit-content without this. */ width: 100%; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .wrap-gallery { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); padding-top: clamp(72px, 12vw, 140px); } .wrap-header { max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); } /* ---- Header ---- */ .site-header { padding-top: 64px; padding-bottom: 20px; } /* Header row and intro row share one grid so the nav and the headline/paragraph column line up exactly (measured from reference: the right column starts at 48% of the content width). */ .header-grid { display: grid; grid-template-columns: 48% 1fr; column-gap: 0; position: relative; } .menu-toggle { display: none; position: absolute; top: 14px; right: 0; width: 28px; height: 28px; padding: 0; background: none; border: none; cursor: pointer; } .menu-toggle-icon { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.25s ease; } .menu-toggle-icon::before, .menu-toggle-icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: #000; transform: translate(-50%, -50%); } .menu-toggle-icon::before { width: 2px; height: 18px; } .menu-toggle-icon::after { width: 18px; height: 2px; } .menu-toggle[aria-expanded="true"] .menu-toggle-icon { transform: rotate(45deg); } .header-row-cell { grid-column: 1; grid-row: 1; } .logo a { display: block; } .logo img { height: 76px; width: auto; } .nav-contact-row { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 14px; } .main-nav { display: flex; align-items: baseline; gap: 22px; font-size: 16px; } .main-nav a { color: var(--muted); transition: color 0.15s ease; } .main-nav a:hover { color: var(--ink); } .main-nav a.active { color: var(--ink); font-weight: 700; } .main-nav .sep { color: var(--muted); margin-right: 6px; } .contact-link { flex: 0 0 auto; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; } .contact-link:hover { color: var(--accent); } .intro-tagline { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13px; line-height: 1.15; max-width: 200px; /* aligns with the paragraph's top, not the headline's, per reference */ margin-top: clamp(96px, 15vw, 170px); } .intro-main { grid-column: 2; grid-row: 2; max-width: 780px; margin-top: clamp(56px, 8vw, 94px); } .intro-main h1 { font-family: 'neue-haas-grotesk-display', 'neue-haas-grotesk-text', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 30px; line-height: 1.15; font-weight: 400; margin: 0 0 clamp(32px, 5vw, 48px); } .intro-main p { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--ink); } /* ---- Footer ---- */ .site-footer { margin-top: 96px; padding: 28px var(--gutter) 48px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 0.9rem; max-width: var(--max); width: 100%; margin-left: auto; margin-right: auto; } .site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .site-footer a:hover { color: var(--ink); } /* ---- Gallery ---- */ /* Positioning (columns, gaps, full-width pieces) is computed by gallery.js as real masonry — each figure gets an explicit absolute left/top/width, so the columns self-balance regardless of item order. */ .gallery { position: relative; } .artwork { /*
has a browser-default margin (1em 40px) — without zeroing it, it stacks on top of gallery.js's own explicit left/top/width, shifting every tile right by the margin (barely visible on a wide desktop layout, glaring on narrow mobile ones). */ margin: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .artwork:hover { transform: scale(1.015); cursor: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%3Cline%20x1%3D%2214%22%20y1%3D%225%22%20x2%3D%2214%22%20y2%3D%2223%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22square%22/%3E%0A%20%20%3Cline%20x1%3D%225%22%20y1%3D%2214%22%20x2%3D%2223%22%20y2%3D%2214%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22square%22/%3E%0A%3C/svg%3E') 14 14, zoom-in; } /* playful, slight tilt on a couple of pieces so the grid doesn't feel too rigid */ .artwork:nth-child(6n+1) { transform: rotate(-0.35deg); } .artwork:nth-child(9n+5) { transform: rotate(0.4deg); } .artwork:nth-child(6n+1):hover { transform: rotate(-0.35deg) scale(1.015); } .artwork:nth-child(9n+5):hover { transform: rotate(0.4deg) scale(1.015); } .artwork img { width: 100%; height: auto; background: #f2f1ee; } .artwork figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; font-size: 13px; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.25s ease 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artwork figcaption em { color: var(--ink); font-style: normal; } .artwork.expanded figcaption { opacity: 1; } /* Right-column pieces get their caption right-aligned instead of left — gallery.js records which column each artwork landed in as data-col. */ .artwork[data-col="1"] figcaption { text-align: right; } .artwork .collection-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.85); color: var(--muted); font-size: 11px; padding: 3px 8px; pointer-events: none; } .artwork .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 8px; display: flex; color: var(--ink); cursor: pointer; z-index: 45; opacity: 0; transition: opacity 0.2s ease, color 0.15s ease; } .artwork.expanded .nav-arrow { opacity: 1; } .artwork .nav-arrow:hover { color: var(--accent); } .artwork .nav-arrow.nav-prev { right: calc(100% + 6px); } .artwork .nav-arrow.nav-next { left: calc(100% + 6px); } @media (max-width: 560px) { .main-nav, .intro { margin-left: 0; } /* Swipe replaces the arrows on mobile (see gallery.js) — there's also rarely room beside a full-width mobile tile to show them anyway. */ .artwork .nav-arrow { display: none; } } /* ---- Generic page content (About / Exhibitions / Contact) ---- */ .page-title { margin: clamp(40px, 6vw, 72px) 0 24px; margin-left: 48%; font-family: 'neue-haas-grotesk-display', 'neue-haas-grotesk-text', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 38px; line-height: 1.1; font-weight: 400; max-width: 640px; } .page-content { margin-left: 48%; max-width: 640px; } .page-content p { margin: 0 0 1.2em; } .exhibitions-list { margin-left: 48%; max-width: 640px; list-style: none; padding: 0; } .exhibitions-list li { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid var(--hair); } .exhibitions-list li:last-child { border-bottom: 1px solid var(--hair); } .ex-year { flex: 0 0 64px; color: var(--muted); } .ex-details strong { display: block; } .ex-details span { color: var(--muted); font-size: 0.95em; } .contact-block { margin-left: 48%; max-width: 640px; } .contact-block a.email { font-size: 1.3rem; display: inline-block; margin: 8px 0 24px; text-decoration: underline; text-underline-offset: 3px; } .contact-socials a { display: inline-block; margin-right: 20px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .contact-socials a:hover { color: var(--ink); } /* Click-to-enlarge for a single standalone image (see assets/js/expandable-image.js) — same zoom-in cursor and feel as the Work page's gallery, for a page with just one picture rather than a whole masonry grid. */ .expandable-image { cursor: pointer; position: relative; transition: max-width 0.35s ease, box-shadow 0.35s ease, left 0.35s ease; } .expandable-image:hover { cursor: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%3Cline%20x1%3D%2214%22%20y1%3D%225%22%20x2%3D%2214%22%20y2%3D%2223%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22square%22/%3E%0A%20%20%3Cline%20x1%3D%225%22%20y1%3D%2214%22%20x2%3D%2223%22%20y2%3D%2214%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22square%22/%3E%0A%3C/svg%3E') 14 14, zoom-in; } .expandable-image.expanded { max-width: min(900px, 90vw); box-shadow: 0 28px 56px rgba(0,0,0,0.2); /* left offset for centering is computed in JS — a plain percentage here would be relative to this element's own (narrow, offset) containing block, not the viewport, and overflow off-screen. */ } /* ---- Mobile (kept last so it always wins over same-specificity desktop rules regardless of where those are declared above) ---- */ @media (max-width: 640px) { /* Drop the grid entirely so the logo, nav, and intro just stack in source order — the 48%/1fr split only makes sense as a 2-column desktop layout, and reusing its row numbers on mobile made the nav overlap the logo instead of falling below it. */ .header-grid { display: block; position: relative; } .intro-tagline { margin-top: 24px; } .intro-main { margin-top: 40px; } .menu-toggle { display: block; } .nav-contact-row { position: absolute; top: 46px; right: 0; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 8px; max-height: 0; overflow: hidden; padding-top: 0; transition: max-height 0.3s ease; z-index: 30; } .nav-contact-row.open { max-height: 260px; } .main-nav { flex-direction: column; align-items: flex-end; gap: 6px; font-size: 15px; } .contact-link { font-size: 15px; } .intro-main h1 { font-size: 26px; } /* the 48% offset is a desktop 2-column layout artifact — flush left on mobile, same as the header */ .page-title, .page-content, .exhibitions-list, .contact-block { margin-left: 0; } .page-title { font-size: 26px; } }