/* ========================================================================== chrome.css — UI-2 #siteHeader, #toolbar, .site-footer Consumes tokens from tokens.css (UI-1) and inherits base.css's global button/link reset + generic :focus-visible halo — only overridden below where a component sits on an arbitrary photograph (needs the theme-INVARIANT cinema tokens instead) or is clipped by overflow:hidden. Load order: tokens → base → hero → chrome → grid → lightbox → motion. ========================================================================== */ /* ========================================================================== #siteHeader ========================================================================== */ #siteHeader { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header, 50); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 1rem); padding-inline: var(--space-fluid-md, 2rem); padding-block: var(--space-fluid-sm, 1.5rem); padding-top: calc(var(--space-fluid-sm, 1.5rem) + env(safe-area-inset-top)); /* taller than the condensed state by design — see body.is-scrolled below, which pins this to the real --header-h base.css uses for scroll-padding */ min-height: calc(var(--header-h, 4rem) + 1.25rem); /* pre-scroll: fully transparent, sits directly on the hero photo */ background: transparent; border-bottom: 1px solid transparent; -webkit-backdrop-filter: none; backdrop-filter: none; /* light-on-photo type by default — the theme-invariant cinema token, same one hero.css uses, guaranteed legible over any photo regardless of which site theme is active */ color: var(--color-scrim-text, #f7f1e6); transition: background var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), padding var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), min-height var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), border-color var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), backdrop-filter var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), color var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } /* condensed state — JS adds .is-scrolled to once past the hero. min-height pins exactly to --header-h so it matches base.css's `html { scroll-padding-top: var(--header-h); }` for anchor-scroll offset. */ body.is-scrolled #siteHeader { min-height: var(--header-h, 4rem); padding-block: 0; padding-top: env(safe-area-inset-top); /* translucent background only (not element opacity), so text/controls stay fully legible while the blur reads as "over the photos" beneath */ background: color-mix(in srgb, var(--color-surface, #14110f) 92%, transparent); -webkit-backdrop-filter: blur(var(--blur-md, 16px)) saturate(1.4); backdrop-filter: blur(var(--blur-md, 16px)) saturate(1.4); border-bottom: 1px solid var(--color-border, #332c26); color: var(--color-text-primary, #f3ead9); } /* -------------------------- brand -------------------------- */ .site-header__brand { display: flex; align-items: baseline; gap: .6em; color: inherit; text-decoration: none; line-height: 1; min-width: 0; } .site-header__names { min-width: 0; /* allow this flex item to actually shrink so ellipsis can fire */ font-family: var(--font-display, 'Dancing Script', cursive); font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-header__date { display: none; /* dropped on mobile — tighten to essentials */ font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .75rem); letter-spacing: var(--tracking-widest, .24em); /* matches hero__date's treatment */ opacity: .72; white-space: nowrap; } @media (min-width: 48rem) { .site-header__date { display: inline; } } /* -------------------------- nav -------------------------- */ .site-header__nav { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; } @media (min-width: 48rem) { .site-header__nav { gap: var(--space-3, .75rem); } } .site-header__link { appearance: none; border: 0; background: transparent; color: inherit; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .78rem); letter-spacing: var(--tracking-wide, .04em); padding: .5rem .6rem; border-radius: var(--radius-sm, .375rem); cursor: pointer; opacity: .88; transition: background var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), opacity var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } .site-header__link:hover { opacity: 1; background: color-mix(in srgb, var(--color-scrim-text, #f7f1e6) 12%, transparent); } body.is-scrolled .site-header__link:hover { background: color-mix(in srgb, var(--color-text-primary, #f3ead9) 10%, transparent); } .site-header__cta { appearance: none; display: inline-flex; align-items: center; color: inherit; text-decoration: none; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .78rem); letter-spacing: var(--tracking-wide, .04em); padding: .5rem .95rem; border: 1px solid var(--color-scrim-border, rgba(247, 241, 230, .35)); border-radius: var(--radius-full, 999px); white-space: nowrap; transition: background var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), border-color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } .site-header__cta:hover { background: var(--color-scrim-text, #f7f1e6); border-color: var(--color-scrim-text, #f7f1e6); color: var(--color-ink, #0b0908); } body.is-scrolled .site-header__cta { border-color: var(--color-border-strong, #473e35); } body.is-scrolled .site-header__cta:hover { background: var(--color-accent, #cf9484); border-color: var(--color-accent, #cf9484); color: var(--color-text-inverse, #17120f); } /* base.css already gives every button/link a generic :focus-visible halo (surface gap + accent ring) — but pre-scroll this control sits on an arbitrary photo, where a theme-surface-colored gap could disappear or clash. Pin it to the same constant ink/scrim pair hero.css uses for its own on-photo controls; once condensed (on the real chrome surface) the normal theme-aware halo is correct, so restate it explicitly there. */ .site-header__link:focus-visible, .site-header__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-ink, #0b0908), 0 0 0 6px var(--color-scrim-text, #f7f1e6); } body.is-scrolled .site-header__link:focus-visible, body.is-scrolled .site-header__cta:focus-visible { box-shadow: 0 0 0 3px var(--color-surface, #14110f), 0 0 0 6px var(--color-accent, #cf9484); } /* -------------------------- scroll progress -------------------------- */ #scrollProgress { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--color-scrim-border, rgba(247, 241, 230, .35)); overflow: hidden; } body.is-scrolled #scrollProgress { background: var(--color-border, #332c26); } #scrollProgress span { display: block; height: 100%; width: 0%; background: var(--color-scrim-accent, #cf9484); transition: width var(--dur-fast, 180ms) linear; } body.is-scrolled #scrollProgress span { background: var(--color-accent, #cf9484); } /* mobile: keep the essentials, never crowd a 375px screen */ @media (max-width: 47.9375rem) { #siteHeader { gap: var(--space-3, .75rem); } .site-header__link { padding: .5rem .45rem; font-size: var(--text-xs, .72rem); } .site-header__cta { padding: .5rem .7rem; font-size: var(--text-xs, .72rem); } } /* ========================================================================== #toolbar ========================================================================== */ #toolbar { position: sticky; top: var(--header-h, 4rem); z-index: var(--z-toolbar, 40); background: color-mix(in srgb, var(--color-surface, #14110f) 88%, transparent); -webkit-backdrop-filter: blur(var(--blur-md, 16px)); backdrop-filter: blur(var(--blur-md, 16px)); border-bottom: 1px solid var(--color-border, #332c26); } .toolbar__inner { max-width: var(--content-max, 90rem); margin-inline: auto; padding-inline: var(--space-fluid-md, 2rem); padding-block: .65rem; display: flex; align-items: center; gap: var(--space-4, 1rem); } .toolbar__count { flex-shrink: 0; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .75rem); letter-spacing: var(--tracking-wide, .04em); color: var(--color-text-muted, #8d8175); white-space: nowrap; } .toolbar__count strong { color: var(--color-text-primary, #f3ead9); font-weight: var(--weight-semibold, 600); } /* -------------------------- groups -------------------------- */ .toolbar__group { display: flex; flex-wrap: wrap; /* safe default if :has() below is ever unsupported */ align-items: center; gap: .4rem; min-width: 0; } /* the filter-chip group: horizontal scroll on narrow screens, no wrap ever */ .toolbar__group:has(.chip) { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding-block: .1rem; /* room for the focus ring */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); } .toolbar__group:has(.chip)::-webkit-scrollbar { display: none; } /* the layout-switcher group: compact segmented control, never scrolls */ .toolbar__group:has(.icon-btn) { position: relative; flex-shrink: 0; padding: .25rem; background: var(--color-surface-elevated, #1e1916); border-radius: var(--radius-full, 999px); isolation: isolate; } .toolbar__group:has(.icon-btn)::before { content: ""; position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc((100% - .5rem) / 3); background: var(--color-accent, #cf9484); border-radius: var(--radius-full, 999px); z-index: 0; /* spring easing — tokens.css names "tile hovers" explicitly for this curve; the sliding pill gets the same alive, lightly-overshooting feel */ transition: transform var(--dur-base, 300ms) var(--ease-spring-soft, cubic-bezier(.3, 1.2, .4, 1)); } .toolbar__group:has(> .icon-btn:nth-of-type(2).is-active)::before { transform: translateX(100%); } .toolbar__group:has(> .icon-btn:nth-of-type(3).is-active)::before { transform: translateX(200%); } /* -------------------------- chip -------------------------- */ /* (focus-visible intentionally not redeclared — this sits on the toolbar's normal chrome surface, so base.css's generic surface+accent halo already reads correctly and follows the pill's border-radius automatically) */ .chip { appearance: none; flex-shrink: 0; scroll-snap-align: start; cursor: pointer; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .78rem); letter-spacing: var(--tracking-wide, .04em); color: var(--color-text-muted, #8d8175); background: transparent; border: 1px solid var(--color-border, #332c26); border-radius: var(--radius-full, 999px); padding: .45rem 1rem; transition: background var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), border-color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), transform var(--dur-fast, 180ms) var(--ease-spring-soft, cubic-bezier(.3, 1.2, .4, 1)); } .chip:hover { border-color: var(--color-accent, #cf9484); color: var(--color-text-primary, #f3ead9); } .chip:active { transform: scale(.96); } .chip.is-active { background: var(--color-accent, #cf9484); border-color: var(--color-accent, #cf9484); color: var(--color-text-inverse, #17120f); } /* -------------------------- icon-btn (segmented control) -------------------------- */ .icon-btn { position: relative; z-index: 1; flex: 1 1 0; appearance: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .74rem); letter-spacing: var(--tracking-wide, .04em); color: var(--color-text-muted, #8d8175); padding: .45rem .85rem; border-radius: var(--radius-full, 999px); transition: color var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } .icon-btn.is-active { color: var(--color-text-inverse, #17120f); } /* progressive-enhancement fallback for browsers without :has() support — without it there is no sliding pill, so give each active segment its own solid fill instead */ @supports not selector(:has(a)) { .icon-btn.is-active { background: var(--color-accent, #cf9484); } } /* ========================================================================== .site-footer ========================================================================== */ .site-footer { background: var(--color-surface, #14110f); border-top: 1px solid var(--color-border, #332c26); } .site-footer__inner { max-width: var(--prose-max, 42rem); margin-inline: auto; padding-inline: var(--space-fluid-md, 2rem); padding-block: var(--space-fluid-xl, 6rem) var(--space-fluid-lg, 4rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3, .75rem); } .site-footer__title { font-family: var(--font-display, 'Dancing Script', cursive); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); color: var(--color-text-primary, #f3ead9); line-height: var(--leading-tight, 1.1); } .site-footer__date { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-sm, .85rem); letter-spacing: var(--tracking-widest, .24em); color: var(--color-text-muted, #8d8175); } .site-footer__credit { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-sm, .85rem); color: var(--color-text-muted, #8d8175); margin-top: var(--space-4, 1rem); } /* #creditLink has no class in the fixed markup, so base.css's `a:not([class])` underline rule would otherwise apply — the ID selector here outranks it and swaps in a custom animated reveal instead. The ring itself is left to base.css's generic :focus-visible halo (this sits on the footer's normal surface, not a photo), only the underline is ours. */ #creditLink { position: relative; color: var(--color-text-primary, #f3ead9); text-decoration: none; padding-bottom: .15rem; transition: color var(--dur-base, 300ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } #creditLink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent, #cf9484); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base, 300ms) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)); } #creditLink:hover, #creditLink:focus-visible { color: var(--color-accent, #cf9484); } #creditLink:hover::after, #creditLink:focus-visible::after { transform: scaleX(1); } .site-footer__top { appearance: none; border: 1px solid var(--color-border-strong, #473e35); background: transparent; color: var(--color-text-muted, #8d8175); font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-xs, .75rem); letter-spacing: var(--tracking-widest, .24em); text-transform: uppercase; padding: .6rem 1.3rem; border-radius: var(--radius-full, 999px); cursor: pointer; margin-top: var(--space-5, 1.5rem); transition: border-color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)), background var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(.22, .61, .36, 1)); } .site-footer__top:hover { border-color: var(--color-accent, #cf9484); color: var(--color-text-primary, #f3ead9); background: var(--color-accent-soft, rgba(207, 148, 132, .14)); } /* ========================================================================== #galleryEnd — centred typographic end-mark ========================================================================== */ .gallery__end { position: relative; text-align: center; max-width: var(--prose-max, 42rem); margin-inline: auto; padding-block: var(--space-fluid-lg, 4rem) var(--space-fluid-md, 2.5rem); font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--text-sm, .8rem); letter-spacing: var(--tracking-wider, .08em); color: var(--color-text-muted, #8d8175); } .gallery__end::before { content: ""; display: block; width: 2.75rem; height: 1px; margin: 0 auto .9rem; background: var(--color-border, #332c26); } .gallery__end::after { content: ""; display: block; width: .3rem; height: .3rem; margin: .9rem auto 0; background: var(--color-accent, #cf9484); transform: rotate(45deg); } /* ========================================================================== Reduced motion — kill transform-driven movement and long fades; simple color/opacity swaps become instant. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #siteHeader, .site-header__link, .site-header__cta, #scrollProgress span, .toolbar__group:has(.icon-btn)::before, .chip, .icon-btn, #creditLink, #creditLink::after, .site-footer__top { transition: none; } .chip:active { transform: none; } }