/* Eva Gildea — portfolio One Tree Good Day brand: letterpress / blind-deboss on textured cream-ecru stock. Bold tight grotesque wordmark + wide-tracked uppercase secondary text. Warm near-black ink on warm off-white. Generous negative space. ----------------------------------------------------------------------- Palette tokens consolidated here. All color usage references these vars. ----------------------------------------------------------------------- RESPONSIVE STRATEGY: mobile-first. Base styles target 375px phones. --bp-mid = 540px (large phone / small tablet — hamburger hidden, 2-col galleries) --bp-wide = 860px (desktop — full layout, wider padding, 640px content column) Media queries use the literal px values; the custom properties below are for reference and documentation only (CSS @media cannot read custom props). ----------------------------------------------------------------------- */ :root { /* Warm cream ground — matches ecru card stock */ --bg: #f5f2ed; /* Slightly darker card surface — About overlay, about-card, project cards */ --bg-card: #f0ece4; /* Full warm near-black — primary ink */ --ink: #1a1714; /* Muted ink — secondary text, nav links default, captions */ --ink-mute: rgba(26,23,20,0.50); /* Faint ink — hairlines, subdued captions, borders */ --ink-faint: rgba(26,23,20,0.18); /* Overlay backdrop tint — cream-tinted translucent scrim */ --scrim: rgba(245,242,237,0.78); /* Legacy research.html tokens (defined there inline; alias them here for global use) */ --light-gray: rgba(26,23,20,0.12); --mid-gray: rgba(26,23,20,0.45); --dark-gray: rgba(26,23,20,0.72); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Spacing rhythm */ --pad: 16px; --container: 960px; /* Typography — shared */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Display — engraved calling-card face (Copperplate). Always tracked UPPERCASE. Light for labels/subtitles; Bold for the wordmark & page titles, the way the business card reads (bold wordmark + light tracked subtitle). */ --font-display: "Copperplate Gothic Light", "Copperplate", "Copperplate Gothic", serif; --font-display-bold: "Copperplate Gothic Bold", "Copperplate", "Copperplate Gothic Light", serif; /* Breakpoint reference (documentation only — not usable inside @media) */ --bp-mid: 540px; --bp-wide: 860px; } /* ============================================================ SELF-HOSTED DISPLAY FONT — Copperplate Gothic Embedded so the wordmark / "copper" headings render identically on every device (previously relied on the visitor's OS having Copperplate, which it usually doesn't). Files copied from the licensed Windows fonts. NOTE: confirm a webfont license before publishing publicly — Copperplate Gothic is a Monotype face. ============================================================ */ @font-face { font-family: "Copperplate Gothic Light"; src: url("../fonts/COPRGTL.TTF") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Copperplate Gothic Bold"; src: url("../fonts/COPRGTB.TTF") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Never scroll horizontally. Vertically, must NOT clip — otherwise body-level scroll on content pages (projects, galleries) is trapped and nothing scrolls on mobile. Full-screen pages re-lock the BODY (below), and since their content is position:fixed nothing overflows anyway. */ html { overflow-x: hidden; } /* Default: no scroll — slideshow / full-screen pages lock the body. Content pages unlock via `body:not(.home)`. */ body { overflow: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ============================================================ TYPOGRAPHY SYSTEM — one consistent rule for the whole site Display (Copperplate, tracked caps): wordmark, nav, page titles, section labels, tags, footer. Body & content stay in Inter. These selectors set ONLY the family; size/tracking live with each component. Content headings (cv-details h3, project-card h3, project-title) deliberately stay Inter for mixed-case legibility. ============================================================ */ .about-card h2, .cv-section > h2, .cv-group h4, .research-projects h2, .project-tag, .gallery-empty, .site-footer, .site-footer nav a { font-family: var(--font-display); } /* ============================================================ SCROLL UNLOCK Gallery pages, About page, Research page all need vertical scroll. `body.home` is handled separately below. Any body NOT carrying .home gets scroll enabled. ============================================================ */ body:not(.home) { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */ } /* Slideshow pages keep overflow:hidden — re-lock them explicitly. They use and have no other body class. */ body[data-collection] { height: 100%; overflow: hidden; } /* ============================================================ LAYOUT CONTAINER Used by gallery, about, research, landscape, footer. ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } /* ============================================================ HEADER / NAV — shared across all pages Base: logo left, hamburger right. Links hidden behind hamburger. 540px+: hamburger hidden, links inline. ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: var(--pad); font-size: 12px; letter-spacing: 0.01em; mix-blend-mode: multiply; pointer-events: none; } .site-header a, .site-header .logo, .site-header .site-logo, .site-header button, .site-header .container { pointer-events: auto; } /* When header uses .container as inner wrapper (gallery/about/research pages) */ .site-header .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0; max-width: none; } /* Wordmark / logo — engraved Copperplate Bold, tracked caps (calling-card wordmark) */ .logo, .site-logo { font-family: var(--font-display-bold); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); white-space: nowrap; } /* Nav links — wide-tracked uppercase */ .site-nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .site-nav a { font-family: var(--font-display); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); /* Tap-safe padding even in inline layout */ padding: 8px 4px; transition: color 0.2s ease; } .site-nav a:hover { color: var(--ink); } .site-nav a.active { color: var(--ink); } /* Hamburger — hidden at 540px+; gallery.js toggles .site-nav.open */ .nav-toggle { display: flex; /* visible by default (mobile-first) */ flex-direction: column; gap: 5px; border: 0; background: none; /* 44px touch target via padding */ padding: 8px; cursor: pointer; pointer-events: auto; } .nav-toggle span { display: block; width: 20px; height: 1px; background: var(--ink); transition: opacity 0.2s; } /* Mobile nav — full-screen overlay panel */ .site-nav { display: none; position: fixed; top: 0; left: 0; right: 0; flex-direction: column; background: var(--bg); padding: 56px 16px 24px; gap: 16px; z-index: 49; border-bottom: 1px solid var(--ink-faint); } .site-nav.open { display: flex; } .site-nav a { /* Larger tap target in mobile nav panel */ font-size: 12px; padding: 8px 0; } /* ============================================================ 540px+ — HAMBURGER COLLAPSES; NAV GOES INLINE ============================================================ */ @media (min-width: 540px) { .site-header { align-items: baseline; } .site-header .container { align-items: baseline; } .nav-toggle { display: none; } .site-nav { display: flex; /* override the mobile display:none */ position: static; flex-direction: row; background: none; padding: 0; gap: 18px; border-bottom: none; z-index: auto; } .site-nav a { font-size: 11px; padding: 8px 4px; /* keep tap-safe padding in inline layout */ } } /* ============================================================ SLIDESHOW STAGE (paintings / computational / built) ============================================================ */ .stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 88px 8px 56px; /* mobile: tighter sides, taller top clearance */ user-select: none; } .stage img { max-width: 94vw; max-height: 74vh; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 0.35s ease; -webkit-user-drag: none; } @media (min-width: 860px) { .stage { padding: 64px var(--pad); } .stage img { max-width: 90vw; max-height: 82vh; } } /* Counter + caption — bottom-left */ .meta { position: fixed; left: var(--pad); bottom: var(--pad); z-index: 40; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.02em; pointer-events: none; } #caption { margin-top: 2px; color: var(--ink-faint); } /* ============================================================ ABOUT OVERLAY (injected by about.js, shown on slideshow pages) ============================================================ */ .about-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; /* mobile: tighter sides */ background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.about-open .about-overlay { display: flex; } body.about-open .stage { pointer-events: none; } .about-card { position: relative; width: calc(100% - 32px); /* mobile: near full-width */ max-width: 560px; max-height: 84vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--ink-faint); box-shadow: 0 18px 60px rgba(26,23,20,0.10); padding: 24px 20px 28px; /* mobile: shallower padding */ font-size: 13px; line-height: 1.65; } .about-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ink-mute); cursor: pointer; /* 44px touch target */ padding: 8px; } .about-close:hover { color: var(--ink); } @media (min-width: 540px) { .about-overlay { padding: 24px; } .about-card { width: 100%; padding: 34px 36px 38px; } } .about-card h1 { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-faint); font-family: var(--font-display-bold); font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; text-align: center; } .about-card p { margin: 0 0 16px; color: var(--ink); } .about-card h2 { margin: 22px 0 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); } .about-card ul { margin: 0; padding: 0; list-style: none; } .about-card li { margin: 0 0 9px; color: var(--ink); } .about-card li .role { color: var(--ink-mute); } .about-card a.contact { border-bottom: 1px solid var(--ink-faint); } .about-card a.contact:hover { border-color: var(--ink); } /* ============================================================ HOME / INDEX PAGE Scrollable vertical feed of project thumbnails. Base: phone — generous padding, full-width cards. 860px+: constrained column (max 640px). ============================================================ */ html.home, body.home { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } body.home .site-header { background: linear-gradient(rgba(245,242,237,0.92), rgba(245,242,237,0)); mix-blend-mode: normal; } /* Base (mobile): full-width, generous padding so next project peeks below fold */ .index { width: 100%; max-width: 640px; margin: 0 auto; padding: 56px 16px 72px; display: flex; flex-direction: column; gap: 40px; } @media (min-width: 860px) { .index { padding: 72px 16px 96px; gap: 52px; } } .project { display: block; cursor: pointer; } /* Thumbnail — LANDSCAPE 3/2 aspect ratio (Eva's decision) */ .project-media { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-card); } .project-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.6s ease; -webkit-user-drag: none; } .project:hover .project-img { opacity: 0.9; } .project-info { padding-top: 12px; } .project-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; } .project-title .arrow { font-weight: 400; color: var(--ink-faint); transition: color 0.2s ease, transform 0.2s ease; } .project:hover .project-title .arrow { color: var(--ink-mute); transform: translateX(3px); } .project-desc { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-mute); max-width: 56ch; } /* ============================================================ GALLERY PAGES (landscape.html, research.html, future pages) ============================================================ */ .gallery-section { padding-top: 72px; /* mobile: slightly reduced top clearance */ padding-bottom: 72px; } @media (min-width: 860px) { .gallery-section { padding-top: 80px; padding-bottom: 96px; } } .gallery-header { margin-bottom: 32px; border-bottom: 1px solid var(--ink-faint); padding-bottom: 20px; } .gallery-header h1 { margin: 0 0 10px; font-family: var(--font-display-bold); font-size: 18px; /* mobile: slightly smaller */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.25; } .gallery-header p { margin: 0; font-size: 12px; color: var(--ink-mute); line-height: 1.6; max-width: 60ch; } @media (min-width: 540px) { .gallery-header { margin-bottom: 48px; padding-bottom: 24px; } .gallery-header h1 { font-size: 20px; } } /* Gallery grid — base: single column */ .gallery-grid { display: grid; grid-template-columns: 1fr; gap: 2px; } /* 540px+: 2-column mosaic grid */ @media (min-width: 540px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; } } .gallery-item { position: relative; overflow: hidden; background: var(--bg-card); cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.45s ease, transform 0.4s ease; } .gallery-item img.loaded { opacity: 1; } .gallery-item:hover img { transform: scale(1.02); opacity: 0.92; } .gallery-item-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(26,23,20,0.55)); font-size: 10px; letter-spacing: 0.04em; color: rgba(245,242,237,0.90); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .gallery-item:hover .gallery-item-caption { opacity: 1; } .gallery-empty { grid-column: 1 / -1; padding: 48px 0; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } /* ============================================================ CYANOTYPES — standard landscape "calling-card" format Mirrors the business card: cream stock, hairline deboss edge, uniform landscape crop, tracked-caps plate label, deep margins. Applied via
; built by gallery.js. ============================================================ */ .cyano-grid { grid-template-columns: 1fr; /* base: single column */ gap: 28px; counter-reset: plate; } @media (min-width: 540px) { .cyano-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 44px; } } /* Each item is a landscape card on ecru stock */ .cyano-grid .gallery-item { background: var(--bg-card); border: 1px solid var(--ink-faint); box-shadow: 0 12px 34px rgba(26,23,20,0.07); padding: 26px 28px 20px; overflow: visible; counter-increment: plate; transition: box-shadow 0.25s ease, transform 0.25s ease; } .cyano-grid .gallery-item:hover { box-shadow: 0 18px 46px rgba(26,23,20,0.12); transform: translateY(-2px); } /* Uniform landscape print, framed by the cream mat */ .cyano-grid .gallery-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg); } .cyano-grid .gallery-item:hover img { opacity: 0.94; transform: none; } /* Caption beneath the print — like a label on a mounted card */ .cyano-grid .gallery-item-caption { position: static; inset: auto; background: none; opacity: 1; pointer-events: none; padding: 14px 2px 0; font-family: var(--font); font-size: 11px; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-mute); text-align: center; } .cyano-grid .gallery-item-caption:empty { display: none; } .cyano-grid .gallery-item-caption em { font-style: italic; color: var(--ink); } /* Cyanotype page header — centered title block */ .cyano-section .gallery-header { text-align: center; border-bottom: 0; margin-bottom: 40px; padding-bottom: 0; } @media (min-width: 540px) { .cyano-section .gallery-header { margin-bottom: 56px; } } .cyano-section .gallery-header p { margin-inline: auto; } /* ============================================================ LIGHTBOX Injected by gallery.js into document.body ============================================================ */ .lightbox-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; gap: 16px; background: rgba(26,23,20,0.88); padding: 20px; } .lightbox-overlay.active { display: flex; } .lightbox-inner { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 90vh; overflow: hidden; } .lightbox-inner img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; display: block; } .lightbox-caption { margin: 10px 0 0; font-size: 11px; letter-spacing: 0.06em; color: rgba(245,242,237,0.55); text-align: center; min-height: 1em; } /* Shared prev/next/close button reset */ .lightbox-close, .lightbox-prev, .lightbox-next { flex-shrink: 0; border: 0; background: none; color: rgba(245,242,237,0.55); cursor: pointer; font-size: 22px; line-height: 1; transition: color 0.2s ease; -webkit-user-select: none; user-select: none; /* 44px touch target */ min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: rgba(245,242,237,1); } .lightbox-close { position: absolute; top: 14px; right: 16px; font-size: 26px; /* 44px touch target via padding */ padding: 8px; min-width: auto; min-height: auto; } .lightbox-prev { order: -1; } .lightbox-next { order: 1; } /* ============================================================ ABOUT PAGE (about.html — standalone scrollable page) Base: portrait full-width landscape above bio, stacked. 540px+: mild widening. 860px+: two-column side-by-side. ============================================================ */ .about-section { padding-top: 72px; /* mobile: reduced (fixed nav is shorter on phone) */ padding-bottom: 72px; } @media (min-width: 860px) { .about-section { padding-top: 96px; padding-bottom: 96px; } } /* Base: stacked single column */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 56px; } @media (min-width: 540px) { .about-grid { gap: 32px; margin-bottom: 64px; } } @media (min-width: 860px) { .about-grid { grid-template-columns: 220px 1fr; gap: 64px; margin-bottom: 72px; } } /* Portrait — LANDSCAPE above text (Eva's decision). Base: full content-width landscape. 860px+: portrait column constrains width naturally via grid. */ .about-portrait { width: 100%; aspect-ratio: 3 / 2; /* landscape (was 3/4 portrait) */ object-fit: cover; filter: grayscale(100%); display: block; } @media (min-width: 860px) { .about-portrait { /* In the 220px grid column the image fills the column at landscape ratio */ aspect-ratio: 3 / 2; } } .about-bio h1 { margin: 0 0 22px; font-family: var(--font-display-bold); font-size: 18px; /* mobile */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.25; } @media (min-width: 540px) { .about-bio h1 { font-size: 20px; } } .about-bio p { margin: 0 0 16px; font-size: 13px; line-height: 1.65; color: var(--ink); max-width: 60ch; } .about-bio em { font-style: italic; } .about-contact { margin-top: 28px; font-size: 12px; letter-spacing: 0.02em; color: var(--ink-mute); } .about-contact a { border-bottom: 1px solid var(--ink-faint); transition: border-color 0.2s ease; } .about-contact a:hover { border-color: var(--ink); } /* ============================================================ CV SECTION (about.html) ============================================================ */ .cv-section { border-top: 1px solid var(--ink-faint); padding-top: 40px; /* mobile: slightly compressed */ } @media (min-width: 540px) { .cv-section { padding-top: 56px; } } .cv-section > h2 { margin: 0 0 32px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); } @media (min-width: 540px) { .cv-section > h2 { margin-bottom: 40px; } } .cv-group { margin-bottom: 40px; } @media (min-width: 540px) { .cv-group { margin-bottom: 48px; } } .cv-group h4 { margin: 0 0 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); border-bottom: 1px solid var(--ink-faint); padding-bottom: 8px; } @media (min-width: 540px) { .cv-group h4 { margin-bottom: 20px; } } /* CV entry — base: 1-column stacked */ .cv-entry { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 20px; align-items: start; } /* 540px+: restore date + details two-column layout */ @media (min-width: 540px) { .cv-entry { grid-template-columns: 140px 1fr; gap: 0 24px; margin-bottom: 24px; } } .cv-date { font-size: 10px; /* mobile */ color: var(--ink-mute); letter-spacing: 0.02em; padding-top: 2px; white-space: nowrap; } @media (min-width: 540px) { .cv-date { font-size: 11px; } } .cv-details h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .cv-details p { margin: 0 0 4px; font-size: 12px; line-height: 1.55; color: var(--ink-mute); } .cv-org { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.01em; } /* ============================================================ RESEARCH PAGE — project cards (research.html also has inline