/* ═══════════════════════════════════════════════════════════════════════════ styles.css — Funky Side of Town Single stylesheet for ALL pages. Edit here to change the look site-wide. Fonts: Playfair Display (body, Google Fonts) + brother-1816 (headings/nav, Adobe Typekit) — both loaded in each HTML file's . ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Base ───────────────────────────────────────────────────────────────────── */ html, body { height: 100%; background: #fefefe; color: #222; font-family: 'Playfair Display', serif; font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'brother-1816', 'Playfair Display', serif; font-weight: 600; } /* The ONE variable that sets where content starts below the fixed header. Everything else (view paddings) is zero — tune this, nothing else. */ body { padding-top: var(--content-top, 40px); } .hidden { display: none !important; } /* ─── Layout variables ─────────────────────────────────────────────────────── Base values first, breakpoint overrides BELOW them — media queries add no specificity, so for equal selectors the later rule in the file wins. */ :root { --content-top: 40px; /* content start below the fixed header */ --scroll-top: 30px; /* where a deep-linked/clicked photo lands (+ group margin) */ } @media (max-width: 600px) { :root { --content-top: 150px; --scroll-top: 60px; } } /* ─── Header (.hdr wraps .logo + .navigation) ───────────────────────────────── */ /* Desktop: .hdr is a non-positioning pass-through — .logo and .navigation stay independently fixed, each with its own glass pill. Mobile overrides below turn .hdr itself into the single positioned/pilled element and demote .logo/.navigation to plain stacked children. Glass pill: background/blur/shadow fade in via --hdr-t (0 at page top → 1 after 300px, set by shared.js) so the header reads as plain text until it needs to stand out over scrolled content. Padding gives the pill its shape; it sizes to its own content, not the full page width. */ :root { --hdr-gap: calc(18px - var(--hdr-t, 0) * 10px); --hdr-radius: 3px; } .hdr { display: contents; } .logo { position: fixed; top: var(--hdr-gap); left: 15px; margin: 0; z-index: 200; font-size: 18px; font-weight: 600; text-transform: uppercase; padding: 4px 7px; border-radius: var(--hdr-radius); background: rgba(255, 255, 255, calc(var(--hdr-t, 0) * 0.6)); backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); box-shadow: 0 2px 14px rgba(0, 0, 0, calc(var(--hdr-t, 0) * 0.08)); transition: background 0.2s, box-shadow 0.2s; } .logo a { display: block; cursor: pointer; text-decoration: none; color: #111; transition: color 0.2s; } .logo a:active { transform: scale(0.99); } /* Inside an album (grid/feed), a back button pill sits to the left of the logo — the logo shifts right to make room so the two read as one group. js/albums.js toggles body.has-back. */ body.has-back .logo { left: 49px; } /* ─── Back button (albums grid/feed) ────────────────────────────────────────── */ /* Text button styled like .navigation (same font/glass pill), fixed to the left of the logo on desktop. js/albums.js toggles .hidden per view. */ .btn-back { position: fixed; top: var(--hdr-gap); left: 15px; z-index: 201; display: flex; align-items: center; justify-content: center; height: 34px; font-family: 'brother-1816', 'Playfair Display', serif; font-size: 20px; font-weight: 600; line-height: 1; color: #111; border: none; cursor: pointer; padding: 0 9px; border-radius: var(--hdr-radius); background: rgba(255, 255, 255, calc(var(--hdr-t, 0) * 0.6)); backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); box-shadow: 0 2px 14px rgba(0, 0, 0, calc(var(--hdr-t, 0) * 0.08)); transition: background 0.2s, box-shadow 0.2s; } .btn-back:active { transform: scale(0.99); } /* The ‹ glyph sits visually low/off-center within its line box (font metric quirk) — nudged via its own inline element rather than fighting the button's flex-centering. */ .btn-back-glyph { position: relative; top: -2px; } /* ─── Navigation ─────────────────────────────────────────────────────────────── */ .navigation { font-family: 'brother-1816', 'Playfair Display', serif; font-size: 15px; font-weight: 600; text-transform: uppercase; position: fixed; top: var(--hdr-gap); right: 15px; z-index: 200; color: #777; padding: 4.5px 8px; border-radius: var(--hdr-radius); background: rgba(255, 255, 255, calc(var(--hdr-t, 0) * 0.6)); backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); box-shadow: 0 2px 14px rgba(0, 0, 0, calc(var(--hdr-t, 0) * 0.08)); transition: background 0.2s, box-shadow 0.2s; } .navigation a { color: #111; text-decoration: none; transition: color 0.3s; } .navigation a:hover { color: #000; } .navigation a:active { transform: scale(0.99); } .navigation span { color: #777; } /* Desktop-only tagline. Positioned by js/shared.js at the true midpoint between the logo and nav pills (their content lengths differ, so a viewport-center CSS trick drifts visibly off the real gap) — the `left` here is just an initial value before that JS runs. Hidden below 1100px so it never crowds or overlaps them on a narrower desktop window; the mobile media query below hides it outright since .hdr becomes a single merged pill there. */ .hdr-tagline { display: none; align-items: center; justify-content: center; position: fixed; top: var(--hdr-gap); height: 31px; /* matches .navigation's rendered height, for exact vertical centering */ left: 50%; transform: translateX(-50%); z-index: 199; font-family: 'Playfair Display', serif; font-size: 17px; font-weight: normal; letter-spacing: 0.02em; color: #b8b8b8; opacity: calc(1 - var(--hdr-t, 0)); pointer-events: none; white-space: nowrap; transition: opacity 0.2s; } @media (min-width: 1100px) { .hdr-tagline { display: flex; } } /* Mobile: .hdr itself becomes the single fixed, centered glass pill — logo and nav stack inside it as plain text with no background of their own. The pill starts roomy and tightens smoothly over the first 300px of scroll (logo/nav padding-block and gap shrink) — driven by --hdr-t (0 at page top → 1 after 300px, set by shared.js). */ @media (max-width: 700px) { .hdr { display: flex; flex-direction: column; align-items: center; position: fixed; left: 50%; top: var(--hdr-gap); z-index: 200; width: max-content; transform: translateX(-50%); padding: calc(14px - var(--hdr-t, 0) * 6px) calc(18px - var(--hdr-t, 0) * 4px); border-radius: var(--hdr-radius); background: rgba(255, 255, 255, calc(var(--hdr-t, 0) * 0.6)); backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--hdr-t, 0) * 14px)); box-shadow: 0 2px 14px rgba(0, 0, 0, calc(var(--hdr-t, 0) * 0.08)); transition: background 0.2s, box-shadow 0.2s; } .logo { position: static; padding: 0; margin: 0 0 calc(6px - var(--hdr-t, 0) * 2px); background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 19px; } .logo a { display: inline-block; } .navigation { position: static; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 15px; } /* Back button becomes its own separate pill anchored to the left edge, same glass treatment as .hdr, instead of sitting next to the logo. */ .btn-back { left: 15px; font-size: 22px; } } /* ─── About page ─────────────────────────────────────────────────────────────── */ .about { padding: 56px 20px 60px; max-width: 540px; margin: 0 auto; } @media (max-width: 600px) { .about { padding-top: 22px; } } .about h1 { font-size: 30px; font-weight: bold; padding-bottom: 35px; } .about p { line-height: 26px; padding-bottom: 25px; } .about a { color: #222; border-bottom: solid 1px #444; text-decoration: none; transition: border-color 0.2s; } .about a:hover { border-color: #000; } .about img { width: 100%; height: auto; padding-bottom: 25px; } .end { font-family: 'brother-1816', 'Playfair Display', serif; font-weight: 600; text-align: center; color: #222; font-size: 24px; padding: 40px 0 60px; } /* Home / photos grid / albums: the sign-off mark is a clickable scroll-to-top control (js/shared.js), so it needs button resets plus a hover/active affordance the plain .end mark (About) doesn't have. */ .end-scroll { display: block; width: 100%; background: none; border: none; font-family: inherit; font-weight: inherit; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; } .end-scroll:hover { opacity: 1; } .end-scroll:active { transform: scale(0.96); } /* ︿ renders much wider than × at the same font-size — scaled down on its own inline element so the glyph matches ×'s visual width while the button itself keeps its full click target and layout metrics. */ .end-scroll-glyph { display: inline-block; transform: scale(0.6); } /* ─── Grid view ─────────────────────────────────────────────────────────────── */ #grid-view { min-height: 100vh; margin-top: 30px; } /* The grid's spacing has exactly two knobs, set per breakpoint below: --gap — gap between photos, both axes --cols — number of columns Everything else (tile width, gutter sizer, margins) derives from them. IMPORTANT: this container must have NO padding — Masonry's percentPosition computes against the content box while the absolutely-positioned tiles resolve their %-values against the padding box, so any padding here skews horizontal gaps and page margins. Page inset is margin instead. */ .masonry-grid { --gap: 10px; --cols: 5; margin: 0 15px 15px; } /* Sizer elements used by Masonry.js for responsive column/gutter calculation */ .masonry-col-sizer, .photo-tile { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); } .masonry-gutter-sizer { width: var(--gap); } .photo-tile { margin-bottom: var(--gap); cursor: pointer; overflow: hidden; background: #eee; } .photo-tile img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .photo-tile:hover img { transform: scale(1.02); } @media (max-width: 900px) { .masonry-grid { --cols: 3; } } @media (max-width: 600px) { .masonry-grid { --gap: 4px; margin: 0 5px 5px; } } /* ─── Flowing feed (home + album feed) ──────────────────────────────────────── */ .feed { --feed-gap: 10px; /* single knob: photo gaps within a group, both axes */ margin: 0 auto; padding: 0 20px 80px; /* flex column so the groups' equal top/bottom margins stack instead of collapsing into each other */ display: flex; flex-direction: column; } /* Each group is as large as possible while fully visible: width is capped by the container, or by what fits in the viewport height (minus header room and the gaps between rows) at the group's aspect ratio (--group-ar, set by renderFeed). */ .feed-group { margin: 36px auto; width: min(100%, calc((100vh - 110px - var(--row-gaps, 0px)) * var(--group-ar, 999))); width: min(100%, calc((100svh - 110px - var(--row-gaps, 0px)) * var(--group-ar, 999))); } .feed-row { display: flex; gap: var(--feed-gap); margin-bottom: var(--feed-gap); } .feed-row:last-child { margin-bottom: 0; } /* Cells get flex-grow proportional to aspect ratio (set inline by renderFeed), which aligns all photos in a row to the same height. */ .feed-cell { min-width: 0; } .feed-cell img { width: 100%; height: auto; display: block; background: #eee; } @media (max-width: 700px) { .feed { --feed-gap: 6px; padding: 0 8px 48px; } .feed-group { margin-top: 20px; margin-bottom: 20px; } /* Pairs stay side by side on mobile; rows of 3 stack vertically */ .feed-row:not(.feed-row--pair) { flex-direction: column; } .feed-row:not(.feed-row--pair) .feed-cell { flex: none !important; } } /* ─── Albums page ───────────────────────────────────────────────────────────── */ #albums-view { /* min-height: 100vh; */ margin-top: 60px; } .albums-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: 32px; /* box-sizing: border-box (global reset) means padding eats into this width, so it must be added back on top of the 4-column track budget. */ max-width: calc(4 * 260px + 3 * 32px + 2 * 24px); margin: 0 auto; padding: 0 24px 24px; } @media (max-width: 600px) { .albums-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 14px 14px; } } .album-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; } /* Stack of cover photos: all straight, overlapping each other messily. On hover they shift slightly and some pick up a subtle rotation. */ .album-stack { position: relative; width: 100%; aspect-ratio: 1; } .album-stack img { position: absolute; top: 50%; left: 50%; width: 78%; height: 78%; object-fit: cover; background: #eee; border: 3px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.18); transition: transform 0.4s ease; } /* Messy resting offsets — straight, no rotation */ .album-stack img:nth-child(1) { transform: translate(-55%, -48%); } .album-stack img:nth-child(2) { transform: translate(-45%, -55%); } .album-stack img:nth-child(3) { transform: translate(-52%, -43%); } .album-stack img:nth-child(4) { transform: translate(-43%, -47%); } .album-stack img:nth-child(5) { transform: translate(-50%, -52%); } .album-stack-placeholder { position: absolute; inset: 0; background: #e8e8e8; border-radius: 4px; border: 1px dashed rgba(0,0,0,0.15); } /* Subtle scatter on hover: small shifts, some rotate a touch */ .album-card:hover .album-stack img:nth-child(1) { transform: translate(-58%, -50%) rotate(-2deg); } .album-card:hover .album-stack img:nth-child(2) { transform: translate(-42%, -58%) rotate(1.5deg); } .album-card:hover .album-stack img:nth-child(3) { transform: translate(-53%, -40%); } .album-card:hover .album-stack img:nth-child(4) { transform: translate(-40%, -46%) rotate(2.5deg); } .album-card:hover .album-stack img:nth-child(5) { transform: translate(-50%, -55%) rotate(-1deg); } .album-info { text-align: center; } .album-info h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; } .album-count { font-weight: 300; opacity: 0.55; } /* ─── Album grid view ────────────────────────────────────────────────────────── */ #album-grid-view { min-height: 100vh; } .album-grid-header { display: flex; align-items: center; gap: 16px; padding: 0 15px 14px; margin-top: 20px; } .album-grid-header h1 { font-size: 1.5rem; font-weight: 500; text-align: center; width: 100%; padding-bottom: 45px; } @media (max-width: 700px) { .album-grid-header { margin-top: 0px; } .album-grid-header h1 { margin-top: -20px; } } .album-empty { padding: 48px 24px; opacity: 0.4; font-size: 0.9rem; } /* ─── Spicy Town dark theme ────────────────────────────────────────────────── Site-wide override: black background, white text. Glass-pill header keeps its scroll-fade behavior but blends white instead of the light theme's white-on-white (so it still reads as "frosted" once scrolled). */ html, body { background: #0a0a0a; color: #f2f2f2; } .logo a, .btn-back, .navigation a { color: #f2f2f2; } .navigation a:hover { color: #fff; } .navigation span { color: #999; } .logo, .btn-back, .navigation { background: rgba(20, 20, 20, calc(var(--hdr-t, 0) * 0.75)); box-shadow: 0 2px 14px rgba(0, 0, 0, calc(var(--hdr-t, 0) * 0.4)); } .end { color: #f2f2f2; } .photo-tile, .feed-cell img { background: #1a1a1a; }