/* ===================================================================== COMBINED SITE STYLESHEET ===================================================================== Loaded by every page (index.html, works-lander.html, works-digital.html). Previously split across styles.css and styles-gallery.css with a duplicated reset + font-face between the two (plus a third file, "styles - Copy.css", that was a byte-for- byte duplicate of styles.css and has been dropped entirely rather than merged). Combined here into one file so there's a single source of truth for shared rules like the reset, the custom font, and the header/nav. Sections in this file: 1. CSS variables (:root) 2. Global reset 3. Custom font (@font-face) 4. Base page styles (body, html) 5. Shared header & nav (.site-header / .site-nav) 6. Category grid — index.html / works-lander.html 7. Photo gallery grid — works-digital.html (and any future works-.html pages) 8. Lightbox — the full-screen photo viewer 9. About / Contact page layout — about.html, contact.html 10. Contact form — contact.html 11. Responsive media queries ===================================================================== */ /* ===================================================================== 1. CSS VARIABLES ===================================================================== */ :root { /* THE site font. Every font-family rule in this file points at this one variable, so changing the font anywhere on the site — including the gallery page — means editing this single line, nowhere else. To use a DIFFERENT font on just one page instead, give that page's an id (index.html, works-lander.html, and works-digital.html already have one) and override the variable scoped to that id, e.g.: #works-digital-page { --font-family: 'someOtherFont', sans-serif; } Custom properties inherit down from wherever they're set, so that one override automatically cascades into every rule on that page that reads var(--font-family) — body, .caption, .grid-item::after, etc. — without touching any other page. */ --font-family: 'aeroregular', sans-serif; /* Main site palette — index.html & works-lander.html */ --color-bg: #111111; --color-text: #ffffff; /* Gallery-viewer palette — works-digital.html (and any future gallery page). Kept deliberately separate from the palette above: the gallery page currently ships its own charcoal background, warm off-white text, and amber accent color instead of the main site's pure black/white. This merge preserves that as-is rather than silently unifying the two looks — say the word if you'd rather the gallery matched the main site's palette/font exactly. */ --gallery-color-bg: #14141a; --gallery-color-surface: #1e1e26; --gallery-color-text: #f2efe9; --gallery-color-text-muted: #a9a6b0; --gallery-color-accent: #f2a154; /* Size of the images in the About page's two image cells (left cell, and the top half of the right column). A single pair of parameters instead of the images always being force-stretched to fill 100% of their cell — change these two values to resize them. Any unit works (px, %, rem, vh...). The cell itself keeps centering whatever size image you set (see .about-image below), so shrinking these won't leave the image stuck in a corner. */ --about-image-width: 100%; --about-image-height: 100%; /* Size of the image in the Contact page's right-hand cell (see .contact-image below). Same idea as --about-image-width/height above, but kept as its own pair of variables since the Contact page's image is deliberately smaller than the About page's — change these two values to resize just this image. Any unit works (px, %, rem, vh...); the cell itself keeps centering whatever size you set. */ --contact-image-width: 400px; /* --contact-image-height: 50%; */ /* Height of the About page's whole two-cell row (.about-grid). It's used as min-height, not height, so the row can still grow if content ever needs more room — but this is what you'll see day to day. Try a fixed unit like 600px instead of a vh value if you'd rather it stay locked regardless of viewport size. */ --about-container-height: 70vh; /* Same idea, for the Contact page's row (.contact-grid). Kept as its own variable (rather than reusing --about-container-height) so the two pages' row heights can be tuned independently. */ --contact-container-height: 70vh; /* Split between the right column's top (image) and bottom (text) cells (.about-column). Equal by default. Any grid-template-rows value works for either one — e.g. set --about-top-row to "2fr" for a taller image, or to a fixed size like "300px" to lock the image's height and let the text fill whatever's left. */ --about-top-row: 1fr; --about-bottom-row: 1fr; /* Shared */ --radius: 0px; } /* ===================================================================== 2. GLOBAL RESET Removes default browser spacing and makes sizing calculations predictable (padding/border counted INSIDE an element's width, not added on top of it) before any custom styles are applied. ===================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* Safety net: any image without its own explicit sizing rule (the hero/logo/nav images) scales down instead of overflowing on narrow viewports. Images with their own width/height + object-fit rules (.thumb-btn img, .about-image img, .contact-image img, .lightbox-image) override this via specificity, so this only affects the ones that previously had none. */ img { max-width: 100%; height: auto; display: block; } /* ===================================================================== 3. CUSTOM FONT ===================================================================== */ @font-face { font-family: 'aeroregular'; src: url('fonts/aero-webfont.woff2') format('woff2'), url('fonts/aero-webfont.woff') format('woff'), url('fonts/Aero.ttf') format('truetype'); /* FIXED: this used to point at "fonts/aero.tff" — a typo (.tff instead of .ttf) that also didn't match the actual file's capitalization (Aero.ttf). Any browser that had to fall back to the truetype source (i.e. couldn't use woff or woff2) would have failed to load the font at all. */ } /* ===================================================================== 4. BASE PAGE STYLES ===================================================================== */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); } /* Opt-in override for gallery-style pages — add class="page-gallery" to (see works-digital.html) to switch to the gallery color palette instead of the main site's. Font is intentionally NOT overridden here anymore — every page now shares the one var(--font-family) set at :root above, so this class only controls color/layout, not typeface. */ body.page-gallery { background: var(--gallery-color-bg); color: var(--gallery-color-text); min-height: 100vh; display: flex; flex-direction: column; /* stacks header / grid vertically */ } /* Small centering helper — replaces the deprecated align="center" HTML attribute that index.html used to use. */ .center { text-align: center; } /* Images are now display:block (see the global img rule above) so text-align:center no longer centers them on its own — block elements center via margin, not text-align. */ .center img { margin: 0 auto; } /* ===================================================================== 5. SHARED HEADER & NAV Used by works-lander.html and works-digital.html: logo on the left, primary nav links pushed to the right. (index.html doesn't use this — its header is just a centered logo, see .center above.) Previously this exact layout was written out as inline styles on every single link, on every page — pulled out here so it only needs to be defined, and changed, in one place. ===================================================================== */ .site-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; } .site-nav { display: flex; align-items: center; } .site-nav a { text-decoration: none; color: inherit; /* follows whichever palette the page is using */ margin-right: 20px; font-size: 20px; } .site-nav a:last-child { margin-right: 0; /* no trailing gap after the last nav link */ } /* Small screens: stack logo above nav links instead of side-by-side, so the header reads top-to-bottom above the rest of the page content. */ @media (max-width: 600px) { .site-header { flex-direction: column; align-items: center; gap: 0.75rem; } .site-nav { flex-wrap: wrap; justify-content: center; } } /* ===================================================================== 6. CATEGORY GRID — index.html / works-lander.html A responsive grid of clickable category tiles, each with a background-image thumbnail and a caption that appears on hover. ===================================================================== */ .container { width: min(1400px, 95%); margin: 40px auto; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-item { position: relative; border: none; padding: 0; cursor: pointer; aspect-ratio: 16/9; background-size: cover; background-position: center; overflow: hidden; border-radius: var(--radius); transition: transform .3s ease; } /* Slightly enlarges the tile on hover — gated to real mouse/hover input only (see the touch-device query below for why). */ @media (hover: hover) and (pointer: fine) { .grid-item:hover { transform: scale(1.02); } } /* Invisible layer over each tile, used to display the caption on hover (desktop). On tablet/mobile the overlay is shown permanently instead — see the touch-device media query below. */ .overlay { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0); transition: background .35s ease; } @media (hover: hover) and (pointer: fine) { .grid-item:hover .overlay { background: rgba(0, 0, 0, .75); } } /* Caption text shown in the center of the overlay. On desktop this text is inserted into the .caption element by js/script.js on hover (a typewriter effect). That JS-driven text never appears on tablet/mobile (no hover event there), so the touch-device media query below renders the caption straight from each tile's data-text attribute instead, independent of the JS. */ .caption { color: var(--color-text); font-family: var(--font-family); font-size: 2rem; letter-spacing: 2px; text-align: center; white-space: nowrap; min-height: 2.5rem; } /* ===================================================================== 7. PHOTO GALLERY GRID — works-digital.html The thumbnail grid built dynamically by js/script-gallery.js. Reusable as-is by any future works-.html gallery page. ===================================================================== */ .grid-gallery { display: grid; /* Fixed 3-column layout on most screens; the two narrow-viewport media queries below switch to an auto-fill layout for small/short screens instead. A fully fluid repeat(auto-fill, minmax(clamp(...), 1fr)) approach (auto- sizing columns at every width, not just the narrow ones) was tried during development — worth revisiting if you want the column count to reflow smoothly at every screen size instead of the current fixed-3-then-narrow-override behavior. */ grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: 100%; margin: 0 auto; /* centers the grid horizontally on wide screens */ padding: 1.25rem; /* Vertically centers a short grid within the available space; items still fill from the top-left as normal. */ align-content: center; } /* Each thumbnail is a real